‘의존성 지옥’에서 탈출하기

처음엔 당연히 marked.js나 markdown-it 같은 유명한 라이브러리를 썼습니다. 근데 문제가 터지더라고요. 최신 버전으로 업데이트하면 기존에 잘 돌아가던 커스텀 렌더러 로직이 깨지거나, 인자 구조가 객체로 변하면서 [object Object]라는 외계어를 뿜어냈습니다.

1인 창업가에게 시간은 곧 돈입니다. 라이브러리 내부 소스 뜯어보며 “왜 인자가 이렇게 바뀌었지?” 고민할 시간에 내가 완벽하게 통제할 수 있는 코드를 짜는 게 낫겠다 싶었죠. 그래서 ‘Vanilla JS + Regex’ 조합으로 선회했습니다. 외부 라이브러리 0개, 오직 순수 함수로만 돌아가는 파서를 만든 이유입니다.

코드 블록 보호를 위한 ‘치환자(Placeholder)’ 전략

마크다운 파싱에서 가장 골치 아픈 게 바로 코드 블록(“`)입니다. 전체 텍스트를 줄바꿈(\n) 기준으로 잘라서 문단(`p`) 태그를 입히다 보면, 코드 블록 내부의 줄바꿈까지 다 잘려서 코드가 엉망이 되거든요.

저는 이 문제를 해결하기 위해 ‘선 추출 후 삽입’ 전략을 썼습니다.

• Step 1: 정규표현식으로 코드 블록만 먼저 싹 긁어모읍니다.
• Step 2: 그 자리에 __CODE_BLOCK_0__ 같은 고유한 식별자를 남겨둡니다.
• Step 3: 본문의 제목, 볼드, 링크 등을 다 변환한 뒤 마지막에 식별자를 실제 코드 HTML로 갈아 끼웁니다.

이렇게 하면 코드 내부의 특수문자나 줄바꿈이 다른 정규표현식 규칙에 오염되는 걸 완벽하게 막을 수 있습니다. 5년 차 짬바에서 나온 나름의 ‘안전장치’인 셈이죠.

제목(H1) 추출과 볼드(**) 기호의 세밀한 제어

블로그 플랫폼마다 요구하는 규격이 다릅니다. 티스토리는 제목칸이 별도로 있고, 워드프레스는 구텐베르크 에디터에서 제목 블록이 따로 있죠.

저는 파서 상단에서 # 제목을 먼저 추출해서 객체로 반환하게 만들었습니다. 덕분에 클립보드에 제목만 따로 담을 수 있게 됐죠.

볼드 처리도 마찬가지입니다. **강조**를 <strong>으로 바꿀 수도 있지만, 저는 더 가볍고 직관적인 <b> 태그를 택했습니다. 티스토리 제목칸처럼 태그를 아예 못 읽는 곳을 위해 제목에서는 모든 마크다운 기호를 지워버리는 replace 로직도 추가했고요.

TypeScript

// 제목 추출 정규식 예시
const titleMatch = markdown.match(/^#\s+(.*)$/m);
const cleanTitle = titleMatch ? titleMatch[1].replace(/\*\*/g, '') : '';

💡 Tip: 정규표현식을 짤 때는 탐욕적 일치(.*)보다는 비탐욕적 일치(.*?)를 적절히 섞어 써야 의도치 않게 다른 문장까지 빨려 들어가는 걸 방지할 수 있습니다.

1인 창업가의 시선에서 본 ‘제품의 본질’

사실 이 도구가 대단한 인공지능 기술을 담고 있는 건 아닙니다. 하지만 ‘포스팅 동선을 획기적으로 줄여준다’는 본질에는 충실하죠.

• 가독성 최우선: 프리티어(Prettier)가 넣은 불필요한 빈 줄을 필터링해서 본문 밀도를 높였습니다.
• 사용자 경험(UX): 개발자가 쓸 거니까 UI보다는 ‘복사 속도’에 집중했습니다. 버튼 하나로 제목과 본문을 따로 챙기는 동선이죠.

기술적인 완벽함보다 중요한 건 **”내가 지금 겪는 불편함을 내 기술로 해결했는가”**인 것 같습니다. 직접 만든 이 파서 덕분에 저는 이제 포스팅 서식 맞추는 데 에너지를 쓰지 않습니다. 그 에너지를 아껴서 다음 SaaS 기획안 한 줄 더 쓰는 게 훨씬 이득이니까요.

---

📝 3줄 요약

• 외부 라이브러리 의존성을 제거해 업데이트 공포에서 벗어났습니다.
• 치환자 전략으로 코드 블록의 무결성을 완벽하게 보존했습니다.
• 제목 추출과 기호 제거 로직으로 플랫폼 맞춤형 포스팅 환경을 만들었습니다.

당장 실행할 Action Item

• 지금 쓰고 있는 마크다운 변환 로직이 복잡하다면, 핵심 규칙 5가지만 정규표현식으로 직접 짜보세요. 도구에 대한 통제력이 생기면 개발이 훨씬 즐거워집니다.

---

MD to Tistory Parser 링크

MD to Tistory Parser | 마크다운을 티스토리 맞춤 HTML로 1초 만에 변환