# Discourse 디자인 시스템의 비전은 무엇인가요?

**URL:** <https://meta.discourse.org/t/whats-the-vision-for-the-discourse-design-system/293541>\
**Category:** UX\
**Created:** [1월 30, 2024, 10:12오후 UTC](https://meta.discourse.org/t/whats-the-vision-for-the-discourse-design-system/293541 "2024-01-30T22:12:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)\
**Post date:** [1월 30, 2024, 10:12오후 UTC](https://meta.discourse.org/t/whats-the-vision-for-the-discourse-design-system/293541/1 "2024-01-30T22:12:00Z")

</div>

Discourse 디자인 시스템과 정렬된 커스텀 테마와 컴포넌트를 만들어서, 앱 내에서 일관되고 조화롭게 어우러지도록 하고 싶습니다.

코어에서 스타일이 어떻게 정의되고 적용되는지 코드를 살펴보면, 큰 그림과 디자인 시스템의 비전 방향성을 파악하기가 어렵습니다.

이를 크게 색상, 타이포그래피, 여백 세 가지 주제로 나누어 설명해 보겠습니다.

### 색상

2년 전 일부 값에 대해 수치 스케일이 도입되었습니다. 이는 명명된 색상 변환을 보완하기 위한 것이라 언급된 것으로 기억합니다. 현재 3차 색상(tertiary color) 값은 다음과 같습니다:

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/c/a/cca4a183828180dfb21219f27d8de4ef17e57872.png)

코어의 새로운 코드에서 두 가지 모델이 모두 적용되는 것을 볼 수 있습니다. 장기적으로 이 두 가지를 병행해서 사용하려는 의도인지, 아니면 다른 비전이 있는 건지 궁금합니다.

어쨌든, 네 가지 주요 색상 값 모두에 수치 스케일이 있어야 하지 않을까요? 현재는 1차(primary)와 3차(tertiary) 색상에만 존재하고, 2차(secondary)와 4차(quaternary) 색상에는 없습니다.

### 타이포그래피

현재 세 가지 다른 글꼴 크기 진행 방식이 정의되어 있습니다:

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/1/2/f1244c75ab874c61263ef96c845ea1eaa93cbdfe.png)

이 부분도 2년 이상 업데이트가 없었습니다. 새로운 코드에서 이 스케일들을 사용해야 하는 걸까요? 솔직히 최종적인 글꼴 크기를 정의하기가 어려워 배율(multiplier) 정의에는 손을 대지 않았습니다. 하지만 베이스 폰트 정의도 이해하기 어렵습니다. 정의된 스케일은 다음과 같습니다:

- 13px - 14px - 15px - 17px - 19px

하지만 실제 글꼴 크기를 보면, 사용 중인 기본 스케일은 다음과 비슷합니다:

- 13px - 15px - 17.25px - 22px - 26px

### 여백

사이드바와 같은 새로운 요소들이 여백을 위한 루트 변수를 도입하고 있는 것을 볼 수 있습니다. 예를 들어:

