마크다운 전용 편집기의 모노스페이스 폰트

간단한 안내:

새로운 작성기(메타 또는 여러분自己的 사이트에서)를 테스트하고 계신 분들을 위해, 마크다운(소스 코드) 폰트를 모노스페이스 폰트로 변경했습니다.

이 변경 사항은 사용자가 현재 “마크다운” 모드인지 “리치” 모드인지 명확히 구분할 수 있도록 돕습니다.

해당 변경 사항은 업계에서 일반적으로 인정되는 폰트 선택(reddit / stack exchange)과 일치하도록 조정되었습니다.

이 변경 사항은 리치 에디터가 활성화된 사이트에서만 적용되며, 20~40분 이내에 이 사이트에서 반영될 예정입니다.

13개의 좋아요

저는 그 두 사이트 중 어느 것도 사용하지 않고, 완전히 다른 업계 종사자이기 때문에, 좀 더… 보기 좋은 폰트로 다시 변경하는 방법은 무엇인가요? 물론 셀프 호스팅 인스턴스에서요.

3개의 좋아요

사이트에서 테마와 컴포넌트를 도입할 수 있으며, 이 폰트 선택을 무시하려면 CSS 3줄이면 충분합니다.

더 나은 폰트는 새 작성기(composer)에 그대로 유지되며, 해당 부분에서는 모노스페이스로 전환하지 않습니다.

4개의 좋아요

보통은 더 긴 글을 쓰는데, 나한테는 WYSIWYG가 필요하지는 않지만 사용자들에게는 필요하니까 마크다운을 유지할 생각이에요. 그런데 모노스페이스 폰트는 읽기 진짜 어렵고, 업계 대부분이 에디터에서 모노스페이스를 안 쓰는 데에는 이유가 있거든요.

궁금해서 여쭤봐요 — 이 변경의 목적이 뭐였나요? 지금 사용성이 좀 깨진 것 같아요.

그래도 맞아요, 아이패드보다는 사용자 친화적인 기기를 쓸 때 클래스를 파볼게요 :joy:

2개의 좋아요

이것은 사실과 다릅니다. 시중에 나와 있는 모든 코딩 편집기는 등각 폰트를 사용하며, 이것이 업계 표준입니다.

그럼에도 불구하고, 여기서는 이 변경 사항에 적응해 주시길 바랍니다. 메타 사이트에서 정말로 많이 거슬린다면, 다음을 클릭해 보시길 권합니다:

리치 에디터는 여기서 매우 잘 작동합니다. 폰트 관련 피드백을 듣고 있습니다.

6개의 좋아요

저는 코딩 에디터를 사용하지 않습니다. 텍스트와 콘텐츠를 작성하고 있을 뿐입니다.

작동은 합니다.

정말 거슬리지만, 저는 글을 많이 쓰지 않기 때문에 여기서는 참고하고 있습니다. 하지만 제 포럼에서 이 문제를 해결하는 방법을 당신에게서 힌트를 얻었고, 그 방법은 효과가 있었습니다. 감사합니다.

하지만 답은 얻었습니다. 여전히 그 변경 사항의 의미와 목적은 이해하지 못하지만, 이해할 필요도 없습니다. 메타는 메타가 하고 싶은 일을 하는 것이고, 제 쪽에서는 변경할 수 있습니다. 대부분의 사람들은 만족하고 있습니다.

2개의 좋아요

그렇긴 하지만, 여기서 그 비유가 적절한지 궁금합니다. Discourse에서 마크다운을 사용하여 게시글을 작성할 때를 떠올리면, 저는 마음속으로 "코딩 공간"이 아니라 "웹 편집 공간"에 있다고 느낍니다. 또한 마크다운 형식의 글을 작성하는 Discord나 JIRA를 살펴보면, 둘 다 모노스페이스 폰트를 사용하지 않습니다.

