본문 바로가기

[UX, UI 디자인 입문]/UX, UI 학습일지

[Figma 활용법(2)] 3주차 학습일지

정보 구조도(Information Architecture)IA : ex)층별 안내도
- 화면과 정보들이 어떤 구조로 연결되어 있는지를 나타내는 일종의 설계도
- 제품을 건물이라고 생각했을 때 IA는 층별 안내도로 비유할 수 있다.

화면 흐름도(Flow chart) : ex)오시는 길
- 플로우 차트라고 더 자주 불린다.
- 사용자가 어떤 과정으로 제품을 이용하는지 시각적으로 정리한 순서도
- 제품을 건물이라고 생각했을 때 플로우차트는 (건물로)오시는 길로 비유할 수 있다.
- 사용자가 어디어디를 거쳐서 목적지에 도달할 수 있는지를 나타낸 것

순서도
- 프로세스를 보여주는 다이어그램, 상자들과 화살표를 이용해서 문제에 대한 해결 과정을 도식화한 것

와이어프레임
- 화면의 구성과 흐름을 단순하게 만들어 빠르게 공유하는 것
- 화면과 시나리오를 최대한 단순한 형태로 만들어서 빠르게 만든 것

와이어프레임을 만드는 이유
- 1. 팀원 간의 다른 생각을 통일할 수 있고 협업을 원활하다.
글로 된 문서만 보고 디자인과 개발을 하게 되면, 서로 생각이 조금씩 달라서 문제가 생길 수 있어 
아무리 단순한 디자인이더라도 화면의 형태를 같이 보면서 이해가 다른 부분을 줄일 수 있다.

- 2. 디자인을 관리하기 쉽고, 불필요한 부분에 시선을 뺏기지 않는다.
처음부터 너무 완성된 UI로 작업하게 되면 중요한 사용자 시나리오에 집중하기 어렵고, 디자인 변경이나 수정할 때 빠르게 변경하기 
힘들다. 최대한 단순한 형태로 중요한 흐름만 만든다면 집중하기도 좋고, 디자인 방향을 조금씩 잡아가면서 완성도를 끌어올릴 수 있다.

- 3. 습관 형성 모델을 반복적으로 실험해 볼 수 있다.
와이어프레임을 만드는 이유 중 가장 중요한 것은, 참여 전략과 *북극성 지표를 토대로 설계한 습관 형성 모델이 잘 작동할 수 있는지를 확인하는
 것이 필요하기 때문이다. 습관이 형성될 수 있도록 사용자 시나리오를 작성하고, 와이어프레임을 통해 그 과정이 매끄러운지, 부족한 건 없는지를 
빠르게 검증해 볼 수 있다.
☞사용자가 이용하는 시나리오를 만들어서 '어떻게하면 우리 서비스를 습관처럼 쓸까?'하는 과정과 방법을 한눈에 보는 것

와이어프레임 그리는 법
- 와이어프레임의 목적자체가 빠르고 효율적인 커뮤니케이션과 일관된 디자인 방향으로 최소한의 가독성만 확보하여 서로 이해할 수 있다면 어떤방식이든 OK