# 커뮤니티 - 그룹 테마 변경하기

커뮤니티 테마를 통해 그룹 인터페이스의 모양을 원하는 대로 맞춤 설정할 수 있어요. 라이트 모드와 다크 모드 모두에서 테마를 조정할 수 있으며, 미리 정의된 테마 중에서 선택하거나 직접 커스텀 테마를 만들 수도 있습니다.

이 글에서 다룰 내용:

* [테마 설정 접근하기](#테마-설정-접근하기)
* [새 테마 선택하기](#새-테마-선택하기)
* [커스텀 테마 만들기](#커스텀-테마-만들기)

***

## 관리자/소유자 화면: 테마 설정 접근하기

먼저 Labs에서 기능을 켜야 합니다.

테마 설정을 변경하려면:

* 설정 열기: 커뮤니티 그룹 안에서 우측 사이드바를 클릭하고 하단의 "SETTINGS"를 클릭하세요.
* 테마로 이동: 사이드바에서 "Themes"를 선택하세요.

## 새 테마 선택하기

여러 그룹을 사용하는 경우, 각각 다른 테마를 선택해서 구분하기 쉽게 만들어보세요. 새 테마는 브라우저에서 바로 적용됩니다.

* **라이트 또는 다크 모드:**

Themes 섹션에서 상단의 버튼을 사용해서 라이트 모드와 다크 모드를 전환할 수 있습니다.

* **미리 정의된 테마 선택:**

Communities theme 탭을 선택하고 사용 가능한 테마 목록을 스크롤하세요. 테마를 클릭하면 미리보기를 볼 수 있습니다. 마음에 드는 테마를 찾으면 커뮤니티 인터페이스에 자동으로 적용됩니다.

참고: 테마는 웹에서만 반영되며 모바일에서는 적용되지 않습니다.

![커뮤니티 테마 선택](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026371615/original/CFh0CNY45tJ8kczPAOIrFsRDRUUUjeZKFw.gif?1716305058)

## 커스텀 테마 만들기

그룹 소유자/관리자는 "Custom Themes" 탭에서 그룹 인터페이스의 다양한 구성 요소를 맞춤 설정할 수 있습니다. 라이트 모드와 다크 모드 각각에 대해 관리자가 별도로 맞춤 설정하고 저장해야 합니다.

사용 가능한 맞춤 설정 옵션 목록을 스크롤하세요:

| 옵션                 | 그룹에서 변경되는 부분           |
| ------------------ | ---------------------- |
| Sidebar Background | 상단 바가 포함된 사이드바의 배경색    |
| Primary            | 버튼 색상                  |
| Background         | 표면 요소와 모달              |
| Tertiary           | 링크와 선택 요소(라디오 버튼/체크박스) |
| Surface            | 인터페이스의 기본              |
| Primary Font       | 메인 콘텐츠                 |
| Secondary Font     | 선택된 콘텐츠                |
| Fill colour        | 채우기 색상                 |
| Hover colour       | 호버 색상                  |
| Borders            | 모든 테두리                 |
| Error              | 상호작용 오류                |

색상 견본을 클릭해서 색상 선택기를 열거나 16진수 코드를 직접 입력하세요.

![커스텀 테마 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026372475/original/h7U0Niz24s5YPfqSqg5fyiRIwoPPoc12MQ.gif?1716305651)

모든 변경사항이 반영되도록 SAVE를 클릭하는 것을 잊지 마세요.

![저장 버튼](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026549271/original/9WQVbGzzIbNcNDi6mXXN-e1K2LgNZgLNlA.png?1716551522)

## 맞춤 설정 후 그룹 화면:

![그룹 화면 1](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026563361/original/XV24fez1NkZjoq7zC73CGV26Crr8FUC8_A.png?1716563889)

![그룹 화면 2](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026563373/original/5MOX0PY81J9k5K3nJ6DvvdF2urc10zdwVA.png?1716563913)

![그룹 화면 3](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026563393/original/hpeIBONaM53qtPZRpnIcXMp_Wg09pqLPfA.png?1716563950)

![그룹 화면 4](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026563405/original/groO5vMbDNCFZhkvVeejeLnvqzJLD2wgOA.png?1716563967)

![그룹 화면 5](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026563439/original/39tWXudI6LhQ3WqOlIXMfzd9KOU0oUrNNA.png?1716564006)

***

## 멤버 화면:

그룹 멤버들은 관리자가 맞춤 설정하거나 선택한 테마를 보게 됩니다. 또한 설정에서 라이트 모드나 다크 모드 간에 전환할 수 있어요.

![멤버 화면](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026481389/original/vl4U1OUENVXb26Y-E2oq7LpbdU789Wd6Lw.png?1716460941)

***

*원문 최종 수정: Thu, 25 Jul, 2024 at 3:52 PM* *Hyperclass 사용 가이드 — hyperclass.ai*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hyperclass.gitbook.io/hyperclass-docs/and-memberships/how-to-use-community-tagging-feature/communities-change-your-group-theme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
