이 비기술적 튜토리얼에서는 Discourse 사이트의 브랜딩과 외관을 사용자 지정하는 방법을 안내합니다.
필요한 사용자 권한: 관리자
사이트 브랜딩을 사용자 지정하고 싶지만 어디서부터 시작해야 할지 모르시나요? 자세히 알아보세요!
설정 마법사
Discourse는 매우 사용자 지정 가능합니다! 사이트 사용자 지정의 좋은 시작점은 사이트의 관리자 계정으로 로그인하여 사이트 설정 마법사를 실행하는 것입니다. ![]()
설정 마법사를 사용하면 사이트 제목, 기본 언어, 액세스 설정(공개 vs 비공개, 가입 vs 초대 전용, 사용자 승인 필요 여부)을 구성할 수 있습니다. 이는 사이트를 실행하기 위한 필수적인 첫 단계입니다.
마법사가 완료되면, 관리자 패널에서 사이트의 외관(로고, 색상, 글꼴 등)을 더 자세히 사용자 지정할 수 있습니다.
이 페이지에서 사용 가능한 옵션을 미리 볼 수 있습니다. 마음에 드는 설정을 찾으면 “다음” 버튼을 클릭하세요. 나중에 설정이 마음에 들지 않는다면 언제든 변경할 수 있으므로 걱정하지 마세요.
사이트 테마
기본 구성이 완료되면 사이트를 더 깊이 사용자 지정할 시간입니다! ![]()
테마는 포럼 디자인 스타일의 여러 요소를 변경하는 광범위한 사용자 지정이며, 종종 추가적인 프론트엔드 기능도 포함합니다. 테마는 포럼의 모양과 레이아웃을 크게 변경할 수 있는 기능을 갖추고 있습니다.
Meta의 Customization > Theme 카테고리는 사이트를 사용자 지정하는 데 사용할 수 있는 다양한 사전 제작된 테마를 호스팅합니다. 사이트에서 사용할 테마를 찾는 데 가장 좋은 장소입니다. 이 카테고리에서 사이트에 사용할 테마를 선택해 보세요.
사이트에서 사용할 테마를 결정했으면 Admin -> Customize -> Themes 페이지(경로: /admin/config/customize/themes)에서 테마를 사이트에 추가할 수 있습니다. 이 페이지에서 사이트 테마를 변경하거나 완전히 새로운 테마를 만들 수도 있습니다.
Discourse 테마 사용 입문가 가이드는 Discourse 테마 기본 사항에 대한 집중 과정이며, Discourse 사이트에 테마를 설치하는 방법에 대한 개요를 제공합니다. 선택한 테마를 설치하는 방법에 대한 지침을 위해 이 가이드를 읽어 보세요.
테마를 사용, 생성, 공유하는 방법에 대한 추가 정보는 다음에서 찾을 수 있습니다:
색상 팔레트
Admin -> Config -> Colors 페이지(경로: /admin/config/colors)에서 색상 팔레트를 조정하여 사이트를 더 자세히 사용자 지정할 수 있습니다. ![]()
여기서 새로운 색상 팔레트를 만들거나, 기존 팔레트를 선택하여 사용자 지정하고, 테마의 기본 라이트 또는 다크 스키мом 팔레트를 할당할 수 있습니다.
새로운 색상 스키머의 기반이 될 기존 색상 스키머를 선택한 후, 각 색상 섹션 옆의 색상을 클릭하여 새로운 스키머의 색상을 사용자 지정하세요:
완료되면 새로운 색상 스키머에 이름을 붙이고 변경 사항을 저장하는 것을 잊지 마세요!
색상 선택에 도움이 필요하신가요? Paletton - The Color Scheme Designer 같은 색상 선택 도구가 매우 유용합니다!
Discourse에서 색상 팔레트를 사용하는 방법에 대한 추가 정보는 다음을 참조하세요:
테마 컴포넌트
테마와 마찬가지로, Discourse에는 포럼 디자인의 표면 요소를 변경하거나 추가적인 프론트엔드 기능을 추가하는 데 사용할 수 있는 "테마 컴포넌트"가 있습니다. 전체 테마보다 작고 더 집중적이므로, 일반적으로(항상 그런 것은 아니지만) 다른 테마 컴포넌트와 결합하여 커뮤니티에 맞춘 맞춤형 포럼 디자인을 만들 수 있습니다. ![]()
Meta의 Customization > Theme component 카테고리는 Discourse의 공식 및 비공식 테마 컴포넌트를 모두 포함합니다. 그곳에 나열된 테마 컴포넌트를 살펴보고, 사이트에 설치하고 싶은 것이 있다면 다음 지침을 따르세요: Discourse 테마 인터페이스 및 테마 컴포넌트 설치 방법
가장 인기 있는 Discourse 테마 컴포넌트 중 일부는 다음과 같습니다:
Discourse에는 사이드바 푸터 또는 헤더에 토글을 표시하도록 설정할 수 있는
interface_color_selector사이트 설정으로 제어되는 내장 다크/라이트 모드 토글이 있습니다.
Meta의 theme-guides 태그에는 테마 컴포넌트를 사용하여 사이트를 더 사용자 지정하는 방법에 대한 아이디어가 담긴 많은 하우투 가이드가 있습니다.
사이트 브랜딩
Discourse에는 Admin -> Appearance -> Logo(경로: /admin/config/logo)에 전용 로고 구성 페이지가 있으며, 여기서 사이트의 모든 로고와 아이콘을 관리할 수 있습니다.
Primary logo- 사이트의 상단 내비게이션 및 이메일 알림 상단에 표시됩니다. 권장 크기는 600 × 80픽셀입니다.Primary logo dark- 주요 로고의 다크 모드 대안입니다. 권장 크기는 600 × 80픽셀입니다.Square icon- 사이트 상단에 표시되며 모바일 앱 로고로도 사용되는 정사각형 버전의 로고 이미지입니다. 권장 크기는 512 × 512픽셀입니다.Favicon- 브라우저 탭 및 브라우저 즐겨찾기/북마크에서 아이콘으로 표시됩니다.Small logo- 사이트 왼쪽 상단의 작은 로고 이미지로, 아래로 스크롤할 때 보입니다. 비워 두면 홈 글리프가 표시됩니다. 권장 크기는 120 × 120픽셀입니다.Small logo dark- 작은 로고의 다크 모드 대안입니다. 권장 크기는 120 × 120픽셀입니다.
모바일 섹션 아래:
Mobile logo- 사이트 모바일 버전에서 사용되는 로고입니다. 비워 두면logo설정의 이미지가 사용됩니다. 높이가 120이고 종횡비가 3:1보다 큰 넓은 직사각형 이미지를 사용하세요.Mobile logo dark- 모바일 로고의 다크 모드 대안입니다. 높이가 120이고 종횡비가 3:1보다 큰 넓은 직사각형 이미지를 사용하세요.Manifest icon- Android에서 로고/스플래시 이미지로 사용되는 이미지입니다. 비워 두면 large_icon이 사용됩니다. 권장 크기는 512 × 512픽셀입니다.Manifest screenshots- 설치 프롬프트 페이지(Android에서 "홈 화면에 추가"를 사용할 때 표시됨)에서 인스턴스의 기능과 기능을 소개하는 스크린샷입니다. 모든 이미지는 로컬 업로드여야 하며 동일한 치수를 가져야 합니다.Apple touch icon- Apple 터치 장치에서 사용되는 아이콘입니다. 비워 두면 large_icon이 사용됩니다. 권장 크기는 180 × 180픽셀입니다. 투명한 배경은 권장되지 않습니다.
이메일 섹션 아래:
Digest logo- 사이트 이메일 요약 상단에 사용되는 대안 로고 이미지입니다. 비워 두면logo설정의 이미지가 사용됩니다. 넓은 직사각형 이미지를 사용하세요. SVG 이미지를 사용하지 마세요.
소셜 미디어 섹션 아래:
OpenGraph image- 기본 opengraph 이미지로, 페이지에 다른 적합한 이미지가 없을 때 웹 링크 미리보기에 많은 앱과 플랫폼에서 사용됩니다. 비워 두면 large_icon이 사용됩니다.X summary large image- X 카드의 'summary large image’입니다. 비워 두면, OpenGraph_image가 .svg가 아닌 한, OpenGraph_image를 사용하여 일반 카드 메타데이터가 생성됩니다. 권장 크기는 최소 280 × 150픽셀입니다. SVG 이미지를 사용하지 마세요.
최상의 결과를 위해, 각 로고 및 아이콘 유형에 대해 위에 나열된 크기 가이드라인을 따르는 것을 권장합니다.
추가 사용자 지정
이제 사이트에 사용자 지정 테마, 색상 팔레트, 일부 브랜드 로고, 그리고 아마도 몇 가지 테마 컴포넌트를 추가했으므로 모든 기본 사이트 사용자 지정이 완료되었습니다! ![]()
Discourse 사이트를 더 사용자 지정하는 방법을 더 찾고 있다면, 다음 중 관심 있는 주제를 읽어 보시는 것을 권장합니다:





