웹사이트 · 처음이면 이것부터
한 장짜리 가게 소개 페이지를 인터넷에 올리기
오늘 안에 내 가게 소개 페이지가 생기고, 누구에게나 보낼 수 있는 주소가 생겨요.
- 걸리는 시간
- 1시간 안팎
- 비용
- 0원(클로드 무료 요금제, Netlify 무료 요금제)
- 준비
- 컴퓨터 한 대(마지막 공개 단계는 파일을 끌어다 놓아야 해서 휴대폰으로는 어려워요)
- 가게 정보 다섯 줄: 누가 보는지, 바라는 행동 하나, 분위기, 주소·시간·가격, 연락 방법
- 사진 2장(가게 앞, 대표 상품)
아래 지시문은 클로드(claude.ai)에서 실제로 넣어 본 그대로예요. 챗GPT·제미나이에 넣어도 같은 흐름으로 돼요. [ ] 안은 내 가게 내용으로 바꾸고, 연습이면 그대로 두세요.
바로 만들지 말고, 질문부터 받기
클로드에서 새 대화를 열고 아래를 붙여 넣어요.
이렇게 입력하세요나는 [망원동에서 작은 꽃집]을 해. 가게를 소개하는 한 장짜리 홈페이지를 만들고 싶어. 바로 만들지 말고, 먼저 나한테 필요한 걸 질문해 줘. - 질문은 5개 이하, 내가 한두 줄로 답할 수 있게 - 꼭 물어볼 것: 누가 이 페이지를 보는지, 본 사람이 결국 해 줬으면 하는 행동 하나(전화·카톡 문의·예약 중)
이렇게 질문이 오면 성공
망원동 꽃집 홈페이지를 만들기 전에 몇 가지만 여쭤볼게요. 한두 줄로 답해 주세요.
- 누가 보나요? 주로 어떤 분들이 이 페이지를 보게 될까요? (예: 동네 주민, 선물 고르는 직장인, 웨딩·행사 준비하는 분, 인스타 보고 온 분)
- 보고 나서 하길 바라는 행동 하나는? 전화, 카톡 문의, 예약 중에 무엇인가요? 전화번호, 카톡 채널 링크, 예약 방법도 알려 주세요.
- 가게의 분위기와 강점은? 어떤 느낌의 가게인가요? (예: 내추럴하고 아담한, 화사한) 다른 꽃집과 다른 점이 있다면 한 줄로 적어 주세요. (예: 당일 배송, 주문 제작 꽃다발, 원데이 클래스)
- 페이지에 꼭 넣을 정보는? 주소, 영업시간, 휴무일, 대표 상품과 가격대 중에 넣고 싶은 걸 알려 주세요. 인스타 계정이 있으면 함께 적어 주세요.
- 사진은 있나요? 가게나 꽃다발 사진이 있으면 파일이 있는 위치를 알려 주세요. 없으면 임시 이미지로 자리만 잡아 둘게요.
흔한 실수처음부터 '홈페이지 만들어 줘'라고만 하면, AI가 가게 정보를 지어내서 채워요. 고치는 데 시간이 더 들어요.
답하고, 순서와 문구부터 정하기
질문에 한두 줄씩 답하고, 만들기 전에 순서와 문구만 먼저 받아요.
이렇게 입력하세요1. [동네 주민, 망원시장 왔다가 인스타 보고 찾는 20~30대, 기념일 꽃 사려는 직장인] 2. [카톡 문의. 카톡 채널 주소는 아직 없으니 자리만 만들어 줘] 3. [차분하고 내추럴한 느낌. 그날 들어온 제철 꽃으로만 묶고, 포장을 최소로 해서 쓰레기가 적어] 4. [주소 서울 마포구 망원로 00, 영업 11시~20시, 월요일 휴무, 꽃다발 2만5천원부터, 당일 픽업은 오후 3시까지 주문, 인스타 @jagunsup_flower] 5. [사진 2장 있어: 가게 앞 사진(photo1.jpg), 꽃다발 사진(photo2.jpg)] 이제 페이지에 들어갈 내용을 위에서부터 순서대로 정리해 줘. 맨 위 한 줄 소개, 버튼 문구, 그 아래 칸들. 아직 만들지는 말고 순서와 문구만.
이렇게 칸 순서와 문구가 오면 성공
아직 만들지 않고 순서와 문구만 정리했어요. 대괄호 [ ]는 확정이 안 된 자리예요.
1. 맨 위 (첫 화면)
- 가게 이름: [가게 이름]. 인스타 아이디만 봐서는 정확한 상호를 몰라요. 알려 주세요.
- 한 줄 소개: 오늘 들어온 꽃으로만 묶어요. 망원동의 작은 꽃집
- 보조 문구: 포장은 최소로, 꽃은 가장 좋은 때에.
- 버튼: 카톡으로 문의하기 (카톡 채널 주소는 [카톡 채널 링크] 자리로 둠)
- 배경 사진: photo1.jpg (가게 앞)
2. 가게 소개 ("이런 꽃집이에요")
- 제목: 그날 들어온 꽃으로만 묶어요
- 본문: 정해진 메뉴 대신 그날 시장에 나온 제철 꽃으로 다발을 만들어요. 그래서 같은 꽃다발은 하루도 없어요. 포장은 꼭 필요한 만큼만 해서 집에 가져가신 뒤 남는 쓰레기가 적어요.
- 사진: photo2.jpg (꽃다발)
3. 이런 분께 (세 줄 요약)
- 동네 주민: 집에 두고 싶은 꽃을 가볍게 사 가세요.
- 망원시장 오신 길에: 장 보고 오는 길에 들러 가세요.
- 기념일 선물: 말하지 않아도 마음이 전해지는 꽃다발이에요.
4. 가격과 주문 안내
- 제목: 꽃다발은 25,000원부터
- 안내 문구
- 예산과 분위기를 카톡으로 알려 주시면 맞춰서 묶어 드려요.
- 당일 픽업은 오후 3시까지 주문해 주세요.
- 버튼: 카톡으로 문의하기
5. 오시는 길
- 주소: 서울 마포구 망원로 00 (동 번지는 [정확한 주소]로 채워 주세요)
- 영업시간: 11:00 – 20:00
- 휴무: 매주 월요일
- 지도 링크: 네이버 지도 [링크] (주소만 알려 주시면 제가 만들어 둘게요)
6. 맨 아래 (마무리)
- 문구: 오늘은 어떤 꽃이 들어왔을까요? 인스타에서 먼저 만나 보세요.
- 링크: 인스타그램 @jagunsup_flower
- 버튼: 카톡으로 문의하기 (맨 위, 가격 칸, 맨 아래 세 곳에 같은 버튼을 둬서 어디서든 바로 누를 수 있게 했어요.)
확인이 필요한 것
- 가게 이름이 무엇인지요?
- 제가 지어낸 문구 중 "같은 꽃다발은 하루도 없어요", "가볍게 사 가세요" 같은 표현이 가게 말투와 맞는지요? 어색한 건 바꿔 주세요.
- 주소 뒤의 번지수는 무엇인지요?
이 순서와 문구로 괜찮으면 알려 주세요. 바로 만들게요.
흔한 실수문구가 어색하면 이 단계에서 고쳐 달라고 하세요. 페이지를 만든 뒤에 문구를 바꾸면 디자인까지 같이 흔들려요.
첫 판 만들기
정리된 순서가 마음에 들면 만들어 달라고 해요. 클로드 화면 오른쪽에 결과 창이 열리고 완성된 모양이 보여요.
이렇게 입력하세요가게 이름은 [작은숲 꽃방]이야. 문구는 그대로 좋아. 번지수와 지도 링크는 자리만 남겨 줘. 이제 이 순서대로 홈페이지를 만들어 줘. - index.html 파일 하나로. 다른 프로그램 설치 없이 더블클릭하면 열리게 - 휴대폰 화면을 먼저 생각하고, 컴퓨터에서도 깨지지 않게 - 사진은 같은 폴더의 photo1.jpg, photo2.jpg를 불러오게 - [카톡] 버튼은 휴대폰에서 화면 아래에 늘 떠 있게 - 공유했을 때 미리보기에 가게 이름·한 줄 소개·photo1.jpg가 나오게 - 코드 전체를 빠짐없이 한 번에 보여 줘
휴대폰 크기에서 이렇게 보이면 성공
흔한 실수코드가 중간에 끊기면 '이어서'라고 하지 말고 'index.html 전체를 처음부터 빠짐없이 다시 보여 줘'라고 하세요. 이어 붙이다가 깨지는 일이 많아요.
파일로 저장하고 내 컴퓨터에서 열어 보기
바탕화면에 새 폴더(예: 내홈페이지)를 만들어요. 클로드 결과 창에서 내려받거나, 코드를 복사해 메모장에 붙여 넣고 이름을 index.html로 저장해요. 사진 2장을 같은 폴더에 photo1.jpg, photo2.jpg라는 이름으로 넣고 index.html을 더블클릭해요.
이렇게 되면 성공
- 폴더 안에 index.html, photo1.jpg, photo2.jpg 세 파일이 나란히 있어요
- 더블클릭하면 인터넷 창이 열리고 사진까지 보여요
- 아직 주소창은 file:// 로 시작해요. 내 컴퓨터에서만 보이는 상태예요
흔한 실수사진이 안 보이면 거의 이름 문제예요. photo1.jpg.jpg처럼 이름이 두 번 붙었거나, .jpeg·.png이거나, 아이폰 사진(HEIC)이면 안 보여요. 아래 '막힐 때'를 보세요.
휴대폰 화면 캡처를 보여 주고 다듬기
컴퓨터 인터넷 창을 휴대폰 크기로 줄이거나, 파일을 휴대폰으로 보내 열어 보고 화면을 캡처해요. 캡처를 클로드 대화에 붙이고 아래를 넣어요.
이렇게 입력하세요(휴대폰 화면 캡처를 붙인 뒤) 이 화면을 보고 아래를 점검해서 고쳐 줘. 1. AI가 만든 티가 나는 곳: 뜻 없는 장식, 모든 칸이 같은 모양, "최고의·특별한" 같은 빈말, 가게와 상관없는 아이콘 2. 휴대폰에서 불편한 곳: 글자가 작거나 버튼이 겹치거나, 떠 있는 버튼이 내용을 가리는 곳 3. 가게 분위기([차분하고 내추럴])에 안 맞는 색 먼저 고칠 곳을 짧게 목록으로 말해 주고, 고친 index.html 전체를 빠짐없이 보여 줘.
이렇게 고칠 곳 목록이 먼저 오면 성공
캡처를 보고 고칠 곳을 정리했어요.
고칠 곳
- 휴대폰에서 불편한 곳
- 첫 화면 맨 아래에 떠 있는 버튼이 위의 같은 버튼과 겹쳐서 노란 버튼이 두 개 보이고, 다음 칸 글자가 버튼 밑에서 잘려 보여요. 같은 버튼이 화면에 이미 보이면 떠 있는 버튼은 숨기고, 그 버튼들이 사라지면 다시 나타나게 했어요. 마지막 인스타 링크도 가리지 않아요.
- 첫 제목이 "오늘 들어온 꽃으로만 / 묶어요."로 끊겨서 "묶어요."만 외톨이로 남아요. 글자 크기를 화면 폭에 맞춰서 한 줄에 들어가게 했어요.
- 맨 아래 어두운 칸 밑에 베이지색 빈 띠가 남아요. 떠 있는 버튼 자리를 body에 잡아 둔 탓이어서, footer 쪽으로 옮겼어요.
- 가게 분위기에 안 맞는 색
- 카톡 노란색이 너무 쨍해서 사진의 차분한 톤을 깨요. 숲 초록 버튼으로 바꾸고, 사진 위와 어두운 칸에서는 크림색 버튼으로 바꿨어요. 글자가 "카톡으로 문의하기"라서 노란색이 아니어도 알아볼 수 있어요.
- AI가 만든 티가 나는 곳
- "이런 분께" 칸이 구분선과 굵은 소제목이 있는 반복 목록이라 템플릿처럼 보여요. 줄 구분선을 없애고 간격만 둬서 오시는 길 표와 다르게 보이게 했어요.
- 가격 칸에서 "25,000원"만 크게 보여서 가격이 눈에 먼저 들어오게 했어요.
- 지도 링크의 "→"는 뜻 없는 장식이라 뺐어요.
- 문구에는 "최고의"나 "특별한" 같은 빈말도, 아이콘도 없어서 그대로 뒀어요.
흔한 실수한 번에 열 가지를 고쳐 달라고 하면 고친 곳이 다른 곳을 망가뜨려요. 세 가지씩 고치고, 잘 된 판은 index_좋았던판.html처럼 복사해 두세요.
인터넷에 올리고 주소 받기
app.netlify.com/drop 에 들어가 '내홈페이지' 폴더를 통째로 화면에 끌어다 놓아요. 몇 초 뒤 주소가 생겨요. 이 주소는 1시간 뒤 사라지니, 화면 안내대로 무료 가입을 해서 내 것으로 만들어요. 그다음 프로젝트 설정에서 이름을 바꾸면 주소가 '이름.netlify.app'이 돼요.
이 화면에 폴더를 끌어다 놓아요
흔한 실수가입하지 않고 두면 1시간 뒤 사이트가 지워져요(Netlify 공식 문서). 폴더 안의 폴더를 올리면 'Page not found'가 떠요. index.html이 맨 위에 보이는 폴더를 올리세요.
가입 뒤 화면과 이름 바꾸기 화면은 첫 시험자가 따라 하면서 실제 화면으로 채울 거예요.
다 됐는지 확인
- 휴대폰으로 주소를 열어 끝까지 내려 보기
- 버튼을 하나씩 다 눌러 보기(카톡·지도·인스타)
- 주소·영업시간·가격이 맞는지, 오타가 없는지
- 카톡 나와의 채팅에 주소를 보내 미리보기에 사진이 나오는지
막힐 때
사진이 안 보여요
원인사진 이름이나 형식이 코드와 달라요. 파일 이름 확장자가 숨겨져 있으면 photo1.jpg.jpg가 되기 쉬워요. 아이폰 사진(HEIC)은 인터넷 창에서 안 열려요.
이렇게윈도우는 탐색기 '보기 → 파일 확장명'을 켜고 이름을 정확히 photo1.jpg로 바꿔요. 아이폰 사진은 휴대폰 사진 앱에서 공유 → 파일에 저장할 때 '가장 호환성 높은' 형식을 고르거나, 캡처해서 JPG로 받으세요.
한글이 깨져서 나와요
원인메모장이 UTF-8이 아닌 형식으로 저장했어요.
이렇게저장할 때 인코딩을 UTF-8로 고르세요. 맥 텍스트 편집기는 '포맷 → 일반 텍스트 만들기'를 먼저 눌러요.
카톡에 주소를 보냈는데 미리보기 사진이 안 나와요
원인미리보기 사진은 photo1.jpg가 아니라 https://로 시작하는 전체 주소여야 나와요. 첫 판 만들 때 클로드도 이걸 짚어 줬어요.
이렇게주소가 생긴 뒤 아래를 넣고, 새 파일로 다시 올려요.
이 홈페이지를 [https://내주소.netlify.app] 에 올렸어. 카톡으로 주소를 보내면 미리보기 사진이 안 나와. og:image와 og:url을 이 주소 기준의 전체 주소로 바꾼 index.html 전체를 보여 줘.
올렸더니 Page not found가 떠요
원인폴더 안에 폴더가 하나 더 있거나, 파일 이름이 index.html이 아니에요.
이렇게폴더를 열었을 때 index.html이 바로 보이는 그 폴더를 끌어다 놓아요.
고쳤는데 주소에 그대로예요
원인Netlify Drop에 새로 끌어다 놓으면 새 사이트가 하나 더 생겨요.
이렇게가입 뒤 내 프로젝트의 배포(Deploys) 화면에 고친 폴더를 끌어다 놓아야 같은 주소가 바뀌어요.
고칠수록 이상해져요
원인한 번에 여러 곳을 고치면 서로 부딪혀요.
이렇게잘 됐던 판 파일로 돌아가서, 아래 틀로 한 가지씩 다시 요청해요. 두 번 해도 안 되면 캡처와 함께 커뮤니티에 물어보세요.
아래 문제를 고쳐 줘. - 무엇이: [사진이 안 보여] - 어디서: [첫 화면 배경] - 기대: [가게 앞 사진이 보여야 해] - 실제: [회색 칸만 보여] 화면 캡처를 붙일게. 원인을 먼저 한 줄로 말하고, 고친 index.html 전체를 보여 줘.
다음 한 걸음
- 내 도메인 연결하기준비 중
- 예약·문의 받기준비 중
- 검색에 나오게 하기준비 중
2026-10-14에 AI Korea Club이 클로드(Sonnet)로 1~5단계를 실제로 해 보고 화면을 그대로 실었어요. 연습 가게와 사진은 지어낸 것이에요.
