[Figma] 피그마 활용_IA와 FlowChart

#1 Goals

 ▼ 학습 목표

• UI설계 시 유의해야 할 점들을 이해
• 정보구조도(IA)와 화면흐름도(Flowchart)의 차이를 이해
• 와이어프레임 개념을 이해

 

#2 Learning Content

 1. 다양한 환경에서의 UI차이

  ❑ 웹과 앱

• 앱과 달리 모바일 환경에서의 웹은 기존 사파리 or 크롬과 같은 자체 익스플로앱으로 구동하기 때문에 구조상 앱과 달리해야 한다.
• 앱은 피츠의 법칙을 활용해서 인터랙션을 구현할 수 있는 방법들이 존재하지만 웹 환경에서는 구동하기 까다롭다.

  ❑ OS별

• 앱의 경우 반드시 앱마켓에 등록을 해야하기 때문에 앱 마켓에서 제시하는 심사 가이드라인을 따라야 한다.
• IOS와 Android의 큰 차이점은 하단 네비게이션과 홈 인디케이터의 차이로 디자인을 달리 해야한다.

             ※ 차이에 따른 UI 디자인은 절대적인 기준이 아니기 때문에, 디자이너의 판단하에 사용성을 고려하여 선택해야 한다.

 

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

  ❑ 정보구조도(IA)

• 전체적인 제품의 구성과 각 화면들의 관계를 파악
• 화면과 정보들이 어떤 구조로 연결되어 있는지를 나타내는 일종의 설계도

마켓컬리의 IA의 일부, 출처 Aiden님의 브런치

  ❑ 화면흐름도(Flowchart)

• 실제로 사용자가 어떤 과정을 통해 제품을 사용하는지 시각적으로 확인하는 것
• 사용자가 어떤 과정으로 제품을 이용하는지를 시각적으로 정리한 순서도

출처 : 제로베이스 아티클

                ※ 제품을 건물이라고 생각했을 때 플로우차트는 오시는 길, IA는 층별 안내도로 비유할 수 있음

 

 2. 와이어프레임

  ❑ 와이어프레임의 개념

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

   ▽ 와이어프레임을 만드는 이유

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

      ※ 와이어프레임은 최대한 단순하게 빠르게 소통할 수 있을 정도로 제작하는게 핵심