올해의 주요 프로젝트 중 하나는 작성기(composer)를 위한 새로운 리치 텍스트 편집 모드를 개발하는 것이었습니다. 이를 통해 Discourse에서 글을 작성하는 경험이 더 익숙하고 직관적으로 느껴집니다. 새로운 작성기는 이미 Meta에서 사용 가능하며, 실험적 설정으로 제공되어 왔습니다. 이제 experimental(실험적) 라벨을 떼어내고 여러분의 커뮤니티에 이를 사용해 볼 것을 초대할 수 있는 단계에 이르렀습니다!
이 주제에서는 작성기에 대해 더 자세히 공유하고, 그 작동 원리, 그리고 몇 번의 클릭만으로 커뮤니티에서 이를 활성화하는 방법을 안내하겠습니다.
Discourse를 위한 새로운 리치 텍스트 에디터
새로운 리치 텍스트 에디터는 Discourse 사용자의 글쓰기 경험을 단순화하며, 특히 기술에 익숙하지 않거나 Markdown으로 글을 작성하는 데 익숙하지 않거나 불편함을 느끼는 사용자들에게 유용합니다. 이 리치 텍스트 에디터는 Markdown을 지원할 뿐만 아니라, 일반적인 키보드 단축키와 툴바 서식 조정 기능을 제공합니다. 또한 서식이 즉시 렌더링되어 Google Docs나 Notion과 같은 친숙한 도구와 유사한 WYSIWYG(“What You See Is What You Get”, 보이는 그대로) 경험을 제공합니다.
Markdown의 미래
많은 Discourse 사용자가 현재 Markdown 작성기를 사랑하며, 예측 가능하고 단순한 글쓰기 경험을 즐기고 있다는 것을 알고 있습니다. 새로운 에디터는 기존 Markdown 모드와 나란히 존재하는 작성기 "모드"이므로, 사용자와 회원들은 자신에게 가장 적합한 글쓰기 스타일을 선택할 수 있습니다.
클래식한 Markdown 작성기에서 수행하던 대부분의 작업이 이제 리치 텍스트 에디터에서도 지원됩니다. 여기에는 다음이 포함됩니다:
Markdown(**굵게**), 일반적인 키보드 단축키(Command + B), 툴바 아이콘을 통해 지원되는 모든 기본 서식.
그러나 표와 투표 편집을 더 쉽게 만드는 것 등 아직 작업 중인 영역이 있습니다. 작성기 모드 간의 기능 동등성을 향해 계속 노력할 것이며, 여러분에게 가장 중요한 기능과 기능이 무엇인지에 대한 Contribute > Feature 요청을 공유해 주시면 업무 우선순위를 정하는 데 도움이 됩니다. 그 동안에는 고급 작업이 필요할 때 언제든 Markdown 모드로 다시 전환할 수 있습니다.
우리는 어떻게 만들었는가
우리의 구현은 훌륭한 ProseMirror와 그 비코어(non-core) Markdown 모듈을 기반으로 하며, 해당 모듈의 스키마, 파싱 및 직렬화 정의를 기반으로 Discourse 고유 기능을 추가로 개발했습니다.
새로운 작성기 활성화하기
리치 에디터는 모든 커뮤니티에서 기본적으로 활성화되어 있습니다. 귀하나 회원들이 작성기를 열면 툴바에 토글 스위치를 확인할 수 있습니다. 이를 통해 클래식한 Markdown 전용 모드와 새로운 리치 텍스트 에디터 간을 전환할 수 있습니다.
좋은 소식입니다. 로드맵에 이미 모든 리치 에디터에 존재하는 기능이 있나요? 예를 들어, 색상이 적용된 텍스트 같은 것 말입니다. 마크다운은 색상 텍스트를 지원하지 않으므로, CSS 애드온을 사용하면 이를 구현할 수 있습니다. 아니면 우리가 아직 알지 못하는 다른 옵션이 있을 수도 있습니다.
저는 마크다운으로 작성하는 것을 좋아합니다(아마도 익숙해져서 그런 것일까요?). 하지만 마크다운 버전을 사용할 때 새로운 모노스페이스(고정폭) 글꼴은 마음에 들지 않습니다. 그래서 제 커뮤니티에 리치 에디터를 포함시키는 것이 제게는 의미가 없습니다(제가 가장 많이 작성할 사람이기 때문이죠). 그럼에도 불구하고, 이는 사용자가 활성화/비활성화할 수 있는 설정으로 만들 수 있을 것입니다. 예를 들어, 제가 비활성화하면 항상 마크다운 버전만 제공되어 ‘보통’ 글꼴(모노스페이스가 아닌)을 유지할 수 있습니다. 활성화하면 구현된 기능이 제공됩니다. 관리자로서 커뮤니티 전체에 대해 활성화할 수 있지만, 각 사용자는 개별적으로 활성화/비활성화할 수 있어야 합니다. 또는 각 사용자가 마크다운 버전에서 어떤 글꼴을 사용할지 결정할 수 있도록 하는 것도 좋습니다.
리치 에디터가 활성화되면 전체 작성 영역이 리사이즈되고 이동되는 것이 조금씩 방해가 됩니다. 특히 두 버전을 번갈아 가며 사용할 예정이라면(그렇게 될 것입니다), 토글을 클릭할 때마다 창이 리사이즈되는 것이 제게는 산만하게 느껴집니다. 리치 에디터에서는 오른쪽의 추가 미리보기 패널이 필요 없다는 점은 이해하지만, 그래도… 그 공간을 다른 용도로 사용할 수는 없을까요?
이는 사소한 세부 사항이지만, 리사이즈가 유지된다면 작성 영역이 페이지 중앙에 정렬되어 있는 반면, 토픽 영역과 비교했을 때는 정렬이 맞지 않아 제 눈에는 어색하게 느껴집니다:
한 사용자가 HTML 코드를 시도했는데 WYSIWYG 모드에서 렌더링되지 않았습니다. HTML 텍스트가 그냥 박스 안에 들어간 것뿐이었습니다. 마크다운으로 다시 전환하면 미리보기 패널에서 올바른 결과를 볼 수 있습니다. HTML의 결과를 표시해야 하는 건지, 아니면 미리보기를 보려면 마크다운으로 다시 전환해야 하는 건가요? 예를 들어:
위키 문서 작성 중
작성자가 작업을 마칠 수 있도록 기다려 주세요. 댓글로 도움이나 조언을 제공하실 수 있지만, 허락 없이 편집하지 마세요.
이것은 의도적인 것입니다. 앞서 보셨듯이, 복잡한 HTML 지원은 “passthrough” HTML 블록을 통해서만 이루어집니다. <kbd>와 같은 요소에서 부분적으로 지원되긴 하지만, HTML 작성은 새 에디터에서 시각적으로 완전하게 지원될 것으로 기대되지 않으므로 HTML 에디터가 제공되는 것입니다.
그렇다면 다음 HTML을 고려해 보겠습니다.
<hr>
<H2 style="color:red;">Wiki article under construction</h2>
<p> Please allow the creator to work on this as they are able. You are free to offer help or advice by replying, but please do not edit it without permission.</p>
<hr>
style 속성은 세리자니저에 의해 제거되므로, 이렇게 작성하는 것이 어떨까요:
---
## Wiki article under construction
Please allow the creator to work on this as they are able. You are free to offer help or advice by replying, but please do not edit it without permission.
---