홈페이지 제작

AI에게 읽히는 홈페이지의 보이지 않는 장치 5가지

화면에는 보이지 않지만, 정보를 정확히 읽도록 돕는 장치입니다. 아래 프롬프트가 모두 만들어 주니, 직접 코드를 짜지 않아도 됩니다.

1. 구조화 데이터(JSON-LD) : AI용 명함입니다. 회사·서비스·주소·자주 묻는 질문을 기계가 읽는 형식으로 적어 둡니다.
2. sitemap.xml : 우리 홈페이지에 어떤 페이지가 있는지 알려 주는 목록표입니다.
3. robots.txt : 검색 로봇에게 보여 주는 안내문입니다. 목록표가 어디 있는지 알려 줍니다.
4. 페이지 이름표(title · description · canonical) : 페이지마다 제목과 설명, 대표 주소를 붙여 혼동을 막습니다.
5. FAQ : 고객이 실제로 묻는 질문과 답입니다. AI가 답변을 만들 때 가져다 쓰기 좋은 형태입니다.

우리 홈페이지에 있는지 1분 확인: (노트북 권장) ① 내 홈페이지 주소 뒤에 /robots.txt 를 붙여 열어 봅니다. ② 주소 뒤에 /sitemap.xml 을 붙여 열어 봅니다. ③ 홈페이지에서 Ctrl + U (소스 보기) → Ctrl + F → ld+json 을 검색합니다. 내용이 나오면 있는 것이고, '찾을 수 없음'이 나오면 없는 경우가 많습니다. (홈페이지 제작 서비스에 따라 자동으로 만들어 주는 곳도 있고, 다른 위치에 있을 수도 있습니다.)

알아 둘 점: 이 장치들은 AI와 검색 로봇이 정보를 읽기 좋게 돕는 기본기입니다. 이것만으로 AI 추천이 보장되지는 않습니다.

Claude Code 켜기

1. VS Code를 엽니다. (바탕화면이나 시작 메뉴의 파란색 아이콘)
2. 위쪽 메뉴 File(파일) → Open Folder(폴더 열기) 를 클릭하고, 1회차에서 만든 실습 폴더(예: AI1gi)를 선택합니다.
3. "이 폴더의 작성자를 신뢰하시나요?" 같은 창이 나오면 Yes, I trust the authors(예, 신뢰합니다) 를 클릭합니다.
4. 왼쪽 아이콘 줄의 Claude 아이콘(주황색 별 모양)을 클릭합니다.
5. New session(새 대화) 을 클릭하면 대화창이 열립니다.
6. 대화창 아래 입력칸이 보이면 준비 끝입니다. 입력칸 옆 모드 버튼을 Auto로 한 번만 바꿔 두면 허용 버튼이 확 줄어듭니다.

프롬프트 붙여넣는 법

1. 아래 상자의 복사 버튼을 클릭합니다. (복사됨 표시가 나옵니다)
2. Claude Code 대화창 아래 입력칸을 한 번 클릭하고 Ctrl + V (Mac은 Command + V)를 누릅니다.
3. 붙여넣은 글 중 [대괄호] 안의 내용은 내 정보로 바꿔 씁니다.
4. 글이 너무 길면 입력창에 [Pasted text +350 lines] 처럼 줄여서 보일 수 있습니다. 정상이니 놀라지 말고 그대로 두세요.
5. "실행해도 될까요?" 하고 물으면 Yes(허용) 를 클릭합니다.
6. AI가 질문하면: 같은 입력창에 답을 글자로 쓰고 Enter 를 누르세요. 모르면 모르겠어 라고 쓰면 됩니다.
7. 수업을 끝낼 때는 VS Code를 그냥 닫으면 됩니다. 다음에 Claude 아이콘을 누르면 지난 대화도 다시 열 수 있습니다.

준비 · 내 사진과 로고 먼저 넣어두기 (홈페이지를 만들기 전에)

실제 사진과 로고가 들어가야 홈페이지가 훨씬 고급스럽게 나옵니다. 만들기 전에 먼저 넣어 두세요.

