[마이크로 SaaS 11편] 네이버 블로거의 고충 해결사: AI 텍스트 포맷 변환 웹 툴 제작기

Table of Contents

서론: 유희를 넘어, 진짜 ‘내 업무’의 고통을 마주하다

로또 번호 생성기와 경마 제비뽑기 게임, 그리고 구글 스프레드시트를 활용한 랭킹 시스템까지 연달아 완성하며 저는 기획과 코딩의 사이클을 완벽하게 체득했습니다. 지인들과 웃고 즐기기 위한 미니 게임 프로젝트는 비전공자인 저에게 코딩의 두려움을 없애주는 훌륭한 훈련소였습니다. 하지만 진정한 마이크로 SaaS의 가치는 누군가의 뼈저린 ‘불편함’을 해결해 줄 때 빛을 발합니다.

그 뼈저린 불편함의 주인공은 바로 저 자신이었습니다. 저는 개인적인 기록과 수익화를 위해 네이버 블로그를 운영하고 있었고, 글쓰기 시간을 단축하기 위해 AI(챗GPT 등)의 도움을 적극적으로 받고 있었습니다. 하지만 AI가 써준 훌륭한 초안을 네이버 블로그 스마트에디터에 복사해서 붙여넣을 때마다 어김없이 지옥이 펼쳐졌습니다. 알 수 없는 검은색 배경이 글자 뒤에 깔리거나, 줄바꿈이 엉망진창이 되고, 마크다운(Markdown) 기호인 별표(**)나 우물 정자(#)가 그대로 노출되어 텍스트 서식이 처참하게 깨져버렸기 때문입니다. 결국 글을 쓰는 시간보다 서식을 수동으로 수정하는 데 더 많은 시간을 허비하고 있었습니다. 이 지긋지긋한 노가다를 끝내기 위해, 저는 저만을 위한 맞춤형 ‘텍스트 포맷 변환 웹 툴’을 직접 기획하고 개발하기로 결심했습니다.

1. 10분의 글쓰기, 20분의 서식 수정: 무엇이 문제인가?

AI 비서에게 코드를 짜달라고 요구하기 전에, 도대체 왜 네이버 블로그에만 글을 붙여넣으면 서식이 깨지는지 그 원인을 분석해야 했습니다.

마크다운(Markdown)의 충돌: AI 챗봇들은 기본적으로 글씨를 굵게 할 때 **텍스트**, 제목을 쓸 때 ## 제목 같은 마크다운 문법을 사용합니다. 하지만 네이버 블로그 에디터는 이를 인식하지 못하고 기호 그대로 출력해 버립니다.
숨겨진 HTML 태그와 인라인 스타일: AI 채팅창에서 드래그하여 복사하는 순간, 눈에 보이지 않는 폰트 색상, 짙은 배경색(다크 모드일 경우), 여백 등의 CSS 스타일 값들이 텍스트에 껌딱지처럼 들러붙어 함께 복사됩니다.
줄바꿈(Enter)의 오작동: 엔터를 한 번 쳤을 뿐인데 블로그에서는 두 줄이 띄워지거나, 문단이 통째로 뭉개지는 현상이 발생했습니다.

문제의 원인을 명확히 파악했으니, 이제 이 골칫거리들을 걸러내는 ‘정수기’ 필터를 만들 차례입니다.

2. 정수기 필터 설계: 입력, 처리, 출력의 로직 구성

앞선 프로젝트들에서 훈련했던 대로, 문제를 [입력 → 처리 → 출력]의 시스템 로직으로 분해했습니다.

입력(Input): 화면 좌측에 챗GPT에서 복사한 원본 텍스트를 그대로 Ctrl+V 할 수 있는 커다란 텍스트 박스(Textarea)를 배치한다.
처리(Process): ‘변환하기’ 버튼을 누르면 자바스크립트가 작동하여 다음의 필터링을 거친다.
1. 텍스트에 묻어있는 모든 배경색과 폰트 스타일(CSS)을 강제로 날려버린다(초기화).
2. **텍스트** 기호를 찾아내어 네이버 블로그가 인식할 수 있는 순수한 굵은 글씨 HTML 태그( 또는 )로 치환한다.
3. # 기호를 찾아내어 적절한 크기의 문단 제목 서식으로 바꾼다.
출력(Output): 화면 우측의 결과 박스에 깔끔하게 정제된 텍스트가 나타나고, 그 아래 ‘결과물 복사하기’ 버튼을 두어 원클릭으로 클립보드에 담기게 한다.

3. 프롬프트 작성: “나는 네이버 블로거다, 나를 구원해 다오”

로직이 완성되었으니 AI에게 정확한 프롬프트를 던졌습니다.

나의 프롬프트: “너는 10년 차 프론트엔드 개발자야. 내가 AI 챗봇에서 복사한 글을 네이버 블로그에 붙여넣을 때마다 배경색이 까맣게 복사되고 마크다운 기호가 깨져서 너무 힘들어. 이걸 해결해 줄 웹 툴을 HTML, CSS, 자바스크립트 단일 파일로 만들어줘.

좌측에는 원본 입력창, 우측에는 변환 결과창을 나란히 배치해. 변환 로직은 1) 인라인 스타일(배경색 등) 무조건 제거, 2) **글씨**는 HTML  태그로 변환, 3) 줄바꿈을 네이버 블로그 에디터에 맞게 나   태그로 최적화해 줘. 마지막에 ‘원클릭 복사’ 버튼도 잊지 마.”

