새로운 작성기 소개: Discourse에서 글쓰기가 이제 더 쉬워졌습니다

올해의 주요 프로젝트 중 하나는 작성기(composer)를 위한 새로운 리치 텍스트 편집 모드를 개발하는 것이었습니다. 이를 통해 Discourse에서 글을 작성하는 경험이 더 익숙하고 직관적으로 느껴집니다. 새로운 작성기는 이미 Meta에서 사용 가능하며, 실험적 설정으로 제공되어 왔습니다. 이제 experimental(실험적) 라벨을 떼어내고 여러분의 커뮤니티에 이를 사용해 볼 것을 초대할 수 있는 단계에 이르렀습니다!

이 주제에서는 작성기에 대해 더 자세히 공유하고, 그 작동 원리, 그리고 몇 번의 클릭만으로 커뮤니티에서 이를 활성화하는 방법을 안내하겠습니다.

:writing_hand: Discourse를 위한 새로운 리치 텍스트 에디터

새로운 리치 텍스트 에디터는 Discourse 사용자의 글쓰기 경험을 단순화하며, 특히 기술에 익숙하지 않거나 Markdown으로 글을 작성하는 데 익숙하지 않거나 불편함을 느끼는 사용자들에게 유용합니다. 이 리치 텍스트 에디터는 Markdown을 지원할 뿐만 아니라, 일반적인 키보드 단축키와 툴바 서식 조정 기능을 제공합니다. 또한 서식이 즉시 렌더링되어 Google Docs나 Notion과 같은 친숙한 도구와 유사한 WYSIWYG(“What You See Is What You Get”, 보이는 그대로) 경험을 제공합니다.

:thought_balloon: Markdown의 미래

많은 Discourse 사용자가 현재 Markdown 작성기를 사랑하며, 예측 가능하고 단순한 글쓰기 경험을 즐기고 있다는 것을 알고 있습니다. 새로운 에디터는 기존 Markdown 모드와 나란히 존재하는 작성기 "모드"이므로, 사용자와 회원들은 자신에게 가장 적합한 글쓰기 스타일을 선택할 수 있습니다.

클래식한 Markdown 작성기에서 수행하던 대부분의 작업이 이제 리치 텍스트 에디터에서도 지원됩니다. 여기에는 다음이 포함됩니다:

  • Markdown(**굵게**), 일반적인 키보드 단축키(Command + B), 툴바 아이콘을 통해 지원되는 모든 기본 서식.

  • 표 만들기, 투표 만들기, 날짜/시간 삽입, 세부 정보 숨김 섹션 추가, 블러 스포일러 섹션 추가, 파일/이미지/비디오 업로드, 링크를 원박스(onebox)로 렌더링, 카테고리/태그/사용자 멘션 스타일링, 콘텐츠 인용, 각주 삽입 등 고급 기능 지원.

  • 링크 방문, 편집, 복사, 제목 설정 또는 삭제를 위한 전용 링크 UI

  • 이미지 크기 조정, 캡션 추가 또는 삭제를 위한 전용 이미지 UI

그러나 표와 투표 편집을 더 쉽게 만드는 것 등 아직 작업 중인 영역이 있습니다. 작성기 모드 간의 기능 동등성을 향해 계속 노력할 것이며, 여러분에게 가장 중요한 기능과 기능이 무엇인지에 대한 Contribute > Feature 요청을 공유해 주시면 업무 우선순위를 정하는 데 도움이 됩니다. 그 동안에는 고급 작업이 필요할 때 언제든 Markdown 모드로 다시 전환할 수 있습니다.

:hammer: 우리는 어떻게 만들었는가

우리의 구현은 훌륭한 ProseMirror와 그 비코어(non-core) Markdown 모듈을 기반으로 하며, 해당 모듈의 스키마, 파싱 및 직렬화 정의를 기반으로 Discourse 고유 기능을 추가로 개발했습니다.

:gear: 새로운 작성기 활성화하기

리치 에디터는 모든 커뮤니티에서 기본적으로 활성화되어 있습니다. 귀하나 회원들이 작성기를 열면 툴바에 토글 스위치를 확인할 수 있습니다. 이를 통해 클래식한 Markdown 전용 모드와 새로운 리치 텍스트 에디터 간을 전환할 수 있습니다.

