Discourse에서 직접 테마를 디자인하는 데 관심이 있으시군요? 딱 맞는 주제에 오셨습니다 
이 가이드는 Discourse 테마 작업에서 SCSS/CSS 측면에 더 초점을 맞춥니다. JS/EmberJs/Handlebars에 대해서도 잘 아신다면, 이 가이드를 참고하여 더 깊이 들어갈 수 있습니다.
저는 Discourse에서 디자인과 테마를 만드는 제 개인적인 방법을 설명해 드리겠습니다. 대부분의 경우와 마찬가지로, 자신의 디자인을 구현하는 방법은 매우 많습니다. 테마를 만들 때 검사기(inspector) 도구를 많이 활용하는 것을 즐기며, 이 게시물에서 제가 어떻게 하는지 몇 가지 보여드리겠습니다.
테마 작업 설정하기
계속하기 전에 Discourse 테마 사용 입문가 가이드와 테마의 구조…를 읽어보시기 바랍니다. 이 시점에서 깊은 지식은 필요하지 않지만, 시작하기 전에 이 글들이 조금 더 익숙해지도록 도와줄 것입니다.
Discourse에서 테마 작업을 가장 잘 하려면, 가장 빠르고 원활한 디자인 프로세스를 위해 다음을 설정하는 것을 권장합니다. 이 단계를 거치면 Discourse 사이트 관리 패널에서 '저장’하고 새로고침할 필요 없이 변경 사항을 즉시 확인할 수 있습니다.
관리자 권한이 있는 Discourse 포럼에 접근할 수 있다면, 관리자 콘솔을 사용하여 이 가이드를 진행하는 것도 완전히 가능합니다.
- Discourse Theme CLI을 설치하고, 이것이 무엇을 할 수 있는지 이해하기 위해 해당 주제를 읽어보세요.
- https://discourse.theme-creator.io/에서 API 키를 가져옵니다.
- Meta 계정으로 로그인합니다.
- My Themes를 클릭합니다.
- API Key를 클릭합니다.
- 팝업 모달에서 Generate API Key를 클릭하고 생성된 키를 복사합니다(잠시 후에 이 키를 사용할 것입니다).
Discourse Theme CLI 실행
Discourse Theme CLI를 설치하고 API 키가 준비되면, 선호하는 텍스트 편집기나 터미널 창을 열고 작업 디렉토리를 테마 폴더를 설정하려는 위치로 변경하세요.
그곳에서 다음 명령 discourse_theme new your_theme_name을 실행하고 프롬프트를 다음과 같이 채웁니다:
-
테마 이름을 어떻게 하고 싶으신가요? 테마 이름을 선택합니다.
-
이 테마를 감시(watch)를 시작하시겠습니까? 예(Yes)
-
Discourse 사이트의 루트 URL은 무엇인가요?
https://discourse.theme-creator.io/ -
이 사이트 이름을 어디에 저장하시겠습니까? 예(Yes)
-
API 키는 무엇인가요? theme creator에서 가져온 API 키를 입력합니다.
-
이 API 키를 어디에 저장하시겠습니까? 예(Yes)
-
프롬프트가 표시되면 Create and Sync with a new theme를 선택합니다.
-
자식 테마 컴포넌트에 대한 프롬프트가 표시되면 Do Nothing을 선택합니다.
모든 것이 정상적으로 작동했다면, 이제 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에 익숙해지는 것이 좋습니다. 그렇지 않더라도 이 가이드를 따라갈 수 있습니다.
자, 이제 우리가 모두 기다려온 것에 들어갈 차례입니다… 테마링(THEMING)!
현재 about.json에는 정의된 color_schemes가 없으므로, 다음 코드를 해당 섹션에 붙여넣고 저장하세요.
{
"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 파일 내에서 사용할 수 있습니다.
body {
background-color: var(--primary);
}
각 색상의 다른 버전도 사용할 수 있도록 생성됩니다. var(--primary-medium) 또는 var(--primary-very-low) 같은 것들은 같은 색상의 다른 톤을 얻는 데 사용할 수 있습니다.
“Default” 색상 스킴의 다른 색상들도 이것과 일치하도록 변경해 보겠습니다:
"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 파일에서 사용할 수 있는 모든 가용 변수를 볼 수 있습니다.
Styleguide는 커스텀 테마를 만들 때 살펴볼 가치가 있는 매우 유용한 섹션입니다. 각 Atom은 Discourse의 특정 요소가 스타일을 적용했을 때 어떻게 보일지 보여줍니다.
더 깊이 들어가기
이전 섹션을 다뤘으니, 이제 SCSS만으로 Discourse에서 무엇을 할 수 있는지에 대해 조금 더 깊이 들어갈 때라고 생각합니다. (힌트: 아주 많죠!)
헤더 스타일링
이전 색상 스킴 변경 사항으로 인해 헤더에서 아쉬운 부분이 남았음을 알 수 있습니다. 아이콘이 거의 보이지 않습니다!
Discourse 헤더에는 사이트 로고와 오른쪽의 내비게이션 아이콘을 담기 위한 컨테이너(배경색 포함)가 포함되어 있습니다. 이 모든 것을 커스터마이즈할 수 있습니다.
헤더를 커스터마이즈할 대상 클래스는 .d-header입니다.
common/common.scss 파일에 다음을 추가해 보겠습니다:
.d-header {
box-shadow: none;
border-bottom: 1px solid var(--primary-low-mid);
height: 5em;
}
이것은 헤더의 기본 box-shadow를 제거하고 높이를 조금 더 주며, 분리감을 주기 위해 border-bottom을 설정합니다.
아이콘의 경우 – .d-header SCSS 괄호 안에 다음 중첩 코드를 추가해 보겠습니다.
.d-header {
// ...이전 코드
.d-icon {
color: var(--primary-low-mid);
}
}
이것은 좋아 보이지만, 예리한 눈은 헤더 높이가 증가하면서 Discourse 포럼 요소들과 사이의 공간이 줄어든 것을 알아차릴 것입니다!
주 영역과 헤더 사이의 간격은 #main-outlet 대상에 의해 제어됩니다. common/common.scss 파일 하단에 다음을 추가하여 이 간격을 조금만 늘려 보겠습니다.
#main-outlet {
padding-top: 6.5em;
}
내비게이션 컨테이너
내비게이션 컨테이너에는 다음 구성 요소가 포함되어 있습니다.
가장 왼쪽 영역은 카테고리/태그 필터 드롭다운이며, 그 뒤를 내비게이션 링크가 따르고, New Topic 버튼으로 끝납니다.
카테고리 / 태그 드롭다운
이 영역에 몇 가지 변경을 해보겠습니다. 이를 위해 common.scss 파일에 다음을 추가하세요.
.navigation-container {
.select-kit.combo-box {
.select-kit-header {
border-radius: 0.9em;
background-color: var(--header_background);
}
}
}
여기서 .select-kit-header를 대상으로 하여 각각 동일한 border-radius와 더 밝은 배경색을 부여합니다.
이 중 하나를 클릭하면 드롭다운 메뉴가 열립니다.
현재 이 메뉴도 모서리가 날카롭기 때문에, 모서리를 둥글게 하고 배경색을 헤더와 동일하게 변경하는 스타일을 추가해 보겠습니다.
.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 안에 위치해 있는 것을 볼 수 있습니다.
이 선택자에 적용되는 규칙을 보면, 현재 상단과 하단 테두리 및 일부 패딩이 적용되어 있는 것을 알 수 있습니다. 우리는 border-top 스타일만 변경하고 싶습니다.
이전에 .select-kit-body scss 안에 중첩하여 다음 코드를 추가하세요.
.select-kit.combo-box.category-drop,
.select-kit.combo-box.tag-drop {
.select-kit-body {
// ...이전 코드
.select-kit-filter {
border-top: 0px;
}
}
}
이로써 내비게이션 컨테이너를 스타일링하기 위한 우리의 코드는 다음과 같아야 합니다.
.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 안에 중첩된 상태로 다음을 추가해 보겠습니다:
.nav-pills {
& > li a {
&.active {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--tertiary);
}
}
}
이 변경 사항은 nav-pills의 자식인 active 클래스를 가진 링크만 대상으로 합니다. 이 변경 사항은 활성 링크가 다음과 같이 보이도록 해야 합니다:
이것은 괜찮지만, 하단 테두리가 텍스트만큼만 확장되기를 원합니다. 이를 위해 &.active { 줄 위에 다음을 추가하겠습니다. 이것은 내비게이션 <li> 태그 안의 모든 A 링크에 영향을 미칩니다.
// ...다른 코드
.nav-pills {
& > li a {
padding: 0;
margin-right: 20px;
color: var(--tertiary-high);
border-bottom: 4px solid transparent;
&.active {
// ...더 많은 코드
}
}
}
이제 “hover” 효과를 “active” 효과와 동일하게 스타일링해야 합니다.
이전의 &.active 아래에 다음을 추가하세요
&:hover {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--primary);
}
따라서 우리의 모든 내비게이션 코드는 이제 다음과 같아야 합니다:
// 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의 버튼은 다양한 모양과 크기를 가지고 있습니다. Style Guide의 Buttons 섹션에서 그 종류를 볼 수 있습니다.
이 테마의 대부분의 버튼을 둥글게 하고 일부 커스텀 스타일을 적용하고 싶습니다. 이것은 + New Topic 버튼뿐만 아니라 사이트 전반의 다른 버튼들도 변경합니다.
common.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의 자식이 아닌 버튼에만 적용되도록 지시합니다.
:not(.d-editor-button-bar) > .btn
좋아요, 잘 작동했습니다… 하지만 잠깐! 이제 이상한 반항아가 자기 마음대로 하고 있습니다.
브라우저에서 이 요소를 검사해 보면, 이 버튼은 이 기어를 클릭하면 더 많은 옵션이 표시되므로 .select-kit-header 클래스를 가지고 있음을 알 수 있습니다.
이제 이 버튼은 원하지 않는다는 것을 알았으니, 코드에 더 많은 :not() 기능을 추가해 보겠습니다.
:not(.d-editor-button-bar) >
.btn:not(.single-select-header)
이것은 .d-editor-button-bar의 자식이 아니고 .single-select-header 클래스를 가지고 있지 않은 모든 버튼을 선택합니다. 이것은 조금 혼란스러울 수 있지만, Discourse 내부에는 많은 이동 부품이 있기 때문에 스타일링이 요소를 올바르게 영향받게 하려면 매우 구체적이어야 하는 경우가 있습니다.
또한 현재 스타일링이 모달 닫기 버튼을 어색하게 영향받는 것도 알아차렸습니다. 모달을 여는 것을 클릭하면 이를 볼 수 있거나, 더 쉽게 Style Guide의 모달 섹션으로 이동할 수 있습니다.
이를 수정하기 위해 코드에 또 다른 대상을 추가하겠습니다.
:not(.d-editor-button-bar) >
.btn:not(.single-select-header):not(.modal-close)
계속하기…
코드의 영향을 받지 않은 것으로 보이는 버튼이 하나 더 보입니다. 그것은 주제 게시물 스트림의 가장 하단에 있는 Tracking 버튼입니다.
현재 .btn 코드에 쉼표 뒤에 다음 줄을 추가하겠습니다.
:not(.d-editor-button-bar) >
.btn:not(.single-select-header):not(.modal-close),
.topic-notifications-button > .select-kit > .btn
이것은 이 섹션에 나타나는 버튼을 올바르게 대상으로 하며, 이제 포럼의 상단 영역 스타일링은 완료되었습니다.
다음으로 어디로 갈 것인가
이 가이드는 Discourse에서 자신의 테마를 커스터마이즈하는 방법에 대한 표면을 긁어보는 것을 의도했습니다. 이제 앱의 영역을 자신의 커스터마이징을 위해 어떻게 대상으로 삼을지에 대해 더 많은 통찰력을 가졌기를 바랍니다.
기억하세요 SCSS만 사용하여도 많은 것을 커스터마이즈할 수 있습니다. 개발을 더 깊이 진행하기를 원하신다면, 이 게시물 상단에 링크된 기사를 읽으시는 것을 권장합니다.
질문이 있으시면 자유롭게 물어봐 주십시오. 기꺼이 도와드리거나 올바른 방향으로 안내해 드리겠습니다.
이 문서는 버전 관리됩니다 - 변경 사항을 github에서 제안하십시오.