챗봇과 무엇이 다른가

4.1 말로 하면 안 와닿습니다

“Claude Code는 내 파일을 직접 만진다.”

3장까지 이 말을 여러 번 했습니다. 그런데 이 문장은 읽어도 잘 안 와닿습니다. 직접 해보기 전까지는 그냥 문장일 뿐입니다.

2기 강의 안내에 이런 사람이 나옵니다.

“ChatGPT는 써봤는데 대화만 남고 손에 쥔 게 없어 허전했던 분.”

이 장은 그 허전함의 정체를 확인하는 장입니다. 딱 하나만 합니다.

똑같은 일을 웹 챗봇과 Claude Code에게 각각 시켜본다.

같은 일을 두 번 하니까 비효율적으로 보이지만, 이 30분이 나중에 “이건 어디서 할까” 를 판단하는 기준이 됩니다.

---

4.2 시켜볼 일 — 가게 소개 페이지 한 장

시킬 일은 이것입니다. 가게 이름과 내용은 아무거나 좋습니다.

“동네 꽃집 소개 웹페이지를 만들어줘. 가게 이름, 한 줄 소개, 영업시간, 전화번호가 들어가게. 그리고 그걸 파일로 저장해줘.”

마지막 문장이 핵심입니다. “파일로 저장해줘.” 여기서 둘이 갈립니다.

그 전에 낱말 하나만 짚고 갑니다.

📖 HTML(에이치티엠엘)

웹페이지를 이루는 글. 브라우저(크롬·엣지·사파리)는 이 글을 읽어서 화면에 제목·문단·버튼을 그려 줍니다. 메모장으로 열면 글자가 보이고, 브라우저로 열면 페이지가 보입니다. 파일 이름이 .html 로 끝납니다.

---

4.3 먼저 웹 챗봇에서

브라우저에서 claude.ai(또는 ChatGPT)에 들어가 새 대화를 열고, 위 요청을 그대로 씁니다.

결과: 페이지는 아주 잘 만들어 줍니다. 옆에 미리보기가 뜨고, 파일로 받는 버튼도 붙습니다.

그런데 파일은 내 작업 폴더에 생기지 않습니다. 그다음은 여러분 몫입니다.

1. 다운로드 를 누른다 — 파일은 PC의 「다운로드」 폴더로 간다
2. 다운로드 폴더를 열어 파일을 찾는다
3. 작업 폴더로 옮기고, 이름이 겹치면 덮어쓸지 정한다

진짜 문제는 고칠 때 옵니다

한 번이면 참을 만합니다. 진짜 문제는 그다음입니다.

“영업시간을 바꿔줘. 그리고 맨 위를 좀 더 크게.”

②를 다시 보세요. 웹 챗봇은 어디를 고치면 되는지 알려 줍니다. 코드를 직접 고치거나, 새로 만든 파일을 다시 받아서 위의 세 단계를 또 해야 합니다. 열 번 고치면 열 번 합니다. 그러다 옛날 파일을 옮기고, 어느 게 최신인지 헷갈립니다.

챗봇은 조언자입니다. 무엇을 어떻게 하면 되는지 말해 줍니다. 하는 건 사람입니다.

---

4.4 이번엔 Claude Code에서

VS Code로 돌아옵니다. 2장에서 연 작업 폴더가 열려 있어야 합니다.

Claude 패널에 같은 요청을 칩니다. 다운로드도, 옮기기도 없습니다.

아래 문장을 Claude에 입력하세요.

동네 꽃집 소개 웹페이지를 만들어줘.
가게 이름, 한 줄 소개, 영업시간, 전화번호가 들어가게.
index.html 파일로 저장하고 브라우저로 열어줘.

• 권한 창 ① 쓰기 → 파일 이름이 index.html 인지 보고 허용
• 권한 창 ② 실행 → 허용

왼쪽 파일 목록에 index.html 이 생기고, 브라우저에 페이지가 뜹니다.

이번엔 고쳐 봅니다.

아래 문장을 Claude에 입력하세요.

영업시간을 오전 10시~오후 8시로 바꾸고, 맨 위를 좀 더 크게 해줘.

Claude는 그 파일을 직접 열어서 그 부분만 고칩니다. 새 코드를 받을 일이 없습니다. 브라우저를 새로고침하면 바뀐 페이지가 보입니다.

