프로젝트 구성 시, 디자인에서 고려해야 할 것들

2023년 8월, 원티드 프리온보딩 디자인 챌린지 UI/UX 요약

 

프로젝트를 구성할 때 생각해봐야 할 것들

1. 서비스 분석
   • 시장 환경
   • 유저 사용 패턴(UX Research)
     • 어떤 상황에서 유저가 서비스를 사용하고 떠올릴까?
     • 어떤 플로우로 서비스를 경험할까?
2. 문제 정의 - 사용자의 니즈에 집중!
   • 상황은 명확하지만, 서비스가 없을 때는 신규 서비스로 구성하기
   • 기존 서비스가 있지만, 유저의 니즈와 맞지 않거나 유저의 니즈를 충분하게 해결하지 못한다면, 서비스 개선으로 구성하기
3. 문제 해결 방안
   • 유저의 니즈를 피처로 만들어가는 과정으로 니즈에 따른 유저 액션 중심으로 핵심기능 구체화하기
   • 유저의 니즈에 맞게 피처를 개선하는 과정으로 사용자 여정 지도로 유저 스토리와 매칭되는 화면/플로우 확인하기
4. 정보 구조 & 와이어프레임 & 플로우 구성
5. UI 디자인
6. 프로젝트를 시작하게 된 배경 파악하기 (유저 피드백, 데이터, 아이디어 검증, 비즈니스 목표 등)
7. 문제 상황 정의와 정성적&정량적 근거 찾기
8. 개선 및 신규 피처 플로우 제안 및 근거 찾기
9. 문제가 해결되었다고 판단할 수 있는 지표 설정하기
10. 실제 화면과 서비스 플로우 구성하기
11. 릴리즈 이후에 실제 데이터 추이해보기

 

Button

Anatomy

• Label
• Padding | Width / Height
• Icon (Optional)

 

피그마 구성

Auto Layout

• 요소 간 간격을 수치로 명확하게 입력할 수 있다.
• 내부 요소의 변호에 따른 Variation에 용이하다.
• 개발자 모드로 확인 시 수치 확인이 편리하며, 설계 의도를 보다 명확하게 전달할 수 있다.

Frame 및 Group

• 요소 간 간격을 수치로 명확하게 알기 어렵다.
• 내부 요소의 변화에 따른 Variation에 대응하기 불편하다.
• Group의 경우 내부 개체의 크기가 Group의 크기에 영향을 받을 수 있다.

 

Component 등록

• 기본적인 요소 정의
  • Layout & Align
  • Padding
  • Gap
• Icons ㅡ> Boolean 속성 추가
  1. 아이콘 선택
  2. Layer ㅡ> Create Property
  3. 이름 및 값 설정

 

• Boolean 속성은 Layer를 On/Off 할 수 있는 속성이다.

 

• Icons ㅡ> Instance Swap 속성 추가
  1. 아이콘을 라이브러리 및 로컬 스타일에 컴포넌트로 등록한다.
  2. 아이콘에서 Apply Instance Swap 선택 ㅡ> Create Property
  3. 이름 및 값 설정
  4. 검색 후 변경
  5. Preferred Values 추가 가능!

 

• Instance Swap 속성, 컴포넌트 내부에 이미 정의된 컴포넌트 요소가 쓰이는 경우, 인스턴스 스왑 속성으로 다른 컴포넌트로 변경 가능
• Preferred Values 지정, 자주 사용하는 아이콘을 preferred values로 지정 가능

 

• Label ㅡ> Text 속성 추가
  1. 라벨 선택
  2. Content 오른쪽 버튼 클릭
  3. 이름 및 값 설정

 

• Text 속성, 텍스트의 값(value)을 변경할 수 있는 Property 속성

 

Variation - Variant

• Properties 추가 ㅡ> Variant
  • propertiy 이름 변경, style
• Solid - primary
• Solid - secondary
• Outline
• Text

 

Variation - Size

• Properties 추가 ㅡ> Variant
  • propertiy 이름 변경 : size
• Large 
• Medium 
• Small

 

Variation - Color

• Properties 추가 ㅡ> Variant
  • propertiy 이름 변경 : color

 

Variation - Full Width

• 고정 padding | 고정 width/height을 가지고 있는 버튼을 상황에 따라 full-width로 사용 가능
  • 고정 padding ㅡ> hug contents
  • 고정 width/height ㅡ> fixed
  • full width(가변) ㅡ> fill container

 

