[UX/UI] Figma 활용법 6

✳️ 다양한 환경에서의 UI 차이

1. 웹과 앱의 특성

• 차이점들을 잘 알고 적합한 UI를 설계하는 것이 중요
• 웹과 앱의 특성 비교

  

2. 대표적인 웹과 앱의 UI 차이

• 1) 페이지 이동 : 웹은 주소를 입력해서 어디든 접근이 가능하지만 앱은 이동 불가

  

• 2) 뒤로가기 : 앱은 상단 아이콘 등 버튼을 눌러 이동하지만 웹은 브라우저 자체 기능을 통해 이전 화면으로 돌아가는 것이 자유로움

  

• 3) 주요 메뉴 이동 : 모바일 웹은 상단에 주요메뉴 UI 배치, 앱은 하단 고정탭으로 배치

  

• 4) 바텀 시트(Bottom Sheet) : 바텀 시트는 하단에 고정되어 있는데 앱에서는 다양한 용도로 활용, 모바일 웹에서는 사용이 까다로움

3. OS(Operating System:운영체제)별 차이

• OS에 따라 UI를 다르게 사용하는 경우 (애플 앱 심사 가이드라인)
• iOS 홈 인디케이터(Home Indicator) : 아이폰에서 홈 화면으로 이동할 수 있는 UI
• 안드로이드 네비게이션 바의 뒤로가기 : 뒤로가기를 눌렀을 때 어떻게 이동해야 하는지 디자이너가 제품 전체의 구조를 잘 이해해야 함
  • 이전 화면으로 가기(History Back) : 현재 화면 전에 방문한 화면으로 다시 돌아가는 것
  • 상위 화면으로 가기(Hierarchy Back) : 현재 화면보다 더 상위에 있는 화면으로 올라가는 것

 

---

 

✳️ 정보구조도와 플로우차트

1. 기획을 디자인으로 옮기는 방법

• 전체적인 개요와 흐름을 정하면서, 개발자-디자이너-기획자 간 이해도를 동일하게 맞추는 정보구조도와 화면흐름도를 만든다 (단계는 회사나 팀에 따라 다름)

2. 정보구조도와 플로우차트의 차이

• 제품을 하나의 건물에 비유하면, IA는 층별 안내도, 플로우차트는 오시는 길이다.

  

3. 정보구조도(IA) 및 예시

• 화면과 정보들이 어떤 구조로 연결 있는지를 나타내는 일종의 설계도

  

4. 화면흐름도(Flowchart)

• 사용자가 어떤 과정으로 제품을 이용하는지를 시각적으로 정리한 순서도
• 플로우차트/유저플로우/유즈케이스라고 불리기도 함
  

  

  

 

---

 

✳️ 와이어프레임

1. 와이어프레임의 개념

• 화면과 시나리오를 최대한 단순한 형태로 만들어서 빠르게 만든 것

2. 와이어프레임을 만드는 이유

• 1) 팀원 간의 다른 생각을 통일할 수 있고 협업을 원활하게 함
• 2) 디자인을 관리하기 쉽고, 불필요한 부분에 시선을 뺏기지 않음
• 3) 습관 형성 모델을 반복적으로 실험해 볼 수 있음

3. 와이어프레임 목적

• 빠르고 효율적인 커뮤니케이션과 일관된 디자인 방향이다. 최소한의 가독성만 확보하고 서로 이해할 수만 있다면 어떤 방식을 사용해도 좋음.

4. 와이어프레임 그리는 법

• 1) 와이어프레임 규칙 정하기 : 표현할 것과 하지 않을 것을 고르고 단순하고 빠르게 그린다.
• 2) 그리고자 하는 화면 스케치하기

  

• 3) 화면을 선으로 연결하기 : 화면들이 어떤 관계로 이어져 있는지 파악하기 위함

  

  화면과 화면을 선으로 연결하거나 특정 버튼이나 영역과 화면을 연결할 수도 있음.
• 🔗 플러그인 소개 : Simpleflow, Wireframe Kit🚀, Paper Wireframe Kit, Wireframe Kit