# 왜 Discourse 커스터마이징이 이렇게 어려운가요?

**URL:** https://meta.discourse.org/t/why-am-i-finding-discourse-so-difficult-to-customize/303671
**Category:** Development
**Created:** [4월 13, 2024, 1:51오후 UTC](https://meta.discourse.org/t/why-am-i-finding-discourse-so-difficult-to-customize/303671 "2024-04-13T13:51:37Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![P\_O](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/p_o/32/343333_2.png) [@P\_O](https://meta.discourse.org/u/P_O)
#### Post date: [4월 13, 2024, 1:51오후 UTC](https://meta.discourse.org/t/why-am-i-finding-discourse-so-difficult-to-customize/303671/1 "2024-04-13T13:51:37Z")

</div>

CSS를 편집하려면 컴포넌트를 생성하고 CSS 파일을 만들어야 하며, 그렇게 하면 제대로 동작합니다. 하지만 예를 들어 'Discourse Topic Cards’와 같은 다른 컴포넌트를 추가한 뒤, 커스텀 CSS 파일로 돌아가서 변경 사항을 적용하고 저장을 클릭한 다음 페이지를 새로고침하면 커스텀 CSS가 적용되지 않습니다.

또한, 관리자 영역에서 템플릿을 편집할 수 있는 방법이 왜 없는지 궁금합니다. ‘Discourse Topic Cards’ 템플릿을 편집하려면 discourse 도커에 ssh로 접속하여 변경 사항을 적용해야 하는 것인가요?

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [4월 13, 2024, 1:58오후 UTC](https://meta.discourse.org/t/why-am-i-finding-discourse-so-difficult-to-customize/303671/2 "2024-04-13T13:58:36Z")

</div>

워드프레스가 더 익숙하신가요? 그렇다면 이해하기가 더 쉬울 겁니다. 업데이트 시 모든 수정 사항이 사라지기 때문에 코어, 플러그인, 테마를 직접 편집하지 않는다는 점 때문이죠.

그래서 이러한 어려움의 상당수는 실제로는 디스커스에서 비롯된 것이 아니라, 세상이 어떻게 작동하는지와 관련이 있습니다 😏

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [4월 13, 2024, 2:43오후 UTC](https://meta.discourse.org/t/why-am-i-finding-discourse-so-difficult-to-customize/303671/3 "2024-04-13T14:43:17Z")

</div>

> [@P\_O](#):
>
> 변경 사항을 적용하고 저장을 클릭한 후 페이지를 새로고침해도 사용자 정의 CSS가 적용되지 않습니다.

다른 곳에서 정의된 규칙보다 우선순위를 갖도록 CSS에 `!important`를 추가해야 할 수도 있습니다. 여러 컴포넌트가 특정 순서로 로드되는 경우 이러한 상황이 발생하면 자연스러운 일입니다. 이는 일반적인 문제이며, 반드시 Discourse에만 국한된 문제는 아닙니다. "_해당 컴포넌트가 마지막에 로드되어야 한다_"는 식의 가중치 시스템을 도입할 수 있을지 확신은 없지만, 그렇게 하면 관리하기가 매우 어려울 것입니다.

따라서 테마 및 테마 컴포넌트에서는 절대적으로 필요한 경우가 아니라면 CSS에 `!important`를 사용하지 않는 것이 중요합니다.

> [@P\_O](#):
>
> ‘Discourse Topic Cards’ 템플릿을 편집하고 싶다면

원격 테마 컴포넌트를 편집하려면 GitHub에서 포크를 생성하고 나만의 버전을 만들어 보는 것이 가장 쉬운 방법입니다. 단, 원래 버전의 업데이트를 받을 수 없습니다. 원격 컴포넌트를 직접 편집할 수 없는 이유는 사용자 정의가 업데이트와 충돌할 수 있기 때문이며(이를 관리하는 것은 악몽과도 같습니다).

> [@P\_O](#):
>
> 관리자 영역에서 템플릿을 편집할 수 있는 방법이 왜 없나요?

Discourse를 사용자 정의하는 것은 비교적 접근성이 좋습니다. 다만, 어떤 수준의 사용자 정의를 기대하느냐에 따라 달라집니다. 여기서 무엇을 이루고자 하시는 건가요? 도움이 될 수 있을지도 모릅니다. Discourse 팀은 특정 영역에 사용자 정의 기능이 도입될 수 있다면 일반적으로 개방적인 태도를 가지고 있습니다.

---

<div class="post-metadata">

### Author: ![P\_O](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/p_o/32/343333_2.png) [@P\_O](https://meta.discourse.org/u/P_O)
#### Post date: [4월 13, 2024, 3:17오후 UTC](https://meta.discourse.org/t/why-am-i-finding-discourse-so-difficult-to-customize/303671/4 "2024-04-13T15:17:18Z")

</div>

수년간 웹사이트를 운영해 온 경험으로, 조금 더 독특한 것을 만들면 성과가 더 좋다고 생각합니다. ‘Discourse Cards Topic’ 템플릿을 커스터마이징하여 일반 토픽 목록에서 포스터, 답변, 조회 수, 활동 통계를 포함하고 싶습니다.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [4월 13, 2024, 3:51오후 UTC](https://meta.discourse.org/t/why-am-i-finding-discourse-so-difficult-to-customize/303671/5 "2024-04-13T15:51:31Z")

</div>

> [@P\_O](#):
>
> ‘Discourse Cards Topic’ 템플릿을 사용자 지정하여 일반 토픽 목록에서 포스터, 답변, 조회 수 및 활동 통계를 포함하고 싶습니다.

실현 가능한 방법:

- 기능 요청 (본인처럼 해당 토픽에서 요청)
- 가능하다면 #Marketplace 채널에 게시
- 코딩 방법 및 테마 컴포넌트 작동 원리 배우기 (#documentation:theme-developers 참고) 및 도움이 필요하면 주저하지 말고 #Development 채널에 질문하기

---

<div class="post-metadata">

### Author: ![P\_O](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/p_o/32/343333_2.png) [@P\_O](https://meta.discourse.org/u/P_O)
#### Post date: [4월 13, 2024, 7:05오후 UTC](https://meta.discourse.org/t/why-am-i-finding-discourse-so-difficult-to-customize/303671/6 "2024-04-13T19:05:24Z")

</div>

개발자를 위한 문서가 있나요?

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [4월 13, 2024, 7:21오후 UTC](https://meta.discourse.org/t/why-am-i-finding-discourse-so-difficult-to-customize/303671/7 "2024-04-13T19:21:08Z")

</div>

Discourse를 익히는 데 도움이 될 수 있는 몇 가지 자료를 소개합니다:

> [@Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966):
>
> This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Let’s start with themes. Themes In general, themes are not supposed to be compatible …

> [@Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/beginners-guide-to-developing-discourse-themes/93648):
>
> Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components. This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to: Themes vs. Theme Compon…

> [@테마 개발자 빠른 참고 가이드](https://meta.discourse.org/t/theme-developer-quick-reference-guide/110448):
>
> As themes grow more powerful, there’s more to remember about how they work. We have loads of detailed documentation under [#theme-guides](https://meta.discourse.org/tag/theme-guides), but if you just need something to jog your memory, this guide may help. General Resources [scroll Beginner’s guide](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)[scroll Designer’s guide](https://meta.discourse.org/t/designers-guide-to-discourse-themes/152002/1)[scroll Developer’s guide](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648)[paintbrush Theme Creator](http://theme-creator.discourse.org)[desktop_computer Theme CLI](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950)[notebook_with_decorative_cover Theme Directory](https://meta.discourse.org/c/customization/theme/61/none)[jigsaw Component Directory](https://meta.discourse.org/c/customization/theme-component/120)[wrench Theme Modifiers](https://meta.discourse.org/t/theme-modifiers-a-brief-introduction/150605)[wrench Themeable site se…](https://meta.discourse.org/t/-/374376)

읽는 데 시간을 충분히 투자하세요. 일부 가이드에는 외부 가이드에 대한 링크도 포함되어 있습니다.

질문이 있다면 #Development 채널에서 질문해 주세요. 👍

---

<div class="post-metadata">

### Author: ![traceymoko](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/traceymoko/32/483235_2.png) [@traceymoko](https://meta.discourse.org/u/traceymoko)
#### Post date: [4월 14, 2024, 7:01오전 UTC](https://meta.discourse.org/t/why-am-i-finding-discourse-so-difficult-to-customize/303671/8 "2024-04-14T07:01:11Z")

</div>

> [@P\_O](#):
>
> 이제 예를 들어 ‘Discourse Topic Cards’와 같은 다른 컴포넌트를 추가한 후 커스텀 CSS 파일로 돌아가서 변경 사항을 적용하고 저장한 뒤 페이지를 새로고침하면, 커스텀 CSS가 적용되지 않습니다.

> [@P\_O](#):
>
> ‘Discourse Topic Cards’ 템플릿을 편집하려면 discourse docker에 ssh로 접속하여 변경 사항을 만들기 위해 무엇을 편집해야 하나요?

Discourse Topic Cards 테마 컴포넌트 위에 변경 사항을 추가하려면 다음과 같이 수행할 수 있습니다:

1. Discourse Topic Cards를 설치하고 활성 테마에 추가합니다.
2. 새로운 테마 컴포넌트를 만듭니다.
3. 이 새로운 테마 컴포넌트도 활성 테마에 추가합니다.

서버에 ssh로 접속하거나 소스 코드를 변경하거나 레포지토리를 포크할 필요가 없습니다.

예를 들어, Minima 테마를 위해 Discourse Topic Cards에 몇 가지 변경 사항을 가하기 위해 제가 수행한 작업은 다음과 같습니다:

> [@traceymoko](#):
>
> ## 설명
> 
> 1. [Discourse Minima](https://meta.discourse.org/t/minima-a-minimal-theme-for-discourse/108178)를 설치합니다.
> 2. [Discourse Topic Cards](https://meta.discourse.org/t/discourse-topic-cards/296048)를 설치하고 Discourse Minima의 테마 컴포넌트로 추가합니다.
> 3. 이 테마 컴포넌트를 설치하고 Discourse Minima의 테마 컴포넌트로 추가합니다.

이렇게 하면 테마의 새 업데이트를 계속 받을 수 있으며, 모든 테마 컴포넌트가 정리되고 분리되어 있습니다(디버깅을 위해 쉽게 비활성화/활성화할 수 있음).

하지만 이 과정이 관리자분들에게 조금 더 잘 설명되어야 한다고 생각합니다.