새로운 에디터는 대체로 괜찮습니다(마지막 줄 블록을 완료한 후 마크다운이 입력되고 포맷팅되는 일종의 "반 WYSWYG 모드"로 사용할 수 있기 때문이죠). 그리고 이것이 완전히 배포되면 이전 에디터로 돌아가는 일이 줄어들 것이라고 생각합니다. 다만, 모노스페이스 폰트를 유지하기로 결정하신다면, 렌더링된 텍스트와 더 가깝게 보이도록 글꼴 굵기를 줄이는 것이 좋다고 생각합니다. 현재 텍스트가 약간 너무 굵게 보입니다.

8개의 좋아요

흥미로운 변화네요! 오늘 이 기능으로 좀 더 긴 글을 몇 개 작성해 보았는데, 적응하기 가장 어려운 점은 왼쪽 영역이 오른쪽보다 더 많은 공간을 차지한다는 것입니다. 이로 인해 양쪽이 금세 정렬이 어긋나게 되죠.

나는 글을 쓰면서 미리보기가 원하는 대로 보이는지 확인하는 데 너무 익숙해져서, 이렇게 여러 해가 지났음에도 여전히 마크다운 영역 대신 미리보기 영역을 클릭해 버리는 경우가 있습니다!

이 변경 사항으로 인해 당연히 더 이상 그런 문제는 생기지 않을 것입니다. 어디에 타이핑해야 하는지 꽤 명확해졌거든요.

적응하는 데 조금 시간이 필요할 것 같습니다. 하지만 @schneeland의 의견에 동의하듯, 마크다운 폰트를 더 작게 만들 수 있을 것 같습니다.

6개의 좋아요

시각적 단서를 제공하려는 의도는 이해합니다. 이 맥락에서는 합리적인 선택입니다! 가끔 제가 리치 에디터를 사용 중인지 궁금할 때가 있습니다.

리치 에디터는 전반적으로 매우 잘 작동하고 있으므로, 이를 선호하도록 유도하는 것도 중요합니다.

하지만 리치 에디터의 버그 때문에 저는 여전히 마크다운 에디터를 자주 사용합니다.

현재는 읽기가 쉽지 않습니다:

Schneeland가 말했듯이, 마크다운 에디터를 코딩 에디터라고 생각하지는 않습니다. 적응하는 데 시간이 걸릴 것입니다. 미리보기 글꼴 크기와 더 잘 맞도록 글꼴 크기를 조정할 수 있다면 좋겠습니다.

8개의 좋아요

Firefox와 Chromium 브라우저용 브라우저 확장 프로그램인 Stylus를 다운로드하면 다른 웹사이트의 CSS를 오버라이드할 수 있습니다.

Safari는 잘 사용하지 않아서 직접 테스트해 보진 않았지만, 고급 → 스타일시트 항목에서 사용자 정의 스타일시트를 추가할 수 있는 설정이 있습니다.

Safari 설정 스크린샷

아래 CSS가 작동할 것 같습니다:

.d-editor-input {
    font-family: var(--font-family) !important;
}

(다른 폰트를 사용하려면 var(--font-family)를 원하는 폰트 이름으로 교체하세요.)

2개의 좋아요

이 부분은 반복적으로 피드백을 받아온 내용입니다. JetBrains Mono를 가져와서 크기를 조금씩 조정해 보고, 요소들이 더 잘 정렬될 수 있는지 실험해 볼 예정입니다.

이 문제를 통해 명확해진 중요한 점은, 우리 모두 모노스페이스(고정폭) 글꼴을 조금씩 다르게 인식한다는 것입니다. 일관된 경험을 제공하면 이 부분에서 도움이 될 수 있을 것입니다.

3개의 좋아요

JetBrains Mono를 14px으로 설정했을 때의 모습입니다:

직접 비교:

저에게는 JetBrains Mono가 훌륭해 보입니다. 분명히 읽기 쉽고 미리보기 폰트와도 잘 어울립니다.

또한, 이제 코드로 취급되는 콘텐츠는 강조하는 것이 타당할 것입니다. 관련 주제는 있지만 내용은 기억나지 않습니다. 예시:


6개의 좋아요

