냅킨 스케치를 5분 만에 작동하는 태블릿 키오스크로 바꾸는 방법

원하는 화면을 냅킨에 스케치하고, 사진을 찍어 Final의 AI 빌더인 Build에 업로드하세요. Build가 냅킨 스케치를 읽고 이에 맞는 작동하는 결제 흐름을 생성하며, 직접 터치해 볼 수 있는 실시간 미리보기를 제공합니다. 채팅을 통해 세부 사항을 수정하고 태블릿에 배포하면 끝입니다. 이것이 전체 과정입니다. 각 단계가 어떻게 작동하는지, 그리고 5분이 실제로 어떻게 소요되는지 알아보겠습니다.

왜 프롬프트 대신 스케치로 시작할까요?

레이아웃은 공간적이며, 문장은 공간을 제대로 설명하기 어렵기 때문입니다. "왼쪽에는 상품 그리드, 오른쪽에는 장바구니, 모퉁이에는 큰 결제 버튼"이라고 설명해도 여전히 수많은 결정 사항이 해석의 여지로 남습니다. 하지만 그림은 무엇이 어디에 위치하는지, 무엇이 가장 큰지, 고객이 가장 먼저 보게 되는 것이 무엇인지를 즉각적으로 결정해 줍니다.

빌더는 프롬프트 기반이므로 텍스트 설명만으로도 잘 작동합니다. 하지만 이미지는 가장 대역폭이 높은 프롬프트입니다. 몇 개의 상자와 화살표만으로도 글로 설명하려면 몇 문단이 필요할 계층 구조, 그룹화, 비율을 전달할 수 있으며, AI가 일반적인 템플릿 대신 사용자의 의도에 집중하도록 고정해 줍니다.

스케치를 AI 빌더에 어떻게 업로드하나요?

1. 스케치를 촬영합니다. 휴대폰 사진이면 충분합니다. 상자와 라벨이 선명할수록 첫 번째 결과물이 더 잘 나옵니다.

2. Build를 열고 이미지를 첨부합니다. Build 홈에서 사진과 함께 "커피숍용 셀프 주문 키오스크, 고객이 직접 사용함"과 같은 한 줄의 맥락을 추가합니다.

3. 실시간 미리보기를 확인합니다. Build가 화면, 레이아웃, 로직을 생성한 다음 대화형 미리보기를 엽니다. 고객이 하듯이 직접 탭하며 테스트해 보세요.

4. 채팅으로 수정합니다. 그룹화가 잘못되었나요? 옵션 선택 화면이 빠졌나요? 의견을 말하면 미리보기가 즉시 업데이트됩니다.

냅킨은 흥미로운 예시일 뿐이며 화이트보드 사진, 디자인 도구로 그린 와이어프레임(대략적인 레이아웃 도면), 스크린샷 등 어떤 레이아웃 이미지든 참고 자료로 사용할 수 있습니다. 또한 본인이 선호하는 도구로 작업하고 싶다면, MCP를 통해 자체 AI를 연결(AI 도구들을 서로 연결하기 위한 표준)하여 해당 도구에서 동일한 흐름을 구축할 수도 있습니다.

정적인 그림이 어떻게 데이터와 연결된 결제 화면이 되나요?

Build는 단순히 스케치를 화면에 붙여넣는 것이 아닙니다. 그림을 매장 시스템과 연결된 소프트웨어로 재구축합니다. 각 사각형은 실제 데이터와 바인딩된 활성 요소가 됩니다. 상품 그리드는 카탈로그에서 데이터를 가져오고, 장바구니는 세금을 적용하며, 결제는 Final Pay를 통해 처리되고, 영수증이 출력됩니다. 이 연결은 오프라인에서도 작동하므로 네트워크가 끊겨도 키오스크에서 계속 결제를 받을 수 있습니다.

실제로 사용자가 그린 버튼 매트릭스는 활성화된 결제 매트릭스가 됩니다. 미리보기에서 "라떼"라고 표시한 상자를 탭하면 실제 가격의 실제 상품이 추가되며, 판매 내역은 직접 관리하는 스프레드시트 대신 실제 결제 금액과 대조(정산)되는 보고서에 기록됩니다.

이것이 바로 목업과 POS의 차이입니다. 디자인 도구는 결제 화면의 '그림'을 제공하지만, 이 기술은 '실제 결제 시스템'을 제공합니다. 이는 AI 기능이 탑재된 POS와 AI가 직접 구축할 수 있는 POS의 진정한 차이점입니다.

키오스크 및 핸드헬드 터미널에 맞게 어떻게 최적화하나요?

어떤 하드웨어를 대상으로 하는지 Build에 먼저 알려주세요. 동일한 스케치라도 카운터 데스크톱, 고객용 태블릿, 핸드헬드 기기, 주방 디스플레이, 메뉴 보드에 따라 서로 다른 흐름을 생성해야 하며, 빌더는 사용자가 대상을 지정할 때 이에 맞춰 조정합니다.

고객용 레스토랑 태블릿의 경우, 사용자는 숙련된 직원이 아니라 일반 고객이므로 디자인 규칙이 달라집니다. 각 화면에서는 하나의 결정만 내리도록 하세요. 고객은 별도의 사용법 교육을 받지 않으므로 터치 영역을 크게 만들고 다음 단계를 명확하게 보여주어야 합니다. 프롬프트에 직접 다음과 같이 입력하세요. "고객이 직접 주문하므로 화면당 선택 항목을 최소화하고 버튼을 크게 만들어 주세요."

핸드헬드 터미널은 제약 조건이 반대입니다. 한 손 사용이 가능해야 하고, 가장 자주 사용하는 버튼이 엄지손가락이 닿는 범위에 있어야 하며, 바쁜 시간대에도 직원이 테이블 옆에서 빠르게 완료할 수 있는 짧은 흐름이어야 합니다. 팁 결제와 같은 결정은 화면에서 완전히 제외할 수 있는데, 팁 입력 요청을 카드 리더기에서 직접 처리할 수 있기 때문입니다.

배포는 모든 경우에 동일합니다. 흐름이 스테이션에 배포되며, Final POS 앱이 실행되는 호환 가능한 모든 Apple 또는 Android 기기를 스테이션으로 등록할 수 있습니다. 대면 카드 결제의 경우, Final Pay를 통해 인증된 리더기를 페어링하세요.

그렇다면 정말 냅킨 스케치에서 키오스크까지 5분 만에 갈 수 있을까요?

작동하는 첫 번째 버전이라면 가능합니다. 사진을 찍어 업로드하면 카탈로그와 연동된 기능적인 흐름이 몇 분 안에 실시간 미리보기에 나타납니다. 물론 실제 매장에 바로 적용할 수 있는 수준이 되려면 헤드라인에 적힌 시간보다는 더 걸립니다. 태블릿을 카운터에 고정하기 전에 세부 사항을 수정하고, 테스트를 실행하고, 실제 고객이 사용하는 모습을 10분 동안 관찰하는 시간을 고려해야 합니다. 그래도 6주짜리 구축 프로젝트가 아니라 반나절이면 충분합니다.

기본 원칙: 처음 보는 사람이 사용자의 스케치를 보고 화면이 무슨 역할을 하는지 설명할 수 있다면, 빌더도 그것을 구축할 수 있습니다.

무료 Build 플랜과 가장 엉성하게 그린 냅킨 스케치로 시작해 보세요.