AI 블로그 제작기: 디자인 재작업부터 번역 오류까지

AI에 블로그를 맡기면서 먼저 정한 것

개발과 자동화에 AI를 쓰면서 쌓인 작업 기록을 블로그에 옮기기로 했다. 다만 업무 프로젝트의 코드와 데이터, 내부 운영 방식까지 공개할 생각은 없었다. 블로그를 만드는 일부터 AI에 맡기고, 그때의 요청과 수정 내용을 첫 사례로 남겼다.

AI에는 자료 조사, 구현, 테스트를 맡겼다. 나는 공개할 자료의 범위를 정하고, 디자인을 고르고, 글을 검토했다. 만드는 도중에는 폴더를 직접 찾으라고 다시 지시했고, 첫 디자인을 거절한 뒤 네 가지 시안을 비교했다. 한·영 글이 충돌하는 오류는 AI가 브라우저 검사에서 찾아 고쳤다.

2026년 9월 15일에는 한국어·영어 사이트를 배포했다. 글은 검토 중이어서 당시 공개된 글은 없었다.

2026년 9월 15일 실제 공개 사이트. 글을 게시하기 전의 화면이다.

공개하지 않을 자료부터 지정했다

처음 요청할 때 다음 조건을 넣었다.

공개 승인된 콘텐츠만 프로덕션 결과물에 포함하는 방식으로 설계하고, 초안과 비공개 자료가 직접 주소, RSS, 사이트맵, 검색 데이터, 이미지 파일, 배포 파일 등으로 노출되지 않는지도 검증해 줘.

글 목록에서 초안을 숨겨도 주소를 직접 입력해 읽을 수 있다면 이 조건을 지킨 게 아니다. 이미지나 배포 압축 파일에 비공개 자료가 남는지도 확인해야 했다.

AI는 미리보기 목록과 공개 승인 목록을 따로 만들었다. 승인할 때 글과 이미지의 해시, 즉 파일 내용으로 계산한 값을 기록하고, 나중에 내용이 바뀌면 다시 승인받도록 했다. 이 구현 방식과 테스트 코드는 AI가 작성했다.

요청	AI가 구현하고 확인한 내용
승인한 글과 이미지만 공개	승인 목록에 있는 파일만 빌드에 넣고, 승인 뒤 바뀐 파일은 해시를 비교해 차단
초안과 작업 기록은 비공개로 유지	별도 테스트 자료로 글·노트·이미지가 배포 결과에 들어가지 않는지 확인
실제 읽는 동작까지 확인	브라우저에서 본문, 목차, 복사 버튼, 언어 전환과 내부 링크 검사
처음부터 운영할 것을 늘리지 않기	로그인·데이터베이스·자체 관리자 화면을 제외하고 기존 서버에 정적 사이트 배포

Astro는 이 조건을 구현하기 위해 AI가 제안한 도구였다. 추천 이유를 물어본 뒤 진행하도록 했다.

AI가 확인할 수 있는 경로는 직접 찾게 했다

작업 중 문서 폴더와 실행 폴더를 옮겼다. AI가 위치를 다시 물었을 때는 현재 폴더에서 직접 찾도록 했다. AI는 지침과 현재 상태 문서를 읽고 폴더 위치를 확인했다.

문서와 실행 코드는 같은 프로젝트 아래에서 나눠 관리했다. 아래는 실제 경로 대신 폴더의 역할만 나타낸 예시다.

project/
├── docs/    글 원본, 기획, 작업 기록, 검증 자료
└── code/    사이트 소스, 실행 환경, 빌드 스크립트

이후 작업은 확인한 경로에서 이어졌다. 다만 위치를 찾고 지침을 읽었다고 해서 디자인이나 글까지 원하는 방향으로 나온 것은 아니었다.

첫 디자인을 거절하고 네 안을 비교했다

첫 화면은 마음에 들지 않았다. 감성적인 소개 문구를 빼고, 전문적이면서 귀여운 느낌에 비비드한 빨간색을 써 달라고 했다. Pinterest 같은 곳에서 참고 자료를 찾고, 약 네 가지 시안을 보여 달라는 조건도 덧붙였다.

AI는 같은 내용을 네 가지 배치로 만들었다. 큰 제목과 목록을 쓴 안, 빨간 사이드바와 둥근 카드, 핑크색 종이 구성, 어두운 콘솔 형태였다.

당시 비교한 시안. 이미지 속 글 제목은 배치를 확인하려고 넣은 것으로, 지금 글과 다르다. 큰 이미지로 보기.

