[#003] Claude Projects RAG와 Cursor Rules로 행사 안내 자료를 FAQ 마이크로사이트로 바꾸기 [Vibe Coding, Claude Projects, Cursor, GPT Canvas]

이번에 만들 것

행사 안내 PDF, 공지 메일, 일정표가 따로 놀 때 가장 먼저 엉키는 게 FAQ입니다. 이번 수업에서는 이 자료 묶음을 참가자용 FAQ 마이크로사이트로 바꿔봅니다. 지난 편에서 Cursor 작업 환경을 잡아뒀다면, 이번에는 한 도구에 다 맡기지 않고 Claude Projects는 사실 정리, GPT Canvas는 화면 명세, Cursor는 구현으로 역할을 나눠보면 됩니다.

준비물

• Claude Projects: claude.ai/projects에서 새 프로젝트를 열고 행사 안내 PDF, 메일, 스프레드시트, 노션 내보내기 파일 중 3~5개를 준비하세요. 요즘 Projects는 자료가 많아지면 자동으로 RAG mode로 넘어가서 한 프로젝트에 계속 쌓아도 버틸 만합니다.
• ChatGPT 웹: 채팅창에 open a coding canvas를 입력할 수 있으면 됩니다.
• Cursor 최신 버전: 빈 폴더 하나를 열어두세요. Cursor는 이제 .cursorrules보다 .cursor/rules를 쓰는 방식이 기준이라 새 폴더에서 시작하는 편이 덜 헷갈립니다.
• 지난 편에서 만든 로컬 미리보기 환경이 있으면 그대로 써도 됩니다.

따라하기

Step 1: Claude Projects에 자료를 먼저 몰아넣기

Claude Project를 만들고 자료를 전부 업로드하세요. 오른쪽 Project instructions에는 자료 밖 정보는 추측하지 말 것 한 줄을 먼저 넣어두면 뒤에서 덜 흔들립니다. 여기서 사이트 코드를 바로 요구하지 않는 게 중요해요.

이 프로젝트에 업로드한 자료만 근거로 행사 FAQ 사이트용 브리프를 만들어주세요. JSON으로만 답하고, 필드는 hero_summary, visitor_types, faq_items(question, answer, source_file, confidence), unresolved_items, must_not_guess로 주세요. 자료에 없는 내용은 절대 채우지 말고 unresolved_items에 넣어주세요.

faq_items가 12개 이상 나오고 각 항목에 source_file이 붙으면 정상입니다. unresolved_items에 환불 정책이나 주차 안내처럼 비어 있는 항목이 보이면 오히려 잘 된 거예요. 여기서 예쁘게 써달라거나 홍보 문구까지 같이 시키면 사실 추출 단계가 흐려집니다.

Step 2: GPT Canvas에서 화면 명세로 바꾸기

ChatGPT에서 open a coding canvas를 입력해 빈 canvas를 여세요. Step 1의 JSON을 붙여 넣고, 이번에는 화면 구조와 문구만 정리하게 시키면 됩니다. 아직 프레임워크는 정하지 마세요.

Open a coding canvas. I will paste a grounded JSON brief for an event FAQ microsite. Turn it into an implementation-ready spec for a single-page site. Return 1) section order 2) component list 3) mobile behavior 4) copy draft in Korean 5) TODO items that still need confirmation. Do not invent facts beyond the brief.

결과물로 hero - search - category chips - faq list - unresolved banner - CTA 같은 순서가 나오면 괜찮습니다. TODO가 몇 개 남아 있어도 정상이에요. 여기서 React나 Next.js부터 정하게 두면 화면 설계보다 도구 선택 얘기로 새기 쉽습니다.

Step 3: Cursor Rules로 작업 범위를 고정하고 구현시키기

Cursor에서 빈 폴더를 열고 spec.md에 Canvas 결과를 붙여 넣으세요. 그리고 .cursor/rules에 규칙 파일을 만들어 이 프로젝트는 정적 페이지, 한국어 카피, 작은 파일 우선이라고 적어두면 좋습니다. 그다음 Agent에 아래처럼 넣어보세요.

Read spec.md and build a mobile-first single-page FAQ microsite. Use plain HTML, CSS, and vanilla JS. Requirements: instant search, category chips, unresolved-items banner, sticky 문의하기 button, local sample data file, and clean Korean copy. Do not add backend, auth, analytics, or external UI libraries. When finished, tell me which files were created and what to click to verify in the browser.

index.html, styles.css, app.js, data.json 정도로 끝나면 딱 좋습니다. 브라우저 미리보기에서 검색창과 카테고리 필터가 바로 동작하면 정상이에요. Cursor가 관리자 페이지나 DB까지 만들기 시작하면 잘해준 게 아니라 경계를 놓친 거니까 바로 멈추세요.

Step 4: 다시 Claude Projects로 사실 검수 돌리기

브라우저 미리보기에서 화면을 띄운 뒤, 생성된 FAQ 문구를 Claude Project로 다시 가져갑니다. 이번 단계는 개선이 아니라 검수입니다. vague한 말 대신 이슈 목록만 뽑아내게 해야 수정 폭이 작게 유지됩니다.

아래는 방금 만든 FAQ 사이트의 문구입니다. 업로드된 프로젝트 자료와 비교해서 unsupported claim, ambiguous wording, missing critical info를 severity별로 표로 정리해주세요. 각 항목마다 fix suggestion을 한 줄로 붙여주세요.

Apply only the fixes from audit.md. Keep layout unchanged unless the audit requires it. After editing, list changed files and the user-visible differences.

Claude 검수에서 high 항목이 몇 개 찍히는 건 자연스럽습니다. 그 목록만 Cursor에 다시 넣어 고치면 됩니다. 여기서 더 멋지게 만들어달라고 얹어버리면 마지막 diff가 커져서 어디가 바뀌었는지 추적이 어려워져요.

직접 해보기

지금 참석 예정인 세미나나 모임 자료 3개를 모아서 같은 흐름으로 참가자 FAQ 대신 늦게 합류한 사람용 catch-up 페이지를 만들어보세요. Step 1 프롬프트에서 faq_items 대신 missed_summary, today_actions, after_session_links를 요구하면 같은 워크플로로 주제만 바뀝니다.

결과물 체크

• 첫 화면에서 일정, 장소, 대상자가 5초 안에 읽힙니다.
• 검색창에 주차, 환불, 준비물 같은 단어를 넣었을 때 해당 FAQ만 바로 좁혀집니다.
• 자료에 없는 정보는 감춰두지 않고 unresolved banner나 TODO로 드러납니다.
• Claude 재검수에서 severity high 항목이 0개면 성공입니다.

다음 편 예고

다음 편에서는 이 역할 분리 방식을 그대로 가져가서 CSV 한 장만 넣으면 매일 쓰는 개인용 업무 도구가 돌아가게 만들어보겠습니다.