시즌 1 · 클로드 코드로 첫 웹페이지 만들기03 / 04다음: 인터넷에 무료로 배포하기

무료 강의 · 시즌 1 · 3강 / 4

고치고, 되돌리고, 내 취향 기억시키기

무료 강의 시즌 1의 3강. 다시 시켜서 원하는 대로 고치고, 망가지면 안전하게 되돌려요. CLAUDE.md로 내 취향을 기억시키는 것까지.

끝나면 손에 남는 것: 다섯 번 고친 페이지 + 되돌리기 안전장치 + 취향을 기억하는 프로젝트

이 강의 완성 예시 열어보기고치기 전과 후, 그리고 되돌릴 수 있는 저장점이 쌓인 모습이에요.

2강을 마치고 나면 누구나 같은 걸 겪어요. 뭔가 고쳐 달라고 했더니, 다른 데가 망가지는 거요.

그 순간 대부분은 겁을 먹고 멈춰요. "잘못 건드릴까 봐" 무서우니까요.

오늘 그 두려움을 없애요. 되돌릴 수 있으면 무서울 게 없거든요.

오늘 만들 것

세 가지예요.

  • 다섯 번 고쳐서 내 마음에 든 페이지
  • 되돌리기 안전장치 — 일부러 망가뜨렸다가 되살리기까지 해봐요
  • 내 취향을 기억하는 프로젝트 — 같은 말을 두 번 안 해도 돼요

준비물

  • 2강을 마친 상태 (내 소개 페이지가 브라우저에 뜨는 상태)
  • 35분

따라 하기

1. 안전장치부터 만들기

고치기 전에 저장점을 만들어요. 게임의 세이브 포인트와 똑같아요. 망하면 여기로 돌아오면 돼요.

이 도구를 git이라고 불러요. 이름은 무섭지만 하는 일은 단순해요. "지금 이 순간을 기억해 둬"예요.

에이전트에게 시키세요.

이 폴더에 git을 설정해 줘. 나는 git을 처음 써.

1. git이 설치돼 있는지 확인하고, 없으면 어떻게 까는지 알려 줘
2. 이 폴더를 git 저장소로 만들어 줘
3. 지금 상태를 "첫 소개 페이지 완성"이라는 이름으로 저장해 줘

각 단계에서 뭘 했는지 한국어로 짧게 설명해 줘.

에이전트가 명령어를 몇 개 돌려요. 마지막에 "커밋했습니다" 같은 말이 나오면 성공이에요. 방금 저장점이 하나 생겼어요.

2. 일부러 망가뜨리기

이제 안전장치가 진짜인지 시험해요. 겁먹지 말고 시키세요.

index.html에서 내 이름이 들어간 부분을 통째로 지워 줘.
일부러 망가뜨려 보는 거야.

브라우저를 새로고침하면 이름이 사라져 있어요. 마음이 철렁하죠. 이제 되돌려요.

방금 바꾼 걸 전부 취소하고, 마지막 저장점으로 되돌려 줘.

새로고침하면 이름이 돌아와 있어요.

이게 오늘 배우는 가장 중요한 것이에요. 되돌릴 수 있다. 이제 뭘 시켜도 됩니다.

3. 다섯 번 고치기

이제 마음껏 고치세요. 규칙은 하나예요. 한 번에 하나씩.

바꿀 만한 것들이에요. 마음에 드는 걸 골라 시키세요.

제목 글씨를 조금 더 크게 하고, 그 아래 여백을 넓혀 줘.
"요즘 하는 일" 세 개를 카드처럼 보이게 해 줘.
테두리는 얇은 회색 선으로.
맨 아래에 저작권 한 줄을 넣어 줘. "© 2026 [내 이름]" 형식으로.
연락처 링크에 마우스를 올리면 색이 바뀌게 해 줘.
페이지 전체를 가운데로 모으고, 양옆에 여백을 줘.
너무 넓은 화면에서 글이 한 줄에 너무 길게 늘어지지 않게.

한 번 시킬 때마다 새로고침해서 눈으로 확인하세요. 마음에 안 들면 "방금 것 되돌려 줘"라고 하면 돼요.

