손금보기 미니앱,
코딩 0줄로 QR 매장 홍보하기

손금보기 미니앱은 손님이 테이블이나 포스터의 QR을 열고 손바닥 사진을 올리면 오늘의 운세와 행운 메뉴를 보여주는 매장 홍보용 재미 콘텐츠입니다. 실제 손금을 판독하는 서비스가 아니라, 가벼운 참여 경험 뒤에 매장 메뉴와 정보를 자연스럽게 연결하는 구조입니다. 이 자료에는 Claude에 붙여넣는 빌드 프롬프트와 매장 정보 교체 방법이 담겨 있습니다.

만드는 순서는 세 단계입니다. 먼저 빌드 프롬프트를 Claude 새 대화에 붙여넣어 React 단일 파일 아티팩트를 만듭니다. 이어 같은 대화창에서 STORE_CONFIG를 우리 매장명, 주소, 메뉴 다섯 개의 이름·가격·분위기로 바꿔 달라고 요청합니다. 완성된 앱 링크는 QR로 만들어 테이블이나 포스터처럼 손님이 보기 쉬운 곳에 붙입니다.

화면은 홈, 사진 미리보기, 로딩, 결과의 네 단계로 구성합니다. 홈에는 매장 사진과 이름, 손바닥 사진 올리기 버튼을 두고, 미리보기에서 업로드한 사진을 확인하거나 다시 찍을 수 있게 합니다. 로딩 뒤 결과 화면에는 세 가지 손금 라인 설명, 오늘의 운세, 행운 키워드, 오늘의 행운 메뉴, 매장 카드가 순서대로 나타나도록 요구합니다.

결과는 외부 AI API를 호출해 사진을 해석하는 방식이 아닙니다. 사진의 픽셀 해시와 오늘 날짜 해시를 시드로 삼아 미리 준비한 운세 풀에서 항목을 고르는 규칙을 사용합니다. 같은 사진과 같은 날짜에는 같은 결과가 나오고 날짜가 달라지면 다른 결과를 고르도록 설계합니다. 사진 분석처럼 보이는 연출과 실제 동작 원리를 구분해야 합니다.

운세 풀에는 생명선·감정선·지능선 설명, 오늘의 운세, 행운 색상·숫자·음식 후보를 한국어로 넣습니다. 행운 메뉴는 STORE_CONFIG에 등록한 매장 메뉴 가운데 하나를 같은 규칙으로 선택합니다. 매장명, 태그라인, 주소, 전화, 네이버 플레이스, 매장 사진, 영업시간, 메뉴 정보는 코드 위쪽의 한 객체에 모아 사장님이 교체하기 쉽게 만드는 것이 자료의 핵심 조건입니다.

구현은 모바일 우선 React 단일 컴포넌트로 만들고 외부 API 호출과 fetch·axios를 금지합니다. 이미지가 열리지 않을 때는 회색 박스와 메뉴 이름을 보여주며 결과 다운로드 대신 스크린샷을 안내합니다. 공개 전에는 네 단계 흐름, STORE_CONFIG의 실제 값, 같은 사진·같은 날짜 결과 규칙, 링크 복사와 다시 보기가 요청대로 동작하는지 직접 확인합니다.