Claude Code로 36계 조언기 만들기: 고민 입력, 전략 추천, React UI 구현까지 완전 정복

“지금 이 상황에서 어떤 전략을 써야 할까?”

우리는 중요한 선택의 순간마다 전략이 필요합니다. 이번 프로젝트는 바로 그 질문에 답하는 웹사이트를 만들어 보려고 합니다.

36계 조언기는 사용자가 현실적인 고민을 입력하면, 상황에 맞는 계책을 매칭하여 카드 형태로 제시하는 인터랙티브 React 웹사이트입니다. 동시에 향후 확장 예정인 저의 MVP 프로토타입이기도 하고요. 질문을 입력하면, 36계 중 가장 적합한 전략 3개를 추천해주도록 만들어 보겠습니다.

핵심은 단 하나입니다.

👉 코드를 직접 치지 않고, Claude Code에게 단계별로 시킬 것

이번 글은 Claude Code로 어떻게 프롬프트를 작성해야 하는지에 집중하겠습니다.

🎯 프로젝트 목표

• 고민 문장을 입력한다

• 36계 데이터에서 상위 3개 전략을 추천한다

• 카드 UI로 출력한다

• MVP 수준 구현

• 하단에 커피값 송금 섹션 추가

• localhost에서 실행한다

백엔드 없이 React 단일 프로젝트로 완성합니다.

STEP 1️⃣ 프로젝트 생성부터 Claude Code에게 시키기

VS Code에서 Claude Code를 실행하고 이렇게 입력하세요:

결과는 다음과 같습니다:

Claude Code가:

• Vite 생성 명령어

• npm 설치

• Tailwind 설정

• 실행 방법 및 전체 명령어 코드 요약

까지 모두 안내합니다.

STEP 2️⃣ 36계 데이터를 JSON으로 만들기

Project001 폴더에 아래 docx 파일을 저장합니다.

이미 만들어둔 doc 파일이 있다면, 이렇게 요청하세요:

이렇게 하면 프론트엔드에서 바로 사용할 수 있습니다.

STEP 3️⃣ 고민 문장 입력 UI 만들기

이제 입력창을 만듭니다. Claude Code에 이렇게 요청하세요:

이 단계에서는 로직이 아니라 UI 구조만 만듭니다.

STEP 4️⃣ 상위 3개 전략 추천 로직 구현

이제 핵심입니다. Claude Code에 이렇게 요청하세요:

이 방식은 단순하지만 MVP로는 충분합니다.

STEP 5️⃣ 조언 카드 UI 구현

이제 추천 결과를 보여주는 카드입니다. Claude Code에 요청:

여기까지 하면 기본 기능은 완성입니다.

STEP 6️⃣ 최종 출력 구조 연결

이제 App.jsx에서 연결합니다. Claude Code에 이렇게 요청하세요:

고민 입력 → 버튼 클릭 → 상위 3개 전략 카드 표시 구조가 완성되었습니다.

STEP 7️⃣ 커피값 송금 섹션 추가

하단 후원 영역을 추가합니다.

Claude Code 프롬프트:

이 방식은 결제 API 없이 가장 안정적인 구현입니다

STEP 8️⃣ localhost 실행

마지막으로 localhost에서 실행을 확인합니다.

Claude Code에 요청:

📦 최종 동작 흐름

1. 사용자가 고민 입력

2. matchStrategy 실행

3. 상위 3개 전략 추출

4. 카드 UI 출력

5. 하단 송금 섹션 표시

6. localhost에서 확인

❓ 자주 묻는 질문 (FAQ)

Q1. 매칭 정확도가 낮으면 어떻게 하나요?

keywords를 늘리고 동의어를 추가하세요.

Q2. AI API를 붙일 수 있나요?

가능합니다. 이후 Claude API 연동으로 자연어 매칭 고도화가 가능합니다.

Q3. 모바일 대응은?

Tailwind 반응형 클래스로 확장 가능합니다.

Q4. 백엔드 없이 괜찮나요?

36개 데이터 수준에서는 충분합니다.

Q5. 배포도 가능한가요?

Vercel, Netlify로 배포 가능합니다.

Q6. 확장 아이디어는?

전략 히스토리 저장, 감정 분석 연동 등이 가능합니다.

🏁 마무리

이번 프로젝트는 36계 지혜를 인터랙티브 웹앱으로 구현하는 경험이자 Claude Code로 개발을 진행하는 훈련입니다.

핵심은 프롬프트입니다.

코드를 잘 짜는 것보다 Claude Code에게 정확히 지시하는 능력이 더 중요합니다.

이제 VS Code를 열고, 한 단계씩 직접 실행해보세요.