Next.js로 실시간 마크다운 미리보기 기능 만들기 (개발기)

Next.js와 Tailwind CSS를 사용하여 빠르고 안전한 클라이언트 사이드 마크다운 에디터를 만든 과정을 공유합니다. CheetSet 개발 비하인드 스토리입니다.

개인정보 보호를 최우선으로 하는, 랙 없는 에디터 만들기.

왜 만들었나요?

블로그 글을 쓰면서 마크다운 문법을 빠르게 확인해야 할 일이 많았습니다. 하지만 기존 도구들은 너무 무겁거나, 로그인이 필요하거나, 데이터를 서버로 전송하는 등 불편함이 있었습니다. 우리는 더 단순하고, 빠르며, 100% 브라우저에서만 작동하는 도구가 필요했습니다.

성능 목표를 달성하기 위해 다음과 같은 경량화된 최신 스택을 선택했습니다:

긴 문서를 입력할 때 메인 스레드가 멈추지 않도록 하는 것이 가장 큰 과제였습니다. React의 memo를 활용하고 렌더링 프로세스를 최적화하여, 복잡한 문서에서도 타자 입력이 항상 즉각적으로 반응하도록 만들었습니다.

사용자가 임의의 HTML을 렌더링하게 하는 것은 위험합니다. 우리는 강력한 살균(Sanitization) 과정을 거쳐 XSS(교차 사이트 스크립팅) 공격을 방지하면서도, 문서 작성에 필요한 안전한 HTML 태그는 허용하도록 구현했습니다.

데스크탑에서는 쾌적한 분할 화면(Split View)을 제공하고, 모바일에서는 미리보기 화면을 우선시하는 유연한 레이아웃을 설계하여 어떤 기기에서도 편안하게 글을 쓸 수 있게 했습니다.

완성된 도구는 압축 시 50KB 미만으로 매우 가볍고 즉시 로드됩니다. GitHub Flavored Markdown(표, 취소선 등)을 완벽하게 지원하며 코드 블록 하이라이팅도 제공합니다.

설치 없이 브라우저에서 바로 그 속도를 경험해보세요.

앞으로 PDF 내보내기 기능과 작성한 글을 바로 GitHub Gist로 공유하는 기능을 추가할 예정입니다. 많은 기대 부탁드립니다!