새로운 작곡가(Composer)를 사용해 보세요!

Discourse에서 글을 쓰기가 더 쉬워지도록 새로운 리치 텍스트 에디터 모드를 개발해 왔습니다. 이제 커뮤니티에서 이 기능에 대한 더 많은 피드백을 받기 위해 테스트를 시작할 준비가 되었습니다!

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

이 토픽은 새로운 컴포저 테스트 가이드이자 피드백을 추적하는 허브 역할을 하게 됩니다. 미리 도움을 주셔서 감사합니다! :sparkling_heart:

:gear: 커뮤니티에서 새 컴포저 사용

현재 컴포저는 여전히 실험 단계로 간주되고 있습니다 하지만 rich editor 설정을 활성화하여 커뮤니티에서 사용 시작할 수 있습니다:

:writing_hand: 새 컴포저 알아보기

새 컴포저는 글쓰기 경험을 단순화하는 리치 텍스트 에디터로, 특히 Markdown에 익숙하지 않은 비기술 사용자를 위해 설계되었습니다. 이 에디터는 여전히 Markdown을 지원하지만, 포맷팅이 즉시 렌더링되어 WYSIWYG(What You See Is What You Get) 경험을 제공하며, Notion이나 Google Docs와 같은 다른 현대적인 웹 작성 도구와 유사한 느낌을 줍니다.

새 컴포저에 액세스하려면 툴바의 토글 버튼을 클릭하세요. 이를 통해 현재 Markdown 전용 모드에서 새로운 리치 텍스트 에디터로 전환할 수 있습니다. 필요할 경우 토글 버튼을 다시 클릭하여 원래 모드로 되돌릴 수 있습니다.

toggle

오늘 테스트하는 것은 새 컴포저의 첫 번째 버전입니다. 아직 현재 Markdown 전용 컴포저의 완전한 대체재로 의도되지 않았습니다. 우리는 먼저 대부분의 사용자 요구를 충족할 수 있는 기본 기능에 집중했습니다.

새 컴포저에서 현재 가능한 것과 아직 준비되지 않은 것을 이해하기 위해 아래 섹션을 검토해 주세요. 지원 범위가 확장되는 대로 이 부분들을 업데이트할 예정입니다!

:green_circle: 지원되는 기능

새 컴포저에서 다음 기능이 지원됩니다:

  • 제목 추가 및 카테고리, 태그 설정
  • 리치 텍스트 에디터 모드일 때의 단일 창 에디터(예: 미리보기 창 없음)
  • Markdown 전용 모드와 리치 텍스트 에디터 모드 간 전환 토글
  • 기본 포맷팅 [1] Markdown, 키보드 단축키, 툴바 아이콘으로 지원
  • 이모지 지원
  • 일반 텍스트 붙여넣기 시 Markdown을 리치 텍스트로 자동 변환(예: **굵게** → 굵게)
  • 이모티콘 자동 변환(예: :) → :))
  • 추가된 이미지의 크기 조절, 캡션, 그리드 레이아웃을 위한 이미지 UI
  • 추가된 링크의 방문, 편집, 복사, 삭제 및 제목 변경을 위한 링크 UI
  • 테이블 빌더 UI
  • 투표 빌더 UI
  • 각주
  • 멘션 및 해시태그 지원
  • 인라인 HTML <태그> [2]
  • 타이포그래퍼 대체(예: ™ , → , ± )
  • 이미지 업로드
  • 파일 첨부
  • 토픽 및 채팅 인용
  • 세부 내용 숨기기 (Hide Details)
  • 블러 스포일러 (제한 사항 있음, 누락된 기능 섹션 참조)
  • 원박스(Oneboxes)
  • 수평선 자동 변환(즉, --- 입력 시 수평선으로 변환)

:red_circle: 누락된 기능

새 컴포저에서 현재 누락되었거나 아직 완전히 지원되지 않는 것으로 알려진 기능:

  • 테이블 생성 후 열 또는 행을 추가하거나 제거하기 위한 테이블 UI
  • 이전에 생성된 투표를 편집하기 위한 투표 UI
  • 헤딩을 추가하기 위한 툴바 지원
  • 기존 텍스트에 블러 추가, 인라인 블러 지원, 블러 제거 용이성을 위한 개선된 블러 스포일러 지원
  • 지원되는 기능 섹션에 명시되지 않은 기타 항목(예: Mermaid 다이어그램 지원)

