무료 강의 · 시즌 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강 때보다 마음에 들어요
세 번째와 다섯 번째가 핵심이에요. 되돌릴 수 있다는 걸 손으로 확인한 사람은 더 이상 겁내지 않아요.
이제 남은 건 하나예요. 이 페이지는 아직 내 컴퓨터 안에만 있어요. 다음 강에서 진짜 주소를 붙여 세상에 내놔요.
직접 만들고 돌아가는 걸 확인했나요? 그럼 완료를 눌러요. 이 브라우저에만 저장돼요 — 주방 밖으로는 아무것도 나가지 않아요.
다음 — 4강 · 인터넷에 무료로 배포하기 →