Mattermost 테마 꾸미기

Mattermost 사용자 인터페이스의 색상은 원하는 대로 바꿀 수 있습니다. Mattermost가 디자인한 다섯 가지 표준 테마 중에서 고르거나, 직접 커스텀 테마를 만들 수 있습니다. 테마 변경은 참여 중인 모든 팀에 적용되며, 모든 Mattermost 클라이언트에서 동일하게 보입니다. Mattermost Enterprise 고객은 참여 중인 팀마다 서로 다른 테마를 설정할 수 있습니다.

Web/desktop

Settings(설정) 아이콘을 선택한 뒤 Display > Theme(표시 > 테마)로 이동하세요. Theme Colors(테마 색상)를 선택하면 Mattermost 팀이 디자인한 다섯 가지 표준 테마 중에서 고를 수 있습니다.

표준 테마를 바탕으로 더 세밀하게 손봐 나만의 테마로 만들 수도 있습니다. 표준 테마를 고른 뒤 Custom Theme(커스텀 테마)을 선택하고 원하는 색으로 바꾸세요. 어떤 항목을 바꿀 수 있는지는 커스텀 테마 문서를, 참고할 만한 예시는 커스텀 테마 예시 문서를 확인하세요.

Mobile

Theme(테마)을 눌러 다섯 가지 표준 Mattermost 테마 중 하나를 선택합니다.

커스텀 테마

Custom Theme(커스텀 테마)을 선택한 뒤 Sidebar Styles(사이드바 스타일), Center Channel Styles(중앙 채널 스타일), Link and Button Styles(링크·버튼 스타일) 옵션을 펼치면 배경, 링크, 텍스트, 테두리 등 개별 인터페이스 색상을 조정할 수 있습니다.

커스텀 테마 변경 사항은 조정하는 즉시 Mattermost에 반영됩니다. Save(저장)를 선택해 테마 변경을 확정하세요. 변경을 취소하려면 Display Settings(표시 설정) 창을 닫고 Yes, Discard(예, 취소합니다)를 선택하세요.

커스텀 테마 예시

테마 색상을 조정한 뒤 입력란에 테마 값을 복사해 붙여 넣어 다른 사람과 공유할 수 있습니다. 아래는 몇 가지 예시 테마와 해당 테마 값입니다.

Mattermost

이 테마를 쓰고 싶다면 다음 코드를 Mattermost에 복사해 붙여 넣으세요.

{"sidebarBg":"#145dbf","sidebarText":"#ffffff","sidebarUnreadText":"#ffffff","sidebarTextHoverBg":"#4578bf","sidebarTextActiveBorder":"#579eff","sidebarTextActiveColor":"#ffffff","sidebarHeaderBg":"#1153ab","sidebarTeamBarBg":"#0b428c","sidebarHeaderTextColor":"#ffffff","onlineIndicator":"#06d6a0","awayIndicator":"#ffbc42","dndIndicator":"#f74343","mentionBg":"#ffffff","mentionBj":"#ffffff","mentionColor":"#145dbf","centerChannelBg":"#ffffff","centerChannelColor":"#3d3c40","newMessageSeparator":"#ff8800","linkColor":"#2389d7","buttonBg":"#166de0","buttonColor":"#ffffff","errorTextColor":"#fd5960","mentionHighlightBg":"#ffe577","mentionHighlightLink":"#166de0","codeTheme":"github"}

Organization

이 테마를 쓰고 싶다면 다음 코드를 Mattermost에 복사해 붙여 넣으세요.

{"sidebarBg":"#2071a7","sidebarText":"#ffffff","sidebarUnreadText":"#ffffff","sidebarTextHoverBg":"#136197","sidebarTextActiveBorder":"#7ab0d6","sidebarTextActiveColor":"#ffffff","sidebarHeaderBg":"#2f81b7","sidebarTeamBarBg":"#256996","sidebarHeaderTextColor":"#ffffff","onlineIndicator":"#7dbe00","awayIndicator":"#dcbd4e","dndIndicator":"#ff6a6a","mentionBg":"#fbfbfb","mentionColor":"#2071f7","centerChannelBg":"#f2f4f8","centerChannelColor":"#333333","newMessageSeparator":"#ff8800","linkColor":"#2f81b7","buttonBg":"#1dacfc","buttonColor":"#ffffff","errorTextColor":"#a94442","mentionHighlightBg":"#f3e197","mentionHighlightLink":"#2f81b7","codeTheme":"github"}

