내부 CMS 개발 시 기술 설계를 어떻게 하나요?

Question

안녕하세요. 회사에서 컨텐츠 생산/관리를 위해 여러 유료/무료 headless CMS를 검토했는데 결국 요구사항에 맞는 정도로 customization이 안 되어서 자체적으로 구현을 해야하는 상황입니다.

저희 팀에서는 프론트엔드를 React로 작성하고 있어서 Draft.js, ProseMirror 등 여러 rich content editor를 검토하고 있는데 내부 CMS를 구현해본 경험이 있는 선배님들께 기술 자문을 구하고 싶습니다.

기획에서 원하는 것은 퍼블리처럼 여러 형태의 rich text를 지원하면서 고객들이 컨텐츠 원하는 부분에 하이라이트, 메모를 기록/저장할 수 있고, 추후에 custom link 같은 자체 기능을 추가할 수 있는 확장에도 열려있는 것입니다.

스펙이 엄청 큰 것 같아 어디에서부터 시작해야할지 조금 막막한데 기술 설계에 대한 어떠한 조언이라도 주시면 정말 감사드리겠습니다. 컨설팅 비용을 받고 커피챗/화상미팅 참여해주실 수 있는 분도 적극 환영입니다!!

손정현 · Answer

안녕하세요!

내부 요구사항이 어느 정도인지 모르지만 말씀하신 하이라이트, 메모를 기록/저장, custom link 같은 기능은 에디터에 따라 지원해주는 곳도 있을 것 같긴합니다. 지원이 안되더라도 플러그인 형태로 기능을 추가할 수는 있을거에요.

우선 퍼블리의 경우 ckeditor 를 사용하고 있고, 컨텐츠 생산자가 아닌 사용자 입장에서 형광펜 하이라이트 등 추가 기능은 에디터에 의존하지 않고 직접 구현했던 것 같습니다 (오래되어서 기억이 잘 안나네요 ㅎㅎ)

또다른 에디터로는 커리어리 사이드 프로젝트 쪽 기능에 추가된 Tiptap 에디터가 있는데요. 이 에디터는 prose-mirror 기반이에요. prose-mirror에 스키마나 플러그인 추가 같은 것들이 좀 더 간편화 된게 장점인것 같아요. 이슈가 넘쳐나고 레퍼런스가 적은게 단점이긴합니다.
- https://careerly.co.kr/lounge/side-projects/462

말씀하신대로 커스터마이제이션이 어느정도 인지에 따라 CMS를 직접 구현하실건지, 유/무료 CMS를 사용하실건지 달라질 것 같아요.

개인적인 추천은 커스터마이제이션이 중요하다면 확장이 비교적 쉽고 레퍼런스가 많은 CMS를 선택하셔서 개발하시는 걸 추천 드립니다. 생으로 처음부터 개발하려면 한번에 구현하기에 스펙이 큰 작업인것 같긴해요.

전 prose-mirror 참고했을때 atlassian 쪽 코드를 많이 본 기억이 있습니다.
- https://github.com/atlassian?q=prosemirror&type=all&language=&sort=
- https://ckeditor.com/
- https://github.com/ueberdosis/tiptap