한눈에 보는 정의
실제로 개발하기 전에 화면 흐름과 동작을 미리 확인하려고 만든 시험용 모형.
이런 말로 들어요
- 프로토타입 링크 보내드릴게요. 휴대폰으로 눌러 보세요.
- 실제 결제는 안 되고 흐름만 보는 프로토타입이에요.
그림으로 보기
개발 전에 화면 흐름을 눌러 보며 막히는 단계를 찾습니다. 저장이나 결제는 되지 않는 확인용 모형입니다.
하캄솔루션 자체 제작 모션그래픽자세히 알아보기
정지된 디자인 시안과 달리, 버튼을 누르면 다음 화면으로 넘어가는 등 실제 사용하듯 눌러 볼 수 있습니다. 개발 전에 흐름의 문제를 찾으면 고치는 비용이 훨씬 적습니다. 피그마 같은 디자인 도구로 만들거나, 바이브코딩으로 간단히 동작하는 웹페이지를 만들기도 합니다.
실무 예시
예를 들어 예약 페이지를 만들기 전에 '날짜 선택 → 시간 선택 → 연락처 입력 → 완료' 4화면을 프로토타입으로 만들고, 실제 고객 두세 명에게 눌러 보게 하면 막히는 단계를 미리 찾을 수 있습니다.
함께 살펴볼 점
프로토타입은 실제 데이터 저장·결제·보안이 빠진 모형입니다. 잘 동작해 보여도 완성된 서비스로 착각하지 않습니다.
AI에게 이렇게 요청해 보세요
예약 흐름 4단계(날짜·시간·연락처·완료)를 저장 기능 없이 화면 이동만 되는 클릭형 프로토타입 HTML로 만들어 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- What is Prototyping in Design? | Figma 새 창
피그마 자료에서 디자인 프로토타입의 목적(개발 전 흐름·상호작용 검증)을 확인했습니다.
자료 확인 - Guide to prototyping in Figma 새 창
피그마 공식 도움말에서 화면 간 연결·상호작용 설정 기능을 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정