운영비 0원, AI와 함께 지은 동화책 사이트 — ioi-iooi.pe.kr 제작기

오래 쓰던 워드프레스 블로그를 정리하고, 사흘 동안 사이트를 새로 지었어요.
코드는 거의 몰라도 AI와 무료 도구를 엮으니 생각보다 멀리 갈 수 있었어요.
어떤 일을 어떤 도구로 했는지 작업별로 정리해 둘게요.
완성된 집 → ioi-iooi.pe.kr · 채널 → @ioi-iooi

이 글에서 알 수 있는 것

• 워드프레스 + n8n을 걷어내고 유튜브 · 노션 → 사이트로 단순하게 바꾼 방법
• 작업마다 쓴 도구와 비용, 무료 한도 안에서 굴리는 법
• AI로 클레이 그림 · 5초 모션을 같은 인물처럼 뽑는 요령
• 코드를 몰라도 "커밋해" 한마디로 배포하는 흐름

한눈에 보기

왜 다시 지었나

예전엔

• 노션 표에 적고 상태를 바꾸면 n8n이 트리거로 돌아 워드프레스에 글을 썼어요.
• 유튜브는 유튜브대로 따로 예약. 둘을 잇기 위해 자동화를 하나 더 돌렸어요.
• 그런데도 워드프레스가 글을 마음처럼 정리하지 못했고, 애드센스도 제대로 연결하거나 활용하지 못했어요.
• 검색(SEO)과 통계도 부실해서, 마케팅·피처드·사이트와 유튜브의 연결고리가 약했어요. 따로 노는 느낌.

그래서 세운 목표

1. 콘텐츠 만들기 → 발행 → 사이트 운영을 최대한 쉽고 간결하게.
2. 피처드와 마케팅이 잘 되게 → 수익화.
3. 개인 노션도 정보를 모으고 분류하기 편하게.

기획과 방향

무엇을 만들까

• 이름은 Isabella's Ordinary Day, 이사벨라의 보통의 날들.
• 유튜브 · 숏츠 · 플레이리스트처럼 흩어진 것들을 한곳에 모으는 집.
• 손그림 동화책과 클레이 캐릭터가 사는 작은 세계.
• 많이 담지 않고, 보는 재미와 읽는 재미를 하나씩.

레퍼런스와 시안

• recent.design에서 요즘 잘 만든 사이트들을 둘러보며 방향을 골랐어요. 귀엽지만 세련되고, AI가 만든 티가 덜 나는 쪽.
• 맨 위는 그림책을 넘기는 사이트에서, 한 블록씩 내려가는 구성은 깔끔한 서비스 사이트들에서 힌트를 얻었어요.
• Google Antigravity로 시안을 여러 개 만들고, Claude와 함께 하나로 다듬었어요.
• 결론은 손그림 동화책 + 클레이 캐릭터. 첫 화면 맨 위에 책장을 넘기는 동화책.

시안 규칙: 한 번에 하나만 고치기 · 여러 시안을 놓고 번호로 고르기 · 좋은 건 잠그기 · 요청하지 않은 곳은 건드리지 않기

데이터와 자동화

데이터 이전

• 옛 워드프레스 글 200여 개를 받아 동화책 장면 = 메뉴 기준으로 나눴어요.
• 규칙은 하나. 날짜가 있는 글은 기록으로, 날짜 없는 '나'는 툇마루(이사벨라 페이지)로.
• 185개를 옮겼고, 옛 주소로 들어와도 새 주소로 자동 연결돼요. 태그 · 분류 페이지 같은 옛 주소도 모두 새 집으로 이어져요.

발행 구조 단순화

• 예전: 노션 → n8n → 워드프레스, 여기에 유튜브를 잇는 자동화가 하나 더. 내가 손대는 곳이 네 곳이고, 같은 내용을 두 번 썼어요.
• 지금: 내가 손대는 곳은 유튜브와 노션, 두 곳뿐. 그 뒤는 알아서 사이트까지 가요.
• 지금: 영상은 유튜브, 글은 노션이 원본. GitHub Actions가 하루 두 번(10시 · 22시) 확인해 사이트를 새로 만들어요.
• 서버가 없어서 n8n도, 워드프레스 호스팅도 필요 없어졌어요.
• 플레이리스트 홍보 숏츠는 금요일엔 보통의 하루에, 일요일 플레이리스트 공개 뒤엔 그 플레이리스트의 미리듣기로 자리를 옮겨요.

