Prototype, 그리스어 protos + typos

한 줄로

"처음의 형태"라는 그리스어입니다. 최종 제품이 만들어지기 전 시험판입니다. 산업화 시대의 가장 강력한 발명 중 하나입니다.

어디서 왔나

어원: 그리스어 protos (처음, 원형) + typos (형태, 모양)으로 "최초의 형태"입니다.

이 단어는 19세기 산업혁명 시대에 본격 사용됐습니다. 새 기계를 대량 생산하기 전에 한 대를 시험 제작하는 것이 prototype입니다. 이 시험 단계에서 문제를 찾으면 대량 생산 비용을 절약할 수 있었습니다.

20세기에 자동차, 항공기, 가전 모든 산업의 표준 단계가 됐습니다. "빠르게 만들어 실패하라(fail fast)"는 실리콘밸리 격언의 뿌리입니다.

디지털 시대의 prototype

웹/앱 시대에서 prototype의 의미가 미세 변화했습니다.

전통적 의미: 진짜 작동하는 시험판.

디지털 의미: 화면 흐름과 인터랙션을 시뮬레이션한 것 (실제 데이터 처리는 없음).

3단계 충실도입니다.

1. Paper prototype: 종이에 그린 화면 + 손으로 넘기기. 1시간.

2. Click-through prototype: Figma의 프레임 연결, 클릭하면 다음 화면. 1일.

3. High-fidelity prototype: 실제 데이터, 애니메이션 포함. 1주.

도구

Figma: 프레임 + 프로토타입 모드. 가장 흔합니다.

Framer: 코드 기반 더 정교한 인터랙션.

ProtoPie: 마이크로인터랙션 특화.

InVision: 클릭을 통한 흐름 (단종 발표 2023).

Adobe XD: 단종됐습니다.

Prototype의 목적

사용자 테스트: 실제 사용자에게 보여줄 만한 최소 충실도.

개발자 핸드오프: 어떤 동작이 일어나야 하는지 명확히.

이해관계자 설득: 정적 화면보다 클릭 가능한 게 훨씬 강합니다.

"Prototype은 던질 수 있어야 한다"

좋은 prototype의 핵심 가치는 버릴 준비가 돼 있어야 함입니다. 너무 정성껏 만들면 발견된 문제를 인정하기 어려워집니다 ("이만큼 시간 썼는데..."). 빠르게 만들어 빠르게 버리는 게 핵심입니다.

바이브 메이커가 챙길 한 가지

새 기능을 개발 시작 전에 Figma로 30분 prototype을 만들고, 그것을 친구에게 보여주세요. 친구가 "어디 누르는 거야?"를 묻는 순간은 발견할 가치 있는 문제입니다. 1시간의 prototype이 1주의 잘못된 개발을 막습니다.

관련

Wireframe · Mockup · Figma