[UX] 피그마 프로토타입
기획 시 디자인 뿐만 아니라 프로토타입을 사용하여 어떠한 인터랙션을 적용해야 하는지 또한 정말 정말 중요하다. (개발자에게도, 디자이너에게도) 누구나 잘 이해할 수 있도록 기획서를 담은 프로토타입을 배워보았다!
디바이스 사이즈 선정
향후 UI 디자인 제작 시 대표가 되는 디바이스 사이즈를 선정해야 한다.
기획 시 동일한 디자인을 사용자의 디바이스에서도 사용할 수 있도록 이를 신중하게 고려해야 한다.
피그마를 통해 실제 디바이스에서 작동하는 모습을 확인하며 테스트할 수 있다.
디바이스 표준 해상도 선정
화면 사이즈가 중요한 것 처럼 서비스의 타깃에 따라 적합한 디바이스 표준 해상도 또한 고려해야 한다.
아래 웹사이트를 통해 디바이스, 나라, 기간을 기주으로 해상도 점유율을 확인할 수 있다.
스탯카운터
Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share
Tracks the Usage Share of Search Engines, Browsers and Operating Systems including Mobile from over 5 billion monthly page views.
gs.statcounter.com
피그마 테스트 디바이스
위 이미지처럼 피그마의 오른쪽 패널에서 테스트 디바이스에 맞는 프레임을 선택할 수 있다.
피그마에서 프로토타입을 만든 후 테스트 디바이스에 피그마를 연동할 수 있다.
연동하여 모바일 앱에서 사용할 수 있는 기능
- 검색, 찾아보기 및 보기
- 댓글
- 프레임 미러링
- FigJam 파일 편집
4px 그리드
- 4배수로 컴포넌트들의 간격을 통일시키는 것이다.
- 컴포넌트들을 확장 / 축소하여 테스트 디바이스 크기와 해상도에 적용 가능하다.
- 이를 통해 개발자가 디자인을 구현할 때 일관성 유지을 유지할 수 있고 그러므로 오류를 줄일 수 있다.
- Export 시 픽셀 틀어짐과 소수점이 발생하여 개발자 업무에 지장이 발생할 수 있다.
4dp 그리드를 사용하는 이유
- 4dp 그리드로 작업하는 경우 1.5x로 배율을 키워 Export해도 픽셀이 틀어지지 않는다.
- 5dp 그리드로 작업하는 경우 1.5x로 배율을 키워 Export해도 픽셀이 틀어짐이 발생한다.
- 디바이스는 소수점을 표현하지 못하기 때문이다!
프로토타입과 프로토타이핑 이해
프로토타입은 디자인 아이디어를 시각적으로 나타내는 모델이다.
사용자 경험 시뮬레이션에 유용하며 디자인의 초기 아이디어를 가시성 높게, 모두가 이해 가능할 수 있도록 공유하는 것에 중점을 둔다.
프로토타이핑은 실제 화면 디자인을 생성하고 UI를 구축하는 과정이다.
상호작용을 고려하며 디자인을 실제로 구현하는 데 중점을 둔다.
프로토타입은 아이디어를 시각화하여 모두가 이해할 수 있는 수단이며, 이를 통해 아이디어를 피드백 받을 수 있고, 개발자에게는 지침서가 된다.
Flow와 Starting point
플로우는 단일 페이지에 있는 프레임과 연결하는 네트워크이다.
프로토타이핑을 사용하여 서비스의 전체 프로세스를 경험할 수 있다.
다른 서비스의 플로우를 이해하는 것이 중요하다. 타깃 사용자가 익숙한 플로우가 무엇인지 알아야하기 때문이다.
플로우의 시작이 되는 지점을 찍는 것이다.
프로토타입 실행 시 가장 먼저 보여지는 지점을 설정하는 것이다.
화면 전환 시 이동 전환 / 조건 변환 / 오버레이를 선택할 수 있다.
화면 전환 시 선택 액션 및 이동 액션을 선택할 수 있다.
+ 버튼을 누르고 이벤트 발생 시 (클릭, 드래그 등) 전환되는 화면과 연결할 수 있다.
+ 버튼을 통해 페이지를 연결한 뒤
페이지 전환 시 이벤트와 효과를 설정해줄 수 있다.
피그마 플러그인
위 이미지는 내가 자주 사용하는 피그마 플러그인이다!
가장 잘 사용하는건 Iconify와 unsplash이다.
Iconify는 서비스 내 아이콘을 하나 하나 만들지 않고 (누군가가) 만들어 놓은 아이콘을 사용할 수 있다.
unsplash는 무료 이미지로 서비스의 배너나 사진을 넣을 공간에 빠르게 사진을 삽입할 수 있는 플러그인이다.
여태 피그마를 사용하며 프로토타입을 전혀 사용해오지 않았다.
유용한 기능을 배워서 앞으로 프로젝트에 더욱 서비스 기획의 이해도를 높일 수 있는 화면을 만들 수 있을 것 같다!