피그마 프로토타이핑 실전 — 클릭 더미에서 벗어나기

화면 두 개를 클릭 한 번으로 연결해놓고 프로토타입 완성이라고 부른 적이 있는가. 그건 프로토타입이 아니라 슬라이드쇼에 가깝다. 피그마 프로토타이핑을 실전에서 쓴다는 것은 사용자가 실제로 겪을 분기, 상태 변화, 인터랙션의 디테일까지 재현하는 일이다. 한때는 인비전(InVision)처럼 화면 이미지를 순서대로 붙여 클릭 흐름만 보여주는 방식이 프로토타입의 기본형이었지만, 지금은 피그마 자체에서 변수와 조건, 오버레이, 스마트 애니메이트까지 지원하면서 실제 제품에 가까운 동작을 화면 전환 없이 하나의 파일 안에서 확인할 수 있게 되었다.

1. 흐름과 시작점부터 정리하기

프로토타입은 화면 하나짜리 연결이 아니라 흐름 단위로 설계해야 한다. 로그인, 온보딩, 결제처럼 서로 다른 시나리오는 각각 별도의 시작점을 가진 흐름으로 나누는 것이 좋다. 시작점을 명확히 나눠두면 테스트 참여자나 이해관계자에게 특정 흐름만 골라 공유할 수 있고, 여러 사람이 동시에 서로 다른 흐름을 검토할 때도 혼선이 줄어든다.

하나의 프레임을 여러 흐름에 걸쳐 재사용할 수 있다는 점도 활용하면 로그인 화면처럼 공통으로 등장하는 화면을 중복 없이 관리할 수 있다.

2. 인터랙션 디테일과 진짜 작동하는 흐름

클릭 더미와 실전 프로토타입의 차이는 결국 디테일에서 갈린다. 탭이 아니라 호버로 반응해야 하는 요소, 드래그로 넘기는 캐러셀, 스크롤에 따라 나타나는 요소처럼 실제 제품의 동작 방식을 트리거와 액션 조합으로 재현해야 한다. 애니메이션은 화려하게 꾸미는 용도가 아니라 화면 전환의 맥락을 전달하는 도구로 써야 한다.

장바구니에 상품을 담을 때마다 합계가 바뀌거나, 폼에 값을 잘못 입력했을 때 에러 상태가 나타나는 흐름은 변수와 조건문 없이는 클릭 더미로 흉내조차 낼 수 없다. 변수 값을 바꾸는 액션과 if 조건을 조합하면, 사용자의 선택에 따라 실제로 다른 결과를 보여주는 프로토타입을 만들 수 있다.

3. 오버레이와 스크롤 오버플로 활용하기

모달, 토스트, 드롭다운 같은 요소는 오버레이 기능으로 처리하면 별도의 프레임을 계속 만들지 않아도 된다. 오버레이는 현재 화면 위에 겹쳐 나타났다가 배경을 클릭하면 닫히는 동작까지 기본으로 지원한다. 긴 리스트나 스크롤이 필요한 화면은 오버플로 스크롤을 설정해두면, 프레젠테이션 모드에서 실제 스크롤 동작을 그대로 시연할 수 있어 리뷰어가 스크롤 이후의 상태까지 확인할 수 있다.

프로토타입에 들어가는 프레임을 반응형으로 짜는 방법은 피그마 오토레이아웃 완전 정복 글에서 다뤘다. AI로 시안을 빠르게 만들어 프로토타입에 붙이는 흐름이 궁금하다면 Figma AI 쉐이더로 CMF 시안 만들기도 참고할 만하다. 인터랙션과 흐름의 공식 개념 정리는 피그마 공식 가이드에서 확인할 수 있다.

4. 프로토타입 vs 실제 코드 프리뷰, 무엇을 언제 쓸까

디자인 리뷰 단계에서는 피그마 프로토타입만으로도 충분한 경우가 많지만, 실제 반응 속도나 데이터 로딩처럼 코드가 개입해야만 검증되는 부분은 프로토타입이 대신할 수 없다. 두 방식을 무엇을 확인할지에 따라 나눠 쓰는 편이 협업 시간을 아낀다.

흔히 하는 오해는 스마트 애니메이트만 걸어두면 자동으로 부드러운 전환이 만들어진다고 생각하는 것이다. 실제로는 두 프레임 사이에 이름이 같은 레이어가 존재해야 스마트 애니메이트가 그 레이어를 인식하고 위치·크기·투명도 변화를 보간한다. 레이어 이름이 다르면 자연스러운 전환 대신 그냥 화면이 통째로 바뀌어버리므로, 프레임을 복제해 일부만 수정하는 방식으로 레이어 이름을 맞춰두는 습관이 필요하다.

5. 마치며

클릭 더미는 회의에서 화면 순서를 보여주는 정도의 역할밖에 못 한다. 흐름과 변수, 인터랙션 디테일을 갖춘 프로토타입은 사용성 테스트와 개발 커뮤니케이션 모두에서 훨씬 큰 힘을 발휘한다. 다음 프로토타입을 만들 때는 시작점부터 다시 설계해보자.