사이트 설정 값

• 사이트의 글과 색을 노션 표 하나에 모았어요. 한 줄이 사이트의 한 자리예요.
• 같은 글이 여러 곳에 나오면 한 번만 고쳐도 함께 바뀌어요.
• 표 위 실시간 미리보기에서 바뀐 곳이 주황 점선으로 보여요. 마음에 들 때만 반영.
• 이 표와 화면 구성은 쓰면서 보이는 불편함을 모아 한 번 더 다듬을 예정이에요.

디자인 약속

색

• 동화책 장마다 고유한 색. 첫 화면에서는 선명하게, 메뉴 안쪽은 같은 색을 연하게.
• 파랑은 선과 밑줄에만, 실처럼 가늘게.
• 작은 글자는 배경과 충분히 대비되게.

글꼴

• 큰 글자는 손글씨. 한국어 나눔손글씨 펜, 영어 Caveat.
• 본문은 읽기 편한 Pretendard, 조금 작게.

모양과 아이콘

• 섹션 경계는 직선 대신 아치 · 사선 · 물결 · 오목 곡선 · 떠오르는 달.
• 아이콘은 컬러 이모지 대신 단색 픽토그램(Phosphor Icons, 무료), 동그라미는 손으로 두 번 그은 선.
• 박스는 최소로. 단추도 손글씨 + 마우스를 올리면 그어지는 밑줄. 재생 단추는 손그림 세모 하나.

모션

• 스크롤하면 섹션이 살짝 떠오르며 나타나요.
• 동화책 장면과 페르소나 카드는 5초 영상으로 움직여요. 책장을 넘기는 동안엔 영상을 멈춰 끊김이 없게.
• 움직임 줄이기 · 데이터 절약 모드에서는 그림만.

소리

• 처음엔 소리 없음(브라우저 규칙). 스피커 아이콘을 한 번 누르면 켜져요.
• 소리 스위치는 하나. 동화책과 페르소나 카드가 함께 써요.
• 카드 소리는 목소리 없이 그 사람에게 어울리는 연주만, 끝 1초 페이드아웃.

그림과 움직임

동화책

• 장면 일곱 장을 Hailuo로 5초 영상으로. 표지에선 이사벨라가 Hi~, 뒤표지에선 뒷모습으로 See you~.
• 프롬프트는 한글, 캐릭터는 늘 '이사벨라 클레이 캐릭터'. 이름을 고정하니 장면마다 같은 사람처럼 나와요.

페르소나 카드

• 함께 노래하는 아홉 명. 얼굴만이 아니라 그 목소리가 살 법한 장소와 시간을 함께 그렸어요.
• 배경까지 모두 클레이 미니어처로. 아홉 장을 나란히 놓으면 하루와 사계절이 보여요.
• 마우스를 올리면 5초 모션, 누르면 뒤집혀 소개.

5초 모션

• 시작 프레임 = 끝 프레임. 같은 그림으로 시작하고 끝나서 반복해도 끊기지 않아요.
• 영상은 화면에 보이는 크기에 맞춰 줄여서, 열여섯 개를 다 합쳐도 3MB 남짓이에요.

말 걸기

편지 폼

• 처음엔 노션 폼을 사이트에 끼워 넣었어요. 되긴 했지만 노션 화면이라 사이트와 따로 놀고, 보낸 뒤 화면도 바꿀 수 없었어요.
• 그래서 사이트가 직접 받는 편지로 바꿨어요. 동화책 글 쪽에 쓴 크라프트 종이 위에 점선 밑줄만.
• 흰 칸 대신 점선, 우표 대신 서명 옆 스마일 도장, 보내기 단추도 상자 없이 손글씨 + 밑줄.
• 보내면 종이비행기가 소원달까지 날아가는 화면이 나와요.

받는 구조

• 편지는 Cloudflare Pages Functions가 사이트 안에서 바로 받아요. 따로 돌리는 서버는 없어요.
• 받은 편지는 노션 표에 새 메시지로 쌓이고, Resend로 알림 메일이 와요.
• 답장도 노션 표에서 바로. 답장 칸에 쓰기 → 처리를 '➤ 보내기'로 → hello@ 이름의 편지지 메일 발송 → ✓ 답장완료.
• 개인 메일 주소·서명은 드러나지 않아요. 알림과 답장 사본은 Gmail '말 걸기' 라벨로 모여요.
• 로봇이 보낸 스팸은 숨은 칸과 시간 규칙으로 걸러요.

