# 커뮤니티 - 그룹에 커스텀 CSS/JS 추가하는 방법

커뮤니티 **그룹**에 커스텀 CSS와 JavaScript를 추가하여 브랜딩, 레이아웃, 상호작용 기능을 세밀하게 조정할 수 있습니다. 이 가이드에서는 고유한 CSS나 JavaScript를 추가할 수 있는 위치를 보여드립니다.

참고: HighLevel은 커스텀 코드(작성, 디버깅, 유지보수 포함)에 대한 가이드, 권장사항, 지원을 제공하지 않습니다.

## 목차

* [그룹에 커스텀 CSS/JS 추가란?](#그룹에-커스텀-cssjs-추가란)
* [커스텀 CSS/JS 추가의 주요 이점](#커스텀-cssjs-추가의-주요-이점)
* [그룹에 커스텀 CSS/JS를 추가하는 방법](#그룹에-커스텀-cssjs를-추가하는-방법)
* [자주 묻는 질문](#자주-묻는-질문)

***

## 그룹에 커스텀 CSS/JS 추가란?

**그룹 레벨**에서 커스텀 CSS와 JavaScript를 추가하면 커뮤니티의 다른 부분을 변경하지 않고도 해당 그룹의 모양과 동작 방식을 변경할 수 있습니다. 코드를 직접 붙여넣고 안전하게 테스트한 후 자신 있게 멤버들에게 공개할 수 있습니다.

## 커스텀 CSS/JS 추가의 주요 이점

* **정확한 브랜딩**: 폰트, 간격, 구성 요소를 브랜드 가이드라인에 맞게 조정할 수 있습니다
* **타겟팅된 변경**: 다른 그룹에 영향을 주지 않고 단일 그룹에만 CSS/JS를 적용할 수 있습니다
* **제어된 배포**: \*\*라이브 모드(Live Mode)\*\*를 켜기 전에 \*\*테스트 미리보기(Test Preview)\*\*를 사용할 수 있습니다
* **더 나은 UX**: 작은 JS 스니펫으로 네비게이션이나 마이크로 인터랙션을 향상시킬 수 있습니다
* **모바일 유연성**: 휴대폰과 태블릿용 반응형 규칙을 맞춤 설정할 수 있습니다

## 그룹에 커스텀 CSS/JS를 추가하는 방법

그룹에 커스텀 코드를 추가하려면 다음 단계를 따르세요:

1. 하위 계정에 로그인합니다
2. `Memberships(멤버십) > Communities(커뮤니티) > Groups(그룹)`으로 이동합니다

![커뮤니티 그룹 메뉴](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155061246022/original/zfEW7dJceNSM4tNRzkZM1Bbv6otwOID3JA.png?1766501351)

3. 커스터마이징하려는 **그룹**에 로그인합니다

![그룹 로그인](https://jumpshare.com/share/WEmixhUQ0ro5XQi8XOS0+/Screen+Shot+2025-12-23+at+8.21.16+PM.png)

4. 그룹에서 \*\*Settings(설정)\*\*를 클릭합니다

![그룹 설정](https://jumpshare.com/share/5G9662alBgx3HMphI0Ar+/Screen+Shot+2025-12-23+at+8.24.17+PM.png)

5. **Branding(브랜딩)** 탭을 클릭하고 \*\*Advanced Options(고급 옵션)\*\*까지 스크롤한 후 클릭하여 확장합니다

![브랜딩 고급 옵션](https://jumpshare.com/share/z9vpc1V1LeAWqJ35ZTqu+/Screen+Shot+2025-12-23+at+8.33.17+PM.png)

6. \*\*Custom CSS(커스텀 CSS)\*\*와 **Custom JavaScript(커스텀 JavaScript)** 필드까지 스크롤하고 코드를 붙여넣습니다

![커스텀 CSS/JS 필드](https://jumpshare.com/share/KW2JPZ0zRZQ1YYu7HWyA+/Screen+Shot+2025-12-23+at+8.34.57+PM.png)

7. \*\*Test Preview(테스트 미리보기)\*\*를 클릭하여 변경사항을 확인합니다
8. 만족스럽다면 \*\*Live Mode(라이브 모드)\*\*를 **On**으로 설정합니다. 그렇지 않다면 조정 후 다시 테스트합니다
9. \*\*Save(저장)\*\*를 클릭하여 완료합니다

![라이브 모드 설정](https://jumpshare.com/share/YhxRqrwpECkyaPRqyIzG+/Screen+Shot+2025-12-23+at+8.36.24+PM.png)

## 자주 묻는 질문

**Q: 문제 해결을 위해 커스텀 코드를 빠르게 비활성화할 수 있나요?**

네. \*\*라이브 모드(Live Mode)\*\*를 끄시면 됩니다.

**Q: 커스텀 코드 적용 후 커뮤니티에서 문제가 발생하면 어떻게 해야 하나요?**

커스텀 HTML, CSS 또는 JavaScript가 구현된 커뮤니티에서 문제가 발생하면, 커스텀 코드가 원인인지 확인하는 것이 중요합니다. 이를 위해 커스텀 코드를 일시적으로 비활성화하고 문제가 계속 발생하는지 확인할 수 있습니다. 브라우저 주소 표시줄에서 커뮤니티 URL 끝에 'customCode=false'를 추가하고 엔터를 누르면 됩니다. 이렇게 하면 현재 세션에서 커스텀 코드가 비활성화되어 커스터마이징 없이 문제가 지속되는지 확인할 수 있습니다. 커스텀 코드를 비활성화했을 때 문제가 해결된다면, 커스텀 코드를 조정해야 한다는 의미입니다.

**Q: 커뮤니티 포털에서 다크 모드와 라이트 모드에 다른 스타일을 적용하려면 어떻게 하나요?**

나이트 모드(다크 테마) 스타일을 타겟팅하려면 CSS에서 .dark 클래스를 사용하세요. 이 클래스는 나이트 모드가 활성화될 때 루트에 자동으로 적용됩니다.

페이지의 다른 부분에 영향을 줄 수 있으므로 `div:nth-of-type(2)`와 같이 너무 광범위한 선택자 사용은 피하세요. 시각적 일관성을 보장하기 위해 항상 두 모드를 모두 미리보기하고 테스트하세요.

***

*원문 최종 수정: Tue, 23 Dec, 2025 at 9:17 AM* *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-how-to-add-custom-css-js-to-groups.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.