Discourse 디자인 시스템과 정렬된 커스텀 테마와 컴포넌트를 만들어서, 앱 내에서 일관되고 조화롭게 어우러지도록 하고 싶습니다.
코어에서 스타일이 어떻게 정의되고 적용되는지 코드를 살펴보면, 큰 그림과 디자인 시스템의 비전 방향성을 파악하기가 어렵습니다.
이를 크게 색상, 타이포그래피, 여백 세 가지 주제로 나누어 설명해 보겠습니다.
색상
2년 전 일부 값에 대해 수치 스케일이 도입되었습니다. 이는 명명된 색상 변환을 보완하기 위한 것이라 언급된 것으로 기억합니다. 현재 3차 색상(tertiary color) 값은 다음과 같습니다:
코어의 새로운 코드에서 두 가지 모델이 모두 적용되는 것을 볼 수 있습니다. 장기적으로 이 두 가지를 병행해서 사용하려는 의도인지, 아니면 다른 비전이 있는 건지 궁금합니다.
어쨌든, 네 가지 주요 색상 값 모두에 수치 스케일이 있어야 하지 않을까요? 현재는 1차(primary)와 3차(tertiary) 색상에만 존재하고, 2차(secondary)와 4차(quaternary) 색상에는 없습니다.
타이포그래피
현재 세 가지 다른 글꼴 크기 진행 방식이 정의되어 있습니다:
이 부분도 2년 이상 업데이트가 없었습니다. 새로운 코드에서 이 스케일들을 사용해야 하는 걸까요? 솔직히 최종적인 글꼴 크기를 정의하기가 어려워 배율(multiplier) 정의에는 손을 대지 않았습니다. 하지만 베이스 폰트 정의도 이해하기 어렵습니다. 정의된 스케일은 다음과 같습니다:
- 13px - 14px - 15px - 17px - 19px
하지만 실제 글꼴 크기를 보면, 사용 중인 기본 스케일은 다음과 비슷합니다:
- 13px - 15px - 17.25px - 22px - 26px
여백
사이드바와 같은 새로운 요소들이 여백을 위한 루트 변수를 도입하고 있는 것을 볼 수 있습니다. 예를 들어:
이는 사이드바 레이아웃을 조정하기는 확실히 쉽게 만듭니다. 하지만 다른 레이아웃 요소에는 적용되지 않습니다. 반면, 앱 전반에 걸쳐 더 일관된 레이아웃 조정을 허용할 기초적인 여백 변수가 도입되는 것도 보이지 않습니다. 이것이 로드맵에 포함되어 있나요?
전체적으로
더 일관되고 단순한 디자인 시스템으로 나아가려는 계획이 있는지 알면 좋겠습니다.
현재 관련이 없고 독립적인 정의가 너무 많아, 편안함(그리고 즐거움 
)을 고려한 일관되고 리듬감 있는 레이아웃을 구축하기가 꽤 어렵습니다.
앱이 크고 다양한 요소가 많다는 점은 이해합니다. 하지만 기본 최신(latest) 목록 뷰에서 작은 테스트를 해 보았습니다:
이것은 모든 여백 값을 매우 단순한 기하급수적 진행(2px/4px/8px/16px/32px/64px)에서 선택하여 재구성한 것입니다. 그리고 글꼴 크기는 단 네 가지 값에서 선택했습니다:
디자인 관점에서 볼 때, 현재 앱 전체에 존재하는 고유한 정의의 수가 필요할 만큼 많지 않은 것 같습니다.
