따라 하면 완성되는 내 첫 웹사이트

부제

비개발자를 위한 Claude AI 실습 가이드

저자

김상기

머리말

“저도 웹사이트를 만들 수 있을까요?”

이 질문을 받을 때마다 저는 같은 대답을 합니다. “네, 지금 바로요.”

불과 2년 전만 해도 이 대답은 절반은 위로, 절반은 과장이었을 겁니다. 하지만 지금은 진심으로 드리는 말씀이에요. AI가 코드를 써주는 시대가 왔거든요.

이 책은 코딩을 한 번도 해본 적 없는 분들을 위해 쓰였습니다. 기획자, 마케터, HR 담당자, 디자이너, 혹은 그냥 자기만의 공간을 인터넷에 갖고 싶은 모든 분들이요. Claude라는 AI와 대화하면서, 진짜로 웹사이트를 만들고, 진짜로 인터넷에 공개하는 과정을 처음부터 끝까지 함께 걸어갈 거예요.

읽기만 하는 책이 아닙니다. 따라 하는 책이에요. 한 챕터를 읽고 나면 눈에 보이는 결과물이 하나씩 생기고, 마지막 장을 덮을 때쯤이면 여러분의 이름이 적힌 웹사이트가 인터넷 어딘가에서 빛나고 있을 겁니다.

두 가지 프로젝트를 함께 만들어볼 거예요. 하나는 나를 소개하는 포트폴리오 사이트, 다른 하나는 컨퍼런스나 이벤트를 정리한 후기 사이트입니다. GitHub Pages와 Vercel이라는 무료 서비스에 배포까지 할 거예요. 모두 무료이고, 모두 여러분 손으로 만드는 겁니다.

겁먹지 마세요. 제가 옆에서 하나하나 알려드릴게요. 자, 시작해볼까요?

1장. AI가 코딩하는 시대, 당신도 웹사이트를 만들 수 있어요

“나도 멋진 웹사이트 하나 가지고 싶은데…”라고 생각해본 적 있으신가요?

포트폴리오를 정리하고 싶을 때, 내 작업물을 세상에 보여주고 싶을 때, 혹은 회사에서 간단한 이벤트 페이지가 필요할 때. 그때마다 떠오르는 생각이 있죠. “웹사이트를 만들려면 코딩을 배워야 하잖아.” 그래서 한번 HTML 강의를 찾아보다가, 꺾쇠괄호와 영어 단어가 빼곡한 화면을 보고 조용히 브라우저를 닫았던 경험, 혹시 있으신가요?

걱정하지 마세요. 이 책은 바로 그런 분들을 위해 쓰였어요.

코딩을 모르는데 웹사이트를 만든다고요?

네, 정말이에요. 한때는 불가능했던 일이지만, 지금은 가능해요.

2024년을 기점으로 AI가 코드를 작성하는 시대가 열렸어요. “바이브 코딩(Vibe Coding)”이라고 들어보셨나요? 복잡한 프로그래밍 문법을 외울 필요 없이, 내가 원하는 것을 말로 설명하면 AI가 코드를 만들어주는 방식이에요. 마치 인테리어 디자이너에게 “밝고 따뜻한 느낌의 거실을 만들어주세요”라고 말하면 도면을 그려주는 것처럼요.

실제로 이런 변화가 얼마나 빠르게 퍼지고 있는지 보여드릴게요. Vercel이라는 회사가 만든 v0라는 AI 도구가 있는데요, 이 도구 사용자의 63%가 비개발자예요. 디자이너, 마케터, 기획자, 학생 — 코딩을 전혀 모르는 분들이 AI와 대화하면서 웹사이트를 만들고 있다는 뜻이에요.

그렇다면 이 책에서는 어떤 도구를 쓰게 될까요? 바로 Claude예요. Claude는 Anthropic이라는 회사가 만든 AI 대화 도구인데요, 특별한 점이 있어요. Claude에게 “자기소개 페이지를 만들어줘”라고 말하면, 대화창 바로 옆에서 웹페이지가 만들어지는 걸 실시간으로 볼 수 있어요. 이 기능을 Artifacts라고 부르는데, 마치 디자이너와 개발자가 옆에 앉아서 동시에 작업해주는 것 같은 경험이에요.

정적 사이트, 어렵지 않아요

혹시 “정적 사이트”라는 말이 낯설게 느껴지시나요? 이름이 좀 딱딱하긴 하죠. 하지만 개념은 아주 단순해요.

웹사이트에는 크게 두 종류가 있어요. 하나는 네이버나 쿠팡처럼 로그인도 하고, 댓글도 달고, 실시간으로 데이터가 바뀌는 “동적 사이트”예요. 이런 사이트를 만들려면 정말 복잡한 기술이 필요해요. 서버도 운영해야 하고, 데이터베이스도 관리해야 하고… 솔직히 전문 개발자들도 번거로워하는 영역이에요.

다른 하나가 바로 “정적 사이트”예요. 파일 몇 개만 인터넷에 올려두면 누구나 접속할 수 있는, 말 그대로 단순한 웹사이트예요. 포트폴리오, 이력서, 이벤트 페이지, 회사 소개 — 이런 종류의 사이트는 정적 사이트로 충분해요. 서버 관리도 필요 없고, 비용도 무료예요.

이 책에서 만드는 모든 사이트가 바로 이 정적 사이트예요. 복잡한 서버 걱정은 접어두셔도 돼요.

이 책에서 만들 두 가지 사이트

이 책을 끝까지 따라오시면, 두 개의 진짜 웹사이트를 갖게 돼요. 잠깐 미리 만나볼까요?

프로젝트 A: 나만의 포트폴리오 사이트

[스크린샷: 완성된 포트폴리오 사이트 미리보기 — 히어로 섹션, About Me, 프로젝트 갤러리가 보이는 깔끔한 디자인]

첫 번째 프로젝트는 나만의 포트폴리오 사이트예요. 이름, 자기소개, 경력, 프로젝트, 연락처가 한 페이지에 정리된 깔끔한 사이트를 만들 거예요. Claude와 대화하면서 디자인하고, 내 이야기를 채워 넣고, GitHub Pages라는 무료 서비스에 올려서 여러분의이름.github.io라는 주소로 세상에 공개할 거예요.

기술적으로는 HTML과 CSS라는 것을 사용하지만, 여러분이 직접 코드를 작성할 일은 없어요. Claude가 다 만들어줄 거니까요.

프로젝트 B: 컨퍼런스/이벤트 후기 사이트

[스크린샷: 완성된 이벤트 후기 사이트 미리보기 — 이벤트 배너, 세션 목록, 사진 갤러리가 있는 다채로운 디자인]

두 번째 프로젝트는 좀 더 도전적이에요. 여러 페이지로 구성된 이벤트 후기 사이트를 만들어요. 메인 페이지, 세션 목록, 발표자 프로필, 사진 갤러리까지. 이번에는 Claude Code라는 더 강력한 도구를 사용하고, Vercel이라는 플랫폼에 배포해볼 거예요.

프로젝트 A에서 기본기를 익히고, 프로젝트 B에서 한 단계 더 나아가는 구조예요. 계단을 한 칸씩 오르는 것처럼, 부담 없이 실력이 쌓여요.

이 책을 100% 활용하는 법

이 책은 “읽는 책”이 아니에요. “따라 하는 책”이에요.

요리책을 생각해보세요. 레시피를 눈으로만 읽으면 요리 실력이 늘까요? 직접 재료를 손질하고, 불 앞에 서서, 맛을 보면서 만들어야 실력이 느는 거잖아요. 이 책도 마찬가지예요.

이렇게 따라오시면 돼요:

컴퓨터 앞에 앉아서 책을 열어주세요
책에 나오는 대로 Claude에게 말을 걸어보세요
화면에 결과가 나오면, 책의 스크린샷과 비교해보세요
잘 안 되면 “트러블슈팅 팁” 박스를 확인해보세요

한 챕터를 따라 하는 데 대략 30분에서 1시간 정도면 충분해요. 주말 하루면 포트폴리오 사이트 하나가 뚝딱 완성될 수 있어요.

필요한 준비물은 이것뿐이에요: - 인터넷이 되는 컴퓨터 (윈도우든 맥이든 상관없어요) - 웹 브라우저 (크롬을 추천해요) - 이메일 주소 하나

코딩 경험? 전혀 필요 없어요. 진짜예요.

“나도 할 수 있을까?” 라는 걱정에 대해

솔직히 말씀드릴게요. 이 책을 펼치면서 “정말 나도 할 수 있을까?” 하는 마음이 들 수 있어요. 그 마음 충분히 이해해요. 새로운 걸 시작할 때 누구나 느끼는 감정이니까요.

하지만 이것만 기억해주세요. 여러분이 해야 할 일은 Claude에게 한국어로 말을 거는 것이에요. “자기소개 페이지를 만들어줘”, “색깔을 좀 더 따뜻하게 바꿔줘”, “모바일에서도 잘 보이게 해줘” — 이런 말을 할 수 있다면, 웹사이트를 만들 수 있어요.

혹시 중간에 막히는 부분이 생기더라도 걱정하지 마세요. 매 챕터마다 “이런 상황이면 이렇게 해보세요”라는 트러블슈팅 팁을 넣어뒀어요. 9장에는 아예 트러블슈팅만 모아둔 종합 가이드도 있어요. 그리고 무엇보다, Claude에게 “이 에러가 뭐야? 어떻게 고쳐?”라고 물어볼 수 있잖아요. AI가 코딩을 도와주는 것처럼, 문제 해결도 도와줘요.

앞으로의 여정

이 책의 여정을 간단히 미리 보여드릴게요.

1~2장: 문 열기 — 지금 읽고 계신 동기 부여와 도구 준비
3~6장: 프로젝트 A — Claude와 대화하며 포트폴리오 사이트 만들기, 꾸미기, 배포하기
7~8장: 프로젝트 B — 여러 페이지 이벤트 사이트 만들기, Vercel로 자동 배포
9~10장: 날개 달기 — 트러블슈팅 가이드와 다음 단계 안내

매 챕터가 끝날 때마다 눈에 보이는 결과물이 있어요. “오, 진짜 됐다!” 하는 순간이 반복되면서, 어느새 두 개의 웹사이트를 가진 사람이 되어 있을 거예요.

마무리

자, 이제 시작해볼까요?

다음 장에서는 사이트를 만들기 위한 도구들을 준비할 거예요. 요리로 치면 “재료 준비” 단계인데요, Claude 계정 만들기, GitHub 가입하기, 필요한 프로그램 설치하기 — 차근차근 하나씩 안내해드릴게요. 컴퓨터 앞에 앉아서, 이 책과 함께 따라와주시면 돼요.

코딩을 몰라도 괜찮아요. AI가 코딩하는 시대가 왔으니까요.

2장. 도구 준비 — 계정 만들고 시작 준비하기

요리를 시작하기 전에 재료부터 준비하는 것처럼, 웹사이트를 만들기 전에 도구부터 갖춰야겠죠? “도구 설치”라는 말이 벌써 좀 난감하게 느껴지실 수도 있어요. 하지만 걱정하지 마세요. 오늘 준비할 도구는 세 가지뿐이고, 전부 무료예요. 그리고 회원가입할 줄 아시면 충분해요.

이번 장을 끝내고 나면, 여러분의 컴퓨터에는 웹사이트를 만들 모든 준비가 갖춰져 있을 거예요.

세 가지 도구, 각각 뭘 하는 건가요?

본격적으로 시작하기 전에, 오늘 준비할 세 가지 도구가 각각 어떤 역할인지 한 줄로 정리해드릴게요.

도구	한 줄 비유	하는 일
Claude	옆에 앉은 개발자 친구	AI와 대화하면서 웹페이지 코드를 만들어요
GitHub	인터넷에 있는 내 작업 서랍	만든 파일을 저장하고, 웹사이트로 공개해요
Vercel	자동 배포 도우미	GitHub에 파일을 올리면 자동으로 사이트를 업데이트해요

비유를 하나 더 해볼게요. 여러분이 책을 쓴다고 상상해보세요.

Claude = 글을 대신 써주는 AI 작가
GitHub = 원고를 보관하는 출판사 금고
Vercel = 원고가 바뀌면 자동으로 새 판을 찍어주는 인쇄소

이 세 가지가 연결되면, “Claude에게 말하기 → GitHub에 저장 → Vercel이 자동 배포”라는 흐름이 만들어져요. 지금은 감이 잘 안 와도 괜찮아요. 직접 해보면 “아, 이런 거구나!” 하고 바로 느껴질 거예요.

1단계: Claude 계정 만들기

첫 번째로 준비할 도구는 Claude예요. 이 책 전체에서 가장 많이 사용하게 될 도구이니, 천천히 따라와주세요.

가입 절차

웹 브라우저를 열고 claude.ai에 접속해주세요

[스크린샷: claude.ai 접속 화면 — “Get started” 버튼이 보이는 메인 페이지]

“Get started” 또는 “Sign up” 버튼을 클릭해주세요
이메일 주소를 입력하거나, Google 계정으로 바로 가입할 수 있어요

[스크린샷: 회원가입 화면 — 이메일 입력란과 Google 로그인 버튼]

이메일로 가입하셨다면, 받은 편지함에서 인증 메일을 확인해주세요
이름을 입력하고 이용약관에 동의하면 가입 완료!

[스크린샷: Claude 대화 화면 — 가입 후 처음 보이는 빈 대화창]

💡 트러블슈팅 팁: 인증 메일이 안 와요!

가끔 인증 메일이 늦게 오거나 스팸 폴더로 들어갈 수 있어요. 이렇게 해보세요: - 스팸/정크 메일 폴더를 확인해보세요 - 2~3분 기다린 후 “Resend” 버튼을 눌러보세요 - 그래도 안 오면 다른 이메일 주소로 다시 시도하거나, Google 계정으로 가입하는 편이 빨라요

무료 플랜과 Pro 플랜

Claude는 무료로도 사용할 수 있어요. 이 책의 모든 실습은 무료 플랜으로 충분히 따라할 수 있어요. 다만, 무료 플랜은 하루에 보낼 수 있는 메시지 수에 제한이 있어요. 실습 도중 “사용량 초과” 메시지가 뜨면 잠시 쉬었다가 다시 하시면 돼요.

혹시 메시지 제한 없이 쓰고 싶다면 Pro 플랜(유료)도 있지만, 지금 당장은 무료 플랜으로 시작하세요.

Artifacts 기능 체험하기

가입이 됐으니, Claude의 핵심 기능을 하나 체험해볼까요? 바로 Artifacts예요. 이 기능이 이 책에서 웹사이트를 만드는 핵심 도구가 될 거예요.

대화창에 이렇게 입력해보세요:

간단한 자기소개 웹페이지를 만들어주세요.
이름은 "홍길동"이고, 직업은 "마케터"로 해주세요.
깔끔하고 모던한 디자인으로 부탁해요.

[스크린샷: Claude에게 메시지를 보낸 후 — 대화창 오른쪽에 웹페이지 미리보기가 나타난 화면]

보이시나요? 대화창 옆에 진짜 웹페이지가 나타났어요! 이게 바로 Artifacts예요. Claude가 만든 코드를 바로 미리보기로 보여주는 기능이에요. 클릭해서 확대하면 더 크게 볼 수도 있어요.

이번에는 수정을 요청해볼게요:

배경색을 연한 파란색으로 바꿔주세요.
그리고 아래쪽에 "문의: hong@email.com" 이라는 연락처도 추가해주세요.

[스크린샷: 수정 요청 후 변경된 Artifacts 미리보기]

어떠세요? 한국어로 말하는 것만으로 웹페이지가 만들어지고, 수정되는 게 느껴지시죠? 이게 앞으로 이 책에서 계속하게 될 작업이에요. 신기하지 않으신가요?

지금은 체험만 한 거예요. 3장부터 본격적으로 포트폴리오를 만들 테니, 기대해주세요.

2단계: GitHub 계정 만들기

두 번째 도구는 GitHub이에요. “깃허브”라고 읽어요.

“GitHub가 뭔데요?”라고 물으실 수 있는데, 쉽게 말해 인터넷에 있는 프로젝트 폴더예요. 내 컴퓨터에 있는 파일을 GitHub에 올리면, 다른 사람도 볼 수 있고, 심지어 그 파일을 웹사이트로 만들어주는 기능(GitHub Pages)도 있어요. 5장에서 포트폴리오를 배포할 때 이 기능을 사용할 거예요.

가입 절차

웹 브라우저에서 github.com에 접속해주세요

[스크린샷: GitHub 메인 페이지 — “Sign up” 버튼이 보이는 화면]

“Sign up” 버튼을 클릭해주세요
이메일 주소를 입력해주세요
비밀번호를 설정해주세요 (8자 이상, 숫자 포함)
사용자 이름(username)을 정해주세요

[스크린샷: GitHub 사용자 이름 입력 화면]

💡 사용자 이름 고를 때 팁!

GitHub 사용자 이름은 나중에 포트폴리오 사이트 주소가 돼요. 여러분의이름.github.io 형태로요. 그러니 너무 이상한 이름보다는 본인 이름이나 닉네임을 쓰는 게 좋아요. - 좋은 예: hong-gildong, gildong-hong, gdhong - 아쉬운 예: user12345678, asdfqwer

이메일로 온 인증 코드를 입력해주세요
간단한 설문에 답하고 (건너뛰어도 돼요) 가입 완료!

[스크린샷: GitHub 대시보드 — 가입 후 처음 보이는 메인 화면]

GitHub Desktop 설치하기

GitHub를 사용하는 방법은 여러 가지가 있는데, 비개발자분들에게는 GitHub Desktop이라는 프로그램이 가장 편해요. 명령어를 타이핑할 필요 없이, 버튼 클릭만으로 파일을 올리고 내려받을 수 있거든요.

desktop.github.com에 접속해주세요
“Download for Windows” (또는 “Download for macOS”) 버튼을 클릭해주세요

[스크린샷: GitHub Desktop 다운로드 페이지]

다운로드된 설치 파일을 실행해주세요
설치가 끝나면 프로그램을 열어주세요
“Sign in to GitHub.com”을 클릭하고, 방금 만든 GitHub 계정으로 로그인해주세요

[스크린샷: GitHub Desktop 로그인 화면]

이름과 이메일이 자동으로 채워지면 “Finish”를 클릭해주세요

[스크린샷: GitHub Desktop 메인 화면 — 로그인 완료 후]

GitHub Desktop이 준비됐어요! 아직은 아무것도 없는 빈 화면이 보이겠지만, 5장에서 포트폴리오를 배포할 때 이 프로그램을 다시 열게 될 거예요.

💡 트러블슈팅 팁: GitHub Desktop 설치가 안 돼요!

윈도우: “이 앱은 PC에서 실행할 수 없습니다” 메시지가 뜨면, 64비트 운영체제인지 확인해보세요. 최신 윈도우 10/11이라면 대부분 문제없어요.

맥: “확인되지 않은 개발자” 경고가 뜨면, 시스템 설정 → 보안 및 개인정보 → “그래도 열기”를 클릭해주세요.

설치 자체가 안 되는 경우, 웹 브라우저에서 직접 GitHub를 사용할 수도 있어요. 5장에서 두 가지 방법 모두 안내해드릴게요.

3단계: Vercel 계정 만들기

세 번째 도구는 Vercel이에요. “버셀”이라고 읽어요.

Vercel은 8장에서 두 번째 프로젝트(이벤트 후기 사이트)를 배포할 때 사용할 도구예요. GitHub에 파일을 올리면, Vercel이 자동으로 그걸 웹사이트로 만들어줘요. “자동 배포”라는 건데, GitHub Pages보다 한 단계 더 편한 방식이에요.