사진을 아직 못 모았어도 괜찮습니다. 홈페이지에는 사진·영상 자리가 미리 만들어지고, 자리마다 파일 이름이 작게 적혀 있습니다. 나중에 그 이름으로 사진이나 영상을 images 폴더에 넣고 새로고침(F5)하면 자동으로 채워집니다. 영상은 hero.mp4(첫 화면 배경), intro.mp4(소개 영상)로 넣으세요.

1. 컴퓨터에 아래 파일을 한 곳에 모아 둡니다. 많을수록 좋습니다. (사진 8~15장 권장)
   · 로고 (배경이 투명한 PNG가 가장 좋습니다)
   · 대표 사진 (내 얼굴·프로필 사진)
   · 공간·매장 사진
   · 서비스 진행 모습, 결과물·작업 사진
   · 이미 정해 둔 브랜드 색, 글꼴 이 있으면 이름을 적어 둡니다.
2. VS Code 왼쪽 파일 목록(Explorer, 탐색기)의 빈 곳을 오른쪽 클릭 → New Folder(새 폴더) → 이름 homepage 를 입력하고 Enter를 누릅니다.
3. homepage 폴더를 오른쪽 클릭 → New Folder(새 폴더) → 이름 images 를 입력하고 Enter를 누릅니다.
4. 모아 둔 사진과 로고 파일을 마우스로 끌어서 images 폴더 위에 놓습니다. 확인 창이 나오면 복사(Copy) 를 선택합니다.
5. 파일 이름을 이렇게 바꿔 주세요. 이름만 보고 홈페이지가 알아서 알맞은 자리에 넣습니다. 번호는 이어서 붙입니다.

   파일 이름	어떤 사진인가요
   logo.png	로고
   profile-1.jpg, profile-2.jpg	대표님 얼굴·프로필 사진
   space-1.jpg, space-2.jpg …	매장·공간 사진
   product-1.jpg ~ product-20.jpg …	제품·작업 결과물 사진 (많을수록 좋습니다. 갤러리가 만들어집니다)
   service-1.jpg, service-2.jpg …	서비스를 하는 모습
   hero.jpg	첫 화면에 크게 쓸 대표 사진 (선택)

6. 사진 한 장은 2MB 이하로 줄여 두면 홈페이지가 빨리 열립니다. (스마트폰 사진은 그대로 쓰면 너무 큰 경우가 많습니다) 파일이 너무 크면 AI에게 "사진 크기를 줄이는 방법을 알려줘"라고 물어보세요.
7. 사진은 가로 1600px 이상이면 선명하게 나옵니다. 너무 작은 사진은 흐려 보일 수 있습니다.
8. 강렬한 사진 고르는 법
   · 첫 화면용 hero.jpg 는 가로로 넓고 가장 인상 깊은 사진 1~3장을 고릅니다. (대표님 모습, 제품이 가득한 장면, 공간 전체)
   · 밝고 선명하고, 배경이 복잡하지 않은 사진이 좋습니다. 흔들린 사진, 어두운 사진, 작은 사진은 빼세요.
   · 얼굴과 제품은 가까이서 크게 찍은 사진(클로즈업)이 강렬합니다.
   · 같은 분위기(같은 조명, 비슷한 색감)의 사진끼리 모으면 훨씬 고급스럽습니다.
   · 스마트폰으로 찍을 때는 창가 자연광에서, 렌즈를 깨끗이 닦고 찍으세요.

1브랜드 기본정보 입력

2기본정보 AI로 채우기

3홈페이지 프롬프트

내 홈페이지 열어보기

1. Claude Code가 "다 만들었다"고 알려주면, VS Code 왼쪽의 파일 목록(Explorer, 탐색기)에 새 폴더와 파일들이 생긴 것을 확인합니다.
2. 내 컴퓨터에서 실습 폴더를 열고, 홈페이지 폴더 안의 index.html 파일을 더블클릭합니다.
3. 브라우저에 내 홈페이지가 열리면 성공입니다. 글자나 색을 바꾸고 싶으면, Claude Code 입력창에 "대표 문구를 이렇게 바꿔줘"처럼 쉬운 말로 요청합니다.
4. 고친 뒤에는 브라우저에서 F5 (새로고침)를 눌러 바뀐 모습을 봅니다.
5. 인터넷에 올리는 방법은 3회차에서 합니다. 홈페이지 폴더를 지우지 말고 그대로 두세요.

