본 내용은 Rails 애플리케이션에서 위지윅(WYSIWYG) 마크다운 에디터인 Marksmith를 활용하는 방법을 소개합니다. 특히 기존 `text` 컬럼을 사용하는 환경에서 마크다운 기능을 쉽게 추가하고, Active Storage를 통해 파일 업로드를 처리하는 데 중점을 둡니다. Marksmith는 단순하며 의존성이 적어 특정 상황에서 Action Text의 대안으로 고려될 수 있습니다.
Marksmith를 Rails 프로젝트에 통합하기 위해서는 몇 가지 설정 단계가 필요합니다. 먼저 marksmith 젬과 마크다운을 HTML로 변환하는 commonmarker 젬을 Gemfile에 추가하고 bundle install을 실행합니다. 프런트엔드에서는 Yarn 또는 Importmap을 사용하여 @ao-hq/marksmith 패키지를 설치해야 합니다. JavaScript 컨트롤러(application/javascript/controllers/index.js)에 Marksmith 컨트롤러를 임포트하고 등록하는 과정이 필수적입니다. 또한, 레이아웃 파일(application.html.erb)에 Marksmith 스타일시트를 링크하여 에디터의 시각적 스타일을 적용해야 합니다.
뷰(_form.html.erb)에서는 text_area 헬퍼 대신 marksmith 헬퍼를 사용하여 마크다운 에디터를 활성화할 수 있습니다. 만약 폼 헬퍼를 사용하지 않는다면 marksmith_tag를 직접 사용할 수도 있습니다.
저장된 마크다운 내용을 화면에 표시할 때는 보안에 각별히 유의해야 합니다. 이스케이프되지 않은 HTML을 직접 렌더링하면 크로스 사이트 스크립팅(XSS) 공격에 취약해질 수 있습니다. 따라서 raw나 html_safe 대신 Rails의 sanitize 헬퍼를 사용하는 것이 강력히 권장됩니다. sanitize 헬퍼를 사용할 때, Marksmith 헬퍼로 변환된 HTML 결과에 대해 허용할 태그와 속성을 명시적으로 지정해야 합니다. 예를 들어, style, class, lang, src와 같은 속성 및 table, th, tr, td, span, img 등 필요한 HTML 태그를 허용 목록에 추가해야 합니다. Rails의 ActionView::Helpers::SanitizeHelper::WhiteListSanitizer에서 제공하는 기본 허용 목록을 활용하되, Marksmith에서 생성되는 특정 태그나 속성(img 태그의 src 속성 등)이 누락되지 않도록 주의 깊게 설정해야 합니다. 올바른 소독 과정을 거쳐야만 마크다운으로 작성된 내용이 안전하게 HTML로 변환되어 사용자에게 표시될 수 있습니다.
Marksmith는 Active Storage와의 연동을 통해 이미지와 같은 파일을 쉽게 업로드하고 마크다운에 삽입할 수 있는 기능을 제공합니다. 이는 별도의 복잡한 설정 없이 Active Storage의 기본 기능을 활용하여 파일 처리를 통합할 수 있다는 장점을 가집니다. 비디오에서는 제품 설명 필드에 이미지를 업로드하고 마크다운 형식으로 삽입한 후, 이를 올바르게 렌더링하는 과정을 시연하며 Active Storage 연동의 편리함을 보여줍니다.
Marksmith는 Trix나 Action Text와 같은 Rails의 기본 WYSIWYG 에디터와는 다른 접근 방식을 취합니다. Action Text는 풍부한 콘텐츠 편집 기능을 제공하는 반면, Marksmith는 기존의 단순 text 컬럼에 마크다운 편집 기능을 추가하는 데 더 적합합니다. 특히 이미 text 컬럼을 광범위하게 사용하고 있는 레거시 애플리케이션이나, 단순한 마크다운 기반의 편집 기능만 필요한 특정 사용 사례에서 Marksmith는 빠르고 효율적인 대안이 될 수 있습니다. 비디오 말미에는 Action Text가 향후 마크다운 지원을 강화할 예정이라는 점을 언급하며, Marksmith를 현재의 대안으로 사용하거나 향후 Action Text 업데이트를 기다리는 선택지를 제시합니다.
결론적으로, Marksmith는 Rails 애플리케이션에서 기존 `text` 컬럼에 마크다운 편집 기능을 도입하고자 할 때 효과적인 WYSIWYG 에디터 솔루션을 제공합니다. Active Storage와의 긴밀한 연동으로 파일 업로드를 쉽게 처리하며, 적절한 HTML 소독 과정을 통해 보안 위험을 줄일 수 있습니다. 단순하고 가벼운 Marksmith는 특정 요구사항이나 레거시 환경에서 Action Text의 강력한 대안이 될 수 있습니다.