![image](https://global.discourse-cdn.com/meta/original/4X/f/4/f/f4fef18c35329b2ed226c5229d61a766e088311f.png)

이는 사이드바 레이아웃을 조정하기는 확실히 쉽게 만듭니다. 하지만 다른 레이아웃 요소에는 적용되지 않습니다. 반면, 앱 전반에 걸쳐 더 일관된 레이아웃 조정을 허용할 기초적인 여백 변수가 도입되는 것도 보이지 않습니다. 이것이 로드맵에 포함되어 있나요?

### 전체적으로

더 일관되고 단순한 디자인 시스템으로 나아가려는 계획이 있는지 알면 좋겠습니다.

현재 관련이 없고 독립적인 정의가 너무 많아, 편안함(그리고 즐거움 🙂)을 고려한 일관되고 리듬감 있는 레이아웃을 구축하기가 꽤 어렵습니다.

앱이 크고 다양한 요소가 많다는 점은 이해합니다. 하지만 기본 최신(latest) 목록 뷰에서 작은 테스트를 해 보았습니다:

 ![latest-plain](https://global.discourse-cdn.com/meta/original/4X/1/c/8/1c8a9b921c00fb8938fab9e846e3ce5b7ee9bd37.png)

이것은 모든 여백 값을 매우 단순한 기하급수적 진행(2px/4px/8px/16px/32px/64px)에서 선택하여 재구성한 것입니다. 그리고 글꼴 크기는 단 네 가지 값에서 선택했습니다:

 ![Screenshot from 2024-01-30 21-05-48](https://global.discourse-cdn.com/meta/original/4X/a/1/3/a135c3e8721b42b5f68c93f8f86690ee118a49d9.png)

 ![Screenshot from 2024-01-30 21-04-12](https://global.discourse-cdn.com/meta/original/4X/e/f/d/efd9f42795faef88ebd7f23ec0c2a125e1231f04.png)

디자인 관점에서 볼 때, 현재 앱 전체에 존재하는 고유한 정의의 수가 필요할 만큼 많지 않은 것 같습니다.

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [1월 30, 2024, 11:11오후 UTC](https://meta.discourse.org/t/whats-the-vision-for-the-discourse-design-system/293541/2 "2024-01-30T23:11:45Z")

</div>

우리는 이것을 해보고 싶었고, 조각조각씩 점진적으로 나아가고 있지만, 단번에 이루어질 수 있는 일은 아닙니다. 우리가 만드는 모든 변경 사항은 수천 개의 사이트에서 테마 회귀 문제를 일으킬 수 있으며(고객을 위해 이 중 많은 부분을 수정해야 하므로), 작은 변경 사항조차 오랜 시간이 걸립니다.

또한, 우리는 한동안 Ember 현대화 작업을 진행해 왔고, 이 작업 역시 회귀 문제 수정과 기존 테마 리팩터링을 요구합니다. 이 작업은 아직 진행 중이며, 모든 것을 업데이트하는 데에도 시간이 걸릴 것입니다(예를 들어, 위젯 시스템을 교체하는 것만 해도 6개월 이상 걸릴 수 있습니다). 균형 잡아야 할 우선 순위가 많습니다.

> [@manuel](#):
>
> 디자인 시스템의 구상된 방향성

더 높은 일관성 외에 구상된 방향성은 없습니다. 기본 스타일을 분리하여 기본 “테마 미적용” Discourse의 CSS를 대폭 줄이는 방안을 고려해 보았습니다(테마 유지보수를 더 쉽게 만들 수 있을 것입니다)… 하지만 아직은 아이디어 단계에 불과합니다.

> [@manuel](#):
>
> 어쨌든, 네 가지 주요 색상 값 모두에 대한 수치 스케일이 있어야 하지 않나요? 현재는 primary와 tertiary에만 있고, secondary와 quaternary에는 없습니다.

이것들은 “필요할 때” 추가된 것이므로, 추가적인 secondary/quaternary 스케일에 대한 필요성이 없었습니다. 명명된 버전을 제거할 계획이 없으므로, 가까운 미래에는 어느 쪽을 사용해도 됩니다.

> [@manuel](#):
>
> 현재 세 가지 다른 유형의 글꼴 크기 진행이 정의되어 있습니다:

가장 작음/작음/큼/가장 큼(small/smaller/larger/largest) 크기는 사용자 설정의 텍스트 크기를 위한 것입니다. 대부분의 경우 이 값들을 변경할 필요가 없습니다.

em 스케일은 고전적인 타이포그래피 스케일(예: [The typographic scale](https://spencermortensen.com/articles/typographic-scale/))에 대략적으로 기반을 두고 있습니다. 13-15-17-19와 같이 더 균일하게 간격을 둔 스케일은 많은 단계를 갖지 않는 한 대비를 많이 만들지 못하고 모든 것이 다소 작게 유지됩니다. 고전적인 스케일에서는 스케일 사이의 간격이 크기가 커질수록 증가하여 더 많은 대비를 생성합니다.

em 기반 스케일 뒤의 아이디어는 앱의 모든 것이 비례적으로 확장되고, 앱의 개별 섹션도 비례적으로 확장될 수 있다는 것입니다. 따라서 다음과 같은 작업을 수행할 수 있습니다:

```css
.sidebar-wrapper {
  font-size: 20px; 
}

```

이렇게 하면 개별 font-size와 관련된 모든 간격을 수정하지 않아도 해당 요소 내부의 모든 것이 비례적으로 확대됩니다.

내부 피드백은 여러분과 유사하여, 개발자들은 컨텍스트와 관계없이 정확한 글꼴 크기를 알고 싶어 합니다. 이것이 시스템의 단점입니다. 이상적으로는 정확한 크기를 걱정하지 않고 "더 크고 싶으니까 한 단계 올려야 한다"라고 말할 수 있었으면 좋겠지만, 그 멘탈 모델은 자연스럽게 느껴지지 않는 것 같습니다.

rem 기반 시스템으로 전환하려는 욕구가 있지만, 앞서 언급했듯이… 이는 기존 사이트에 영향을 미치는 범위가 넓기 때문에 변경하는 데 오랜 시간이 걸릴 가능성이 높습니다. 또한 15px 대신 브라우저 기본값인 16px을 선호하지만, 비슷한 상황입니다(예전에는 14px이었으니! 적어도 한 단계는 진전된 셈이죠).

rem 스케일은 조리된(post) 콘텐츠의 제목에 사용됩니다. em을 사용하여 제목 태그를 중첩하면 개인이 텍스트를 무한정 확대하여 레이아웃 문제를 일으킬 수 있기 때문입니다.

> [@manuel](#):
>
> 반면, 앱 전반에서 더 일관된 레이아웃 조정을 허용할 기초 간격 변수가 도입되지 않는 것으로 보입니다. 이것이 로드맵에 어떤 식으로든 포함되어 있나요?

네, 몇 번 언급된 적이 있습니다… (반복되는 것 같지만…) 기존 사이트에서 회귀 문제를 피하기 위해 매우 점진적인 변경이 되어야 합니다. 현재는 업데이트하는 특정 영역 내에서 공유 변수를 추가하고 있으며, 이는 올바른 방향의 한 걸음입니다.

이러한 작업이 진행되는 속도가 다소 답답하게 느껴질 수 있지만, Discourse 역사 대부분 동안 전담 디자이너가 전혀 없었습니다. 지난 몇 년간 디자인 팀은 7명으로 성장했습니다(대부분 공개되지 않은 고객 프로젝트에 종사하는 전담 디자이너 포함) 따라서 이제 더 일관된 방향으로 더 빠르게 나아가기를 바랍니다.

---

<div class="post-metadata">

**Author:** ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)\
**Post date:** [1월 30, 2024, 11:56오후 UTC](https://meta.discourse.org/t/whats-the-vision-for-the-discourse-design-system/293541/3 "2024-01-30T23:56:06Z")

</div>

Kris님, 설명해 주셔서 감사합니다! 정말 도움이 됩니다.

> [@awesomerobot](#):
>
> 우리가 하는 모든 변경 사항은 수천 개의 사이트에서 잠재적인 테마 회귀 문제를 일으킬 수 있습니다.

저는 아주 작은 규모에서만 이 문제를 마주하고 있습니다. 하지만 때로는 제품(Product)에 대한 전반적인 기대치를 바꾸는 것이 도움이 될 수 있다고 생각합니다. Discourse가 빠르게 움직이고 있다는 점을 확립하는 것이죠.

> [@awesomerobot](#):
>
> 기본 스타일을 분리하여 기본 ‘테마 미적용’ Discourse의 CSS를 훨씬 줄이는 방안을 고려해 보았습니다.

그것도 좋을 것 같지만, 여전히 더 쉬운 핸들링이 필요하다고 생각합니다. 템플릿이 너무 많거든요. 각 템플릿의 CSS가 더 단순해지더라도, 그것들을 조화롭게 수정할 수 없다면 여전히 많은 노력이 필요합니다.

> [@awesomerobot](#):
>
> 하지만 그 정신적 모델(mental model)은 자연스럽게 오지 않는 것 같습니다.

정말 아름다운 정신적 모델입니다. 저는 정확한 크기를 선호할 것 같습니다. 적용하기가 훨씬 쉬워서요. 예를 들어, 누군가가 디자인 시스템을 가지고 있다면, 저는 단순히 숫자를 적용하고 결과를 보면 됩니다. 반면, 그렇지 않다면 두 시스템을 일치시켜야 할 것 같습니다. 즉, 두 시스템의 특성을 모두 이해하고 공통된 조화를 찾아야 한다는 뜻입니다.

---

<div class="post-metadata">

**Author:** ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)\
**Post date:** [2월 1, 2024, 4:16오전 UTC](https://meta.discourse.org/t/whats-the-vision-for-the-discourse-design-system/293541/4 "2024-02-01T04:16:32Z")

</div>

이 문제에 대해 더 생각해보니, Discourse 디자인 시스템에 대해 여러 가지 비전을 가질 수 있을 것 같습니다.

![Discourse Design System-95](https://global.discourse-cdn.com/meta/original/4X/d/4/5/d45f7c3474e07d7b67ffa2e33e560519ff58f337.png)

표준화된 원자적 빌딩 블록을 갖춘 실용적인 디자인 시스템. 아마도 항상 필요한 첫 번째 단계일 것입니다.

 ![Discourse Construction Kit 8](https://global.discourse-cdn.com/meta/original/4X/1/8/2/182727a93212bbdee6bc4f4908c425c64f18d793.png)

일부 고수준 컴포넌트를 추상화하는 시스템. Discourse의 경우 이는 модерация(모더레이션), recognition(인정), information(정보) 등에 관한 것이 될 수 있습니다.

 ![Civic](https://global.discourse-cdn.com/meta/original/4X/1/f/4/1f4b0892a49e443ce3c210c2cf2389ac794c6d97.png)

온라인 대화를 위한 공통 패턴 시스템. Material Design과 같은 시스템의 기초적 범위와 유사합니다.