한국어
  1. Zendesk 도움말
  2. Guide
  3. Guide 사용하기
  4. 테마 사용 및 헬프 센터 사용자 지정하기

설정 창 사용자 지정하기(Guide Professional 및 Enterprise)

Charles Nadeau
  • 편집된 시간
Zendesk Documentation Team

Suite Growth, Professional, Enterprise, and Enterprise PlusProfessional 플랜

이 문서에서 설명하고 있는 테마 환경과 UI가 업데이트되었습니다. 11월 14일 이전에 Guide를 사용하고 계시던 고객은 새로운 테마 환경으로 업그레이드할 수 있습니다.

테마 내보내기를 실행하면 내보내기 한 파일 중에 manifest.json이라는 이름의 파일이 포함됩니다. 이 파일은 Guide의 테마 설정 창을 정의합니다.

이 가이드에서는 매니페스트 파일과 이를 통해서 무엇을 할 수 있는지에 대해 설명합니다. 또한 상세 사양에 대한 참조를 제공합니다. 예를 들어 테마를 내보내기하고 manifest.json 파일을 텍스트 편집기로 열어보세요.

이 문서에서 다루는 주제는 다음과 같습니다.

manifest.json 파일 이해하기

테마 내보내기를 실행하면 내보내기 한 파일 중에 manifest.json이라는 이름의 파일이 포함됩니다. 매니페스트 파일을 사용하여 Guide의 테마 설정 창을 정의할 수 있습니다.

창에 있는 기존 settings 특성을 수정하거나 새로운 특성을 만들 수 있습니다. 다음 예시에서 매니페스트 파일은 color_brand_text 설정의 기본 값을 “#30aabc”로 설정하고 있습니다.

"settings": [
  {
    "label": "Colors",
    "variables": [
      {
        "identifier": "color_brand_text",
        "type": "color",
        "description": "color_brand_text_description",
        "label": "color_brand_text_label",
        "value": "#30aabc"
      },
      ...
    ]
  },
  ...
]

Guide에 테마 가져오기를 실행한 후 설정 창에는 매니페스트 파일의 “label” 특성에서 지정한 Brand text color 레이블을 가진 color_brand_text 설정이 표시되며, 색 선택기의 기본 16진수 값은 “value”특성에서 지정한 대로 #30aabc입니다.

Settings 특성을 manifest.json의 변수로 사용하기

Settings 특성의 식별자를 테마 파일에서 변수로 사용할 수 있기 때문에 이를 또한 변수라고 부르기도 합니다. 설정 창에서 값을 변경하면 해당 변수를 사용하는 모든 파일의 값이 업데이트됩니다.

$identifier 구문을 사용해서 테마의 style.css 파일에 변수를 삽입하거나 Curlybars의 settings.identifier 도우미를 사용해서 페이지 기본서식에 삽입할 수 있습니다. 예:

style.css

input:focus {
  border: 1px solid $color_brand_text;
}

또한 다음과 같이 단일 중괄호를 사용하여 CSS 표현식에 도우미를 임베드할 수 있습니다.

max-width: #{$search_width}px;

페이지 기본서식

<div style="background-color:{{settings.color_brand_text}}">

manifest.json 파일 수정하기

헬프 센터의 코드 편집 페이지에 있는 파일 목록에는 manifest.json 파일이 포함되어 있지 않습니다. manifest.json 파일을 편집하려면, 테마를 파일로 내보내기한 후 시스템 상에서 매니페스트 파일을 수정하고 다시 테마를 Guide로 가져와야 합니다.

테마 내보내기

  • 테마 페이지에서 테마 창의 오른쪽 아래에 있는 톱니바퀴 아이콘을 클릭한 다음 내보내기를 선택합니다.

수정한 테마 가져오기

  • 테마 페이지에서 오른쪽 위에 있는 가져오기를 클릭합니다.

매니페스트 개체

매니페스트의 문서 루트 개체는 다음 특성을 가집니다.

이름 유형 댓글
name 문자열 테마 이름
author 문자열 테마를 만든 사람
version 문자열 테마 버전
api_version 문자열 매니페스트 API 버전
설정 배열 설정 개체 목록 (설정 개체 참조)

예

{
  "name": "My second theme",
  "author": "Jane Doe",
  "version": "1.0.1",
  "api_version": 1,
  "settings": [
    ...
  ]
}

설정 개체

Guide의 매니페스트 루트 개체와 설정 창 양쪽에 있는 settings 특성은 색상 또는 글꼴과 같은 그룹으로 정리되어 있고 각 그룹은 설정 개체를 통해 매니페스트 파일에 정의되어 있습니다. 브랜드 색, 텍스트 색과 같이 각 개체는 레이블과 하나 이상의 settings 특성으로 구성됩니다.

설정 개체를 변경하거나 직접 설정 개체를 만들 수 있습니다. Guide에 테마를 가져오면 해당 개체는 테마의 설정 창에 반영됩니다.

각 설정 개체는 다음 특성을 가집니다.

이름 유형 댓글
label 문자열 번역 특성의 이름으로 (번역 참조) Settings 그룹에 대한 제목을 표시함
variables 배열 그룹에 있는 settings 목록으로 변수라고도 함 (변수 개체 참조)

예

"settings": [
  {
    "label": "colors_group_label",
    "variables": [{...}, ...]
  },
  {
    "label": "fonts_group_label",
    "variables": [{...}, ...]
  },
  {
    "label": "brand_group_label",
    "variables": [{...}, ...]
  },
  {
    "label": "banners_group_label",
    "variables": [{...}, ...]
  }
]

참고: "label" 특성의 값은 번역 특성의 이름입니다. (번역 참조)

위의 예는 설정 창에 다음 카테고리를 만듭니다.

변수 개체

각각의 설정 개체는 실제 settings 특성을 나열한 variables 배열을 가지고 있습니다. 헬프 센터 기본서식이나 CSS에 변수로 삽입할 수 있기 때문에 이를 변수라고도 부릅니다.

원하는 모든 변수를 정의할 수 있지만 매니페스트 파일은 다음과 같은 식별자, 즉 “logo” 와 “favicon”을 가진 두 개의 파일 변수를 반드시 포함해야 합니다 (필수 변수 참조).

각 변수는 다음 특성을 가집니다.

이름 유형 댓글
identifier 문자열 CSS 또는 Curlybars 표현식에서 사용할 수 있는 변수 이름으로 30자 이하로 제한함
type 문자열 Guide의 설정 창에 있는 UI 제어를 통해 사용자로부터 다음과 같은 값 text, list, checkbox, color, file, range 중 하나를 받음 (유형 특성 참조)
label 문자열 번역 특성의 이름으로 (번역 참조) 설정 창의 UI 제어 옆에 번역 값을 표시함
description 문자열 번역 특성의 이름으로 (번역 참조) 설정에 대한 짧은 설명으로 번역 값을 표시함
값 문자열 setting의 기본 값
options 배열 list 유형에만 해당하며 목록의 항목 배열 (옵션 개체 참조)
min 정수 range 유형에만 해당하며 범위의 최소값
max 정수 range 유형에만 해당하며 범위의 최대값

예

"variables": [
  {
    "identifier": "color_brand",
    "type": "color",
    "label": "color_brand_label",
    "description": "color_brand_description",
    "value": "#0072EF"
  },
  ...
]

위의 예는 설정 창에 다음과 같은 레이블과 제어를 만듭니다.

필수 변수

매니페스트 파일에 다음 두 개의 변수를 지정하지 않으면 파일을 가져올 때 거부됩니다.

  • logo - identifier는 "logo"이고 type은 "file"이어야만 함
  • favicon - identifier는 "favicon"이고 type은 "file"이어야만 함

예

"variables": [
  {
    "identifier": "logo",
    "type": "file",
    "description": "logo_description",
    "label": "logo_label"
  },
  {
    "identifier": "favicon",
    "type": "file",
    "description": "favicon_description",
    "label": "favicon_label"
  }
]

유형 특성

각 변수 개체는 type 특성을 가지며, Guide의 설정 창에 setting 값을 설정하기 위한 UI 제어를 지정합니다. 특성은 다음 중 하나의 값을 가집니다.

  • text - 텍스트 입력 필드
  • list - 드롭다운 목록으로 목록의 항목에 대한 옵션 개체의 목록을 포함함 (목록 유형 참조)
  • checkbox - 확인란 (확인란 유형 참조)
  • color - 색 선택기
  • file - 파일 업로더 (파일 유형 참조)
  • range - 범위 입력 필드 (범위 유형 참조)

예

{
  "identifier": "color_headings",
  "type": "color",
  ...
}

목록 유형

변수 개체의 유형이 “list”인 경우 개체는 드롭다운 목록을 채우기 위한 options 배열를 포함하고 있습니다. 목록에 있는 각 옵션은 다음 특성을 가지고 있습니다.

이름 유형 댓글
label 문자열 목록의 항목에 대해 표시되는 친숙한 텍스트
값 문자열 목록의 항목에 대한 기본적인 값

배열에 하나 이상의 옵션을 지정하지 않으면 테마를 가져올 수 없습니다.

예

