메타 브랜디드 테마 재구축: 새 아이콘, 사용자 정의 홈페이지, 그리고 블록 API 첫 공개

기여 사이트 피드백
1

테마 재구성의 두 번째 이터레이션을 출시했습니다. 첫 번째 업데이트는 이전 Meta Branded 테마 위에 구축된 시각적 리프레시였다면, 이번 버전은 본질적으로 처음부터 다시 구축된 새로운 테마입니다. 새로운 브랜드 언어는 이전 릴리스에서 이미 도입되었기 때문에, 그 부분에서는 눈에 띄는 변화가 많지 않습니다. 이번 업데이트에서 크게 달라진 것은 테마 구현 자체이며, 이는 Discourse 커스터마이징의 더 넓은 방향성에 대해 우리가 어디로 향하고 있는지를 보여줍니다.

작은 항목부터 시작하여 몇 가지 구현 세부 사항을 살펴보겠습니다:

Lucide 아이콘

Lucide는 오픈소스 모던 스트로크 아이콘 세트로, 우리는 여러 커스터마이징 프로젝트에서 이를 도입하고 있습니다. 이번 이터레이션에서는 Meta Branded 테마에도 이를 포함시켰습니다. Discourse 코어에서 Font Awesome을 대체할 계획은 없지만, Font Awesome의 무료 티어는 스트로크 스타일 아이콘의 선택지가 제한적이라 일관된 스트로크 아이콘 시스템을 형성하기에 충분하지 않습니다. 테마 컴포넌트는 Discourse Lucide Icons에서 사용할 수 있습니다.

색상 팔레트를 제한하는 테마 수정자

특정 테마에서 어떤 색상 팔레트가 사용 가능한지를 제한하는 새로운 only_theme_color_schemes 테마 수정자를 추가했습니다. 이는 관리자뿐 아니라 사용자의 인터페이스 설정에서도 적용됩니다. Meta에는 Meta Branded 테마의 시각적 아이덴티티와 충돌할 수 있는 여러 사용자 선택형 팔레트가 있습니다. 이 수정자를 사용하면 테마에 번들로 포함된 팔레트만 옵션으로 제공됩니다. :link: PR: FEATURE: add modifier to restrict theme color schemes

전체 너비 레이아웃

페이지의 메인 콘텐츠를 더 잘 중앙 정렬하기 위해 Discourse Full-width 컴포넌트에 대한 몇 가지 조정도 시도하고 있습니다. 헤더에는 설정을 복잡하게 만드는 동적 요소가 많아, 현재까지는 실험 단계이며 컴포넌트의 브랜치에서만 사용할 수 있습니다.

Welcome Banner 표시를 제어하는 값 변환기

새로운 welcome-banner-display-for-route 값 변환기를 사용하여 코어 Welcome Banner가 어떤 라우트에서 표시되는지를 프로그래매틱하게 제어했습니다. 이를 통해 배너가 사용자의 개인 랜딩 페이지로 설정된 페이지가 아닌 기본 커스텀 홈 페이지에서만 표시되도록 보장합니다. :link: PR: DEV: Add welcome-banner-display-for-route value transformer

이로써 두 가지 더 큰 변경 사항으로 넘어가겠습니다:

테마 수정자를 통한 커스텀 홈 페이지

custom_homepage 테마 수정자는 거의 2년 동안 사용 가능했지만, Meta 자체에서 홈 페이지 경험을 형성하기 위해 이를 사용하는 것은 이번이 처음입니다. 우리는 피처드 컴포넌트로 채워진 커스텀 랜딩 페이지를 도입하고 있습니다. 초기 출시에는 하이라이트된 피처드 카테고리 및 최신 토론 주제 미리보기가 포함됩니다.

image
image1722×1048 143 KB

이러한 피처드 컴포넌트는 우리의 새로운 실험적 Blocks API를 사용하여 구축했으며, 이는 가장 큰 변경 사항으로 이어집니다:

Blocks API: 첫 번째 프로덕션 사용

Blocks API는 Discourse에서 모듈형이고 구성 가능한 레이아웃을 구축하기 위한 새로운 프레임워크입니다. 테마 개발자가 정의된 레이아웃 영역에 배치할 수 있는 자체 포함, 재사용 가능한 컴포넌트로 페이지를 조립할 수 있게 해줍니다. Meta 테마는 그 첫 번째 프로덕션 배포입니다.

이 프레임워크는 풍부한 개발자 도구를 갖추고 있습니다: 개발자 도구를 활성화하면 내장 오버레이를 사용하여 모든 활성 레이아웃 영역과 그 컴포넌트를 시각화하며, 모든 페이지의 블록 구조를 검사할 수 있습니다.

image
image1997×1015 301 KB

홈 페이지 외에도, 우리는 각 카테고리의 하위 카테고리를 표시하는 커스텀 카테고리 배너를 렌더링하기 위해 블록을 사용하고 있습니다:

image
image1997×510 129 KB

이것은 아직 프로덕션 환경에서의 시스템 초기 프리뷰입니다. 우리는 곧 문서와 더 많은 예시를 게시할 계획입니다. :link: PR: DEV: Add Block API for declarative, validated UI extension points

27개의 좋아요
Updates to the Meta Branded theme homepage
Approximate Meta's design in my own forum
Current Projects - April 2026
Current Projects - May 2026
Que penses vos utilisateurs sur votre interface discourse?
Current Projects - June 2026
What theme does the discourse official community use?
5

좋은 선택입니다. 이 아이콘 세트는 Discourse에서 어떤 아이콘 세트가 사용 가능한지 살펴볼 때 제 시선을 끌었습니다. 세련되고 우아하네요.

채워진(filled-in) 아이콘이 전혀 없다는 점이 몇 가지 문제를 일으켰습니다. 예를 들어, 읽지 않은(unread) 표시기가 색이 입혀진 원으로 거의 보이지 않았고, 다크/라이트 모드 전환 버튼은 채워진 부분이 없으면 제대로 렌더링하기 어려웠습니다.

메타 브랜딩 테마에서 이 문제들을 해결하신 것 같습니다. 이를 위해 사용자 정의 아이콘을 추가하신 건가요?

그리고 참고로, 메타 브랜딩 테마에서 왼쪽 상단의 Discourse 로고가 클릭되지 않습니다. (아마도 몇 달 전부터 그랬던 것 같습니다) :grimacing:

1개의 좋아요
6

아니요, circle과 square 같은 일부 아이콘을 lucide 버전으로 매핑하지 않았을 뿐입니다. 오히려 해당 아이콘들은 Fontawesome의 스트로크 버전만 매핑했습니다(far-circle, ..). 매핑을 계속 개선해야 할 다른 사례가 있을 수 있습니다.

예를 들어 하트 아이콘은 처리하기가 까다롭습니다. 좋아요 상태일 때 채워진 버전이 더 좋을 것 같지만, 아직 이를 가장 잘 처리하는 방법에 대해 확신이 서지 않습니다..

저는 해당 문제를 재현할 수 없는데, 더 자세한 정보가 있으신가요?

3개의 좋아요
7

Blocks가 Plugin Outlets에 비해 어떤 차이를 제공하는지 궁금합니다.

2개의 좋아요
8

크롬과 엣지에서만 테스트했고, 데스크톱에서만 발생하는 문제입니다:

image
image463×328 26.6 KB

사이드바 토글 div가 로고를 가려서 클릭할 수 없습니다.

(그리고 네, 윤곽선만 있는 하트 아이콘이 별로 예쁘지 않네요 :broken_heart:)

수정: 죄송합니다. 이 동작은 Discourse 버그가 아니라 사용자 스크립트에서 비롯된 것이므로 무시해도 됩니다. :see_no_evil_monkey:

2개의 좋아요
9

현재 “답글” 아이콘은 전혀 마음에 들지 않습니다:

image
image523×343 15.1 KB

Lucide에 좋은 FA(FontAwesome) 대안이 없어서 일시적인 것으로 보입니다.

토픽 목록의 아이콘들이 매우, 매우 작습니다:

image
image655×893 50.9 KB

수정: 다른 테마에서도 마찬가지입니다.

Screenshot_20260409_004040_Chrome
Screenshot_20260409_004040_Chrome765×256 54.3 KB

Screenshot_20260409_004232_Chrome
Screenshot_20260409_004232_Chrome749×259 54 KB

카테고리 아이콘이 태그 아이콘보다 작아 보입니다. 좀 이상하네요. 선택된 카테고리 아이콘 크기가 박스형 카테고리 스타일에 의해 제한된 것 같은데, 그러면 공간이 더 적어지니까요… :thinking:

3개의 좋아요
10

이런 공식 테마에 Lucide 같은 것이 추가될 줄은 몰랐습니다. 정말 멋지네요! 다만 하트가 채워진 형태였으면 좋겠습니다. 그 작은 단점을 제외하면, 제 생각에 모바일에서 테마가 정말 훌륭해 보입니다.

개인 메시지(PM)의 본문에 패딩이 없는 것 같습니다:

IMG_2067
IMG_2067180×1075 11.2 KB

2개의 좋아요
11

전적으로 동의합니다!

그리고 위 의견에도 동의하는데, 빈 하트 아이콘은 별로예요.

3개의 좋아요
12

음… 한 가지 변경할 수 있을 것 같은 점은 채팅 아이콘을 message-square-text에서 message-square로 바꾸는 거예요. 줄들이 좀 산만해 보이거든요. 이 변경으로 UI가 더 "깔끔"해져서 꽤 좋은 변화인 것 같아요.

1개의 좋아요
Discourse Lucide Icons
13

아이콘 피드백을 남겨 주셔서 감사합니다! 해당 세트를 위한 전용 주제를 추가했습니다: Discourse Lucide Icons.

이상적으로는 해당 주제에서 추가 피드백을 수집하고, 진행하면서 세트를 계속 다듬어 나가는 것이 좋겠습니다.

14

현재 .74em 크기로는 아이콘이 거의 읽기 어렵다는 데 동의합니다. 약 1em 정도가 필요합니다.

1개의 좋아요
15

내 착각인지, 아니면 오늘 토픽 목록의 세로 패딩이 실제로 증가한 건지 모르겠어요. 밀도가 낮아진 건지, 아니면 내가 더 둔해진 건지.

1개의 좋아요
16

저도 이 문제를 발견해서 수동으로 되돌려 보았지만 (외형보다 정보 밀도를 더 중요시해서요) 실패했습니다 :frowning:

17

디자인 관점에서 가장 큰 차이는 PluginOutlet이 삽입 지점(insertion point)이라는 점입니다. 컴포넌트를 코어 템플릿에 직접 주입하게 되며, 모든 커스터마이징이 실제로 앱 구조를 변경합니다.

반면 BlockOutlet은 레이아웃 프레임입니다. 이 프레임에 하나 이상의 컴포넌트를 등록하게 됩니다. 그러면 커스터마이징이 앱 템플릿이 아닌 해당 프레임 내에서 이루어집니다. 이를 통해 더 예측 가능하고 안정적인 레이아웃을 얻을 수 있습니다.

또 다른 큰 차이는 Blocks API가 조건부 렌더링 로직의 전체 범위를 처리할 수 있다는 점입니다. 이를 컴포넌트에 추가할 필요가 없습니다. 블록 컴포넌트는 콘텐츠와 템플릿에만 집중할 수 있으며, 반복되는 로직이 훨씬 적어집니다.

2개의 좋아요
18

더 컴팩트한 주제 목록을 원하시는 분을 위해, 저에게 효과가 좋았던 방법은 다음과 같습니다:

.topic-list .topic-list-data {
  padding: 8px 0px;
  line-height: 0px;
}

image
image777×941 133 KB

1개의 좋아요
19

새로운 메타 브랜디드 테마는 모바일에서 내 취향에 맞지 않을 정도로 여백이 너무 많습니다.

  • 화면 가장자리와 콘텐츠 컨테이너 사이의 1차 여백
  • 페이지 컨테이너와 실제 콘텐츠 사이의 2차 여백

다른 테마들은 화면 가장자리와 콘텐츠 컨테이너 사이의 이 첫 번째 간격이 없습니다.

이로 인해 콘텐츠가 수평 방향으로 약간 “구겨진” 느낌을 주며, 공간이 매우 좁습니다. ‘내 게시물’ 페이지에서 호라이즌 테마와 비교하면 잘 보입니다:

Screenshot_20260410_014714_Chrome
Screenshot_20260410_014714_Chrome1080×2340 268 KB

Screenshot_20260410_024000_Chrome
Screenshot_20260410_024000_Chrome1080×2340 292 KB

호라이즌 테마는 가독성을 해치지 않으면서 훨씬 더 많은 콘텐츠를 보여줄 수 있습니다.

보라색 “외곽선” 배경의 의도는 콘텐츠가 가득 찬 페이지에서 테마의 브랜드 요소가 보이도록 하기 위한 것임을 이해하지만, 이러한 좁은 화면에서는 공간이 너무 많이 손실된다고 생각합니다.

또한 몇 가지 작은 비판 사항이 있습니다:

Screenshot_20260410_133453_Chrome
Screenshot_20260410_133453_Chrome1080×2340 249 KB

왼쪽 위 아이콘은 완벽하게 둥글지 않습니다. 아주 약간 납작한 타원형입니다.
image image

하단 아이콘은 약간 세로 방향으로 늘어난 것처럼 보입니다:

image
image341×127 9.84 KB

카테고리/태그 팝업이 텍스트 영역을 약간 넘치게 만듭니다(이 테마와 관련이 있는지 확실하지 않음):

image
image155×652 42.6 KB
. 이를 덮어주는 것이 더 나을 것입니다.

3개의 좋아요
20

모바일에서 리더보드의 날짜 범위를 선택하면 콘텐츠가 가로 방향으로 넘칩니다:

Screenshot_20260410_111718_Chrome
Screenshot_20260410_111718_Chrome1080×2340 222 KB

이것이 100% 테마와 관련이 있는지는 확실하지 않습니다. 다른 테마에서는 한 줄 전체를 표시할 충분한 공간이 있어서 이런 문제가 발생하지 않을 수도 있습니다.

1개의 좋아요
21

메타가 하트 아이콘 문제를 해결했다고 보는데, 어떻게 해결한 건지 궁금합니다. 제 포럼에서는 아직 하트 아이콘이 빈 상태거든요. :frowning:

2개의 좋아요
22

이제 Lucide Icons 컴포넌트에 병합되어야 하며, 업데이트 시 표시되어야 합니다.

좋아요 상태는 전체 아이콘으로만 표시하지만, 이제 컴포넌트 설정에서 추가 예외를 설정할 수도 있습니다.

1개의 좋아요
23

조금 다듬을 부분이 있다는 범주에 들어가는 또 다른 코멘트입니다:

image

“업보트” 요소의 상단과 하단 여백이 서로 다르고, 화살표가 포함된 이 컨테이너의 상단 부분이 하단보다 더 높습니다. 조금 이상해 보입니다. 테마가 "둥근 요소"를 지향한다면, 여기서는 진정한 원형으로 만드는 것도 좋을 것입니다. 하지만 현재 상태로는 좀 이상해 보입니다 :thinking: