💡 25-05-15 (목)
포기해야 할 백 가지 이유 대신에 포기하지 말아야 할 천 가지 이유를 찾자
앱 UI 디자인의 기본 원칙 이해
1️⃣ 사용자 중심 디자인
디자인은 디자이너를 위한 것이 아니라 사용자에게 의미가 있어야 한다
▶︎ 디자인이 안 이뻐도 사용자의 편리함이 좋으면 최고의 디자인으로 평가받는다
사용자의 목표, 행동, 감정을 깊이 이해하고 반영하는게 핵심 ‼️
-> 기능보다 사용 경험을 우선하는 사고방식이 필요하다
💡 에어비앤비 https://www.airbnb.co.kr/
👤 사용자 목표
어디로 여행갈지
숙소를 어디로 할지
-> 불필요한 요소 없이 첫 화면으로 배치함
🏞️ 글 보다는 이미지 중심으로 보여준다
-> 여행의 기대감을 최고치로 올림
2️⃣ 시각적 계층 구조
사용자가 어디를 먼저 봐야 할지 자연스럽게 알 수 있어야 한다
▶︎ 강약 조절이 되어야 사용자 흐름이 매끄럽게 흘러간다
사용자한테 빠른 중요한 정보 제공과 자연스러운 사용자 흐름을 유도하기 위해 사용한다
-> UX 경험이 상승
💡 유튜브 https://www.youtube.com/
👤 사용자 목표
콘텐츠를 보려고 앱에 들어온다
-> 글보다는 썸네일 이미지를 많이 사용함
🤩 썸네일 이미지가 클릭을 유도하고 눈에 띄어서 시선을 집중시킨다
-> 영상 제목보다는 썸네일 제목이 더 중요함
💡 카카오톡 화면 https://kr.pinterest.com/pin/678776975099205383/
👤 사용자 목표
지인을 찾고 상태 확인과 대화를 시작하거나 관리하기 위함이다
▪️ '선물하기’ 버튼은 아이콘 + 작고 옅은 회색 글씨로 되어있다
→ 시각적 구분과 보조적 행동을 유도하지만 방해되지 않도록 미니멀하게 처리
▪️ 분홍 테마 배경 + 꽃 아이콘으로 연출했지만 정보에 우선순위는 없게했다
3️⃣ 일관성
한번 배운 사용 방식이 앱 전체에서 통하게 만들어야 한다
▶︎ 사용자의 학습 비용이 낮아져 실수 확률이 낮아지고 안정감을 주어 사용자 신뢰를 얻게된다
▶︎ 익숙함이 생기면 사용자는 더 빠르고 편하게 앱을 사용할 수 있다
-> 이것이 디자인 시스템을 사용하는 이유이다
👀 앱에서 버튼 누를때, 다른 화면의 버튼들과 똑같은 틀을 따르고 있는지 확인하기 !
💡 인스타그램 https://www.instagram.com/
업데이트를 계속 해도 하단 네비게이션과 자신들의 키컬러의 일관성을 유지하려고 노력한다
인스타 인터렉션도 최대한 유지하려고 한다
- 더블탭(❤️) 하트 누르기
- 스토리 상단 터치로 앞/뒤 이동
- 스와이프 제스처
온보딩 화면
: 앱을 처음 설치했을때 사용자를 환영하고 핵심 기능을 소개하는 화면
-> 내 핵심 가치를 보여주는 것이 중요
▶︎ 바로 계정 생성하고 로그인 할 수 있는 행동을 유도해야 한다
▶︎ 글보다 더 직관적인 비주얼 요소(이미지,사진,아이콘)가 중요하다
- 슬라이드 형식의 설명
- '로그인' 또는 '회원가입'으로 이동 유도
- 비주얼 요소(일러스트, 아이콘 등)를 활용해 직관적으로 이해 가능하게 구성
🧐 스스로 분석 해보기
메시지가 명확한가
지나치게 길거나 복잡하진 않은가
스킵 기능이 있는가
💡 듀오링고 https://www.duolingo.com/
온보딩 화면에서 레벨 테스트를 하는데 자연스럽게 스며들게 한다
(대표적 온보딩 예시여서 나중에 참고하기 좋을거 같음)
💡 넷플릭스 https://www.netflix.com/kr/
넷플릭스의 목적은 심플한 가입 유도이다
모바일 > 사용자 시선은 F자 패턴 모양으로 움직인다
-> 정보를 더 빠르고 효율적으로 인식하게 됨 (가독성 향상)
💡 테드 https://www.ted.com/
테드의 목적은 흥미 파악을 위해 관심사 수집, 사용자 탐색하는 것이다
-> 사용자에게 맞춤형 제공
모바일 > 테드는 Z자 패턴 모양으로 구성했다
-> 간단한 정보 구조에 적합함
앱 화면의 주요 구성 요소
✅ 헤더
화면 상단의 타이틀과 주요 네비게이션
✅ 메인 콘텐츠 영역
사용자가 가장 자주 상호작용하는 영역
✅ 푸터
하단 네비게이션 또는 주요 버튼들 배치
💡 네이버 https://www.naver.com/
핵심은 검색바이고 자신들의 키컬러인 초록색으로 강조를 했다
상단은 Z와 F 패턴의 혼합형이고 하단으로 갈수록 Z 패턴이 주를 이룬다
-> 어디서든 시선이 멈추지 않게 하기 위함
디자인 프로세스와 사용자 흐름 설계
1️⃣ 사용자 요구 분석
▶︎ 무엇이 불편한지 파악하기
예시 >
밤마다 잠드는 시간이 들쑥날쑥해 피곤하다는 20대 직장인 8명을 인터뷰
앱스토어에서 인기 '수면 관리'앱 5개 기능 비교
정리 결과 -> 취침 30분 전 알림 + 수면점수 시각화가 가장 필요
➕ JTBD (Jobs To Be Done) : 사용자가 해내려고 하는 일에 초점을 맞추는 일
2️⃣ 와이어프레임 작성
▶︎ 연필로 뼈대 그리기
디자이너, 개발자, 기획자들이 서로 커뮤니케이션 하기 위해
간단 시뮬레이션을 통해 사용자 테스트를 하기 위해
와이어 프레임을 작성한다
3️⃣ UI 스타일 가이드 적용
▶︎ 외형 통일하기
기본적인 키컬러, 컬러 팔레트, 여백, 타이포그래피, 컴포넌트 요소들 등...
4️⃣ 프로토타입 제작
▶︎ 진짜처럼 눌러보기
프로토타입 : 진짜처럼 눌러볼 수 있는 가짜 앱
✏️ 에어비앤비 또는 선정 서비스 미니 디자인 시스템 만들기
파파고를 골라 미니 디자인 시스템을 만들어보았다
이렇게 하는거 맞겠지 🤨 ??
디자인 스타일 설정하는 다른 방법으로는 오른쪽 마우스 - Duplicate style을 눌러도 된다
또한 피그마 플러그인 Styler,foundation을 통해서 한번에 스타일 설정할 수 있다
