[Figma] 프로토타입 정리

1. 프로토타입(Prototype)이란?

프로토타입은 디자인 화면을 실제 앱처럼 ‘동작’하게 만드는 것입니다.

단순히 화면을 그려두는 것이 아니라,

• 버튼을 누르면 다음 화면으로 이동하고
• 회원가입 → 약관 → 개인정보 → 가입 완료
  같은 사용자 흐름(User Flow) 을 직접 체험할 수 있게 합니다.

 즉,
“이 화면이 이렇게 동작할 것이다”를 말이 아니라 행동으로 보여주는 도구입니다.

 

2. 왜 프로토타입이 중요한가?

• 기획자·디자이너·개발자가 같은 그림을 보게 됨
• 화면 전환, 버튼 위치, 동선 문제를 개발 전에 발견
• 사용자 입장에서 불편한 흐름을 미리 점검 가능

특히 회원가입, 결제, 약관 동의처럼
단계가 많은 화면에서 필수적입니다.

 

3. 스크롤(Scroll)이란?

스크롤은 한 화면(Frame) 안에 콘텐츠가 더 많을 때 사용하는 동작입니다.

모바일 화면처럼 높이가 제한된 경우,

• 약관 전문
• 개인정보 처리방침
  같은 긴 콘텐츠는 세로 스크롤로 처리합니다.

 

4. 프로토타입에서 스크롤 설정이 중요한 이유

프로토타입에서 스크롤을 설정하지 않으면:

• 화면이 잘리거나
• 스크롤이 안 되는 것처럼 보여서
  실제 앱과 전혀 다른 사용 경험이 됩니다.

그래서 프로토타입에서는:

• Frame 높이보다 콘텐츠가 길면
• Vertical scrolling을 명시적으로 설정해야 합니다.

 

5. 이번 예시 흐름 정리

 

이번 회원가입 플로우는 다음 구조를 가집니다.

• 회원가입 입력 화면 (버튼 클릭)
• 이용약관 화면 (세로 스크롤)
• 개인정보 처리방침 화면 (세로 스크롤)
• 가입 성공 화면

화면 전환은 프로토타입,
약관 읽기는 스크롤로 역할이 분리되어 있습니다.

 

 

정리하면

 

프로토타입은 화면 간 ‘이동’을 설계하는 것이고,
스크롤은 한 화면 안에서 ‘읽는 흐름’을 설계하는 것이다