오픈과 운영

도메인 연결

• 원래 쓰던 도메인을 Cloudflare로 연결. 도메인 업체에서 네임서버 두 줄만 바꾸면 돼요.
• 몇 분 만에 연결 완료. 방문 통계를 켜고 광고 검토도 신청했어요.

검색 등록

• Google Search Console: 옛 워드프레스 사이트맵을 지우고 새 sitemap.xml을 제출, 첫 화면 색인 요청.
• 네이버 서치어드바이저: 사이트 등록 → 소유 확인(HTML 태그) → 사이트맵 제출.
• 글마다 제목 · 설명 · 대표 이미지와 구조화 데이터(영상 · 글 · 경로)를 넣어 검색 결과에 잘 보이게 했어요.

지금 굴러가는 방식

1. 유튜브에 올리면 → 하루 두 번 자동 반영.
2. 노션 기록에 글을 쓰고 공개로 바꾸면 → 다음 자동 반영 때 올라가요. 이 글도 그렇게 올라왔어요.
3. 노션 표에서 글 · 색을 고치면 → 미리보기로 확인하고 반영.
4. 디자인을 고칠 때는 → Claude가 파일을 고치고, 저는 "커밋해" 한마디만.

배포는 "커밋해" 한마디

• "커밋해" → Claude가 GitHub Desktop에서 Pull → Commit → Push → Push가 되면 GitHub Actions가 페이지를 새로 만들고 → Cloudflare가 사이트에 반영. 3~4분이면 끝.
• 따로 누르던 Run workflow는 없어졌어요. 봇이 다시 올리는 커밋은 작업을 또 부르지 않아서(GitHub 규칙) 무한 반복도 없어요.
• 개인 토큰은 쓰지 않아요. GitHub이 실행마다 임시 열쇠를 만들었다 버려요.

광고와 후원

• 광고는 글 상세 페이지에만 한 자리. 첫 화면 · 목록 · 동화책에는 넣지 않았어요. 채울 광고가 없으면 빈 칸도 남기지 않아요.
• 후원은 Buy Me a Coffee의 커피 한 잔. 글 아래 · 편지 보낸 뒤 · 맨 아래에 손글씨 한 줄로만.

비용 정리

자주 묻는 질문

코드를 몰라도 만들 수 있나요?

네. 하고 싶은 걸 문장으로 또렷하게 말하고, 한 번에 한 곳씩 고쳤어요. 코드는 Claude가 쓰고, 저는 화면을 보고 고를 곳만 골랐어요.

정말 운영비가 0원인가요?

사이트를 굴리는 비용은 0원이에요. 호스팅 · 자동 반영 · 메일이 모두 무료 한도 안에서 돌아요. 도메인 갱신비와, 만들 때 쓴 AI 도구 구독은 따로예요.

새 글은 어떻게 올라가요?

영상은 유튜브에, 글은 노션 기록에 쓰고 '공개'로 바꾸면 끝이에요. 하루 두 번(10시 · 22시) 자동으로 사이트에 반영돼요.

예전 워드프레스 주소로 들어오면요?

옛 글 · 태그 · 분류 · 사이트맵 주소 모두 새 주소로 자동 연결돼요. 검색에 남아 있는 옛 링크도 그대로 쓸 수 있어요.

광고가 많아지지 않나요?

광고는 글 상세 페이지에 한 자리만 두었어요. 동화책과 첫 화면은 광고 없이 그대로예요.

다음에 할 일

• 사이트 설정 표와 미리보기 화면 다듬기.
• 사이트 안 검색, 한국어 단어 카드, 새 글 소식 받기.
• 음원을 유튜브 밖으로 넓히는 방법 알아보기.

만들며 남긴 메모

처음 그림을 계속 고치기보다, 마음에 든 카드 한 장을 기준으로 "같은 세계의 다른 인물"을 부탁하는 게 훨씬 잘 맞았다.

지킬 것은 문장으로 못 박기. 눈동자 없이 감은 곡선 눈, 참고 이미지는 한 장만, 한 번에 한 곳만 고치기.

움직임은 숫자로 작게, 멈출 곳은 멈춘다고 적기. 안 그러면 손발이 방정맞아진다.

코드를 몰라도, 하고 싶은 걸 또렷하게 말하고 하나씩 고쳐 나가면 생각보다 많은 걸 만들 수 있었어요. 이 집은 계속 조금씩 고쳐 나갈게요. 보통의 하루처럼요.