{
  "identifier": "font_headings",
  "type": "list",
  "label": "Heading",
  "description": "Font for headings",
  "value": "Arial, 'Helvetica Neue', Helvetica, sans-serif",
  "options": [
    {
      "label": "Arial",
      "value": "Arial, 'Helvetica Neue', Helvetica, sans-serif"
    },
    {
      "label": "Copperplate Light",
      "value": "'Copperplate Light', 'Copperplate Gothic Light', serif"
    },
    {
      "label": "Baskerville",
      "value": "Baskerville, 'Times New Roman', Times, serif"
    }
  ]
}

확인란 유형

변수 개체의 유형이 “checkbox”인 경우 개체의 value 특성을 사용해서 사용자가 확인란을 선택할 때 설정되는 값을 지정합니다. 값은 부울 값이어야 합니다.

이름 유형 댓글
값 부울 true 또는 false

예

{
  "identifier": "scoped_hc_search",
  "type": "checkbox",
  "description": "scoped_help_center_search_description",
  "label": "scoped_help_center_search_label",
  "value": true
}

파일 유형

변수 개체의 유형이 “file”이면 설정 창에 파일 업로더 제어가 추가됩니다. 이 변수 유형은 value 특성을 가지지 않습니다. 예:

{
  "identifier": "community_image",
  "type": "file",
  "description": "community_image_description",
  "label": "community_image_label"
}

value는 시스템에서 정한 파일 URL입니다.

사용자가 다른 파일을 업로드할 때까지 사용할 기본 테마 파일을 제공해야 합니다. 기본 파일의 이름은 변수의 식별자와 일치해야 합니다. 테파 파일에 있는 settings 폴더에 파일을 저장하세요. 예:

테마 파일에 URL이 예상되는 곳에는 파일 변수를 사용하세요. 예:

style.css

.community_banner {
    background-image: url($community_image);
}

페이지 기본서식

<img src="{{settings.community_image}}">

범위 유형

변수 개체의 유형이 “range”이면 설정 창에 슬라이더 제어가 추가됩니다. 예:

사용자가 슬라이더를 움직여서 설정하는 값의 범위를 지정할 수 있도록 범위 변수는 min과 max 특성을 포함합니다. 이때 값은 정수여야 합니다.

예

{
  "identifier": "font_size",
  "type": "range",
  "description": "font_size_description",
  "label": "font_size_label",
  "min": 70,
  "max": 150,
  "value": 100
}

번역

설정 창에 보여지는 문자열은 모두 translations에 정의되어 있으며 특성 이름과 값으로 구성됩니다. 예:

"text_color_label": "Text color"

특성 이름은 임의로 정해지므로 원하는 이름으로 지정할 수 있습니다.

번역은 테마의 루트 폴더에 있는 translations 폴더에 언어 고유의 JSON 파일에 저장됩니다.

/ translations
   - en-us.json
   - es.json
   - fr.json
   - ...

각 파일은 번역의 목록을 가진 JSON 개체로 구성됩니다.

en-us.json

{
  "brand_color_description": "Brand color for major navigational elements",
  "brand_color_label": "Brand color",
  ...
}

설정 창에서 레이블과 설명을 지정하기 위해 번역을 사용합니다.

레이블과 설명에 대한 문자열을 지정하려면 다음과 같이 하세요.

  1. translations 폴더에서 헬프 센터의 기본 언어에 대한 JSON 파일을 찾습니다. 예: en-us.json

  2. 기존 특성의 값을 업데이트하거나 새로운 특성을 추가합니다. 예:

    {
  "text_color_label": "Text color",
  "text_color_description": "Text color for body and heading elements",
  ...
}

  3. 변수에서 변역 특성 이름을 "label" 또는 "description" 속성의 값으로 사용합니다.

    "variables": [
  {
    "identifier": "color_text",
    "type": "color",
    "label": "text_color_label",
    "description": "text_color_description",
    "value": "#0072EF"
  },
  ...
]

    변수 개체를 참조하세요. 특성을 만들거나 특성 이름을 변경하는 경우 변수를 업데이트하세요.

설정 창에서 레이블과 설명을 번역할 수 있습니다. 번역된 문자열를 직접 제공해야 합니다.

레이블과 설명을 번역하려면 다음과 같이 하세요.

  1. translations 폴더에서 추가 지원하고자 하는 언어에 대한 JSON 파일을 찾습니다.

  2. 기본 번역 파일에 정의되어 있는 특성 이름을 복사합니다. 예:

    {
  "text_color_description": "",
  "text_color_label": "",
  ...
}

  3. 각 특성에 대해 번역된 문자열을 지정합니다. 예:

    fr.json

    {
  "text_color_description": "Couleur du texte pour les éléments du titre et du corps",
  "text_color_label": "Couleur du texte",
  ...
}
3
맨 위로 돌아가기

0 댓글

댓글을 남기려면 로그인하세요.

관련 문서

Zendesk 제공