메뉴판 사진만 있으면 QR 주문 페이지를 바로 띄울 수 있습니다. 지난 편이 메일 답변을 빨리 만드는 쪽이었다면, 이번엔 손님이 바로 보는 화면까지 뽑아보는 흐름이구요. 완성되면 휴대폰에서 메뉴, 가격, 대표 메뉴, 주문 버튼이 한 번에 보입니다.
이거 진짜 장사하는 분 아니어도 재밌습니다. 동아리 간식 주문, 플리마켓 판매 목록, 행사 부스 메뉴판에도 그대로 써먹히거든요.
준비물은 하나만 있으면 됩니다
Codex 쓰는 분은 사진 첨부해서 그대로 따라오면 되고, Claude Code 쓰는 분은 같은 프롬프트를 그대로 넣으면 됩니다. 둘 다 켤 필요는 없구요, 오늘은 Codex 하나로 갈게요.
최근 문서를 보면 Codex는 사진을 같이 읽으면서 작업할 수 있고, 폴더 안 파일을 직접 고치고, 마지막엔 /review로 따로 점검까지 붙일 수 있더라구요. 이 세 가지만 오늘 씁니다. 많아 보이는데 사실 붙여넣기 몇 번이면 끝나요.
QR 주문 페이지, 손으로 안 만들고 말로 밀어붙이기
1
메뉴판 사진부터 넣기
AI에게 보낸 프롬프트
메뉴판 사진을 보고 모바일용 QR 주문 페이지를 만들어줘. 손님이 휴대폰으로 열었을 때 바로 주문할 수 있어야 해. 한국어로 만들고, 첫 화면에는 가게 이름, 대표 메뉴 3개, 가격, 주문 버튼이 보여야 해. 아래에는 전체 메뉴, 매장 정보, 문의 방법을 넣어줘. 결과는 바로 열어볼 수 있는 간단한 웹페이지로 만들어줘.
왜 이렇게 시켰나: 사진만 던지면 예쁘기만 하고 쓸모없는 화면이 나올 때가 있거든요. 그래서 모바일, 한국어, 첫 화면, 주문 버튼까지 먼저 박아두는 겁니다.
이렇게 나오면 OK: 첫 결과로 웹페이지 파일이 생기고, 휴대폰 폭에서도 메뉴 이름과 가격이 바로 읽힙니다.
⚠여기서 이렇게 하면 안 돼요: 기울어진 사진을 그냥 넣지 마세요. 메뉴 이름이 한 번 틀리면 뒤에 수정할 게 훨씬 늘어납니다.
2
AI가 딴길 안 새게 규칙 한 장 깔기
AI에게 보낸 프롬프트
프로젝트 루트에 AGENTS.md 파일을 만들고 아래 규칙을 적어줘.
- 이 프로젝트는 QR 주문 페이지다
- 화면은 모바일 우선
- 글자는 한국어
- 메뉴 이름과 가격은 사진 기준으로만 쓴다
- 버튼 문구는 '주문하기' 하나만 쓴다
- 파일은 최대 3개만 유지한다
왜 이렇게 시켰나: 이거 안 넣으면 수정할 때 분위기만 바꾸고 중요한 메뉴를 빼먹습니다. Codex는 AGENTS.md를 읽고 작업하니까, 여기 적은 규칙이 계속 따라옵니다. 외우지 말고 그냥 이렇게 해요.
이렇게 나오면 OK: AGENTS.md 하나 생기고, 다음 수정부터 말투와 구조가 덜 흔들립니다.
⚠여기서 이렇게 하면 안 돼요: 규칙을 길게 쓰지 마세요. 소설처럼 적으면 AI도 중심을 놓칩니다.
3
보기용 말고 진짜 쓰는 화면으로 바꾸기
AI에게 보낸 프롬프트
지금 만든 QR 주문 페이지에서 아래만 고쳐줘.
1. 베스트 메뉴 3개를 카드로 맨 위에 올리기
2. 전화 주문 버튼과 카카오톡 문의 버튼 넣기
3. 영업시간, 주소, 원산지 안내는 접기/펼치기로 넣기
4. 사진 속에 없는 정보는 상상해서 쓰지 말고 '직접 입력 필요'라고 표시하기
5. 아이폰 작은 화면에서도 버튼이 크게 보이게 해줘
왜 이렇게 시켰나: 첫 결과는 보통 보기엔 괜찮은데 실제 주문엔 조금 약합니다. 여기서부터 QR 주문 페이지가 진짜 도구가 됩니다.
이렇게 나오면 OK: 상단에 대표 메뉴가 먼저 보이고, 버튼이 엄지로 누르기 좋게 큽니다. 없는 정보는 빈칸 대신 표시가 남아야 해요.
⚠여기서 이렇게 하면 안 돼요: 없는 메뉴 설명을 상상해서 채우게 두지 마세요. 손님보다 AI가 더 자신만만해지는 순간이 있거든요. 그건 좀 무섭습니다.
4
따로 검수만 돌리기
AI에게 보낸 프롬프트
/review를 실행해서 지금 바뀐 QR 주문 페이지를 점검해줘. 모바일에서 읽기 힘든 글자, 메뉴 누락, 버튼 오작동 가능성만 우선순위로 적어줘. 코드 수정은 하지 말고 문제만 말해줘.
왜 이렇게 시켰나: /review는 작업 파일을 건드리지 않고 문제만 먼저 찍어줍니다. 그래서 마지막 체크용으로 진짜 편해요. 회사에서 이런 거 한번 놓치면 다시 여는 시간이 더 아깝거든요.
이렇게 나오면 OK: 글자 작음, 가격 빠짐, 버튼 링크 비어 있음 같은 지적이 2개에서 4개쯤 나옵니다. 많아도 괜찮아요. 오히려 그게 마지막 할 일 목록입니다.
⚠여기서 이렇게 하면 안 돼요: 리뷰 결과를 한 번에 다 고치라고 던지지 마세요. 한 줄씩 집어서 고치는 쪽이 덜 망가집니다.
5
급한 것만 닫고 끝내기
AI에게 보낸 프롬프트
리뷰에서 나온 문제 중 급한 것만 반영해줘. 디자인은 건드리지 말고, 메뉴 누락과 버튼 링크만 먼저 고쳐줘. 수정 뒤에는 내가 직접 넣어야 할 정보 3개만 따로 적어줘.
왜 이렇게 시켰나: 끝에서 욕심내면 다시 커집니다. 오늘은 QR 주문 페이지가 열리고 눌리면 이긴 거예요.
이렇게 나오면 OK: 거의 완성된 페이지와 함께 내가 직접 채워야 할 전화번호, 카카오톡 채널 주소, 매장 주소만 남습니다.
여기서 이렇게 하면 안 돼요: 색 바꾸기, 애니메이션 넣기, 영어 버전 추가까지 한 번에 하지 마세요. 오늘은 살아 있는 페이지 하나가 더 중요합니다.
여기서 막히는 건 거의 셋입니다
메뉴 이름이 이상하게 읽히면 사진을 다시 찍는 게 제일 빠릅니다. 그림자 심한 사진, 반사 심한 비닐 메뉴판은 AI도 자주 틀려요.
버튼을 눌렀는데 아무 일도 없으면 링크 자리에 #만 들어간 경우가 많습니다. 전화번호와 카카오톡 채널 주소를 직접 넣어달라고 다시 시키면 됩니다.
페이지가 너무 길어지면 첫 화면에 대표 메뉴와 주문 버튼만 남기고 나머지는 접어달라고 말하면 됩니다. 모바일은 짧을수록 체감이 좋더라구요.
다음엔 여기 하나만 더 붙이면 됩니다
한 걸음 더
다음 확장은 신청 내용이 자동으로 쌓이는 쪽입니다. 오늘 만든 QR 주문 페이지에 주문 폼 하나만 붙이면, 메뉴판이 그냥 안내문이 아니라 바로 받는 창구가 됩니다.