① 첫 화면(히어로) 멋있게 만들기

방문자가 가장 먼저 보는 화면입니다. 여기에 가장 많이 신경 쓰세요.

지금 만든 홈페이지의 첫 화면(히어로)을 훨씬 멋있게 다시 만들어줘. 다른 페이지와 글은 그대로 두고 첫 화면만 바꿔줘.

- 방문자가 3초 안에 "여기가 나에게 맞는 곳이구나"라고 느끼게 만들어줘. 구성은 이렇게 해줘.
  ① 맨 위 큰 문장 1줄: 고객의 고민을 해결해 준다는 약속
  ② 그 아래 보조 설명 1~2줄
  ③ 버튼 2개: 가장 하고 싶은 행동(예약·문의·신청) 1개는 눈에 확 띄게, 보조 버튼 1개는 은은하게
- 문장은 입력한 브랜드 정보와 방향표.md에 있는 내용으로만 써줘. 없는 숫자, 후기, 수상, 실적은 절대 만들지 마.
- 업종 분위기에 맞는 배경(부드러운 그라데이션이나 은은한 도형)과 넉넉한 여백, 큰 글자로 고급스럽고 시원하게 만들어줘. 글자가 배경 위에서 또렷하게 읽혀야 해.
- 사진이 있으면 images 폴더의 사진을 쓰고, 없으면 사진 없이도 멋있게 만들어줘.
- 첫 화면이 나타날 때 부드럽게 올라오는 가벼운 움직임을 넣어줘. 과하지 않게.
- 휴대폰에서도 글자가 잘리지 않고, 버튼이 누르기 쉽게 해줘.

다 하고 나면 어떤 점을 바꿨는지 쉬운 말로 3줄로 알려줘.

② 무료 템플릿 사이트에서 멋있는 부품 고르기

전문가가 만들어 둔 멋있는 버튼, 배경, 글자 효과를 무료로 가져다 쓸 수 있습니다. 아래에서 파란 글씨를 클릭하면 새 창으로 열립니다. 한 번에 하나씩만 해보세요.

1. 위 표에서 바꾸고 싶은 곳의 사이트를 클릭합니다.
2. 마음에 드는 부품을 클릭합니다. 움직이는 모습을 미리 볼 수 있습니다.
3. Code(코드) 탭 또는 HTML 탭과 CSS 탭을 클릭합니다.
4. 코드 오른쪽 위의 복사(Copy) 버튼을 클릭합니다. 탭이 여러 개면 탭마다 따로 복사해서 이어 붙입니다.
5. 복사한 코드는 아래 ③ 프롬프트에 붙여넣을 것이니 그대로 두세요.

참고: 이 부품들은 홈페이지에 쓰는 것이 허용되어 있습니다. 다만 부품 자체를 그대로 다시 판매하는 것은 안 됩니다. 사이트 화면과 메뉴 이름은 바뀔 수 있습니다.

③ 고른 부품을 내 홈페이지에 넣기

1. 먼저 안전하게 homepage 폴더를 복사해 둡니다. 컴퓨터에서 폴더를 오른쪽 클릭 → 복사 → 같은 곳에서 오른쪽 클릭 → 붙여넣기 하고, 이름을 homepage_백업 으로 바꿉니다. (잘못되면 이 폴더로 되돌릴 수 있습니다)
2. 아래 프롬프트를 복사해서 Claude Code에 붙여넣습니다.
3. [바꿀 곳] 은 내가 바꾸고 싶은 곳으로 고쳐 쓰고, [복사한 코드] 아래에 ②에서 복사한 코드를 붙여넣고 Enter를 누릅니다.
4. 브라우저에서 F5 로 새로고침해서 확인합니다.

내 홈페이지의 [바꿀 곳]을 아래에 붙여넣은 코드로 바꿔줘.

