[디자인부트캠프] DAY 19 | UI 디자인 실전_1

DAY 19 | UI 디자인 실전_1

1. 디자인 시스템의 정의

• 디자인 시스템은 일관성 있는 디자인과 효율적인 작업을 위해 일정한 규칙, 요소, 스타일 등을 체계적으로 정리한 것.
• 제품이나 서비스의 경험을 아우르는 모든 디자인 요소를 포함.

2. 디자인 시스템 도입 이유

• 일관성 유지: 여러 디자이너가 작업할 때 스타일이나 인터페이스의 일관성 유지 가능.
• 효율성: 디자인 프로세스를 효율화하여 시간과 비용 절감.
• 품질 개선: 일관된 디자인을 통해 제품의 품질 향상.

3. 디자인 시스템의 핵심 요소

• 색상(Color): 브랜드 컬러 및 보조 색상 정의.
• 타이포그래피(Typography): 글꼴, 크기, 줄 간격 등 텍스트 스타일 규정.
• 아이콘(Iconography): 아이콘의 크기, 스타일, 용도 정의.
• 컴포넌트(Component): 버튼, 입력 필드, 카드 등 재사용 가능한 UI 요소들.

4. 디자인 시스템 구축 단계

• 1단계: 필요한 요소 선정 (색상, 타이포그래피, 아이콘 등).
• 2단계: 요소들을 체계적으로 정리하고 문서화.
• 3단계: 팀 내 활용을 위한 교육과 툴 제공.

5. 디자인 시스템의 지속적인 관리

• 업데이트: 제품이나 서비스의 변화에 따라 시스템을 지속적으로 업데이트.
• 피드백: 사용자 및 팀의 피드백을 반영하여 시스템 개선.
• 협업: 팀 내 디자이너와 개발자 간의 협업을 용이하게 하고, 효율성을 높임.

6. 디자인 시스템의 이점

• 일관성: 디자인의 일관성을 통해 사용자 경험을 향상.
• 효율성: 팀원 간의 협업 효율성을 높임.
• 품질 향상: 디자인 품질을 개선하고, 더 나은 사용자 경험을 제공.

 

네이버 화면 사용자 흐름 예시

 

---

1. 사용자 흐름(User Flow)

• 정의: 사용자가 앱에서 원하는 목표를 달성하기 위해 거치는 주요 경로를 설계합니다.
• 구성: 예시로는 '로그인 -> 홈 화면 -> 상품 상세 페이지 -> 결제 페이지'로 연결되는 흐름을 설계합니다.
• 설계 시 주의 사항:
  • 사용자가 최소한의 클릭으로 목표를 달성할 수 있도록 합니다.
  • 오류 상황에 대한 처리(예: 잘못된 입력 시 메시지 표시)를 명확히 합니다.

2. 메인 화면의 핵심 요소

• 검색 바 (Search Bar): 사용자가 원하는 정보를 빠르게 찾을 수 있도록 돕는 기능.
• 카드 레이아웃 (Card Layout): 콘텐츠를 시각적으로 구분하여 쉽게 인식할 수 있게 배치합니다.
• CTA(Call to Action) 버튼: 사용자가 주도적으로 행동을 취할 수 있도록 유도하는 버튼 디자인.

3. 레이아웃 구성 및 디자인 일관성

• 레이아웃 구성 실습:
  • 그리드 시스템을 활용하여 균형 잡힌 배치 디자인.
  • 버튼과 텍스트 크기 조정으로 가독성 및 디자인 통일성 유지.
• 디자인 스타일 가이드 적용: 색상 스타일과 타이포그래피를 일관되게 적용하여 전체 디자인의 통일성을 유지합니다.

4. 상태 UI (Loading, Error, Empty States)

• 로딩 상태 (Loading State): 콘텐츠 로딩 중 사용자에게 피드백을 제공하는 UI.
• 에러 상태 (Error State): 오류 발생 시 사용자에게 이해하기 쉬운 안내 메시지를 표시.
• 빈 상태 (Empty State): 콘텐츠가 없을 때 대체 메시지를 제공하여 사용자가 혼란스러워하지 않도록 합니다.

5. 알림(Notification) UI 설계

• 모달 알림 (Modal): 중요한 정보나 경고 메시지를 사용자가 확인할 수 있도록 전달하는 방식.
• 팝업 알림 (Popup): 이벤트나 추가 정보를 알리는 알림 방식으로 사용자가 즉시 확인할 수 있도록 합니다.

6. 디자인 리뷰 및 피드백

• 디자인 리뷰의 중요성: 팀 내 피드백을 통해 디자인의 완성도를 높이고, 사용자의 피드백을 반영하여 개선합니다.
• 디자인 리뷰 프로세스:
  1. 1차 검토: 기능적 오류와 일관성 확인.
  2. 2차 검토: 사용자 피드백을 반영하여 수정 및 개선 작업 진행.