[디자인부트캠프] Chapter 9. UI 디자인 실전(1)

1. 앱 UI 디자인의 기본 원칙

1. 사용자 중심 디자인(User-Centered Design)

 

디자인은 디자이너가 아닌 사용자에게 의미있어야 한다. 사용자의 목표, 행동, 감정을 깊이 이해하고 반영하는 게 핵심!

미적 요소<사용 경험

에어비앤비의 사례

 

2. 시각적 계층 구조(Visual Hierarchy)

 

사용자가 어디를 먼저 봐야 할지 자연스럽게 인식하게! 정보의 중요도에 따라 크기, 색상, 배치로 구분 / 강약 조절로 사용자 흐름을 매끄럽게

유튜브의 사례 / 카카오톡의 사례

 

3. 일관성(Consistency)

 

한번 배운 사용방식이 앱 전체에 통용 버튼 스타일, 폰트, 색상, 아이콘의 의미 등이 앱 전체에서 일관성 있게 반복

➡ 익숙함이 생겨야 사용자가 더 빠르고 편하게 앱을 사용한다

 

✅ 앱에서 버튼을 누를 때 다른 화면의 버튼들과 같은 룰이 적용되는지 확인

인스타그램의 사례

 

2. 앱 디자인의 화면 예시

온보딩 화면

앱을 처음 설치했을 때 사용자를 환영하고 핵심 기능을 소개하는 화면

 

• 슬라이드 형식의 설명
• "로그인" 또는 "회원가입"으로 이동 유도
• 비주얼 요소(일러스트, 아이콘 등)을 활용해 직관적으로 이해되게 구성

✅ 분석 포인트

메시지가 명확한가?
지나치게 길거나 복잡하지 않은가?
스킵(Skip) 기능이 있는가?

📌 이 앱 나한테 유용한가? ➡ "쓸만하네!"

듀오링고 온보딩 / 넷플릭스 온보딩

3. 앱 화면의 주요 구성 요소

헤더(Header)	화면 상단의 타이틀&주요 네비게이션
메인 콘텐츠 영역(Main Content)	사용자가 가장 자주 상호작용하는 영역
푸터(Footer)	하단 네비게이션 or 주요 버튼 배치

 

🔍 좋은 화면 구성의 예시 분석

F, Z 패턴이 적절히 혼합된 네이버의 사례

F 패턴	Z 패턴
ㆍ알파벳 F 형태로 시선이 흐르는 패턴 ㆍ상단 수평➡중간 수평➡왼쪽 수직 순으로 스캔 ㆍ주요 키워드/문장: 좌측 상단or상단 중앙에 집중 ㆍ긴 스크롤, 검색 엔진 결과, 뉴스 기사와 목록 등	ㆍ알파벳 Z 형태로 시선이 흐르는 패턴 ㆍ왼쪽 상단➡오른쪽 상단➡왼쪽 하단➡오른쪽 하단 순으로 스캔 ㆍ텍스틀보다 시각 요소가 많을 때 적합(랜딩, 포폴, 광고 배너 등)

4. 디자인 프로세스&사용자 흐름 설계

🗺 디자인 프로세스 개요

 

1단계) 사용자 요구분석 : 사용자의 목표, 문제점, 기대 가치를 파악하여 디자인 방향을 설정

• 인터뷰/설문조사: 실제 사용자나 잠재 고객과 진행하여 니즈 확인
• 경쟁사 분석: 유사 서비스의 구조, 기능 비교
• 페르소나 설정: 대표 사용자 유형(성향, 목표,문제)을 상정하여 시각화
• 사용자 여정 맵(User Journey Map): 사용자가 서비스 내에서 겪는 흐름과 감정의 변화

JTBD(Jobs To Be Done) - 고객이 제품이나 서비스를 통해 해결하고자 하는 해야 할 일 또는 문제 해결

 

2단계) 와이어프레임 작성 : 실제 디자인 전 기능 배치&레이아웃 구조 시각적 설계

• 페이지별 구성요소 정의(버튼, 헤더, 콘텐츠 영역…)
• 정보 우선순위
• 반복되는 UI 구조 정의(리스트, 카드, 모달 등)

3단계) UI 스타일 가이드 적용 : 일관성과 브랜딩을 전체 디자인에 부여하는 시각적 기준 수립

• 색상 팔레트: 주요(Primary) 색상, 강조 색상, 배경/텍스트 색상 등
• 타이포그래피: 폰트 종류, 크기, 간격 등
• 버튼 스타일: 기본 상태 /호버(hover) - 마우스 올림 상태 / 비활성화 상태
• 아이콘 가이드: 사용 규칙, 크기 등
• 컴포넌트 라이브러리: 카드, 모달, 입력창 등 자주 쓰이는 요소

4단계) 프로토타입 제작 : 실제 동작처럼 느껴지는 인터렉티브 시뮬레이션으로 사용자 테스트 및 피드백 수집

• 클릭, 터치, 전환 애니메이션
• 사용자 흐름에 따른 화면 연결
• 핵심 기능 시나리오 테스트

와이어프레임 / 스타일 가이드 / 프로토타입