AI는 잠시 후 완벽한 코드를 생성해 주었습니다. 제 워드프레스(heung-in.com)의 새 페이지에 이 코드를 붙여넣고, 평소처럼 배경색이 잔뜩 묻은 AI 텍스트를 좌측에 붙여넣은 뒤 ‘변환’을 눌렀습니다. 그리고 우측에 나온 텍스트를 복사해 네이버 블로그에 붙여넣는 순간, 앓던 이가 빠지는 듯한 쾌감을 느꼈습니다. 지저분한 배경색은 온데간데없이 사라졌고, 굵은 글씨와 문단 간격이 완벽하게 세팅된 순백의 텍스트가 에디터에 예쁘게 자리 잡았습니다.

4. 커스텀 웹 툴 도입 전후의 블로그 포스팅 업무 비교

비교 항목	기존 방식 (수동 서식 수정)	‘포맷 변환기’ 도입 후	기대 효과
작업 프로세스	붙여넣기 → 배경색 제거 클릭 → 마크다운 기호 지우고 드래그해서 다시 굵게 처리 → 줄바꿈 수정	좌측 붙여넣기 → 변환 클릭 → 우측 복사 → 블로그 붙여넣기	불필요한 마우스 클릭 및 드래그 동작 90% 감소
서식 수정 소요 시간	포스팅 1건당 약 15~20분	단 5초	압도적인 시간 단축
정신적 피로도	글의 내용보다 서식 맞추는 것에 스트레스 집중	오직 글의 기획과 내용 검수에만 에너지 집중 가능	포스팅 생산성 및 퀄리티 비약적 상승

결론: ‘나’의 문제가 곧 ‘시장’의 문제다

이 변환 툴은 오직 저 자신의 극심한 짜증을 해결하기 위해 만든 것이었습니다. 하지만 곰곰이 생각해 보니, 네이버 블로그를 운영하며 챗GPT를 활용하는 수만 명의 블로거들이 매일 저와 똑같은 고통을 겪고 있을 것이 뻔했습니다. 내가 쓸모 있다고 느끼는 툴은, 시장에서도 반드시 수요가 있습니다. 이 단순한 텍스트 변환기야말로 사람들의 트래픽을 지속적으로 끌어모을 수 있는 강력한 마이크로 SaaS의 잠재력을 품고 있었습니다.

하지만 기쁨도 잠시, 며칠 동안 툴을 잘 쓰고 있던 어느 날 갑자기 예기치 못한 에러가 발생했습니다. 특정 특수문자를 넣었더니 변환기가 먹통이 되어버린 것입니다. 내가 쓸 때는 그냥 넘어가면 되지만, 남들에게 공개할 툴이라면 완벽하게 작동해야 합니다. 다음 12편에서는 비전공자가 웹 툴을 운영하다 마주치는 치명적인 버그와, AI와 함께 원인을 추적하며 시스템을 고쳐나가는 ‘디버깅(Debugging)’의 기술에 대해 심도 있게 다뤄보겠습니다.