Mattermost Dark

이 테마를 쓰고 싶다면 다음 코드를 Mattermost에 복사해 붙여 넣으세요.

{"sidebarBg":"#1b2c3e","sidebarText":"#ffffff","sidebarUnreadText":"#ffffff","sidebarTextHoverBg":"#4a5664","sidebarTextActiveBorder":"#66b9a7","sidebarTextActiveColor":"#ffffff","sidebarHeaderBg":"#1b2c3e","sidebarTeamBarBg":"#152231","sidebarHeaderTextColor":"#ffffff","onlineIndicator":"#65dcc8","awayIndicator":"#c1b966","dndIndicator":"#e81023","mentionBg":"#b74a4a","mentionColor":"#ffffff","centerChannelBg":"#2f3e4e","centerChannelColor":"#dddddd","newMessageSeparator":"#5de5da","linkColor":"#a4ffeb","buttonBg":"#4cbba4","buttonColor":"#ffffff","errorTextColor":"#ff6461","mentionHighlightBg":"#984063","mentionHighlightLink":"#a4ffeb","codeTheme":"solarized-dark"}

Windows Dark

이 테마를 쓰고 싶다면 다음 코드를 Mattermost에 복사해 붙여 넣으세요.

{"sidebarBg":"#171717","sidebarText":"#ffffff","sidebarUnreadText":"#ffffff","sidebarTextHoverBg":"#302e30","sidebarTextActiveBorder":"#196caf","sidebarTextActiveColor":"#ffffff","sidebarHeaderBg":"#1f1f1f","sidebarTeamBarBg":"#181818","sidebarHeaderTextColor":"#ffffff","onlineIndicator":"#399fff","awayIndicator":"#c1b966","dndIndicator":"#e81023","mentionBg":"#0177e7","mentionColor":"#ffffff","centerChannelBg":"#1f1f1f","centerChannelColor":"#dddddd","newMessageSeparator":"#cc992d","linkColor":"#0d93ff","buttonBg":"#0177e7","buttonColor":"#ffffff","errorTextColor":"#ff6461","mentionHighlightBg":"#784098","mentionHighlightLink":"#a4ffeb","codeTheme":"monokai"}

GitHub Theme

이 테마를 쓰고 싶다면 다음 코드를 Mattermost에 복사해 붙여 넣으세요.

{"awayIndicator":"#D4B579","buttonBg":"#66CCCC","buttonColor":"#FFFFFF","centerChannelBg":"#FFFFFF","centerChannelColor":"#444444","codeTheme":"github","linkColor":"#3DADAD","mentionBg":"#66CCCC","mentionColor":"#FFFFFF","mentionHighlightBg":"#3DADAD","mentionHighlightLink":"#FFFFFF","newMessageSeparator":"#F2777A","onlineIndicator":"#52ADAD","sidebarBg":"#F2F0EC","sidebarHeaderBg":"#E8E6DF","sidebarHeaderTextColor":"#424242","sidebarText":"#2E2E2E","sidebarTextActiveBorder":"#66CCCC","sidebarTextActiveColor":"#594545","sidebarTextHoverBg":"#E0E0E0","sidebarUnreadText":"#515151"}

Monokai Theme

이 테마를 쓰고 싶다면 다음 코드를 Mattermost에 복사해 붙여 넣으세요.

{"awayIndicator":"#B8B884","buttonBg":"#90AD58","buttonColor":"#FFFFFF","centerChannelBg":"#FFFFFF","centerChannelColor":"#444444","codeTheme":"monokai","linkColor":"#90AD58","mentionBg":"#7E9949","mentionColor":"#FFFFFF","mentionHighlightBg":"#54850C","mentionHighlightLink":"#FFFFFF","newMessageSeparator":"#90AD58","onlineIndicator":"#99CB3F","sidebarBg":"#262626","sidebarHeaderBg":"#363636","sidebarHeaderTextColor":"#FFFFFF","sidebarText":"#FFFFFF","sidebarTextActiveBorder":"#7E9949","sidebarTextActiveColor":"#FFFFFF","sidebarTextHoverBg":"#525252","sidebarUnreadText":"#CCCCCC"}