참고 자료는 Clara Fois 사이트의 제목과 여백, Jackie Zhang 사이트의 구획과 부드러운 형태, Pinterest의 핑크·빨강 배색, Bento Grid 사례의 카드 구성이었다. AI는 참고한 요소를 기록하고 비교 화면을 HTML/CSS로 만들었다.

나는 2번을 골랐다. 3번의 배치도 괜찮다고 했지만, 최종 지시는 2번이었다. AI는 선택한 체리 그리드를 사이트에 적용했다. 세부적인 선택 이유는 당시 따로 말하지 않았으므로 덧붙이지 않았다.

두 언어의 글이 충돌한 오류를 검증에서 찾았다

한국어와 영어 글은 같은 slug를 썼다. slug는 글 주소에 들어가는 이름이다. 번역본끼리 같은 글임을 표시하려고 공유했는데, 브라우저 검사에서 한국어 초안이 사라졌다.

AI가 원인을 살펴보니 글을 구분하는 내부 ID도 같았다. 이 프로젝트에서 사용한 Astro glob 로더는 기본 ID를 만들 때 글 정보에 적힌 slug를 우선했다. 그래서 같은 slug를 가진 두 언어의 글이 충돌했다.

AI는 내부 ID에 언어를 붙이도록 고쳤다.

generateId: ({ data }) => `${data.lang ?? 'ko'}:${data.slug}`

예를 들어 주소에 쓰는 이름이 example-post라면 내부 ID는 ko:example-post, en:example-post가 된다. 이 이름은 설명용 예시다.

수정 뒤에는 두 언어의 본문이 모두 있는지, 언어를 바꿨을 때 대응하는 글로 이동하는지 다시 검사했다. 언어별 시리즈, 태그, 피드와 내부 링크도 확인했다. 오류를 찾고 코드를 수정한 것은 AI다. 나는 한·영 지원을 요청하고 실제 화면에서 동작을 확인하도록 맡겼다.

당시 오류 화면은 이 글에 첨부하지 못했다. 경과는 작업 일지와 수정된 코드, 후속 검사 결과를 근거로 삼았다. 같은 검사에서 404 화면의 언어 전환 링크가 없는 주소를 가리키는 문제도 발견했다. AI는 각 언어의 홈으로 연결되도록 고쳤다.

배포 결과는 파일과 주소를 확인했다

2026년 9월 15일 디자인을 배포할 때 AI가 남긴 결과다.

확인한 곳	결과
별도 로컬 테스트	승인한 글·이미지는 포함하고 비공개 글·노트·이미지는 제외
로컬 미리보기	한·영 전환, 목차, 실제 클립보드 복사, 내부 링크·앵커 726개 확인
실제 서버	공개 파일 24개가 로컬 빌드 파일과 바이트 단위로 일치
실제 서버의 주소	HTTP에서 HTTPS로 이동, 홈은 200, 미승인 글 주소는 404 응답

링크 수는 당시 초안으로 검사한 값이다. 글을 고친 뒤에는 검사할 페이지와 링크 수도 달라진다. 이 결과로 당시 배포와 검사한 동작은 확인했지만, AI 덕분에 얼마나 빨라졌는지나 장기 운영 안정성은 측정하지 않았다.

구현과 검증을 맡기는 동안 내가 다시 지시한 지점은 경로 확인, 디자인, 글의 주제였다. 기술적인 오류는 AI가 검사에서 찾아 수정했다. 글은 여전히 실제 작업보다 일반적인 사용법에 치우쳐 있어 다시 써 달라고 했다. 그때 어떤 자료를 대조하고 구성을 바꿨는지는 초안을 다시 쓴 기록에 정리했다.

후속 디자인 수정: 분류와 제목을 먼저

9월 16일에는 참고 이미지를 반영한 후속 화면도 난잡하고 글 분류가 불명확하다고 지적했다. AI는 목록에서 반복 썸네일과 여러 배경색, 태그 묶음을 걷어 내고 분류별 제목을 먼저 읽도록 화면을 수정했다. 분류는 앱·웹 제작, 글쓰기·학습, AI 작업 환경, 도구 실험으로 정리했다.

앞의 시안과 배포 이미지는 9월 15일 상태다. 현재 목록과 다른 이유가 이 후속 수정에 있다. 빨간색이나 도형을 더 넣는 것으로 피드백을 해석하면, 읽기 어렵다는 문제를 해결하지 못한다. 이때 바꾼 것은 장식의 양과 정보의 순서였다.