:mega: 테스트 및 피드백 공유

테스트 중 컴포저가 예상대로 작동하지 않는 문제를 겪을 수 있습니다. 그런 경우 반드시 알려주세요! 여러분의 피드백은 새 컴포저를 개선하여 커뮤니티에서 사용할 수 있는 상태로 만드는 데 매우 소중한 자산입니다.

구체적인 재현 단계, 브라우저/디바이스 정보, 관련 스크린샷이나 녹화 파일을 제공해 주세요! 아래 알려진 이슈 트래커를 확인하여 이미 누군가가 보고한 내용인지 살펴볼 수도 있습니다. 문제를 식별하고 수정하는 대로 이 섹션들을 최신 상태로 유지할 것입니다.

새 컴포저 사용 중 문제가 발생하면 토글을 사용하여 언제든지 Markdown 전용 모드로 되돌아갈 수 있다는 점을 기억하세요.

:bug: 버그

  • Firefox에서 멘션이 게시글의 시작 부분에 있을 때 커서를 멘션 앞에 위치시킬 수 없어 보이는 문제(실제로는 가능하지만 시각적으로 명확하지 않음)

:art: UX 문제

  • 예상치 못한 스타일링을 방지하기 위해 링크의 일부 포맷팅 방지
  • 카테고리, 태그, 채팅 채널 해시태그에 대한 예상되는 시각적 렌더링/검증 적용
  • 사용자 및 그룹 멘션에 대한 예상되는 시각적 렌더링/검증 적용
  • 인용문으로 게시글을 시작하거나 인용문을 복사/붙여넣을 때 커서가 인용문 내부(아래 행 대신)에 포커스되는 문제

:wrench: 개발 개선 사항

  • 인라인 HTML 파싱 개선(예: <a>)

  1. 굵게, 기울임, 밑줄(툴바 지원 없음), 취소선(Markdown 전용 ~~), 링크, 인용문, 코드, 체크박스(Markdown 전용 ; 툴바 지원 예정), 불릿 목록, 번호 목록 ↩︎

  2. 일부는 가장 가까운 Markdown으로 변환됨(예: s, strike, strong, b, em, i, code; u는 실제 밑줄로 쿡되지 않아 명시적으로 지원되지 않음); 나머지는 “html_inline” 노드로 허용됨(예: kbd, sup, sub, small, big, del, ins, mark) ↩︎

71개의 좋아요

잘 되어 가고 있습니다!

스포일러 태그에 몇 가지 문제가 있습니다:

  1. 텍스트를 선택한 뒤 “블러 스포일러”를 선택하면 선택한 텍스트가 “이 텍스트는 흐려집니다”로 대체되어 선택한 내용이 사라집니다

  2. 인라인 스포일러가 작동하지 않아 새 줄로 이동합니다

  3. 스포일러를 해제할 방법이 없습니다

11개의 좋아요

Shaun, 감사합니다. OP에서 스포일러에 대한 추가 작업이 필요하다는 점을 확인했습니다.

9개의 좋아요

이 기능이 나올 거라고 기다리고 있었는데 정말 멋져요. 드디어 Discourse가 이걸 도입했네요 :clap:

지금은 딱 하나, 글을 작성하는 텍스트 영역이 너무 좁아서 좀 이상해 보입니다.

분명히 이전에 작성기와 미리보기가 나란히 배치된 화면에 많이 익숙했는데, 지금은 좀… 이상해 보입니다. 아마도 시간이 좀 더 필요할 뿐인 것 같아요. 네, 아마도 그렇겠죠. :smile:

19개의 좋아요

훌륭한 진전! :heart:

두 번째로 주목한 점은, 현재 스타일이 여전히 적용되고 있음에도 툴바에서 시각적으로 켜졌다가(켜기/끄기) 바뀌지 않는다는 것입니다. 현재 적용된 스타일이 꺼질 때까지 강조 표시된다면 정말 좋겠습니다.

지금으로서는 이것까지입니다!

(그레이 앰버 테마를 기준으로 피드백을 작성했습니다)

16개의 좋아요