CleanShot 2025-06-11 at 15.45.35


업데이트: 회원들에게 기본적으로 Markdown 작성기를 표시하기를 선호하는 경우:

45개의 좋아요

좋은 소식입니다. 로드맵에 이미 모든 리치 에디터에 존재하는 기능이 있나요? 예를 들어, 색상이 적용된 텍스트 같은 것 말입니다. 마크다운은 색상 텍스트를 지원하지 않으므로, CSS 애드온을 사용하면 이를 구현할 수 있습니다. 아니면 우리가 아직 알지 못하는 다른 옵션이 있을 수도 있습니다.

3개의 좋아요

그 후 기본 편집기를 선택할 수 있는 설정이 있나요? 감사합니다.

4개의 좋아요

아직 없지만, 추가할 예정입니다.

12개의 좋아요

“텍스트 크기” 버튼(이 사이트에는 표시되지 않지만 내 사이트에는 있습니다)을 누르면 다음과 같은 오류가 발생합니다

게시물에 “이미지 UI”도 보이지 않습니다.

이미지 크기 조절 옵션을 정말로 간절히 기다려 왔는데, 이 기능의 단순함이 마음에 듭니다!

8개의 좋아요

새 편집기와 호환되려면 업데이트가 필요한 커스텀 설정입니다. 아마도 Composer Button Bonanza 와 같은 테마 컴포넌트를 사용 중이실 수 있습니다. (다른 것들도 있을 수 있습니다.)

최근에 Discourse를 업데이트하셨나요? 그렇다면 에디터에서 이미지를 보려면 이미지 위에 마우스를 클릭해야 합니다.

3개의 좋아요

이것은 공식 bbcode 플러그인인 것 같습니다. 색상 지원과 크기 조절 등 다양한 기능이 포함되어 있는 것으로 기억합니다.

4개의 좋아요

제 제안은 다음과 같습니다:

  1. 저는 마크다운으로 작성하는 것을 좋아합니다(아마도 익숙해져서 그런 것일까요?). 하지만 마크다운 버전을 사용할 때 새로운 모노스페이스(고정폭) 글꼴은 마음에 들지 않습니다. 그래서 제 커뮤니티에 리치 에디터를 포함시키는 것이 제게는 의미가 없습니다(제가 가장 많이 작성할 사람이기 때문이죠). 그럼에도 불구하고, 이는 사용자가 활성화/비활성화할 수 있는 설정으로 만들 수 있을 것입니다. 예를 들어, 제가 비활성화하면 항상 마크다운 버전만 제공되어 ‘보통’ 글꼴(모노스페이스가 아닌)을 유지할 수 있습니다. 활성화하면 구현된 기능이 제공됩니다. 관리자로서 커뮤니티 전체에 대해 활성화할 수 있지만, 각 사용자는 개별적으로 활성화/비활성화할 수 있어야 합니다. 또는 각 사용자가 마크다운 버전에서 어떤 글꼴을 사용할지 결정할 수 있도록 하는 것도 좋습니다.
  2. 리치 에디터가 활성화되면 전체 작성 영역이 리사이즈되고 이동되는 것이 조금씩 방해가 됩니다. 특히 두 버전을 번갈아 가며 사용할 예정이라면(그렇게 될 것입니다), 토글을 클릭할 때마다 창이 리사이즈되는 것이 제게는 산만하게 느껴집니다. 리치 에디터에서는 오른쪽의 추가 미리보기 패널이 필요 없다는 점은 이해하지만, 그래도… 그 공간을 다른 용도로 사용할 수는 없을까요?
  3. 이는 사소한 세부 사항이지만, 리사이즈가 유지된다면 작성 영역이 페이지 중앙에 정렬되어 있는 반면, 토픽 영역과 비교했을 때는 정렬이 맞지 않아 제 눈에는 어색하게 느껴집니다:

솔직히 말해서, 이 기능을 사용할지 아직 확신이 서지 않습니다. 궁극적으로 유용할 수 있다는 점은 알지만, 현재로서는 이 기능을 사용해야 할 때마다 항상 ‘가려운’ 느낌이 듭니다.

