홈페이지는 어떻게 만들어지나요?
3가지만 알면 끝! 파일, 집, 그리고 주소
홈페이지가 인터넷에 보이는 원리를 아주 쉽게 이해하고, 만들고 싶은 홈페이지를 종이에 그려봅니다.
예상 소요 시간 약 15분
홈페이지는 사실 '메모장 파일'입니다
홈페이지라고 하면 뭔가 복잡한 프로그램 같죠? 놀랍게도 홈페이지의 정체는 글자가 적힌 파일 하나입니다.
index.html이라는 이름의 파일을 인터넷 브라우저가 열어서 보여주는 것뿐이에요. 사진이나 지도도 전부 이 파일 안에 글자로 적혀 있습니다.
이 파일을 내 컴퓨터에서 열면 나만 볼 수 있고, 인터넷에 올려두면 전 세계 누구나 볼 수 있습니다. 그게 전부예요!
홈페이지를 위한 3가지 준비물
홈페이지를 가게에 비유해 볼까요? 딱 3가지만 있으면 됩니다.
| 조각 | 역할 | 비유 | 우리가 할 일 |
|---|---|---|---|
| 파일 | 홈페이지의 내용과 모양 | 가게 인테리어 | AI(Claude)가 알아서 만들어줍니다 |
| 호스팅 | 파일을 24시간 켜진 컴퓨터에 올리는 것 | 가게 건물 | 무료 서비스를 이용할 거예요 |
| 도메인 | 사람들이 찾아올 수 있는 주소 (mycafe.kr) | 가게 간판·주소 | 나중에 내 주소를 달아줄 거예요 |
코딩 몰라도 됩니다. "바이브 코딩" 하세요!
이 강좌에서는 어려운 코드를 한 줄도 직접 쓰지 않습니다.
대신 클로드 데스크탑 앱의 Code(코드) 탭에 있는 똑똑한 인공지능 비서에게 카카오톡 하듯이 한국어로 말만 하면 됩니다. 터미널(검은 명령 창)은 열지 않아도 됩니다.
🗣️ "가게 소개 홈페이지 만들어줘. 위에는 사진, 아래는 메뉴 넣어줘."
그러면 AI가 파일을 뚝딱 만들어줍니다. 여러분은 결과를 보고 "글자 크기 좀 키워줘", "배경색을 따뜻하게 해줘"라고 말로 고쳐나가면 됩니다. 참 쉽죠?
무엇을 만들까요?
결과물은 **"스마트폰에서도 예쁘게 보이는 진짜 홈페이지"**입니다. 아래 중에서 하나를 골라보세요.
| 난이도 | 유형 | 어떤 내용이 들어가나요? | 추천 대상 |
|---|---|---|---|
| ★ 쉬움 | 한 페이지 소개 (먼저 이것부터) | 제목 / 사진 1장 + 소개 / 연락처 | 처음 해보는 모든 분 |
| ★ 쉬움 | 개인·블로그 | 소개 / 글 카드 3개 / 연락처 | 취미, 일기, 지식 공유 |
| ★★ 보통 | 가게·매장 | 소개 / 메뉴 / 주소·영업시간 | 카페, 식당, 미용실, 학원 등 |
| ★★ 보통 | 포트폴리오 | 소개 / 작업 사진 / 연락처 | 프리랜서, 디자이너, 사진작가 |
| ★★ 보통 | 소규모 회사 | 서비스 소개 / 후기 / 연락처 | 1인 기업, 스타트업, 컨설팅 |
| ★★★ 어려움 | 행사·웨딩·모임 | 타임테이블 / 갤러리 / 안내 | 돌잔치, 결혼식, 동문회 |
🌱 처음이라면 맨 위 "한 페이지 소개"부터 만듭니다. 4강에서 15분이면 결과가 나옵니다. 지도·문의 폼·여러 페이지 같은 어려운 기능은 뒤쪽 강의로 미뤄 두었습니다.
💡 진짜로 쓸 홈페이지를 상상하고 만들면 훨씬 재밌습니다!
실제 사례로 보는 홈페이지
오쌤이 이 강좌와 같은 방식(클로드 + 바이브 코딩)으로 만든 실제 사이트 3곳입니다. 완성된 모습이 궁금할 때 새 창으로 열어 보세요. 따라 만들 필요는 없고, "이런 것도 말로 만들 수 있구나" 정도로 구경하면 됩니다.
🏪 메이크업포엘 — 가게·매장형
- 한 줄 소개: 강남 논현동의 혼주 전문 메이크업샵 소개 사이트 (한국어)
- 이 강좌에서는: 4강 가게·매장(★★) 의 확장판. 소개·서비스·위치·연락이라는 뼈대가 같습니다.
- 눈여겨볼 섹션: ① 맨 위 히어로(한 줄 소개와 예약 버튼) ② 업무분야(서비스 7개를 카드처럼 나눈 메뉴) ③ 고객후기와 자주 묻는 질문
🏢 푸놀치 — 브랜드·소규모 사업체형
- 한 줄 소개: 밥상으로 마음을 만나는 푸놀치 프로그램을 소개하는 브랜드 사이트 (한국어)
- 이 강좌에서는: 4강 소규모 사업체·회사(★★) 에 가깝습니다. 소개·과정·책·갤러리가 한 페이지에 이어집니다.
- 눈여겨볼 섹션: ① 히어로의 큰 문장과 신청·문의 버튼 ② 소개 → 일기(마음소풍) → 아카데미 순서로 이어지는 구성 ③ 사진 갤러리
🎧 대충 영어 (mp3-free.org) — 서비스·자료형
- 한 줄 소개: 영어 학습 앱 '대충 영어'와 WAV 원음 학습 자료를 소개하는 사이트 (한국어)
- 이 강좌에서는: 4강 소규모 사업체·회사(★★) 의 서비스 소개 부분과 닮았고, 길게 이어지는 한 페이지라 랜딩페이지 과정과도 이어집니다.
- 눈여겨볼 섹션: ① 맨 위 히어로와 이벤트 안내 ② 번호를 붙여 이어 가는 설명 섹션 ③ 영상·표를 넣은 자료 부분
💡 3곳 모두 처음부터 이렇게 크지 않았습니다. 여러분도 4강의 한 페이지 소개(★) 에서 시작해 한 섹션씩 말로 덧붙여 가면 됩니다.
따라하기: 종이에 그려보기
자, A4 용지를 한 장 꺼내서 세로로 놓아보세요. 위에서부터 아래로 내 홈페이지에 뭐가 들어갈지 네모 상자로 대충 그려봅니다.
(처음이라면 이 중 맨 위·가운데·맨 아래 세 칸만 그려도 충분합니다.)
┌──────────────────────────────┐
│ 내 이름 또는 가게 이름 │
├──────────────────────────────┤
│ │
│ 예쁜 사진 1장 + 멋진 소개글 │
│ │
├──────────────────────────────┤
│ 대표 메뉴나 내 작업물 3개 │
├──────────────────────────────┤
│ 지도 (오시는 길) │
├──────────────────────────────┤
│ 전화번호 · 인스타 주소 │
└──────────────────────────────┘
여기에 진짜 들어갈 이름과 글을 조금 적어보세요. 이 종이가 바로 4강에서 인공지능에게 보여줄 '설계도'가 됩니다!
오늘의 실습 체크
🧪 실습
- 홈페이지가 사실은 '파일 하나'라는 걸 이해했다.
- 내가 만들 홈페이지의 종류를 골랐다.
- 빈 종이에 홈페이지의 대략적인 그림을 그렸다.
다음 강의
2강에서는 인공지능 비서 프로그램(클로드 데스크탑 앱)을 내 컴퓨터에 설치하고 Code 탭을 열어 볼 거예요. 클릭 몇 번이면 끝납니다!