핵심 콘텐츠를 형광펜으로 강조하는 기능 추가

문서 편집 시스템에 마크다운 스타일의 형광펜 마킹 기능을 추가했다. ==텍스트== 문법으로 감싼 부분을 노란 형광펜으로 강조할 수 있게 된 것.

왜 형광펜이 필요했나

콘텐츠 작성 과정에서 중요한 부분을 두드러지게 표현하고 싶은 건 아주 오래된 욕구다. 굵게(bold), 기울임(italic)만으로는 부족한 순간들이 있다. 특히 긴 문서에서 독자가 한눈에 핵심을 캐치하게 하려면, 색상 기반의 강조가 필수인데 형광펜만큼 직관적인 표현도 드물다.

실제로 PDF 주석, 종이 문서, 온라인 노트 앱들을 보면 형광펜은 텍스트 강조의 대명사다. 사용자들도 "이 부분을 눈에 띄게 해줄 수 있나?"라는 요청이 자주 나온다. 기존에는 그런 요청을 마크다운의 제한된 표현 문법으로 우회처리할 수밖에 없었던 거.

==마커== 문법을 선택한 이유

마크다운 확장 문법을 고를 때는 몇 가지 원칙을 따랐다. 먼저 직관성 — ==는 형광펜으로 줄을 그은 모양이 시각적으로 유사하다. 다음으로 기존 문법과의 충돌 회피 — 대부분의 마크다운 파서에서 ==는 예약되지 않은 문자 조합이라 호환성 걱정이 적다. 마지막으로 메디뷰랩 등 유사 도구들과의 스타일 일관성을 맞추는 것도 중요했다.

이런 결정은 팀 관점에서도 의미가 있다. 사용자가 다양한 도구를 오갈 때 같은 표기법이 통용되면 학습 곡선이 낮다. 새로운 마크다운 확장이 나올 때마다 일일이 학습할 필요가 없으니까.

구현 과정에서 본 변경

lib_publish.js에서는 파서 로직을 확장했다. 기존 마크다운 토큰화 단계에 새로운 패턴 인식 규칙을 추가해서 ==...== 구간을 별도의 토큰으로 분리하고, 렌더링 단계에서 해당 부분을 <mark> HTML 태그(또는 커스텀 클래스)로 감싸도록 했다.

ui.html에서는 스타일 시트를 업데이트했다. <mark> 요소에 노란 배경색과 적절한 패딩/마진을 지정해서 형광펜 효과를 연출하는 식. 미리보기도 함께 렌더링되어야 하니까 에디터 미리보기 영역과 최종 퍼블리시 화면 양쪽에서 동일한 스타일이 적용되도록 신경썼다.

// 개념적 패턴 (실제 코드와는 다를 수 있음)
const highlightPattern = /==(.*?)==/g;
content = content.replace(highlightPattern, '<mark class="yellow-highlight">$1</mark>');

회고: 마크다운 확장의 트레이드오프

이런 식으로 마크다운에 기능을 추가할 때 항상 고민하는 부분이 있다. 커스텀 문법이 늘어날수록 다른 마크다운 도구로의 이식성(portability)이 떨어진다는 점. 우리 시스템에서는 잘 렌더링되지만, 사용자가 콘텐츠를 다른 플랫폼으로 옮기려면 형광펜 마킹이 사라지거나 깨질 수 있다.

하지만 이건 실제로는 큰 문제가 아니었다. 우리 서비스에서 생산된 콘텐츠의 대부분이 우리 플랫폼 내에서 완성되고 소비되니까. 그리고 사용자 입장에서는 "다른 도구와의 호환성보다 우리 서비스에서 최고의 경험"이 더 중요하다.

또 다른 고려사항은 문법 포화도. ==, ~~, **, __ 등등 기호 조합이 많아질수록 사용자가 어떤 기호를 써야 하는지 혼동할 가능성이 높아진다. 그래서 이 기능을 추가할 때 팀에서 신중하게 검토했고, "형광펜"이라는 구체적인 유스케이스가 충분히 강하다고 판단했을 때 병행했다.

결국 마크다운 확장은 "얼마나 편리한가"와 "얼마나 간단한가"의 균형인데, 우린 이번엔 편리함 쪽에 무게를 뒀다는 뜻이다.

🛒 이 글과 어울리는 추천 상품

• 노트북 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →
• 모니터 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.