🌅 최신 테마 'Horizon' 소개

[lindsey (Lindsey Fogle)]

지난 몇 달간 우리는 최신 Discourse 테마인 Horizon 개발에 매진해 왔으며, 오늘 이 작업을 여러분과 공유하고 Horizon을 커뮤니티에서 사용해 보시기를 초대합니다.

이 주제에서 Horizon에 대해 소개하고 설치 방법을 안내해 드리겠습니다.

Horizon에 대해

Horizon은 관리자의 추가적인 노력 없이 커뮤니티에 훌륭한 사용자 경험을 제공하도록 설계된 단순하고 아름다운 테마입니다. 이름은 Horizon이 Discourse를 사용할 수 있는 대상이 누구이며, Discourse 커뮤니티가 어떻게 보일 수 있는지에 대한 더 넓은 비전을 표현하길 바라는 우리의 희망을 반영합니다.

라이트 모드

다크 모드

왜 Horizon을 만들었을까요?

Horizon은 누구나 더 쉽게 Discourse 커뮤니티를 시작하고 자부심을 가지고 멤버들과 공유할 수 있도록 만들기 위해 만들었습니다.

Discourse 관리자들과의 대화를 통해, 커뮤니티를 시작하는 가장 중요한 부분 중 하나는 커뮤니티 멤버들이 환영받고 즐길 수 있는 공간이 되도록 그 외관을 수정하는 것임을 알게 되었습니다. Horizon은 추가적인 노력이나 커스터마이징 없이도 훌륭한 외관의 커뮤니티를 가질 수 있게 해줍니다.

Horizon은 누구를 위한 것일까요?

Horizon은 Discourse의 외관을 커스터마이징할 전문 지식이나 자원이 없는 커뮤니티를 위해 설계되었습니다.

우리는 Discourse가 얼마나 유연하고 커스터마이징할 수 있는지 자랑스럽게 생각합니다 — 그리고 그것은 변하지 않을 것입니다! 하지만 우리는 세상에 더 많은 Discourse가 존재하는 것이 좋은 일이라고 믿으며, 기술에 익숙하지 않은 커뮤니티가我们的产品을 통해 번영할 수 있도록 하는 것이 우리가 그것을 실현하는 최선의 방법이라고 생각합니다.

Horizon의 특별함은 무엇일까요?

기본(Default) 테마가 백지 상태라면, Horizon은 자신의 의견을 가지고 있습니다. 그것은 여백, 단순함, 그리고 현대적인 디자인 미학을 중시합니다.

차이를 보려면, 여기 Meta의 사이드바 하단 테마 토글을 사용하여 Horizon으로 전환해 보세요:

Horizon에서 달라지는 점을 몇 가지 소개합니다:

• 낮은 정보 밀도. Horizon의 가장 눈에 띄는 특징은 토픽 카드입니다. 표준 테이블 뷰에서 슬림하게 줄여 접근하기 쉽고 단순하게 느껴지도록 했습니다. 토픽 참여자, 태그, 지정된 사용자에 대한 상세 정보와 같은 특정 정보는 표시되지 않습니다.
• 더 큰 텍스트와 더 많은 여백. 토픽 카드 외에도, 읽기 영역의 기본 글꼴 크기를 늘리고 전체 폭 구조를 적용하여 Horizon에 더 많은 여백을 도입했습니다.
• 그대로 사용하도록 설계됨. 사이트 외관에 대한 광범위한 제어나 매우 특정한 디자인 요구 사항이 있는 커뮤니티는 여전히 기본(Default) 테마를 기반으로 작업하거나 필요에 가장 잘 부응하는 자체 테마를 만드는 것이 좋습니다. Horizon을 가장 인기 있는 공식 테마 컴포넌트와 테스트하여 경미한 호환성 문제만 발견했지만, Horizon에 비공식 컴포넌트나 기타 사용자 정의 코드를 추가하는 것은 권장하지 않습니다.

Horizon 사용하기

다음 단계를 통해 Horizon을 멤버들에게 활성화할 수 있습니다:

1. 관리자 영역으로 이동하고 외관 섹션으로 가서 테마 및 컴포넌트를 클릭합니다.
2. Horizon 테마 카드를 찾아 … 버튼을 클릭한 후 **기본값으로 설정(Set as active)**을 선택하여 Horizon을 커뮤니티의 새로운 기본 테마로 만듭니다. (이 변경 사항을 확인하려면 화면을 새로고침해야 할 수 있습니다.)

Horizon과 잘 작동하도록 특별히 제작된 새로운 컬러 팔레트 중 하나를 선택적으로 활성화할 수 있습니다.

참고: Horizon에서 사용되는 팔레트를 교체할 수 있지만, 사이드바의 컬러 선택기에 표시되는 팔레트는 Clover, Horizon, Lily, Marigold, Royal, Violet 이름의 팔레트만입니다.

컬러 팔레트 구성에 대한 설명서.