Claude Code는 실행자입니다. 말하면 해 줍니다.

---

4.5 한 장으로 보면

일하는 흐름으로 그리면 차이가 더 선명합니다.

웹 챗봇은 사람이 옮기고, Claude Code는 파일로 남긴다

위 줄은 사람이 세 번 끼고, 아래 줄은 사람이 끼지 않습니다. 사람이 하는 일은 권한 창에서 확인하는 것뿐입니다.

---

4.6 파일로 남아야 하는 진짜 이유

“다운로드 몇 번 하는 게 뭐 대수냐” 싶을 수 있습니다. 2기에서는 대수입니다. 이유가 두 가지 있습니다.

💡 파일이 있어야 인터넷에 올릴 수 있다

3단계에서 사이트를 인터넷에 올립니다. 올리는 과정은 이렇습니다 — 내 폴더의 파일을 GitHub에 올리고, Vercel이 그 파일을 가져가 주소를 붙여 띄웁니다.

출발점이 폴더 안의 파일입니다. 대화창의 글은 올릴 수 없습니다. 2단계의 앱도 같습니다. 폰에서 돌아가는 앱은 폴더에 쌓인 파일 뭉치입니다.

💡 파일이 있어야 “만든 사람의 생각” 이 같이 남는다

3장에서 봤듯, AI는 새 대화를 열면 이전 대화를 모릅니다. 웹 챗봇에서 두 시간 동안 정한 것은 그 대화창 안에만 있습니다.

Claude Code는 폴더에 사이트 파일과 나란히 설계 문서를 둘 수 있습니다. 무엇을 만들고 무엇을 안 만들기로 했는지, 무엇이 왜 바뀌었는지. 다음에 “수정해줘” 라고 하면 Claude는 그 문서를 먼저 읽고 원래 생각에 맞춰 고칩니다. 대화는 사라져도 생각은 폴더에 남습니다.

아티팩트는 무엇인가

2기 1단계에서 화면 시안을 아티팩트라는 링크로 띄워 봅니다. 헷갈리기 쉬운 부분이라 짚고 갑니다.

아티팩트는 만든 화면을 링크로 열어 보는 미리보기 창입니다. 여러 안을 나란히 보고 고르기에 편합니다. 그런데 미리보기가 안 뜰 때가 있습니다. 그러면 Claude는 붙잡고 씨름하지 않고 바로 HTML 파일로 만들어 브라우저로 열어 줍니다.

docs/30.output/시안-8-1-웹-로그인명단.html

어느 쪽으로 보든, 고르는 것은 사람이고 남는 것은 폴더의 기록입니다. 고른 결과는 설계 문서에 적힙니다.

---

4.7 그럼 웹 챗봇은 이제 안 쓰나

아닙니다. 웹 챗봇이 더 나은 경우가 분명히 있습니다.

한 줄로 줄이면 이렇습니다.

묻고 끝나면 웹. 만들고 고치고 올릴 거면 Claude Code.

---

4.8 Claude Code도 못하는 것

못하는 것도 말씀드립니다.

셋째·넷째 줄이 2기에서 특히 중요합니다. 0장에서 말한 “Claude가 대신 해주지 못하는 구간” 이 바로 여기입니다.

⚠️ 개인정보를 다룰 때

Claude에게 읽힌 파일 내용은 Anthropic(Claude를 만든 회사) 서버로 전송됩니다. 내 컴퓨터 안에서만 처리되는 게 아닙니다.

손님 명단·연락처 같은 실제 개인정보를 넣기 전에 한 번 더 생각하세요. 시안 단계에서는 김하나 · 이두리 같은 가짜 이름으로 충분합니다.

---

4.9 정리

같은 일을 두 번 시켜봤습니다. 결론은 한 줄입니다.

웹 챗봇은 말해주고, Claude Code는 해준다.

그리고 2기에서 그 차이가 만드는 결과는 이것입니다 — 웹 챗봇의 결과는 대화창과 다운로드 폴더에 남고, Claude Code의 결과는 작업 폴더에 남는다. 폴더에 남아야 고칠 수 있고, 올릴 수 있다.

여기까지가 준비입니다. 다음 장부터 2기 1단계 실습 — 새 폴더를 작업 공간으로 꾸미고, 무엇을 만들지 정하는 일 — 로 들어갑니다.

---