# 코드 블록 크기 및 색상 스킴 개선
**URL:** https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946
**Category:** UX
**Tags:** feedback, design-experiment
**Created:** [11월 1, 2024, 3:10오전 UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946 "2024-11-01T03:10:30Z")
**Posts on this page:** 20
**Page:** 2
### Author:  [@cvx](https://meta.discourse.org/u/cvx)
#### Post date: [11월 7, 2024, 11:46오전 UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/22 "2024-11-07T11:46:55Z")
> [@awesomerobot](#):
>
> 작은 글꼴 크기 때문에 아직 약간 눈을 가늘게 뜨고 봐야 하는데, 공간 절감 효과로는 그만한 가치가 없다고 생각합니다.
이 의견에 매우 공감합니다.
기본 글꼴 크기를 15px에서 16px로 늘렸습니다. 코드 블록의 글꼴 크기를 13px로 줄이는 것은 큰 변화입니다. 한 줄당 몇 자 더 들어가는 것이 가독성 저하와 맞바꿀 만한 거래일까요?
* * *
인라인 코드 스타일링도 업데이트될 예정인가요? 현재 인라인 코드는 배경색, 글꼴 색, 글꼴 패밀리가 모두 다릅니다. 일반 텍스트, 인라인 코드 요소, 코드 블록이 많이 섞인 게시물에서는 이것이 매우 두드러집니다. 인라인 코드와 블록 스니펫을 서로 참조하는 것이 약간 더 어려워집니다.
* * *
변경 사항과는 무관하지만(코드 블록과 관련은 있음) - 마우스를 올리면 나타나는 버튼 아이콘을 개선할 아이디어가 있을까요? 12px 크기와 0.7의 투명도로 설정되어 있어 거의 보이지 않습니다(특히 코드와 겹칠 때).
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [11월 7, 2024, 4:48오후 UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/23 "2024-11-07T16:48:16Z")
> [@cvx](#):
>
> 변경 사항과는 무관하지만(코드 블록과는 관련 있음) - 호버 시 버튼 아이콘을 개선할 아이디어가 있을까요? 12px 크기와 0.7의 불투명도로는 거의 보이지 않습니다(특히 코드와 겹칠 때).
>
> 
좋은 관찰이네요. 버튼이 _너무_ 잘 보여서 변경한 것이었습니다. `btn-flat`으로 변경했지만, 아마도 너무 과한 변경이었을 수 있습니다. 코드 블록에 적용할 맞춤형 스타일이 필요한 것 같습니다.
---
### Author:  [@fitzy](https://meta.discourse.org/u/fitzy)
#### Post date: [11월 7, 2024, 6:43오후 UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/24 "2024-11-07T18:43:41Z")
글자 크기를 키워야 할까요? 어제 로컬에서 14px로 실험해 봤는데, 기본 글꼴보다는 덜 거슬립니다.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [11월 7, 2024, 9:09오후 UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/25 "2024-11-07T21:09:05Z")
```javascript
// 이것은 주석 처리된 코드입니다
import Component from "@glimmer/component";
import { action } from "@ember/object";
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
import { service } from "@ember/service";
import DButton from "discourse/components/d-button";
import bodyClass from "discourse/helpers/body-class";
import concatClass from "discourse/helpers/concat-class";
import ReaderModeOptions from "./reader-mode-options";
export default class ReaderModeToggle extends Component {
@service readerMode;
get bodyClassText() {
if (this.readerMode.isTransitioning) {
return "reader-mode-transitioning reader-mode";
} else if (this.readerMode.readerModeActive) {
return "reader-mode";
} else {
return "";
}
}
handleDocumentKeydown(e) {
if (e.ctrlKey && e.altKey && (e.key === "r" || e.key === "®")) {
this.readerMode.toggleReaderMode();
}
}
@action
addEventListener() {
document.addEventListener("keydown", this.handleDocumentKeydown.bind(this));
}
@action
cleanUpEventListener() {
document.removeEventListener("keydown", this.handleDocumentKeydown);
}
{{bodyClass this.bodyClassText}}
{{#if this.readerMode.readerModeActive}}
{{/if}}
}
```
최신 업데이트입니다 👆
---
### Author:  [@fitzy](https://meta.discourse.org/u/fitzy)
#### Post date: [11월 7, 2024, 10:20오후 UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/26 "2024-11-07T22:20:56Z")
이번 최신 버전을 정말 좋아해요, @jordan.vidrine!
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [11월 8, 2024, 9:05오후 UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/27 "2024-11-08T21:05:49Z")
나에게는 최신 업데이트가 훨씬 더 좋아 보인다. 색상도 마음에 들고, 텍스트의 16px 폰트와 크기가 충돌하지 않는 것도 좋다.
```ruby
def hello
puts "hello world"
end
```
조금 아쉬운 점은 회색 배경이 여전히 다소 칙칙하게 느껴진다는 것인데, 아주 약간 더 밝은 색을 선호한다. 하지만 전반적으로는 꽤 만족스럽다.
@cvx 현재 의견은 어떤가?
---
### Author:  [@bryce](https://meta.discourse.org/u/bryce)
#### Post date: [11월 8, 2024, 9:52오후 UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/28 "2024-11-08T21:52:36Z")
삼차색의 밝은 버전을 사용하는 것도 좋을 것 같습니다.
`rgba(var(--tertiary-rgb), 0.058)`
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [11월 8, 2024, 9:54오후 UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/29 "2024-11-08T21:54:39Z")
테마 색 팔레트의 색상을 사용하는 것도 생각해보았지만, 그 색상이 무엇일지 예측할 수 없어요. 최악의 선택이 될 수도 있거든요 😬
그래도 파란색은 좋긴 해요
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [11월 8, 2024, 9:55오후 UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/30 "2024-11-08T21:55:56Z")
> [@sam](#):
>
> 사소한 부분 하나만 말하자면, 회색 배경이 여전히 약간 칙칙하게 느껴져요. 아주 살짝 더 밝은 색을 선호합니다.
다크 모드인가요, 라이트 모드인가요?
제가 선택한 회색은 이전 것보다 더 밝은 색입니다 (그렇게 _생각_합니다). `var(--primary-50)`을 사용했습니다.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [11월 15, 2024, 4:41오후 UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/31 "2024-11-15T16:41:19Z")
@sam / @fitzy 지난 한 주 동안 변화와 함께 지내면서 어떤 기분이에요?
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [11월 17, 2024, 11:09오후 UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/32 "2024-11-17T23:09:06Z")
개인적으로 이걸 코어에 병합하는 게 좋다고 생각해. 지금은 훨씬 좋아 보이거든.
기존 색상 스킴은 옛날 사이트에서 보면 눈이 아플 정도야 🙂
---
### Author:  [@fitzy](https://meta.discourse.org/u/fitzy)
#### Post date: [11월 19, 2024, 10:42오후 UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/34 "2024-11-19T22:42:40Z")
코어에 있는 것보다 현재 상태가 훨씬 낫다고 생각합니다.
다만, 커밋 98b2763에서 `max-height`에 대한 변경 사항이 사라졌습니다. 이는 의도된 것일까요? 주석 처리된 후, 이후 커밋에서 삭제된 것을 확인했습니다.
만약 의도된 것이라면, 로컬에서 오버라이드하는 방식으로 대응할 수 있습니다.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [11월 20, 2024, 3:23오후 UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/35 "2024-11-20T15:23:08Z")
> [@fitzy](#):
>
> 하지만 커밋 98b2763에서 `max-height`에 대한 변경 사항이 사라졌습니다. 이것이 의도적인 것인가요? 주석 처리된 후, 이후 커밋에서 삭제된 것으로 보입니다.
>
> 그렇다면 로컬에서 오버라이드를 사용하는 것으로 만족할 수 있습니다.
네, 현재 코드 블록 크기에 최대한 가깝게 유지하기 위해 삭제했습니다.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [11월 20, 2024, 10:55오후 UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/36 "2024-11-20T22:55:29Z")
> [@sam](#):
>
> 개인적으로 이걸 코어에 병합해야 한다고 생각합니다. 이제 훨씬 좋아 보입니다.
병합은 이 PR에서 진행됩니다 → [UX: Codeblocks experiment merge - Pull Request #29870 - discourse/discourse - GitHub](https://github.com/discourse/discourse/pull/29870)
---
### Author:  [@fitzy](https://meta.discourse.org/u/fitzy)
#### Post date: [11월 20, 2024, 11:07오후 UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/37 "2024-11-20T23:07:39Z")
> [@jordan.vidrine](#):
>
> 네, 현재 코드 블록 크기와 최대한 가깝게 유지하기 위해 삭제했습니다.
네, 괜찮습니다.
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [11월 21, 2024, 1:17오후 UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/38 "2024-11-21T13:17:14Z")
새 패딩이 `.hljs` 요소에만 적용되는 것 같습니다. 즉, 하이라이팅이 없는 단순한 코드 블록에는 패딩이 적용되지 않습니다:
```none
hello
```
```js
console.log("test")
```
또한 하이라이팅(따라서 `.hljs` 클래스)이 비동기적으로 적용되기 때문에 초기 로드 시 게시글 높이가 점프하는 문제도 발생합니다.
`.hljs` 클래스가 없더라도 코드 블록에 패딩 변경 사항이 적용되도록 수정할 수 있을까요?
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [11월 21, 2024, 1:17오후 UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/39 "2024-11-21T13:17:57Z")
일관성을 위해 더 어두운 배경도 적용할 수 있을까요?
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [11월 22, 2024, 3:06오후 UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/40 "2024-11-22T15:06:28Z")
> [@david](#):
>
> 새로운 패딩이 `.hljs` 요소에만 적용되는 것으로 보입니다. 즉, 하이라이팅이 없는 단순한 코드 블록에는 적용되지 않습니다:
> [@NateDhaliwal](#):
>
> 일관성을 위해 더 어두운 배경색도 적용할 수 있을까요?
이 부분을 알아봐 주셔서 감사합니다. 해당 스타일을 `hljs` 블록뿐 아니라 `code`에도 적용되도록 업데이트했습니다.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [11월 22, 2024, 4:11오후 UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/41 "2024-11-22T16:11:49Z")
여기에도 또 다른 수정이 필요합니다. 제가 추가한 수정 사항으로 인해 인라인 코드 블록이 이제 잘못되어 별도의 줄에 렌더링되고 있습니다.
이것은 `잘못 렌더링되는 인라인 코드 블록`의 예시입니다.
---
### Author:  [@Tris20](https://meta.discourse.org/u/Tris20)
#### Post date: [11월 27, 2024, 11:19오전 UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/42 "2024-11-27T11:19:14Z")
> [@fitzy](#):
>
> [https://github.com/discourse-org/design-experiments/pull/75](https://github.com/discourse-org/design-experiments/pull/75)
링크가 이제 404를 반환합니다. PR을 가리키는 것이 더 합리적일 수 있습니다.
[UX: Codeblocks experiment merge by jordanvidrine · Pull Request #29870 · discourse/discourse · GitHub](https://github.com/discourse/discourse/pull/29870)
또한, 저와 팀은 이 변경 사항을 정말 좋아합니다. 정말 멋져 보입니다! 😍
[이전 페이지](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946.md?page=1)