말로 시켜서 내 소개 페이지 만들기

1강에서 만든 하늘색 페이지는 예시였어요. 오늘 만들 건 진짜예요.

내 이름이 적히고, 내가 뭘 하는 사람인지 쓰여 있고, 연락할 방법이 붙어 있는 한 페이지. 다 만들고 나면 4강에서 인터넷에 올려요.

여기서 배우는 진짜 기술은 HTML이 아니에요. 원하는 걸 에이전트가 알아들을 만큼 구체적으로 말하는 법이에요.

오늘 만들 것

내 자기소개 페이지 한 장. 이름, 한 줄 소개, 요즘 하는 일 세 가지, 연락처.

완성 예시를 먼저 열어보세요. 이런 모양이 나와요. 색과 문구는 각자 다르게 나올 거예요.

준비물

• 1강을 마친 상태 (VS Code + Claude Code + my-page 폴더)
• 30분
• 내 이름, 한 줄 소개, 요즘 하는 일 세 가지 — 먼저 메모장에 적어두세요

마지막 항목이 오늘의 진짜 준비물이에요. 에이전트는 나에 대해 아무것도 몰라요.

따라 하기

1. 재료부터 적기

에이전트를 열기 전에, 종이든 메모장이든 이걸 채우세요.

• 이름: 실명이든 닉네임이든
• 한 줄 소개: "마케터 · 주말엔 바이브 코딩" 처럼
• 요즘 하는 일 3가지: 각각 제목 한 줄 + 설명 한 줄
• 연락처: 메일 주소나 SNS 링크

이걸 안 적고 시작하면 에이전트가 "홍길동"과 "Lorem ipsum"으로 채워요. 그러면 내 페이지가 아니라 남의 템플릿이 되죠.

2. 한 번에 다 시키지 않기

초보가 가장 많이 하는 실수는 "멋진 자기소개 페이지 만들어 줘"예요. 그러면 에이전트가 알아서 다 정하고, 마음에 안 드는 결과가 나와요.

대신 이렇게 시키세요. 아래 대괄호 부분만 내 걸로 바꿔서 그대로 붙여넣으면 돼요.

index.html을 내 자기소개 페이지로 다시 만들어 줘.
나는 코딩을 모르니까, 파일 하나로만 만들어 줘 (CSS도 그 안에).

담을 내용:
- 이름: [김지우]
- 한 줄 소개: [마케터 · 주말엔 바이브 코딩]
- 소개 문단: [브랜드 캠페인을 기획하고 글을 씁니다. 개발은 몰랐는데
  이 페이지를 직접 만들면서 바뀌었어요.]
- 요즘 하는 일 3가지:
  1. [주간 뉴스레터 "목요일의 문장"] — [매주 목요일, 카피 한 줄을 뜯어봐요]
  2. [사내 캠페인 리포트 자동화] — [매달 손으로 만들던 표를 AI가 정리하게 했어요]
  3. [이 페이지] — [바이브 코딩으로 만든 첫 결과물]
- 연락처: [메일 hello@example.com], [인스타그램 @jiwoo]

디자인 요청:
- 흰 배경에 검은 글씨, 깔끔하게
- 글자는 너무 작지 않게
- 폰은 세로로 잘 보이게
- 화려한 애니메이션은 넣지 마

다 만들면 뭘 바꿨는지 한국어로 짧게 알려 줘.

엔터를 치면 에이전트가 파일을 고치겠다고 물어봐요. 승인하세요.

3. 눈으로 확인하기

브라우저로 돌아가서 새로고침(F5)을 누르세요. 하늘색 페이지가 내 소개 페이지로 바뀌어 있어요.

내 이름이 큰 글씨로 있나요? 세 가지 항목이 다 있나요? 연락처가 보이나요?

없는 게 있으면 그냥 말하세요. "연락처가 안 보여. 맨 아래에 크게 넣어 줘." 이게 3강에서 본격적으로 배울 기술이에요.

4. 폰에서 어떻게 보이는지 확인하기

사람들 대부분은 폰으로 볼 거예요. 확인하는 방법이 있어요.

브라우저 창의 가로 폭을 마우스로 잡아서 아주 좁게 줄여보세요. 글자가 잘리거나, 옆으로 스크롤이 생기거나, 겹치면 문제예요.

문제가 보이면 이렇게 시키세요.

브라우저 창을 좁게 줄이니까 [글자가 화면 밖으로 나가]. 폰에서도
잘 보이게 고쳐 줘. 가로 스크롤은 생기면 안 돼.

5. 내 취향 한 스푼

기본형이 나왔으면 이제 내 것으로 만들 차례예요. 한 번에 하나씩만 바꾸세요.

제목 아래에 얇은 가로줄을 하나 넣어 줘.
색은 [진한 파랑]으로.

바꾸고, 새로고침하고, 확인하고, 또 바꾸고. 이 반복이 바이브 코딩이에요. 한 번에 열 가지를 시키면 뭐가 잘못됐는지 알 수가 없어요.

막혔을 때

내용은 맞는데 너무 못생겼어요. 에이전트에게 "지금 디자인이 밋밋해. 여백을 늘리고, 제목을 더 크게, 본문은 읽기 편한 크기로 다시 해 줘"라고 하세요. "예쁘게 해 줘"보다 구체적인 지시가 훨씬 잘 먹혀요.

한글이 깨져서 네모로 나와요. "HTML 맨 위에 UTF-8 인코딩 설정이 들어 있는지 확인해 줘"라고 시키세요.

에이전트가 파일을 여러 개 만들었어요. "CSS를 index.html 안으로 합쳐 줘. 파일은 하나만 있으면 좋겠어"라고 하세요. 지금 단계에서는 파일 하나가 관리하기 쉬워요.

고쳤더니 다른 데가 망가졌어요. 흔한 일이에요. 3강에서 되돌리는 법을 배워요. 지금은 "방금 바꾼 걸 되돌리고, 원래대로 해 줘"라고 하면 대부분 돌아와요.

뭘 써야 할지 모르겠어요. 완벽한 문구를 쓰려고 하지 마세요. "아직 소개를 못 정했어요"라고 적어두고 넘어가도 괜찮아요. 페이지는 언제든 고칠 수 있고, 그게 이 강의의 핵심이에요.

마무리 체크

나가기 전에 하나씩 확인해요:

• 브라우저에 뜬 페이지에 내 진짜 이름이 있어요
• 요즘 하는 일 세 가지가 보여요
• 연락할 방법이 하나 이상 있어요
• 창을 좁게 줄여도 글자가 안 잘려요
• 최소 한 번은 "이거 이렇게 바꿔 줘"라고 시켜봤어요

다섯 개가 다 됐다면, 지금 화면에 있는 건 템플릿이 아니라 내 페이지예요.

아직 내 컴퓨터 안에만 있죠. 3강에서 마음껏 고치고 되돌리는 법을 익힌 다음, 4강에서 세상에 내놔요.