Solarized Dark Theme

이 테마를 쓰고 싶다면 다음 코드를 Mattermost에 복사해 붙여 넣으세요.

{"awayIndicator":"#E0B333","buttonBg":"#859900","buttonColor":"#fdf6e3","centerChannelBg":"#073642","centerChannelColor":"#93a1a1","codeTheme":"solarized-dark","linkColor":"#268bd2","mentionBg":"#dc322f","mentionColor":"#ffffff","mentionHighlightBg":"#d33682","mentionHighlightLink":"#268bd2","newMessageSeparator":"#cb4b16","onlineIndicator":"#2AA198","sidebarBg":"#073642","sidebarHeaderBg":"#002B36","sidebarHeaderTextColor":"#FDF6E3","sidebarText":"#FDF6E3","sidebarTextActiveBorder":"#d33682","sidebarTextActiveColor":"#FDF6E3","sidebarTextHoverBg":"#CB4B16","sidebarUnreadText":"#FDF6E3","errorTextColor":"#dc322f"}

Gruvbox Dark Theme

이 테마를 쓰고 싶다면 다음 코드를 Mattermost에 복사해 붙여 넣으세요.

{"awayIndicator":"#fabd2f","buttonBg":"#689d6a","buttonColor":"#ebdbb2","centerChannelBg":"#3c3836","centerChannelColor":"#ebdbb2","codeTheme":"monokai","errorTextColor":"#fb4934","linkColor":"#83a598","mentionBg":"#b16286","mentionColor":"#fbf1c7","mentionHighlightBg":"#d65d0e","mentionHighlightLink":"#fbf1c7","newMessageSeparator":"#d65d0e","onlineIndicator":"#b8bb26","sidebarBg":"#282828","sidebarHeaderBg":"#1d2021","sidebarHeaderTextColor":"#ebdbb2","sidebarText":"#ebdbb2","sidebarTextActiveBorder":"#d65d0e","sidebarTextActiveColor":"#fbf1c7","sidebarTextHoverBg":"#d65d0e","sidebarUnreadText":"#fe8019"}

One Dark Theme

one-dark-mattermost GitHub 저장소 방문하기

이 테마를 쓰고 싶다면 다음 코드를 Mattermost에 복사해 붙여 넣으세요.

{"sidebarBg":"#21252b","sidebarText":"#abb2bf","sidebarUnreadText":"#abb2bf","sidebarTextHoverBg":"#3a3f4b","sidebarTextActiveBorder":"#4d78cc","sidebarTextActiveColor":"#d7dae0","sidebarHeaderBg":"#282c34","sidebarHeaderTextColor":"#abb2bf","onlineIndicator":"#98c379","awayIndicator":"#d19a66","dndIndicator":"#be5046","mentionBg":"#98c379","mentionColor":"#ffffff","centerChannelBg":"#282c34","centerChannelColor":"#abb2bf","newMessageSeparator":"#c67add","linkColor":"#61afef","buttonBg":"#4d78cc","buttonColor":"#ffffff","errorTextColor":"#f44747","mentionHighlightBg":"#525a69","mentionHighlightLink":"#61afef","codeTheme":"monokai","mentionBg":"#98c379"}

Discord Dark Theme (New)

mattermost-discord-dark GitHub 저장소 방문하기

이 테마를 쓰고 싶다면 다음 코드를 Mattermost에 복사해 붙여 넣으세요.

