클로드 코드로 내 소개 웹페이지 만들기

이 글은 클로드 코드 왕초보 시리즈의 여덟 번째 글이자, 직접 만들어 보는 첫 번째 글입니다. 앞 글에서 배운 네 칸 공식(무엇을·어떤 기준으로·어디에·먼저 보여 줘)을 그대로 써먹습니다. 코드는 한 줄도 안 봅니다. 우리말로 시키고, 결과를 눈으로 확인하고, 말로 고치는 것까지 해 봅니다.

오늘 만들 것

브라우저에서 열리는 한 장짜리 소개 페이지입니다. 화면 위에서 아래로 이렇게 생겼습니다.

• 맨 위 — 내 이름과 한 줄 소개가 크게
• 가운데 — 내가 좋아하는 것 세 가지 목록
• 아래 — 단추 하나. 누를 때마다 인사말이 바뀝니다

인터넷에 올라가는 것이 아니라 내 컴퓨터 안에 생기는 파일입니다. 남에게 보여 주려면 파일을 보내 주면 됩니다. 저장까지 걸려도 삼십 분이면 됩니다.

준비 · 1분

1. VS Code를 켜고 File > Open Folder...로 연습 폴더(claude-practice)를 엽니다.
2. Terminal > New Terminal로 아래쪽 터미널을 엽니다. 줄 앞 위치가 연습 폴더로 끝나는지 봅니다.
3. 아래를 치고 Enter를 누릅니다.

claude

입력칸이 뜨면 준비 끝입니다.

복사해서 붙여넣을 지시문

아래를 통째로 복사해 입력칸에 붙여넣고(Ctrl + V) Enter를 누르십시오. 여러 줄을 한꺼번에 붙여넣어도 됩니다.

나를 소개하는 웹페이지를 만들어 줘.
맨 위에 내 이름과 한 줄 소개가 크게 나오게 해 줘.
그 아래에 내가 좋아하는 것 세 가지를 목록으로 넣어 줘.
아래쪽에 단추를 하나 두고, 누를 때마다 인사말이 바뀌게 해 줘. 인사말은 세 개.
흰 바탕에 남색 글씨, 글자는 크게, 가운데 정렬로 해 줘.
이 폴더에 me.html 파일 하나로만 저장해 줘. 다른 파일은 만들지 마.
만들기 전에 무엇을 할 건지 세 줄로 먼저 알려 줘.

이름과 소개는 일부러 비워 두었습니다. 클로드가 임시로 채워 넣으면, 나중에 "이름을 홍길동으로 바꿔 줘"라고 한 줄만 말하면 됩니다. 지금 미리 적고 싶으면 첫 줄 뒤에 이름은 홍길동이야.를 한 줄 더 붙여 보내십시오.

나오는 화면과 승인

보내면 먼저 세 줄짜리 계획이 올라옵니다. "이렇게 만들겠다"는 이야기입니다. 읽어 보고 마음에 안 드는 대목이 있으면 지금 말하면 됩니다. 예를 들면 이렇게요.

인사말은 다섯 개로 해 줘. 나머지는 그대로 진행해.

이어서 파일을 만듭니다. 이때 물어보는 화면이 뜰 수도 있고, 안 뜨고 바로 만들 수도 있습니다. 요금제와 설정에 따라 다르니 둘 다 정상입니다. 물어보면 마우스는 듣지 않으니 ↑ ↓ 화살표로 "허용"에 맞추고 Enter를 누르십시오.

다 되면 VS Code 왼쪽 파일 목록에 me.html이 새로 생깁니다. 여기까지 왔으면 만드는 일은 끝났습니다.

열어서 확인하기

1. 바탕화면의 claude-practice 폴더를 엽니다.
2. me.html을 두 번 누릅니다.
3. 브라우저(크롬·엣지 등)가 열리면서 방금 만든 소개 화면이 나옵니다.
4. 아래쪽 단추를 눌러 보십시오. 인사말이 바뀌면 제대로 된 것입니다.

VS Code 안에서 바로 열고 싶다면, 왼쪽 목록의 me.html에 마우스 오른쪽 단추를 누르고 Reveal in File Explorer(맥은 Reveal in Finder)를 고르면 그 파일이 든 폴더가 열립니다.

바꿔 보기 세 가지

여기부터가 진짜입니다. 파일은 그대로 두고, 말로만 고쳐 봅니다. 터미널 입력칸에 한 번에 하나씩 보내고, 그때마다 브라우저에서 새로고침(F5)해 확인하십시오.

1. 색 바꾸기

   배경을 아주 연한 하늘색으로, 글씨는 진한 회색으로 바꿔 줘.

2. 내용 늘리기

   인사말을 다섯 개로 늘리고, 단추에 적힌 글자를 "한 번 더"로 바꿔 줘.

3. 휴대폰에서도 잘 보이게

   휴대폰처럼 좁은 화면에서도 글자가 잘리지 않게 고쳐 줘.

세 번 해 보시면 감이 옵니다. 만드는 것보다 고치는 것이 훨씬 쉽다는 것이 이 도구의 진짜 장점입니다. 마음에 안 들면 얼마든지 다시 말하면 됩니다.

잘 안 될 때

• 흰 화면만 나옵니다 — 본 것을 그대로 말하면 됩니다. me.html을 열었더니 흰 화면만 나와. 무엇이 문제인지 찾아서 고쳐 줘.
• 단추를 눌러도 안 바뀝니다 — 단추를 눌러도 인사말이 안 바뀌어. 고쳐 줘.라고 보내십시오.
• 파일이 안 보입니다 — 터미널이 다른 폴더에서 시작했을 수 있습니다. /exit로 나가 VS Code로 연습 폴더를 다시 연 뒤 claude를 다시 실행하십시오.
• 고쳤더니 더 이상해졌습니다 — Esc를 두 번 누르거나 /rewind를 치면 방금 전으로 되돌릴 수 있습니다. 대화만 되돌릴지 파일까지 되돌릴지 고르면 됩니다.
• 파일이 여러 개 생겼습니다 — 지시문에 "한 개로만 저장"을 넣어도 가끔 그럽니다. me.html 한 개만 남기고 나머지는 지워도 되는지 알려 줘.라고 물어보십시오.

자주 묻는 질문

함께 보면 좋은 글

• 클로드 코드 왕초보 시리즈 전체 목차

참고: Claude Code 공식 문서 · 빠른 시작 · 모범 사례