1. 관리자 사이드바에서 컬러 팔레트를 클릭합니다.
2. 원하는 컬러 팔레트(예: Horizon)를 선택합니다.
3. 사용자가 컬러 팔레트를 선택할 수 있음 설정을 확인한 후 체크 마크를 클릭하여 확인합니다.
4. 사용하려는 모든 팔레트에 대해 단계 2-3를 반복합니다.

새로고침 후, 사이드바 하단에 붓 아이콘이 표시됩니다. 이를 클릭하여 Horizon에 사용할 특정 컬러 팔레트를 선택할 수 있습니다(위 스크린샷 참조). 멤버들도 활성화된 팔레트 중 하나를 선택하기 위해 동일한 작업을 수행할 수 있습니다. Horizon의 새로운 기본 팔레트를 설정하려면(즉, 멤버가 변경 사항을 만들거나 익명 방문자가 보기 전에 Horizon이 어떻게 보이는지):

1. 관리자 영역에서 테마 및 컴포넌트로 이동합니다.
2. Horizon 카드를 찾아 편집을 클릭합니다.
3. 컬러 팔레트 필드를 원하는 기본값으로 변경합니다.

Horizon의 다음 단계

우리는 이제 막 시작했습니다! 이 테마의 첫 번째 버전에 대해 열심히 작업했지만, Horizon에 계속 투자하고 시간이 지나면서 개선해 나갈 예정입니다. Horizon을 사용하는 사이트들로부터 적극적으로 피드백을 받아 지속적으로 개선해 나가고, 머지않아 Discourse 사이트에 기본적으로 포함되는 기본 테마가 되기를 희망합니다.

감사합니다

Horizon(그리고 Discourse 팀!)을 지원해 주신 모든 분께 진심으로 감사드립니다. Meta에서 Horizon을 테스트해 주거나 베타 테스트에 참여해 주신 덕분에 버그를 찾고, 조정을 하며, 이 테마에서의 Discourse 전반의 경험을 다듬는 데 큰 도움이 되었습니다. 여러분의 시간, 피드백, 그리고 지원에 다시 한번 깊이 감사드립니다!

[hellekin]

정말 멋져요! 직접 해보고 싶어요.

하지만 /admin/customize/themes/1/common/*/edit 커스터마이징에 대한 라우트가 없네요. 추가해 주실 수 있을까요? 선택한 테마와 무관하게 특수 헤더와 기타 커스터마이징을 제공하기 위해 사용하고 있습니다.

감사합니다!

아, 죄송합니다. Help us test Horizon, our newest theme 에 게시해야 했는데요.

[Moin]

새로운 테마 컴포넌트를 만들어 그 안에서 변경 사항을 추가한 후, 이를 Horizon 테마에 추가하는 것은 어떨까요?

코드 편집 버튼 없이 테마 사용자 지정

때로는 Discourse 테마를 커스터마이즈하고 싶지만 “Custom code” 섹션과 “Edit code” 버튼이 없는 경우를 발견할 수 있습니다. 이는 주로 원격 테마(외부 소스에서 설치된 테마)와 사전 설치된 테마(Horizon & Foundation)에서 자주 발생하는 현상입니다. 전체 가이드는 여기에서 확인할 수 있습니다: https://disco-docs.com/t/customizing-themes-without-an-edit-code-button/349

[Moin]

제가 놓친 건지, 아니면 Horizon이 번역을 위해 Crowdin에 추가되지 않은 건가요? 대신 번역이 포함된 pull request를 생성해야 할까요?

[lindsey (Lindsey Fogle)]

@hellekin

이거 정말 멋지네요! 직접 한번 해보고 싶어요.

하지만 /admin/customize/themes/1/common/*/edit 커스터마이징을 위한 라우트가 없습니다. 추가해 주실 수 있을까요? 선택한 테마와 독립적으로 특수 헤더와 기타 커스터마이징을 제공하기 위해 이 기능을 사용하고 있습니다.

Horizon은 기본적으로 있는 그대로 사용하도록 설계되었기 때문에, 직접적인 커스터마이징이나 비공식 컴포넌트를 통한 커스터마이징은 권장하지 않습니다. 그렇더라도 Horizon에 대해 어떤 부분을 변경하고 싶은지 더 자세히 알려주시면, 테마에 더 직접적으로 통합할 수 있는 좋은 후보가 될 수 있는지 확인해 보겠습니다.

@Moin

제가 놓친 건지, Horizon이 번역을 위해 Crowdin에 추가되지 않은 것 같네요. 대신 번역이 포함된 풀 리퀘스트를 생성해야 할까요?

확인해 보고 있으니 곧 후속 소식을 전해드리겠습니다!

[hellekin]

사실 이것은 포럼을 Fediverse 계정에 연결하기 위한 헤더일 뿐입니다 (그리고 푸터에서 동일한 작업을 수행하기 위한 <noscript> 태그도 포함됩니다).

테마 컴포넌트 코드는 여기에 있습니다: https://git.z7l.eu/ps/discourse-lire.im

