코드로 내 집 짓기 — 홈페이지 만들기 수업 소개·시범

STEP 1 · 소개 & 시범

홈페이지 = 인터넷에 지은 ‘내 집’

집을 4부분으로 나눠 보면 홈페이지가 한눈에 들어옵니다.

① 주소 · ② 화면 · ③ 데이터 · ④ 호스팅 — 이 4가지가 홈페이지의 전부입니다.

🏠 시범 홈페이지 보기 (결 인테리어 목공)

완성된 ‘작은 집’ 하나를 먼저 보고 시작합니다.

STEP 2 · 사고의 확장 (컨설팅)

코딩 전에 — 먼저 ‘생각’을 짓는다

집의 모양(브랜드·고객·동선)은 내가 정하는 것(Work)입니다. AI를 ‘컨설턴트’로 써서 생각을 넓혀 보세요.

홈페이지는 흩어진 도구를 잇는 ‘현관’. 그 현관을 어떻게 꾸밀지 먼저 정리합니다.

📋 그대로 복사해서 Claude에 쓰는 컨설팅 프롬프트 4개

C1 · 내 브랜드 한 줄 찾기

나는 [지역]에서 [업종]을 한다. 내 강점은 [ ], 주 고객은 [ ]야. 고객 마음에 남을 브랜드 한 줄 문구 후보 5개와 각 이유를 만들어줘.

C2 · 내 고객·차별점 정리

내 사업을 컨설팅해줘. 질문을 하나씩 던져서 내 주 고객이 누구인지, 경쟁자와 다른 점 3가지를 같이 정리하자. 한 번에 하나씩 물어봐.

C3 · 손님 동선 설계

홈페이지에 들어온 손님이 ‘상담 신청’까지 가게 하려면 어떤 순서로 보여줘야 할까? 내 도구는 [웹폼·견적기·인스타]야. 섹션 순서를 추천해줘.

C4 · Work / Labor 나누기

내 일을 ‘내가 직접 생각할 것(Work)’과 ‘AI에 맡길 반복(Labor)’으로 표로 나눠줘. 업종은 [ ]. 그래서 오늘 나는 Work에 집중한다.

💡 이 단계의 목표는 코드가 아니라 ‘내 생각’입니다. 여기서 정한 한 줄·고객·동선이 다음 단계에서 홈페이지 내용이 됩니다.

STEP 3 · 코드로 만들기

이제 ‘말로 시켜’ 집을 짓는다

코딩은 AI가 하는 일(Labor). 아래 순서대로 말하면 됩니다.

🤖 표시만 AI(토큰) 사용 — 가볍습니다. 저장·드래그는 무료, 토큰 0.

💬 그대로 따라 쓰는 코드 프롬프트 6개

PROMPT 1 · 뼈대 만들기

나는 인테리어 목수다. 상담 웹폼·견적기·인스타를 한곳에 모으는 1페이지 홈페이지를 만들어줘. 휴대폰에서 잘 보이게. 먼저 화면 구성을 글로 설명하고 내 확인을 받은 뒤 코드를 줘.

PROMPT 2 · 내 정보·링크 채우기

아래 내 정보로 채우고 버튼이 실제 링크로 연결되게 해줘. 상호 [ ] · 브랜드 한 줄 [ ] · 전화 [ ] · 웹폼 URL [ ] · 인스타 [ ]

PROMPT 3 · 작업 사진 갤러리

작업 사진 [N]장 갤러리를 만들어줘. 사진 자리는 나중에 교체할 수 있게 하고, 휴대폰에서 누르면 크게 보이게.

PROMPT 4 · 디자인 다듬기

전체를 [내 톤/색]으로 다듬어줘. 첫 화면의 한 줄 카피와 [상담 신청] 버튼이 가장 눈에 띄게, 글자·버튼 크기 적당히.

PROMPT 5 · 인터넷에 올리기

이 HTML을 Netlify에 올려 ‘내 집 주소’를 만들고 싶어. 1·2·3 단계로 알려줘. 사이트 이름을 [내 상호]로 정하는 법도.

PROMPT 6 · 말로 고쳐가기

이 섹션을 위로 / 이 문구를 바꿔줘 / 색을 더 차분하게. (에러 나면) 이 메시지 그대로 붙여넣을게, 고쳐줘: [에러]

💰 비용: 만들기·올리기 모두 무료(내상호.netlify.app). 정식 주소(내상호.com)만 원하면 연 1~2만원. 처음엔 무료 주소로 시작 → 나중에 도메인.

오늘 체크리스트

여기까지 하면 ‘문 연 집’ 완성. 완벽한 집이 아니라 — 오늘 주소를 만들고, 매주 방을 더합니다.

STEP 2 — 컨설팅 프롬프트로 내 브랜드 한 줄·고객·동선 정리
PROMPT 1~2 — 내 정보·링크가 들어간 홈페이지가 ‘작동’
PROMPT 3~4 — 갤러리 + 디자인. [상담 신청] 버튼이 내 웹폼으로 연결
PROMPT 5 — Netlify에 올려 ‘내 집 주소’ 확보 → 단톡방에 공유

기억하세요 — 이 집이 곧 내 무대입니다. 흩어진 도구를 한 현관으로 모으면, 고객은 헤매지 않고 들어옵니다.