PPT 하이퍼링크는 잊으세요: 기획자를 위한 피그마 프로토타입 전환 가이드
PPT로 화면설계서를 만들던 IT 기획자라면 하이퍼링크 기능이 익숙할 것입니다. 버튼이나 도형을 클릭하면 다른 슬라이드로 이동하게 만들 수 있기 때문입니다.
하지만 피그마 프로토타입은 단순한 슬라이드 이동보다 한 단계 더 실무적입니다. 버튼을 눌렀을 때 어떤 화면으로 이동하는지, 사용자가 어떤 흐름으로 서비스를 이용하는지, 오류 상황에서는 어떤 화면을 보는지 확인할 수 있습니다.
쉽게 말해 PPT 하이퍼링크가 슬라이드 이동이라면, 피그마 프로토타입은 사용자 행동 흐름 검토입니다.
피그마 프로토타입이란?
피그마 프로토타입은 정적인 화면을 클릭 가능한 흐름으로 연결하는 기능입니다. 로그인 버튼을 누르면 메인 화면으로 이동하고, 취소 버튼을 누르면 이전 화면으로 돌아가게 만들 수 있습니다.
IT 기획자 관점에서는 프로토타입을 움직이는 화면설계서처럼 이해하면 쉽습니다. 화면을 한 장씩 보는 것이 아니라, 사용자가 실제로 이동하는 순서를 따라가며 확인할 수 있습니다.
PPT 하이퍼링크와 무엇이 다를까?
| 구분 | PPT 하이퍼링크 | 피그마 프로토타입 |
|---|---|---|
| 주요 목적 | 슬라이드 이동 | 사용자 화면 흐름 검토 |
| 작업 단위 | 슬라이드 | 프레임 |
| 확인 내용 | 어느 슬라이드로 가는지 | 버튼 클릭 후 어떤 화면으로 이어지는지 |
| 기획자 활용 | 발표 흐름 보조 | 정상 흐름, 예외 흐름, 오류 흐름 검토 |
PPT 하이퍼링크는 발표용 이동에 가깝습니다. 반면 피그마 프로토타입은 사용자가 서비스를 실제로 이용할 때의 동선을 확인하는 데 더 적합합니다.
IT 기획자가 확인해야 할 포인트
기획자는 프로토타입을 볼 때 화면이 예쁜지보다 흐름이 맞는지를 먼저 확인해야 합니다.
- 시작 화면이 명확한가?
- 주요 버튼을 클릭하면 올바른 화면으로 이동하는가?
- 취소, 닫기, 뒤로가기 흐름이 자연스러운가?
- 저장 후 목록으로 이동하는지, 상세 화면에 남는지 정해져 있는가?
- 오류 발생 시 사용자가 다시 시도할 수 있는가?
- 권한이 없는 사용자의 화면이 준비되어 있는가?
프로토타입을 볼 때는 “잘 되는 흐름”만 보지 말고, “실패했을 때의 흐름”까지 함께 확인해야 합니다.
로그인 화면 예시로 이해하기
로그인 화면을 예로 들어보겠습니다. 정상 로그인만 보면 흐름은 단순합니다. 아이디와 비밀번호를 입력하고 로그인 버튼을 누르면 메인 화면으로 이동합니다.
하지만 실무에서는 아래 흐름도 함께 봐야 합니다.
| 상황 | 확인해야 할 화면 흐름 |
|---|---|
| 로그인 성공 | 메인 화면 또는 이전 요청 화면으로 이동 |
| 비밀번호 오류 | 오류 메시지 표시 후 재입력 가능 |
| 필수값 미입력 | 입력창 아래 안내 문구 표시 |
| 비밀번호 찾기 | 비밀번호 재설정 화면으로 이동 |
| 계정 잠김 | 잠김 안내 화면 또는 고객센터 안내 노출 |
프로토타입은 이런 흐름을 눈으로 확인하게 도와줍니다. 문서로만 보면 놓치기 쉬운 빈 화면과 오류 화면도 더 빨리 발견할 수 있습니다.
프로토타입 검토 시 자주 놓치는 부분
초보 기획자는 프로토타입을 실행한 뒤 버튼 몇 개만 눌러보고 끝내는 경우가 많습니다. 하지만 좋은 검토는 사용자의 정상 행동과 실수 행동을 모두 확인하는 것입니다.
- 뒤로가기 버튼이 예상한 화면으로 이동하는가?
- 팝업 닫기 후 원래 화면 상태가 유지되는가?
- 저장 실패 시 입력한 값이 사라지지 않는가?
- 권한 없음 화면에서 다음 행동이 안내되는가?
- 모바일과 PC에서 흐름이 다르지 않은가?
프로토타입은 완성된 개발물이 아닙니다. 하지만 개발 전에 화면 흐름의 구멍을 찾는 데 매우 유용합니다. 작은 구멍을 초반에 막으면 나중에 회의실 홍수가 줄어듭니다.
결론
PPT 하이퍼링크는 슬라이드를 이동하는 기능이고, 피그마 프로토타입은 사용자의 화면 흐름을 검토하는 기능입니다.
IT 기획자는 피그마 프로토타입을 통해 버튼 클릭 후 이동 화면, 취소와 뒤로가기, 오류 메시지, 빈 화면, 권한 없음 화면을 확인해야 합니다.
프로토타입을 잘 보면 개발 전에 빠진 화면과 흐름을 발견할 수 있습니다. 결국 피그마 프로토타입은 디자인을 보여주는 기능이 아니라, 기획의 빈틈을 찾아내는 실무 돋보기입니다.
FAQ
Q1. 피그마 프로토타입은 PPT 하이퍼링크와 같은 건가요?
완전히 같지는 않습니다. PPT 하이퍼링크는 슬라이드 이동에 가깝고, 피그마 프로토타입은 사용자의 실제 화면 이동 흐름을 검토하는 데 더 적합합니다.
Q2. IT 기획자가 프로토타입을 직접 만들어야 하나요?
반드시 직접 만들 필요는 없습니다. 하지만 프로토타입을 실행하고 화면 이동 흐름을 확인할 수 있어야 협업이 쉬워집니다.
Q3. 프로토타입에서 가장 먼저 확인할 것은 무엇인가요?
시작 화면, 주요 버튼 클릭 후 이동 화면, 취소와 뒤로가기 흐름을 먼저 확인하는 것이 좋습니다.
Q4. 오류 화면도 프로토타입에 포함해야 하나요?
가능하면 포함하는 것이 좋습니다. 로그인 실패, 저장 실패, 권한 없음, 빈 데이터 화면은 개발 전 반드시 확인해야 할 흐름입니다.
참고 자료
Figma Help Center - Guide to prototyping in Figma
Figma Help Center - Prototype triggers
Figma Help Center - Prototype actions
Google Search Central - Meta descriptions