AI로 작동하는 앱 프로토타입을 만들어 사람들에게 보여 주기

작동하는 프로토타입이 목업보다 더 많이 알려 주는 이유

정적인 화면은 사람들이 생김새를 좋아하는지는 테스트하지만, 쓸 수 있는지는 거의 테스트하지 못합니다. 테스터는 탭할 때마다 무슨 일이 일어날지 상상해야 하고, 진행자는 결국 제품을 말로 설명하게 됩니다. 실제로 반응하는 클릭 가능한 앱 프로토타입은 그 설명을 없앱니다. 테스터는 진짜 입력란에 입력하고, 합계가 실제로 바뀌는 것을 보고, 마지막 항목을 지우면 진짜 빈 화면을 만납니다. 테스터가 헷갈리는 지점은 프로토타입의 빈틈이 아니라 디자인 자체에 관한 것이 됩니다.

물을 수 있는 질문도 달라집니다. 목업으로는 "이걸 쓰시겠어요?"라고 묻게 되고, 사람들은 예의 바르게 답합니다. 작동하는 것이 있으면 과제를 줄 수 있습니다("다음 주 화요일 근무를 추가하고 주간 근무 시간이 어떻게 되는지 보세요"). 그리고 어디서 머뭇거리는지 지켜보면 됩니다.

프로토타입이 증명해야 할 것 정하기

무엇이든 설명하기 전에, 테스트가 답해야 할 질문 한두 개를 적어 두세요. 그러면 빌드는 작게, 세션은 집중된 상태로 유지됩니다. 흔한 질문은 다음과 같습니다.

• 이해도: 사람들이 몇 초 안에 메인 화면이 무엇을 위한 것인지 아는가?
• 핵심 과제: 제품이 존재하는 이유인 그 한 가지 일을 도움 없이 끝낼 수 있는가?
• 애매한 순간: 확신이 없는 경계에서 무슨 일이 일어나는가? 빈 목록, 되돌려야 할 실수, 줄바꿈되는 긴 이름 같은 것.
• 의향: 써 본 뒤에 지금 쓰는 스프레드시트, 수첩, 앱을 이걸로 바꾸겠는가?

이 질문에 도움이 되지 않는 것은 빼거나 흉내만 내도 됩니다. 20분짜리 세션에서 아무도 열지 않을 설정 페이지는 아무리 쉽게 생성된다 해도 낭비입니다.

Anticode에 설명하는 방법

사용자, 과제, 화면을 몇 문장으로 설명하고, 샘플 데이터가 어떤 모습이어야 하는지 적으세요. 예를 들면 이렇습니다. "카페 직원용 근무 교대 앱 프로토타입. 화면: 이번 주 근무표, 근무 교대 요청, 열려 있는 교대 요청 목록. 샘플 직원 8명과 현실적인 한 주를 사용. 모든 데이터는 데모 데이터로 표시." Architect가 짧은 계획(이름, 화면, 분위기, 기능)으로 답하고, 답에 따라 결과가 달라지는 곳에서 최대 세 가지 질문을 할 수 있습니다. 각 질문에는 누를 수 있는 제안 답변이 있습니다.

Build it을 누르면 모델이 앱 전체를 하나의 HTML 문서로 작성하고, 코드가 작성되는 과정을 지켜볼 수 있습니다. 새 앱 빌드는 해당 리뷰 서비스를 쓸 수 있을 때 헤드리스 브라우저에서 휴대폰과 노트북 너비로 열어 스크린샷을 찍고 클릭해 보며, 오류는 수정을 위해 다시 전달됩니다.

가짜인 부분은 정직하게

Anticode 앱은 네트워크가 없는 샌드박스에서 실행되므로, 보통 서버가 필요한 것은 모두 페이지 안에서 흉내 냅니다. 다른 사용자는 샘플 인물이고, "보낸" 메시지는 로컬 목록에 쌓이며, 로그인 화면은 무엇이든 받아들입니다. 앱은 필요한 곳에 이를 데모 데이터로 표시합니다. 테스트 중에도 이 표시가 보이도록 두세요. 실제 시스템을 쓴다고 생각하는 테스터는 모형이라는 것을 아는 테스터와 다르게, 더 위험하게 선택합니다. 이 단계에서 필요한 것은 후자의 피드백입니다.

