“코딩을 배운 것도 아닌데, 내가 정말 웹페이지를 만들 수 있을까?” — 시리즈를 따라오시면서 이런 의문이 드셨다면 당연한 반응입니다. 하지만 오늘 14편을 끝내고 나면 생각이 달라지실 거예요. 지금까지 배운 클로드 코드 프로젝트 기술을 총동원해, 클로드 코드 웹페이지 만들기를 처음부터 끝까지 함께 완성해보겠습니다.
오늘 만들 웹페이지, 어떤 모습인가요?
이번 클로드 코드 예제의 목표는 자기소개 정적(Static) 웹페이지입니다. 정적 웹페이지란 서버 없이 HTML·CSS 파일만으로 브라우저에서 바로 열리는 가장 단순한 형태의 웹페이지를 말합니다. 복잡한 백엔드(서버 처리) 지식이 전혀 필요 없습니다.
완성 후 포함되는 내용:
- 이름과 한 줄 소개
- 나의 관심사 목록 (카드 형태)
- 연락처 또는 SNS 링크
- 모바일에서도 잘 보이는 반응형 디자인
코딩 경험이 전혀 없어도 괜찮습니다. AI 웹개발의 진가가 바로 여기에 있습니다.
프로젝트 준비하기 — 폴더 만들고 클로드 코드 실행
① 작업 폴더 만들기
터미널을 열고 아래 명령어를 순서대로 입력하세요.
mkdir my-webpage
cd my-webpage
mkdir은 새 폴더를 만드는 명령어, cd는 그 폴더로 이동하는 명령어입니다. (4편에서 배우셨죠!)
② 클로드 코드 시작
폴더 안에서 클로드 코드를 실행합니다.
claude
프롬프트(입력 대기 줄)가 나타나면 준비 완료입니다. 클로드 코드 프로젝트의 시작은 항상 이렇게 단순합니다.
클로드 코드에게 웹페이지를 요청하는 법
이제 AI에게 원하는 것을 설명할 차례입니다. 10편에서 배운 프롬프트 요령을 여기서 써먹겠습니다. 구체적으로 말할수록 결과가 좋습니다.
아래 프롬프트를 그대로 붙여넣고, 이름과 내용만 본인 것으로 바꿔보세요.
아래 조건에 맞는 자기소개 웹페이지를 만들어줘.
- 파일명: index.html (CSS는 style.css로 분리해줘)
- 이름: 홍길동
- 소개: 데이터를 좋아하는 직장인
- 관심사: 독서, 여행, 요리
- 디자인: 파란색 계열, 카드형 레이아웃, 모바일 반응형
- 푸터에 이메일 주소 표시 (example@email.com)
클로드 코드는 몇 초 안에 index.html과 style.css 두 파일을 생성합니다. 파일 내용은 터미널에 바로 출력되어 눈으로 확인할 수 있습니다.
생성된 파일 브라우저에서 열기
파일 탐색기(윈도우 탐색기)로 my-webpage 폴더를 찾아 index.html을 더블클릭하세요. 크롬, 엣지 등 기본 브라우저에서 자동으로 열립니다. 인터넷 연결 없이 내 컴퓨터에서 바로 확인할 수 있습니다.
마음에 안 드는 부분, 대화로 즉시 수정하기
웹페이지를 보고 “이 부분은 바꾸고 싶다”는 생각이 드셨나요? 코드를 직접 열 필요가 없습니다. 클로드 코드와 대화하듯 요청하면 됩니다.
수정 요청 예시 모음:
| 원하는 변경 | 프롬프트 예시 |
|---|---|
| 배경색 변경 | “배경색을 연한 회색(#f5f5f5)으로 바꿔줘” |
| 글자 크기 조정 | “이름 제목 글자 크기를 더 크게 해줘” |
| 항목 추가 | “관심사에 ‘클로드 코드’를 추가해줘” |
| 레이아웃 변경 | “관심사 카드를 가로로 나란히 보이게 해줘” |
| 링크 버튼 추가 | “푸터에 인스타그램 버튼을 추가해줘” |
수정 요청 후에는 브라우저에서 F5(새로고침)를 눌러 결과를 확인하세요. 마음에 들 때까지 대화를 반복하면 됩니다.
CLAUDE.md로 프로젝트 규칙 저장하기
9편에서 배운 CLAUDE.md를 이 프로젝트에도 활용하면, 앞으로 추가 작업 시 매번 같은 설명을 반복하지 않아도 됩니다. 클로드 코드에게 아래처럼 요청하세요.
이 프로젝트의 CLAUDE.md 파일을 만들어줘.
규칙:
- 항상 index.html과 style.css로 파일 분리
- 색상 테마: 파란색 계열 (#1a73e8 메인)
- 폰트: 구글 폰트 Noto Sans KR 사용
- 모바일 반응형 필수 (768px 기준)
이렇게 하면 다음에 클로드 코드를 실행할 때 이 규칙이 자동으로 적용됩니다.
이번 프로젝트에서 사용한 기능 한눈에 정리
| 기능 | 사용한 곳 |
|---|---|
| 파일 생성 | index.html, style.css 자동 생성 |
| 파일 수정 | 색상·레이아웃 대화로 수정 |
| CLAUDE.md | 프로젝트 규칙 영구 등록 |
| 대화형 프롬프트 | 단계별 수정 요청 |
| 터미널 명령어 | mkdir, cd로 폴더 구성 |
코드 한 줄 직접 입력하지 않고도 웹페이지 하나를 처음부터 끝까지 완성했습니다. 이것이 클로드 코드 AI 웹개발의 핵심입니다.
자주 묻는 질문 (FAQ)
Q. HTML을 전혀 모르는데 따라 할 수 있나요?
A. 네, 완전히 가능합니다. 클로드 코드가 HTML·CSS 코드를 대신 작성해주기 때문에 전문 지식이 없어도 됩니다. 원하는 것을 한국어로 설명하는 것만으로 충분합니다.
Q. 만든 웹페이지를 인터넷에 올리려면 어떻게 하나요?
A. GitHub Pages, Netlify, Vercel 같은 무료 정적 호스팅 서비스를 이용하면 됩니다. 클로드 코드에게 “GitHub Pages에 배포하는 방법 알려줘”라고 물으면 단계별로 안내해줍니다.
Q. 여러 페이지(소개, 연락처 등)를 추가할 수 있나요?
A. 물론입니다. “about.html 페이지를 추가하고 메인 메뉴에서 연결해줘”처럼 요청하면, 클로드 코드가 기존 파일 구조를 파악한 뒤 일관성 있게 페이지를 추가해줍니다.
한 줄 요약: HTML·CSS를 전혀 몰라도 클로드 코드와 대화만 하면 나만의 자기소개 웹페이지를 10분 안에 완성할 수 있습니다.