Mastodon에 대한 근거를 확인해 보세요.

[Helga_Razinkova (Helga)]

정말 멋지네요!! 현재 우리가 사용 중인 커스텀 컴포넌트와 테마가 호환되지 않을 것 같네요. 예를 들어:

[Jonathan5]

Help us test Horizon, our newest theme에서 이어지는 토론입니다:

@chapoi

사이드바 하단의 테마 전환기를 사용하여 Meta에서 Horizon을 확인해 볼 수 있습니다:

모바일(iPhone 11 Pro Max)에서는 작동하지 않았습니다. 폰 설정에서 글자 크기를 키웠기 때문인 것 같습니다.

[satonotdead]

이 테마가 정말 훌륭해요. 수고하셨습니다!

포크된 호라이즈를 어떻게 업데이트해야 할지 궁금합니다. 유지해야 할 커스텀 수정 사항이 좀 있거든요

[sam (Sam Saffron)]

컴포넌트를 생성하여 테마에 추가하고 커스터마이징하세요

[sam (Sam Saffron)]

장기적으로 우리의 목표는 공식 컴포넌트가 모두 호라이즌에서 잘 작동하도록 하는 것입니다. 커스텀 작업이 필요하신 고객분께서는 @team에 연락해 도움을 요청해 주세요. (유료 커스텀 작업이 필요할 수 있습니다)

[SubStrider]

이 테마에 사용자가 선택할 수 있는 옵션을 추가하여, 테마를 수정하는 테마 컴포넌트를 삽입하고 싶습니다. 사용자가 Horizon 테마를 그대로 사용하거나, 그 변형 버전을 선택할 수 있도록 하려는 것입니다.

이 테마의 변형 버전은 전체 너비(full width)로 표시됩니다. 또한 개별 게시물 행의 CSS를 스타일링하여, 스크롤바나 하단의 새/읽지 않은 주제와 같은 페이지의 다른 요소보다 콘텐츠를 시각적 위계에서 더 앞으로 가져오도록 할 것입니다.

Horizon은 정말 훌륭해 보이지만, 여전히 주제 페이지의 정보 밀도 문제를 해결하지는 못합니다. 다른 전통적인 포럼 소프트웨어에서 온 사용자들에게는 시각적으로 압도적으로 느껴질 수 있습니다.

제 의견은 네이티브 discourse 사용자에게는 공감되지 않을 수 있지만, 저는 외부의 관점을 가져오고 있습니다. 제 커뮤니티를 위해 적어도 이러한 변경 사항은 반드시 필요합니다.

[hellekin]

그룹 표시 부분에서 오버플로우가 발생할 수 있는 작은 버그를 발견했습니다:

다음과 같은 CSS를 추가하면 완화할 수 있습니다:

.group-box-inner {
	overflow: auto;
}

[asa]

네비게이션 바와 콘텐츠 사이에 이렇게 많은 여백이 있는 것이 의도된 것인가요?

[NateDhaliwal]

아니요, 그건 예상된 동작이 아닌 것 같아요. 혹시 이 동작에 간섭을 일으키는 컴포넌트가 있는 걸까요?

[sam (Sam Saffron)]

지금 그런 것 같아. 초광폭 풀스크린 브라우저의 잘린 스크린샷인 것 같아.

[MachineScholar]

이 테마를 정말 좋아하고 있지만, Search Banner 컴포넌트가 테마와 잘 어울리지 않는 것 같습니다. search_banner.subhead 텍스트가 표시되지 않아 정렬이 어긋나는 것처럼 보입니다. 또한 희미한 회색 줄이 있습니다.

업데이트:
Search Banner를 비활성화했는데, 내장된 환영 메시지+검색 기능이 더 잘 보입니다. 하지만 아래 스크린샷에서와 같은 서브 헤더 텍스트가 표시됩니다.

또한 홈 페이지의 북마크 링크는 북마크가 있다고 해도 아직 북마크가 없다고 표시합니다. /bookmarks로 연결되는데, /u/johndoe/activity/bookmarks로 연결되어야 합니다.

[asa]

실제로 와이드스크린입니다. 그러나 대량의 빈 흰색 공간이 시선을 분산시킵니다. 이를 조정할 수 있을까요?

[Lilly (Lillian)]

이 점 알려주셔서 감사합니다. 디자인 팀에서 해당 문제를 확인해 보도록 하겠습니다.

[SubStrider]

거의 한 달 전에 이 문제를 보고했지만…

최신 테마 Horizon 테스트에 함께해 주세요

This extra white space to the left and right of the topic contents is what I was talking about. Doesn’t look uniform. Ideally I would like an option for it to occupy the full width, or at the very least be aligned to the left instead of center. I can anyway override it using custom CSS but just reporting in case there is consensus on aesthetics. [Screenshot 2025-06-02 at 10.21.01 PM] [Screenshot 2025-06-02 at 10.25.54 PM]