모노스페이스 폰트의 외관을 해치는 요인 중 하나는 --d-font-family--monospace가 --font-family의 기본 Inter와 달리 시스템 기본값을 사용하고 있기 때문일 것입니다. 14px(코드 블록의 폰트 크기)에서는 괜찮아 보이지만, 텍스트 에디터의 폰트 크기에서는 Inter 옆에 놓이면 어색하게 느껴집니다.

Firefox - Windows

Firefox - MacOS

Safari - MacOS

이러한 시스템 기본값으로 폴백되는 동작은 GitHub나 StackOverflow와 같은 코딩 중심 사이트와 일치하지만, 기본 본문 폰트인 Inter와 잘 어울리는 특정 모노스페이스 폰트를 찾는 것이 더 나을 것입니다.

6개의 좋아요

이것은 곧 여기에서 활성화될 것입니다. PR 리뷰를 마무리하고 있습니다.

@Alteras 님이 가진 그 스크린샷 문제는 해결될 것입니다.

이것은 까다로운 문제입니다. 반대하지는 않지만, 꽤 큰 변경 사항이 될 것입니다.

현재 우리는 TEXTAREA에서 마크다운을 렌더링하고 있습니다. 그 정교한 하이라이팅을 하려면 Ace(우리가 배포하는 것)나 CodeMirror(우리가 배포하지 않는 것)로 교체하거나, 또는 매우 복잡한 커스텀 ProseMirror 설정을 사용해야 합니다.

개인적으로 구문 강조가 적용된 마크다운을 좋아하지만, 이 분야의 부가적인 작업은 리치 에디터의 진행 상황으로부터 우리 모두의 주의를 크게 분산시킬 것이라 생각합니다.

7개의 좋아요

여전히 가장 명백한 해결책이 아예 등폭 서체를 사용하지 않는 것 아닌가 하고 의문이 듭니다. 그리고 등폭 서체가 필요할 때는 간단한 컴포넌트를 사용하는 것이죠.

하지만 여기서는 정책상의 차이가 보입니다:

  • 마크다운은 개발자와 코딩을 위한 것입니다.
  • 리치 에디터는 그 외 모든 사람을 위한 것입니다.
  • '그 외 모든 사람’에 속하면서 마크다운을 사용하고자 한다면, 스스로 선택해야 합니다.

정말 이해가 안 되는 부분은, 전혀 다른 폰트로 표시되는 글쓰기 콘텐츠 작성 시 등폭 서체를 제공할 실제적인 필요성과 수요가 있는가 하는 것입니다.

제게 큰 불만을 주는 것은, 또다시 개발자와 일반 사용자 사이에 경계를 긋는 방식으로 처리된다는 느낌입니다 — 전 세계적으로 개발자가 다수일 수 있겠지만 — 하지만 그 느낌은 아마 제 문제일 것입니다. 이 주제에 참여하는 다른 모든 사람들은 완전히 만족하고 있으니까요(폰트 크기 문제가 해결된다면).

솔직히 제게는 매우 학술적인 주제입니다. 제 포럼에서는 그 CSS 트릭이 작동하며, 사용자들이 마크다운인지 리치 에디터인지 어느 것을 사용 중인지 알려주는 이 정도 크기의 포인터가 필요 없으니까요. 그리고 왜 그리고 무엇을 제공하는지에 대한 메타 정보가 원하지 않거나 필요하지 않다는 느낌이 들어, 모든 사람을 위해 제가 여기서 빠지는 것이 더 나을 것입니다. 결국 저는 개발자가 아니며 코딩/코드 에디터가 아니라 콘텐츠용 마크다운 에디터가 필요하니까요.

5개의 좋아요

변경 사항이 좀 더 적응될 시간을 갖는 것이 필요합니다. 어떤 변경이든 처음에는 익숙하지 않게 느껴지기 마련이죠. 오늘 이루어진 세밀한 조정은 이러한 낯섦을 훨씬 덜어주었습니다.

Markdown 처리에서 등폭(Monospace) 폰트는 다른 이점도 가져다줍니다. 표를 다루는 것이 훨씬 쉬워졌고, 사전 형식화된 텍스트를 다루는 것도 훨씬 쉬워졌습니다.