- 이 코드는 다른 사이트에서 가져온 부품이야. 내 홈페이지(일반 HTML, CSS, JS 파일)에서 그대로 작동하도록 바꿔서 넣어줘. 따로 설치해야 하는 방식은 쓰지 말고, 필요하면 파일 안에 직접 넣어줘.
- 지금 홈페이지의 색, 글꼴, 글 내용은 그대로 유지하고, 모양과 움직임만 바꿔줘. 코드 안의 영어 글자(예: Button, Click me)는 내 홈페이지의 문구로 바꿔줘.
- 기존 링크와 전화 연결, 문의 기능은 그대로 작동해야 해.
- 휴대폰 화면에서도 잘 보이게 해줘.
- 다 하고 나면 무엇을 어디에 넣었는지 쉬운 말로 알려줘.

[바꿀 곳]: 예) 첫 화면 배경(id가 hero-bg인 부분) / 첫 화면의 큰 제목(id가 hero-title인 부분) / 첫 화면의 "전화로 문의하기" 버튼(class가 btn-primary인 부분) / 문의 신청칸

[복사한 코드]:
여기에 붙여넣기

안 됐을 때 (화면이 깨지거나 안 나올 때)

이 부품들은 원래 다른 환경용으로 만들어진 것이라 내 홈페이지에 안 맞을 수 있습니다. 그럴 때 아래를 보내세요. 그래도 안 되면 다른 부품을 골라 다시 해보세요.

방금 바꾼 것이 화면에 안 나오거나 깨져 보여. 방금 바꾼 부분만 원래대로 되돌려줘. 그리고 같은 느낌을 다른 프로그램을 가져다 쓰지 말고, 간단한 CSS만으로 최대한 비슷하게 다시 만들어줘.

④ 나중에 사진과 로고를 추가·교체하기

1. 컴퓨터에 사진과 로고 파일을 한 곳에 모아 둡니다. (파일 이름 규칙은 위쪽 "준비" 단계를 보세요)
2. VS Code 왼쪽 파일 목록(Explorer, 탐색기)에서 homepage 폴더 안에 images 폴더가 있는지 확인합니다. 없으면 homepage 폴더를 오른쪽 클릭 → New Folder(새 폴더) → 이름 images 를 입력하고 Enter를 누릅니다.
3. 모아 둔 사진 파일을 마우스로 끌어서 images 폴더 위에 놓습니다. 확인 창이 나오면 복사(Copy) 를 선택합니다.
4. 사진 파일 이름은 영어나 숫자로 바꿔 두면 더 안전합니다. (예: logo.png, hero.jpg)
5. 아래 프롬프트를 보내서 홈페이지에 넣습니다.

⑤ 사진과 로고 홈페이지에 넣기

사진이 없으면 건너뛰어도 됩니다.

homepage 폴더 안의 images 폴더에 내가 넣은 사진과 로고를 홈페이지에 넣어줘.

- 로고 파일은 맨 위 메뉴 왼쪽과 맨 아래 푸터에 넣어줘.
- 사진은 파일 이름과 내용을 보고, 첫 화면·소개·서비스 소개처럼 어울리는 자리에 넣어줘. 어떤 사진을 어디에 넣었는지 표로 알려줘.
- 사진 용량이 너무 커서 홈페이지가 느려질 것 같으면 알려줘.
- 이미지마다 검색에 도움이 되는 짧은 설명(alt)을 써줘. 사진 속 사람이 누구인지는 지어내지 마.
- 사진이 없는 자리는 비워 두지 말고, 어울리는 배경 디자인으로 대신해줘.

⑥ 제품·작업 사진 갤러리 만들기

제품이나 작업 결과물 사진이 많은 분은 꼭 해보세요. 사진 이름이 product-1.jpg 처럼 되어 있어야 합니다. 사진이 없으면 건너뛰세요.

homepage/images 폴더에서 이름이 product 로 시작하는 사진으로 "제품·작업 갤러리"를 만들어줘.

