기획서를 열심히 써서 넘겼는데 회의실에서 돌아오는 말이 "이게 정확히 어떻게 동작하는 건가요?"였던 경험, 한 번쯤 있으실 겁니다. 저도 그랬습니다. 텍스트로 설명하는 데 한계를 느끼고 피그마 프로토타이핑을 제대로 파고들기 시작했는데, 막상 써보니 알려진 것과 다른 점도 있었고, 예상보다 강력한 부분도 있었습니다.
말로 설명하던 시절과 프로토타입이 바꾼 것
피그마 프로토타이핑은 디자인한 화면을 실제로 작동하는 것처럼 인터랙티브하게 연결해 테스트할 수 있는 기능입니다. UI 설계 단계에서 개발 전에 이해관계자와 소통하거나 사용성을 검증하는 데 활용됩니다.
일반적으로 프로토타이핑 툴은 복잡하고 진입 장벽이 높다고 알려져 있지만, 제가 직접 써봤는데 피그마는 그렇지 않았습니다. 프로토타입 모드에서 요소를 선택하고 연결선을 드래그해 대상 프레임에 가져다 놓으면 온 클릭(On Click) 인터랙션이 즉시 설정됩니다. 온 클릭이란 사용자가 특정 요소를 클릭했을 때 다른 화면으로 이동하는 가장 기본적인 트리거 이벤트입니다. 쉽게 말해 버튼을 누르면 다음 페이지로 넘어가는 동작을 코드 없이 구현하는 것입니다.
트리거 이벤트(Trigger Event)는 온 클릭 외에도 다양합니다. 여기서 트리거 이벤트란 인터랙션을 발동시키는 조건을 의미합니다. 드래그, 호버, 마우스 엔터/리브, 그리고 After Delay까지 선택할 수 있습니다. 제가 실무에서 유독 유용하게 썼던 건 After Delay였는데, 스플래시 화면을 일정 시간 보여준 뒤 자동으로 다음 화면으로 전환되도록 설정하면 별도의 클릭 없이 앱 진입 흐름을 그대로 재현할 수 있습니다. 고객 프레젠테이션에서 이 작은 디테일 하나가 생각보다 큰 인상을 남겼습니다.
피그마 공식 문서에 따르면 프로토타이핑 기능은 디자인 파일 내에서 별도 플러그인 없이 바로 사용할 수 있으며, 공유 링크 하나로 이해관계자가 뷰어에서 직접 인터랙션을 체험할 수 있습니다(출처: Figma Help Center).
오버레이와 스크롤, 실제로 어디서 차이가 나나
프로토타이핑의 핵심 기능 네 가지를 정리하면 다음과 같습니다.
- 온 클릭(On Click): 클릭 시 다른 프레임으로 이동하는 기본 인터랙션
- 스크롤 처리: 프레임의 Overflow 설정을 Scroll로 변경해 스크롤 인터랙션 구현
- 스티키(Sticky): Fix Position When Scrolling 옵션으로 네비게이션 바 등을 화면에 고정
- 오버레이(Overlay): 현재 화면 위에 다른 프레임을 띄우는 방식으로 모달이나 사이드바 구현
이 중에서 저는 오버레이를 가장 많이 활용했습니다. 오버레이란 Navigate To 액션과 달리 현재 화면을 유지한 채 위에 새로운 레이어를 덮어씌우는 방식입니다. 모달 팝업이나 바텀시트(Bottom Sheet), 사이드 메뉴처럼 화면 전체가 바뀌지 않고 일부 영역만 등장하는 UI 패턴에 적합합니다.
솔직히 처음에는 Navigate To로 모든 걸 해결하려다가 사이드 메뉴 시연에서 어색한 화면 전환이 그대로 노출됐습니다. 오버레이로 바꾼 순간 맥락이 자연스럽게 이어지면서, 이해관계자 반응이 눈에 띄게 달라졌습니다. 기획서 텍스트로는 절대 만들어낼 수 없는 납득의 순간이었습니다.
스크롤 처리는 Overflow라는 설정값 하나만 바꾸면 됩니다. Overflow란 프레임 내부 콘텐츠가 프레임 크기를 벗어났을 때 어떻게 처리할지를 결정하는 옵션입니다. 기본값인 Hidden에서 Scroll로 변경하면 콘텐츠가 잘리지 않고 스크롤로 탐색 가능한 영역이 됩니다. 설정 자체는 단순하지만, 긴 목록이나 피드 UI를 시연할 때 없으면 안 되는 기능입니다.
스티키 처리에 쓰이는 Fix Position When Scrolling 옵션도 마찬가지입니다. 이 옵션은 특정 요소를 스크롤과 무관하게 화면의 특정 위치에 고정하는 기능으로, 네비게이션 바나 플로팅 버튼 같은 요소에 적용합니다. 스크롤해도 상단 메뉴가 따라오는 동작을 실제처럼 구현할 수 있어 시연 완성도가 높아집니다.
UX 디자인 분야의 닐슨 노먼 그룹(Nielsen Norman Group) 연구에 따르면, 인터랙티브 프로토타입을 활용한 사용성 테스트는 정적 목업 대비 사용자 피드백의 정확도와 구체성이 유의미하게 높아진다고 보고되어 있습니다(출처: Nielsen Norman Group).
한계를 만났을 때, 피그마 하나로 끝내려 하지 마세요
Smart Animate는 피그마 프로토타이핑에서 가장 인상적인 기능 중 하나입니다. Smart Animate란 두 프레임 사이에서 같은 이름의 레이어를 자동으로 감지해 위치, 크기, 불투명도 등의 변화를 자연스럽게 보간하는 전환 효과입니다. 쉽게 말해 애니메이션 코드를 짜지 않아도 화면 전환이 부드럽게 이어지는 것입니다. 제 경험상 이건 처음 써보는 사람도 바로 효과를 체감할 수 있을 만큼 직관적이었습니다.
다만 일반적으로 피그마 프로토타이핑이면 대부분의 인터랙션을 커버할 수 있다고 알려져 있지만, 제 경험상 조건 분기가 필요한 경우는 얘기가 다릅니다. 실제로 한 프로젝트에서 조건 분기 로직이 20개 이상 필요했는데, 피그마만으로는 처리가 불가능해 ProtoPie로 전환한 적이 있습니다. ProtoPie는 변수 기반 인터랙션과 조건 분기를 지원하는 전문 프로토타이핑 도구입니다. 두 툴을 병행하면 피그마로 기본 플로우와 시각적 시연을 처리하고, 복잡한 로직이 필요한 부분만 ProtoPie로 넘기는 방식이 현실적입니다.
피그마 프로토타이핑은 분명 강력한 도구지만, 만능이라는 기대는 내려놓는 게 좋습니다. 기본 인터랙션과 시각적 프레젠테이션에는 이만한 툴이 없고, 실제 커뮤니케이션 비용을 줄이는 효과도 분명합니다. 처음 시작한다면 온 클릭과 오버레이 두 가지만 먼저 익혀보시길 권합니다. 이 두 가지를 제대로 쓸 수 있으면 웬만한 시연은 충분히 소화할 수 있습니다. 복잡한 조건 분기가 필요해지는 시점이 오면, 그때 ProtoPie를 검토해도 늦지 않습니다.