오늘의 목표
오늘은 Claude Code에게 첫 번째 일을 맡깁니다.
목표는 작습니다.
index.html 파일 하나 만들기.
하지만 오늘 진짜 배우는 것은 파일 하나가 아닙니다. Claude에게 일을 부탁하는 문장입니다.
초보자가 가장 자주 하는 말은 이겁니다.
웹사이트 만들어줘.틀린 말은 아닙니다. 다만 너무 넓습니다.
Claude는 되묻거나, 마음대로 해석하거나, 생각보다 큰 구조를 만들 수 있습니다. 우리는 오늘 그걸 막겠습니다.
짧게 말하되, 필요한 것은 빠뜨리지 않는 문장을 만들겠습니다.
먼저 Claude Code를 실행합니다
지난 장에서 만든 연습 폴더로 들어갑니다.
cd claude-first이미 그 폴더 안에 있다면 바로 실행해도 됩니다.
claude화면이 바뀌고 Claude에게 입력할 수 있는 상태가 되면 성공입니다.
대략 이런 느낌입니다.
Welcome to Claude Code
> 또는 아래처럼 커서만 기다리고 있을 수도 있습니다.
> Ask Claude anything...여기서 우리는 인사를 하지 않습니다.
안녕물론 입력해도 됩니다. 하지만 오늘부터는 Claude를 채팅 상대가 아니라 작업 파트너로 대합니다.
첫 문장부터 일을 맡깁니다.
"웹사이트 만들어줘"가 실패하는 이유
아래 문장을 Claude에게 입력했다고 생각해 봅시다.
웹사이트 만들어줘.Claude 입장에서는 모르는 것이 너무 많습니다.
어떤 파일을 만들어야 할까?
HTML만 쓰면 될까, React를 써야 할까?
디자인은 심플하게? 화려하게?
내용은 자기소개? 쇼핑몰? 로그인 화면?
완성 기준은 어디까지일까?
사람에게도 똑같습니다.
"방 좀 꾸며줘"라고 말하면 결과가 제각각입니다. 하지만 "책상 위에 흰색 스탠드 하나 두고, 노트북 왼쪽에 작은 화분을 놓아줘"라고 말하면 바로 움직일 수 있습니다.
Claude Code도 같습니다.
좋은 부탁은 길어서 좋은 문장이 아닙니다.
바로 작업할 수 있는 문장입니다.
나쁜 부탁과 좋은 부탁
먼저 나쁜 예입니다.
로그인 페이지 만들어줘.이 문장은 너무 비어 있습니다.
이제 좋은 예를 보겠습니다.
HTML과 CSS만 사용해서, 이메일 입력창과 비밀번호 입력창이 있고 가운데 정렬된 심플한 로그인 페이지를 index.html 파일로 만들어줘. 아직 JavaScript는 넣지 말고, 브라우저에서 열었을 때 바로 화면이 보이면 완료야.차이는 네 가지입니다.
1. 파일명을 알려줍니다
index.html 파일로 만들어줘.Claude Code는 폴더 안의 파일을 만들고 수정할 수 있습니다. 그래서 "어떤 파일에 만들지"를 알려주면 훨씬 정확하게 움직입니다.
파일명을 말하지 않으면 Claude가 새 파일 이름을 정하거나, 여러 파일을 만들 수도 있습니다.
처음에는 파일 하나로 시작하세요.
index.html이 이름 하나면 충분합니다.
2. 기술 범위를 정합니다
HTML과 CSS만 사용해서이 말은 "React, Next.js, 빌드 도구 같은 것은 쓰지 마"라는 뜻입니다.
초보자는 처음부터 도구가 많아지면 화면보다 설정을 먼저 만나게 됩니다. 오늘은 브라우저에서 바로 열 수 있는 파일 하나면 됩니다.
처음 요청에는 이렇게 제한을 걸어 주세요.
HTML만 사용해줘.또는
HTML과 CSS만 사용해줘.3. 화면 구성을 말합니다
이메일 입력창과 비밀번호 입력창이 있고 가운데 정렬된 심플한 로그인 페이지Claude가 그릴 화면을 머릿속에 떠올릴 수 있게 만드는 부분입니다.
디자이너처럼 말할 필요는 없습니다.
아래 정도면 충분합니다.
제목, 짧은 설명, 버튼 하나가 있는 화면왼쪽에는 소개 문구, 오른쪽에는 입력 폼이 있는 화면카드 3개가 가로로 나란히 있는 화면4. 완료 기준을 정합니다
브라우저에서 열었을 때 바로 화면이 보이면 완료야.완료 기준은 Claude에게 "여기까지만 하면 돼"라고 선을 그어주는 문장입니다.
이 문장이 없으면 Claude가 테스트 파일, 설명 문서, 추가 구조까지 만들려고 할 수 있습니다.
처음에는 완료 기준을 가볍게 잡습니다.
브라우저에서 열었을 때 제목과 버튼이 보이면 완료야.이렇게 말하면 작업이 작아집니다.
작아야 끝까지 갑니다.
첫 부탁 공식
Claude Code에게 첫 부탁을 할 때는 아래 순서로 말하면 됩니다.
[기술 범위]로 [화면 구성]을 [파일명]에 만들어줘. [하지 말 것]은 아직 하지 말고, [완료 기준]이면 완료야.조금 딱딱해 보이지만, 실제로는 아주 편합니다.
예를 들어 이렇게 바꿉니다.
HTML만 사용해서 내 소개 페이지를 index.html 파일에 만들어줘. 상단에는 내 이름, 그 아래에는 짧은 소개 문장, 마지막에는 연락하기 버튼 하나가 있으면 돼. CSS와 JavaScript는 아직 넣지 말고, 브라우저에서 열었을 때 내용이 보이면 완료야.이 문장은 Claude가 바로 작업할 수 있습니다.
파일명도 있고, 기술 범위도 있고, 화면 구성도 있고, 하지 말 것도 있고, 완료 기준도 있습니다.
이제 직접 해보겠습니다.
실습: index.html 하나 만들기
Claude Code 입력창에 아래 문장을 그대로 붙여 넣습니다.
HTML만 사용해서 아주 심플한 자기소개 페이지를 index.html 파일로 만들어줘. 화면에는 큰 제목으로 "안녕하세요, 저는 Claude Code를 배우는 중입니다"를 넣고, 그 아래에는 짧은 소개 문장 2개와 "오늘의 목표 보기" 버튼 하나를 넣어줘. CSS와 JavaScript는 아직 넣지 말고, 브라우저에서 열었을 때 글자와 버튼이 보이면 완료야.입력한 뒤 엔터를 누릅니다.
Claude가 잠시 생각한 뒤, 어떤 작업을 하겠다고 말할 겁니다.
화면은 사람마다 조금 다르지만 대략 이런 흐름입니다.
I'll create an index.html file with a simple introduction page.
Create file: index.html또는 파일 내용을 먼저 보여줄 수도 있습니다.
index.html
+ <!DOCTYPE html>
+ <html lang="ko">
+ <head>
+ <meta charset="UTF-8">
+ <title>자기소개</title>
+ </head>
+ <body>
+ <h1>안녕하세요, 저는 Claude Code를 배우는 중입니다</h1>
+ ...
+ </body>
+ </html>여기서 중요한 순간이 옵니다.
Claude Code가 파일을 만들거나 수정하기 전에 확인을 요청할 수 있습니다.
Do you want to create index.html?
❯ 1. Yes
2. No또는 이렇게 보일 수도 있습니다.
Apply this change? (y/n)이때 바로 y를 누르지 말고, 딱 세 가지만 봅니다.
승인하기 전에 보는 세 가지
Claude가 제안한 변경 사항을 전부 이해할 필요는 없습니다.
처음에는 세 가지만 보면 됩니다.
1. 파일명이 맞나요?
오늘 만들 파일은 하나입니다.
index.html제안 화면에 index.html이 보이면 좋습니다.
만약 이런 파일들이 갑자기 보이면 잠깐 멈춥니다.
package.json
src/App.jsx
vite.config.js이건 Claude가 프로젝트를 크게 만들고 있다는 신호일 수 있습니다.
오늘은 필요 없습니다.
이럴 때는 n을 누르고 다시 말합니다.
이번에는 새 프로젝트를 만들지 말고, index.html 파일 하나만 만들어줘.2. 기술 범위가 맞나요?
오늘은 HTML만 쓰기로 했습니다.
제안 내용에 이런 단어가 보이면 괜찮습니다.
<html>
<body>
<h1>
<p>
<button>반대로 이런 단어가 보이면 범위가 커진 것입니다.
React
Next.js
npm install
Vite
Tailwind나쁜 것은 아닙니다. 다만 오늘은 아닙니다.
이럴 때도 n을 누르고 다시 요청합니다.
React나 설치 도구는 쓰지 말고, 순수 HTML만 사용해서 index.html 하나로 만들어줘.3. 내가 말한 화면이 들어 있나요?
우리가 요청한 구성은 세 가지였습니다.
큰 제목
소개 문장 2개
버튼 하나
제안된 코드에 아래처럼 보이면 충분합니다.
<h1>안녕하세요, 저는 Claude Code를 배우는 중입니다</h1>
<p>...</p>
<p>...</p>
<button>오늘의 목표 보기</button>완벽한 문장이 아니어도 됩니다.
첫 실습의 목표는 예쁜 페이지가 아닙니다.
Claude에게 말한 것이 파일로 바뀌는 감각을 얻는 것입니다.
이제 y를 누릅니다
세 가지가 괜찮다면 승인합니다.
y엔터를 누릅니다.
그러면 Claude가 파일을 생성합니다.
Created index.html또는 이런 식으로 나올 수 있습니다.
Done. Created index.html with a simple introduction page.이제 폴더 안에 index.html 파일이 생겼습니다.
터미널에서 확인하고 싶다면 Claude Code를 잠시 종료한 뒤 확인할 수 있습니다.
종료는 보통 아래 키입니다.
Ctrl + C다시 일반 터미널로 돌아오면 파일 목록을 확인합니다.
macOS 또는 Ubuntu 터미널이라면:
lsPowerShell을 쓰고 있다면:
dir목록에 아래 파일이 보이면 성공입니다.
index.htmlVS Code를 쓰고 있다면 왼쪽 파일 목록에서도 index.html이 보입니다.
더블 클릭하면 Claude가 만든 내용을 볼 수 있습니다.
브라우저에서 열어보기
이제 결과물을 눈으로 봅니다.
가장 쉬운 방법은 파일을 직접 여는 것입니다.
VS Code 왼쪽에서
index.html을 찾습니다.파일을 마우스 오른쪽 버튼으로 누릅니다.
Reveal in Finder 또는 파일 탐색기에서 표시를 누릅니다.
열린 폴더에서
index.html을 더블 클릭합니다.
브라우저가 열리고 아래 요소가 보이면 성공입니다.
"안녕하세요, 저는 Claude Code를 배우는 중입니다"
소개 문장 2개
"오늘의 목표 보기" 버튼
아직 버튼은 눌러도 아무 일도 일어나지 않습니다.
괜찮습니다.
오늘은 기능을 만드는 날이 아닙니다. Claude에게 정확히 부탁하고, 파일 생성을 승인하고, 결과를 확인하는 날입니다.
원하지 않는 방향이면 n을 누릅니다
Claude Code에서 n은 실패가 아닙니다.
멈춤 버튼입니다.
Claude가 마음에 들지 않는 방향으로 가면 n을 누르면 됩니다.
예를 들어 Claude가 갑자기 여러 파일을 만들려고 한다면:
Apply this change? (y/n)여기서 입력합니다.
n그다음 이렇게 말합니다.
좋아. 그런데 지금은 파일을 여러 개 만들지 말고 index.html 하나만 만들어줘. HTML만 사용하고, CSS와 JavaScript는 아직 넣지 마.혹은 Claude가 너무 큰 계획을 세운다면 이렇게 말합니다.
범위를 줄이자. 지금은 첫 화면만 만들고 싶어. index.html 하나에 제목, 소개 문장 2개, 버튼 하나만 넣어줘.작업이 커지는 느낌이 들면 줄이면 됩니다.
Claude에게 맡기는 것이지, 끌려가는 것이 아닙니다.
안전 문장: 멈추고 먼저 계획만 말해줘
초보자에게 가장 유용한 문장이 있습니다.
아직 파일을 만들거나 수정하지 말고, 먼저 어떤 작업을 할지 계획만 말해줘.이 문장은 안전벨트입니다.
무언가 불안할 때 바로 붙여 넣으세요.
예를 들어 이런 상황에서 씁니다.
Claude가 뭘 만들지 감이 안 올 때
파일이 여러 개 생길까 봐 걱정될 때
기존 파일을 건드릴까 봐 불안할 때
요청을 잘못 쓴 것 같을 때
조금 더 강하게 말하고 싶다면 이렇게 씁니다.
멈춰. 아직 코드를 작성하지 말고, 내가 승인하기 전까지 파일을 만들거나 수정하지 마. 먼저 작업 계획을 3줄로만 말해줘.이 문장을 쓰면 Claude는 보통 바로 코드를 고치기보다 계획을 먼저 설명합니다.
계획을 보고 마음에 들면 그때 말합니다.
좋아. 그 계획대로 진행해줘.마음에 들지 않으면 다시 줄입니다.
아니야. 이번에는 index.html 하나만 만들고, 디자인이나 기능은 빼줘.복사해서 쓰는 첫 요청 템플릿
앞으로 새 작업을 시작할 때 아래 템플릿을 복사해서 쓰세요.
[기술 범위]를 사용해서 [만들 화면]을 [파일명] 파일로 만들어줘.
화면에는 [필요한 요소]가 들어가면 돼.
[아직 하지 않을 것]은 하지 마.
[완료 기준]이면 완료야.빈칸을 채우면 이렇게 됩니다.
HTML만 사용해서 간단한 자기소개 페이지를 index.html 파일로 만들어줘.
화면에는 큰 제목, 소개 문장 2개, 버튼 하나가 들어가면 돼.
CSS와 JavaScript는 아직 하지 마.
브라우저에서 열었을 때 글자와 버튼이 보이면 완료야.조금 더 정리된 버전도 좋습니다.
목표: 간단한 자기소개 페이지 만들기
파일: index.html
기술: HTML만 사용
화면 구성: 큰 제목 1개, 소개 문장 2개, 버튼 1개
제외할 것: CSS, JavaScript, 새 프로젝트 생성
완료 기준: 브라우저에서 index.html을 열었을 때 내용이 보이면 완료둘 중 편한 방식을 쓰면 됩니다.
문장형으로 말해도 되고, 목록형으로 말해도 됩니다.
중요한 건 Claude가 바로 움직일 수 있게 재료를 주는 것입니다.
오늘의 체크포인트
오늘 성공했다면 폴더 안에 이 파일이 있어야 합니다.
claude-first
└── index.html그리고 당신은 세 가지를 해냈습니다.
claude실행 후 첫 입력창에 작업 목표를 적었다"웹사이트 만들어줘" 대신 파일명, 기술 범위, 화면 구성, 완료 기준을 넣었다
Claude가 제안한 파일 생성을 확인하고
y로 승인했다
오늘부터 Claude에게 이렇게 말하면 됩니다.
무엇을, 어떤 파일에, 어디까지 만들지이 세 가지만 분명하면 첫 결과물은 훨씬 쉽게 나옵니다.
다음 장에서는 오늘 연습한 감각을 바탕으로, 새 프로젝트 폴더 my-first-page를 만들고 한 장짜리 웹페이지를 더 제대로 키워보겠습니다.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.