[내일 배움 캠프] 6일차

UI디자인의 핵심 원리

• 사용자 이해하기

• 직관적인 디자인

• 일관된 디자인

• 가독성을 고려한 디자인

• 명확한 피드백 제공

사용자 경험을 향상 시키는 방법

• 직관적인 네비게이션

• 다양한 디바이스 지원

• 사용자 피드백 반영

UI 디자인 원리 적용 사례

1️⃣ 직관적인 디자인

선택 요소: 사용자 행동 유도, 정보를 시각적으로 표현

사례: 배달의민족 앱

배달의민족은 메인 화면에 배달, 포장, B마트 등의 버튼을 크게 배치해 사용자가 원하는 행동을 바로 선택할 수 있도록 유도한다. 또한 음식 카테고리를 아이콘과 이미지로 표현해 글을 읽지 않아도 내용을 쉽게 이해할 수 있어 직관적인 디자인이 잘 적용된 사례이다.

2️⃣ 일관된 디자인

선택 요소: 다양한 디바이스 간의 일관성, 디자인 시스템

사례: 카카오톡

카카오톡은 모바일과 PC 환경에서 채팅 화면 구성과 아이콘, 색상 사용이 동일해 기기가 달라져도 쉽게 사용할 수 있다. 또한 말풍선과 버튼 스타일이 통일된 디자인 시스템을 사용해 서비스 전반에 일관성을 유지하고 있다.

3️⃣ 가독성을 고려한 디자인

선택 요소: 여백 활용, 계층 구조

사례: 네이버 뉴스

네이버 뉴스는 기사 제목과 본문 사이에 충분한 여백을 두어 읽기 편하게 구성되어 있다. 제목은 크고 굵게, 본문은 작게 배치해 정보의 중요도가 명확히 드러나는 계층 구조를 가지고 있다.

컬러의 역할

• 중요한 정보 강조

• 사용자의 행동 유도

• 상태(State)

• 브랜드 아이덴티티

타이포그래피

사용자의 경험을 향상시키는 중요한 요소

• OS별 시스템 폰트

• Serif와 Sans-Serif

• 폰트사이즈

• 시각적 계층구조

• 일관된 폰트 스타일

• 여백과 정렬

• 브랜드 아이덴티티

아이콘

• 아이콘의 역할
복잡한 정보를 직관적이고 간결하게 표현하여 사용자의 상호작용을 돕는다.

• 일관된 아이콘
일관된 스타일을 적용하여 사용자의 인지 시간을 단축시킬 수 있다.

• 아이콘 시각 보정
사람의 눈은 착시현상으로 인해 글자나 도형이 불균형으로 보이거나 위치, 크기가 다르게 보일 수가 있다. 시각 보정을 통해 균형 있는 아이콘을 만들 수 있다.

• 아이콘 단순화

• 레이아웃과 키라인

• 배율 설정

레이아웃

특정 영역 안에 텍스트, 이미지, 여백 등 디자인 요소를 시각적으로 배치하는 것

그리드

정보와 요소를 체계적으로 배치하고, 시각적으로 통일된 디자인을 할 수 있도록 도와준다.