피그마 활용법(2)_2주차 정리

[수업 목표]

• UI 설계 시 유의해야 할 점들을 살펴보고 이해합니다.
• 정보구조도(IA)와 화면흐름도(Flowchart)의 차이를 이해합니다.
• 와이어프레임의 개념을 이해하고 실제 와이어프레임을 그릴 수 있습니다.

---

⦿ 다양한 환경에서의 UI 차이
→ 웹 - 모바일 웹, 운영체제에 대한 제한 없음, 웹브라우저는 주소 입력 접속, 업데이트하기 쉬움, 웹브라우저와 충돌하지 않는 선의 UI
→ 앱 - 안드로이드와 iOS 둘 다 준비, 앱은 다운로드, 심사를 통화해야 함, 다양한 인터렉션 사용
1. 목적이 다르면 UI의 차이가 있다. UI의 차이가 있다는 것은 목적이 다름
  (1) 페이지 이동 : 웹은 주소창 인터페이스가 있다. 주소를 입력하면 접근이 가능하기 때문에, 사용자가 접근하면 안되는 곳에 접근했을 때에 대처를 어떻게 할 것인지 생각. 변수에 대해서 화면 대책 준비. 마찬가지로,
  (2) 뒤로가기 : 웹에서는 기본 브라우저에서 뒤로 갈 수 있음. 결제가 두번 되거나 치명적인 문제가 생길 수 있음.
  (3) 주요메뉴 이동 : 네비게이션도 마찬가지, 웹 브라우저는 기본으로 제공되는 인터페이스.
  (4) 바텀시트 : 다이얼로그와 같은 컴포넌트. 브라우저에서 하단에 고정되어 있음.(웹브라우저의 하단 탭바가 하단 다이얼로그 사용에 불편함을 줌, 웹브라우저 새로고침과 기능이 비슷하여 잘못하면 당겨서 새로고침이 될 수 있음)
2. OS별 차이
  (1) iOS 홈 인디케이터 : 물리적인 버튼 외에 화면 하단에 홈 인디케이터의 자리 확보, 그라데이션 처리로 스크롤을 더 내리게 한다.
  (2) 안드로이드 네비게이션 바의 뒤로가기 : 두 가지의 뒤로가기(이전 화면으로 가기History Back, 상위 화면으로 가기Hierarchy Back)가 걸려 있기 때문에 뒤로가기 지정을 해줘야 한다.
3. 정리
  (1) UI는 웹과 앱의 차이가 큼
  (2) 아이폰과 안드로이드처럼 OS가 다른 경우에도 조금씩 다를 수 있음
  (3) 같은 아이폰이더라도, 홈 인디케이터 때문에 차이가 생길 수 있음
  (4) 하지만, 차이에 따른 UI 디자인은 절대적인 기준이 아니기 때문에, 사용성을 고려해서 선택

⦿ 정보구조도와 플로우차트-기획을 디자인으로 옮기는 방법
1. 정보구조도(Information Architecture) : 제품의 각 페이지와 기능 소개(=층별 안내도, 설계도)

출처;Aiden님의 브런치

2. 화면흐름도(Flowchart) : 특정 위치 또는 행동을 위해 사용자가 거쳐야 하는 경로(=오시는 길,순서도)

(좌) 출처:제로베이스 / (우) 순서도의 국제 표준 규칙

3. 정리 : 와이어프레임과 프로토타입을 만들기 위해서는 사용자 시나리오가 필요. 이 사용자 시나리오를 만들기 위해 정보구조도를 작성하고 플로우차트를 만든다고 생각하기

⦿ 와이어프레임
1. 개념 : 단순하게 만들어서 빠르게 공유, 수정, 피드백을 위해 만듬(Lo-fi Prototype)
2. 만드는 이유 : 
  (1) 협업이 쉬움(팀원 간의 다른 생각을 통일)
  (2) 디자인 관리(디자인 변경이나 수정 전에 방향을 잡아가면서 완성도를 올림)
  (3) 습관 형성 모델을 반복적으로 실험(습관 형성될 수 있도록 사용자 시나리오를 작성, 프로세스를 잘 관찰 하기 위해)
3. 그리는 법 : 손으로 종이나 화이트보드에 그리거나, 종이를 오려서 만들거나, 파워포인트 또는 피그마로 작성
  (1) 화이어프레임 규칙정하기 : 그림(이미지), 버튼 표현 할때 과감하게 표현하기 등의 합의
  (2) 그리고자 하는 화면 스케치하기 :

출처: Figma 활용법(2) 김태길 튜터님

  (3) 화면을 선으로 연결하기 : 화면들이 어떤 관계로 이어져 있는지 파악하기 위함. 화면 넘어가기 위한 동작을 파악, 부족한 부분을 찾아내기 위함