블로그 레시피 (1) 댓글 검열

블로그 기능을 제공해준다는 플랫폼을 여럿 사용해보았지만 결국 만족하지 못하고 망치와 못부터 들었다.

1차 시도는 Vercel이 주는 기본 포트폴리오 용 템플릿을 다운 받아 내 도메인과 연결해보았으나 이미 build된 내용으로는 처참하게 실패. 어디서부터 고쳐야 할지, 마치 컨테이너로 된 집을 구매해놓고 이걸 으리으리한 저택으로 바꿔야 하면 어떡하지 라고 고민해야 되는 상황이 와버린 것이다. 내로라하는 디자인 사이트도 들어가보고 목업도 만들어보았지만 결과는 처참히 실패.

그 와중에 그럼 Gemini 말고 사이트 목업을 만들기에 유용한 프로그램을 물어보았다. 후보군은 Figma와 v0.dev.

Figma도 역시나 들어서자마자 웹사이트 관련 내용은 많았지만 실사용하기엔 어려웠다. 디자이너를 위한 목업 사이트여서 사용 방법을 모른다면? 결국, 게으른 나에겐 탈락! 반면 v0.dev는 들어가보니 샘플도 제공하지만 텍스트 프롬프트를 입력하면 된다고 했다.

고민 끝에 내가 내린 결론은, 최근 들어 가장 눈에 잘 들어온 Anthropic 블로그 디자인을 참고하여 구성을 시작해보는 것. v0.dev에 접속하여 내가 원하던 깔끔한 느낌을 담아 이런 프롬프트를 작성했다.

"Build a highly sophisticated, editorial-style minimalist engineering blog post list inspired by the Anthropic Engineering Blog.
Key Design Requirements:
- Layout & Grid: Use a structured, clean grid (such as 2 or 3 columns) with ample negative space (whitespace)..."

이 프롬프트로 내가 원하는 디자인에 적합한 목업을 구현해낼 수 있었다. 심지어 코드도 제공해줘서 시작하기에 편했다. 그 코드를 내 기존 코드에 붙여넣을까 하다 코드가 너무 꼬여서 에러를 잡는데 시간이 더 걸릴 것 같아, 기존 레포를 지우고 어차피 Vercel로 도메인을 연결해뒀기 때문에 프로젝트만 갈아 끼웠다. 결과는 성공적으로 내가 원하는 깔끔한 현재 디자인을 가져왔다.

이전에도 AI 기반 IDE를 사용했을 때 쉽게 시작할 수 있었기에, 이번에도 AI IDE를 사용해서 필요한 기능을 추가하면서 진행했다. v0.dev의 경우 기본적인 목업은 제공해주나 "더미 데이터" 기반이기 때문에, 앞으로 글을 써야 하는 나에게는 아직 껍데기만 준비된 것이었다. 그래서 IDE에게 다음과 같은 업데이트를 부탁했다.

.md 형태로 blog 게시글 작성할 수 있도록 코드 수정 (기존의 배열 샘플 데이터 제거)
 
댓글 작성 기능 구현 (Supabase 같은 무료 초경량 DB 연결)

이를 위한 첫 프롬프트는 이러했다.

"이제 하드코딩된 정적 posts 데이터를 지우고, 로컬 마크다운 파일들을 동적으로 읽어와서 블로그에 렌더링하고 싶어. 프로젝트 루트에 content 폴더를 만들고 gray-matter 라이브러리를 활용해서 파싱하는 헬퍼 함수들을 작성해 줘..."

이어서 Supabase 세팅을 완료한 후, 실시간 댓글 컴포넌트 생성을 위한 프롬프트를 작성했다.

"내 Supabase에 comments 테이블 세팅과 .env.local 키 등록을 완료했어. 이제 블로그 아티클 하단에 들어갈 실시간 댓글 컴포넌트(components/comment-section.tsx)를 만들어 줘. 디자인은 극도의 미니멀리스트 앤트로픽 스타일을 유지해줘."

예전이었으면 며칠 동안 끙끙대면서 써야 했던 내용이 이렇게 몇 줄로 끝나다니, 참으로 기가 차긴 한다. 그러니 또 다른 아이디어가 스멀스멀 피어올랐다.

"댓글에 욕설이나, 성적인 문구, 혹은 광고를 누군가 작성하면 어떡하지?"

내가 직접 지울 순 있겠지만 문지기 하나 두는 것도 나쁘지 않다고 생각했다. 현재 다니고 있는 회사에서도 커스텀 제품에 새기는 문구에 대한 욕설 및 비속어를 제한해 달라는 요청을 처리했던 경험이 있었다. 프론트단에서 처리하기에는 작업이 많아 그 당시에도 API 단에서 이를 필터링하였고 사이트 측에는 공백을 리턴했다. API 단에서 어떻게 처리했는지 자세한 건 모르지만 꽤 긴 시간 동안 알아보고 작업을 기다렸던 부분이다.

블로그를 직접 빌드 하는 겸, 그 당시에 진행했던 복잡한 과정을 한 번에 끝낼 수 있을까? 패키지나 라이브러리를 사용하는 방법도 추천받았지만 그건 싫었다. AI 시대가 왔는데 신나게 사용해줘야지 않겠는가.

LLM(Gemini API)을 사용해 단순히 특정 "단어"만 막는 게 아니라 교묘한 맥락의 악성 댓글을 다는 악플러를 잡아내기로 했다. 하지만 그 전에 이 기능은 단순한데, 과연 free tier 레벨에서도 처리가 가능할까? 궁금해서 제미나이에게 물어봤다.

Q. gemini api로 분석하는 건 cost가 많이 드는 거야 아니면 free tier에서 충분히 커버 가능한 거야?

답변은 내가 미스터 비스트급 트래픽이 아닌 이상 충분히 가능하다는 것! 하루 1,500회 요청 제한은 개인 개발 블로그 특성상 평생 무료로 안전하게 분석 필터를 돌릴 수 있는 넉넉한 수치다. 고마워, 제미나이!

굳이 기존 금지어 라이브러리를 쓰지 않고 AI 방식을 택한 이유는 확실하다.

우회 필터 완벽 차단: f u c k이나 시.발처럼 글자 사이에 공백이나 온점을 넣어도 맥락을 파악해 꼼수를 통하지 못하게 만든다.
 
맥락(Context) 분석: "이 신발 너무 편하네!"라는 문장에 '신발'이 들어갔다고 해서 욕설로 오진하는 해프닝을 완벽히 방어한다.
 
가벼운 번들 크기: 프론트에 무거운 금지어 딕셔너리를 얹을 필요 없이 API 호출 한 번으로 해결된다.

특히 한국어의 오묘한 맥락은 이 짤 하나로 요약 가능하다.

Gemini API를 붙이기 위해 서버 사이드 검사소인 app/api/comments/check/route.ts 구성을 완료하고, 아래 프롬프트를 기반으로 클린 댓글 문지기를 만들었다.

"이제 이 API를 연동해서 실시간 댓글 컴포넌트의 안전 기능을 교체해 줘. 댓글을 등록할 때 먼저 check 경로로 POST 요청을 보내 검증하고, isApproved가 false라면 경고창을 띄우고 Supabase 전송을 중단해 줘. true일 때만 INSERT가 일어나도록 로직을 리팩토링해 줘."

프리 티어를 사용 중이어서 종종 발생하는 High demand 에러만 뜨지 않으면 정상적으로 아주 잘 작동한다. 어디까지 한계를 끌어올릴지는 추후에 테스트한 기록을 공유할 예정이다.

이제 이 블로그의 명예 소방관은 제미나이다. 🚒