{"sidebarBg": "#121214", "sidebarText": "#ffffff", "sidebarUnreadText": "#ffffff", "sidebarTextHoverBg": "#1d1d1e", "sidebarTextActiveBorder": "#ffffff", "sidebarTextActiveColor": "#ffffff", "sidebarHeaderBg": "#121214", "sidebarHeaderTextColor": "#ffffff", "sidebarTeamBarBg": "#121214", "onlineIndicator": "#43a25a", "awayIndicator": "#ca9654", "dndIndicator": "#d83a42", "mentionBg": "#6e84d2", "mentionBj": "#6e84d2", "mentionColor": "#ffffff", "centerChannelBg": "#1a1a1e", "centerChannelColor": "#efeff0", "newMessageSeparator": "#ff4d4d", "linkColor": "#2095e8", "buttonBg": "#5865f2", "buttonColor": "#ffffff", "errorTextColor": "#ff6461", "mentionHighlightBg": "#a4850f", "mentionHighlightLink": "#a4850f", "codeTheme": "monokai"}

Discord Dark Theme (Old)

mattermost-discord-dark-old GitHub 저장소 방문하기

이 테마를 쓰고 싶다면 다음 코드를 Mattermost에 복사해 붙여 넣으세요.

{"sidebarBg":"#2f3136","sidebarText":"#ffffff","sidebarUnreadText":"#ffffff","sidebarTextHoverBg":"#33363c","sidebarTextActiveBorder":"#66cfa0","sidebarTextActiveColor":"#ffffff","sidebarHeaderBg":"#27292c","sidebarHeaderTextColor":"#ffffff","onlineIndicator":"#43b581","awayIndicator":"#faa61a","dndIndicator":"#f04747","mentionBg":"#6e84d2","mentionBg":"#6e84d2","mentionColor":"#ffffff","centerChannelBg":"#36393f","centerChannelColor":"#dddddd","newMessageSeparator":"#6e84d2","linkColor":"#2095e8","buttonBg":"#43b581","buttonColor":"#ffffff","errorTextColor":"#ff6461","mentionHighlightBg":"#3d414f","mentionHighlightLink":"#6e84d2","codeTheme":"monokai"}

Night Owl Dark Theme

이 테마를 쓰고 싶다면 다음 코드를 Mattermost에 복사해 붙여 넣으세요.

{"sidebarBg":"#011627","sidebarText":"#d6deeb","sidebarUnreadText":"#d6deeb","sidebarTextHoverBg":"#1d3b53","sidebarTextActiveBorder":"#ff2c83","sidebarTextActiveColor":"#82aaff","sidebarHeaderBg":"#1d3b53","sidebarHeaderTextColor":"#d6deeb","onlineIndicator":"#addb67","awayIndicator":"#ffbc42","dndIndicator":"#f74343","mentionBg":"#d6deeb","mentionBg":"#d6deeb","mentionColor":"#145dbf","centerChannelBg":"#011627","centerChannelColor":"#d6deeb","newMessageSeparator":"#ff8800","linkColor":"#2389d7","buttonBg":"#166de0","buttonColor":"#011627","errorTextColor":"#fd5960","mentionHighlightBg":"#0b2942","mentionHighlightLink":"#82aaff","codeTheme":"solarized-dark"}

Dark Theme (데스크톱 앱 전용)

Windows와 macOS에서는 컴퓨터에 설정한 시스템 표시 환경 설정(예: 라이트 모드, 다크 모드)이 Mattermost 데스크톱 앱에도 그대로 적용됩니다. Linux에서는 View(보기) 메뉴에서 직접 설정합니다.

커스텀 테마 내보내기

Custom Theme 메뉴에서 테마 값을 복사하면 Mattermost에서 테마를 내보낼 수 있습니다.

커스텀 테마 가져오기

Custom Theme 메뉴에 테마 값을 붙여 넣으면 Mattermost로 테마를 가져올 수 있습니다. 기존 테마 값을 복사한 뒤 Copy and paste to share theme colors(테마 색상 공유를 위한 복사·붙여넣기) 필드에 붙여 넣으세요. Save(저장)를 선택해 테마 변경을 확정합니다.

사이드바 스타일

Mattermost 테마의 모든 요소를 아래와 같이 조정할 수 있습니다.

Sidebar BG(사이드바 배경)

Channels 창과 계정·팀 설정 탐색 사이드바의 배경색입니다.

Sidebar Text(사이드바 텍스트)

Channels 창에서 읽은 채널의 텍스트 색상과, 계정·팀 설정 탐색 사이드바 탭의 텍스트 색상입니다.

