Ruby on Rails를 활용한 마크다운 에디터 구축

도입

최근 웹에서 마크다운은 일반 텍스트 파일의 표준으로 자리 잡았으며, 개발자들은 수많은 마크다운 문서를 접하고 작성합니다. GitHub README, Stack Overflow 게시물, 기술 문서 등 다양한 분야에서 활용되며, AI 도구에도 사용됩니다. 본 글은 Ruby on Rails 환경에서 마크다운 에디터를 구축하는 과정을 다루며, Rails 8.1의 새로운 마크다운 관련 기능과 함께, GitHub와 유사한 실시간 미리보기 및 이미지 업로드 기능을 갖춘 에디터를 만드는 방법을 상세히 설명합니다.

1. 마크다운 언어와 Flavor

마크다운은 간결한 문법으로 HTML 변환에 용이하며, CommonMark 기반의 GitHub Flavored Markdown(GFM)이 널리 사용됩니다. Ruby에서는 Commonmarker 젬을 통해 GFM을 HTML로 효율적으로 변환할 수 있습니다.

2. Rails 마크다운 에디터 구축 핵심

Rails에서 마크다운 에디터를 구축하기 위해 Post 모델로 텍스트를 저장하고, Commonmarker를 사용하여 마크다운을 HTML로 렌더링합니다. 이때 Rails의 HTML sanitization을 피하기 위해 html_safe를 적용하는 것이 중요합니다.

3. 실시간 미리보기 및 UI 개선

Turbo Streams와 StimulusJS를 활용하여 마크다운 작성 중 실시간으로 HTML 미리보기를 제공합니다. posts_controller에 Turbo stream 액션을 정의하고 Stimulus 컨트롤러가 에디터 내용을 전송하여 미리보기를 업데이트합니다. TailwindCSS Typography 플러그인의 prose 클래스를 적용해 렌더링된 HTML의 스타일을 개선하고, Stimulus로 에디터와 미리보기 패널 간 전환 기능을 구현하여 사용자 경험을 향상시킵니다.

4. 이미지 업로드 기능 추가

ActiveStorage Direct Uploads를 이용해 이미지 붙여넣기 업로드 기능을 구현합니다. Stimulus 컨트롤러는 붙여넣기 이벤트를 감지하여 DirectUpload로 파일을 서버에 업로드하고, 완료된 blob 정보를 마크다운 이미지 링크로 변환하여 에디터의 현재 커서 위치에 삽입합니다.

결론

마크다운은 CommonMark와 GitHub Flavored Markdown(GFM)을 포함한 다양한 방언으로 구성된 웹의 핵심 언어입니다. Ruby 생태계에서는 `Commonmarker`가 GFM을 HTML로 변환하는 데 탁월한 선택입니다. 본 글에서는 `Turbo Streams`, `StimulusJS`, `TailwindCSS`의 강력한 기능을 활용하여 실시간 미리보기와 이미지 업로드 기능을 갖춘 멋진 마크다운 에디터를 Ruby on Rails로 신속하게 구축하는 방법을 살펴보았습니다. 이러한 접근 방식은 Rails의 기본 기능과 현대적인 프런트엔드 기술을 결합하여 강력하고 사용자 친화적인 웹 애플리케이션을 개발할 수 있음을 보여줍니다.

Ruby on Rails를 활용한 마크다운 에디터 구축

Create a Markdown Editor in Ruby on Rails

핵심 요약

도입

1. 마크다운 언어와 Flavor

2. Rails 마크다운 에디터 구축 핵심

3. 실시간 미리보기 및 UI 개선

4. 이미지 업로드 기능 추가

결론

관련 글들

GitHub Flavored Markdown Commonmarker를 활용한 Ruby/Rails 애플리케이션 마크다운 렌더링

Rails 애플리케이션에 구문 강조(Syntax Highlighting) 추가하기

Marksmith: Ruby on Rails를 위한 GitHub 스타일 마크다운 에디터

Rails 8.1의 새로운 Markdown MIME 타입 및 렌더러 활용법

댓글 0

로그인이 필요합니다

아직 댓글이 없습니다