좋은 지적입니다. 현재 우리는 편집기 자체(실제로 타이핑을 하는 곳)에 주로 집중하고 있었지만, 이러한 문제를 해결할 수 있는 작성 컨테이너와 툴바에 대한 개선 사항도 계획되어 있습니다.

11개의 좋아요

조금 이상한 결함인데, 컴포저를 열면 이 답장 표시기에 이런 문제가 발생합니다.

나중에 데스크톱에서 완전히 테스트해볼 예정이지만, 꽤 기대가 됩니다.

5개의 좋아요

드디어 도착했습니다! :heart_eyes: 정말 방대한 작업이었네요. 훌륭한 작업입니다! 마크다운에 익숙하지 않은 사용자에게 큰 도움이 될 것입니다.

에지 업로드 문제:

이미지를 업로드한 후 마크다운으로 전환하면 업로드 마크다운이 표시되지 않고 오류가 발생합니다:
image

반대로, 마크다운에서 업로드한 후 새 편집기로 전환하면 오류는 발생하지 않지만 이미지가 표시되지 않습니다.

13개의 좋아요

업로드가 완료될 때까지 전환을 차단하는 것이 좋을까 하는 생각이 듭니다… 편집기 사이에서 플레이스홀더를 변환할 수는 있지만, 그렇게 유용하지는 않아 보입니다.

12개의 좋아요

네, 저도 같은 생각입니다. 차단 기능이 좋은 아이디어인 것 같아요!
느린 인터넷에서 큰 이미지를 업로드할 때, 완료될 때까지 스위치를 계속 눌러 보게 되더라고요. :grinning_face_with_smiling_eyes:

12개의 좋아요

새로운 디자인이 정말 좋습니다. Discourse가 시간이 지나면서 새로운 아이디어를 시도하고 커뮤니티를 참여시키는 방식을 정말 좋아합니다.

피드백을 원하신다면 몇 가지 주관적인 관찰 사항을 공유합니다:

  • 정렬 버튼(왼쪽/오른쪽)은 비정형적인 아이콘이며, 매우 니치한 기능처럼 보입니다. 모바일에서 아이콘이 두 줄로 줄바꿈되므로 이 기능을 그냥 제거하는 것이 좋습니다. 마찬가지로, “날짜 삽입” 기능도 고급/니치 기능이므로 :gear: 메뉴 안에 숨기는 것이 좋습니다. 이렇게 하면 나머지 아이콘이 모두 한 줄에 들어갈 수 있습니다.
  • 비디오 업로드 기능이 기술적인 사용자인 저에게도 혼란스러웠습니다. “비디오 소스” 입력란에 무엇을 입력해야 하나요? 또한 버튼들이 시각적으로 다소 어지러워 보입니다(아래 참조).
  • “M” 버튼(원문 텍스트와 미리보기 전환)은 클릭하기 전까지는 그 목적을 알 수 없습니다. 작성기 하단, :wastebasket: 버튼과 GIF 버튼 사이에 여백이 있는데, 이곳에 미리보기 버튼을 두는 것이 더 합리적이라고 생각합니다. 그리고 "미리보기"라는 단어를 넣을 공간도 생깁니다.

9개의 좋아요

이 기능들은 과거에 메타에서 실험 목적으로 활성화했던 것들입니다. 기본적으로 제공되지 않으며, 꺼두거나 :gear: 메뉴 안에 숨길 수 있습니다.

동감합니다. 왜 항상 이 기능을 메뉴에서 이렇게 눈에 띄게 포함하는지 모르겠습니다. 저 자신도 이 기능을 자주 사용하지만, :gear: 메뉴 뒤에 있는 많은 기능들도 자주 사용하고 있습니다!

최소한 마우스오버 도움말 텍스트가 여기의 발견 가능성을 높이는 데 도움이 될 것이라는 데 동의합니다.

향후에는 새 작성기를 기본값으로 설정하고, 마크다운으로 전환하는 것을 파워 유저들이 알아차리거나 발견할 수 있는 고급 기능으로 만드는 것이 필요할 것 같습니다.

10개의 좋아요

:megaphone: 이 메뉴 항목들은 새 컴포저와 직접적인 관련이 없으므로 여기서는 집중할 필요가 없습니다. 메뉴 항목에 대해 더 많은 피드백이 있다면, 새로운 Contribute > Feature 주제를 시작하거나 검색을 이용해 보세요.

