오늘 만들 것
오늘의 목표는 단순합니다.
내 컴퓨터에서 실제로 열리는 웹페이지 하나를 만든다.
앞 장에서 claude-first 폴더에 index.html을 한 번 만들어 봤습니다. 그건 "Claude에게 파일을 만들게 하는 감각"을 익히는 연습장이었습니다.
이번 장부터는 조금 더 정리된 작업 폴더를 새로 만들고, 앞으로 몇 장 동안 계속 키워 갈 페이지를 시작합니다. 이름은 my-first-page입니다.
멋진 앱도, 회원가입도, 데이터베이스도 아직 필요 없습니다. 먼저 파일 하나를 만들고, 브라우저에서 열어 봅니다. 이 경험이 중요합니다. Claude Code가 만든 결과물이 내 컴퓨터 안에 생기고, 내가 눈으로 확인할 수 있어야 다음 단계가 쉬워집니다.
이번 장에서 만들 페이지에는 세 가지가 들어갑니다.
내 이름
한 줄 소개
버튼 하나
작지만 완성된 첫 결과물입니다.
1단계: 새 폴더를 만들고 그 안으로 들어가기
Claude Code를 쓸 때 가장 먼저 할 일은 작업할 폴더를 정하는 것입니다.
아무 곳에서나 Claude를 실행하면, Claude도 어디를 고쳐야 할지 헷갈립니다. 그래서 오늘은 전용 폴더를 하나 만듭니다.
앞 장에서 만든 claude-first 폴더 안에 있다면 먼저 한 단계 위로 나옵니다.
cd ..그다음 새 폴더를 만들고 들어갑니다.
mkdir my-first-page
cd my-first-page명령어는 두 줄입니다.
첫 줄은 my-first-page라는 새 폴더를 만듭니다.
두 번째 줄은 그 폴더 안으로 들어갑니다.
이미 my-first-page 폴더를 만든 적이 있다면 mkdir my-first-page에서 "이미 있다"는 메시지가 나올 수 있습니다. 그럴 때는 당황하지 말고 폴더 안으로만 들어가면 됩니다.
cd my-first-page지금부터 Claude Code는 이 폴더 안에서 작업하게 됩니다. 작업 공간을 고정한 셈입니다.
현재 위치가 헷갈리면 아래 명령어를 입력해도 됩니다.
pwd화면 어딘가에 my-first-page가 보이면 잘 들어온 것입니다.
2단계: 이 폴더에서 Claude Code 실행하기
이제 Claude Code를 시작합니다.
claude잠시 후 Claude Code 입력 화면이 열립니다.
여기서 중요한 감각 하나만 기억하세요.
Claude Code는 지금 내가 들어와 있는 폴더를 기준으로 파일을 만들고 수정합니다.
그러니까 my-first-page 폴더 안에서 claude를 실행했다면, Claude가 만드는 index.html도 이 폴더 안에 생깁니다.
이제 첫 부탁을 건넬 차례입니다.
3단계: index.html을 만들어 달라고 부탁하기
Claude에게 이렇게 입력하세요.
이 폴더에 index.html 파일을 만들어줘.
HTML 파일 하나만 사용해서 간단한 자기소개 웹페이지를 만들고 싶어.
페이지에는 다음 내용을 넣어줘.
- 큰 제목: 안녕하세요, 저는 민지입니다
- 한 줄 소개: Claude Code로 처음 만든 웹페이지입니다
- 버튼: 더 알아보기
아직 CSS 파일이나 JavaScript 파일은 만들지 말고,
index.html 안에 기본 HTML 구조만 깔끔하게 작성해줘.이 프롬프트에는 초보자에게 중요한 문장이 들어 있습니다.
HTML 파일 하나만 사용해서그리고 또 하나가 있습니다.
아직 CSS 파일이나 JavaScript 파일은 만들지 말고이렇게 말하면 Claude가 갑자기 여러 파일을 만들 가능성이 줄어듭니다. 오늘은 한 장짜리 웹페이지가 목표입니다. 파일 하나로 충분합니다.
Claude가 index.html 파일을 만들겠다고 제안하면 내용을 확인한 뒤 승인합니다.
화면에 승인 질문이 나오면 보통 이런 식으로 진행합니다.
Do you want to create index.html?또는 파일 변경 내용을 보여주고 허락을 묻습니다.
이때 당황하지 말고, Claude가 만들려는 파일 이름을 봅니다.
index.html맞다면 y를 입력합니다.
y이제 폴더 안에 첫 웹페이지 파일이 생겼습니다.
4단계: VS Code에서 파일 열기
이번에는 Claude가 만든 파일을 눈으로 확인합니다.
터미널에서 아래 명령어를 입력하세요.
code .code .는 현재 폴더를 VS Code로 여는 명령어입니다.
만약 명령어가 작동하지 않아도 괜찮습니다. VS Code를 직접 열고 다음 순서로 진행하면 됩니다.
VS Code 실행
상단 메뉴에서 File 선택
Open Folder 선택
my-first-page폴더 선택
Windows에서 WSL을 쓰고 있다면 VS Code의 WSL 연결 상태에서 폴더를 여는 편이 가장 편합니다. 잘 모르겠다면 지금은 파일 탐색기나 Finder에서 폴더를 직접 찾아 열어도 됩니다.
VS Code 왼쪽 파일 목록에 이런 파일이 보이면 성공입니다.
my-first-page
└── index.htmlindex.html을 클릭해 엽니다.
안에는 대략 이런 구조가 들어 있을 것입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>나의 첫 웹페이지</title>
</head>
<body>
<h1>안녕하세요, 저는 민지입니다</h1>
<p>Claude Code로 처음 만든 웹페이지입니다</p>
<button>더 알아보기</button>
</body>
</html>코드 전체를 완벽히 이해하지 않아도 됩니다. 오늘은 세 곳만 보면 됩니다.
<h1>안녕하세요, 저는 민지입니다</h1>이 부분이 페이지의 큰 제목입니다.
<p>Claude Code로 처음 만든 웹페이지입니다</p>이 부분이 한 줄 소개입니다.
<button>더 알아보기</button>이 부분이 버튼입니다.
즉, 브라우저에 보이는 글자는 대부분 <body> 안에 있습니다.
지금은 이 정도만 알아도 충분합니다.
5단계: 브라우저에서 열어 보기
이제 진짜 결과물을 확인합니다.
가장 쉬운 방법은 index.html 파일을 직접 여는 것입니다.
VS Code 왼쪽에서
index.html파일을 찾습니다.파일을 마우스 오른쪽 버튼으로 클릭합니다.
Reveal in Finder 또는 Reveal in File Explorer를 누릅니다.
열린 폴더에서
index.html을 더블클릭합니다.
브라우저가 열리고 화면에 이런 내용이 보일 것입니다.
안녕하세요, 저는 민지입니다
Claude Code로 처음 만든 웹페이지입니다
[더 알아보기]성공입니다.
지금 만든 것은 인터넷에 공개된 사이트가 아닙니다. 내 컴퓨터 안에서 열리는 로컬 파일입니다. 그래도 괜찮습니다. 모든 웹사이트는 이런 작은 파일에서 출발합니다.
6단계: 화면을 보고 수정할 부분 메모하기
브라우저에 열린 페이지를 잠깐 바라보세요.
마음에 안 드는 부분이 있을 겁니다.
예를 들면 이런 것들입니다.
제목이 너무 평범하다
소개 문장이 짧다
버튼 문구가 딱딱하다
내 이름을 바꾸고 싶다
페이지 제목을 브라우저 탭에도 보이게 하고 싶다
좋습니다. 바로 그 지점이 다음 요청의 재료입니다.
처음부터 완벽하게 만들려고 하지 마세요. Claude Code와 작업할 때는 이렇게 가는 편이 훨씬 쉽습니다.
만들기 → 보기 → 하나 고치기 → 다시 보기
이 리듬만 익히면 됩니다.
7단계: 작은 수정 요청을 연속으로 던지기
Claude Code 화면으로 돌아갑니다.
이번에는 작은 요청을 하나만 해보겠습니다.
index.html에서 제목 문구를 "처음 만든 나의 웹페이지"로 바꿔줘.
다른 부분은 건드리지 마.여기서 중요한 문장은 이것입니다.
다른 부분은 건드리지 마.초보자일수록 Claude에게 한 번에 많은 일을 시키고 싶어집니다. 하지만 처음에는 반대로 해야 합니다.
작게 부탁하세요.
작게 확인하세요.
작게 승인하세요.
Claude가 변경 내용을 보여주면 h1 부분이 어떻게 바뀌는지 봅니다.
변경 전이 이런 모습이었다면,
<h1>안녕하세요, 저는 민지입니다</h1>변경 후에는 이런 모습이 될 수 있습니다.
<h1>처음 만든 나의 웹페이지</h1>맞다면 승인합니다.
y이제 브라우저로 돌아가 새로고침합니다.
Command + RMac에서는 보통 Command + R입니다.
Ctrl + RWindows에서는 보통 Ctrl + R입니다.
제목이 바뀌었다면 성공입니다.
8단계: 버튼 문구도 바꿔 보기
이번에는 버튼 문구를 바꿔 보겠습니다.
Claude에게 이렇게 입력하세요.
index.html의 버튼 문구를 "프로젝트 보기"로 바꿔줘.
버튼 문구만 바꾸고 나머지 HTML 구조는 그대로 둬.좋은 요청은 범위가 좁습니다.
나쁜 요청은 이렇습니다.
좀 더 예쁘게 해줘.이 요청은 막연합니다. Claude가 제목도 바꾸고, 버튼도 바꾸고, 스타일도 추가할 수 있습니다.
좋은 요청은 이렇습니다.
버튼 문구를 "프로젝트 보기"로 바꿔줘.
버튼 문구만 바꾸고 나머지는 그대로 둬.이렇게 말하면 Claude가 해야 할 일이 선명해집니다.
변경 내용에서 아래 부분만 바뀌었는지 확인하세요.
<button>더 알아보기</button>이 부분이 이렇게 바뀌면 됩니다.
<button>프로젝트 보기</button>승인한 뒤 브라우저에서 새로고침합니다.
버튼 문구가 바뀌었다면 두 번째 수정도 성공입니다.
9단계: 한 줄 소개를 내 말로 바꾸기
이제 페이지가 조금씩 내 것이 되고 있습니다.
한 줄 소개도 바꿔 봅니다.
index.html의 한 줄 소개를 아래 문장으로 바꿔줘.
"작게 만들고 바로 확인하면서 배우는 중입니다."
p 태그 안의 문장만 바꿔줘.여기서 p 태그라는 말이 나왔습니다.
p는 paragraph의 줄임말입니다. 웹페이지에서 문단을 나타낼 때 씁니다. 어렵게 생각하지 않아도 됩니다. 지금은 소개 문장이 들어 있는 자리라고 기억하면 됩니다.
Claude가 아래 코드를 바꾸면 됩니다.
<p>Claude Code로 처음 만든 웹페이지입니다</p>변경 후에는 이렇게 됩니다.
<p>작게 만들고 바로 확인하면서 배우는 중입니다.</p>다시 승인하고, 다시 새로고침합니다.
이제 페이지에는 내가 고른 문장이 들어 있습니다.
10단계: 지금 폴더 안에 무엇이 있는지 확인하기
터미널에서 Claude Code를 잠깐 나와도 되고, 새 터미널 창을 열어도 됩니다.
현재 폴더 안의 파일을 확인해 봅니다.
macOS나 Ubuntu 터미널에서는 이렇게 입력합니다.
ls결과는 단순해야 합니다.
index.html오늘은 이게 정상입니다.
파일이 하나뿐이라 불안할 수 있습니다. 하지만 지금은 오히려 좋습니다. 파일이 하나라서 어디를 봐야 하는지 분명합니다.
초보자에게 가장 좋은 첫 프로젝트는 거대한 앱이 아닙니다.
열어 볼 수 있는 파일 하나.
그게 시작입니다.
오늘의 완성본
지금 index.html은 대략 이런 모습일 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>나의 첫 웹페이지</title>
</head>
<body>
<h1>처음 만든 나의 웹페이지</h1>
<p>작게 만들고 바로 확인하면서 배우는 중입니다.</p>
<button>프로젝트 보기</button>
</body>
</html>완전히 똑같지 않아도 괜찮습니다.
핵심은 네 가지입니다.
my-first-page폴더를 만들었다그 안에서 Claude Code를 실행했다
index.html파일을 만들었다브라우저에서 결과를 확인했다
여기까지 왔다면 이미 Claude Code로 첫 결과물을 만든 것입니다.
바로 복붙해서 쓰는 요청 문장
다음에 비슷한 작업을 할 때는 이 문장을 그대로 써도 됩니다.
이 폴더에 index.html 파일을 만들어줘.
HTML 파일 하나만 사용해서 간단한 웹페이지를 만들고 싶어.
페이지에는 다음 내용을 넣어줘.
- 큰 제목: [여기에 제목]
- 한 줄 소개: [여기에 소개 문장]
- 버튼: [여기에 버튼 문구]
아직 CSS 파일이나 JavaScript 파일은 만들지 말고,
index.html 안에 기본 HTML 구조만 깔끔하게 작성해줘.수정할 때는 이렇게 요청합니다.
index.html에서 [바꾸고 싶은 부분]만 수정해줘.
[원하는 내용]으로 바꿔줘.
다른 부분은 건드리지 마.이 두 문장만 있어도 첫 웹페이지는 충분히 만들 수 있습니다.
다음 장으로 가기 전 체크
아래 다섯 가지가 되면 다음 장으로 넘어가도 됩니다.
my-first-page폴더가 있다그 안에
index.html파일이 있다VS Code에서
index.html을 열어 봤다브라우저에서 페이지를 확인했다
Claude에게 작은 수정 요청을 한 번 이상 해봤다
다음 장에서는 이 밋밋한 페이지에 스타일을 입힙니다.
글자 크기를 키우고, 가운데 정렬하고, 버튼을 진짜 버튼처럼 보이게 만들 겁니다. 오늘 만든 index.html 하나가 다음 장의 재료입니다.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.