#
서비스 기획
2022-12-21

[Figma] 피그마 이용시 다양한 서비스의 Flow를 나타내는 방법

서비스를 제작, 기획하기 전에 레퍼런스를 피그마에 캡쳐하고, 분석하는게 선행 됩니다.

기본적으로 해당 레퍼런스는 History는 가로, 기능별로는 세로로 나열방식을 활용하여 정리합니다.

가로 방향으로 하나의 기능의 History를 진행해 나가고, 세로의 방향으론 각각 기능 순서대로 레퍼런스를 배치합니다.

비록 캡처는 화면 설계 페이지나, 해당 방식과 유사한 패턴으로 레퍼런스가 정리되죠!

로그인, 회원가입과 같은 단순하고 쉽게 알 수 있는 flow 에서는 위와 같은 레퍼런스 나열이 용이합니다.

다만, 자주 사용해보지 않은 서비스의 flow의 경우 그 이상 파악하기 어렵습니다.

이에 이번에 Dapp과 토큰 거래 사이트들을 조사하면서

그냥 나열하는 방법으로는 레퍼런스를 이해하는데 한계에 부딪혀 다양한 방법을 시도해 보았습니다.

1. 직접 화살표로 방향 그려주기

이렇게 되면 자그마한 박스, 어떤 버튼을 클릭할 경우 어떤 action이 취해지는지 세세한 부분까지 파악이 용이합니다.

특히 블록체인, NFT관련 기획의 경우 기존의 WEB 2.0과는 다른 회원가입, 로그인, 인증이라 협업할 경우 해당 작업을 할 경우, 직관적으로 이해도가 높아집니다.

2. 프로토타이핑하기

이런식으로 프로토타이핑을 하여서 직접 실행해 보는 것 처럼 할 수 있으며 화살표로 직관적인 flow가 잘 보이게 제작 가능합니다.

개인적으로는 너무 복잡하여 flow가 감이 잡기 어려울 때는 2와 같은 방법을,

생소한 서비스지만 flow가 복잡하지 않을 경우에는 1과 같은 캡쳐방식으로 레퍼런스를 활용하면 좋을 것 같습니다

유익했다면! 이어서 읽어보기:)
UX 심리학 법칙 5가지 :피츠의 법칙(Fitts's Law)

피츠의 법칙 : 인간-컴퓨터 상호작용과 인간의 행동에 대해 속도와 정확성의 관계를 설명하는 기본적인 법칙이다.

다양한 프로그램으로 쇼츠 영상 만들기

다양한 프로그램으로 쇼츠 영상 만들기

기획 시 업무 순서

기획 시에는 어떤 순서로 업무를 진행해야 할까요?

지금 바로 밸류랩스와
성공적인 협력을 시작해보세요.
Subscribe to our newsletter.
Thank you! Your submission has been received!
Oops!! Something went wrong while submitting the form.