그럼에도 불구하고:

  • 메타에서는 Insert Video 테마 컴포넌트를 통해 제공되는 “동영상 삽입” 버튼을 제거했습니다.

  • “방향 전환” 버튼은 support mixed text direction 사이트 설정에 의존합니다. 현재 다국어 기능을 능동적으로 테스트하고 있으므로 메타에서는 이 설정을 활성화된 상태로 유지할 것입니다.

  • 메타에서는 GIF와 Ask AI도 있으며, 이들에 대한 접근성을 높이고 싶습니다.

6개의 좋아요

팀 여러분, 축하합니다! 원박스(oneboxing) 관련해서 불일치하는 점을 발견했습니다. 브라우저에서 URL을 붙여넣으면 원박스가 생성되지만, 직접 입력하는 경우에는 생성되지 않습니다. 마크다운 미리보기로 전환하면 원박스가 생성됩니다.

테스트: 브라우저 주소창에서 붙여넣기: https://google.com/ 직접 입력: https://google.com

6개의 좋아요

새로운 WYSIWYG 편집기에서 Return 키를 누르면 줄바꿈이 두 번 발생(단락 분리)합니다. 개인적으로는 이 기능이 마음에 들지 않습니다(물론 주관적인 판단일 수 있지만), 특히 항목별로 번호나 기호가 붙은 목록에서는 항목 사이에 과도한 여백이 생겨서 더 마음에 들지 않습니다.

  • 이

  • 는

  • 너무

  • 많아요

13개의 좋아요

shift + enter를 누르면 이중 줄바꿈을 방지할 수 있지만, 목록에서는 작동하지 않습니다.
이러한 동작 변경이 기본값으로 설정되어서는 안 된다는 데 동의합니다.

7개의 좋아요

훌륭한 작업입니다! 올바른 방향으로 한 걸음 나아간 것 같아요. 다만 아직 해결되었으면 하는 기본적인 UX 문제가 몇 가지 있지만, 그 부분은 나중에 자세히 언급하겠습니다.

좋았던 점:
새로운 단일 에디터 모드를 정말 좋아합니다. 정말 멋지고, 작성기 내의 인라인 이미지도 아주 잘 작동합니다.
이건 프리뷰 버전이지만 제 예상대로 잘 작동하고 있으며, 개인적으로 빠진 부분이 있는지 확인해 보았지만 ---를 많이 사용하는데 이를 제외하고는 특별히 부족한 점을 발견하지 못했습니다.

아쉬운 점:
여기저기에 버튼이 흩어져 있는 것은 혼란스럽습니다. 모든 버튼을 한곳에 모아야 합니다. 이중 아래 화살표 아이콘을 X로 교체해 주세요. 또한, << 대신 Y축으로 드래그하여 크기를 조절할 수 있게 하면 단순히 하나만 표시하거나 닫히는 것보다 나을 것 같습니다.

상단의 아이콘 줄과 “더 보기” 기어 메뉴는 여전히 정말 마음에 들지 않습니다. 어수선하고 사용하기가 혼란스럽습니다. 이 주제에 대해 어느 정도 논의된 스레드가 있었던 것 같은데 찾을 수가 없습니다.

제 업무용 컴퓨터(Windows Firefox)에서는 마크다운 버튼의 위치가 어긋나 있습니다.

image

전체적으로는 여전히 훌륭하지만, 이 부분들이 수정되었으면 좋겠습니다 :+1:

OP의 UX 문제 섹션에 추가하여 수정할 예정입니다.

이것은 알려진 미구현 기능이며, 지원할 계획입니다:

컴포저 컨테이너와 툴바에 대한 개선 계획을 세우고 있지만, 현재 변경 사항은 에디터 자체로 제한되어 있습니다. 하지만 향후 변경 사항에 이 부분을 염두에 두겠습니다.

이 설명이나 스크린샷만으로는 정확히 무엇이 문제인지 알 수 없습니다 — 확인해 볼 수 있도록 몇 가지 더 자세한 정보를 공유해 주시겠습니까?

5개의 좋아요

단순히 시각적인 문제일 수도 있지만, 내 기준으로는 약간 위쪽으로 올라가 있는 것처럼 보입니다.

1개의 좋아요