Claude 로 파일 만들기
여러분이 설명하면, Claude가 만들어요
⏱ 예상 ~7분
01 · 읽기
지금까지 Claude Code로 코드를 이해 했어요. 이제 맨바닥에서 뭔가 만들기 에 써 봐요.
여기서부터 재밌어져요. HTML, CSS, JavaScript 한 줄 한 줄을 직접 쓰는 대신, 원하는 걸 자연어로 설명해요. Claude가 코드를 쓰고 파일을 만들면, 여러분은 결과를 검토해요.
여러분의 역할이 타이피스트 에서 디렉터 로 바뀌어요. 뭘 만들지 결정하고, 명확하게 설명하고, Claude가 제대로 만들도록 안내해요. Claude 결과물의 품질은 여러분이 얼마나 명확하게 설명하는지에 직접 달려 있어요.
💡 상상해 봐요재능 있지만 곧이곧대로인 건축가와 일한다고 상상해 봐요. '집 지어 줘' 라고 하면 집이 나와요 — 하지만 여러분이 생각한 그게 아닐 수도 있어요. '2층, 사방 베란다, 파란 외벽, 큰 부엌 창문이 있는 집 지어 줘' 라고 하면 상상에 가까운 게 나와요.
02 · 프롬프트 템플릿
웹 페이지를 만들어 봐요. Claude 한테 내비게이션 바가 있는 HTML 페이지를 만들어 달라고 해요. 내비게이션 바에 뭐가 들어가는지 명확히 말해요.
HTML 페이지 하나 만들어 줘. 내비게이션 바에는 Home, About, Contact 세 개 링크가 있어야 하고, 스타일은 깔끔하고 현대적이었으면 좋겠어.
03 · 실기 실습
브라우저에서 Claude가 만든 파일을 열어 결과를 봐요. 터미널에서 열 수 있어요.
open index.html
04 · 프롬프트 템플릿
이제 Claude 한테 만든 것에 뭔가 추가해 달라고 해요. 이건 Claude가 컨텍스트를 이해하는 능력을 보여주는 거예요 — 어떤 파일이 있는지 알고, 그걸 똑똑하게 수정해요.
이 페이지에 다크 모드 색상 테마 추가해 줘. CSS 파일은 별도로 만들고, HTML 에서 link 해 줘.
05 · 읽기
방금 무슨 일이 일어났는지 봐요. 원하는 걸 자연어로 설명했어요 — 두 번 다요. Claude가 두 번 다 코드를 썼고요. 여러분 일은 검토하고, 브라우저에서 테스트하고, 반복하는 거예요.
이게 AI 와 함께하는 현대 개발 워크플로우예요:
1. 원하는 걸 설명 하기 2. Claude가 만든 걸 검토 하기 3. 테스트 하기 (브라우저에서 열기, 실행하기 등) 4. 변경을 요청하며 반복 하기
여러분은 그냥 승객이 아니에요 — 결정권자예요. Claude 는 빠르지만, 결과가 맞는지, 충분한지는 여러분이 알아야 해요.
핵심 정리
- Claude가 여러분 프로젝트 디렉토리에 실제 파일을 만들어요
- Claude 결과물은 항상 검토하고 테스트하기
- Claude 는 컨텍스트를 기억해요 — 어떤 파일이 있는지 알아요
- 변경을 요청하면서 반복해요, 처음부터 다시 시작하지 말고요
06 · 빈칸 채우기
Claude가 파일을 만든 후엔 commit 하기 전에 항상 그걸 _____ 해야 해요.
07 · 퀴즈
Claude Code로 파일을 만들 때 권장 워크플로우는?
- 인터넷에서 복사 → 붙여넣기 → 실행
- 설명 → 검토 → 테스트 → 반복
- 직접 코드 쓰기 → Claude 한테 에러 고치라고 하기
- Claude가 다 만들게 두고 검토 안 하기
⚠ 전체 인터랙티브 경험에는 JavaScript가 필요해요. JavaScript를 켜고 새로 고침해 주세요.
※ 이 사이트는 독립 운영되는 교육 프로젝트로, Anthropic의 공식 제품이 아니에요. Claude™ 는 Anthropic, PBC 의 상표예요.