남는 것은 앱이 테스터의 브라우저에 저장한 내용입니다. 누군가 항목 세 개를 추가하고 탭을 닫았다가 내일 다시 오면, 그 기기에는 항목이 그대로 있습니다. 테스터가 휴대폰이나 노트북 한 대만 쓴다면 일주일짜리 일기 연구에 충분합니다.

세션 진행과 빌드 수정

1. 프로토타입을 anticode.dev 주소에 게시하고 테스터에게 링크를 보내세요. 설치할 것이 없습니다.
2. 이해관계자에게는 클라이언트 리뷰 링크를 보내세요. 계정 없이 현재 미리보기를 열고 섹션별로 댓글을 남길 수 있습니다. 링크는 기본적으로 14일 뒤 만료되며 직접 취소할 수도 있습니다.
3. 매 라운드가 끝나면 평범한 말로 변경을 요청하세요("교대 버튼을 각 근무 카드 안으로 옮겨 줘"). 최근 저장본은 버전 기록에 보관되므로(요금제에 따라 정해진 개수까지) 1라운드와 3라운드를 나란히 보여 주거나 되돌아갈 수 있습니다.

하나의 브라우저에서 도는 프로토타입이 테스트할 수 없는 것

경계를 스스로 분명히 해 두세요. 샌드박스 프로토타입은 한 번에 한 기기에서만 실행되므로 다음은 테스트할 수 없습니다.

• 사람과 사람 사이의 모든 것: 실제 알림, 공유 목록, 두 테스터가 서로의 변경을 보는 상황.
• 실제 로그인, 권한, 계정 복구.
• 실시간 외부 데이터, 결제, 앱 안의 AI 기능(고정된 샘플 응답으로 흉내만 낼 수 있습니다).
• 실제 데이터 양이나 느린 네트워크에서의 성능.

아이디어가 테스트를 통과하면 Next.js 내보내기가 실제 제품으로 가는 단계입니다. 앱 빌드를 대상으로 하며, TypeScript로 된 표준 App Router 프로젝트에 Prisma를 통한 Postgres, 이메일 로그인, 고객과 직원 역할, 관리자 영역을 제공합니다. 완성된 다중 사용자 앱이 아니라 개발자가 확장할 출발점이며, 직접 고른 GitHub 저장소로 푸시할 수 있습니다. 무엇이 들어 있는지는 Next.js로 내보내기 가이드에서 다룹니다. 코드를 쓰지 않고 실서비스 수준의 다중 사용자 기능이 필요하다면, 백엔드가 있는 노코드 도구가 둘 다보다 더 맞을 수 있습니다.

자주 묻는 질문

AI 앱 프로토타입 생성기인가요, 디자인 도구인가요?

캔버스 위의 프레임이 아니라 작동하는 코드를 만듭니다. 브라우저에서 실제 앱을 얻으므로 사용성 테스트에 맞습니다. 디자인 팀을 위해 픽셀 단위 디자인 파일이 필요하다면 디자인 도구를 함께 쓰세요.

테스터가 휴대폰으로 쓸 수 있나요?

네. 게시된 앱은 휴대폰 브라우저에서 작동하는 웹 페이지이고, 앱이 저장하는 내용은 그 휴대폰에 남습니다.

테스터가 입력한 내용을 볼 수 있나요?

앱 안에 저장한 내용은 볼 수 없습니다. 그 내용은 테스터의 기기에 남습니다. 피드백 폼이나 문의 폼을 추가하면 그 제출 내용은 이메일과 대시보드로 받습니다.

프로토타입이 실제 앱이 되나요?

출발점이 될 수 있습니다. Next.js 내보내기를 하면 개발자가 이어서 만들 수 있는, 데이터베이스와 로그인을 갖춘 프로젝트가 됩니다.