코드 블록 크기 및 색상 스킴 개선

[fitzy (Michael Fitz-Payne)]

가독성을 높이기 위해 텍스트 크기와 줄 간격을 줄이고, 코드 블록의 높이를 늘리는 실험을 진행 중입니다. 이는 주로 20줄 이상의 큰 코드 블록에서 문제가 됩니다. 이 변경으로 인해 일반적인 뷰포트 내에서 더 많은 코드를 볼 수 있습니다.

변경 전

변경 후

해당 변경 사항은 다음 링크에서 확인하실 수 있습니다:

https://github.com/discourse-org/design-experiments/pull/75

[awesomerobot (Kris)]

이런 인라인 코드의 글꼴 크기가 변경되는 것은 아마도 의도치 않은 부작용인 것 같습니다.

[fitzy (Michael Fitz-Payne)]

네, 의도적으로 그렇게 한 것은 아닙니다. 인라인 코드가 아닌 전체 블록만 수정되도록 변경해야 합니다.

[Lilly (Lillian)]

참고로, 저는 해커티 해커(hackity hack) 개발 인스턴스에서 이렇게 사용하곤 합니다:

pre code {
  font-size: var(--font-down-1);
}

결과

[fitzy (Michael Fitz-Payne)]

인라인 모노스페이스 텍스트의 스타일 변경 사항을 제거하고, <pre> 블록의 줄 높이를 약간 늘리는 PR을 보냈습니다.

[sam (Sam Saffron)]

불행히도 짧은 스니펫에서 가독성이 떨어지고 있습니다.

예:

글꼴 크기가 작아지고 줄 간격이 짧아졌습니다.

이것이 아주 긴 코드 블록에만 영향을 미칠 수 있을까요? @jordan.vidrine 님, 이것이 핵심 변경 사항이 되어야 하는 것일까요?

[jordan.vidrine]

여기서 이 실험과 Stack Overflow의 차이점을 강조하고 싶습니다.

현재 실험

Stack Overflow

즉각적으로 눈에 띄는 몇 가지 사항은 다음과 같습니다:

• 그들의 글꼴이 약간 더 큽니다
• 우리는 함수 제목에 굵은 글씨를 사용하지만, 그들은 그렇지 않습니다

hljs를 더 깊이 살펴보고, 왜 우리의 사용 사례에서 제목이 굵게 표시되는지 확인해야 합니다.

[sam (Sam Saffron)]

Stack Overflow를 살펴봐 주셔서 정말 좋습니다. 코드 블록 표시 방법을 알아낼 사람이 있다면 바로 그 사람들이니까요.

또 다른 관찰 사항으로, 폰트 크기는 변경되고 있음에도(15px → 13px) 실제로는 변하지 않는 것처럼 보입니다(색상이 일부 상쇄되는 효과가 있네요).

여기서는 시각적 리듬과 줄 간격이 훨씬 더 좋은 느낌을 줍니다:

Stack Overflow

현재 실험

줄 간격이 눈에 띄게 문제이며, Stack Overflow보다 우리의 기본 폰트가 더 크고 여유가 있기 때문에 우리의 "축소"가 지나쳤습니다.

---

현재 실험에서 굵은 글씨를 일반 글씨로 변경하고 크기와 줄 간격을 늘리는 것에 대해 적극 지지합니다.

[jordan.vidrine]

이 PR에서 다음과 같은 변경 사항이 적용되었습니다: https://github.com/discourse-org/design-experiments/pull/77

변경 전	변경 후

[bryce (Bryce Huhtala)]

조던, 정말 멋져요. 이 경우에는 일관된 글꼴 굵기가 가독성에 도움이 된다고 생각해요. 패딩을 늘린 것도 마음에 들어요.

[jordan.vidrine]

@bryce

일관된 글꼴 굵기를 사용하면 가독성이 높아진다고 생각합니다.

감사합니다, 동의합니다. 또한 hljs가 왜 특정 색상을 사용하는지도 색상에 초점을 맞춰 살펴보고 싶습니다. 온라인에서 이 색상 패턴을 어디서도 본 적이 없거든요.

[sam (Sam Saffron)]

타이포그래피 변경에는 찬성하지만, 어두운 배경은 좀 과한 것 같아요. 밝은 배경이 훨씬 가독성이 좋습니다.

[jordan.vidrine]

변경사항이 들어옵니다.

https://github.com/discourse-org/design-experiments/pull/78

[jordan.vidrine]

추가 조사를 해본 결과, 우리가 현재 사용하고 있는 색상은 GitHub에서 약 10년 전, 혹은 4버전 시절에 사용했던 오래된 스킴에 기반을 두고 있는 것 같습니다.

기본 색상을 더 최신적인 것으로 변경할 여지가 있을까요?

GitHub는 그 이후로 업데이트된 색상 스킴을 도입했으며, 기본 라이트 스킴으로 사용할 수 있는 다른 옵션들도 제공합니다.

Stack Overflow

Atom One Light

New GitHub

hljs 기본값

[fitzy (Michael Fitz-Payne)]

개인적으로는 더 차분한 색감을 가진 스타일을 선호합니다. 제시해 주신 예시 중에서는 Stack Overflow를 선택하겠습니다.

[awesomerobot (Kris)]

몇 날 며칠이 지났는데도 여전히 작은 글꼴 크기로는 가느다란 눈을 하고 봐야 해서, 공간 절약 효과가 그 정도를 감당할 만큼 크지 않다고 생각해요.

[fitzy (Michael Fitz-Payne)]

Stack Overflow에서도(예를 들어) 같은 느낌을 받으시나요? 현재 Discourse와 SO의 글꼴 크기와 줄 높이 계산 방식이 동일합니다.

Discourse의 max-height는 600px에 비해 500px으로 약간 낮습니다.

[awesomerobot (Kris)]

우리의 경우에는 그 대비가 훨씬 더 나쁘며, 작은 글씨를 읽을 때 큰 차이를 만듭니다. (예를 들어 오른쪽의 Stack Overflow):

[jordan.vidrine]

@awesomerobot

우리의 경우 대비가 훨씬 더 나쁘며, 예를 들어 작은 텍스트를 읽을 때(오른쪽의 Stack Overflow) 큰 차이가 납니다:

네, 말씀하시는 점을 이해합니다.

제가 올린 PR(https://github.com/discourse-org/design-experiments/pull/79)의 이러한 변경 사항에 대해 어떻게 생각하시나요?

이 옵션에서는 다크 모드에서 secondary나 primary 기반의 색상 대신 배경에 검정색을 추가했습니다. rgba(0,0,0,0.25)를 사용하여 이렇게 처리했습니다.

[robbie.morrison]

최근 코드 블록 줄 번호 구성 요소/테마 기능이 포함된 테스트를 해주시는 분 계신가요? 감사합니다.