[Day 19] 디자인 프로세스

📍목차
1. 앱 UI 디자인의 기본 원칙
2. 앱 화면의 주요 구성 요소
3. 앱 디자인 화면 예시
4. 디자인 프로세스와 사용자 흐름 설계
5. 플러그인

---

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

"디자인은 디자이너를 위한 것이 아니라, 사용자에게 의미가 있어야 한다."

사용자의 목표, 행동, 감정을 깊이 이해하고 반영하는 것이 핵심

기능보다 사용 경험을 우선하는 사고방식 필요

 

 

① 사용자 중심 디자인 

디자인을 하다보면 생산자 입장이 되어버릴 수 있으니 주의

 

사례: Airbnb

→ 개인화 (추천 숙소)

→ 이미지로 시선을 끈다

→ 목적은 빠르게 숙소찾기가 핵심

** 목표/목적을 잊고 만들면 안된다. 메인 기능이 잘 보이는 곳에 위치해야한다.

 

 

② 시각적 계층 구조

사용자가 어디를 먼저 봐야하는지, 디자이너가 어디에 중요도를 두었는지 보인다.

정보는 중요도에 따라 크기, 색상, 배치로 구분되어야한다. 

강약 조절이 되어야 사용자 흐름이 매끄럽게 흘러간다.

 

사례: YouTube

→ 썸네일이 가장 중요 (가장 크게)

→ 제목, 조회수 등 중요도에 따라 글씨 크기 및 색상 다름

 

** 중요도, 우선순위에 따라 크기와 글씨가 시선을 끄는 정도가 다르게 제작됨

 

 

③ 일관성

일관성 때문에 디자인 시스템을 만드는 것이다. 

익숙함이 생기면 사용자는 더 빠르고 편하게 사용 가능.

 

사례: instargram

→ 버튼, 카드 등 모두 똑같은 일관성

→ 더블탭, 스와이프 등의 기능을 쓸 때 일관성을 가진다.

 

** 앞의 두 개를 포함하여 디자인할 때 무엇을 중요하게 생각하는지? 라는 질문에 잘 대답 

** 일관성이 있으면 학습 비용이 줄어들고 사용자의  실수도 줄어든다.

---

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

- 헤더(Header): 화면 상단의 타이틀과 주요 네비게이션

- 메인 컨텐츠 영역 (Main Content): 사용자가 가장 자주 상호작용하는 영역

- 푸터(Footer): 하단 네비게이션 또는 주요 버튼 배치

 

좋은 화면 구성의 예시: Naver

→ FZ 패턴으로 어디에서든 시선이 계속 멈추도록 유도

 

---

3. 앱 디자인 화면 예시

"온보딩 화면에서 앱의 첫 이미지가 생긴다."

사용자들이 평가하게 되는 '설치했을 때, 사용자를 환영하고 핵심 기능을 소개하는 화면'

→ 여기서 톤앤매너를 잘 지키고, 일관성을 지켜서 사용자에게 쓸만하다는 느낌이 들도록 만들어

다음 페이지로 넘어갈 수 있도록 붙잡을 후킹이 필요

 

*온보딩이 잘 된 예시 1: 듀오링고

→ 바로 질문을 해서 사용자 파악에 들어간다.

→ 다음 화면으로는 다른 생각이 들기 전에 초반에 퀴즈를 내서 서비스 동작 방식을 바로 느낄 수 있도록 유도

→ 마지막 화면에는 잠재적으로 지금 학습을 넘어가지 못하면 다음 단계로 갈 수 없음을 암묵적으로 알려준다.

 

 

*온보딩이 잘 된 예시 2: 넷플릭스

왼: F 패턴 / 오: Z 패턴

→ 넷플릭스 초창기에는 첫 달 무료로 이용할 수 있게 해주고 모든 디바이스에서 사용할 수 있다는 기능 설명

→ 티빙, 디즈니, 넷플릭스, 왓챠, 웨이브 등은 온보딩 화면이 거의 비슷한 느낌으로 구성됨

why? 그게 최적의 온보딩이라고 분석되었기 때문

** 서비스마다 온보딩이 다르다.

** 같은 카테고리의 서비스를 벤치마킹하는 것이 중요하다.

 

---

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

단계	핵심	실제로 하는 일
1. 사용자 요구 분석	무엇이 불편한가	- 밤마다 잠드는 시간이 일정하지 않아 피곤하다는 20대 직장인 몇 명 인터뷰 - 앱스토어에서 '수명관리' 앱 여러개 기능 비교 - 정리 결과 가장 필요한 것 정리
2. 와이어프레임 작성	뼈대 그리기	- 사용자 플로우 스케치 - Figma로 박스, 회색톤만 사용하여 빠르게 주요 화면 제작 - 동료들과 클릭해보며 피드백
3. UI 스타일 가이드	외형 통일	- 색상, 서체 결정 - 카드 모양, 그림자 등 일관된 외형 설정 - 색 대비 체크
4. 프로토타입 제작	실제처럼 눌러보기	- 하이파이 화면에 슬라이드 전환, 프로그레스 애니메이션 추가 - 목표 사용자에게 TestFlight로 배포 및 설문조사 - 사용자 피드백 후 2단계부터 다시

★ 사용자 요구 분석이 잘 되면 로우파이의 와이어프레임으로도 전달이 가능하다.

---

5. 플러그인

• Unsplash: 고퀄 무료 이미지 삽입
• Iconify: 아이콘 사용
• Material design icons: 구글 디자인 아이콘 사용
• 3Dicons: 3D아이콘 제작
• Content Reel: 더미 텍스트 및 데이터 제공
• Lorem Ipsum: 더미 텍스트 제공
• Design Doc: 디자인 문서화
• Auto flow: 두 개 이상의 프레임 연결
• Wireframe designer: 와이어프레임을 빠르게 만드는 도구
• Figmap: 지도 기반 디자인 구현
• html.to.design: 실제 웹사이트의 HTML을 기반으로 피그마 디자인 변환

---

실습 내용

** Use case들을 다 생각해서 디자인

 

실습 과제

UI 요소 예시:

• 파일 선택 버튼 (Choose File / Browse): 사용자가 파일을 선택합니다.
• 드래그 앤 드롭 영역: 마우스로 파일을 끌어올 수 있는 공간입니다.
• 업로드 진행 표시 (Progress Bar): 파일 업로드 상태를 보여줍니다.
• 파일 정보 표시 (File Name, Size): 업로드할 파일 정보를 확인할 수 있습니다.
• 오류 메시지 (Error Message): 형식이 맞지 않거나 파일이 너무 큰 경우 안내합니다.
• 제출 버튼 (Submit / Upload): 파일 업로드를 완료합니다.