오토프로그9강: CLAUDE.md
AI에게 규칙을 알려주는 설명서
오늘 끝나면 이런 걸 갖게 돼요
8강에서 만든 웹페이지에 **프로젝트 규칙서 CLAUDE.md**가 생겨요. 직접 입력할 터미널 명령어나 코드는 없어요.
1. 프로젝트가 맞는지 확인해요
VS Code(프로젝트 파일을 여는 편집기)에서 8강의 my-page 폴더를 여세요. 이미 열려 있다면 클로드 코드 대화창에서 바로 시작하면 돼요.
지금 열려 있는 프로젝트의 폴더 이름과 파일 목록을 보여줘.index.html과 style.css가 있는 8강의 my-page 프로젝트인지 확인해줘.다른 폴더이거나 두 파일이 없으면 아무것도 수정하지 말고 알려줘.
my-page, index.html, style.css가 모두 보이면 다음 단계로 넘어가세요. 다르게 나온다면 아무 파일도 만들지 말고 my-page 폴더부터 다시 여세요.
2. /init으로 초안을 만들어요
CLAUDE.md는 학교의 학생 수칙과 비슷해요. 새로 온 사람이 수칙을 읽듯, 클로드도 프로젝트를 시작할 때 이 파일을 읽어요.
아래 내용은 터미널 명령이 아니에요. 클로드 코드 대화창에 입력하세요.
/init
클로드가 프로젝트를 살펴보고 CLAUDE.md 초안을 만들어요. 파일이 이미 있으면 덮어쓰지 않고 개선할 내용을 제안해요.
초안에는 파일 구성처럼 클로드가 확인할 수 있는 내용이 들어가요. 내가 원하는 색상과 작업 방식은 다음 단계에서 더해요.
3. 내 규칙으로 다듬어요
기술, 디자인, 금지 사항, 작업 방식만 정해 볼게요. 아래 프롬프트를 클로드에게 보내세요.
방금 만든 CLAUDE.md를 아래 기준으로 다듬어줘.기술 규칙- HTML과 CSS만 사용해줘.- JavaScript와 외부 라이브러리는 쓰지 마.- index.html과 style.css 두 파일만 사용해줘.디자인 규칙- 배경은 #0a0a0a로 유지해줘.- 글씨는 #e0e0e0, 포인트 색은 #00e5ff로 유지해줘.- 휴대폰에서도 깨지지 않게 만들어줘.금지 사항- 새 파일을 추가하지 마.- index.html의 head와 body 구조를 바꾸지 마.- 이미지 파일을 추가하지 마.작업 방식- 설명과 코드 주석은 한글로 써줘.- 한 번에 한 기능만 수정해줘.- 수정 전에는 바꿀 내용을 먼저 보여줘.- 수정 후에는 바뀐 파일 목록을 알려줘.기존 초안과 겹치는 내용은 하나로 합쳐줘.서로 충돌하는 규칙이 있으면 수정하지 말고 먼저 알려줘.완성본을 보여준 뒤 내 확인을 받아 저장해줘.
index.html과 style.css만 쓴다는 규칙이 있는지 살펴보세요. 서로 반대되는 문장이 없다면 저장을 승인하세요. 내용 확인과 승인만 직접 하시면 나머지는 클로드가 해요.
4. 규칙을 읽는지 확인해요
색상과 파일 범위를 다시 말하지 않고 짧은 수정을 요청해 볼게요. 클로드가 방금 만든 규칙을 따르는지 확인하는 단계예요.
히어로 영역의 배경에 은은한 그라데이션을 넣어줘.CLAUDE.md를 먼저 읽고, 적용할 규칙과 수정할 파일을 보여줘.내 확인을 받은 뒤 수정하고 브라우저에서 결과를 보여줘.
클로드가 style.css만 고치고 정해 둔 색상을 썼는지 확인하세요. 새 파일이나 JavaScript를 만들려고 한다면 멈추고 CLAUDE.md와 충돌하는 이유를 물어보세요.
규칙은 강제 잠금장치가 아니라 클로드가 참고하는 지침이에요. 중요한 작업은 실행 전에 바뀔 파일을 먼저 확인해야 해요.
CLAUDE.md를 두는 네 자리
같은 규칙서라도 놓는 자리에 따라 적용 범위가 달라요. 학교 규칙에 빗대면 아래와 같아요.
| 자리 | 파일 위치 | 비유 | 적용 범위 |
|---|---|---|---|
| 관리자 정책 | 회사 관리자가 설정하는 정책 파일 | 교육부 지침 | 회사 전체 |
| 사용자 | ~/.claude/CLAUDE.md | 학교 교칙 | 내 모든 프로젝트 |
| 프로젝트 | 프로젝트의 CLAUDE.md 또는 .claude/CLAUDE.md | 반 규칙 | 이 프로젝트 |
| 로컬 | 프로젝트의 CLAUDE.local.md | 개인 메모 | 이 프로젝트의 나만 |
이번 실습에서 만든 것은 프로젝트 규칙이에요. 사용자 폴더에는 들어가지 않아요.
여러 규칙 파일이 있으면 클로드는 모두 함께 읽어요. “설명은 영어로”와 “설명은 한글로”처럼 충돌하는 규칙을 두 곳에 적지 마세요.
CLAUDE.local.md에는 팀과 공유하지 않을 개인 메모를 적어요. 만들 때는 클로드에게 깃허브 공유 대상에서 빠지는지도 확인해 달라고 하세요.
짧고 확인 가능한 규칙이 좋아요
“잘 만들어 줘”보다 “새 파일을 추가하지 마”처럼 확인할 수 있는 문장이 좋아요. 같은 실수가 두 번 생겼거나 매번 다시 말하는 내용부터 적으세요.
공식 문서는 CLAUDE.md 한 파일을 200줄 안쪽으로 유지하길 권해요. 길어지면 .claude/rules/ 폴더에 디자인과 글쓰기처럼 주제별로 나눌 수 있어요.
오토프로그 랩스도 현재 Next.js(웹사이트를 만드는 도구) 안에서 운영돼요. 디온웍스 규칙에는 설명과 주석은 한글로 쓰고, 추천한 패키지가 실제로 있는지 확인하며, 파일이 500줄을 넘으면 나눈다는 기준이 들어 있어요.
5. context7은 규칙서가 끝난 뒤 연결해요
CLAUDE.md가 프로젝트 규칙서라면 Context7(최신 공식 문서를 찾아주는 도구)은 도서관 사서와 비슷해요. 규칙서가 잘 작동하는지 확인한 뒤 별도 단계로 연결해요.
Context7은 선택 사항이에요. 최신 라이브러리 문서를 자주 확인한다면 클로드에게 연결을 맡기세요.
context7 공식 문서에서 현재 Claude Code 연결 방법을 확인해줘.내 컴퓨터 전체에 적용되는지, 이 프로젝트에만 적용되는지 먼저 설명해줘.설치하면서 바뀌는 설정과 필요한 로그인을 보여주고 내 확인을 기다려줘.내가 승인하면 공식 권장 방법으로 연결하고, 마지막에 연결 상태를 확인해줘.
브라우저에 로그인이나 인증 화면이 열리면 직접 진행하세요. 로그인과 승인만 직접 하시면 나머지는 클로드가 해요. 연결이 끝나면 최신 문서를 찾는지 확인해요.
Docusaurus의 최신 안정 버전을 context7으로 확인해줘.참고한 공식 문서와 확인한 날짜도 함께 알려줘.설치하거나 파일을 수정하지는 마.
설정과 메모리는 무엇이 다른가요?
CLAUDE.md에는 일하는 규칙을 적어요. settings.json(설정 파일)은 권한이나 사용할 모델처럼 Claude Code의 동작을 조절해요.
응답 언어는 CLAUDE.md에 적으세요. 설정을 바꾸려면 클로드 코드 대화창에서 /config를 입력하고, 항목 설명을 확인한 뒤 선택하면 돼요.
자동 메모리(Memory, 클로드가 작업 습관을 기록하는 공간)는 대화에서 얻은 교정 내용을 쌓아요. 대화창에 /memory를 입력하면 저장된 내용을 확인하거나 고칠 수 있어요.
이번 강에서 기억할 것
CLAUDE.md에는 매번 다시 설명하던 프로젝트 규칙을 적어요. /init으로 초안을 만든 뒤 기술, 디자인, 금지 사항, 작업 방식을 더하면 돼요.
프로젝트 규칙이 잘 읽히는지 먼저 확인하세요. Context7, 설정, 메모리는 그다음에 하나씩 살펴보면 돼요.
이런 분께 추천해요
클로드가 작업할 때마다 다른 색상이나 도구를 고르는 분께 필요해요. 같은 주의 사항을 반복해서 말하는 분에게도 도움이 돼요.
참고 링크
다음 강
10강: 수직 슬라이싱에서는 큰 기능을 한꺼번에 만들지 않고, 확인할 수 있는 한 조각씩 완성하는 방법을 배워요.