좋은 팔레트를 만드는 것이 어렵습니다

며칠 전, 보기 좋은 색 팔레트를 만들려고 한 시간 넘게 시간을 보냈습니다.

첫 번째 어려움은 primary부터 quaternary까지의 컨트롤이 정확히 무엇을 의미하는지 다소 모호하다는 점입니다.

텍스트로만 설명할 수 있는 데에는 한계가 있다는 점은 이해합니다. 하지만 실제로 색상이 어떻게 변하는지 아는 유일한 방법은 매번 하드 리프레시를 하는 것뿐입니다. 이 때문에 시간이 꽤 많이 소요되었습니다.

두 번째 어려움은 단일한 "primary"와 “secondary” 색상이 실제로는 --primary-low, --primary-high 등 다양한 색상으로 사용되기 위해 일련의 다른 색상들을 비공개로 계산한다는 점입니다. #2b2b2b와 같은 색상을 사용하면, 약간 더 파란색이 섞인 유사한 어두운 색상과 비교했을 때 결과가 매우 다르게 나타나는 것을 발견했습니다. 생성된 팔레트가 매우 달라지기 때문입니다. 새로운 색상을 시도할 때마다 결과가 예측 불가능하게 나오므로, 마치 운에 맡기는 것과 같은 느낌입니다. 기본적으로 세 가지 변수로 전체 팔레트를 제어하는 단순성은 좋지만, 결과는 매우 확률적으로 느껴집니다.

마지막으로, 대비(contrast)에 대해 많은 문제를 겪었습니다. 제가 고른 색상들을 사용했을 때, 텍스트와 배경의 대비, 가로선(horizontal rule)과 배경의 대비, 그리고 답장/편집 버튼과 배경의 대비 사이에서 트레이드오프가 발생했습니다. 예를 들어, 텍스트의 대비를 높이면 가로선이 잘 보이지 않게 되고, 그 반대도 마찬가지였습니다.

솔직히 여기서 무언가를 요구하는 것은 아닙니다. 팔레트의 크기를 늘려 더 많은 유연성을 확보하는 것이 해결책이 될 수 있을 것 같다는 생각은 듭니다. 하지만 단순함을 유지하는 것의 이점도 이해합니다. 실시간 미리보기 기능이 있다면 도움이 될 것 같지만, 이것이 우선순위가 낮은 요청이라는 점도 이해합니다.

제 경험을 기록해 두려고 했습니다. 결국 팔레트를 만들기는 했지만, 완전히 만족스럽지는 않았습니다. 다른 분들도 비슷한 어려움을 겪어 보셨는지 궁금합니다. 아니면 제 문제일까요? 조언을 주시면 감사하겠습니다.

2개의 좋아요

네, 원래 의도는 관리자 대시보드의 옵션을 색상을 설정하는 단순화된 방법, 즉 "쉬운 모드"로 만드는 것이었습니다. 제한적이며 일부 색상 조합에서는 대비가 좋지 않다는 점에 동의합니다.

좋은 소식은 원격 테마가 자동으로 생성된 모든 색상을 오버라이드할 수 있다는 점입니다. Override values for auto-generated color variables

최근 우리는 색상이 어떻게 작동하는지에 대해 더 자세히 살펴보고 있으며, 관리자와 사용자 모두에게 색상 스킴 및 라이트/다크 모드 작업이 더 쉬워지기를 바라며, 유용한 개선 사항을 마련할 수 있기를 희망합니다.

7개의 좋아요

기술적인 지적을 깎아내리려는 건 아니지만, 이 정보가 도움이 될 수도 있을 것 같아서 공유해요.

2개의 좋아요

이런 것이 가능하다는 걸 몰랐습니다. 결국 이 해결책으로 타협해야 할 것 같습니다 :slight_smile:

1개의 좋아요

고대비 팔레트(WCAG)를 기반으로 시작하여 더 많은 색상을 제공할 수 있는 팔레트를 만드는 것이 도움이 될까요?

다만 WCAG 팔레트는 원치 않을 수 있는 다른 자동 생성 색상 계산 방식을 사용하는지 모르겠습니다.

1개의 좋아요

네, 추가적인 CSS가 포함되어 있습니다(discourse/app/assets/stylesheets/wcag.scss at main · discourse/discourse · GitHub). 따라서 원치 않는 추가 사항이 있을 수 있습니다.

1개의 좋아요