카페 메뉴판 만들기: 복사할 프롬프트와 실제 화면

카페 메뉴판 예제에서 메뉴 전환과 휴대폰 화면 표시를 확인했어요.

1. 코딩 에이전트에서 빈 작업 폴더를 열고 아래 프롬프트를 붙여 넣습니다. 이번 예제는 Codex 앱으로 제작했습니다. 2. 완성된 demo.html을 브라우저 창에 끌어다 놓습니다. 위치를 모르겠으면 에이전트에게 파일 위치와 여는 방법을 물어보세요. 3. 아래 결과와 동작을 비교합니다. 막히면 화면이나 오류 문구와 함께 후속 요청을 보내세요.

나는 코딩을 처음 해. 동네 카페 «느린 오후»의 메뉴판을 만들어줘. 커피·음료·디저트 버튼을 누르면 해당 메뉴만 보이게 해줘. 커피는 아메리카노 4,000원과 라떼 4,800원, 음료는 레몬에이드 5,000원과 초코 4,500원, 디저트는 치즈케이크 6,000원과 쿠키 2,500원을 넣어줘. 처음에는 커피 메뉴를 보여줘. 가게 이름과 메뉴를 어디서 바꾸면 되는지도 짧게 알려줘. 크림색 바탕에 짙은 초록색 버튼을 쓰고, 사진 없이도 깔끔한 메뉴판으로 만들어줘. HTML 파일 하나로 만들어줘. 필요한 디자인과 동작도 같은 파일에 넣고, 별도 설치나 외부 서비스 연결 없이 브라우저에서 열리게 해줘. 휴대폰에서도 글씨와 버튼을 편하게 볼 수 있게 하고, 키보드로 버튼을 사용할 수 있게 해줘. 저장이나 실제 주문 기능은 넣지 마. 파일 이름은 demo.html로 해줘. 완성하면 파일을 여는 방법과 확인할 동작 3가지를 알려줘.

처음 커피 메뉴에 아메리카노 4,000원과 라떼 4,800원이 표시됐다. 음료를 클릭하면 레몬에이드 5,000원과 초코 4,500원이 보이고, Tab·Enter로 디저트를 선택하면 치즈케이크 6,000원과 쿠키 2,500원이 표시됐다. 제출된 390×844 화면에서 분류 버튼과 메뉴가 보이는 것을 확인했다.

분류 버튼을 눌렀을 때 해당 메뉴만 보이지 않아요. 현재 파일을 확인하고 관련 부분만 수정한 뒤 커피·음료·디저트 버튼을 각각 눌러 확인한 결과와 확인하지 못한 부분을 알려줘.

VibeAZ 자체 제작 예제입니다. Codex 앱에서 제작하고 Chromium 브라우저의 실제 동작과 390px 화면을 확인했습니다. 다른 모델의 동일한 결과는 확인하지 않았습니다. 이 결과는 확인한 VibeAZ 자체 예제와 해당 검수 환경에 한정됩니다. 동일 프롬프트의 매번 같은 결과나 다른 모델·도구·브라우저 호환성은 확인하지 않았습니다. 요금제·무료 이용 조건은 확인하지 않았습니다.