쉬운 설명
본격적으로 코드를 짜고 디자인을 다듬기 전에 '이 흐름이 사용자에게 말이 되는가'를 먼저 확인하고 싶을 때 만드는 것이 프로토타입입니다. 핵심은 '진짜'가 아니라 '진짜처럼 보이는' 데서 멈춰서 빠르게 보여 주고 빠르게 고치는 데 있습니다.
왜 필요한가 하면, 머릿속에서 좋아 보이는 흐름도 실제 사용자에게 보여 주면 30초 안에 어색함이 드러납니다. 정식 코드로 만들었다면 그 어색함을 알기 위해 몇 주를 썼을지도 모릅니다. 프로토타입의 가치는 '빨리 틀리고 빨리 고친다'에 있습니다.
충실도에 따라 두 단계로 나뉩니다. ① 낮은 충실도(low-fi): 종이·화이트보드·간단한 와이어프레임 도구로 회색 박스만 그려 흐름을 확인. 30분에서 1시간이면 한 흐름을 만들 수 있습니다. ② 높은 충실도(high-fi): Figma 같은 도구로 실제 화면과 거의 같은 모양을 만들고 화면 간 전환까지 클릭으로 동작하게 함. 사용자 테스트와 영업 자료에 같이 쓰입니다.
프로토타입을 사용자에게 보여 줄 때의 핵심은 '말로 설명하지 않는다'입니다. '여기 이 버튼은 이렇게 동작할 거예요'라고 해설하면 진짜 사용자 반응이 안 나옵니다. 사용자에게 작업(예: '어제 점심값 1만 원을 적어 보세요')을 주고, 어디서 멈칫하는지·어디서 잘못 누르는지만 관찰하면 5분 만에 다음에 고칠 곳이 분명해집니다.
프로토타입의 진짜 가치는 '버려도 아깝지 않다'는 점입니다. 정식 코드로 만들었다면 한 달 걸렸을 변경도 프로토타입에서는 한두 시간이면 가능합니다. 그래서 비싼 실수를 미리 거를 수 있고, 팀이 의견 다툼 대신 데이터를 보고 결정할 수 있습니다. 단, 프로토타입을 '거의 다 됐다'고 착각해 그대로 출시하려 하면 운영·보안·접근성에서 큰 문제가 생기니, 정식 빌드는 따로 한다는 약속이 중요합니다.
비유로 보면
프로토타입은 영화 제작자가 본 촬영 전에 만드는 스토리보드와 비슷합니다. 그림 한 장씩 흐름을 보여 주고 감독이 '여기 흐름이 어색하다'를 미리 잡습니다. 본 촬영을 다 끝낸 뒤 흐름을 고치려면 막대한 돈이 들지만, 스토리보드에서는 종이 한 장을 다시 그리면 됩니다.
어디에서 만나나
신제품·신기능의 초기 단계, 영업 자료(투자자·고객 시연), 사용자 인터뷰 도구, 디자인 시스템 새 컴포넌트 검증, 접근성 검토. 작은 팀은 종이·노션·구글 슬라이드로 시작해도 충분하고, 큰 팀은 Figma·Framer·ProtoPie 같은 전문 도구를 씁니다.
작은 예시
새 가계부 앱의 거래 입력 흐름이 너무 복잡한지 확인하려고, 디자이너가 Figma로 5장의 화면을 만들고 화면끼리 클릭으로 연결합니다. 동료 다섯 명에게 휴대폰으로 보여 주며 '어제 점심값 1만 원을 적어 주세요'라고 부탁하면 어디서 막히는지가 5분 안에 드러납니다.
자주 하는 오해
한 줄 정리
프로토타입의 목적은 '예쁜 화면 만들기'가 아니라 '비싼 실수 피하기'입니다. 한 시간의 프로토타입이 한 달의 재작업을 막을 수 있습니다.