블로그 엔진을 직접 만들었습니다 — 개발 스펙과 만든 이유
티스토리에 글을 쓰다가 자체 서버로 옮겼습니다. 그러면서 아예 블로그 엔진을 새로 만들었습니다.
글 쓰는 도구가 하나 더 필요했던 게 아니라, 글·이미지·배너·카드뉴스·영상을 한 화면에서 만들고 바로 발행하는 것이 목표였습니다.
몇 달 걸렸고 지금은 실제로 이 시스템으로 글을 올리고 있습니다. 어떻게 만들었는지 정리합니다.
왜 직접 만들었나
세 가지 이유입니다.
플랫폼에 묶이기 싫었습니다. 티스토리든 네이버든 정책이 바뀌면 그대로 따라야 합니다. 광고 배치, 노출 알고리즘, 심지어 글 삭제까지 남의 손에 있습니다.
AI 도구들이 따로 놀았습니다. 글은 이 서비스, 이미지는 저 서비스, 영상은 또 다른 서비스. 매번 결과물을 다운로드해서 옮겨 붙이는 게 실제 작업의 절반이었습니다.
중간 마진이 아까웠습니다. AI 콘텐츠 서비스들을 뜯어보면 결국 API 위에 화면을 얹고 크레딧으로 마진을 뗍니다. 실제로 쓰이는 모델은 몇 개 안 됩니다. API를 직접 붙이면 그 마진이 사라집니다.
기술 스택 — 프레임워크를 안 썼습니다
| 층 | 선택 |
|---|---|
| 서버 | Linux · Apache + PHP-FPM |
| 백엔드 | PHP 8.3, 프레임워크 없음 |
| DB | MariaDB, PDO 프리페어드 |
| 관리자 프론트 | 순수 JS, 빌드 도구 없음 |
| 이미지 렌더 | Canvas 2D |
| 공개 화면 | PHP 서버 렌더 |
Laravel도 React도 안 썼습니다. 의도적입니다.
프레임워크를 뺀 이유
이 시스템은 다른 사람 서버에서도 돌아야 합니다. 그런데 Composer가 없는 호스팅, PHP 버전을 못 올리는 호스팅, SSH를 못 쓰는 호스팅이 아직 많습니다.
프레임워크를 쓰면 그 순간 요구사항이 늘어납니다. FTP로 파일만 올리면 도는 구조가 필요했습니다.
두 번째 이유는 유지보수입니다. 프레임워크는 버전이 올라가면 문법이 바뀝니다. 순수 PHP는 몇 년을 두어도 그대로 돕니다.
빌드 도구를 뺀 이유
npm install, webpack, 번들링. 이 과정이 없으면 파일 하나 고치고 새로고침하면 끝입니다.
관리자 화면은 SPA가 필요할 만큼 복잡하지 않습니다. 화면 전환은 페이지 이동으로 충분하고, 실시간 갱신이 필요한 부분만 fetch로 처리합니다.
Canvas를 쓴 이유
배너와 카드뉴스를 이미지로 만들어야 하는데, 방법이 두 가지였습니다.
| 방식 | 필요한 것 |
|---|---|
| HTML → 스크린샷 | 서버에 헤드리스 브라우저 (수백 MB) |
| Canvas 2D | 없음 |
HTML 방식이 레이아웃 자유도는 높습니다. flexbox로 배치하면 알아서 정렬되니까요. Canvas는 좌표를 코드로 계산해야 합니다.
그런데 헤드리스 브라우저를 깔라고 하면 진입 장벽이 생깁니다. 브라우저에서 그리면 서버는 아무것도 안 해도 됩니다.
미리보기와 다운로드가 같은 코드를 쓰는 것도 이점입니다. 화면에서 본 것과 받은 파일이 다를 수가 없습니다.
AI 모델을 목적별로 나눴습니다
이 부분이 가장 오래 고민했습니다.
처음엔 좋은 모델 하나로 다 하려 했습니다. 그런데 비용이 감당이 안 됩니다. 초안 쓰기, 검수, 최종 다듬기를 전부 최고급 모델로 돌리면 글 한 편에 수백 원이 나갑니다.
그래서 단계마다 다른 모델을 씁니다.
텍스트
| 용도 | 모델 | 이유 |
|---|---|---|
| 기본 · 물량 처리 | Gemini 2.5 Flash | 무료 등급이 있습니다 |
| 구성안 · 정리 | Gemini 3.1 Flash Lite | 창의성보다 정리라 저가로 충분 |
| 저비용 대량 | DeepSeek V4 Flash | 캐시 적중 시 입력가가 2% 수준 |
| 후킹 문구 · 광고 카피 | GPT-5.6 Terra | 이 영역이 강합니다 |
| 글 품질 | Claude Sonnet 5 | 자연스러운 장문 |
| 심화 분석 | Claude Opus 5 | 비용 2.5배, 필요할 때만 |
이미지 (장당 실측가, 환율 1430원 기준)
| 모델 | 단가 | 용도 |
|---|---|---|
| GPT Image 2 (저품질) | 9원 | 빠른 시안 |
| Gemini 3.1 Flash Lite Image | 48원 | 초안 · 블로그 본문 |
| Gemini 3.1 Flash Image | 96원 | 블로그 · 쇼츠 표준 |
| GPT Image 2 (중품질) | 76원 | 문자 · 로고 반영 |
| Gemini 3 Pro Image | 192원 | 고품질 · 4K |
이 배치의 핵심
초안은 싸게, 확정본만 비싸게.
이미지를 예로 들면 이렇습니다. 열 장을 뽑아 확인하고 마음에 드는 세 장만 고품질로 다시 만듭니다.
전부 고품질: 10장 × 192원 = 1,920원
초안 후 확정: 10장 × 48원 + 3장 × 192원 = 1,056원한 번에 통과하면 차이가 작지만, 재생성이 발생하는 순간부터 격차가 벌어집니다. 버려지는 결과물의 단가를 낮추는 게 핵심입니다.
만들 수 있는 것
관리자 화면 하나에서 다섯 가지가 나옵니다.
1. 블로그 글
키워드를 넣으면 제목 후보 → 목차 → 본문 순서로 만듭니다. 각 단계에서 확인하고 넘어갑니다.
플랫폼별 변환도 됩니다. 같은 글을 네이버용, 티스토리용, 스레드용으로 형식을 바꿔 내보냅니다.
음성 입력도 붙였습니다. 매장에서 말로 설명하면 그게 글이 됩니다.
2. 이미지
본문을 넣으면 AI가 이미지 프롬프트를 만들어줍니다. 그걸 확인하고 고친 뒤 생성합니다.
한 번에 스무 장까지 만들 수 있습니다. 영상용 씬 이미지를 뽑을 때 필요합니다.
3. 배너
가게 안내문, 행사 홍보, A4 인쇄물을 만듭니다.
인쇄용을 넣은 이유는 실제 수요가 있어서입니다. 사장님이 메뉴 사진 올리고 음성으로 설명하면, A4로 뽑아 매장에 붙일 안내문이 나옵니다.
4. 카드뉴스
인스타그램·스레드용 세트를 만듭니다.
여기서 시행착오가 많았습니다. 처음엔 입력 문장을 카드로 나누기만 했더니 결과가 형편없었습니다. 원문 순서와 카드 순서가 같고, 한 문장이 한 카드가 되는 식이었습니다.
사람 편집자는 그렇게 하지 않습니다. 사실을 뽑고, 중요도를 판단하고, 이야기 순서를 다시 짠 다음, 문장을 새로 씁니다.
구조를 이렇게 바꿨습니다.
입력 → 사실 추출(항목) → 스토리 기획(역할 배치) → 문구 작성그리고 카드 면적을 실제로 재봤습니다. 텍스트만 있는 카드는 화면의 27%만 쓰고 나머지는 빈 배경이었습니다. 번호 박스나 목록 레이아웃을 넣으니 71%까지 올라갔습니다.
5. 영상
주제를 넣으면 컷을 나누고, 컷마다 그림을 만들고, 그림을 영상으로 바꿉니다.
30초 세로 영상 하나에 약 2,400원이 들었습니다. 자세한 건 따로 정리한 글에 적었습니다.
하나의 백엔드, 테마만 교체
이게 구조상 가장 신경 쓴 부분입니다.
블로그, 소상공인 사이트, 기업 홈페이지가 겉으로는 완전히 다르게 보입니다. 그런데 관리자 화면과 DB와 AI 생성 로직은 한 벌입니다.
| 테마 | 대상 | 화면 구성 |
|---|---|---|
| 전문 블로거 | 콘텐츠로 수익 | 목록 중심, 사이드바, 인기글 |
| 소상공인 | 가게 홍보 | 메뉴판, 예약 폼, 후기, 지도 |
| 기업형 | 서비스 소개 | 다크 랜딩, 성과 지표, 견적 |
바뀌는 건 공개 화면을 그리는 파일과 CSS뿐입니다. 글을 쓰는 방식, 이미지를 만드는 방식은 똑같습니다.
관리자에서 테마를 고르면 바로 바뀌고, 저장하지 않고 미리보기만 할 수도 있습니다.
SEO는 나중에 발견한 구멍
기능을 다 만들고 나서야 알았습니다. 글이 검색에 안 잡히고 있었습니다.
사이트맵을 만드는 코드는 있었는데, 검색엔진이 찾는 경로로 접근이 안 됐습니다. robots.txt에 사이트맵 위치도 안 적혀 있었고요.
방문자가 어디서 오는지도 몰랐습니다. 분석 도구를 아예 안 붙였으니까요.
정리한 것들입니다.
- 사이트맵 접근 경로 확보
- robots.txt에 사이트맵 지시 추가
- 메타 태그를 테마별로 흩어놓지 않고 한 곳에서 관리
- 구조화 데이터(JSON-LD) 전 테마 적용
- URL을
?id=96에서/96-글제목형태로 변경 - 구 URL은 301로 넘겨 유입 손실 방지
- 유입 분석 연동
만드는 데 집중하다 보면 이런 게 빠집니다. 콘텐츠 자동화 도구를 만들면서 정작 그 콘텐츠가 검색에 안 잡히는 상태였습니다.
만들면서 배운 것
검증 도구가 틀릴 수 있습니다
문법 검사만으로는 못 잡는 오류가 계속 나왔습니다.
| 검사 수준 | 못 잡는 것 |
|---|---|
| 문법 검사 | 정의 안 된 함수, 무한 재귀 |
| 함수 단위 호출 | 호출 경로, 하드코딩된 값 |
| 페이지 렌더 | 클릭해야 실행되는 코드 |
한번은 버튼이 전부 죽었는데 화면은 멀쩡했습니다. 눌린 것처럼 보이는데 아무 일도 안 일어나는 상태였습니다. 스크린샷으로는 통과입니다.
그래서 버튼을 누른 뒤 결과물이 실제로 바뀌었는지까지 확인하게 바꿨습니다.
검사 도구 자체를 의심해야 할 때도 있었습니다. "전건 통과" 또는 "전건 실패"가 나오면 대상이 아니라 도구를 먼저 봅니다. 실제로 빈 표에 "0 / 15 통과"가 찍힌 적이 있습니다. 아무것도 측정하지 않고 통과였습니다.
성공으로 보고되는 실패가 가장 위험합니다
비율이 다른 영상 두 개를 이어붙였더니, 오류가 안 났습니다. 파일도 만들어지고 재생도 됐습니다. 그런데 중간부터 화면이 찌그러졌습니다.
종료 코드만 보면 성공입니다. 결과물을 열어봐야 압니다.
값을 눈대중으로 정하면 안 됩니다
글자 크기, 여백, 줄바꿈 위치를 감으로 정했다가 여러 번 고쳤습니다.
지금은 실제로 렌더한 뒤 픽셀을 재서 정합니다. A4 인쇄물의 제목 글자 수 상한을 정할 때도, 실제 문구 다섯 개를 넣어보고 폭을 측정했습니다.
남은 것
- 홈페이지형 테마 재작업
- 소상공인용 간소화 관리자
- 카드뉴스 배경 이미지 자동화
- 영상 컷별 이미지 업로드
만드는 것보다 다듬는 데 시간이 더 듭니다. 기능은 며칠이면 붙는데, 실제로 쓸 만하게 만드는 데 몇 배가 걸립니다.
특히 "누가 이걸 쓰는가"를 계속 생각해야 합니다. 개발자가 쓰는 도구와 가게 사장님이 쓰는 도구는 완전히 다릅니다. 버튼 이름 하나, 안내 문구 하나가 진입 장벽이 됩니다.
이 글의 단가는 2026년 8월 기준입니다. AI API 가격은 수시로 바뀌니 실제 적용 전에 공식 가격표를 확인하시기 바랍니다.
댓글 0