마음에 드는 상태가 나올 때마다 저장점을 찍어두세요.

지금 상태를 "카드 디자인 적용"이라는 이름으로 저장해 줘.

4. 같은 말 두 번 하지 않기

혹시 이런 걸 반복하고 있나요. "한국어로 답해 줘", "파일은 하나로 유지해 줘", "설명은 짧게".

에이전트는 대화를 새로 시작하면 잊어버려요. 그래서 적어두는 곳이 있어요. CLAUDE.md라는 파일이에요. 에이전트가 매번 먼저 읽는 메모예요.

이 폴더에 CLAUDE.md 파일을 만들어 줘. 내용은 이렇게:

- 항상 한국어로 답할 것
- 나는 코딩을 모르니 전문 용어는 풀어서 설명할 것
- HTML과 CSS는 index.html 파일 하나에 유지할 것
- 한 번에 한 가지만 바꾸고, 뭘 바꿨는지 알려줄 것
- 큰 변경 전에는 먼저 물어볼 것

만든 다음 이 파일이 무슨 역할인지 설명해 줘.

이제 새 대화를 시작해도 에이전트가 이 규칙을 지켜요. 취향을 한 번만 말하면 되는 거예요.

만들었으면 저장점도 하나 찍어두세요.

지금 상태를 "내 규칙 기억시키기"라는 이름으로 저장해 줘.

막혔을 때

git이 설치돼 있지 않대요. 에이전트가 알려주는 링크에서 받아 설치하세요. Windows는 git-scm.com, Mac은 터미널에서 git --version을 치면 설치를 제안해요. 설치 후 VS Code를 껐다 켜세요.

"이름과 메일을 설정하라"고 나와요. git이 저장점에 누가 찍었는지 적으려는 거예요. "내 이름은 [이름], 메일은 [메일]로 git 설정을 해 줘"라고 시키면 돼요. 아무 값이나 넣어도 지금은 상관없어요.

되돌렸는데 원하는 곳으로 안 갔어요. "저장점 목록을 보여 줘"라고 한 다음, 돌아가고 싶은 지점의 이름을 말하세요. "'첫 소개 페이지 완성' 저장점으로 되돌려 줘" 같은 식으로요.

CLAUDE.md를 만들었는데 안 지켜요. 새 대화를 시작해 보세요. 기존 대화는 이미 시작할 때 파일을 읽은 뒤라 반영이 안 될 수 있어요.

고치다 보니 처음보다 더 못생겼어요. 흔한 일이에요. 저장점 목록에서 마음에 들었던 지점으로 돌아가면 됩니다. 그러라고 만든 거예요.

마무리 체크

나가기 전에 하나씩 확인해요:

  • git 저장점이 최소 두 개 이상 찍혀 있어요
  • 일부러 망가뜨렸다가 되돌리는 걸 직접 해봤어요
  • 페이지를 최소 다섯 번 고쳤어요
  • CLAUDE.md 파일이 폴더에 있어요
  • 지금 페이지가 2강 때보다 마음에 들어요

세 번째와 다섯 번째가 핵심이에요. 되돌릴 수 있다는 걸 손으로 확인한 사람은 더 이상 겁내지 않아요.

이제 남은 건 하나예요. 이 페이지는 아직 내 컴퓨터 안에만 있어요. 다음 강에서 진짜 주소를 붙여 세상에 내놔요.

직접 만들고 돌아가는 걸 확인했나요? 그럼 완료를 눌러요. 이 브라우저에만 저장돼요 — 주방 밖으로는 아무것도 나가지 않아요.

어느 단계에서 막혔나요?

여기에 바로 물어보세요. 계정은 필요 없어요. 헤맨 단계가 있다면 그건 레슨에 난 구멍이지, 읽는 사람 잘못이 아니에요. 답변은 본문에 반영돼서 다음 사람은 매끄럽게 지나가요.

더 고픈가요?

새 강의가 열리는 대로 메일함에 도착해요. 스팸 없이, 언제든 구독 취소할 수 있어요.