저는 여기 있습니다. 여러분의 의견을 듣고 있으며, 결국 압도적인 피드백으로 인해 이 변경이 과도하다고 판단되는 단계에 도달하게 된다면, 우리는 이 결정을 재검토하거나 세밀하게 조정할 수 있습니다.

오늘의 변경 사항은 Discourse에 놀라운 부수적 효과도 가져다줍니다. 등폭 폰트는 운영체제마다 해석이 달라져 사람마다 다른 의미를 지니고 있었습니다. 이제 rich_editor가 활성화된 사용자는 제품 전반에서 일관된 등폭 폰트 경험을 할 수 있게 되었습니다.

어제 주신 피드백은 충분히 이해합니다. 하지만 오늘, 조정된 폰트에 대해 훨씬 더 편안함을 느끼고 있습니다. 이 폰트는 훌륭하며, 제가 이렇게 작성할 수 있게 해줍니다:

  \(^-^)/
    |
   /\

그리고 작성기에서 보이는 모습이 미리보기와 정확히 일치합니다.

7개의 좋아요

동의합니다. 기본값으로 설정하는 것이 완전히 타당합니다.

그리고 테마 구성 요소가 더 많은 유연성을 제공할 수 있는 기회이기도 하죠 (고정된 폰트 드롭다운 메뉴는 어떨까요??)

2개의 좋아요

업데이트 감사합니다! 자연스럽고, 지금은 꽤 편합니다.
이 작은 변화가 큰 차이를 만드네요. 이미 익숙해지고 있는 것 같습니다. :chefs_kiss:

5개의 좋아요

나는 이걸 그렇게 좋아하지 않는다. 모노스페이스 폰트를 쓰면, 나는 한 창에서 타이핑을 하고 있는 동안 실제 텍스트는 다른 창에서 렌더링된다는 사실이 과도하게 신경 쓰인다. 어떤 LaTeX 기억을 떠올리게 한다…

이 기능이 장기적으로 구현될 거라면, 기본 모노스페이스 폰트인 --d-font-family-monospace 대신 --d-font-md-composer와 같은 전용 폰트 변수를 가졌으면 좋겠다. 그렇게 하면 모노스페이스 폰트에 영향을 주지 않고 사이트별로 쉽게 변경할 수 있을 것이다.

8개의 좋아요

이 포럼의 Composer(글 작성기) 폰트가 변경된 것을 알게 되었습니다:

image

이것이 의도된 변경인지 아닌지 모르겠습니다.
만약 의도된 변경이라면, 모든 Discourse 사용자에게 적용되는 업데이트가 아니기를 바랍니다. 저는 평소의 “Arial/Helvetica/sans serif” 폰트를 선호하거든요. 아니면 최소한 관리자 패널에서 우리가 직접 변경할 수 있도록 해 주셨으면 좋겠습니다.

수정: 제 게시글이 분할된 주제(topic)였기 때문에 현재 주제 안에서 다소 어색하게 느껴집니다. 그러니 신경 쓰지 마세요. 의도된 변경이라는 것을 알고 있습니다…


제 의견입니다: 두 가지 다른 편집기에 서로 다른 폰트를 사용하는 것이 합리적일 수 있다는 점은 이해합니다. 하지만 예를 들어 Obsidian은 마크다운 도구인데도 기본적으로 모노스페이스 폰트를 사용하지 않습니다. 그리고 누군가가 말했듯이, 리치 텍스트 편집기를 사용할 때 ‘일반적인’ 사람들이 이해하지 못할 내용을 추가할 수는 있지만, 이 공간을 ‘코딩’ 공간이라고 보지는 않습니다.

글쎄요, 평소 텍스트/메시지를 타이핑할 때(거의) 사용하지 않는 폰트라 다소 어색하게 느껴집니다. 저는 Discourse와 Obsidian 모두 '과거의 방식’에 익숙해져서, 모노스페이스로 타이핑하거나 리치 텍스트 편집기를 사용하는 것이 모두 좀 어색합니다.

이것을 각 사용자가 변경할 수 있는 기능으로 만들 수는 없을까요?