3부 세상에 공개한다
11장 · 말로 만드는 홈페이지
한 번에 완성하지 않습니다. 작게 만들고, 열어 보고, 고칩니다. 목표는 멋진 사이트가 아니라 '공개할 수 있는 첫 버전'입니다.
목적 하나만 고릅니다
| 목적 | 누가 보나 | 꼭 들어갈 것 |
|---|---|---|
| 회사·서비스 소개 | 거래처·고객 | 하는 일 · 진행 방식 · 연락처 |
| 개인 소개·포트폴리오 | 의뢰인·채용 담당 | 경력 · 작업물 · 연락 방법 |
| 강의·교육 소개 | 수강 희망자 | 커리큘럼 · 일정 · 신청 방법 |
| 상품 소개 | 잠재 고객 | 무엇이 좋은지 · 구매·문의 방법 |
| 랜딩 페이지 (1장짜리) | 광고·링크로 들어온 사람 | 한 줄 약속 · 신청 버튼 하나 |
회사·상품 홍보용이라면 12장의 '무료 요금제 주의'를 꼭 확인하세요.
기획 — 질문을 받으며 정리합니다
3장의 '질문 받기'를 Claude Code 입력칸에서 그대로 씁니다.
나는 개발을 모르는 [직업/하는 일]이야. [목적: 예) 우리 교육센터 소개] 홈페이지를 만들고 싶어. 보는 사람은 [누구]이고, 보고 나서 [행동: 문의]를 하면 좋겠어. 만들기 전에 필요한 정보를 나한테 하나씩 질문해줘. 질문이 끝나면 한 장짜리 페이지의 섹션 순서를 표로 정리해줘.
질문에는 즉흥으로 답해도 됩니다. 모르면 '일단 가정해서 진행해줘'. 섹션 구성표를 받으면 빼거나 더할 칸을 말로 고치고, "이 구성을 plan.md 파일로 저장해줘"라고 합니다. 오늘의 설계도입니다. 파일 이름은 영문으로. 인터넷 주소에 한글 파일명은 깨지기 쉽습니다.
한 장짜리 홈페이지의 기본 뼈대는 다섯 칸입니다.
| 순서 | 섹션 | 들어갈 내용 |
|---|---|---|
| 1 | 첫 화면 | 한 줄 소개 + 대표 버튼 1개 |
| 2 | 소개 | 누구인지 · 무엇을 하는지 3~4줄 |
| 3 | 서비스·강의·작업물 | 카드 3개 (제목 · 설명 · 사진 자리) |
| 4 | 진행 방식·자주 묻는 질문 | 처음 온 사람이 궁금해할 것 3개 |
| 5 | 연락처 | 전화 · 이메일 · 지도 · 문의 버튼 |
후기·숫자·수상 이력은 실제로 있는 것만. 없으면 칸을 비워 둡니다.
첫 화면 만들기
plan.md 구성대로 한 장짜리 홈페이지를 만들어줘. - 첫 파일 이름은 index.html - 글: [이름/회사명], [한 줄 소개], [연락처] - 분위기: [예) 따뜻하고 신뢰감 있게, 베이지+주황] - 사진 자리는 일단 회색 네모로 비워 둬 - 별도 설치 없이 더블클릭으로 열리는 파일로 다 만들면 어떤 파일을 만들었는지 3줄로 알려줘.
'설치 없이 더블클릭으로 열리게' — 12장의 Vercel 공개가 쉬워지는 한 줄입니다. 승인 창이 뜨면 읽고 승인. 파일 탐색기에서 index.html 더블클릭 → 브라우저로 확인. 마음에 안 드는 곳 3개를 메모만 합니다. 고치기는 다음에. 처음 결과가 어색한 게 정상이고, 메모 3개가 다음 요청의 재료입니다.
고치기 요청 — 나쁜 예 vs 좋은 예
| 나쁜 예 | 좋은 예 |
|---|---|
| "좀 더 예쁘게 해줘" | "제목 글자를 두 배로, 배경은 연한 베이지로" |
| "전부 다시 만들어줘" | "연락처 섹션만 카드 모양으로. 나머지는 그대로" |
| "사진 넣어줘" | "images/team.jpg를 소개 섹션 오른쪽에 넣어줘" |
| "뭔가 이상해" | "폰 폭에서 카드가 옆으로 삐져나가. 세로로 쌓아줘" |
| (한 번에 요청 5개) | 하나 고치고 → 열어 보고 → 다음 |
좋은 예의 공통점: 어디를 · 어떻게 · 나머지는 그대로. 메모한 3개 중 하나를 요청 → 브라우저 새로고침(F5)으로 확인 → 다음. 고칠 때마다 F5. 확인 없이 다음 요청을 쌓지 않습니다. 색·글꼴이 막막하면 "신뢰감 있는 색 조합 3가지를 보여주고 고르게 해줘".
사진 — 세 가지만 지키면 됩니다
- 내 사진은 my-homepage 안 images 폴더에 넣고, 이름을 불러 요청
- 사진 파일 이름도 영문으로: team.jpg, product-1.jpg
- 사진이 없으면 회색 자리만 두고 공개 — 나중에 바꿔도 됩니다
인터넷에서 남의 사진·로고를 가져다 쓰지 않습니다. 저작권·초상권 문제입니다. 사람 얼굴 사진은 본인 동의가 있는 것만 올립니다.
버튼 — 홈페이지에 '행동'을 붙입니다
연락처 섹션에 버튼 3개를 넣어줘. 1) 전화 걸기: [전화번호] → 폰에서 누르면 바로 전화 2) 이메일 보내기: [이메일 주소] 3) 상담 신청: [신청서 주소] → 새 탭으로 열기 첫 화면에도 '상담 신청' 버튼을 크게 하나. 위쪽에 섹션으로 부드럽게 이동하는 메뉴도 만들어줘.
전화번호·이메일은 명함에 적어도 되는 것만. 개인 휴대폰이면 한 번 더 생각합니다. 이 장에서는 '이미 있는 곳으로 연결'까지입니다. 회원가입·결제·신청 저장은 범위 밖입니다. F5 → 버튼을 하나씩 직접 눌러 봅니다. 안 되면 현상 그대로: "상담 신청 버튼을 눌러도 아무 일이 없어. 고쳐줘." 전화 버튼은 PC에서 반응이 없을 수 있습니다. 공개 후 폰에서 확인합니다.
휴대폰 화면 — 주소를 받은 사람은 폰으로 엽니다
PC에서 멀쩡한 페이지가 폰에선 글자가 깨알 같거나 옆으로 밀릴 수 있습니다. PC에서 미리 보기: 브라우저에서 F12 → Ctrl+Shift+M (휴대폰 화면 모드, 크롬·엣지 기준). 끄려면 같은 키를 한 번 더.
이 홈페이지를 휴대폰 화면에서도 보기 좋게 맞춰줘. - 폭이 좁은 폰에서 옆으로 밀리지 않게 - 글자는 폰에서도 읽기 편한 크기로 - 카드 3개는 폰에서 세로로 한 줄씩 - 버튼은 손가락으로 누르기 쉽게 크게 - 위쪽 메뉴는 폰에서 ☰ 버튼으로 접기 고친 뒤 무엇을 바꿨는지 짧게 알려줘.
위아래 끝까지 스크롤하며 옆으로 밀리는 곳·겹친 글자를 찾습니다. 이상한 곳은 Win+Shift+S로 캡처 → Claude 입력칸에 붙여넣고 '여기가 겹쳐'. 화면 문제는 말보다 캡처가 빠릅니다. PC 화면이 망가지지 않았는지도 창을 넓혔다 좁혔다 하며 같이 확인합니다.
공개 전 30초 점검
인터넷에 올리면 주소를 아는 누구나 봅니다. '명함에 적어도 되는 정보'까지만.
- 주민번호·계좌 전체 번호·고객 명단·내부 단가표는 넣지 않습니다
- 없는 후기·숫자·이력은 쓰지 않습니다 — 신뢰가 먼저 무너집니다
- 확신이 없으면: "이 페이지에 공개하면 곤란한 정보가 있는지 점검해줘"
- hello.html·캡처 같은 연습 파일은 지워 달라고 합니다 (승인 창 읽고)
마지막 공개 버튼은 사람이 누릅니다. 읽고, 판단하고, 올립니다.
이 장의 결과물
- ☐ plan.md에 섹션 구성이 저장돼 있다
- ☐ index.html이 브라우저에서 열린다
- ☐ 글·색을 한 번 이상 말로 고쳤다
- ☐ 버튼(전화·메일·신청 중 1개 이상)이 들어갔다
- ☐ 휴대폰 화면 모드에서 옆으로 밀리지 않는다
- ☐ 개인정보·기밀·남의 사진·지어낸 후기가 없다
사진·디자인이 덜 됐어도 괜찮습니다. 열리고 버튼이 있으면 공개하러 갑니다.