CLAUDE.md & 명령어

CLAUDE.md 설정하기

왜 필요한가?

매번 "한국어로 해줘", "이그니스 색상 써줘", "React 써줘"라고 반복할 필요 없이, 한 번 설정하면 Claude가 자동으로 지킵니다.

/init 명령으로 자동 생성

Claude Code 프롬프트에서:

/init

이 명령을 실행하면 현재 프로젝트를 분석해서 CLAUDE.md를 자동으로 만들어줍니다.

이그니스 맞춤 CLAUDE.md 예시

아래는 이그니스 프로젝트에 바로 사용할 수 있는 CLAUDE.md 예시입니다. 프로젝트 폴더에 CLAUDE.md 파일을 만들고 아래 내용을 넣으세요:

# 프로젝트 규칙

## 기술 스택
- React + Tailwind CSS
- 한국어 UI, 한국어 주석

## 코딩 컨벤션
- 변수명은 camelCase
- 컴포넌트명은 PascalCase
- 한국어 주석 사용

## 이그니스 브랜드
- 메인 컬러: #E87040 (주황), #1E293B (다크)
- 브랜드: 한끼통살, 랩노쉬, 클룹, 브레이, 그로서리서울, 닥터랩노쉬, 오원, 엑쎄라피

## 데이터
- 카페24에서 내보낸 엑셀/CSV 기반
- 칼럼명이 지저분할 수 있음 - 자동 매핑 필요

## 중요
- API 키는 .env 파일에 분리
- .gitignore에 .env 포함 확인
- 에러 메시지는 한국어로

이렇게 설정해두면 매번 반복 설명 없이 Claude가 이그니스 스타일에 맞춰 코드를 작성합니다.

자주 쓰는 명령어 & 단축키

슬래시 명령어

Claude Code 프롬프트 안에서 /로 시작하는 명령어를 사용할 수 있습니다:

키보드 단축키

터미널 옵션

Claude Code를 실행할 때 옵션을 붙여서 다양한 방식으로 시작할 수 있습니다:

# 질문 하나만 하고 바로 답변 받기 (대화 모드 진입 안 함)
claude -p "이 프로젝트 구조 설명해줘"

# 이전 대화 이어가기
claude --resume

# 특정 에이전트로 시작하기
claude --agent code-reviewer

두 번째 실습: CSV 데이터 간단 정리 (10분)

15장에서 할 일 목록 앱을 만들어봤죠? 그건 "Claude Code가 동작하는구나"를 확인하는 수준이었습니다. 이번에는 이그니스 실무에 한 발짝 더 가까운 실습을 해봅시다.

CSV 파일을 만들고 → Python으로 분석하고 → 웹 페이지로 시각화하는 3단계를 경험합니다.

Step 1: 프로젝트 폴더 만들고 Claude Code 실행

mkdir csv-practice && cd csv-practice
claude

Step 2: 샘플 데이터 + 분석 스크립트 요청

아래 프롬프트를 그대로 붙여넣으세요:

이 폴더에 sample.csv 파일을 만들어줘. 
내용: 상품명, 수량, 단가, 합계 칼럼. 닭가슴살 관련 상품 10개 정도.
그리고 이 CSV를 읽어서 합계를 계산하고, 
상위 3개 상품을 알려주는 Python 스크립트를 만들어줘.

Claude가 sample.csv와 analyze.py(또는 비슷한 이름) 두 파일을 만들어줍니다.

Step 3: 실행해서 결과 확인

실행해줘

터미널에 상위 3개 상품과 합계가 출력되면 성공입니다.

Step 4: 웹 테이블로 변환

이걸 웹 테이블로 보여주는 HTML 페이지도 만들어줘

Claude가 HTML 파일을 생성합니다. 브라우저에서 열면 데이터가 테이블로 보입니다.

Step 5: 인터랙션 추가

정렬 기능 추가해줘

칼럼 헤더를 클릭하면 정렬되는 기능이 추가됩니다. JavaScript 한 줄 안 쓰고 인터랙티브 테이블이 완성되었습니다.

이 실습의 핵심: CSV → Python 스크립트 → HTML 페이지로 점진적으로 복잡해지는 패턴을 체험하는 것입니다. 다음에 나오는 카페24 데이터 정리기도 이 패턴의 확장이고, 17장의 React 대시보드는 여기에 컴포넌트와 상태 관리가 더해진 버전입니다.

이그니스 실전 첫 프로젝트: 카페24 데이터 정리기

할 일 목록은 연습이었고, 이제 실무에서 바로 쓸 수 있는 도구를 만들어봅시다. 한끼통살 카페24 스토어에서 다운받은 주문 데이터를 정리하는 웹 도구입니다.

Step 1: 프로젝트 폴더 만들기

