술술

왜 만들었나

2025년 봄, 다녀온 식당과 카페를 기록하려고 맛집 블로그를 시작했습니다. 그런데 글 한 편을 쓰려면 사진을 고르고, 가게 정보를 찾고, 메뉴와 분위기를 정리하는 데 생각보다 손이 많이 갔습니다.

그래서 처음에는 제 블로그 글쓰기를 자동화했고, 같은 고민을 하는 사람이 많다는 걸 알고 누구나 쓸 수 있는 AI 리뷰 초안 도구로 키웠습니다. 장소와 메뉴, 사진을 넣으면 초안을 만들어 주고, 한 화면에서 고친 뒤 네이버 블로그에 바로 붙여 넣을 수 있습니다.

할 수 있는 것

• AI 리뷰 초안: 장소와 글의 톤을 고르면, 가게 정보를 찾아 모은 자료를 바탕으로 리뷰 초안을 씁니다.
• 한 화면에서 고치기: 제목, 본문, 태그, 메타 정보를 편집기에서 고치고, 쓰는 동안 자동으로 저장합니다.
• 네이버 블로그로 내보내기: 네이버 편집기에 붙여 넣어도 서식이 깨지지 않는 HTML로 복사하거나, Markdown으로 내려받습니다.
• 사진 정리: 아이폰의 HEIC 사진도 바로 미리 보고, 올린 사진 속 얼굴은 자동으로 흐리게 처리합니다.
• 직접 운영하는 맛집 블로그: 술술로 쓴 글을 한국어와 영어로 함께 발행하는 블로그를 운영하고 있습니다.

구조

하나의 모노레포에 글쓰기 도구(`sulsul-web`), 공개 블로그(`food-blog`), 이미지 처리 서버(`image-processor`)를 두었습니다. 두 Next.js 앱은 DB 스키마(packages/db), 디자인 시스템(packages/ui), 글 문서 형식과 렌더러(packages/content)를 공유해서, 도구에서 쓴 글이 블로그에서도 같은 모양으로 그려집니다.

이미지 처리는 Python이 더 잘하는 일이라 FastAPI 서비스로 따로 떼어 내고, 웹 서버만 내부 HTTP로 호출하게 했습니다.

고민한 점

글을 한 번에 쓰지 않고, 단계로 나누기

AI에게 "리뷰를 써 줘"라고 한 번에 맡기면 없는 메뉴를 지어내거나 다른 가게와 헷갈리기 쉽습니다. 그래서 초안 생성을 입력 확인 → 가게 찾기 → 자료 수집 → 자료 선별 → 사실 정리 → 사진 준비 → 글 설계 → 섹션별 작성 → 조립 → 다듬기 → 품질 검사의 11단계로 나눴습니다.

모은 자료는 Jina Reranker로 관련도를 다시 매겨 추리고, 사실을 먼저 정리한 뒤에 글을 쓰게 했습니다. 문서 구조는 AI가 아니라 코드가 조립하고, 품질 검사를 통과한 초안만 저장합니다.

오래 걸리는 작업을 끝까지 책임지기

초안 하나에 여러 번의 AI 호출이 필요해 시간이 걸립니다. 요청은 작업을 등록하자마자 응답하고, 실제 생성은 백그라운드 러너가 맡습니다. 작업·단계·이벤트를 모두 DB에 기록하고 선점(lease)과 단계별 자동 재시도를 두어, 중간에 실패해도 어디서 멈췄는지 알고 이어서 처리할 수 있게 했습니다.

네이버 블로그에 그대로 붙여넣기

사용자 대부분이 네이버 블로그에 글을 올리는데, 네이버 편집기는 붙여 넣은 HTML의 서식을 자기 방식대로 바꿉니다. 그래서 네이버가 받아들이는 규칙을 편집기 화면에도 똑같이 적용해, 편집기에서 본 모양이 붙여 넣은 뒤에도 그대로 나오게 했습니다. 복사할 때는 text/html과 text/plain을 함께 담아, 어디에 붙여 넣어도 내용이 빠지지 않습니다.

사진 속 다른 사람 지켜 주기

식당 사진에는 다른 손님 얼굴이 함께 찍히기 쉽습니다. 사진을 올리면 이미지 서버가 YuNet 얼굴 검출 모델로 얼굴을 찾아 자동으로 흐리게 처리한 뒤 저장합니다. 아이폰 HEIC 사진도 서버에서 JPEG로 바꿔 미리 보여 줍니다.

검색에 잡히는 블로그

처음 블로그를 열었을 때 Google과 네이버가 페이지를 색인하지 않아 한참 헤맸습니다. canonical 주소를 고정하고, noindex로 판정되던 리다이렉트를 걷어 내며 원인을 하나씩 찾았습니다. 이 경험을 바탕으로 지금 블로그는 한국어·영어 글마다 canonical과 hreflang을 달고, 가게와 리뷰 정보를 구조화 데이터로 넣었습니다. 글을 발행하면 영어 버전도 함께 만들어 저장합니다.

베타로 검증하기

처음부터 모두에게 열지 않고 초대 코드와 관리자 승인으로 베타를 운영했습니다. 사용량은 크레딧으로 관리하고, 앱 안에서 바로 피드백을 남길 수 있게 했으며, GTM으로 랜딩과 가입 흐름의 이벤트를 측정해 랜딩 메시지를 다시 다듬었습니다.

기술 스택

• 프런트엔드: Next.js 16, React 19, TypeScript, Tailwind CSS 4, Lexical, TanStack Query, Zustand, next-intl
• AI: Google Gemini, Jina Reranker
• 백엔드·데이터: PostgreSQL, Prisma, NextAuth, Upstash Redis, AWS S3
• 이미지 처리: Python, FastAPI, OpenCV(YuNet)
• 개발 환경·운영: Turborepo + pnpm 모노레포, Biome, Playwright, Sentry