AI로 만든 사이트를 '진짜'로 만드는 12가지

제일 빠른 방법: 한 번에 시키기

바쁘면 이것만 복사해서 클로드 코드(또는 쓰는 AI 코딩 도구)에 붙여넣으세요. 끝나면 뭘 했는지 표로 보고까지 받아요.

이 사이트를 실제로 공개할 수 있는 상태로 다듬어 줘. 아래 12가지를 하나씩 확인하고, 없으면 만들어 줘.

1. 페이지마다 서로 다른 제목(title)
2. 페이지마다 한두 문장짜리 메타 설명(meta description)
3. robots.txt (검색 로봇 출입 안내문, 사이트맵 위치 포함)
4. sitemap.xml (사이트 페이지 목록)
5. 링크 공유할 때 뜨는 OG 이미지와 og:title, og:description, og:url (주소는 전체 주소로)
6. 파비콘 (브라우저 탭에 뜨는 작은 아이콘)
7. 모든 이미지에 대체 텍스트(alt)
8. 없는 주소로 들어왔을 때 보여 줄 404 페이지 (홈으로 가는 버튼 포함)
9. 데이터를 불러오는 동안 보여 줄 로딩 표시
10. 첫 화면에서 바로 누를 수 있는 핵심 버튼 하나
11. 개인정보 처리방침 페이지 (내가 실제로 모으는 정보 기준, 모르는 건 [확인 필요]로 표시)
12. 방문자 통계 연결 자리 (어떤 도구를 쓸지는 나한테 먼저 물어봐)

사이트 이름과 주소는 나한테 물어보고 채워 줘. 끝나면 항목마다 "원래 있었음 / 새로 만듦 / 내가 정해야 함"으로 표를 만들어 보고해 줘.

1. 검색 최적화 — 구글이 내 사이트를 찾고 이해하게

① 페이지 제목 ② 메타 설명

구글에서 검색하면 파란 제목 한 줄, 그 아래 회색 설명 두 줄이 뜨죠? 그게 바로 이 두 개예요. 안 넣으면 모든 페이지 제목이 똑같거나, 검색 엔진이 본문에서 아무 문장이나 잘라다 보여 줘요. 가게로 치면 간판과 한 줄 소개예요.

페이지마다 내용에 맞는 title과 meta description을 따로 넣어 줘. 제목은 30자 안팎, 설명은 80자 안팎의 자연스러운 한국어로. 모든 페이지 제목이 같으면 안 돼.

확인하는 법: 브라우저 탭에 뜨는 제목이 페이지마다 다른지 보세요.

③ robots.txt ④ 사이트맵

검색 로봇은 구글이 사이트를 훑어보라고 보내는 프로그램이에요. robots.txt는 그 로봇한테 주는 출입 안내문("여긴 들어와도 돼요, 여긴 안 돼요")이고, **사이트맵(sitemap.xml)**은 "우리 집엔 방이 이만큼 있어요" 하는 방 목록이에요. robots.txt 안에 사이트맵 위치를 적어 두면 로봇이 바로 찾아가요.

robots.txt와 sitemap.xml을 만들어 줘. robots.txt 안에 사이트맵 전체 주소도 적어 줘. 공개 페이지는 막지 말아 줘.

확인하는 법: 내 사이트 주소 뒤에 /robots.txt, /sitemap.xml을 붙여서 열어 보세요. 글자가 뜨면 성공이에요.

흔한 실수: 개발할 때 넣어 둔 Disallow: /(전부 출입 금지)를 그대로 올려서 사이트 전체가 검색에서 빠지는 경우가 많아요. robots.txt를 열었을 때 이 줄이 있으면 지우세요. 그리고 robots.txt는 페이지를 숨기는 도구가 아니에요. 검색에서 숨기고 싶은 페이지는 따로 처리해야 해요.

2. 공유 미리보기 — 링크가 예쁘게 보이게

⑤ 공유 썸네일 (OG 이미지)

카톡에 링크 보내면 뜨는 그 미리보기 카드요. 없으면 링크가 회색 글자로만 덩그러니 가요. 이걸 정하는 규칙을 **오픈 그래프(Open Graph)**라고 하고, 기본 항목은 제목(og:title), 종류(og:type), 이미지(og:image), 주소(og:url) 네 가지예요.

링크 공유할 때 뜨는 OG 이미지(1200x630)를 만들고 og:title, og:description, og:image, og:url을 넣어 줘. 이미지 주소는 https로 시작하는 전체 주소로.

확인하는 법: 카톡 "나와의 채팅"에 내 사이트 링크를 보내 보세요.