- gallery.html 페이지를 새로 만들고, 상단 메뉴에 "갤러리"를 추가해줘. (제품을 파는 업종이면 "제품"이라고 써줘)
- 사진은 격자로 보여주고, 모바일에서는 2열로 보여줘. 사진 이름 순서대로 정렬해줘.
- 사진을 누르면 화면 가득 크게 보이고, 좌우 화살표나 밀기로 다음 사진을 볼 수 있게 해줘. 닫기 버튼도 넣어줘.
- 메인 페이지에는 대표 사진 6장만 보여주는 갤러리 섹션과 "전체 보기" 버튼을 넣어줘.
- 사진이 많아도 빨리 열리도록 지연 로딩을 적용하고, 사진 비율이 달라도 예쁘게 정리해줘.
- 사진마다 보이는 모습을 설명하는 짧은 alt 글을 써줘. 제품 이름, 가격, 효과는 내가 알려주기 전에는 절대 지어내지 마.
- 사진 중에 너무 크거나 흐린 것이 있으면 알려줘.
- 기존 페이지의 디자인과 메뉴, 푸터는 그대로 통일해줘.

⑦ 강렬한 이미지 섹션 추가하기

사진이 화면을 가득 채우는 큰 섹션을 더합니다. 사진이 4장 이상 있을 때 가장 효과가 큽니다.

homepage 폴더의 홈페이지에 "강렬한 이미지 섹션"을 추가해줘. homepage/images 폴더의 내 사진을 먼저 하나씩 열어서 보고 시작해줘.

- 메인 페이지에 화면 폭 전체를 쓰는 대형 이미지 섹션을 3개 추가해줘. 각 섹션은 화면 높이의 70~100%를 차지하고, 사진 위에 어두운 막을 씌운 뒤 큰 글자 한 문장을 올려줘. 문장은 내가 입력한 정보에 있는 내용으로만 써줘.
- 같은 사진도 얼굴이나 제품을 크게 확대한 클로즈업으로 보여줘.
- 사진과 글이 화면 반반으로 나뉜 섹션도 하나 넣고, 사진 쪽은 화면 끝까지 꽉 차게 해줘.
- 마우스를 올리면 사진이 천천히 확대되고, 스크롤하면 사진이 천천히 다르게 움직이게 해줘.
- 첫 화면의 큰 사진(hero 파일)은 화면 가득 채워줘. 기존 id(hero-bg 등)는 그대로 두고 디자인과 색은 그대로 유지해줘.
- 없는 사진을 만들거나 다른 사이트의 이미지를 가져오지 마. 약해 보이는 사진(흐림, 어두움, 작음)이 있으면 알려줘.
- 휴대폰에서도 글자가 사진 위에서 또렷하게 읽히게 해줘.

⑧-1 내 SNS 주소 찾는 법

주소는 내 계정에서 복사해서 아래 프롬프트의 [여기에 내 주소] 자리에 붙여넣으세요. 화면 이름은 업데이트로 조금 달라질 수 있습니다.

1. 인스타그램: instagram.com/내아이디 형태입니다. 내 프로필 화면에서 아이디를 확인하고 앞에 https://www.instagram.com/ 를 붙입니다.
2. 네이버 블로그: https://blog.naver.com/내아이디 입니다. 블로그 주소창의 주소를 복사해도 됩니다.
3. 카카오톡 채널: 카카오 비즈니스의 채널 관리자센터에서 내 채널을 열고, 채널 URL(주소)을 복사합니다. pf.kakao.com/_ 로 시작합니다.
4. 네이버 플레이스: 네이버 지도에서 내 업체를 검색해 열고, 공유 버튼 → URL 복사 를 누릅니다.
5. 유튜브: 내 채널 화면에서 주소창의 주소(youtube.com/@내핸들)를 복사합니다.

아이콘은 홈페이지가 어울리는 단순한 선 아이콘으로 만들어 줍니다. 각 플랫폼의 공식 로고 이미지를 쓰고 싶다면, 로고 파일을 icon-instagram.png, icon-blog.png, icon-kakao.png, icon-place.png, icon-youtube.png 이름으로 images 폴더에 넣으세요. 홈페이지가 그 파일을 아이콘으로 씁니다. 공식 로고는 각 플랫폼의 사용 규칙을 따라야 합니다.

⑧ SNS와 문의 버튼 연결하기

보내기 전에 [여기에 내 주소] 를 내 주소로 바꿔 쓰세요. 없는 항목은 그 줄을 지우세요.

홈페이지에 내 SNS와 채널을 연결해줘.