mkdir cafe24-cleaner && cd cafe24-cleaner

Step 2: Claude Code 실행

claude

Step 3: 프롬프트 입력

아래를 그대로 복사해서 붙여넣으세요:

한끼통살 카페24 스토어에서 다운받은 주문 엑셀을 정리하는 웹 도구를 만들어줘.

기능:
- 엑셀/CSV 파일 드래그 앤 드롭 업로드
- 칼럼명 자동 정리 (카페24 기본 칼럼명이 지저분하므로 한글로 통일)
- SKU별 주문수, 매출, 평균단가 요약 테이블
- 기간별 필터링 (일별/주별/월별)
- 정리된 데이터를 엑셀로 다시 내보내기
- React + Tailwind CSS, 다크모드
- 한국어 UI

Claude가 필요한 파일들을 생성하고, 패키지를 설치하고, 프로젝트를 구성합니다. 파일 생성과 명령어 실행 허가를 묻는 팝업이 뜨면 허용(Y)을 누르세요.

Step 4: 실행해서 확인하기

실행해줘

브라우저에서 파일 업로드 화면이 뜨면 성공입니다. 카페24에서 다운받은 주문 엑셀을 드래그해서 올려보세요.

Step 5: 기능 추가 요청

잘 동작하면 기능을 더 추가해봅시다:

브랜드별 매출 파이차트도 추가해줘.
차트 아래에 월별 추이 라인 그래프도 넣어줘.

Step 6: 커밋으로 저장

커밋해줘

이렇게 만든 도구를 팀원에게 공유하면 됩니다. 코드를 한 줄도 직접 쓰지 않고 실무 도구를 만들었습니다.

주의사항

보안은 꼭 지키세요

• API 키, DB 주소, 비밀번호는 코드에 직접 쓰지 마세요
• 반드시 .env 파일에 분리하고, .gitignore에 .env를 추가하세요
• 잘 모르겠으면 Claude Code에게 물어보세요:

이 프로젝트에서 보안상 문제될 부분 있는지 체크해줘

생성된 코드는 반드시 리뷰

• 하드코딩된 URL이나 포트 번호가 없는지 확인
• 에러 처리가 빠진 부분이 없는지 확인
• 불필요하게 추가된 패키지가 없는지 확인

프로덕션 배포 전 개발팀 리뷰 필수

• 바이브 코딩으로 만든 결과물을 바로 운영 서버에 올리지 마세요
• 사내 도구라도 개발팀 리뷰를 거치세요
• 고객에게 노출되는 페이지는 반드시 QA를 거치세요

Claude Code는 인터넷에 접근 가능합니다

• npm 패키지 설치, API 호출 등이 가능합니다
• 설치되는 패키지가 무엇인지 확인하는 습관을 들이세요
• 잘 모르는 패키지가 설치되면 "이 패키지가 뭔지 설명해줘"라고 물어보세요

바이브 코딩 잘하는 법 6가지

1. CLAUDE.md를 잘 써라

프로젝트 규칙을 명시해두면 매번 반복 설명할 필요가 없습니다. 기술 스택, 브랜드 컬러, 코딩 컨벤션 등을 적어두세요.

2. 작은 단위로 요청해라

"쇼핑몰 전체를 만들어줘"보다 "상품 목록 페이지 만들어줘" → "장바구니 기능 추가해줘" → "결제 페이지 만들어줘" 순서로 하나씩 요청하는 것이 결과가 훨씬 좋습니다.

3. 중간 결과를 자주 확인해라

"실행해줘"를 자주 사용해서 현재 상태를 확인하세요. 방향이 잘못되면 빨리 잡을 수 있습니다.

4. 스크린샷을 활용해라

UI 문제는 말로 설명하기 어렵습니다. 화면을 캡처해서 "이 부분이 이상해"라고 보여주면 Claude가 정확히 파악합니다. Claude Code는 이미지를 이해할 수 있습니다.

5. Git 커밋을 자주 해라

"커밋해줘"를 자주 사용하세요. 잘 되는 상태를 저장해두면, 나중에 잘못되었을 때 되돌릴 수 있습니다. 보험이라고 생각하세요.

6. Plan 모드를 활용해라

복잡한 작업 전에 "계획 먼저 세워줘"라고 하면, Claude가 구현 계획을 먼저 보여줍니다. 계획을 검토하고 수정한 뒤 "이대로 진행해줘"라고 하면 실수가 줄어듭니다.

이 가이드도 바이브 코딩으로 만들었습니다

지금 보고 있는 이 Cowork Guide 사이트도 Claude Code로 만들었습니다.

"이런 도구가 있으면 좋겠는데"라는 생각이 들면, 터미널을 열고 claude를 입력하세요.