“8장에서 쓸 건데 지금 가입해야 하나요?”라고 물으실 수 있어요. 미리 해두는 편이 나아요. 나중에 막상 배포하려는데 가입부터 시작하면 흐름이 끊기거든요.

가입 절차

Vercel의 가입은 정말 간단해요. GitHub 계정이 있으면 원클릭이에요.

웹 브라우저에서 vercel.com에 접속해주세요

[스크린샷: Vercel 메인 페이지]

“Sign Up” 버튼을 클릭해주세요
“Continue with GitHub”를 선택해주세요

[스크린샷: Vercel 가입 화면 — “Continue with GitHub” 버튼이 강조된 모습]

GitHub 로그인 화면이 뜨면 “Authorize Vercel”을 클릭해주세요
가입 완료!

[스크린샷: Vercel 대시보드 — 가입 후 빈 프로젝트 목록]

정말 간단하죠? GitHub 계정으로 로그인하는 거라, 별도로 비밀번호를 만들 필요도 없어요.

Vercel도 무료 플랜(Hobby)으로 충분히 사용할 수 있어요. 개인 프로젝트라면 비용 걱정 없이 쓸 수 있답니다.

텍스트 에디터 — 코드를 열어볼 도구

하나 더 준비할 게 있어요. 텍스트 에디터라는 건데, Claude가 만들어준 코드를 내 컴퓨터에 저장하고 열어볼 때 사용해요.

“텍스트 에디터가 뭔데요?” 쉽게 말해 메모장의 업그레이드 버전이에요. 사실 윈도우 메모장으로도 되긴 하는데, 코드를 열면 색깔 구분이 안 돼서 좀 찜찜해요. 그래서 VS Code(Visual Studio Code)를 추천해요. 무료이고, 코드를 예쁘게 색칠해서 보여주거든요.

설치가 귀찮다면 일단 메모장으로 시작해도 돼요. 나중에 필요하다고 느껴지면 그때 설치해도 충분해요.

VS Code 설치 (선택사항)

code.visualstudio.com에 접속해주세요
“Download” 버튼을 클릭해주세요 (운영체제를 자동으로 인식해요)
다운로드된 파일을 실행해서 설치해주세요

[스크린샷: VS Code 다운로드 페이지]

설치 후 실행하면 영어로 된 화면이 뜰 텐데, 당황하지 마세요. 한국어 팩을 설치할 수도 있지만, 이 책에서는 VS Code를 복잡하게 사용하지 않아요. 파일을 열고 저장하는 정도만 할 거예요.

“내 컴퓨터의 파일이 인터넷 사이트가 되는 원리”

도구 준비가 거의 끝났어요. 마지막으로 한 가지 개념만 짚고 넘어갈게요. 앞으로 계속 반복될 흐름이니까요.

여러분이 만들 웹사이트는 결국 파일이에요. index.html이라는 이름의 파일 하나가 곧 웹페이지 하나예요. 이 파일을 내 컴퓨터에서 더블클릭하면 브라우저에서 열리고, GitHub에 올리면 전 세계 누구나 볼 수 있는 웹사이트가 돼요.

전체 흐름을 그려보면 이래요:

1. Claude에게 "이런 페이지 만들어줘" 라고 말하기
2. Claude가 만들어준 코드를 복사하기
3. 내 컴퓨터에 파일(index.html)로 저장하기
4. 브라우저에서 열어서 잘 됐는지 확인하기
5. GitHub에 올려서 인터넷에 공개하기

이 다섯 단계가 이 책의 핵심 사이클이에요. 3장부터 이 사이클을 직접 경험하게 될 거예요.

💡 트러블슈팅 팁: “폴더”와 “파일”이 헷갈려요

컴퓨터에서 폴더는 서류함, 파일은 서류함 안의 종이라고 생각하면 돼요. - 폴더 = 여러 파일을 담는 상자 (예: “내 포트폴리오” 폴더) - 파일 = 실제 내용이 담긴 문서 (예: index.html 파일)

앞으로 “프로젝트 폴더를 만드세요”라고 하면, 바탕화면이나 문서 폴더에 새 폴더를 하나 만드는 거예요. “파일을 저장하세요”라고 하면, 그 폴더 안에 파일을 넣는 거예요.

여기까지의 결과물

수고하셨어요! 이번 장에서 준비한 것들을 정리해볼게요.

도구	상태	확인 방법
Claude 계정	가입 완료	claude.ai에 로그인되는지 확인
Claude Artifacts	체험 완료	간단한 웹페이지를 만들어봤어요
GitHub 계정	가입 완료	github.com에 로그인되는지 확인
GitHub Desktop	설치 완료	프로그램을 열고 로그인되는지 확인
Vercel 계정	가입 완료	vercel.com에 로그인되는지 확인
텍스트 에디터	준비 완료	VS Code 또는 메모장 사용 가능

전부 체크되셨나요? 그렇다면 준비 완료예요!

마무리

도구 준비는 솔직히 재미있는 단계는 아니에요. 회원가입하고, 프로그램 설치하고… 좀 지루하셨을 수도 있어요. 하지만 이 과정이 끝났으니, 다음 장부터는 진짜 재미있는 일이 시작돼요.

다음 장에서는 Claude에게 본격적으로 포트폴리오 페이지를 만들어달라고 요청할 거예요. “내 소개 페이지를 만들어줘”라고 말하는 순간, 눈앞에 진짜 웹페이지가 나타나는 경험을 하게 될 거예요. 이 책에서 첫 번째 “와!” 하는 순간이에요.

컴퓨터 앞에 앉아서, 다음 장을 펼쳐주세요.

3장. Claude와 첫 대화 — “내 소개 페이지 만들어 줘”

자, 드디어 진짜 만들기 시작이에요.

컴퓨터 앞에 앉아 계신가요? claude.ai에 로그인은 되셨나요? 그럼 시작해볼게요. 이번 장이 끝나면, 여러분의 컴퓨터에 진짜 웹페이지 파일이 하나 생겨 있을 거예요. 브라우저에서 열면 여러분의 자기소개가 예쁘게 보이는, 그런 페이지요.

Claude에게 첫 마디 건네기

웹페이지를 만드는 첫 단계는 놀랍도록 간단해요. Claude에게 말을 거는 거예요.

2장에서 잠깐 체험해봤죠? 이번에는 진짜 포트폴리오용 페이지를 만들어볼 거예요. claude.ai에 접속해서 새 대화를 시작하고, 아래처럼 입력해보세요.

저는 마케터인데요, 간단한 자기소개 웹페이지를 하나 만들고 싶어요.

이런 내용을 넣어주세요:
- 이름: 홍길동
- 직업: 디지털 마케터
- 한 줄 소개: "데이터로 이야기를 만드는 마케터입니다"
- 이메일: gildong@email.com

깔끔하고 모던한 느낌으로, 한 페이지짜리 HTML로 만들어주세요.

엔터를 누르면, Claude가 코드를 작성하기 시작해요. 그리고 대화창 오른쪽(또는 아래쪽)에 Artifacts가 나타나면서, 만들어지고 있는 웹페이지를 실시간으로 미리보기할 수 있어요.

[스크린샷: Claude가 코드를 생성하는 중 — 왼쪽 대화창에 코드가 나타나고, 오른쪽 Artifacts에 웹페이지 미리보기가 보이는 화면]

잠깐 기다리면… 짜잔! 이름, 직업, 소개, 이메일이 깔끔하게 정리된 웹페이지가 눈앞에 나타나요.

이 순간이 바로 이 책에서 말한 첫 번째 “와!” 모먼트예요. 코드를 한 줄도 직접 쓰지 않았는데, 진짜 웹페이지가 만들어졌어요.

💡 트러블슈팅 팁: Artifacts가 안 보여요!

Artifacts 미리보기가 나타나지 않는 경우가 있어요. 이렇게 해보세요: - Claude 설정에서 Artifacts 기능이 켜져 있는지 확인해주세요 (프로필 → Settings → Artifacts → On) - 브라우저 창이 너무 좁으면 Artifacts가 대화창 아래에 숨어 있을 수 있어요. 아래로 스크롤해보세요 - 그래도 안 보이면, Claude의 답변에서 “Preview” 또는 “미리보기” 버튼을 찾아 클릭해보세요

대화로 수정하기 — 이게 바이브 코딩이에요

첫 결과가 마음에 들 수도 있고, “음, 좀 다르게 하고 싶은데…” 할 수도 있어요. 그게 바로 바이브 코딩의 재미예요. 수정하고 싶은 부분을 그냥 말로 하면 돼요.

색상 바꾸기

배경색을 아주 연한 베이지색으로 바꿔주세요.
제목은 진한 남색으로 해주세요.

[스크린샷: 색상이 변경된 Artifacts 미리보기]

섹션 추가하기

아래쪽에 "보유 스킬" 섹션을 추가해주세요.
스킬은 Google Analytics, SNS 마케팅, 콘텐츠 기획, 데이터 분석 이렇게 4개요.
카드 형태로 예쁘게 보여주세요.

[스크린샷: 스킬 섹션이 추가된 Artifacts 미리보기]

느낌 바꾸기

전체적으로 좀 더 세련된 느낌으로 바꿔주세요.
폰트를 깔끔한 것으로 바꾸고, 여백도 넉넉하게 해주세요.

[스크린샷: 디자인이 개선된 Artifacts 미리보기]

보이시나요? “색상 바꿔줘”, “섹션 추가해줘”, “느낌 바꿔줘” — 이런 일상적인 말로 웹페이지가 계속 바뀌어요. 코드가 뭔지 몰라도, 디자이너에게 요청하듯 말하면 돼요.

혹시 결과가 마음에 안 들면요? 다시 말하면 돼요. Claude는 여러분이 만족할 때까지 몇 번이고 수정해줘요.

프롬프트 잘 쓰는 팁 5가지

Claude와 대화하다 보면 “어, 내가 원한 게 이게 아닌데…”라고 느낄 때가 있어요. 난감하죠. 그건 대부분 요청이 너무 막연해서 그래요. Claude도 여러분의 마음을 읽을 수는 없으니까요.

좋은 결과를 얻으려면, 좋은 프롬프트(요청)를 써야 해요. 다섯 가지 팁을 알려드릴게요.

팁 1: 내가 누구인지 먼저 알려주세요

Claude에게 맥락을 주면 훨씬 적절한 결과가 나와요.

❌ 별로인 예시:
"자기소개 페이지 만들어줘"

✅ 좋은 예시:
"저는 5년 차 UX 디자이너예요. 이직을 준비하면서
포트폴리오 웹사이트를 만들고 싶어요."

팁 2: 구체적으로 말해주세요

“예쁘게 만들어줘”보다 구체적인 요청이 더 좋은 결과를 만들어요.

❌ 별로인 예시:
"예쁘게 만들어줘"

✅ 좋은 예시:
"미니멀한 디자인으로, 배경은 흰색, 포인트 색상은 파란색,
여백은 넉넉하게, 폰트는 깔끔한 것으로 해주세요"

팁 3: 참고할 만한 예시를 알려주세요

원하는 느낌이 있다면, 비슷한 사이트를 언급해주세요.

"Apple 홈페이지 같은 미니멀한 느낌으로 만들어주세요"
"노션 같은 깔끔한 레이아웃으로 해주세요"

팁 4: 한 번에 하나씩 요청하세요

처음부터 모든 걸 한꺼번에 요청하면, 결과가 뒤죽박죽이 될 수 있어요.

❌ 한 번에 너무 많이:
"자기소개, 경력, 프로젝트, 연락처, 블로그, 다크모드,
애니메이션, 반응형까지 다 넣어서 만들어줘"

✅ 단계별로:
1회차: "자기소개와 경력 섹션이 있는 기본 페이지를 만들어줘"
2회차: "프로젝트 섹션과 연락처 섹션을 추가해줘"
3회차: "모바일에서도 잘 보이게 반응형으로 만들어줘"

팁 5: 마음에 안 들면 솔직하게 말해주세요

Claude는 감정이 상하지 않아요. 솔직하게 피드백하는 게 제일 좋아요.

"지금 디자인이 좀 올드한 느낌이에요.
2024년에 유행하는 깔끔한 스타일로 다시 만들어주세요."

"색상이 너무 강렬해요. 파스텔톤으로 부드럽게 바꿔주세요."

"전체적으로 좋은데, 제목 폰트만 좀 더 굵게 해주세요."

이 다섯 가지만 기억해도, Claude와의 대화가 훨씬 수월해질 거예요.

HTML 파일이란? — Claude가 만든 코드를 내 컴퓨터에 저장하기

여기서 잠깐, “HTML 파일”이라는 것에 대해 알아볼게요. 겁먹지 마세요, 아주 간단한 개념이에요.

HTML은 웹페이지를 만드는 언어예요. 여러분이 매일 보는 모든 웹사이트는 HTML로 만들어져 있어요. 그리고 HTML 파일은 결국 텍스트 파일이에요. 메모장으로도 열 수 있는 그냥 텍스트 파일이요.

중요한 건, 여러분이 HTML을 알 필요는 없다는 거예요. Claude가 HTML 코드를 만들어주고, 여러분은 그걸 복사해서 파일로 저장하기만 하면 돼요.

코드 복사하기

Artifacts에서 만족스러운 결과가 나왔다면, 이제 코드를 복사할 차례예요.

Artifacts 미리보기 위쪽에 있는 “Copy” 버튼 (또는 코드 아이콘)을 클릭해주세요

[스크린샷: Artifacts에서 코드 복사 버튼 위치]

또는 Claude의 답변에서 코드 블록을 찾아 우측 상단의 복사 버튼을 클릭해도 돼요

[스크린샷: 코드 블록의 복사 버튼]

코드가 클립보드에 복사됐어요!

파일로 저장하기

이제 복사한 코드를 파일로 저장할게요.

방법 1: 메모장 사용 (윈도우)

바탕화면에 “내-포트폴리오” 라는 이름의 새 폴더를 만들어주세요
메모장을 열어주세요 (시작 → 메모장 검색)
복사한 코드를 붙여넣기 해주세요 (Ctrl + V)
“파일 → 다른 이름으로 저장”을 클릭해주세요
저장 위치를 “내-포트폴리오” 폴더로 선택해주세요
파일 이름을 index.html 이라고 입력해주세요
“파일 형식”을 “모든 파일 (.)” 로 바꿔주세요 — 이 부분이 중요해요!
인코딩을 “UTF-8”로 선택해주세요
“저장” 클릭!

[스크린샷: 메모장에서 “다른 이름으로 저장” 화면 — 파일 이름, 파일 형식, 인코딩 설정이 보이는 모습]

방법 2: VS Code 사용

VS Code를 열어주세요
“File → New File”을 클릭해주세요
복사한 코드를 붙여넣기 해주세요
“File → Save As”를 클릭해주세요
“내-포트폴리오” 폴더에 index.html 이라는 이름으로 저장해주세요

[스크린샷: VS Code에서 index.html 파일이 저장된 모습]

💡 트러블슈팅 팁: 파일 이름이 index.html.txt가 돼버렸어요!

메모장에서 저장할 때 “파일 형식”을 “텍스트 문서 (*.txt)“로 두면, 파일 이름 뒤에 .txt가 자동으로 붙어요. 그러면 웹페이지로 인식이 안 돼서 난감해질 수 있어요.

해결 방법: - 저장할 때 “파일 형식”을 반드시 “모든 파일 (.)”로 바꿔주세요 - 이미 저장했다면, 파일 이름을 바꿔서 .txt 부분을 지워주세요 - “확장자를 변경하시겠습니까?” 물어보면 “예”를 눌러주세요

브라우저에서 내 페이지 열어보기

파일이 저장됐으면, 이제 내 눈으로 직접 확인해볼 차례예요.

정말 간단해요. index.html 파일을 더블클릭하면 돼요.

[스크린샷: 파일 탐색기에서 index.html 파일을 더블클릭하는 모습]

웹 브라우저(크롬, 엣지 등)가 자동으로 열리면서, 여러분이 만든 자기소개 페이지가 나타나요!

