3회 · 웹은 어떻게 움직일까: Claude Code로 첫 웹페이지

오늘의 흐름링크 복사

웹은 어떻게 움직일까링크 복사

브라우저: 웹을 보여 주는 창링크 복사

브라우저는 웹페이지를 보여 주는 프로그램입니다. 크롬, 엣지, 사파리, 삼성 인터넷이 모두 브라우저입니다. 우리가 "인터넷을 한다"고 할 때 쓰는 그 프로그램입니다.

주소창에 주소를 넣으면 이런 일이 일어납니다.

중요한 사실 하나: 웹페이지는 결국 파일입니다. 내 컴퓨터에 있는 파일을 브라우저로 열어도 웹페이지가 보입니다. 오늘 실습이 바로 그것입니다.

웹페이지를 이루는 세 가지링크 복사

웹페이지는 세 가지 언어로 만들어집니다. 외울 필요는 없고, 무슨 일을 하는지만 알면 됩니다.

진짜 모습 엿보기링크 복사

HTML이 어떻게 생겼는지 아주 조금만 보겠습니다. 읽을 줄 몰라도 괜찮습니다.

<h1>책 읽는 저녁</h1>
<p>매달 둘째 토요일 저녁 7시, 동네 북카페에서 만나요.</p>
<button>참석할게요</button>

• <h1>은 "큰 제목", <p>는 "문단", <button>은 "버튼"이라는 뜻의 이름표입니다.
• 이름표로 감싼 글이 화면에 나옵니다. 이것이 HTML의 전부라고 해도 과언이 아닙니다.
• 이런 코드는 이제 Claude Code가 씁니다. 우리는 "무엇을 보여 줄지"를 말합니다.

파일과 폴더링크 복사

컴퓨터 안의 주소링크 복사

Claude Code는 폴더 안에서 일합니다. 그래서 파일과 폴더가 어떤 관계인지 알아 두면 좋습니다.

프로젝트 하나 = 폴더 하나링크 복사

앞으로 만드는 것마다 폴더 하나를 줍니다. 오늘은 claude-practice 안에 moim-intro 폴더를 만들어 그 안에서만 작업합니다.

Claude Code가 일하는 방식링크 복사

에이전트 루프: 보고, 계획하고, 하고, 확인하고링크 복사

Claude Code는 한 번에 답을 내지 않고 여러 번 돌면서 일을 끝냅니다.

1. 보기 — 폴더에 무엇이 있는지 읽습니다.
2. 계획 — 무엇을 할지 정합니다.
3. 하기 — 파일을 만들거나 고칩니다. (이때 허락을 구합니다)
4. 확인 — 잘 됐는지 확인하고, 안 됐으면 다시 고칩니다.

아래에서 그 과정을 단계별로 눌러 보세요. 승인 창이 언제 뜨는지 눈여겨보세요.

권한 승인: 읽고 누르는 결재 버튼링크 복사

플랜 모드: 계획만 세우고 멈추기링크 복사

플랜 모드를 켜면 Claude Code는 파일을 하나도 고치지 않고 계획만 보여 줍니다. 계획을 보고 "좋아, 진행해"라고 해야 실제로 만듭니다.

• 데스크톱 앱 입력창 근처의 모드 선택에서 플랜 모드를 고를 수 있습니다.
• 모드를 바꾸기 어렵다면 문장에 **"아직 만들지 말고 계획부터 보여줘"**라고 쓰면 됩니다. 효과는 거의 같습니다.

되돌리기: 마음 놓고 시도하는 힘링크 복사

결과가 마음에 안 들면 되돌릴 수 있습니다.

• Esc를 두 번 누르거나 /rewind 입력 → 이전 시점을 골라 되돌리기
• 말로 부탁하기: "방금 바꾼 것 되돌려줘"
• 5회에서는 더 튼튼한 되돌리기인 Git을 배웁니다.

요즘 업계에서는링크 복사

왜 권한 승인이 중요해졌나링크 복사

2025년 7월, 한 AI 코딩 서비스의 에이전트가 "바꾸지 말라"는 지시에도 사용자의 운영 데이터베이스를 지운 일이 크게 알려졌습니다 (Wikipedia — Vibe coding). 이 사건 이후 업계에서는 AI에게 어디까지 맡길지 사람이 정하는 장치가 더 중요해졌습니다. 권한 승인, 계획 먼저 보기, 되돌리기, 시험용과 실제 데이터 분리가 기본이 되고 있습니다.

대부분의 서비스는 웹에서 시작한다링크 복사

AI로 무언가를 만드는 사람들이 가장 먼저 만드는 것은 대부분 웹입니다. 설치 없이 주소 하나로 열리고, 컴퓨터와 휴대폰 어디서나 보이기 때문입니다. 이 과정도 웹으로 시작해 휴대폰 앱(11–14회)으로 넓혀 갑니다. 웹에서 익힌 HTML·CSS·JavaScript의 감각은 앱을 만들 때도 그대로 쓰입니다.

"코드를 읽는 힘"은 여전히 쓸모 있다링크 복사

Stack Overflow 2025년 설문에서 개발자의 **46%**가 AI 결과의 정확도를 믿지 않는다고 답했습니다 (2025 Developer Survey). 코드를 다 쓸 줄 몰라도, 무엇이 어디에 있는지 감을 잡는 정도의 읽는 힘이 있으면 AI 결과를 훨씬 잘 확인할 수 있습니다. 오늘 "한 줄씩 설명 듣기" 실습을 하는 이유입니다.

시연링크 복사

강사가 빈 폴더를 Claude Code로 열고, 플랜 모드에서 "모임 소개 페이지" 계획을 받습니다. 계획에서 "회비 안내를 맨 위로" 같은 수정을 요청한 뒤 승인하면, 몇 초 만에 index.html이 생깁니다. 파일을 더블클릭해 브라우저로 열고, 창 너비를 좁혀 휴대폰 화면을 흉내 냅니다. 마지막으로 일부러 색을 이상하게 바꾼 뒤 Esc 두 번으로 되돌립니다.

실습링크 복사

정리링크 복사

다음 시간에는 한 장짜리 웹페이지를 넘어, 2회에 만든 목업을 여러 화면이 있는 진짜 웹앱으로 바꿉니다.

복습링크 복사

과제링크 복사

더 해 보기링크 복사