4개의 좋아요

한 사용자가 HTML 코드를 시도했는데 WYSIWYG 모드에서 렌더링되지 않았습니다. HTML 텍스트가 그냥 박스 안에 들어간 것뿐이었습니다. 마크다운으로 다시 전환하면 미리보기 패널에서 올바른 결과를 볼 수 있습니다. HTML의 결과를 표시해야 하는 건지, 아니면 미리보기를 보려면 마크다운으로 다시 전환해야 하는 건가요? 예를 들어:


위키 문서 작성 중

작성자가 작업을 마칠 수 있도록 기다려 주세요. 댓글로 도움이나 조언을 제공하실 수 있지만, 허락 없이 편집하지 마세요.


`
2개의 좋아요

이것은 의도적인 것입니다. 앞서 보셨듯이, 복잡한 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.
---
2개의 좋아요

포럼에서 새 작성기를 테스트해 보고 있는데 정말 마음에 듭니다. 하지만 테스트 중 의도된 것인지 아닌지 알 수 없는 이상한 동작을 발견했습니다.

기존 편집기로 누군가를 인용할 때 레이아웃은 정상이고 커서가 인용문 아래에 나타납니다:

하지만 새 편집기를 기본적으로 사용하거나 답변 작성 중 편집기를 변경하면 커서가 인용된 텍스트의 끝으로 자동으로 이동합니다:

이 상태에서 아무 내용을 입력해도 인용문의 일부로 처리되며, 게시물을 시도하면 게시 오류가 발생합니다:

이것이 기본 동작이라면 사용자에게 안내할 수 있으니, 새 편집기로 사용자를 인용할 때의 새로운 동작인지 확인하고 싶었습니다.

감사합니다.

1개의 좋아요

의도적으로 그렇게 한 것은 아니며, 이 동작을 특히 매우 빠르게 개선하기 위한 내부 작업을 진행 중입니다.

3개의 좋아요

안녕하세요 :waving_hand: 감사합니다, 정말 멋지네요 :heart_eyes:

[wrap]Hello[/wrap] 래핑을 아직 지원하지 않는다는 것을 알게 되었고, 이를 사용하려고 하면 다음과 같은 메시지가 표시됩니다.

Markdown 파서가 지원하지 않는 토큰 유형 wrap_open

2개의 좋아요

최소한 지금은 범용적인 “wrap” 노드를 지원할 계획은 없는 것 같습니다. 그게 어떤 형태가 될 거예요? 그냥 div인가요?

아니면 새로운 컴포저와 함께 사용할 [wrap=something]을 기대하고 계신 건가요?

2개의 좋아요

이 에러 메시지를 어디서 보셨나요? 제 인스턴스는 BB코드를 그냥 무시하거든요



이렇게


Hello

으로 바뀝니다

우리는 Discourse IconDiscourse Stickers와 같은 테마 컴포넌트를 사용합니다.

스티커 컴포넌트는 래핑 없이 만들 수 있다고 생각합니다. 이는 단순히 타겟을 지정하고 스티커에 일부 스타일을 추가하기 위한 것이기 때문입니다.

부드러운 텍스트 에디터(Rich Text Editor) 쪽에 붙여넣으시거나, 마크다운 쪽에 붙여넣었다면 마크다운에서 부드러운 텍스트 에디터로 전환하세요.

2개의 좋아요

오류는 발생하지 않지만, BBcode가 그대로 남아 있습니다. 부드러운 텍스트 편집기가 선택된 상태에서 데스크톱에서는 미리보기가 표시되지 않습니다.



이것은 Discourse 커밋 해시 latest-release +269에서 발생했습니다.

그리고

BBcode 커밋 해시는 1fbff6b1입니다.

이것은 의도된 동작입니다. 아직 인식되지 않거나 구현되지 않은 BBCode는 의도적으로 이스케이프 처리되어(텍스트로 표시됨) 표시됩니다. 현재 상태가 바로 그 경우입니다.

이렇게 하면 될까요:

.d-editor-container .d-editor-textarea-wrapper textarea.d-editor-input {
    font-family: var(--font-family);
}

3개의 좋아요