[스크린샷: 브라우저에서 열린 자기소개 페이지 — 주소창에 file:/// 경로가 보이는 모습]

주소창을 보면 file:///C:/Users/... 같은 경로가 보일 거예요. 이건 아직 인터넷에 올린 게 아니라 내 컴퓨터에서만 보이는 거예요. 인터넷에 올리는 건 5장에서 할 거니까, 지금은 “내 컴퓨터에서 잘 보이는지”만 확인하면 돼요.

혹시 파일을 더블클릭했는데 메모장이나 다른 프로그램이 열린다면, 파일을 우클릭 → 연결 프로그램 → Chrome(또는 원하는 브라우저)을 선택해주세요.

실습: 나만의 자기소개 페이지 만들기

자, 이제 직접 해볼 시간이에요! 아래 템플릿을 여러분의 정보로 바꿔서 Claude에게 보내보세요.

개인 자기소개 웹페이지를 만들어주세요. 한 페이지짜리 HTML 파일로요.

[기본 정보]
- 이름: (여러분의 이름)
- 직업/직함: (여러분의 직업)
- 한 줄 소개: (여러분을 소개하는 한 문장)
- 이메일: (연락처)

[디자인 요청]
- 깔끔하고 모던한 디자인
- 배경색: 흰색 또는 아주 연한 회색
- 포인트 색상: (좋아하는 색상)
- 전체적으로 여백이 넉넉한 편안한 느낌

[포함할 섹션]
1. 상단: 이름과 직함이 크게 보이는 히어로 섹션
2. 중간: 간단한 자기소개 문단
3. 하단: 이메일 연락처

모바일에서도 잘 보이게 반응형으로 만들어주세요.

Claude가 결과를 보여주면:

Artifacts에서 미리보기를 확인해보세요
마음에 안 드는 부분이 있으면 수정을 요청해보세요
만족스러우면 코드를 복사해서 index.html로 저장해주세요
파일을 더블클릭해서 브라우저에서 열어보세요

어떠세요? 내 이름이 적힌 웹페이지가 브라우저에 떠 있는 게 보이시나요? 조금 뿌듯하지 않으세요?

수정은 몇 번이든 할 수 있어요

혹시 “한 번에 완벽하게 만들어야 하나?”라는 부담이 드시나요? 전혀 그럴 필요 없어요.

Claude와의 대화는 계속 이어져요. “이 부분 좀 바꿔줘”라고 하면 바꿔주고, “아, 아까 게 나았어”라고 하면 되돌려줘요. 마치 디자이너와 미팅하면서 시안을 주고받는 것과 같아요. 다만 이 디자이너는 24시간 일하고, 불평도 안 해요.

실제로 이런 식으로 여러 번 수정하게 될 거예요:

"제목 크기를 좀 더 키워주세요"
→ Claude가 수정

"아, 너무 커졌네요. 중간 정도로 해주세요"
→ Claude가 다시 수정

"좋아요! 그런데 제목 아래에 얇은 줄 하나 넣어줄 수 있어요?"
→ Claude가 추가

"완벽해요!"

이런 대화를 반복하면서 점점 마음에 드는 페이지가 완성돼요. 이게 바이브 코딩의 매력이에요. 코드를 몰라도, 내가 원하는 결과를 말로 설명하면 되니까요.

💡 트러블슈팅 팁: Claude의 답변이 너무 길어서 코드를 못 찾겠어요

Claude가 설명을 길게 하면서 코드를 보여줄 때가 있어요. 코드 블록은 보통 회색 배경에 모노스페이스 폰트(고정폭 글자)로 표시돼요. 코드 블록 우측 상단에 “Copy” 버튼이 있으니 그걸 클릭하면 돼요.

또는 Claude에게 이렇게 말해보세요:
설명은 짧게 하고, 전체 HTML 코드만 보여주세요.

여기까지의 결과물

이번 장에서 만든 것들을 정리해볼게요.

항목	상태
Claude에게 웹페이지 요청하기	완료
Artifacts에서 미리보기 확인	완료
대화로 디자인 수정해보기	완료
프롬프트 잘 쓰는 팁 5가지	학습
코드 복사 → index.html 저장	완료
브라우저에서 내 페이지 열기	완료

내 컴퓨터에 index.html 파일이 있고, 브라우저에서 자기소개 페이지를 볼 수 있는 상태 — 이게 이번 장의 결과물이에요.

관통 프로젝트 A 진행도: [====——] 40%

마무리

첫 웹페이지를 만들어보셨어요. 어떠셨나요? 생각보다 별거 아니라고 느끼셨을 수도 있고, “오, 진짜 되네!”라고 감탄하셨을 수도 있어요. 어느 쪽이든, 중요한 한 걸음을 내디딘 거예요.

지금 만든 페이지는 아직 기본적인 자기소개 수준이에요. 다음 장에서는 이 페이지를 본격적인 포트폴리오로 발전시킬 거예요. About Me, 경력, 프로젝트, 연락처까지 — 다섯 개 섹션이 갖춰진 제대로 된 포트폴리오 사이트를 완성할 거예요. 그리고 모바일에서도 예쁘게 보이도록 만들어볼 거예요.

여러분의 이야기를 채워 넣는 시간, 기대되지 않으세요?

4장. 포트폴리오 완성하기 — 내 이야기를 채워 넣기

3장에서 만든 자기소개 페이지, 브라우저에서 잘 보이시나요?

아직은 이름과 한 줄 소개 정도만 있는 기본적인 페이지일 거예요. 누군가 이 페이지를 본다면 “아, 이런 사람이구나” 정도는 알겠지만, “와, 이 사람 좀 멋진데?” 하는 느낌까지는 주기 어렵겠죠. 찜찜한 기분이 드시나요? 당연해요. 포트폴리오라고 하기엔 아직 내용이 부족하니까요.

이번 장에서는 그 기본 페이지를 제대로 된 포트폴리오로 발전시킬 거예요. About Me, Skills, 경력, 프로젝트, 연락처 — 다섯 개 섹션을 채워 넣고, 모바일에서도 예쁘게 보이도록 만들 거예요. 이번 장이 끝나면 “이 정도면 사람들에게 보여줘도 되겠다!” 하는 페이지가 완성돼요.

포트폴리오 사이트에는 뭐가 있어야 할까요?

본격적으로 만들기 전에, 좋은 포트폴리오 사이트에는 어떤 섹션이 있는지 살펴볼게요. 물론 정해진 규칙은 없지만, 대부분의 포트폴리오 사이트는 이런 구조를 따라요.

순서	섹션 이름	역할
1	히어로(Hero)	가장 먼저 보이는 영역. 이름, 직함, 한 줄 소개
2	About Me	나를 좀 더 깊이 소개하는 글
3	Skills	보유 기술, 역량, 도구
4	Projects	주요 프로젝트나 작업물
5	Contact	연락처와 소셜 미디어 링크

“히어로”라는 이름이 좀 낯설죠? 웹 디자인에서는 페이지 맨 위, 방문자가 제일 처음 보는 큰 영역을 “히어로 섹션”이라고 불러요. 영화의 첫 장면처럼 강렬한 첫인상을 주는 역할이에요.

3장에서 만든 페이지에 이미 기본적인 히어로와 소개가 들어가 있을 거예요. 이제 나머지 섹션을 하나씩 추가해볼게요.

Claude에게 섹션 추가 요청하기

3장의 팁에서 “한 번에 하나씩 요청하세요”라고 말씀드렸죠? 그 원칙을 지키면서, 단계별로 섹션을 추가해볼게요.

1단계: About Me 섹션 추가하기

3장에서 만든 대화를 이어서 진행해주세요. 새 대화를 시작하면 이전 코드가 사라지니까, 같은 대화에서 계속하는 편이 나아요.

좋아요! 이제 About Me 섹션을 추가해주세요.

이런 내용을 넣어주세요:
"안녕하세요, 저는 5년간 디지털 마케팅 분야에서 일해온 홍길동입니다.
브랜드 캠페인 기획부터 데이터 분석까지, 마케팅의 A부터 Z까지 경험했어요.
특히 데이터를 기반으로 고객의 마음을 읽는 일에 열정을 가지고 있습니다.
새로운 도전과 배움을 좋아하며, 함께 성장하는 팀을 만드는 것이 목표예요."

자연스럽고 친근한 느낌으로 작성해주세요.
왼쪽에 프로필 사진 자리를 넣어주세요 (아직 사진은 없어서 placeholder로요).

[스크린샷: About Me 섹션이 추가된 Artifacts 미리보기 — 왼쪽에 프로필 이미지 자리, 오른쪽에 소개 글]

Claude가 프로필 사진 자리를 만들어줄 거예요. 아직은 기본 이미지(placeholder)가 들어가 있을 텐데, 나중에 진짜 사진으로 바꾸는 방법은 곧 알려드릴게요.

2단계: Skills 섹션 추가하기

다음으로 Skills 섹션을 추가해주세요.

제 보유 스킬은 이래요:
- Google Analytics (상급)
- SNS 마케팅 (상급)
- 콘텐츠 기획 (상급)
- 데이터 분석 (중급)
- Figma (중급)
- HTML/CSS 기초 (초급)

각 스킬을 카드 형태로 보여주되, 숙련도에 따라 
프로그레스 바(진행률 막대)를 넣어주세요.

[스크린샷: Skills 섹션이 추가된 Artifacts 미리보기 — 카드형 스킬 목록과 프로그레스 바]

3단계: Projects 섹션 추가하기

Projects 섹션도 추가해주세요.

프로젝트 3개를 넣을 거예요:

1. "브랜드 X 리뉴얼 캠페인"
   - 설명: SNS 채널 리뉴얼을 통해 팔로워 200% 성장 달성
   - 역할: 캠페인 총괄 기획

2. "데이터 기반 고객 세분화 프로젝트"
   - 설명: 고객 행동 데이터 분석으로 맞춤형 마케팅 전략 수립
   - 역할: 데이터 분석 및 전략 기획

3. "온라인 쇼핑몰 런칭 마케팅"
   - 설명: 신규 쇼핑몰 런칭 3개월 만에 월 매출 1억 달성
   - 역할: 퍼포먼스 마케팅 담당

카드 형태로, 호버하면(마우스를 올리면) 살짝 떠오르는 
효과를 넣어주세요.

[스크린샷: Projects 섹션이 추가된 Artifacts 미리보기 — 3개의 프로젝트 카드]

4단계: Contact 섹션 추가하기

마지막으로 Contact 섹션을 추가해주세요.

- 이메일: gildong@email.com
- LinkedIn: linkedin.com/in/gildong
- GitHub: github.com/gildong

깔끔한 아이콘과 함께 보여주세요.
페이지 맨 아래에 간단한 푸터(하단 영역)도 넣어주세요.
"© 2026 홍길동. All rights reserved." 같은 문구로요.

[스크린샷: Contact 섹션과 푸터가 추가된 완성된 페이지]

여기까지 하면 다섯 개 섹션이 모두 들어간 포트폴리오 페이지가 완성돼요! Artifacts에서 위아래로 스크롤하면서 전체를 확인해보세요.

내 사진 넣기

포트폴리오에 사진이 있으면 훨씬 개인적이고 신뢰감 있는 느낌이 들어요. About Me 섹션에 프로필 사진을 넣어볼게요.

사진 파일 준비하기

먼저 사용할 사진을 준비해주세요. 정장 사진일 필요는 없어요. 밝은 배경에서 찍은 깔끔한 사진이면 충분해요.

사진 파일을 “내-포트폴리오” 폴더에 넣어주세요
파일 이름을 간단하게 바꿔주세요 — 예를 들어 profile.jpg

[스크린샷: 파일 탐색기에서 내-포트폴리오 폴더 안에 index.html과 profile.jpg가 함께 있는 모습]

💡 트러블슈팅 팁: 사진 파일 이름에 한글이나 공백이 있으면 안 되나요?

되긴 하는데, 나중에 문제가 생길 수 있어요. 파일 이름은 영어, 숫자, 하이픈(-)만 사용하는 편이 안전해요. - 좋은 예: profile.jpg, my-photo.png - 피하는 게 나은 예: 내 사진.jpg, 프로필 (최종).png

Claude에게 사진 경로 알려주기

About Me 섹션의 프로필 이미지를 실제 사진으로 바꿔주세요.
사진 파일 이름은 "profile.jpg"이고, index.html과 같은 폴더에 있어요.
사진이 동그란 모양으로 보이게 해주세요.
크기는 가로 200px 정도로요.

Claude가 코드를 수정해줄 거예요. 코드를 다시 복사해서 index.html 파일을 덮어쓰기 저장하고, 브라우저에서 새로고침(F5 또는 Ctrl+R)하면 사진이 나타나요.

[스크린샷: 프로필 사진이 적용된 About Me 섹션]

혹시 사진이 안 보이고 깨진 이미지 아이콘이 뜬다면, 두 가지를 확인해보세요: - profile.jpg 파일이 index.html과 같은 폴더에 있는지 - 파일 이름이 코드에 적힌 것과 정확히 같은지 (대소문자도 구분해요!)

색상과 폰트 다듬기

다섯 개 섹션이 모두 들어갔으니, 이제 전체적인 분위기를 다듬어볼 차례예요. 지금 상태로도 괜찮지만, 나만의 개성을 담으면 훨씬 좋겠죠?

색상 바꾸기

전체 색상 톤을 바꾸고 싶어요.

- 주요 색상(포인트 컬러): 딥 네이비 (#1a365d)
- 보조 색상: 부드러운 골드 (#d4a843)
- 배경: 아주 연한 회색 (#f8f9fa)
- 텍스트: 진한 회색 (#333333)

전문적이면서도 따뜻한 느낌을 주고 싶어요.

색상 코드(#1a365d 같은)를 모르셔도 괜찮아요. “진한 파란색”, “부드러운 금색”처럼 말로 설명해도 Claude가 적절한 색상을 골라줘요. 하지만 혹시 특정 색상이 있다면 코드를 알려주는 편이 정확해요. 네이버에서 “색상 코드 표”를 검색하면 쉽게 찾을 수 있어요.

폰트 바꾸기

폰트를 좀 더 세련된 것으로 바꿔주세요.
제목은 굵고 임팩트 있는 폰트, 본문은 읽기 편한 폰트로요.
한글이 깨지지 않는 Google Fonts를 사용해주세요.

[스크린샷: 색상과 폰트가 변경된 포트폴리오 — 이전과 비교해서 훨씬 세련된 느낌]

어떠세요? 색상과 폰트만 바꿨을 뿐인데, 느낌이 확 달라졌죠?

모바일에서도 예쁘게 — 반응형 디자인

여기서 한 가지 더 신경 쓸 부분이 있어요. 모바일이에요.

요즘 웹사이트 방문자의 절반 이상이 스마트폰으로 접속해요. 내 포트폴리오를 누군가에게 링크로 공유했을 때, 상대방이 폰으로 열어볼 확률이 높다는 뜻이에요. 그런데 데스크톱용으로만 만들어진 사이트를 폰으로 열면… 글씨가 너무 작아서 확대해야 하고, 옆으로 스크롤해야 하고, 레이아웃이 엉망이 되는 난감한 상황이 벌어져요.

이걸 해결하는 게 반응형 디자인이에요. 쉽게 말해 “화면 크기에 따라 레이아웃이 자동으로 바뀌는 것”이에요. 큰 화면에서는 옆으로 나란히 보이던 것들이, 작은 화면에서는 위아래로 쌓여서 보이는 거죠.

Claude에게 이렇게 요청해보세요:

지금 만든 포트폴리오를 모바일에서도 잘 보이게 만들어주세요.

- 모바일에서는 2열 레이아웃이 1열로 바뀌도록
- 글씨 크기가 모바일에서도 읽기 편하도록
- 프로필 사진이 모바일에서도 적절한 크기로 보이도록
- 네비게이션(메뉴)이 있다면 모바일용 햄버거 메뉴로 바뀌도록

모바일 미리보기 확인하기

“모바일에서 어떻게 보이는지 폰 없이도 확인할 수 있나요?” 네, 가능해요!

방법 1: Artifacts에서 확인

Claude의 Artifacts 미리보기 창 크기를 마우스로 줄여보세요. 창이 좁아지면 모바일 화면처럼 레이아웃이 바뀌는 걸 볼 수 있어요.

방법 2: 브라우저 개발자 도구

이 방법이 좀 더 정확해요. 겁먹지 마세요, 아주 간단해요!

브라우저에서 index.html을 열어주세요
F12 키를 눌러주세요 (또는 Ctrl + Shift + I)
왼쪽 상단에 스마트폰+태블릿 모양 아이콘이 보여요. 그걸 클릭해주세요

[스크린샷: 크롬 개발자 도구의 모바일 미리보기 모드 — 반응형 디자인 확인]

상단에서 기기를 선택할 수 있어요 (iPhone, Galaxy 등)
모바일에서 어떻게 보이는지 바로 확인할 수 있어요!

다 확인했으면 F12를 다시 눌러서 개발자 도구를 닫으면 돼요.

💡 트러블슈팅 팁: 모바일에서 레이아웃이 깨져요!

반응형 디자인을 요청했는데도 모바일에서 이상하게 보인다면, Claude에게 구체적으로 알려주세요:
모바일에서 보면 Skills 카드가 옆으로 삐져나가요.
모바일 화면(가로 375px)에서 카드가 한 줄에 하나씩 세로로 
쌓이도록 수정해주세요.
“어디가 어떻게 이상한지” 구체적으로 말할수록 Claude가 정확하게 고쳐줘요.

전체 코드 한 번에 받기

여기까지 여러 번 수정을 요청했으니, Claude에게 최종 코드를 한 번에 정리해서 달라고 요청하는 편이 깔끔해요.

지금까지 만든 포트폴리오 페이지의 최종 완성 코드를 
전체 HTML 파일로 한 번에 보여주세요.
모든 섹션(히어로, About Me, Skills, Projects, Contact, 푸터)이 
다 포함된 완전한 코드로요.

Claude가 보여주는 전체 코드를 복사해서, index.html 파일을 덮어쓰기 저장해주세요. 브라우저에서 새로고침하면 완성된 포트폴리오가 보일 거예요.

[스크린샷: 완성된 포트폴리오 전체 모습 — 히어로부터 푸터까지 한 눈에 보이는 스크롤 캡처]

실습: 내 정보로 완성하기

지금까지 예시 데이터(“홍길동” 등)로 만들어봤다면, 이제 여러분의 진짜 정보로 바꿀 차례예요.

Claude에게 이렇게 요청해보세요:

포트폴리오 내용을 아래 정보로 바꿔주세요.

[기본 정보]
- 이름: (진짜 이름)
- 직함: (진짜 직함)
- 한 줄 소개: (진짜 소개)

[About Me]
(자기소개 2~3문단)

[Skills]
(보유 스킬 목록과 숙련도)

[Projects]
(주요 프로젝트 2~4개, 각각 제목/설명/역할)

[Contact]
- 이메일: (진짜 이메일)
- LinkedIn: (있다면)
- 기타 SNS: (있다면)

이력서나 경력기술서가 있다면 그 내용을 복사해서 Claude에게 보내도 좋아요. Claude가 알아서 포트폴리오에 맞게 정리해줄 거예요.

아래 내용은 제 이력서에서 가져온 거예요.
이걸 포트폴리오 사이트에 맞게 다듬어서 넣어주세요.
너무 딱딱하지 않게, 친근한 톤으로 바꿔주세요.

(이력서 내용 붙여넣기)

💡 트러블슈팅 팁: 이미지가 안 보여요!

코드를 새로 받아서 저장했는데 프로필 사진이 안 보이는 경우가 있어요. 보통 두 가지 원인이에요:

파일 경로 문제: index.html과 profile.jpg가 같은 폴더에 있는지 확인해주세요

파일 이름 불일치: 코드 안의 이미지 파일 이름과 실제 파일 이름이 정확히 같은지 확인해주세요. Profile.jpg와 profile.jpg는 다른 파일이에요 (대소문자 구분!)

Claude에게 이렇게 물어보면 도움이 돼요:
이미지 파일 이름이 "profile.jpg"이고 index.html과 
같은 폴더에 있어요. 이미지 경로를 확인해서 수정해주세요.

여기까지의 결과물

이번 장에서 완성한 것들을 정리해볼게요.

항목	상태
히어로(Hero) 섹션	이름, 직함, 한 줄 소개가 있는 상단 영역
About Me 섹션	자기소개 글 + 프로필 사진
Skills 섹션	보유 스킬 목록 + 숙련도 표시
Projects 섹션	주요 프로젝트 카드
Contact 섹션	이메일, SNS 링크 + 푸터
반응형 디자인	모바일에서도 잘 보이도록 완성
색상/폰트 커스텀	나만의 분위기로 다듬기 완료

5개 섹션이 갖춰진 완성된 포트폴리오 HTML 파일이 내 컴퓨터에 있는 상태 — 이게 이번 장의 결과물이에요.

관통 프로젝트 A 진행도: [=======—] 70%

마무리

어떠세요? 3장의 간단한 자기소개 페이지와 비교하면 완전히 다른 수준의 페이지가 됐죠? 히어로, About Me, Skills, Projects, Contact까지 — 이 정도면 어디 내놓아도 꽤 괜찮은 포트폴리오예요.

하지만 아직 한 가지 아쉬운 점이 있어요. 이 페이지는 지금 여러분의 컴퓨터에서만 볼 수 있어요. 파일을 더블클릭해야만 열리고, 다른 사람은 볼 수 없죠. 포트폴리오의 진짜 가치는 세상에 공개할 때 나오는 거잖아요?

다음 장에서는 이 포트폴리오를 인터넷에 올려서 전 세계 누구나 볼 수 있게 만들 거예요. 여러분의이름.github.io라는 나만의 주소를 갖게 되는 순간, 이 책에서 두 번째 “와!” 하는 모먼트가 될 거예요. GitHub Pages라는 무료 서비스를 사용할 건데, 생각보다 정말 간단하니까 기대해주세요.

내 포트폴리오가 진짜 웹사이트가 되는 순간, 곧 만나요!

5장. 세상에 공개하기 — GitHub Pages로 배포

내 컴퓨터에서만 보이던 포트폴리오, 혹시 이런 생각 해보셨나요? “이걸 친구한테 보여주고 싶은데, 내 노트북을 들고 가야 하나?” 지금까지 만든 HTML 파일은 여러분의 컴퓨터 안에만 존재해요. 브라우저에서 더블클릭하면 잘 보이지만, 다른 사람은 절대 볼 수 없는 상태죠. 이번 장에서 그 벽을 허물어볼게요. 파일 하나를 인터넷에 올리는 순간, 전 세계 누구나 username.github.io라는 주소로 여러분의 포트폴리오를 구경할 수 있게 됩니다.

그리고 솔직히 말하면, 그 순간이 이 책에서 가장 짜릿한 순간이에요.

GitHub에 새 레포지토리 만들기

“레포지토리”라는 단어가 낯설 수 있어요. 쉽게 말하면 인터넷에 있는 내 폴더예요. 내 컴퓨터에 “포트폴리오”라는 폴더를 만들어서 파일을 넣어두듯이, GitHub에도 폴더를 하나 만드는 거예요. 다만 이 폴더는 인터넷에 있으니까 다른 사람도 볼 수 있다는 차이가 있죠.

레포지토리 이름이 중요해요

GitHub Pages에서 개인 사이트를 만들려면 레포지토리 이름을 반드시 특별한 형식으로 지어야 해요.

여러분의GitHub아이디.github.io

예를 들어 GitHub 아이디가 minjee-kim이라면, 레포지토리 이름은 minjee-kim.github.io가 되어야 해요. 이 이름이 곧 여러분의 사이트 주소가 됩니다. 멋지지 않나요?

레포지토리 만드는 단계

GitHub(github.com)에 로그인해요
오른쪽 위의 + 버튼을 클릭하고 New repository를 선택해요
Repository name에 여러분의아이디.github.io를 입력해요
Public이 선택되어 있는지 확인해요 (GitHub Pages는 Public 레포지토리에서만 무료로 동작해요)
“Add a README file” 체크박스에 체크해요
Create repository 버튼을 클릭해요

[스크린샷: GitHub 새 레포지토리 생성 화면 — Repository name에 username.github.io 입력된 모습]

💡 트러블슈팅 팁: 레포지토리 이름 오류

“Repository name already exists”라는 메시지가 보인다면, 이미 같은 이름의 레포지토리가 있다는 뜻이에요. GitHub에서 기존 레포지토리를 삭제하거나, 이름이 정확한지 확인해보세요. 아이디에 대문자가 섞여 있다면 모두 소문자로 입력하는 편이 나아요. GitHub은 대소문자를 구분하기 때문에 찜찜한 문제가 생길 수 있거든요.

GitHub Desktop으로 내 컴퓨터와 연결하기

레포지토리를 만들었으니, 이제 내 컴퓨터와 연결할 차례예요. 2장에서 설치해둔 GitHub Desktop을 열어볼게요.

클론(Clone)이란?

“클론”이라는 표현이 거창하게 들리지만, 사실 인터넷에 있는 폴더를 내 컴퓨터로 복사해오는 것이에요. 이렇게 연결해두면 나중에 파일을 수정하고 다시 올리는 게 아주 쉬워져요.

GitHub Desktop을 열어요
상단 메뉴에서 File → Clone Repository를 선택해요
방금 만든 여러분의아이디.github.io 레포지토리가 목록에 보일 거예요. 선택해요
Local Path에서 파일을 저장할 위치를 정해요 (바탕화면이나 문서 폴더 추천)
Clone 버튼을 클릭해요

[스크린샷: GitHub Desktop 클론 화면 — 레포지토리 선택 및 Local Path 설정 모습]

몇 초만 기다리면 내 컴퓨터에 폴더가 하나 생겨요. 이 폴더 안에는 아까 자동으로 만들어진 README.md 파일이 들어 있을 거예요.

Claude가 만든 코드를 파일로 저장하기

자, 이제 4장에서 완성한 포트폴리오 코드를 이 폴더에 넣어야 해요. “어디에 어떤 이름으로 저장하지?” 하고 고민되실 수 있는데, 규칙은 간단해요.

파일 이름은 반드시 `index.html`

GitHub Pages는 사이트에 접속하면 가장 먼저 index.html 파일을 찾아서 보여줘요. 그래서 파일 이름을 정확히 index.html로 저장해야 해요. portfolio.html이나 내사이트.html로 저장하면 사이트에 접속했을 때 빈 화면이 나오니까 주의하세요.

저장하는 방법

방법 1: Claude Artifacts에서 직접 복사하기

Claude 대화에서 포트폴리오 코드가 있는 Artifact를 찾아요
Artifact 오른쪽 위에 있는 복사 버튼(종이 두 장 모양)을 클릭해요
아까 클론한 폴더를 열어요
폴더 안에서 마우스 오른쪽 클릭 → 새 파일 만들기 (또는 텍스트 에디터에서 새 파일)
복사한 내용을 붙여넣기 해요
파일 이름을 index.html로 저장해요

방법 2: Claude에게 다운로드 요청하기

Claude에게 이렇게 말해보세요.

지금까지 만든 포트폴리오 코드를 다운로드할 수 있게 해주세요.

Artifact 하단에 다운로드 버튼이 나타나면 클릭해서 저장한 뒤, 파일 이름을 index.html로 바꿔주세요.

[스크린샷: 클론된 폴더 안에 index.html 파일이 들어 있는 모습]

이미지 파일도 함께 넣기

4장에서 프로필 사진이나 프로젝트 이미지를 넣었다면, 그 이미지 파일들도 같은 폴더에 넣어야 해요. HTML 코드 안에서 <img src="profile.jpg">처럼 적혀 있다면, profile.jpg 파일이 index.html과 같은 폴더에 있어야 이미지가 정상적으로 보여요.

💡 트러블슈팅 팁: 이미지가 안 보여요!

배포 후 이미지가 깨져 보인다면 십중팔구 파일 이름 문제예요. 확인해볼 점: - HTML 코드에 적힌 이름과 실제 파일 이름이 대소문자까지 완전히 같은지 확인하세요. Profile.jpg와 profile.jpg는 다른 파일로 취급될 수 있어요. - 파일 이름에 한글이나 공백이 있으면 난감한 일이 생길 수 있어요. 영어 소문자와 하이픈(-)만 사용하는 편이 나아요. - 이미지 파일이 index.html과 같은 폴더에 있는지 확인하세요.

커밋과 푸시 — 파일을 인터넷에 올리기

파일을 폴더에 저장했으니, 이제 GitHub에 올릴 차례예요. 이 과정에서 “커밋”과 “푸시”라는 단어가 나오는데, 너무 어렇게 생각하지 마세요.

커밋(Commit) = 변경 내용을 기록하는 것. “오늘 이런 걸 바꿨어요”라고 메모를 남기는 거예요.
푸시(Push) = 기록한 내용을 인터넷(GitHub)에 업로드하는 것.

쉽게 비유하면, 커밋은 택배 상자에 물건을 넣고 송장을 붙이는 것이고, 푸시는 그 상자를 택배 기사님께 넘기는 것이에요.

GitHub Desktop에서 커밋+푸시하기

GitHub Desktop을 열면, 왼쪽에 변경된 파일 목록이 보여요. index.html이 표시될 거예요.
왼쪽 하단에 Summary 입력란이 있어요. 여기에 간단한 메모를 적어요. 예: 포트폴리오 사이트 첫 업로드
Commit to main 버튼을 클릭해요 — 이게 커밋이에요!
화면 상단에 Push origin 버튼이 나타나요. 클릭해요 — 이게 푸시예요!

[스크린샷: GitHub Desktop에서 커밋 메시지 입력 후 Commit 버튼 클릭하는 모습]

[스크린샷: Push origin 버튼이 활성화된 모습]

끝이에요. 정말 이게 다예요. 클릭 몇 번으로 파일이 인터넷에 올라갔어요.

GitHub 웹사이트(github.com)에서 여러분의 레포지토리 페이지를 열어보세요. index.html 파일이 올라가 있는 게 보일 거예요. 뿌듯하지 않나요?

GitHub Pages 켜기

파일은 올렸지만, 아직 웹사이트로 보이지는 않아요. GitHub Pages를 “켜는” 마지막 단계가 남아 있어요. 다행히 클릭 세 번이면 끝나요.

GitHub 웹사이트에서 여러분의 레포지토리 페이지로 가세요
상단 탭에서 Settings를 클릭해요
왼쪽 메뉴에서 Pages를 클릭해요
Source 항목에서 Deploy from a branch를 선택해요
Branch 드롭다운에서 main을 선택하고, 옆의 폴더는 /(root)로 두세요
Save 버튼을 클릭해요

[스크린샷: GitHub Settings → Pages 설정 화면]

Save를 누르면 GitHub이 여러분의 파일을 웹사이트로 변환하는 작업을 시작해요. 보통 1~3분 정도 걸려요.

드디어! 내 사이트가 인터넷에 뜨는 순간

1~3분 정도 지났다면, 브라우저 주소창에 이렇게 입력해보세요.

https://여러분의아이디.github.io

어떤가요? 내 컴퓨터에서만 보이던 포트폴리오가 이제 인터넷에서 보여요. 스마트폰으로도 접속해보세요. 카카오톡으로 주소를 보내서 친구에게 자랑해보세요. “이거 내가 만든 사이트야!” 하고요.

이 순간의 감동은 직접 겪어봐야 알 수 있어요. 코딩을 전혀 몰랐던 사람이 인터넷에 자기만의 사이트를 올렸다는 사실, 대단한 일이에요.

[스크린샷: 브라우저에서 username.github.io로 접속한 포트폴리오 사이트 모습]

💡 트러블슈팅 팁: 사이트가 안 보여요 (404 에러)

주소를 입력했는데 “404 — There isn’t a GitHub Pages site here”라는 메시지가 나온다면, 당황하지 마세요. 흔히 있는 일이에요.

확인 체크리스트: 1. Settings → Pages에서 Source가 “Deploy from a branch”로 설정되어 있나요? 2. Branch가 “main”으로 선택되어 있나요? 3. 파일 이름이 정확히 index.html인가요? (Index.html이나 index.HTML은 안 돼요!) 4. 레포지토리 이름이 아이디.github.io 형식인가요? 5. Save를 누른 뒤 충분히 기다렸나요? 처음에는 최대 10분까지 걸릴 수 있어요.

모두 확인했는데도 안 된다면, Settings → Pages 페이지를 새로고침해보세요. “Your site is live at …” 문구가 보이면 정상이에요.

수정하고 다시 올리기 — 업데이트 사이클

한 번 배포하고 끝이 아니에요. 포트폴리오는 계속 업데이트하게 되니까요. 새 프로젝트가 생기면 추가하고, 오타를 발견하면 고치고, 디자인이 마음에 안 들면 바꾸게 돼요.

수정 사이클은 아주 단순해요.

수정 → 커밋 → 푸시 → 1~2분 기다림 → 사이트에 반영

구체적으로 해볼게요

Claude에게 이렇게 요청해보세요.

포트폴리오 사이트의 하단 푸터에 "© 2026 김민지. All rights reserved." 
문구를 추가해주세요.

Claude가 수정된 코드를 줄 거예요. 이 코드를 복사해서 내 컴퓨터의 index.html 파일에 덮어쓰기 해요.

그리고 GitHub Desktop을 열면 — 변경된 부분이 자동으로 감지돼요! 왼쪽에 수정된 파일이 표시되고, 오른쪽에는 무엇이 바뀌었는지 초록색(추가)과 빨간색(삭제)으로 보여줘요.

Summary에 푸터 문구 추가라고 메모해요
Commit to main 클릭
Push origin 클릭

1~2분 후에 사이트를 새로고침하면 변경 사항이 반영되어 있을 거예요. 이 사이클을 몸에 익혀두세요. 앞으로 계속 쓰게 돼요.

커스텀 도메인 연결하기 (선택)

username.github.io도 충분히 멋지지만, 혹시 minjee.com 같은 나만의 도메인을 갖고 싶다면 연결할 수 있어요. 이 부분은 선택 사항이니 건너뛰어도 괜찮아요.

간단한 흐름

도메인 등록 업체(예: 가비아, Namecheap 등)에서 원하는 도메인을 구매해요 (보통 연간 1~2만 원)
도메인 업체의 DNS 설정에서 GitHub Pages의 IP 주소를 연결해요
GitHub 레포지토리의 Settings → Pages → Custom domain에 구매한 도메인을 입력해요
“Enforce HTTPS” 체크박스를 켜요

자세한 설정 방법은 도메인 업체마다 조금씩 달라서, 10장에서 더 자세히 다룰게요. 지금은 “나만의 도메인도 연결할 수 있구나” 정도만 알아두면 충분해요.

마무리: 여기까지의 결과물

축하해요! 이번 장을 마치면 여러분은 이런 결과물을 갖게 됐어요.

GitHub 레포지토리: 여러분의아이디.github.io에 포트폴리오 코드가 올라가 있어요
라이브 웹사이트: https://여러분의아이디.github.io로 누구나 접속할 수 있어요
업데이트 능력: 수정 → 커밋 → 푸시 사이클을 직접 경험했어요

이것으로 프로젝트 A가 완성됐어요! 코딩을 전혀 몰랐던 여러분이 Claude와 대화해서 포트폴리오를 만들고, 인터넷에 배포하는 전 과정을 해낸 거예요. 정말 대단해요.

다음 장에서는 이 포트폴리오를 더 멋지게 업그레이드해볼게요. 다크모드, 애니메이션, 방문자 추적까지 — 프로처럼 보이는 사이트로 한 단계 끌어올려봐요.

프로젝트 A 진행도: [==========] 100% — 배포 완료!

6장. 더 멋지게 — 포트폴리오 업그레이드

여러분의 포트폴리오가 인터넷에 올라갔어요. 주소를 친구에게 보내면 “오, 이거 네가 만든 거야?” 하고 놀랄 거예요. 그런데 며칠 지나면 슬슬 이런 생각이 들지 않을까요? “다른 사람들 포트폴리오는 뭔가 더 세련된데…”

그 찜찜한 기분, 자연스러운 거예요. 기본 포트폴리오는 “내용”은 충분하지만 “인상”이 부족할 수 있거든요. 이번 장에서는 Claude에게 몇 마디만 더 해서 사이트를 프로페셔널하게 끌어올려볼게요. 다크모드, 부드러운 애니메이션, 방문자 추적까지 — 생각보다 쉬워서 놀라실 거예요.

다크모드 토글 넣기

요즘 거의 모든 앱과 웹사이트에 다크모드가 있죠. 여러분의 포트폴리오에도 넣어보면 어떨까요? 방문자가 밝은 화면과 어두운 화면을 오갈 수 있는 토글 버튼을 추가하는 거예요.

Claude에게 요청하기

Claude에게 기존 포트폴리오 코드를 보여주고 이렇게 말해보세요.

이 포트폴리오에 다크모드 토글 기능을 추가해주세요. 
오른쪽 위에 해/달 아이콘 버튼을 넣어서, 
클릭하면 밝은 모드와 어두운 모드를 전환할 수 있게 해주세요. 
방문자가 선택한 모드는 다시 방문했을 때도 유지되면 좋겠어요.

Claude가 이 요청을 받으면 CSS 변수와 JavaScript를 활용해서 다크모드를 구현해줄 거예요. 여러분이 코드를 이해할 필요는 없어요. Artifacts에서 미리보기를 확인하고, 토글 버튼을 클릭해서 잘 동작하는지만 확인하면 돼요.

[스크린샷: 라이트모드 상태의 포트폴리오]

[스크린샷: 다크모드 상태의 포트폴리오 — 토글 버튼이 달 아이콘으로 바뀐 모습]

색상이 마음에 안 들 때

다크모드의 배경이 너무 까맣거나, 글자 색이 눈에 잘 안 들어온다면 Claude에게 추가로 요청해보세요.

다크모드 배경색을 순수한 검정(#000) 대신 
짙은 회색(#1a1a2e)으로 바꿔주세요. 
눈이 덜 피로한 느낌으로 해주세요.

이런 식으로 대화하면서 마음에 드는 색상을 찾아가면 돼요. Claude는 색상 조합도 잘 제안해주니까, “세련된 다크모드 색상 조합을 추천해주세요”라고 물어보는 것도 좋은 방법이에요.

💡 트러블슈팅 팁: 다크모드에서 일부 글자가 안 보여요

다크모드를 적용하면 가끔 특정 섹션의 글자가 배경과 비슷한 색이 되어서 안 보이는 경우가 있어요. 이럴 때는 Claude에게 이렇게 말해보세요.
다크모드에서 About 섹션의 글자가 잘 안 보여요. 
모든 섹션에서 글자가 잘 읽히도록 다크모드 색상을 점검해주세요.
Claude가 전체적으로 색상 대비를 확인하고 수정해줄 거예요.

스크롤 애니메이션 추가하기

전문가가 만든 사이트를 보면, 스크롤할 때 섹션이 부드럽게 나타나는 효과가 있죠. 이런 효과 하나만 넣어도 사이트의 품질이 확 달라 보여요.

Claude에게 요청하기

포트폴리오에 스크롤 애니메이션을 추가해주세요. 
각 섹션이 화면에 나타날 때 아래에서 위로 부드럽게 
슬라이드되면서 서서히 보이는 효과로 해주세요. 
너무 빠르지 않게, 자연스러운 속도로요.

Artifacts에서 스크롤을 내려보면 섹션이 하나씩 부드럽게 등장하는 걸 확인할 수 있어요. 이 효과가 마음에 들면 그대로 쓰고, 조금 다른 느낌을 원한다면 이렇게 추가 요청해보세요.

왼쪽에서 오른쪽으로 슬라이드되는 효과도 섞어주세요. 
짝수 번째 섹션은 왼쪽에서, 홀수 번째 섹션은 오른쪽에서 
나타나게 해주세요.

💡 트러블슈팅 팁: 애니메이션이 버벅거려요

오래된 컴퓨터나 저사양 스마트폰에서 애니메이션이 끊기는 느낌이 들 수 있어요. Claude에게 이렇게 말해보세요.
애니메이션 성능을 개선해주세요. 
GPU 가속을 활용하는 방식으로 바꿔주세요.
그래도 버벅인다면, 과감하게 애니메이션을 단순하게 줄이는 편이 나아요. 사용자 경험이 부드러운 게 화려한 효과보다 중요하거든요.

프로젝트 갤러리 확장하기

포트폴리오에서 가장 중요한 섹션은 “내가 한 일”을 보여주는 프로젝트 갤러리예요. 4장에서 기본적인 프로젝트 카드를 만들었다면, 이번에는 좀 더 인상적인 갤러리로 업그레이드해볼게요.

이미지 호버 효과 추가

프로젝트 갤러리의 각 카드에 마우스를 올리면 
카드가 살짝 위로 올라가면서 그림자가 커지는 효과를 넣어주세요. 
그리고 카드 위에 마우스를 올렸을 때 
"자세히 보기" 오버레이가 나타나게 해주세요.

카테고리 필터 추가

프로젝트가 여러 개라면 카테고리별로 필터링할 수 있는 기능도 좋아요.

프로젝트 갤러리 위에 카테고리 필터 버튼을 추가해주세요. 
"전체", "디자인", "마케팅", "기획" 버튼을 누르면 
해당 카테고리의 프로젝트만 보이게 해주세요. 
전환할 때 부드러운 애니메이션도 넣어주세요.

[스크린샷: 카테고리 필터가 적용된 프로젝트 갤러리 — “전체” 탭이 활성화된 모습]

이렇게 요청하면 Claude가 JavaScript로 필터 기능을 구현해줘요. 여러분은 카테고리 이름과 각 프로젝트가 어떤 카테고리에 속하는지만 알려주면 돼요.

파비콘과 Open Graph 태그 설정하기

디테일이 프로를 만든다는 말이 있죠. 두 가지 작은 설정이 여러분의 사이트를 훨씬 프로페셔널하게 보이게 해줘요.

파비콘 — 브라우저 탭의 작은 아이콘

브라우저 탭을 보면 각 사이트마다 작은 아이콘이 있죠? 그게 파비콘이에요. 설정하지 않으면 기본 아이콘(빈 문서 모양)이 나오는데, 이게 좀 찜찜해 보일 수 있어요.

포트폴리오에 파비콘을 설정해주세요. 
제 이니셜 "MJ"가 들어간 간단한 파비콘을 
SVG로 만들어주세요. 배경은 파란색, 글자는 흰색으로요.

Claude가 SVG 코드로 파비콘을 만들어줄 거예요. 이걸 HTML의 <head> 부분에 넣으면 끝이에요. 물론 Claude가 코드를 어디에 넣어야 하는지까지 다 처리해줘요.

Open Graph 태그 — 링크 공유 시 미리보기

카카오톡이나 슬랙에서 링크를 공유하면 제목, 설명, 이미지가 미리보기로 나오죠? 이 정보를 설정하는 게 Open Graph(OG) 태그예요. 설정하지 않으면 링크를 공유했을 때 제목도 없고 이미지도 없는 밋밋한 링크만 보여요.

포트폴리오에 Open Graph 태그를 추가해주세요.
- 제목: "김민지 포트폴리오"
- 설명: "마케터 김민지의 프로젝트와 경력을 소개하는 사이트입니다"
- 이미지: 포트폴리오 메인 화면을 캡처한 이미지 URL

카카오톡에 공유했을 때 예쁘게 나오도록 해주세요.

[스크린샷: 카카오톡에서 포트폴리오 링크를 공유했을 때 미리보기가 나오는 모습]

Google Analytics 연결하기 — 누가 내 사이트에 왔을까?

사이트를 공개하고 나면 자연스럽게 궁금해져요. “누가 내 사이트에 들어왔을까?” “하루에 몇 명이나 방문할까?” Google Analytics를 연결하면 이런 정보를 무료로 확인할 수 있어요.

Google Analytics 설정 단계

Google Analytics 가입: analytics.google.com에 접속해서 Google 계정으로 로그인해요
속성 만들기: “새 속성 만들기”를 클릭하고, 사이트 이름과 URL(https://여러분의아이디.github.io)을 입력해요
측정 ID 받기: 설정이 끝나면 G-XXXXXXXXXX 형태의 측정 ID를 받아요
Claude에게 코드 삽입 요청하기:

포트폴리오 HTML에 Google Analytics 코드를 추가해주세요. 
측정 ID는 G-XXXXXXXXXX 예요.

Claude가 <head> 태그 안에 Google Analytics 스크립트를 넣어줄 거예요. 이 코드를 적용해서 커밋하고 푸시하면 끝이에요.

[스크린샷: Google Analytics 대시보드 — 실시간 방문자 수가 표시된 화면]

💡 트러블슈팅 팁: Analytics에 데이터가 안 쌓여요

Google Analytics를 연결한 직후에는 데이터가 바로 보이지 않을 수 있어요. 최대 24~48시간 정도 기다려보세요. 그래도 데이터가 없다면: - 측정 ID가 정확히 입력되었는지 확인하세요 - 브라우저의 광고 차단 확장 프로그램이 Analytics를 막고 있을 수 있어요. 시크릿 모드에서 접속해보세요 - GitHub Pages에 푸시가 제대로 됐는지 GitHub Desktop에서 확인해보세요

수정하고 푸시하면 자동 반영 — 이 사이클을 체득하기

이번 장에서 여러 가지를 수정했는데, 중요한 건 수정할 때마다 같은 과정을 반복했다는 점이에요.

1. Claude에게 수정 요청
2. 수정된 코드를 index.html에 붙여넣기
3. GitHub Desktop에서 커밋 (메모 남기기)
4. 푸시 (인터넷에 업로드)
5. 1~2분 후 사이트 확인

이 다섯 단계가 자연스럽게 느껴질 때까지 반복해보세요. 이 사이클이 몸에 붙으면 앞으로 어떤 수정이든 두려울 게 없어요. “잘못 바꾸면 어쩌지?”라는 걱정도 할 필요 없어요 — GitHub은 모든 변경 이력을 기록하니까, 예전 버전으로 돌아가는 것도 가능하거든요.

실습: 3가지 이상 업그레이드 적용 후 재배포

이번 장에서 배운 것 중 최소 3가지를 골라서 포트폴리오에 적용해보세요.

추천 조합: - 다크모드 토글 + 스크롤 애니메이션 + 파비콘 설정 - 프로젝트 갤러리 업그레이드 + Open Graph 태그 + Google Analytics

한 번에 다 적용해도 되고, 하나씩 적용할 때마다 커밋+푸시해도 돼요. 하나씩 하는 편이 문제가 생겼을 때 원인을 찾기 쉬우니까, 처음에는 하나씩 하는 걸 추천해요.

마무리: 여기까지의 결과물

이번 장을 마치면 여러분의 포트폴리오는 이렇게 달라져 있을 거예요.

다크모드 토글: 방문자가 밝은/어두운 화면을 선택할 수 있어요
스크롤 애니메이션: 섹션이 부드럽게 나타나서 전문적인 느낌이에요
프로젝트 갤러리: 호버 효과와 카테고리 필터가 추가됐어요
파비콘 + OG 태그: 브라우저 탭 아이콘과 링크 공유 미리보기가 설정됐어요
Google Analytics: 방문자 통계를 확인할 수 있어요
업데이트 자신감: 수정 → 커밋 → 푸시 사이클이 자연스러워졌어요

프로젝트 A는 여기서 마무리예요. 순수한 HTML/CSS 한 파일로 시작해서, 인터넷에 배포하고, 프로페셔널하게 업그레이드하는 전체 과정을 경험했어요.

다음 장부터는 완전히 새로운 프로젝트를 시작해요. 한 페이지짜리 포트폴리오를 넘어서, 여러 페이지로 이루어진 컨퍼런스 후기 사이트를 만들어볼 거예요. 그리고 이번에는 Claude의 더 강력한 도구인 Claude Code를 처음 만나보게 돼요. 기대되지 않나요?

프로젝트 A 진행도: [==========] 100%+ — 고급 기능 추가 완료!

7장. 여러 페이지 사이트 만들기 — Claude Code 첫 만남

여러분이 참석한 컨퍼런스가 정말 좋았다고 상상해보세요. 발표도 인상적이었고, 네트워킹도 알찼고, 사진도 많이 찍었어요. 이 경험을 기록하고 공유하고 싶은데 — 블로그 글 하나로는 뭔가 부족해요. 세션 목록도 보여주고 싶고, 발표자 프로필도 정리하고 싶고, 사진 갤러리도 만들고 싶고… 한 페이지에 다 담기에는 내용이 너무 많죠.

이럴 때 필요한 게 여러 페이지로 이루어진 사이트예요. 그리고 여러 페이지를 한 번에 만들려면, 지금까지 쓰던 Claude Artifacts보다 더 강력한 도구가 필요해요.

바로 Claude Code예요.

프로젝트 B 소개 — 이번에 만들 사이트

이번 장부터 시작하는 프로젝트 B는 컨퍼런스/이벤트 후기 사이트예요. 프로젝트 A(포트폴리오)와 비교하면 이런 차이가 있어요.

구분	프로젝트 A (포트폴리오)	프로젝트 B (이벤트 사이트)
파일 수	1개 (index.html)	여러 개 (10개 이상)
페이지	1페이지 (스크롤)	여러 페이지 (네비게이션)
기술	순수 HTML/CSS	React
도구	Claude Artifacts	Claude Code
배포	GitHub Pages	Vercel

“React”라는 단어가 나왔다고 긴장하지 마세요. 여러분이 React 코드를 직접 작성할 일은 없어요. Claude Code가 다 만들어줘요. 여러분은 “어떤 사이트를 만들고 싶은지” 말로 설명하기만 하면 돼요.

Claude Code란?

지금까지는 Claude Artifacts를 사용했어요. 대화창 옆에 미리보기가 나오고, 거기서 코드를 복사해서 파일로 저장했죠. 이 방식은 한 페이지짜리 사이트를 만들 때는 충분해요.

그런데 여러 페이지로 된 사이트를 만들려면 어떨까요? 파일이 10개, 20개가 되면 하나씩 복사해서 저장하는 게 번거로워져요. 프로젝트 구조도 복잡해지고, 파일끼리 서로 연결도 되어야 하고요. 이때 Claude Code가 빛을 발해요.

Claude Code는 여러분의 컴퓨터에서 직접 동작하는 도구예요. Claude Artifacts와의 가장 큰 차이는 이거예요.

Artifacts: 코드를 “보여주기만” 해요. 여러분이 직접 복사해서 파일로 저장해야 해요.
Claude Code: 코드를 여러분의 컴퓨터에 직접 만들어줘요. 폴더 생성, 파일 생성, 파일 수정까지 Claude가 알아서 해요.

쉽게 비유하면, Artifacts는 설계도를 보여주는 건축가이고, Claude Code는 설계와 시공을 동시에 해주는 건축가예요.

Claude Code 설치하기

Claude Code를 사용하려면 터미널(Terminal)이라는 프로그램을 써야 해요. “터미널”이라는 말만 들어도 난감해지는 분이 있을 텐데, 걱정 마세요. 아주 기본적인 것만 알면 돼요.

터미널이란?

컴퓨터에게 글자로 명령을 내리는 프로그램이에요. 보통은 마우스로 클릭해서 폴더를 열고 파일을 만들잖아요? 터미널에서는 같은 일을 글자를 입력해서 해요. 무섭게 들리지만, Claude Code를 쓸 때 필요한 명령은 딱 두세 개뿐이에요.

터미널 여는 법

Mac: Spotlight(Command + Space)에서 “터미널”을 검색해서 열어요
Windows: 시작 메뉴에서 “명령 프롬프트” 또는 “PowerShell”을 검색해서 열어요

[스크린샷: Mac 터미널 화면 — 깜빡이는 커서가 있는 검은 창]

Claude Code 설치

터미널을 열고, 아래 명령을 그대로 복사해서 붙여넣고 Enter를 눌러요.

npm install -g @anthropic-ai/claude-code

“npm”은 프로그램을 설치하는 도구예요. 이 명령은 “Claude Code를 설치해주세요”라는 뜻이에요.

설치가 끝나면 아래 명령을 입력해서 잘 설치됐는지 확인해요.

claude --version

버전 번호가 나오면 성공이에요!

💡 트러블슈팅 팁: “npm: command not found” 에러가 나요

npm이 설치되어 있지 않다는 뜻이에요. npm을 쓰려면 Node.js를 먼저 설치해야 해요.

nodejs.org에 접속해요

LTS 버전 다운로드 버튼을 클릭해요

설치 프로그램을 실행하고, 계속 “다음”을 눌러서 설치해요

터미널을 완전히 닫았다가 다시 열어요 (이게 중요해요!)

다시 npm install -g @anthropic-ai/claude-code를 입력해요

Mac에서 권한 문제가 생기면 명령 앞에 sudo를 붙여보세요: sudo npm install -g @anthropic-ai/claude-code

Claude Code에 로그인하기

설치가 끝나면 터미널에서 이렇게 입력해요.

claude

처음 실행하면 Claude 계정으로 로그인하라는 안내가 나와요. 브라우저 창이 열리면 로그인하고 권한을 승인해주세요.

[스크린샷: Claude Code 첫 실행 화면 — 로그인 안내 메시지]

프로젝트 폴더 만들기

이벤트 사이트를 만들 폴더를 먼저 준비할게요. 터미널에서 이렇게 입력해요.

mkdir my-event-site
cd my-event-site

mkdir my-event-site : “my-event-site”라는 폴더를 만들어라
cd my-event-site : 그 폴더 안으로 들어가라

이게 여러분이 터미널에서 직접 입력하는 명령의 전부예요. 이제부터는 Claude Code가 알아서 해줄 거예요.

이 폴더 안에서 Claude Code를 시작해요.

claude

Claude Code가 실행되면, 일반 Claude처럼 대화창이 나타나요. 여기에 자연어로 말하면 Claude가 코드를 만들어서 이 폴더 안에 직접 저장해줘요.

이벤트 사이트 구조 설계하기

자, 이제 Claude Code에게 사이트를 만들어달라고 요청할 차례예요. 하지만 무작정 “사이트 만들어줘”라고 하면 Claude도 뭘 만들어야 할지 난감해요. 어떤 이벤트인지, 어떤 내용을 넣고 싶은지 구체적으로 설명하는 편이 나아요.

첫 번째 프롬프트 — 전체 구조 요청

이렇게 말해보세요.

React로 컨퍼런스 후기 사이트를 만들어주세요.

이벤트 정보:
- 이벤트명: HR Exchange 2026
- 날짜: 2026년 3월 15일
- 장소: 서울 코엑스
- 주제: "AI 시대의 인재 관리"

사이트 구조:
1. 메인 페이지: 이벤트 배너, 핵심 수치(참가자 수, 세션 수 등), 하이라이트 요약
2. 세션 목록 페이지: 발표 세션 목록 (시간, 제목, 발표자)
3. 발표자 프로필 페이지: 발표자 사진, 소속, 약력
4. 사진 갤러리 페이지: 이벤트 사진 모음

디자인은 깔끔하고 모던하게, 네비게이션 바로 페이지 간 이동이 
가능하게 해주세요. 반응형으로 모바일에서도 잘 보이게 해주세요.

Claude Code가 이 요청을 받으면 놀라운 일이 벌어져요. 터미널에 진행 상황이 쭉 표시되면서, 여러 파일을 한꺼번에 만들기 시작해요. React 프로젝트를 생성하고, 페이지별 컴포넌트를 만들고, 네비게이션을 연결하고, 스타일을 입혀요.

[스크린샷: Claude Code가 파일을 생성하는 과정 — 터미널에 파일 목록이 표시되는 모습]

1~2분 정도 기다리면 프로젝트가 완성돼요. 어떤 파일들이 만들어졌는지 볼까요?

my-event-site/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── Navbar.jsx
│   │   ├── HeroSection.jsx
│   │   └── Footer.jsx
│   ├── pages/
│   │   ├── Home.jsx
│   │   ├── Sessions.jsx
│   │   ├── Speakers.jsx
│   │   └── Gallery.jsx
│   ├── App.jsx
│   └── index.js
├── package.json
└── README.md

파일이 10개가 넘죠? 이걸 하나하나 손으로 만들었다면 정말 끔찍한 일이었을 거예요. Claude Code가 몇 분 만에 전부 만들어줬어요.

로컬에서 미리보기

만들어진 사이트가 어떻게 생겼는지 확인해볼게요. Claude Code에게 이렇게 말해요.

사이트를 로컬에서 실행해서 미리보기 할 수 있게 해주세요.

Claude Code가 필요한 패키지를 설치하고 개발 서버를 실행해줄 거예요. 보통 이런 메시지가 나타나요.

Local: http://localhost:3000

브라우저에서 http://localhost:3000을 열어보세요. 여러분이 만든 이벤트 사이트가 나타나요! 상단의 네비게이션을 클릭하면 세션 목록, 발표자 프로필, 사진 갤러리 페이지로 이동할 수 있어요.

[스크린샷: 브라우저에서 localhost:3000으로 접속한 이벤트 사이트 메인 페이지]

💡 트러블슈팅 팁: “localhost:3000 접속이 안 돼요”

몇 가지 확인해보세요. 1. 터미널에서 개발 서버가 실행 중인지 확인하세요 (에러 메시지 없이 Local: http://localhost:3000이 표시되어야 해요) 2. 브라우저 주소에 http://를 빼먹지 않았는지 확인하세요 3. 다른 프로그램이 3000번 포트를 쓰고 있을 수 있어요. Claude Code에게 “다른 포트로 실행해주세요”라고 요청해보세요 4. 그래도 안 되면 터미널을 닫고 다시 Claude Code를 실행해보세요

실시간 수정 — 대화하면서 사이트 고치기

여기서부터 Claude Code의 진짜 매력이 나타나요. 미리보기를 보면서 마음에 안 드는 부분을 바로바로 고칠 수 있거든요.

메인 페이지 꾸미기

메인 페이지의 히어로 배너를 더 임팩트 있게 바꿔주세요.
배경에 그라데이션을 넣고, 이벤트 제목을 크게,
날짜와 장소를 그 아래에 배치해주세요.
참가자 500명+, 세션 20개+, 만족도 96%+ 같은
핵심 수치를 카운터 애니메이션으로 보여주세요.

Claude Code가 관련 파일을 찾아서 수정해요. 여러분은 그냥 브라우저를 새로고침하면 변경된 모습을 확인할 수 있어요. 개발 서버가 실행 중이면 파일이 바뀔 때 자동으로 새로고침되기도 해요.

세션 목록 꾸미기

세션 목록 페이지를 시간표 형태로 보여주세요.
타임라인처럼 왼쪽에 시간, 오른쪽에 세션 제목과 발표자를 
카드 형태로 배치해주세요.

세션 데이터:
- 10:00 "AI 채용의 현재와 미래" - 김지수 (AI테크 대표)
- 11:00 "데이터로 읽는 직원 경험" - 박현우 (피플앤 리서치 팀장)
- 13:00 "원격 근무 3년, 배운 것들" - 이서연 (리모트팀 HR 디렉터)
- 14:00 "성과 관리 시스템 재설계" - 최동민 (그로우업 COO)
- 15:30 "HR 담당자의 번아웃 예방법" - 정하은 (웰니스랩 상담사)

[스크린샷: 타임라인 형태의 세션 목록 페이지]

발표자 프로필 꾸미기

발표자 프로필 페이지를 카드 형태로 만들어주세요.
각 카드에 발표자 사진(일단 플레이스홀더 이미지), 이름, 소속, 
한 줄 소개를 넣어주세요. 카드를 클릭하면 
상세 약력이 펼쳐지는 아코디언 효과도 추가해주세요.

사진 갤러리 만들기

사진 갤러리 페이지를 만들어주세요.
사진을 격자(그리드) 형태로 배치하고,
사진을 클릭하면 크게 볼 수 있는 라이트박스 효과를 넣어주세요.
아직 실제 사진이 없으니 플레이스홀더 이미지를 사용해주세요.

[스크린샷: 격자 형태 사진 갤러리 — 라이트박스가 열린 상태]

이렇게 대화를 이어가면서 사이트를 완성해나가면 돼요. Artifacts에서 코드를 복사하고 붙여넣던 번거로움이 없어서 훨씬 빠르고 편해요. Claude Code가 직접 파일을 수정하니까요.

내 콘텐츠로 채우기

플레이스홀더 데이터를 실제 콘텐츠로 바꿔볼게요. 실제 컨퍼런스에 참석한 경험이 있다면 그 정보를, 없다면 가상의 이벤트를 만들어도 좋아요.

실제 사진 넣기

이벤트 사진이 있다면 프로젝트 폴더의 public 폴더 안에 넣어요. Claude Code에게 이렇게 말해요.

public/photos 폴더에 넣어둔 사진들을 갤러리 페이지에 
반영해주세요. 파일 이름은 event-01.jpg, event-02.jpg, 
event-03.jpg 이런 식이에요.

발표자 사진 넣기

public/speakers 폴더에 있는 발표자 사진을 
프로필 카드에 연결해주세요.
- speaker-kim.jpg → 김지수
- speaker-park.jpg → 박현우
- speaker-lee.jpg → 이서연

💡 트러블슈팅 팁: Claude Code가 멈추거나 에러를 내요

Claude Code를 사용하다 보면 가끔 에러가 발생하거나 응답이 멈출 수 있어요. 당황하지 말고 이렇게 해보세요.

에러 메시지가 나왔다면: 그 에러 메시지를 그대로 Claude Code에게 붙여넣으세요. “이 에러를 고쳐주세요”라고 하면 대부분 스스로 해결해요.

응답이 너무 오래 멈췄다면: Ctrl + C를 눌러서 중단하고, 다시 claude를 입력해서 시작하세요.

파일이 엉망이 됐다면: Claude Code에게 “방금 변경을 되돌려주세요”라고 말하세요.

React, 어렵지 않아요 (개념만 이해하기)

“React”라는 단어가 계속 나오니까 궁금할 수 있어요. 간단히만 설명드릴게요. 코드를 작성할 필요는 전혀 없으니 편하게 읽어주세요.

프로젝트 A에서는 HTML 파일 하나에 모든 내용을 넣었어요. 한 페이지짜리 사이트에는 이 방식이 충분하죠. 그런데 페이지가 여러 개가 되면 어떨까요? 네비게이션 바는 모든 페이지에 똑같이 들어가야 하고, 푸터도 마찬가지예요. 페이지마다 같은 코드를 반복해서 넣는 건 번거롭고 실수하기도 쉬워요.

React는 이 문제를 해결해줘요. 재사용 가능한 “조각”(컴포넌트라고 해요)을 만들어서 조립하는 방식이에요. 레고 블록을 떠올리면 이해하기 쉬워요. 네비게이션 바 블록, 히어로 섹션 블록, 카드 블록, 푸터 블록을 각각 만들어두고, 페이지마다 필요한 블록을 조합하는 거예요.

여러분이 기억할 건 딱 하나예요. React 프로젝트는 파일이 여러 개지만, Claude Code가 다 관리해준다는 것. 여러분은 “이런 페이지를 만들어줘”, “이 부분을 수정해줘”라고 말하기만 하면 돼요.

마무리: 여기까지의 결과물

이번 장을 마치면 여러분은 이런 결과물을 갖게 됐어요.

Claude Code 설치 완료: 터미널에서 Claude Code를 실행할 수 있어요
이벤트 사이트 구조: 메인 페이지, 세션 목록, 발표자 프로필, 사진 갤러리가 갖춰진 사이트
로컬 미리보기: 내 컴퓨터에서 사이트를 실행하고 확인할 수 있어요
실시간 수정 경험: Claude Code와 대화하면서 사이트를 고치는 방법을 익혔어요

아직 이 사이트는 내 컴퓨터에만 있어요. 다음 장에서 이 사이트를 인터넷에 올릴 거예요. 이번에는 GitHub Pages가 아니라 Vercel이라는 새로운 플랫폼을 사용해요. GitHub에 코드를 올리기만 하면 자동으로 사이트가 배포되는 경험 — 한 번 맛보면 돌아갈 수 없을 거예요.

프로젝트 B 진행도: [=======—] 70% — 사이트 구조 완성!

8장. Vercel로 자동 배포 — 고치면 바로 반영되는 사이트

5장에서 GitHub Pages로 포트폴리오를 배포했을 때를 떠올려보세요. 파일을 수정하고, 커밋하고, 푸시하고, 1~2분 기다리면 사이트에 반영됐죠. 그 과정도 충분히 편했어요. 그런데 한 가지 아쉬운 점이 있었어요. GitHub Pages는 순수 HTML 파일은 잘 처리하지만, React 같은 프로젝트는 바로 올릴 수 없다는 거예요. React 프로젝트는 “빌드”라는 과정을 거쳐야 하거든요.

“빌드가 뭐예요?” 걱정하지 마세요. 여러분이 직접 빌드할 필요는 없어요. Vercel이라는 서비스가 알아서 해줄 테니까요. GitHub에 코드를 올리기만 하면, Vercel이 자동으로 빌드하고 배포까지 끝내줘요. 약 90초면요.

Vercel 가입하기

Vercel 가입은 아주 간단해요. 이미 가지고 있는 GitHub 계정으로 로그인하면 돼요.

브라우저에서 vercel.com에 접속해요
Sign Up 버튼을 클릭해요
Continue with GitHub를 선택해요
GitHub 로그인 화면이 나오면 로그인하고 권한을 승인해요

[스크린샷: Vercel 가입 화면 — “Continue with GitHub” 버튼]

끝이에요. 별도의 이메일 인증이나 복잡한 가입 절차가 없어요. GitHub 계정이 있으니까 원클릭으로 완료돼요.

Vercel의 Hobby 플랜은 무료예요. 개인 프로젝트를 배포하기에 충분한 기능을 제공하니까, 유료 플랜은 전혀 신경 쓰지 않아도 돼요.

GitHub에 이벤트 사이트 올리기

Vercel에 배포하려면 먼저 7장에서 만든 이벤트 사이트를 GitHub에 올려야 해요. 이번에는 5장과 조금 다른 방식으로 해볼게요. Claude Code를 사용하면 터미널에서 바로 GitHub에 올릴 수 있어요.

방법 1: Claude Code에게 요청하기

Claude Code 대화창에서 이렇게 말해보세요.

이 프로젝트를 GitHub에 새 레포지토리로 올려주세요. 
레포지토리 이름은 "hr-exchange-2026"으로 해주세요.

Claude Code가 GitHub 레포지토리를 만들고, 코드를 올리는 과정을 안내해줄 거예요. 중간에 GitHub 인증을 요청할 수 있는데, 안내에 따라 진행하면 돼요.

방법 2: GitHub Desktop 사용하기

터미널이 아직 어색하다면 익숙한 GitHub Desktop을 사용해도 돼요.

GitHub Desktop에서 File → Add Local Repository를 선택해요
7장에서 만든 my-event-site 폴더를 선택해요
“이 폴더는 Git 레포지토리가 아닙니다. 생성하시겠습니까?” 라는 메시지가 나올 수 있어요. Create Repository를 클릭해요
상단의 Publish repository 버튼을 클릭해요
이름을 hr-exchange-2026으로 입력하고 Publish 클릭

[스크린샷: GitHub Desktop에서 Publish repository 버튼을 클릭하는 모습]

어떤 방법을 쓰든, 결과는 같아요. GitHub에 hr-exchange-2026 레포지토리가 생기고, 이벤트 사이트 코드가 올라가 있을 거예요.

Vercel에서 배포하기 — Import, Deploy, 끝!

이제 진짜 배포할 차례예요. 놀라울 정도로 간단해요.

단계별 가이드

Vercel 대시보드에 로그인해요 (vercel.com)
Add New → Project를 클릭해요
Import Git Repository 화면이 나타나요. GitHub과 연결되어 있으니 여러분의 레포지토리 목록이 보여요
hr-exchange-2026 옆의 Import 버튼을 클릭해요
Configure Project 화면이 나타나요. 대부분 자동으로 설정되어 있어요
- Framework Preset: Create React App 또는 Vite가 자동 감지될 거예요
- 다른 설정은 건드리지 않아도 돼요
Deploy 버튼을 클릭해요

[스크린샷: Vercel Import 화면 — hr-exchange-2026 레포지토리를 선택하는 모습]

[스크린샷: Vercel Configure Project 화면 — Deploy 버튼]

Deploy를 누르면 Vercel이 일하기 시작해요. 화면에 빌드 진행 상황이 실시간으로 표시돼요. 로그가 쭉 올라가면서… 약 60~90초 후에 축하 메시지가 나타나요!

[스크린샷: Vercel 배포 완료 화면 — “Congratulations!” 메시지와 사이트 미리보기]

내 사이트 주소 확인하기

배포가 완료되면 Vercel이 자동으로 주소를 만들어줘요.

https://hr-exchange-2026.vercel.app

이 주소를 클릭해보세요. 7장에서 localhost:3000에서만 보이던 이벤트 사이트가, 이제 인터넷에서 누구나 볼 수 있어요!

스마트폰으로도 접속해보세요. Vercel은 전 세계 여러 곳에 서버를 두고 있어서, 어디서 접속하든 빠르게 로딩돼요.

💡 트러블슈팅 팁: 배포 실패 (빌드 에러)

Deploy를 눌렀는데 빌드가 실패하는 경우가 있어요. 빨간색 에러 메시지가 나타나면 당황스럽지만, 대부분 해결할 수 있어요.

흔한 원인과 해결법: 1. “Module not found” 에러: 필요한 패키지가 설치되지 않은 거예요. Claude Code에게 에러 메시지를 보여주고 “이 에러를 고쳐주세요”라고 요청하세요. 2. “Build failed” 에러: 코드에 문법 오류가 있을 수 있어요. 역시 Claude Code에게 에러 로그를 보여주세요. 3. 에러 로그를 보는 법: Vercel 대시보드에서 해당 배포를 클릭하면 Building 탭에서 전체 로그를 볼 수 있어요. 이 로그를 복사해서 Claude Code에 붙여넣으면 돼요.

코드를 수정하고 GitHub에 다시 푸시하면 Vercel이 자동으로 다시 배포를 시도해요. 수동으로 뭔가를 다시 할 필요가 없어요.

자동 배포 체험하기 — 고치면 바로 반영!

Vercel의 가장 강력한 기능은 자동 배포예요. GitHub에 코드를 올리면 Vercel이 자동으로 감지해서 다시 배포해요. 직접 체험해볼게요.

수정해보기

Claude Code에서 사이트를 수정해볼게요.

메인 페이지 하단에 "다음 이벤트: HR Exchange 2027 — 2027년 3월 예정" 
이라는 안내 섹션을 추가해주세요. 눈에 잘 띄게 배경색을 넣어주세요.

Claude Code가 코드를 수정하면, 이 변경 사항을 GitHub에 올려야 해요.

푸시하기

Claude Code에게 이렇게 말해요.

변경 사항을 GitHub에 올려주세요. 
커밋 메시지는 "다음 이벤트 안내 섹션 추가"로 해주세요.

또는 GitHub Desktop에서 커밋하고 푸시해도 돼요. 어떤 방법이든 GitHub에 변경 사항이 올라가면…

자동 재배포 확인

Vercel 대시보드를 열어보세요. 새로운 배포가 자동으로 시작된 게 보일 거예요! “Building…” 이라는 상태가 표시되고, 약 90초 후에 “Ready”로 바뀌어요.

사이트에 접속하면 방금 추가한 “다음 이벤트” 섹션이 반영되어 있을 거예요.

[스크린샷: Vercel 대시보드 — 자동으로 새 배포가 진행 중인 모습]

이 흐름을 정리하면 이래요.

코드 수정 → GitHub에 푸시 → (자동) Vercel이 빌드+배포 → 90초 후 반영

여러분이 하는 건 “코드 수정”과 “GitHub에 푸시”뿐이에요. 나머지는 Vercel이 알아서 해줘요. 한번 연결해두면 끝이라는 거죠. 이걸 현업에서는 CI/CD(지속적 통합/지속적 배포)라고 부르는데, 이름만 거창하지 실제로는 방금 여러분이 한 바로 그거예요.

이벤트 사이트 콘텐츠 채우기

사이트 구조와 배포가 완료됐으니, 이제 실제 콘텐츠로 채워볼 차례예요. 7장에서 플레이스홀더로 넣어뒀던 부분을 진짜 내용으로 바꿔봐요.

실제 사진 업로드하기

이벤트 사진이 있다면 프로젝트의 public 폴더에 넣고 Claude Code에게 연결을 요청하면 돼요. 사진이 없다면 무료 스톡 이미지 사이트(Unsplash, Pexels 등)에서 이벤트 관련 사진을 받아와도 좋아요.

public/photos 폴더에 새로 넣은 사진들을 갤러리에 반영해주세요.
각 사진에 캡션도 추가해주세요:
- keynote.jpg: "기조연설 현장"
- networking.jpg: "네트워킹 타임"
- panel.jpg: "패널 토론"

후기/하이라이트 섹션 추가하기

메인 페이지에 참가자 후기 섹션을 추가해주세요.
카드 형태로 3개의 후기를 보여주세요:

1. "실무에 바로 적용할 수 있는 내용이 많았습니다" — 이모씨, 대기업 HR팀
2. "네트워킹 시간이 특히 좋았어요. 같은 고민을 하는 분들을 만나니 힘이 났습니다" — 박모씨, 스타트업 피플팀
3. "내년에도 꼭 참석하고 싶은 컨퍼런스입니다" — 김모씨, 중견기업 인사팀장

수정할 때마다 GitHub에 푸시하면 Vercel이 자동으로 반영해줘요. 이제는 이 사이클이 자연스럽게 느껴지지 않나요?

커스텀 도메인 맛보기 (선택)

Vercel이 자동으로 만들어준 hr-exchange-2026.vercel.app 주소도 나쁘지 않아요. 하지만 원한다면 프로젝트 이름을 바꾸거나, 자체 도메인을 연결할 수도 있어요.

프로젝트 이름(서브도메인) 바꾸기

Vercel 대시보드에서 프로젝트 설정에 들어가면 도메인을 변경할 수 있어요.

Vercel 대시보드 → 프로젝트 선택 → Settings 탭
Domains 섹션에서 기존 도메인 옆의 Edit 클릭
원하는 이름으로 변경 (예: my-hr-event.vercel.app)

커스텀 도메인 연결하기

자체 도메인(예: hr-exchange.com)을 연결하고 싶다면:

도메인을 구매해요 (가비아, Namecheap 등)
Vercel 대시보드 → 프로젝트 → Settings → Domains
구매한 도메인을 입력하고 Add 클릭
Vercel이 안내하는 DNS 설정을 도메인 업체에서 적용

자세한 커스텀 도메인 설정은 10장에서 다룰게요. 지금은 “원하면 내 도메인도 연결할 수 있다” 정도만 알아두면 충분해요.

GitHub Pages vs Vercel — 언제 무엇을 쓸까?

이제 두 가지 배포 플랫폼을 모두 경험했어요. 언제 무엇을 쓰면 좋을지 정리해볼게요.

기준	GitHub Pages	Vercel
적합한 프로젝트	HTML/CSS 파일 (간단한 사이트)	React, Next.js 등 빌드 필요한 프로젝트
배포 방식	파일 직접 업로드	GitHub 연동 자동 배포
빌드 지원	없음 (정적 파일만)	자동 빌드 지원
속도	보통	빠름 (CDN 최적화)
무료 도메인	`username.github.io`	`project.vercel.app`
커스텀 도메인	가능	가능
설정 난이도	매우 쉬움	쉬움

간단히 말하면: - HTML 파일 하나짜리 간단한 사이트 → GitHub Pages - React 등 빌드가 필요한 프로젝트 → Vercel - 자동 배포가 필요할 때 → Vercel

둘 다 무료이고, 둘 다 훌륭한 서비스예요. 프로젝트 성격에 맞게 골라 쓰면 돼요.

💡 트러블슈팅 팁: Vercel 무료 플랜의 제한

Vercel Hobby(무료) 플랜으로 개인 프로젝트를 운영하기에는 충분하지만, 몇 가지 알아두면 좋은 제한이 있어요. - 상업적 용도로는 사용할 수 없어요 (회사 사이트는 유료 플랜 필요) - 월 대역폭 제한이 있지만, 개인 사이트 수준에서는 걱정할 필요 없어요 - 팀 협업 기능은 유료 플랜에서 제공해요

개인 포트폴리오나 이벤트 후기 사이트를 운영하는 데는 무료 플랜이면 충분하니 걱정하지 마세요.

마무리: 여기까지의 결과물

축하해요! 프로젝트 B가 완성됐어요! 이번 장을 마치면 여러분은 이런 결과물을 갖게 됐어요.

Vercel 계정: GitHub 연동까지 완료된 상태예요
라이브 이벤트 사이트: hr-exchange-2026.vercel.app(또는 여러분이 정한 이름)으로 접속 가능해요
자동 배포 경험: 코드 수정 → 푸시 → 자동 반영 사이클을 직접 체험했어요
두 가지 배포 플랫폼: GitHub Pages와 Vercel, 상황에 맞게 선택할 수 있어요

돌이켜보면, 여러분은 이 책을 통해 두 개의 완전히 다른 사이트를 만들었어요. HTML 한 파일짜리 포트폴리오부터, React 기반의 여러 페이지 이벤트 사이트까지. 두 가지 배포 플랫폼도 경험했고요. 코딩을 전혀 몰랐던 여러분이요.

이게 바로 AI와 함께하는 개발의 힘이에요. 여러분은 무엇을 만들지 결정하고, AI가 어떻게 만들지 처리하는 거예요.

다음 장에서는 지금까지의 여정에서 마주칠 수 있는 다양한 문제 상황과 해결법을 총정리해볼게요. 책을 다 읽은 후에도 막힐 때마다 돌아와서 찾아볼 수 있는 레퍼런스가 될 거예요.

프로젝트 B 진행도: [==========] 100% — 배포 완료!

9장. 막혔을 때 — 트러블슈팅 종합 가이드

화면에 뜬 빨간 글씨를 보면 심장이 덜컥 내려앉죠. “내가 뭘 잘못한 거지?” 하는 생각이 밀려오고, 잘 따라오던 흐름이 뚝 끊기는 기분이에요. 그런데 솔직히 말하면, 에러 없이 사이트를 완성하는 사람은 전문 개발자 중에도 거의 없어요. 에러는 실패가 아니라 “여기를 한번 확인해보세요”라는 안내 표지판 같은 거예요.

이 장은 앞선 프로젝트를 진행하면서 마주칠 수 있는 문제들을 모아둔 레퍼런스예요. 처음부터 읽을 필요 없이, 막히는 순간 해당 섹션을 찾아보세요. 책을 다 읽은 뒤에도 계속 돌아올 수 있도록 FAQ 형태로 정리했어요.

에러를 만났을 때, 가장 먼저 할 일

구체적인 문제 해결로 들어가기 전에, 어떤 에러든 공통으로 적용되는 대처법이 있어요.

1단계: 에러 메시지를 읽어보세요

에러 메시지는 영어인 경우가 많아서 겁이 나지만, 사실 핵심은 한두 줄이에요. 빨간 글씨 전체를 이해할 필요 없이, 마지막 한두 줄만 읽어도 단서가 보여요.

2단계: 에러 메시지를 그대로 복사해서 Claude에게 보여주세요

“이런 에러가 나왔는데 어떻게 하면 될까요?”라고 보내면 돼요. 스크린샷을 찍어서 붙여넣어도 좋아요. Claude는 에러 메시지를 읽고 원인과 해결법을 알려줄 수 있어요.

3단계: 그래도 안 되면, 에러 메시지를 구글에 검색하세요

에러 메시지를 큰따옴표로 감싸서 검색하면 같은 문제를 겪은 사람의 해결법을 찾을 수 있어요.

"fatal: remote origin already exists"

이렇게 검색하면 Stack Overflow 같은 사이트에서 답을 찾을 확률이 높아요.

💡 팁: 에러 메시지를 Claude에게 보낼 때는 스크린샷보다 텍스트 복사가 더 정확해요. 터미널이나 브라우저의 에러 메시지를 드래그해서 복사(Ctrl+C 또는 Cmd+C)한 뒤 Claude 대화창에 붙여넣어 보세요.

GitHub 관련 문제

Q1. “GitHub에 파일을 올렸는데 푸시가 안 돼요”

이 문제는 여러 원인이 있을 수 있어요.

원인 1: 인증 문제

GitHub Desktop을 처음 사용할 때 로그인이 제대로 안 되어 있으면 푸시가 거부돼요.

GitHub Desktop 메뉴에서 File > Options (맥은 GitHub Desktop > Preferences)를 열어보세요
Accounts 탭에서 GitHub 계정이 연결되어 있는지 확인해요
연결이 안 되어 있다면 Sign In을 눌러 다시 로그인해보세요

원인 2: 레포지토리 이름이 다른 경우

GitHub Pages용 레포지토리는 반드시 username.github.io 형태여야 해요. 이름에 오타가 있거나 대소문자가 다르면 문제가 생길 수 있어요.

원인 3: 파일이 너무 큰 경우

GitHub은 한 파일당 100MB 제한이 있어요. 고해상도 이미지를 여러 장 넣었다면 용량을 확인해보세요. 이미지는 1MB 이하로 줄이는 것이 좋아요.

💡 팁: 이미지 용량을 줄이고 싶다면 Claude에게 “이미지 최적화 방법 알려줘”라고 물어보세요. 온라인 무료 도구(TinyPNG, Squoosh 등)를 안내해줄 거예요.

Q2. “커밋(Commit)을 눌렀는데 아무 반응이 없어요”

GitHub Desktop에서 커밋 버튼이 비활성화되어 있거나 눌러도 반응이 없는 경우예요.

Summary 칸이 비어 있지 않은지 확인해보세요. 커밋 메시지를 입력해야 버튼이 활성화돼요. “첫 번째 업로드”처럼 간단하게 적으면 돼요.
변경된 파일이 체크되어 있는지 확인해보세요. 왼쪽 파일 목록에서 체크박스가 해제되어 있으면 커밋할 내용이 없다고 판단해요.

Q3. “충돌(Conflict)이 발생했다는 메시지가 떠요”

GitHub Desktop에서 Merge conflict 경고가 나타나면 당황스럽죠. 이건 같은 파일을 두 곳에서 다르게 수정했을 때 생기는 문제예요.

비개발자에게 가장 간단한 해결법은 이렇게 해요:

GitHub Desktop에서 충돌 파일을 확인해요
해당 파일을 텍스트 에디터(VS Code 또는 메모장)로 열어요
<<<<<<<, =======, >>>>>>> 이런 표시가 보일 거예요
이 표시들 사이의 내용 중 남기고 싶은 쪽을 선택하고, 나머지와 표시 기호를 모두 지워요
저장한 뒤 다시 커밋하면 돼요

💡 더 쉬운 방법: 충돌이 복잡하다면, 문제가 되는 파일을 통째로 삭제하고 Claude에게 다시 만들어달라고 요청하는 것도 방법이에요. 어차피 Claude가 언제든 다시 생성해줄 수 있으니까요.

Q4. “GitHub Pages에 올렸는데 사이트가 안 떠요 (404 에러)”

가장 흔한 문제 중 하나예요. 하나씩 확인해볼게요.

체크리스트:

레포지토리 이름이 username.github.io 형태인가요? (username은 본인의 GitHub 아이디)
메인 파일 이름이 index.html인가요? (Index.html이나 main.html이 아닌지 확인)
index.html 파일이 레포지토리의 최상위(루트)에 있나요? (폴더 안에 들어가 있으면 안 돼요)
Settings > Pages에서 Source가 Deploy from a branch로 설정되어 있나요?
Branch가 main으로 선택되어 있나요?

모두 확인했는데도 안 된다면, 푸시 후 1~2분 정도 기다려보세요. GitHub Pages는 배포에 시간이 조금 걸려요. 가끔은 5분까지 걸리기도 해요.

💡 팁: 브라우저 캐시 때문에 이전 404 페이지가 계속 보일 수 있어요. Ctrl+Shift+R (맥은 Cmd+Shift+R)로 강력 새로고침을 해보세요.

Q5. “사이트를 수정했는데 반영이 안 돼요”

수정한 내용이 사이트에 나타나지 않는 경우예요.

커밋과 푸시를 모두 했는지 확인해보세요. GitHub Desktop에서 커밋만 하고 푸시를 안 하면 내 컴퓨터에만 저장되고 인터넷에는 반영되지 않아요. 상단의 Push origin 버튼을 눌러야 해요.
GitHub 레포지토리 페이지에서 파일이 업데이트되었는지 확인해보세요. 웹 브라우저로 github.com/username/username.github.io에 접속해서 파일 수정 시간이 최근인지 봐요.
1~2분 기다려보세요. GitHub Pages는 푸시 후 반영까지 약간의 시간이 필요해요.
강력 새로고침을 해보세요. Ctrl+Shift+R (맥은 Cmd+Shift+R)

Vercel 관련 문제

Q6. “Vercel에서 빌드 에러가 났어요”

Vercel 대시보드에서 빨간색 Error 표시가 나타나면 찜찜하죠. 하지만 걱정하지 마세요, 대부분 간단한 원인이에요.

가장 흔한 원인들:

1. 빌드 명령어가 잘못된 경우

Vercel이 프로젝트를 Import할 때 빌드 설정을 자동으로 감지하는데, 가끔 잘못 인식할 수 있어요.

Vercel 대시보드에서 프로젝트 > Settings > General로 가세요
Build & Development Settings에서 빌드 명령이 npm run build인지 확인해요
Output Directory가 build 또는 dist인지 확인해요 (React 프로젝트는 보통 build)

2. 패키지 설치 실패

npm install 단계에서 실패하는 경우예요. 이건 Claude에게 빌드 로그를 보여주면 해결법을 알려줘요.

Vercel 대시보드에서 해당 배포의 Logs를 클릭해요
빨간색으로 표시된 에러 부분을 복사해요
Claude에게 붙여넣고 “이 에러 어떻게 해결하나요?”라고 물어보세요

3. Node.js 버전 문제

프로젝트가 특정 Node.js 버전을 요구하는데 Vercel의 기본 버전과 다를 수 있어요.

Settings > General > Node.js Version에서 버전을 변경할 수 있어요
잘 모르겠다면 18.x를 선택하면 대부분 잘 동작해요

💡 팁: Vercel 빌드 로그에서 에러 위치를 찾는 법 — 로그를 맨 아래로 스크롤한 뒤 위로 올라가면서 첫 번째 빨간색 텍스트를 찾으세요. 그게 진짜 원인인 경우가 많아요.

Q7. “Vercel에 배포했는데 하얀 화면만 나와요”

배포는 성공했는데 사이트에 접속하면 아무것도 안 보이는 경우예요. 난감하죠.

체크리스트:

브라우저의 개발자 도구(F12)를 열고 Console 탭에 빨간 에러가 있는지 확인해보세요
package.json의 homepage 필드가 올바른지 확인해보세요
public/index.html 파일이 존재하는지 확인해보세요
로컬에서 npm start로 실행했을 때는 잘 되는지 확인해보세요

로컬에서는 되는데 Vercel에서만 안 된다면, 환경 변수 문제일 수 있어요. Claude에게 “로컬에서는 잘 되는데 Vercel에서 하얀 화면만 나와요”라고 말하면 구체적인 해결법을 안내해줄 거예요.

Q8. “Vercel 도메인 주소를 바꾸고 싶어요”

기본으로 생성되는 random-name.vercel.app 주소가 마음에 안 들 수 있어요.

Vercel 대시보드에서 프로젝트를 선택해요
Settings > Domains로 가요
기존 .vercel.app 도메인 옆의 Edit을 클릭해요
원하는 이름으로 변경하면 돼요 (예: my-portfolio.vercel.app)

💡 주의: 이미 다른 사람이 사용 중인 이름은 선택할 수 없어요. 겹치지 않는 고유한 이름을 정해보세요.

Q9. “GitHub에 올렸는데 Vercel이 자동으로 배포를 안 해요”

Vercel과 GitHub 연동이 제대로 되어 있다면 GitHub에 푸시할 때마다 자동 배포가 이루어져야 해요.

Vercel 대시보드에서 GitHub 연동 상태를 확인해보세요. Settings > Git에서 연결된 레포지토리가 맞는지 봐요.
Production Branch가 올바른지 확인해보세요. 보통 main이어야 해요.
GitHub에서 Vercel 앱 권한을 확인해보세요. GitHub > Settings > Applications > Installed GitHub Apps에서 Vercel이 해당 레포지토리에 접근 권한이 있는지 봐요.

Claude 관련 문제

Q10. “Claude가 원하는 결과를 안 줘요”

Claude에게 요청했는데 기대한 것과 다른 코드가 나올 때 답답하죠. 이럴 때 쓸 수 있는 전략들이 있어요.

전략 1: 더 구체적으로 설명하기

❌ "포트폴리오 사이트 만들어줘"
✅ "마케터를 위한 포트폴리오 사이트를 만들어줘.
    히어로 섹션에는 이름과 한 줄 소개,
    아래에 프로젝트 3개를 카드 형태로 보여주고,
    맨 아래에 이메일 연락처를 넣어줘.
    색상은 파란색 계열로 깔끔하게 해줘."

요청이 구체적일수록 원하는 결과에 가까워져요.

전략 2: 참고 사이트 알려주기

“이 사이트처럼 만들어줘”라고 URL을 함께 보내면 Claude가 스타일을 참고할 수 있어요.

전략 3: 단계별로 나눠서 요청하기

한 번에 완성본을 요청하기보다, “먼저 기본 구조만 만들어줘” -> “히어로 섹션 디자인 수정해줘” -> “프로젝트 섹션 추가해줘”처럼 하나씩 요청하는 편이 결과가 더 좋아요.

전략 4: 맘에 안 드는 부분을 콕 집어 말하기

"전체적으로 괜찮은데, 헤더 부분이 너무 밋밋해요.
좀 더 임팩트 있게 바꿔줄 수 있어요?"

어디가 어떻게 마음에 안 드는지 구체적으로 말하면 Claude가 더 정확하게 수정해줘요.

💡 팁: Claude가 만든 코드가 마음에 안 들면, “다른 스타일로 다시 만들어줘”라고 해보세요. 같은 요청이라도 매번 조금씩 다른 결과가 나와요. 3~4번 시도하면 마음에 드는 버전을 찾을 수 있어요.

Q11. “Claude Artifacts에서 미리보기가 안 보여요”

Artifacts 패널이 나타나지 않거나, 코드는 보이는데 미리보기가 비어 있는 경우예요.

브라우저를 새로고침해보세요. 가장 간단하면서도 효과적인 방법이에요.
다른 브라우저로 시도해보세요. Chrome이 가장 호환이 잘 돼요.
Claude에게 “방금 코드를 Artifact로 다시 보여줘”라고 요청해보세요.
대화가 너무 길어지면 새 대화를 시작해보세요. 대화가 길어지면 가끔 Artifacts가 불안정해질 수 있어요.

Q12. “Claude가 만든 코드를 복사했는데 파일로 저장이 안 돼요”

코드를 내 컴퓨터에 파일로 저장하는 과정에서 막히는 경우예요.

윈도우에서: 1. Claude가 만든 코드를 Copy 버튼으로 복사해요 2. 메모장(Notepad)을 열어요 3. Ctrl+V로 붙여넣어요 4. 파일 > 다른 이름으로 저장을 선택해요 5. 중요: 파일 형식을 모든 파일(*.*)로 바꿔요 6. 파일 이름을 index.html로 입력하고 저장해요

맥에서: 1. 코드를 복사해요 2. 텍스트 편집기를 열어요 3. Cmd+V로 붙여넣어요 4. 포맷 > 일반 텍스트 만들기를 선택해요 (이 단계가 중요해요!) 5. 파일 > 저장에서 파일 이름을 index.html로 지정하고 저장해요

💡 주의: 윈도우 메모장에서 저장할 때 인코딩을 UTF-8로 선택해야 한글이 깨지지 않아요. 파일 형식도 반드시 모든 파일(*.*)로 바꿔야 .html 확장자가 제대로 붙어요.

화면이 이상할 때

Q13. “화면 레이아웃이 깨져 보여요”

글자가 겹치거나, 이미지가 삐져나오거나, 여백이 이상하게 보이는 경우예요.

가장 흔한 원인: HTML 태그가 닫히지 않은 경우

Claude가 만든 코드를 복사하다가 일부가 잘린 경우 이런 현상이 생겨요. 해결법은 간단해요:

Claude에게 “코드 전체를 다시 한 번 보여줘”라고 요청해요
이번에는 빠짐없이 전체를 복사해요
기존 파일 내용을 모두 지우고, 새로 복사한 코드를 붙여넣어요

그래도 안 된다면:

브라우저 개발자 도구(F12)를 열고 Console 탭에서 빨간 에러 메시지가 있는지 확인해보세요
에러 메시지를 Claude에게 보여주면 수정해줄 거예요

Q14. “모바일에서 보면 글자가 너무 작아요 / 레이아웃이 깨져요”

PC에서는 괜찮은데 스마트폰으로 보면 이상하게 보이는 경우예요.

원인: 반응형 디자인이 적용되지 않은 경우

Claude에게 이렇게 요청해보세요:

"이 페이지를 모바일에서도 잘 보이게 반응형으로 만들어줘.
viewport 메타 태그도 추가해줘."

특히 <head> 태그 안에 다음 코드가 있는지 확인해보세요:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

이 한 줄이 없으면 모바일 브라우저가 페이지를 PC 화면 크기로 축소해서 보여줘요.

💡 팁: 모바일 화면을 PC에서 미리 확인하는 방법이 있어요. 브라우저에서 F12를 누르고, 왼쪽 상단의 스마트폰 아이콘(Toggle device toolbar)을 클릭하면 다양한 기기 화면 크기로 미리볼 수 있어요.

Q15. “이미지가 안 보여요 (엑스박스가 뜨거나 빈 공간)”

이미지 관련 문제는 거의 대부분 파일 경로 문제예요.

체크리스트:

이미지 파일이 실제로 해당 위치에 있나요?
파일 이름의 대소문자가 코드와 정확히 일치하나요? (Photo.jpg와 photo.jpg는 다른 파일이에요)
파일 경로에 한글이나 공백이 포함되어 있지 않나요?
이미지 파일이 GitHub에 제대로 올라갔나요? (레포지토리에서 직접 확인)

가장 확실한 해결법:

이미지 파일 이름을 영어 소문자와 하이픈만 사용해서 바꿔보세요.

❌ 내 프로필 사진.JPG
❌ My Photo (1).png
✅ profile-photo.jpg
✅ project-screenshot.png

파일 이름을 바꾼 뒤, HTML 코드의 이미지 경로도 함께 수정해야 해요.

Claude Code 관련 문제

Q16. “터미널에 명령어를 입력했는데 안 돼요”

7장에서 Claude Code를 사용할 때 터미널에서 문제가 생기는 경우예요.

“command not found” 에러:

이 에러는 해당 프로그램이 설치되지 않았거나, 터미널이 프로그램 위치를 모를 때 나타나요.

npm: command not found → Node.js가 설치되지 않은 거예요. Node.js 공식 사이트(nodejs.org)에서 LTS 버전을 설치하세요.
claude: command not found → Claude Code가 설치되지 않은 거예요. 7장의 설치 과정을 다시 따라해보세요.

“permission denied” 에러:

맥이나 리눅스에서 권한 문제가 생긴 거예요
명령어 앞에 sudo를 붙여서 다시 시도해보세요 (비밀번호 입력이 필요해요)

💡 팁: 터미널이 너무 낯설고 어렵다면, 7장의 Claude Code 부분은 건너뛰고 나중에 도전해도 괜찮아요. Artifacts만으로도 충분히 멋진 사이트를 만들 수 있어요.

Q17. “npm start 했는데 에러가 나요”

React 프로젝트를 로컬에서 실행할 때 생기는 문제예요.

“Module not found” 에러:

프로젝트에 필요한 패키지가 설치되지 않은 거예요. 프로젝트 폴더에서 다음 명령어를 실행해보세요:

npm install

이 명령어가 필요한 모든 패키지를 자동으로 설치해줘요. 설치가 끝나면 다시 npm start를 실행해보세요.

“Port 3000 is already in use” 에러:

다른 프로그램이 이미 3000번 포트를 사용 중이라는 뜻이에요. 이전에 실행한 개발 서버를 종료하지 않았을 수 있어요.

이전 터미널 창을 찾아서 Ctrl+C로 종료하세요
또는 터미널에 y를 입력하면 다른 포트(3001 등)로 자동 실행돼요

“하얀 화면”에서 벗어나는 종합 체크리스트

사이트에 접속했는데 아무것도 안 보이는 “하얀 화면” 현상은 정말 답답하죠. 원인이 다양할 수 있어서 체계적으로 확인해볼게요.

기본 확인:

인터넷에 연결되어 있나요?
URL 주소에 오타가 없나요?
브라우저 강력 새로고침을 해봤나요? (Ctrl+Shift+R)

GitHub Pages인 경우:

Settings > Pages에서 사이트가 활성화되어 있나요?
index.html 파일이 레포지토리 루트에 있나요?
배포 후 충분한 시간(2~5분)이 지났나요?

Vercel인 경우:

대시보드에서 마지막 배포 상태가 Ready인가요?
빌드 로그에 에러가 없나요?
로컬에서 npm run build를 실행하면 에러 없이 완료되나요?

코드 문제인 경우:

브라우저 개발자 도구(F12) > Console에 에러가 있나요?
HTML 파일의 코드가 완전하게 복사되었나요? (마지막 </html> 태그 확인)
CSS 파일이나 JavaScript 파일 경로가 올바른가요?

이 체크리스트를 위에서부터 하나씩 확인해보면, 대부분의 하얀 화면 문제를 해결할 수 있어요.

마음이 꺾일 때 — 에러와 친해지는 마인드셋

여기까지 읽으면서 “에러가 이렇게 많아?” 하고 놀라셨을 수도 있어요. 그런데 이 목록은 “자주 나오니까 외우세요”가 아니라, “이런 상황이 오면 이 페이지를 펴세요”라는 뜻이에요.

전문 개발자도 매일 에러를 만나요. 다른 점이 있다면, 그들은 에러를 보고 “아, 또 왔네” 하면서 해결법을 찾는다는 거예요. 겁내지 않는 거죠.

여러분도 이미 그 과정에 있어요. 이 책을 따라오면서 한 번이라도 에러를 만나고 해결해봤다면, 그것만으로도 대단한 경험이에요.

그리고 기억해두세요 — 여러분에게는 Claude라는 든든한 조력자가 있어요. 에러 메시지를 복사해서 보여주면 해결법을 알려주고, 코드를 다시 고쳐주고, 왜 그런 문제가 생겼는지 설명해줘요. 혼자 끙끙 앓지 않아도 돼요.

에러는 실패가 아니에요. “여기를 한번 확인해보세요”라는 친절한 알림이에요. 그러니 에러가 나타나면 심호흡 한 번 하고, 이 장을 펴고, 하나씩 확인해보세요. 반드시 해결할 수 있어요.

다음 장에서는 이 책의 여정을 마무리하면서, 여러분이 앞으로 어떤 방향으로 나아갈 수 있는지 살펴볼게요.

10장. 이 다음은요? — 당신의 다음 사이트를 위한 안내

잠깐 멈추고, 여기까지 온 자신을 돌아봐주세요.

이 책을 처음 펼쳤을 때를 기억하나요? “코딩을 전혀 모르는데 정말 웹사이트를 만들 수 있을까?”라는 불안감이 있었을 거예요. GitHub이 뭔지, HTML이 뭔지도 잘 몰랐을 수 있어요.

그런데 지금 여러분은 어떤가요?

Claude와 대화하면서 코드를 만들어본 경험이 있어요. 포트폴리오 사이트를 GitHub Pages에 직접 배포해서, 전 세계 누구나 접속할 수 있는 나만의 웹 주소를 가지게 되었어요. 이벤트 후기 사이트를 React로 만들고 Vercel에 올려서 자동 배포까지 경험했어요.

이건 정말 대단한 일이에요. 진심으로요.

이제 “다음에는 뭘 하면 좋을까요?”라는 질문이 자연스럽게 떠오를 거예요. 이 장에서는 바로 그 질문에 답할게요.

여러분이 이 책에서 배운 것들

다음 단계로 넘어가기 전에, 지금까지 익힌 능력을 정리해볼게요. 스스로 인지하는 것이 중요해요.

AI 활용 능력: - Claude에게 원하는 웹페이지를 자연어로 설명하고, 결과물을 받을 수 있어요 - Artifacts에서 실시간으로 미리보고, 대화로 수정 요청을 할 수 있어요 - 구체적인 프롬프트를 작성해서 원하는 결과에 가까워지는 방법을 알아요

웹 기본 지식: - HTML이 웹페이지의 구조를 만드는 언어라는 것을 알아요 - CSS가 디자인(색상, 크기, 배치)을 담당한다는 것을 알아요 - 파일을 브라우저에서 열어 결과를 확인하는 방법을 알아요

배포 능력: - GitHub에 파일을 올리고, GitHub Pages로 사이트를 공개할 수 있어요 - Vercel에 프로젝트를 연결하고, 자동 배포를 설정할 수 있어요 - 코드를 수정하고 다시 올려서 사이트를 업데이트할 수 있어요

문제 해결 능력: - 에러가 나면 당황하지 않고 메시지를 읽어볼 수 있어요 - Claude에게 에러를 보여주고 해결법을 받는 방법을 알아요 - 검색 엔진으로 해결법을 찾는 방법을 알아요

이 능력들은 앞으로 어떤 웹 프로젝트를 하든 기초 체력이 되어줄 거예요.

더 해볼 수 있는 프로젝트들

포트폴리오와 이벤트 사이트를 만들어 봤으니, 같은 방법으로 다양한 사이트를 만들 수 있어요. 몇 가지 아이디어를 드릴게요.

개인 블로그

일상 기록, 전문 분야 글쓰기, 또는 학습 노트를 올리는 블로그를 만들 수 있어요.

Claude에게 이렇게 요청해보세요:

"개인 블로그 사이트를 만들어줘.
메인 페이지에 최신 글 목록이 보이고,
글을 클릭하면 전체 내용이 보이는 구조로 해줘.
카테고리로 분류할 수 있게 해줘."

블로그를 좀 더 체계적으로 운영하고 싶다면, 정적 사이트 생성기를 살펴보는 것도 좋아요. Hugo나 Astro 같은 도구인데, 마크다운 파일로 글을 작성하면 자동으로 웹페이지로 변환해줘요. Claude에게 “Hugo로 블로그를 만들고 싶어”라고 말하면 설치부터 배포까지 안내해줄 수 있어요.

소규모 비즈니스 소개 페이지

카페, 공방, 프리랜서 사업 등 작은 비즈니스의 소개 페이지를 만들 수 있어요. 영업시간, 위치(지도 포함), 메뉴나 서비스 목록, 문의 양식 같은 요소를 넣으면 실용적인 사이트가 완성돼요.

Claude에게 이렇게 요청해보세요:

"동네 카페 소개 페이지를 만들어줘.
상단에 카페 이름과 분위기 있는 히어로 이미지,
영업시간과 주소, 메뉴 목록(음료, 디저트),
인스타그램 링크와 간단한 오시는 길 안내를 넣어줘.
따뜻하고 아늑한 느낌의 색상으로 해줘."

이미 포트폴리오 사이트를 만들어본 경험이 있으니, 구조를 잡는 게 한결 수월하게 느껴질 거예요. 다른 점이라면 섹션의 내용이 달라지는 것뿐이에요. 이 책에서 익힌 “Claude에게 설명하기 -> 결과 확인하기 -> 수정 요청하기” 사이클은 어떤 종류의 사이트에도 그대로 적용할 수 있어요.

팀 프로젝트 페이지

동아리, 스터디 그룹, 사내 프로젝트 팀의 활동을 정리하는 페이지를 만들 수 있어요. 팀원 소개, 활동 기록, 결과물 갤러리 등을 담으면 훌륭한 팀 페이지가 돼요.

팀 페이지의 좋은 점은 동료들과 함께 만들 수 있다는 거예요. 5장에서 배운 GitHub을 활용하면, 여러 사람이 하나의 사이트를 함께 수정하고 업데이트할 수 있어요. 각자 자기 소개 부분을 작성하고, 한 명이 모아서 올리는 식으로 협업하면 돼요.

이벤트 초대장

결혼식, 생일 파티, 워크숍 같은 이벤트의 온라인 초대장을 만들 수 있어요. 날짜, 장소, 참석 안내를 담고, 예쁜 디자인으로 꾸미면 카카오톡으로 공유할 수 있는 초대 페이지가 완성돼요.

특히 모바일 초대장은 실용적이에요. 종이 초대장 대신 링크 하나를 공유하면 되고, 내용을 수정해야 할 때도 코드만 고치면 즉시 반영되니까요. 8장에서 배운 Vercel 자동 배포를 활용하면, 장소나 시간이 변경되어도 순식간에 업데이트할 수 있어요.

온라인 이력서

취업이나 이직을 준비할 때, PDF 이력서 대신 웹 이력서를 만드는 것도 좋은 방법이에요. 포트폴리오 사이트와 비슷하지만, 경력 사항과 기술 스택을 더 구조적으로 정리하는 형태예요.

"온라인 이력서 페이지를 만들어줘.
인적 사항, 경력 사항(회사명, 기간, 업무 내용),
보유 기술, 자격증, 자기소개 섹션으로 구성하고,
PDF 다운로드 버튼도 넣어줘.
깔끔하고 전문적인 느낌으로 해줘."

💡 팁: 새 프로젝트를 시작할 때 “비슷한 사이트”를 먼저 찾아보세요. 마음에 드는 사이트를 Claude에게 보여주면서 “이런 느낌으로 만들어줘”라고 요청하면 훨씬 결과가 좋아요. 레퍼런스가 있을 때와 없을 때의 결과 차이는 정말 커요.

v0.app으로 더 멋진 디자인 만들기

이 책에서 사용한 Claude Artifacts도 강력하지만, 디자인에 더 욕심이 생긴다면 v0.app을 살펴보세요.

v0은 Vercel에서 만든 AI 디자인 도구예요. Claude처럼 자연어로 요청하면 웹 컴포넌트를 생성해주는데, 특히 세련된 UI 디자인에 강점이 있어요.

v0이 Claude Artifacts와 다른 점: - 더 다양한 디자인 템플릿과 컴포넌트를 제공해요 - Shadcn/UI라는 디자인 시스템을 기반으로 일관된 스타일을 유지해요 - 생성된 코드를 바로 Vercel에 배포할 수 있어요

사용 방법은 간단해요:

v0.app에 접속해요
원하는 디자인을 자연어로 설명해요 (예: “깔끔한 포트폴리오 랜딩 페이지”)
생성된 결과물을 미리보기하고, 마음에 드는 버전을 선택해요
코드를 복사해서 프로젝트에 적용하거나, 바로 배포해요

Claude와 v0를 함께 사용하면 더 좋아요. v0로 디자인을 먼저 잡고, Claude에게 기능이나 콘텐츠를 추가해달라고 요청하는 식으로 역할을 나누면 훨씬 효율적이에요.

예를 들어 이런 워크플로우가 가능해요:

v0에서 “현대적인 컨퍼런스 랜딩 페이지”를 생성해요
마음에 드는 디자인이 나오면 코드를 복사해요
Claude에게 “이 코드에 실제 발표자 정보와 세션 시간표를 넣어줘”라고 요청해요
완성된 코드를 GitHub에 올리고 Vercel로 배포해요

디자인 감각이 찜찜하다고 느꼈던 분들에게 v0은 정말 반가운 도구예요. AI가 디자인 트렌드를 반영한 깔끔한 결과를 만들어주니까요.

Claude Projects로 사이트를 지속적으로 관리하기

사이트를 한 번 만들고 끝나는 게 아니라, 계속 업데이트하고 관리하고 싶다면 Claude Projects 기능을 활용해보세요.

Claude Projects는 특정 프로젝트에 관한 맥락을 Claude가 기억하도록 만드는 기능이에요. 매번 처음부터 설명할 필요 없이, 프로젝트에 관한 정보를 저장해두면 이후 대화에서 자동으로 참고해요.

활용 방법:

Claude에서 새 프로젝트를 만들어요
프로젝트 설명에 사이트의 목적, 구조, 사용 기술 등을 적어요
기존 코드 파일을 프로젝트에 첨부해요
이후에 수정이 필요할 때 해당 프로젝트에서 대화하면 Claude가 맥락을 이해한 상태로 도와줘요

예를 들어, 포트폴리오 프로젝트를 만들어두면:

"포트폴리오에 최근 프로젝트 하나 더 추가하고 싶어요.
제목은 'SNS 마케팅 캠페인'이고, 2026년 3월에 했어요."

이렇게만 말해도 Claude가 기존 사이트의 구조와 디자인에 맞춰서 코드를 수정해줘요. 매번 전체 코드를 다시 보여주지 않아도 되니까 편리하죠.

프로젝트 설명에 넣으면 좋은 정보:

프로젝트 이름: 내 포트폴리오 사이트
기술: HTML/CSS 단일 파일
배포: GitHub Pages (username.github.io)
구조: 히어로, About, 프로젝트(3개), 경력, 연락처 섹션
색상: 파란색 계열 (#2563eb 메인)
폰트: Pretendard
특이사항: 다크모드 토글 있음, 반응형 적용됨

이렇게 적어두면 나중에 “프로젝트 섹션에 새 항목을 추가해줘”라고만 말해도 Claude가 기존 디자인과 일관되게 코드를 만들어줘요. 마치 오랫동안 함께 일한 동료처럼요.

💡 팁: 사이트를 크게 변경할 때마다 최신 코드 파일을 프로젝트에 다시 첨부해주는 편이 좋아요. Claude가 항상 최신 상태를 기준으로 작업할 수 있거든요.

커스텀 도메인 연결하기

username.github.io나 project-name.vercel.app 주소도 좋지만, 나만의 도메인 주소를 갖고 싶을 수 있어요. 예를 들어 myname.com 같은 주소요.

커스텀 도메인을 연결하는 큰 흐름:

도메인 구매: 가비아, 후이즈 같은 한국 업체나, Namecheap, Google Domains 같은 해외 업체에서 원하는 도메인을 구매해요. .com 도메인은 연간 만 원에서 2만 원 정도예요.
DNS 설정: 구매한 도메인이 내 사이트를 가리키도록 설정해요. 이 부분이 처음에는 어렵게 느껴질 수 있는데, Claude에게 “GitHub Pages에 커스텀 도메인 연결하는 법 알려줘”라고 물어보면 단계별로 안내해줘요.
플랫폼 설정: GitHub Pages나 Vercel에서 커스텀 도메인을 등록해요.

이 과정이 처음에는 복잡하게 느껴질 수 있어요. DNS 설정이라는 개념이 낯설기 때문이에요. 하지만 실제로 하는 일은 “이 도메인 주소가 내 사이트를 가리키게 해주세요”라는 설정을 입력하는 것뿐이에요. Claude에게 단계별로 안내를 받으면 충분히 해낼 수 있어요.

GitHub Pages에서 커스텀 도메인을 설정하는 큰 흐름: 1. 레포지토리의 Settings > Pages로 가요 2. Custom domain 칸에 구매한 도메인 주소를 입력해요 3. 도메인 업체의 DNS 설정에서 GitHub이 안내하는 IP 주소를 등록해요 4. 몇 시간 뒤 HTTPS(보안 연결)가 자동으로 활성화돼요

Vercel에서는 더 간단해요: 1. 프로젝트 Settings > Domains로 가요 2. 구매한 도메인 주소를 입력해요 3. Vercel이 안내하는 DNS 설정을 도메인 업체에서 등록해요 4. 자동으로 HTTPS 인증서가 발급돼요

💡 팁: 도메인 구매가 부담스럽다면, 당장 하지 않아도 괜찮아요. .github.io와 .vercel.app 주소만으로도 충분히 사이트를 운영할 수 있어요. 나중에 필요할 때 언제든 연결할 수 있으니까요.

계속 배우기 좋은 리소스

혼자 계속 성장하고 싶다면, 다음 리소스들을 참고해보세요.

커뮤니티

생활코딩 (opentutorials.org): 한국 최대의 비개발자 대상 코딩 교육 커뮤니티예요. 웹 개발 기초 강의가 무료로 제공되고, 질문 게시판도 활발해요. “웹사이트 만들기” 시리즈를 추천해요.
인프런 (inflearn.com): 한국어 온라인 강의 플랫폼이에요. “웹 개발 입문”, “HTML/CSS 기초” 같은 무료 강의가 많아요. 영상으로 배우는 편이 편하다면 이 플랫폼이 잘 맞을 거예요.
Claude 공식 Discord: Claude 사용자들이 모여서 팁과 활용법을 공유하는 곳이에요. 다른 사람들이 Claude로 만든 프로젝트를 구경하는 것만으로도 영감을 얻을 수 있어요.
GitHub Discussions: 각 프로젝트의 Discussions 탭에서 다른 사용자들과 소통할 수 있어요. 영어가 대부분이지만, 구글 번역기나 Claude를 활용하면 읽는 데 큰 어려움은 없어요.

참고할 만한 문서

GitHub Pages 공식 문서 (pages.github.com): GitHub Pages의 모든 기능이 정리되어 있어요. 특히 “커스텀 도메인 설정” 부분은 나중에 도메인을 연결할 때 꼭 참고하게 될 거예요.
Vercel 공식 문서 (vercel.com/docs): Vercel 배포에 관한 상세한 가이드가 있어요. “Getting Started” 섹션이 특히 깔끔하게 정리되어 있어요.
MDN Web Docs (developer.mozilla.org): HTML, CSS에 관한 가장 믿을 수 있는 레퍼런스예요. 한국어 번역도 상당 부분 되어 있어요. 모르는 태그나 속성이 있을 때 검색하면 거의 항상 여기가 나와요.

다음 단계로 공부하기 좋은 주제

지금 당장이 아니더라도, 관심이 생길 때 찾아보면 좋은 주제들이에요:

CSS 심화: 애니메이션, Grid 레이아웃, 변수 활용 — 사이트에 움직임과 세련된 배치를 줄 수 있어요
JavaScript 기초: 버튼 클릭, 폼 처리, 동적 콘텐츠 — 사이트에 “동작”을 부여하는 언어예요
React 기초: 컴포넌트 개념, 상태 관리 — 이미 이벤트 사이트에서 맛봤어요! 더 깊이 들어가면 복잡한 앱도 만들 수 있어요
SEO 기초: 검색 엔진에 내 사이트가 잘 노출되게 만드는 법 — 사이트를 만들었으면 사람들이 찾을 수 있어야 하니까요
접근성(Accessibility): 시각 장애인이나 고령자도 사이트를 이용할 수 있게 만드는 법 — 더 많은 사람이 내 사이트를 즐길 수 있어요

이 모든 주제도 Claude에게 물어보면서 배울 수 있어요. “React의 컴포넌트가 뭔지 쉽게 설명해줘”라고 물어보면, 여러분의 수준에 맞게 설명해줄 거예요. 책을 사거나 강의를 결제하기 전에, 먼저 Claude에게 개념을 설명해달라고 요청해보세요. 그렇게 기초 감을 잡은 뒤 더 깊이 파고 싶은 분야에 투자하는 편이 효율적이에요.

비개발자에서 메이커로

이 책의 제목에는 “비개발자”라는 말이 들어 있어요. 처음에는 그 단어가 자신을 설명하는 말이었을 거예요. 코딩을 모르는 사람, 기술과는 거리가 먼 사람.

그런데 이 책을 끝까지 따라온 지금, 여러분은 어떤 사람인가요?

Claude에게 자연어로 원하는 것을 설명할 수 있는 사람이에요. HTML과 CSS가 무엇인지 알고, 코드를 읽고 어디를 고쳐야 하는지 감을 잡을 수 있는 사람이에요. GitHub에 파일을 올리고, 전 세계 누구나 접속할 수 있는 사이트를 배포할 수 있는 사람이에요. 에러가 나면 당황하지 않고, 메시지를 읽고 해결법을 찾을 수 있는 사람이에요.

이런 사람을 요즘은 메이커(Maker)라고 불러요. 머릿속에 있는 아이디어를 현실의 결과물로 만들어내는 사람이요.

개발자가 되지 않아도 괜찮아요. 코드를 외우지 않아도 괜찮아요. 중요한 건 “만들고 싶은 것이 있을 때, 만들 수 있다”는 자신감이에요. 그리고 여러분은 이미 그 자신감을 증명했어요.

한 가지 부탁드릴게요. 여러분이 만든 사이트를 주변에 보여주세요. “나 이거 직접 만들었어”라고 말해보세요. 그 한마디가 또 다른 누군가에게 “나도 해볼까?”라는 용기를 줄 수 있어요. AI와 함께 무언가를 만드는 경험이 점점 더 많은 사람에게 퍼지면 좋겠어요.

앞으로 어떤 아이디어가 떠오르든 — 동네 카페의 소개 페이지든, 동아리 활동 기록 사이트든, 자신의 작업물을 모은 갤러리든 — 이제 여러분은 그것을 현실로 만들 수 있어요.

Claude를 열고, 말을 걸고, 만들어보세요.

여러분의 다음 사이트를 응원할게요.

따라 하면 완성되는 내 첫 웹사이트

부제

저자

머리말

1장. AI가 코딩하는 시대, 당신도 웹사이트를 만들 수 있어요

코딩을 모르는데 웹사이트를 만든다고요?

정적 사이트, 어렵지 않아요

이 책에서 만들 두 가지 사이트

프로젝트 A: 나만의 포트폴리오 사이트

프로젝트 B: 컨퍼런스/이벤트 후기 사이트

이 책을 100% 활용하는 법

“나도 할 수 있을까?” 라는 걱정에 대해

앞으로의 여정

마무리

2장. 도구 준비 — 계정 만들고 시작 준비하기

세 가지 도구, 각각 뭘 하는 건가요?

1단계: Claude 계정 만들기

가입 절차

무료 플랜과 Pro 플랜

Artifacts 기능 체험하기

2단계: GitHub 계정 만들기

가입 절차

GitHub Desktop 설치하기

3단계: Vercel 계정 만들기

가입 절차

텍스트 에디터 — 코드를 열어볼 도구

VS Code 설치 (선택사항)

“내 컴퓨터의 파일이 인터넷 사이트가 되는 원리”

여기까지의 결과물

마무리

3장. Claude와 첫 대화 — “내 소개 페이지 만들어 줘”

Claude에게 첫 마디 건네기

대화로 수정하기 — 이게 바이브 코딩이에요

색상 바꾸기

섹션 추가하기

느낌 바꾸기

프롬프트 잘 쓰는 팁 5가지

팁 1: 내가 누구인지 먼저 알려주세요

팁 2: 구체적으로 말해주세요

팁 3: 참고할 만한 예시를 알려주세요

팁 4: 한 번에 하나씩 요청하세요

팁 5: 마음에 안 들면 솔직하게 말해주세요

HTML 파일이란? — Claude가 만든 코드를 내 컴퓨터에 저장하기

코드 복사하기

파일로 저장하기

브라우저에서 내 페이지 열어보기

실습: 나만의 자기소개 페이지 만들기

수정은 몇 번이든 할 수 있어요

여기까지의 결과물

마무리

4장. 포트폴리오 완성하기 — 내 이야기를 채워 넣기

포트폴리오 사이트에는 뭐가 있어야 할까요?

Claude에게 섹션 추가 요청하기

1단계: About Me 섹션 추가하기

2단계: Skills 섹션 추가하기

3단계: Projects 섹션 추가하기

4단계: Contact 섹션 추가하기

내 사진 넣기

사진 파일 준비하기

Claude에게 사진 경로 알려주기

색상과 폰트 다듬기

색상 바꾸기

폰트 바꾸기

모바일에서도 예쁘게 — 반응형 디자인

모바일 미리보기 확인하기

전체 코드 한 번에 받기

실습: 내 정보로 완성하기

여기까지의 결과물

마무리

5장. 세상에 공개하기 — GitHub Pages로 배포

GitHub에 새 레포지토리 만들기

레포지토리 이름이 중요해요

레포지토리 만드는 단계

GitHub Desktop으로 내 컴퓨터와 연결하기

클론(Clone)이란?

Claude가 만든 코드를 파일로 저장하기

파일 이름은 반드시 index.html

저장하는 방법

이미지 파일도 함께 넣기

커밋과 푸시 — 파일을 인터넷에 올리기

파일 이름은 반드시 `index.html`