흔한 실수: 이미지 주소를 /og.png처럼 짧게(상대 경로) 넣으면 메신저에서 못 불러와요. 전체 주소로 넣어야 해요.

⑥ 파비콘

브라우저 탭에 뜨는 작은 아이콘이에요. 없으면 회색 지구본이 떠서 "아직 공사 중인가?" 싶어 보여요.

사이트 로고(없으면 이름 첫 글자)로 파비콘을 만들어 연결해 줘. 폰 홈 화면에 추가할 때 쓰는 큰 아이콘도 같이.

⑦ 이미지 대체 텍스트 (alt)

이미지가 안 뜰 때, 그리고 화면을 소리로 읽어 주는 기능을 쓰는 분들께 대신 읽히는 설명이에요. 구글도 이걸 보고 이미지 내용을 이해해요.

모든 이미지에 내용을 설명하는 alt를 넣어 줘. 꾸밈용 이미지는 alt를 비워 둬.

3. 사용자 경험 — 쓰다가 막히지 않게

⑧ 404 페이지

주소를 잘못 쳤을 때 나오는 화면이에요. 기본 화면은 차갑고 막다른 길이라 그냥 나가 버려요. "길을 잃으셨네요, 홈으로 갈까요?" 버튼 하나면 손님이 돌아와요.

사진: MDN 문서의 404 설명. 서버가 요청한 페이지를 못 찾았다는 뜻이에요.

없는 주소로 들어왔을 때 보여 줄 404 페이지를 만들어 줘. 친절한 한 줄과 홈으로 가는 버튼, 많이 찾는 페이지 링크 두세 개를 넣어 줘.

확인하는 법: 내 주소 뒤에 아무거나(/asdf) 붙여서 들어가 보세요.

⑨ 로딩 표시

뭔가 불러오는 동안 화면이 멈춰 있으면 "고장 났나?" 하고 새로고침을 연타해요. 빙글빙글 하나면 기다려 줘요.

데이터를 불러오거나 버튼을 눌러 처리 중일 때 로딩 표시를 보여 줘. 처리 중에는 버튼을 한 번 더 못 누르게 해 줘.

⑩ 첫 화면 행동 버튼

들어오자마자 뭘 하면 되는지 알려 주는 큰 버튼 하나요. "문의하기", "시작하기", "예약하기"처럼요. 버튼이 여러 개면 아무것도 안 누르게 돼요.

첫 화면 맨 위에 이 사이트에서 제일 중요한 행동 버튼을 하나 크게 넣어 줘. 문구는 후보 3개를 먼저 보여 줘.

확인하는 법: 폰으로 열었을 때 스크롤 안 해도 버튼이 보이는지.

4. 운영에 꼭 필요한 것

⑪ 개인정보 처리방침

이름·이메일·전화번호를 하나라도 받는다면(문의 폼, 회원가입 등) 이 페이지가 있어야 해요. 받는 정보가 사이트마다 다르니, AI가 써 준 초안은 내가 실제로 모으는 것과 맞는지 꼭 읽어 보세요.

이 사이트가 실제로 수집하는 개인정보를 코드에서 찾아서 목록으로 보여 주고, 그 기준으로 개인정보 처리방침 페이지 초안을 만들어 줘. 확실하지 않은 부분은 [확인 필요]로 표시하고, 모든 페이지 아래쪽에 링크를 넣어 줘.

⑫ 방문자 통계

몇 명이 왔는지, 어느 페이지를 많이 보는지 세는 장부예요. 이게 있어야 다음에 뭘 고칠지 보여요.

방문자 통계를 붙이고 싶어. 무료로 쓸 수 있는 선택지 2~3개를 장단점과 함께 알려 주고, 내가 고르면 연결해 줘. 통계 도구를 붙이면 개인정보 처리방침에도 반영해 줘.

올리기 전 마지막 체크

• 탭 제목이 페이지마다 다르다
• 주소 뒤에 /robots.txt, /sitemap.xml을 붙이면 열리고, Disallow: /가 없다
• 카톡 나와의 채팅에 링크를 보내면 미리보기 카드가 뜬다
• 탭에 파비콘이 보인다
• 아무 주소나 붙여서 들어가면 404 페이지가 나온다
• 폰으로 열었을 때 첫 화면 버튼이 바로 보인다
• 개인정보 처리방침을 직접 한 번 읽어 봤다
• 방문자 통계에 내 방문이 찍힌다

출처

• Google 검색 센터: Robots.txt 소개
• Google 검색 센터: 사이트맵 알아보기
• Google 검색 센터: 제목 링크
• Google 이미지 검색엔진 최적화 권장사항
• The Open Graph protocol
• MDN: 404 Not Found