States

 

예시

1. 디자인 시스템 문서에 정의된 다양한 컴포넌트 Props 확인하기
2. 화면 상 쓰이는 예제를 통해 "서비스 맥락에서 컴포넌트가 가지고 있는 역할과 상황에 맞는 쓰임새 확인하기"

 

코드화 구경, 실제 코드에서 명칭을 어떻게 쓰고 있는지 확인할 수 있다.

• variant
• color
• icon
• 등

React Button component - Material UI

 

 

Anatomy, 라벨 가이드, Placement, 강조, Space 등 참조할 수 있다.

 

Material Design

 

다양한 스타일을 구경할 수 있다.

Button - Ant Design

 

조금 더 자세한 버튼 가이드라인을 확인할 수 있다.

Buttons - Gmarket Design System

 

 

Form

Anatomy

• Label
• Input Components

 

Input Components

Text-Field

• value
• placeholder
• icon
• unit
• text
• message

 

Text-Area

• value
• placeholder
• counter
• text
• message

 

Select

• placeholder
• icon (chevron)
• text
• message
• dropdown

 

Check-Box

• check box
• option label
• text message

 

Radio

• radio
• option label
• text message

 

Component

기본적인 요소 정의 

• Layout & Align 
• Padding
• Gap

 

텍스트 컨텐츠 영역 ㅡ> Text 속성 추가 

• 라벨 선택 
• Content 오른쪽 버튼 클릭 
• 이름 및 값 설정

 

• Text 속성, 텍스트의 값(value)을 변경할 수 있는 Property 속성

 

on/off로 속성값 부여 ㅡ> Boolean 속성 추가 

• 아이콘 선택 
• Layer ㅡ> Create Property 
• 이름 및 값 설정 
• Button 높이 Fill로 변경

 

• Boolean 속성, Layer를 On / Off 할 수 있는 Property 속성

 

기존 컴포넌트 사용한 경우 ㅡ> Instance Swap 속성 추가 

• 아이콘에서 Apply Instance Swap 선택 ㅡ> Create Property 
• 이름 및 값 설정 
• Preferred Values 추가 가능

 

• Instance Swap 속성, 컴포넌트 내부에 이미 정의된 컴포넌트 요소가 쓰이는 경우, 인스턴스 스왑 속성으로 다른 컴포넌트로 변경 가능
• Preferred Values 지정, 자주 사용하는 아이콘을 Preferred Values로 지정 가능

 

Variation - Variants

Properties 추가 ㅡ> Variant 

• Outline 
• Underline 
• Filled

 

Variation - Size

Properties 추가 ㅡ> Size 

• Normal 
• Big

 

States

• 입력 전, 기본 색상
• 입력 시, 색상 강하게
• 입력 후, 기본 색상 & 입력 값
• 입력 에러 시, 빨간 색상
• 입력 불가, 회색 배경색
• 입력 완료, 기본 색상 & 회색 배경

 

예시

• 디자인 시스템 문서에 정의된 다양한 컴포넌트 Props 확인하기
• 오늘 확인하지 못한 다른 Input의 Props 확인하기
• 화면상에서 쓰이는 예제를 통해 서비스 맥락에서 컴포넌트가 가지고 있는 역할과 상황에 맞는 쓰임새를 확인하기

 

 

Behaviords(동적인 상황에서의 연출), Usage guidelines, Content standards, Internationalization 등 버튼 라벨 가이드에 대한 내용을 확인할 수 있습니다.

• Text-Field에서는 Placeholder를 사용하지 말라고 하는 가이드가 있지만, 상황에 따라 적절한 Placeholder가 인지에 쉬운면이 있다.
• 절대적 가이드는 없다.

Spectrum, Adobe’s design system

 

스타일을 구경할 수 있다.

Input - Ant Design

 

Form에 대한 레이아웃이 인상적인 내용들을 확인할 수 있다.

• Alignment
• Two Column
• Structure

Carbon Design System

 

Usage, 사용 상황에 대한 내용들을 확인할 수 있다.

Components

 

Auto-Layout 질문

Input-Box 디자인을 제작할 때, 텍스트 자체에 Auto-Layout을 주는 것인가?

ㅡ> 텍스트 필드를 만들 때, 텍스트에 Auto-Layout을 추가해서 박스를 만든다.