1. 신메뉴 랜딩 페이지 만들기

1.1 배운 것을 한 번에 모아 쓰기

8장의 마지막은 실전입니다. 요구사항을 정리해 통째로 맡기고, 결과를 보며 다듬고, 명령어와 권한 조절로 작업을 편하게 만드는 이 장의 흐름을 처음부터 끝까지 한 번에 써봅니다.

상황은 이렇습니다. 대표님이 부탁을 하나 더 합니다. 7장 기획 회의에서 정한 신메뉴가 다음 달에 나오니, 출시에 맞춰 손님들에게 보여줄 소개 페이지를 만들어 두자는 것입니다. SNS 프로필에 걸 수 있는 한 장짜리면 충분합니다.

이런 페이지를 랜딩 페이지라고 부릅니다. 검색이나 SNS 링크를 타고 온 손님이 처음 내려앉는(landing) 페이지라는 뜻으로, 우리가 어떤 곳인지, 지금 무엇을 밀고 있는지, 어디로 오면 되는지를 한 화면에 보여주는 것이 목적입니다.

랜딩 페이지가 당장 필요한 일이 아니어도 괜찮습니다. 이 실전에서 연습하는 것은 페이지 자체가 아니라 순서입니다. 알릴 내용을 정리하고, 근거가 될 데이터를 폴더에 넣고, 한 번에 맡긴 뒤 다듬는 순서는 안내문이든 모집 공고든 무엇을 만들 때나 똑같이 통합니다. 그리고 여기에 Code 탭이라서 가능한 것이 하나 더해집니다. 작업 폴더의 매출 데이터를 읽어, 손님들이 실제로 많이 찾는 메뉴를 Claude가 스스로 뽑아서 페이지에 담게 할 수 있습니다.

1.2 작업 맡기기

리포트 실습에서 쓴 momo 폴더를 그대로 작업 폴더로 지정합니다. 매출데이터.csv가 그 안에 있기 때문입니다. momo 폴더는 잃을 것이 없는 실습 폴더이니, 앞에서 배운 '권한 건너뛰기'를 켜고 끝까지 맡겨보기 좋은 기회이기도 합니다.

폴더를 지정했으면 아래 요청을 붙여넣으세요. 페이지에 들어갈 카페 정보를 요청문에 함께 담았습니다. 영업시간과 주소는 실습용으로 지어낸 정보이고, 7장 실습에서 여러분의 분석이 흑임자 라떼가 아닌 다른 후보를 추천했다면 신메뉴 이름만 바꿔 적으면 됩니다.

카페 '모모의 정원'의 신메뉴 출시 랜딩 페이지를 만들어줘.

카페 정보:
- 소개: 동네 골목의 정원 딸린 카페. 계절 꽃과 나무를 보며 쉬어 가는 곳
- 신메뉴: 흑임자 라떼. 고소한 흑임자 크림을 올린 라떼, 다음 달 1일 출시
- 영업시간: 매일 10:00~21:00, 월요일 휴무
- 주소: 서울시 ○○구 정원길 12

만들 때 지켜줘:
- 맨 위에 신메뉴 소개가 가장 크게 오고, 아래로 카페 소개, 인기 메뉴, 오시는 길
  순서로 한 페이지에 담아줘
- 인기 메뉴 섹션은 폴더의 매출데이터.csv를 분석해서, 실제로 매출이 높은
  카테고리 순서대로 소개해줘
- 분위기는 차분한 초록 계열로, 사진 없이 색과 글자만으로 정돈되게
- 휴대폰 화면에서 봐도 깨지지 않아야 해
- 결과는 신메뉴소개.html 파일 하나로 저장해줘

요청문에서 눈여겨볼 대목은 인기 메뉴 항목입니다. "커피가 인기 메뉴야"라고 우리가 알려주는 대신, 데이터를 분석해서 채우라고 시켰습니다. 이렇게 하면 페이지의 문구가 우리의 감이 아니라 석 달치 판매 기록에서 나옵니다. 7장에서 신메뉴를 데이터로 골랐던 것과 같은 태도를, 이번에는 홍보 문구에 적용하는 것입니다.

1.3 결과 확인하기

작업이 끝나면 momo 폴더에 신메뉴소개.html이 생깁니다. 더블클릭해서 열고 다음을 확인해보세요.

• 흑임자 라떼 소개가 페이지 맨 위에서 가장 먼저 눈에 들어오는지
• 인기 메뉴가 커피, 디저트, 음료 순서로 나오는지. 매출데이터.csv 기준으로 이 순서가 맞고, 이 장 처음에 만든 리포트의 카테고리 차트와 비교해봐도 확인할 수 있습니다.
• 브라우저 창을 휴대폰 폭만큼 좁게 줄여도 배치가 깨지지 않는지

1.4 다듬고 활용하기

고치고 싶은 부분은 하던 대화에서 이어서 요청합니다. 이번에는 앞에서 배운 @로 파일을 지목해보겠습니다.

@신메뉴소개.html 에서 두 가지만 다듬어줘.

- 첫 문장을 더 짧고 따뜻하게 바꿔줘
- 신메뉴 소개에 출시일까지 며칠 남았는지 함께 보여줘

완성된 파일은 HTML 한 장이라 쓰임새가 넓습니다. 동료에게 보내 의견을 받아도 되고, 화면을 캡처해 SNS 게시물로 올려도 됩니다. 페이지 자체를 인터넷 주소로 만들어 프로필에 거는 일은 배포라고 부르는 별도의 단계인데, 해보고 싶다면 위니북스의 딱 필요한 만큼: 바이브 코딩을 위한 HTML 책을 참고해주세요. 무료로 올리는 방법까지 정리되어 있습니다.

내 일에 가져갈 때의 요령도 같습니다. 알리고 싶은 것 하나(신제품, 행사, 모집 공고)를 맨 위에 두고, 나머지 정보를 요청문에 정리해서 건네면 됩니다. 판매 기록이나 후기 파일이 있다면 이번 실습처럼 폴더에 넣어두세요. 홍보 문구의 근거를 데이터에서 꺼내 쓰는 것이 Code 탭으로 만드는 페이지의 강점입니다.

여기까지 채팅, Cowork, Code 탭으로 일을 시키는 흐름을 익혔습니다. 다음 9장에서는 결과물의 종류를 한 단계 넓혀, 글과 표를 넘어 눈에 보이는 화면을 만드는 Claude Design으로 넘어갑니다. 그리고 부록에는 본편에서 깊이 다루지 않은 아티팩트와 MCP를 정리해두었으니, 필요할 때 찾아보시기 바랍니다.