- 아래 주소를 맨 위 또는 맨 아래(푸터)에 아이콘 버튼으로 넣어줘. 눌렀을 때 새 창으로 열리게 해줘.
  · 인스타그램: [여기에 내 주소]
  · 네이버 블로그: [여기에 내 주소]
  · 카카오톡 채널: [여기에 내 주소]
  · 네이버 플레이스: [여기에 내 주소]
  · 유튜브: [여기에 내 주소]
- 주소를 적지 않은 항목은 아이콘을 만들지 말고 빼줘.
- 화면 오른쪽 아래에 "문의하기" 버튼을 항상 보이게 고정해줘. 카카오톡 채널 주소가 있으면 그쪽으로, 없으면 입력된 전화번호로 연결해줘.
- 휴대폰에서 전화 버튼을 누르면 바로 전화가 걸리게 해줘.
- 내가 알려주지 않은 주소와 전화번호는 절대 만들지 마.

⑨ 색과 분위기 바꾸기

[ ] 안은 내가 원하는 것으로 바꿔 쓰세요.

홈페이지 전체의 색을 더 맑고 세련되게 바꿔줘. 글과 구조는 그대로 두고 색, 글꼴, 여백만 바꿔줘.

원하는 분위기: [예: 맑고 세련되게 / 화사하고 우아하게 / 신선하고 건강하게 / 고급스럽고 감각적으로]
대표 색: [예: 파랑 / 분홍 / 잘 모르겠으면 "업종에 어울리게 정해줘"라고 적기]

세련되게 만드는 규칙:
- 지금 색이 칙칙하고 탁해 보여. 갈색, 회갈색, 누런 크림색, 탁한 베이지는 모두 없애줘.
- 색 계열은 1개만 쓰고, 깨끗한 밝은 색, 아주 진한 먹색(또는 깊은 남색), 선명한 강조색 1개만 더해줘.
- 바탕은 흰색에 가까운 맑고 깨끗한 색으로 하고, 어두운 섹션은 깊고 맑은 먹색·남색·짙은 녹색으로 해줘.
- 강조색은 선명하고 채도가 있는 색으로 정하고, 버튼과 핵심 단어에만 써줘. (바탕 60 : 보조 30 : 강조 10)
- 색에 회색이나 갈색을 섞어 탁하게 만들지 마. 그라데이션도 맑게 이어지는 같은 계열로만 써줘.

바꾼 뒤에 글자가 배경 위에서 또렷하게 읽히는지 점검하고, 읽기 어려운 곳은 고쳐줘. 어떤 색을 어디에 썼는지 색 이름과 함께 쉬운 말로 알려줘.

⑩ 휴대폰 화면 점검하기

마지막에 꼭 한 번 보내세요. 요즘 방문자는 대부분 휴대폰으로 봅니다.

홈페이지를 휴대폰 화면 기준으로 점검하고 고쳐줘. 글자가 너무 작거나 잘리는 곳, 버튼이 작아서 누르기 어려운 곳, 사진이 화면 밖으로 넘치는 곳, 메뉴가 열리지 않는 곳을 찾아서 직접 고쳐줘. 글 내용은 바꾸지 마. 다 하고 나면 무엇을 고쳤는지 쉬운 말로 알려줘.

⑪ 안 쓴 빈 사진 자리 정리하기

사진을 다 넣은 뒤에도 비어 있는 자리가 있으면, 마지막에 한 번 보내서 깔끔하게 지웁니다.

homepage 폴더의 홈페이지에서, 사진이나 영상 파일이 없어서 아직 "사진 자리"로 보이는 빈 자리를 정리해줘.

- homepage/images 폴더에 실제로 있는 파일만 확인하고, 파일이 없는 자리는 홈페이지에서 지워줘.
- 자리가 지워진 섹션은 남은 사진으로 간격과 배치를 다시 예쁘게 맞춰줘. 사진이 없어서 비게 된 섹션은 통째로 빼줘.
- 갤러리 페이지는 실제로 있는 제품 사진만 보이게 해줘.
- 영상 파일(hero.mp4, intro.mp4)이 없으면 그 자리도 지워줘.
- 글과 색, 디자인은 그대로 두고, 무엇을 지웠는지 쉬운 말로 알려줘.

글쓰기 자동화 설치 프롬프트