Sidebar Header BG(사이드바 헤더 배경)

Channels 창 위쪽 헤더와 모든 대화 상자 헤더의 배경색입니다.

Team Sidebar BG(팀 사이드바 배경)

글로벌 헤더의 배경색입니다.

Sidebar Header Text(사이드바 헤더 텍스트)

Channels 창 위쪽 헤더와 모든 대화 상자 헤더의 텍스트 색상입니다.

Sidebar Unread Text(사이드바 읽지 않음 텍스트)

Channels 창에서 읽지 않은 채널의 텍스트 색상입니다.

Sidebar Text Hover BG(사이드바 텍스트 호버 배경)

채널 이름이나 설정 탭 위에 마우스를 올렸을 때 뒤에 표시되는 배경색입니다.

Sidebar Text Active Border(사이드바 텍스트 활성 테두리)

Channels 창이나 Settings 사이드바 왼쪽에서 현재 선택된 채널 또는 탭을 나타내는 사각형 표시의 색상입니다.

Sidebar Text Active Color(사이드바 텍스트 활성 색상)

Channels 창이나 Settings 사이드바에서 현재 선택된 채널 또는 탭의 텍스트 색상입니다.

Online Indicator(온라인 표시)

다이렉트 메시지 목록에서 팀원 이름 옆에 표시되는 온라인 표시의 색상입니다.

Away Indicator(자리 비움 표시)

팀원이 5분 동안 브라우저 활동이 없을 때 다이렉트 메시지 목록의 이름 옆에 표시되는 자리 비움 표시의 색상입니다.

Do Not Disturb Indicator(방해 금지 표시)

다이렉트 메시지 목록에서 팀원 이름 옆에 표시되는 방해 금지 표시의 색상입니다.

Mention Jewel BG(멘션 배지 배경)

채널 이름 오른쪽에 표시되어 읽지 않은 멘션을 알리는 배지의 배경색입니다. 브라우저 창이 짧을 때 Channels 창 위아래에 표시되는 “Unread Posts Below/Above” 표시의 배경색이기도 합니다.

Mention Jewel Text(멘션 배지 텍스트)

읽지 않은 멘션 개수를 나타내는 멘션 배지의 텍스트 색상입니다. “Unread Posts Below/Above” 표시의 텍스트 색상이기도 합니다.

중앙 채널 스타일

Mattermost 테마의 모든 요소를 아래와 같이 조정할 수 있습니다.

Center Channel BG(중앙 채널 배경)

가운데 창, 오른쪽 사이드바, 모든 대화 상자 배경의 색상입니다.

Center Channel Text(중앙 채널 텍스트)

멘션, 링크, 해시태그, 코드 블록을 제외한 가운데 창, 오른쪽 사이드바, 대화 상자의 모든 텍스트 색상입니다.

New Message Separator(새 메시지 구분선)

읽지 않은 메시지가 있는 채널로 이동했을 때 마지막으로 읽은 메시지 아래에 표시되는 새 메시지 구분선입니다.

Error Text Color(오류 텍스트 색상)

모든 오류 텍스트의 색상입니다.

Mention Highlight BG(멘션 강조 배경)

가운데 창과 오른쪽 사이드바에서 멘션을 유발한 단어 뒤에 표시되는 강조 색상입니다.

Mention Highlight Link(멘션 강조 링크)

가운데 창과 오른쪽 사이드바에서 멘션을 유발한 단어의 텍스트 색상입니다.

Code Theme(코드 테마)

모든 코드 블록의 배경색과 구문 색상입니다.

링크·버튼 스타일

Mattermost 테마의 모든 요소를 아래와 같이 조정할 수 있습니다.

Link Color(링크 색상)

모든 링크, 해시태그, 팀원 멘션, 낮은 우선순위 UI 버튼의 텍스트 색상입니다.

Button BG(버튼 배경)

모든 높은 우선순위 UI 버튼 뒤에 표시되는 사각형 배경의 색상입니다.

Button Text(버튼 텍스트)

모든 높은 우선순위 UI 버튼의 사각형 배경 위에 표시되는 텍스트 색상입니다.