사이트 만들기 따라하기

작성일: 2026-10-11

이 기록은 「AI 활용 따라하기 기록」 사이트를 실제로 만든 과정입니다. 코드를 몰라도 Claude에게 말로 시켜서 했고, 인터넷에 올리기 전까지만 했습니다.

1. 어떤 사이트로 만들었나

• 꾸밈없는 HTML 파일과 CSS 파일 하나로 만들었습니다. 자바스크립트, 외부 글꼴, 외부 스크립트는 쓰지 않았습니다.
• 페이지는 4종입니다: 첫 화면(기록 목록), 운영 방식, 기록 1편, 없는 주소 안내(404).
• 주소는 영문으로 지었습니다 (예: posts/001.html). 한글 폴더 이름은 주소에서 문제를 일으킬 수 있어 피했습니다.
• 글을 HTML로 바꿔 주는 변환 프로그램은 쓰지 않고 HTML을 직접 썼습니다. 글이 1~3편 정도일 때는 프로그램이 오히려 깨지기 쉽다고 봤기 때문입니다.

2. 만들기 전에 반박받은 3가지

만들기 전에 계획을 다른 AI(Claude 하위 에이전트)에게 보내 "어디서 틀릴 수 있나"를 공격하게 했습니다. 중요한 반박 3개와 내린 결정입니다.

1. 반박: 승인 전에 먼저 인터넷에 올리면 "승인 없이 공개하지 않는다"는 매뉴얼 규칙을 스스로 어기는 것입니다. 검색에서 빼는 설정(noindex)을 붙여도 주소만 알면 누구나 열 수 있어서 비공개가 아닙니다.
   • 결정(받아들임): 만들기와 내 컴퓨터에서 확인하기까지만 하고, 올리기는 손으로 3번 돌려 본 뒤 승인을 받고 하기로 했습니다.
2. 반박: 터미널에서 로그인하는 방식(wrangler)은 터미널을 쓰지 않는 사람에게 맞지 않습니다.
   • 결정(받아들임): 첫 업로드는 Cloudflare 화면에 폴더를 끌어다 놓는 방식으로 하기로 했습니다.
3. 반박: Claude가 직접 만들면 직원이 보고하는 연습이 안 됩니다.
   • 결정(일부 받아들임): 그 대화에서는 직원 파일이 보이지 않았습니다. 그래서 개발 직원 파일을 지시서로 받은 대리 에이전트가 사이트를 만들고, 대화하는 Claude가 마스터처럼 검수했습니다.

3. 확인한 것 4가지

1. 사이트 전체에서 이름·이메일·파일 위치처럼 올리면 안 되는 단어를 프로그램(grep)으로 찾아봤더니 나오는 것이 없었습니다.
2. 페이지 안 링크가 가리키는 파일이 모두 실제로 있었습니다.
3. 첫 기록(1편)의 사이트 본문이 원고와 글자 그대로 같았습니다.
4. Chrome을 화면 없이 띄워(헤드리스) 페이지 사진을 찍고 눈으로 봤습니다. 넓은 화면에서는 정상이었습니다.

4. 확인 못 한 것

• 내 컴퓨터에서 사이트 서버를 띄워 보는 것: 보안 제한으로 막혀서 못 했습니다.
• 실제 휴대폰 화면: 보지 못했습니다. 좁은 화면 사진은 오른쪽이 잘려 보였는데, Chrome 창의 최소 폭 때문일 것으로 추정할 뿐 확인하지는 못했습니다.
• Cloudflare 화면 문구: 아래 6번 순서에 적은 화면 문구가 실제 화면과 맞는지 맞춰 보지 못했습니다.

5. 검수 중 고친 것

없는 주소 안내(404) 페이지의 링크를 사이트 맨 위 기준으로 바꿨습니다. 깊은 주소에서 열어도 모양이 깨지지 않게 하려는 것입니다.

6. 올리는 날 순서

올릴 곳은 Cloudflare Pages의 무료 주소로 정했습니다. 계정 가입은 2026-10-11에 끝냈습니다. 사이트는 아직 인터넷에 올리지 않았습니다. 올리는 날에 할 순서는 다음과 같습니다.

1. Cloudflare 대시보드를 엽니다.
2. Workers & Pages를 누릅니다.
3. Create를 누릅니다.
4. Pages를 고릅니다.
5. Upload assets를 누릅니다.
6. 사이트 파일이 든 site 폴더를 화면에 끌어다 놓습니다.
7. Deploy를 누릅니다.

화면 문구는 실제 화면과 맞춰 보지 않았습니다. 그래서 올리는 날 화면이 다르면 그때 고쳐 적을 생각입니다.

다음 기록

손으로 3번 돌려 보기를 이어서 기록합니다.