[Do it! 프로덕트 디자인 입문 with 피그마] 6-1 ~ 6-3장

기획

콘셉트 ui에 들어간 기능이 정말 필요할지, 혹은 적용하기 쉬울지 등등 고려 사항을 더욱 체계적으로 반영하기 위해 기획이 필요하다.

 

콘셉트 UI, 목적에 맞게 활용하기

기능이 우리 상황에 필요한지, UI를 구현하는 것이 어떤 의미가 있을지 기획 관점에서 생각해 보면 좋다

 

레퍼런스 UI, 기획에 맞게 검토하기

좋은 기획이 떠오르지 않을 때에는 이미 출시된 앱의 기능을 다시 살펴보는 것이 좋다..

 

와이어프레임

화면 설계, 화면 사이의 플로를 비롯해 좀 더 실제적인 레이아웃을 그려 보는 과정

 

플로를 그리기 전에 와이어프레임을 연결하는 이유

UI, 인터랙션 디자인, 기능 개발 등 이후 어떤 작업이 필요한지 파악할 수 있다.

흐름을 보며 비효율적이거나 모순적인 플로를 초기에 발견하고 개발 전에 미리 수정할 수 있다.

기획 초반 수시로 바뀌는 플로에 유연하게 대응하고 흐름도의 수정 사항을 빠르게 반영할 수 있다. 

 

와이어프레임의 흐름을 표현하는 4가지 방법

1. 그려 둔 와이어프레임 화면을 인쇄해 화이트보드에 붙이고 보드 마커로 플로를 그린다.

→ 빠르게 플로를 표현할 수 있고 플로 수정도 쉽지만, 와이어프레임 화면을 인쇄물로 준비하는 데 시간이 오래 걸리고, 서비스 플로를 비대면으로 논의해서 수정하기 어렵다.

2. 피그마에서 shift+L을 눌러 기본적으로 제공하는 화살표를 사용한다.

→ 가장 빠르게 플로를 표현할 수 있지만, 플로가 복잡해질수록 수정할 화살표도 많아진다.

3. 피그마 커뮤니티에서 화살표 플러그인을 설치해 사용한다.

→ 빠르게 플로를 표현할 수 있고, 화면을 수시로 이동해도 수정 사항을 곧바로 반영할 수 있지만, 화살표가 많아지면 피그마 파일이 무거워질 수 있다.

플러그인 => Arrow auto, Autoflow, ProToFlow

4. 피그마 화면에 코멘트를 달아 어떤 화면으로 이동하는지 알려준다.

→ 빠르게 생각을 기록할 수 있지만, 화살표 없이 플로를 직관적으로 표현하기는 어렵다.

 

와이어프레임 화살표로 연결하기

shift+i를 누르고 pro to flow를 검색한다.

design을 prototype패널로 바꾼다.

prototype모드에서는 오브젝트의 파란 동그라미를 드래그해서 플로를 연결할 수 있다.

crtl+p를 눌러 proo to flow 플러그인을 열고 원하는 화면을 선택하면 파란 버튼이 활성화된다.

이 버튼은 선택한 인터랙션을 화살표로 바꿔준다.

편집 권한이 없어도 프로토타입에서 연결한 플로를 확인할 수 있게 된다.

 

너무 많은 플로를 전부 시각화하기보다는 서비스 관점에서 가장 중요한 흐름대로 연결하는 것이 좋다.

이상적인 사용자 플로와 더불어 예상되는 엣지 케이스를 함께 고려하는 것도 중요하다.

 

엣지 케이스 (edge case)

오류 페이지나 로딩 실패 메세지, 특정 기기나 OS 버전에서만 발생하는 버그 등 서비스 전체적인 구현 방식과 다르게 구현된 현상.

경우에 따라서는 테스트 목적 등을 위해 의도적으로 엣지케이스를 만들때도 있다.