# 디자이너를 위한 Discourse 테마 시작 가이드
**URL:** https://meta.discourse.org/t/designers-guide-to-getting-started-with-themes-in-discourse/152002
**Category:** Developer Guides
**Tags:** tutorial, theme-guides
**Created:** [5월 26, 2020, 3:09오후 UTC](https://meta.discourse.org/t/designers-guide-to-getting-started-with-themes-in-discourse/152002 "2020-05-26T15:09:25Z")
**Posts on this page:** 1
**Showing post:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [5월 26, 2020, 3:09오후 UTC](https://meta.discourse.org/t/designers-guide-to-getting-started-with-themes-in-discourse/152002/1 "2020-05-26T15:09:25Z")
Discourse에서 직접 테마를 디자인하는 데 관심이 있으신가요? 올바른 주제를 찾았습니다 😄
이 가이드는 Discourse 테마 작업에서 SCSS/CSS 측면에 더 초점을 맞춥니다. JS/EmberJs/Handlebars에도 익숙하시다면, 이 가이드를 참고하여 더 깊이 들어갈 수 있습니다.
> [@Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/developer-s-guide-to-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…
Discourse에서 테마를 디자인하고 적용하는 제 개인적인 방법을 설명드리겠습니다. 대부분의 것과 마찬가지로, 자체 디자인을 구현하는 방법은 매우 많습니다. 테마를 만들 때 검사기(inspector) 도구를 적극적으로 활용하며, 이 게시물에서 몇 가지 방법을 보여드리겠습니다.
# 테마 작업 설정
계속하기 전에 [Discourse 테마 사용 입문가 가이드](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)와 [테마 구조…](https://meta.discourse.org/t/structure-of-themes-and-theme-components/60848)를 읽어보시기 바랍니다. 이 시점에서 깊은 지식은 필요하지 않지만, 시작하기 전에 이 글들을 통해 익숙해지는 것이 좋습니다.
Discourse에서 테마 작업을 가장 잘하기 위해, 다음과 같은 설정을 통해 가장 빠르고 효율적인 디자인 프로세스를 제공받을 수 있도록 권장합니다. 이 단계들을 통해 Discourse 사이트 관리자 패널에서 '저장’하고 새로고침할 필요 없이 변경 사항을 실시간으로 확인할 수 있습니다.
_관리자 권한으로 Discourse 포럼에 접근할 수 있다면, 관리자 콘솔을 사용하여 이 가이드를 따르는 것도 완전히 가능합니다._
- [Discourse Theme CLI](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950)를 설치하고, 이 도구가 무엇을 할 수 있는지 이해하기 위해 해당 주제를 읽어보세요.
- [https://discourse.theme-creator.io/](https://discourse.theme-creator.io/)에서 API 키를 가져오세요.
- Meta 계정으로 로그인
- 내 테마(My Themes) 클릭
- API 키(API Key) 클릭
- 팝업 모달에서 API 키 생성(Generate API Key)을 클릭하고 생성된 키를 복사하세요 (조금 후에 이 키를 사용할 것입니다)
## Discourse Theme CLI 실행
Discourse Theme CLI를 설치하고 API 키를 준비했으면, 선호하는 텍스트 에디터나 터미널 창을 열고 작업 디렉토리를 테마 폴더를 설정하고 싶은 위치로 변경하세요.
그 위치에서 다음 명령을 실행하고 `discourse_theme new your_theme_name` 프롬프트를 다음과 같이 채우세요:
1. **테마 이름을 어떻게 지을까요?** 테마 이름을 선택하세요
2. **이 테마를 감시(watch)하기를 원하나요?** 예(Yes)
3. **Discourse 사이트의 루트 URL은 무엇인가요?** `https://discourse.theme-creator.io/`
4. **이 사이트 이름을 어디에 저장할까요?** 예(Yes)
5. **API 키는 무엇인가요?** theme creator에서 가져온 API 키를 입력하세요
6. **이 API 키를 어디에 저장할까요?** 예(Yes)
7. 프롬프트가 나타나면 \*\*새 테마와 생성 및 동기화(Create and Sync with a new theme)\*\*를 선택하세요
8. 자식 테마 컴포넌트에 대한 프롬프트가 나타나면 \*\*아무것도 하지 않기(Do Nothing)\*\*를 선택하세요
모든 것이 올바르게 작동했다면, 이제 [https://discourse.theme-creator.io/](https://discourse.theme-creator.io/)의 `내 테마(My Themes)`로 이동하여 왼쪽 테마 목록에서 새 테마를 볼 수 있어야 합니다.
이 변경 사항을 실시간으로 보려면 테마 이름을 클릭한 다음, 정보 영역 하단에서 미리보기(Preview)를 클릭하세요.
Theme CLI는 이제 새로 생성된 디렉토리 내의 모든 변경 사항을 감시하며, 변경 사항이 있을 때마다 테마를 저장하고 theme-creator의 테마를 업데이트합니다.
# 첫 단계
Discourse Theme CLI는 이전에 실행한 명령에서 지정한 폴더 이름 안에 테마 스캐폴딩(scaffolding)을 생성했습니다. 사용하지 않을 많은 파일이 생성되므로, 다음 파일들을 제외하고는 모두 삭제하겠습니다:
`common/common.scss`
`desktop/desktop.scss`
`mobile/mobile.scss`
`about.json`
디렉토리 안에서 `rm -rf .git`를 실행하여 git 버전 추적을 제거하세요. 이 가이드에서는 필요하지 않습니다.
테마 디렉토리는 이제 다음과 같아야 합니다:
이 파일들에 추가하는 스타일은 각 사용 사례에 따라 렌더링된다는 점을 참고할 가치가 있습니다. `common.scss`의 스타일은 데스크톱 + 모바일에 적용되며, `desktop.scss`의 스타일은 데스크톱 브라우징에만, `mobile.scss`의 스타일은 모바일 뷰에만 적용됩니다.
## Hello World (색깔로)
Discourse는 스타일링에 `SCSS`를 사용하므로, 스타일을 최대한 활용하려면 [SASS](https://sass-lang.com/guide)에 익숙해지는 것이 좋습니다. 그렇지 않더라도 이 가이드를 따르는 데는 문제가 없습니다.
자, 이제 모두가 기다리던 것을 해볼 시간입니다… 테마 제작!
현재 `about.json`에는 정의된 color\_schemes가 없으므로, 다음 코드를 해당 섹션에 붙여넣고 저장하세요.
```json
{
"name": "my theme",
"about_url": null,
"license_url": null,
"assets": {},
"color_schemes": {
"Default": {
"primary": "222222",
"secondary": "ffffff",
"tertiary": "0088cc",
"quaternary": "e45735",
"header_background": "ffffff",
"header_primary": "333333",
"highlight": "ffff4d",
"danger": "e45735",
"success": "009900",
"love": "fa6c8d"
}
}
}
```
브라우저가 열려 있다면, 아무런 변경 사항이 적용된 것을 보지 못했을 것입니다. 이는 스킴이 없을 때 사용되는 기본 색상 스킴이기 때문입니다.
# 테마 개요
이 가이드에서 실제로 구현할 무언가를 갖기 위해, 이 색상 팔레트를 기반으로 한 간단한 테마를 만드는 과정을 안내해 드리겠습니다.
## 배경색 + 주요 텍스트 색상 변경
매우 간단한 것부터 시작해 보겠습니다. 현재 색상 스킴의 `"Secondary"` 값을 변경하겠습니다. `"secondary": "EEF4F7"`으로 변경해 보겠습니다 (이것은 배경색을 변경합니다). 또한 `"primary"` 값을 `"203243"`으로 변경해 보겠습니다.
단 한 줄로 포럼의 외관과 느낌을 이미 변경했습니다. 색상 스킴의 색상만 편집해도 많은 커스터마이징이 가능합니다.
## 색상 스킴 사용
다음의 모든 키는 `about.json` 파일에서 해당 색상 스킴 이름 아래에 정의됩니다. 이 설명들은 각 변수 이름의 주요 목적을 이해하는 데 도움이 되는 좋은 참고 자료입니다:
| Color | Description |
| --- | --- |
| **primary** | 대부분의 텍스트, 아이콘, 테두리 |
| **secondary** | 주요 배경색 및 일부 버튼의 텍스트 색상 |
| **tertiary** | 링크, 일부 버튼, 알림, 강조 색상 |
| **quaternary** | 내비게이션 링크 |
| **header\_background** | 사이트 헤더의 배경색 |
| **header\_primary** | 사이트 헤더의 텍스트와 아이콘 |
| **highlight** | 게시물 및 주제와 같은 페이지의 하이라이트된 요소의 배경색 |
| **danger** | 게시물 및 주제 삭제와 같은 작업에 대한 하이라이트 색상 |
| **success** | 작업이 성공했음을 나타내는 데 사용 |
| **love** | 좋아요 버튼의 색상 |
이 변수들은 다음과 같이 SCSS 파일 내에서 사용할 수 있습니다.
```scss
body {
background-color: var(--primary);
}
```
각 색상의 다른 버전도 사용하도록 생성됩니다. `var(--primary-medium)` 또는 `var(--primary-very-low)`와 같은 것들은 같은 색상의 다른 톤을 얻을 수 있습니다.
이와 일치하도록 “Default” 색상 스킴의 다른 색상들을 변경해 보겠습니다:
```json
"Default": {
"primary": "203243",
"secondary": "EEF4F7",
"tertiary": "416376",
"quaternary": "5E99B9",
"header_background": "FaFaFa",
"header_primary": "EEF4F7",
"highlight": "86BDDB",
"danger": "8F393E",
"success": "70DB82",
"love": "FC94CB"
}
```
> 🔦 theme creator에서 테마를 미리 보는 동안 스타일 가이드(Style Guide) 링크를 클릭하고 왼쪽 메뉴에서 Colors를 클릭하면 SCSS 파일에서 사용할 수 있는 모든 변수를 볼 수 있습니다.
>
> 스타일 가이드는 커스텀 테마를 만들 때 살펴볼 가치가 있는 매우 유용한 섹션입니다. 각 Atom은 Discourse의 특정 요소가 스타일이 적용된 상태에서 어떻게 보이는지 보여줍니다.
# 더 깊이 들어가기
이전 섹션을 바탕으로, 이제 SCSS만으로 Discourse에서 무엇을 할 수 있는지 조금 더 깊이 들어갈 때가 되었다고 생각합니다. (힌트: 매우 많습니다!)
### 헤더 스타일링
이전 색상 스킴 변경 사항으로 인해 헤더에서 아쉬운 부분이 남았을 것입니다. 아이콘이 거의 보이지 않습니다!
Discourse 헤더에는 사이트 로고와 오른쪽의 내비게이션 아이콘을 담기 위한 컨테이너(배경색 포함)가 포함되어 있습니다. 이 모든 것을 커스터마이징할 수 있습니다.
헤더를 커스터마이징하기 위한 대상 클래스는 `.d-header`입니다.
`common/common.scss` 파일에 다음을 추가해 보겠습니다:
```scss
.d-header {
box-shadow: none;
border-bottom: 1px solid var(--primary-low-mid);
height: 5em;
}
```
이것은 헤더의 기본 box-shadow를 제거하고, 높이를 조금 더 주며, 분리감을 주기 위해 border-bottom을 설정합니다.
아이콘의 경우 – `.d-header` SCSS 괄호 안에 다음 중첩 코드를 추가해 보겠습니다.
```scss
.d-header {
// ...이전 코드
.d-icon {
color: var(--primary-low-mid);
}
}
```
이것은 잘 보이지만, 세심한 관찰자는 헤더 높이가 증가하면서 Discourse 포럼의 나머지 요소들과 사이의 공간이 줄어든 것을 알아차릴 것입니다!
메인 영역과 헤더 사이의 간격은 #main-outlet 대상으로 제어됩니다. common/common.scss 파일 하단에 다음을 추가하여 이 간격을 약간 늘려 보겠습니다.
```scss
#main-outlet {
padding-top: 6.5em;
}
```
## 내비게이션 컨테이너
내비게이션 컨테이너에는 다음 구성 요소가 포함됩니다.
가장 왼쪽 영역은 카테고리/태그 필터 드롭다운이며, 그 다음 내비게이션 링크가 오고, New Topic 버튼으로 끝납니다.
### 카테고리 / 태그 드롭다운
이 영역에 몇 가지 변경 사항을 가해 보겠습니다. 이렇게 하려면 `common.scss` 파일에 다음을 추가하세요.
```scss
.navigation-container {
.select-kit.combo-box {
.select-kit-header {
border-radius: 0.9em;
background-color: var(--header_background);
}
}
}
```
여기서 `.select-kit-header`를 대상으로 하여 각각 동일한 border-radius와 더 밝은 배경색을 부여합니다.
이 중 하나를 클릭하면 드롭다운 메뉴가 열립니다.
현재 모서리가 날카로우므로, 이것들을 둥글게 하고 배경색을 헤더와 동일하게 변경하는 스타일을 추가해 보겠습니다.
```scss
.navigation-container {
.select-kit.combo-box {
// ...이전 코드
&.category-drop,
&.tag-drop {
.select-kit-body {
border-radius: 0.9em;
background-color: var(--header_background);
.select-kit-collection {
background-color: var(--header_background);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
}
}
}
}
```
이로 인해 다음과 같은 모습이 됩니다…
자세히 보면, 변경 사항으로 인해 검색 영역 오른쪽 상단에 작은 테두리가 보이는 것을 알 수 있습니다.
브라우저의 검사기를 살펴서 이것을 수정해 보겠습니다. 스타일을 올바르게 적용하기 위해 어떤 클래스/ID를 대상으로 해야 하는지 배우는 데 항상 매우 유용한 도구입니다.
드롭다운 메뉴가 보이는 상태에서 검색 영역을 마우스 오른쪽 버튼으로 클릭하여 브라우저에서 요소를 '검사(Inspect)'하세요.
이 입력 필드가 `select-kit-filter` 클래스를 가진 `div` 안에 위치해 있는 것을 볼 수 있습니다.
이 선택자에 적용되는 규칙을 살펴보면, 현재 상단과 하단 테두리 및 일부 패딩이 적용되어 있는 것을 볼 수 있습니다. 우리는 상단 테두리 스타일만 변경하려고 합니다.
이전에 `.select-kit-body` scss에 중첩하여 다음 코드를 추가하세요.
```scss
.select-kit.combo-box.category-drop,
.select-kit.combo-box.tag-drop {
.select-kit-body {
// ...이전 코드
.select-kit-filter {
border-top: 0px;
}
}
}
```
이로써 내비게이션 컨테이너를 스타일링하는 코드는 다음과 같아야 합니다.
```scss
.navigation-container {
// Category + Tag Drop Down
.select-kit.combo-box {
.select-kit-header {
border-radius: 0.9em;
background-color: var(--header_background);
}
&.category-drop,
&.tag-drop {
.select-kit-body {
border-radius: 0.9em;
background-color: var(--header_background);
.select-kit-collection {
background-color: var(--header_background);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.select-kit-filter {
border-top: 0px;
}
}
}
}
}
```
### 내비게이션 링크
이 내비게이션 링크가 다음과 유사해 보이도록 스타일을 추가해 보겠습니다:
여기서 무엇을 대상으로 해야 하는지 발견하기 위해 다시 검사기를 사용하겠습니다.
내비게이션 요소들이 `"nav nav-pills ..."` 클래스를 가진 UL 안에 있는 것을 볼 수 있습니다.
`common.scss` 파일로 돌아가서, 이전 섹션 아래에 있지만 여전히 `navigation-container` 안에 중첩된 상태로 다음을 추가해 보겠습니다:
```scss
.nav-pills {
& > li a {
&.active {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--tertiary);
}
}
}
```
이 변경 사항은 `nav-pills`의 자식인 active 클래스를 가진 링크만 대상으로 합니다. 이 변경 사항으로 활성 링크가 다음과 같이 보일 것입니다:
이것은 괜찮지만, 하단 테두리가 텍스트 길이만큼만 확장되기를 원합니다. 이렇게 하려면 `&.active {` 라인 위에 다음을 추가하세요. 이것은 내비게이션 `` 태그 안의 모든 A 링크에 영향을 미칩니다.
```scss
// ...다른 코드
.nav-pills {
& > li a {
padding: 0;
margin-right: 20px;
color: var(--tertiary-high);
border-bottom: 4px solid transparent;
&.active {
// ...더 많은 코드
}
}
}
```
이제 “hover” 효과를 “active” 효과와 동일하게 스타일링해야 합니다.
이전의 `&.active` 아래에 다음을 추가하세요
```scss
&:hover {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--primary);
}
```
따라서 모든 내비게이션 코드는 이제 다음과 같아야 합니다:
```scss
// Nav Pills
.nav-pills {
& > li a {
padding: 0;
margin-right: 20px;
color: var(--tertiary-high);
border-bottom: 4px solid transparent;
&.active {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--tertiary);
}
&:hover {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--primary);
}
}
}
```
### 버튼
Discourse의 버튼은 다양한 모양과 크기가 있습니다. 스타일 가이드의 Buttons 섹션에서 다양한 버튼을 볼 수 있습니다.
이 테마의 대부분의 버튼을 둥글고 커스텀 스타일링이 적용되도록 변경하고 싶습니다. 이것은 + New Topic 버튼뿐만 아니라 사이트 전반의 다른 버튼들도 변경합니다.
`common.scss` 파일 하단에 다음을 추가해 보겠습니다:
```scss
.btn {
background-color: var(--header_background);
color: var(--primary);
border-radius: 1.2em;
border: 1px solid var(--primary-low-mid);
.d-icon {
color: var(--primary);
}
&:hover {
background-color: var(--quaternary-low);
color: var(--primary);
.d-icon {
color: var(--primary);
}
}
&.btn-default,
&.btn-primary {
padding: 10px 12px;
}
}
```
이로써 버튼이 다음과 같이 보일 것입니다:
버튼이 스타일링되었으므로, 버튼 스타일링과 모든 디자인을 테스트하는 것이 왜 중요한지에 대해 언급하고 싶습니다.
사이트 미리보기에서 Topic으로 이동한 다음, 주제 답글의 reply 버튼이나 주제 스트림 하단의 답글 버튼을 눌러보세요. 버튼 스타일링이 의도하지 않았을 수 있는 일부 요소에 영향을 미친 것을 볼 수 있습니다.
이 텍스트 편집 버튼들이 이전 스타일링에 영향을 받지 않기를 원합니다. 이것은 조금 더 복잡한 SASS/CSS가 필요하지만, 코드가 `:not()`을 사용하여 이 버튼들에 영향을 주지 않도록 할 수 있습니다. 😉
현재 `.btn` 대상 앞에 이 코드 라인을 추가해 보겠습니다. 이것은 스타일이 `.d-editor-button-bar`의 자식이 아닌 버튼에만 적용되도록 지시합니다.
```scss
:not(.d-editor-button-bar) > .btn
```
좋았네요… 하지만 잠깐! 이제 이상한 반항아 하나가 자기 멋대로 하고 있습니다.
브라우저에서 이것을 검사해 보면, 이 버튼이 .select-kit-header 클래스를 가지고 있다는 것을 알 수 있습니다. 이 기어를 클릭하면 더 많은 옵션이 표시되기 때문입니다.
> 🔦 Discourse 테마를 만들 때 브라우저의 검사기 도구를 사용하는 것이 얼마나 중요한지 강조해도 부족합니다. 이 여정에서 당신의 가장 좋은 친구가 될 것입니다.
이제 이 버튼은 _원하지 않는_ 대상임이 분명하므로, 코드에 더 많은 `:not()` 기능을 추가해 보겠습니다.
```scss
:not(.d-editor-button-bar) >
.btn:not(.single-select-header)
```
이것은 `.d-editor-button-bar`의 자식이 아니고 `.single-select-header` 클래스를 가지지 않는 모든 버튼을 선택합니다. 이것은 조금 혼란스러울 수 있지만, Discourse 내부에는 많은 움직이는 부품들이 있으므로 때로는 요소에 올바르게 영향을 주기 위해 스타일링이 매우 구체적이어야 합니다.
또한 현재 스타일링이 모달 닫기 버튼을 어색하게 영향을 미치는 것도 발견했습니다. 모달을 여는 것을 클릭하면 이것을 볼 수 있거나, 더 쉽게 스타일 가이드의 모달 섹션으로 이동할 수도 있습니다.
이것을 수정하기 위해 코드에 또 다른 대상을 추가하겠습니다.
```scss
:not(.d-editor-button-bar) >
.btn:not(.single-select-header):not(.modal-close)
```
### 계속하기…
코드의 영향을 받지 않은 것 같은 버튼이 하나 더 보입니다. 그것은 주제 게시물 스트림의 가장 아래에 있는 `Tracking` 버튼입니다.
현재 `.btn` 코드 뒤에 쉼표 다음에 다음 라인을 추가하겠습니다.
```scss
:not(.d-editor-button-bar) >
.btn:not(.single-select-header):not(.modal-close),
.topic-notifications-button > .select-kit > .btn
```
이것은 이 섹션에 나타나는 버튼을 올바르게 대상으로 하며, 지금은 포럼의 상단 영역 스타일링을 마친 것입니다.
> 🔦 자신의 css에서 모든 매개변수를 조정해 보세요. 이 스타일들을 더 많이 실험하고 html에 어떻게 영향을 미치는지 보고 배우는 것이 많을수록 더 많이 배울 수 있습니다!
# 여기서부터 어디로 갈 것인가
이 가이드는 Discourse에서 자체 테마를 커스터마이징하는 방법에 대한 표면적인 내용을 다루고자 했습니다. 이제 앱의 영역을 자체 커스터마이징을 위해 대상으로 지정하는 방법에 대해 더 많은 통찰력을 갖게 되셨기를 바랍니다.
**기억하세요** SCSS만 사용하여도 많은 것을 커스터마이징할 수 있습니다. 개발을 더 깊이 하고 싶다면, 이 게시물 상단에 링크된 글들을 읽는 것을 권장합니다.
질문이 있으시면 편하게 물어봐 주시고, 기꺼이 도움을 드리거나 올바른 방향으로 안내해 드리겠습니다.
* * *
이 문서는 버전 관리됩니다 - 변경 사항을 [github](https://github.com/discourse/discourse/blob/main/docs/developer-guides/docs/05-themes-components/03-designers-guide.md)에서 제안하십시오.
---
_[View the full topic](https://meta.discourse.org/t/designers-guide-to-getting-started-with-themes-in-discourse/152002)._