Zendesk 테마 개발 환경 설정하기
우리회사는 Zendesk를 지식베이스 + 헬프데스크로 사용하고 있다. (http://support.sqlgate.com)
당시 디자이너가 없어서 기본 테마를 조금 바꿔 쓰고 있었는데 새롭게 조인한 시아(CHEQUER) 홍이 이대로 둘순 없다며 디자인 하겠다고 했다.
그래서 나는 헬프 데스크의 테마 수정 방법을 조사하기 시작했다.
기본적인 방법은 젠데스크 어드민에 기본 내장된 사용자 지정 테마 편집 기능을 사용하는 것인데, UI도 불편한 데다 “게시”를 해야만 볼 수 있기 때문에 개발하는 동안 쓸 수 있는 방법은 아니었다.
Google님께 Zendesk Theme라고 물어보니 젠데스크 공식 홈페이지에 다음과 같은 문서가 있었다. (https://support.zendesk.com/hc/en-us/articles/203664326-Customizing-your-Help-Center-theme-Guide-Professional-)
그리고 몇몇 문서를 읽고 로컬에서 편리하게 개발할 수 있도록 환경을 구성하기 시작했다. 젠데스크 공식 문서를 보면 중간중간에 빠진 내용도 많고, 문서가 너무 불친절해서 다시 한번 정리해본다. 개발 환경은 Mac 기준이며 준비물은 IntelliJ, Git, Terminal만 있으면 된다.
- 소스코드 내려받기
젠데스크 깃헙에 가보면 최근 업데이트된 기본 테마 파일이 있다. (https://github.com/zendesk/copenhagen_theme)
하지만 SCSS로 구성도 안되어 있고 src, dist 구분도 되어있지 않아서 작업하기에 조금 불편하다. 조금 더 뒤져보니 SCSS 구성에 Gulp 환경까지 만들어놓은 프로젝트가 있었다. (https://github.com/Cloudhuset/Zendesk-Guide-Theme-Boilerplate)
일단 해당 프로젝트를 Clone한 후 IntelliJ에서 열어놓았다.
2. ZAT 설치하기
ZAT는 Zendesk Aps Tools로 젠데스크 애플리케이션을 개발자 로컬 환경에서 개발할 수 있도록 도와주는 툴이다.
공식문서를 따라 하면 쉽게 설치할 수 있다. (https://help.zendesk.com/hc/en-us/articles/229489288)
3. 소스코드 빌드해보기
4. Watch 모드로 개발 모드 실행하기
5. ZAT로 작업중인 테마 미리보기
ZAT를 설정하기 위해서는 manifest.json 파일이 있는 위치에서 실행해야한다. dist 디렉토리에 보면 manifest.json이 있으므로 dist 폴더에서 아래 명령을 실행하면 된다.
젠데스크 도메인, 사용자, 패스워드 정보를 입력한다. 이때 주위할점은!!
** 반드시 젠데스크 어드민 권한을 가진 사용자로 로그인해야 하며, 브라우저에도 터미널에서 입력한 계정과 동일한 계정으로 로그인해놓아야 한다. 나 같은 경우는 공용 어드민 계정으로 터미널에 입력한 후 내 개인 어드민 계정으로 브라우저에 로그인해 놓았더니 계속 알수없는 에러가 발생했다.
계정 인증이 성공적으로 끝나면 Ready라는 메시지와 함께 URL이 표시된다.
특이한점은 로컬에 서버를 구동시킨 뒤, 젠데스크 리얼 서버를 통해서 내 로컬머신으로 접속하는데, URL이 실제 서비스하는 URL과 동일하다.
즉, “https://sqlgate.zendesk.com/hc/admin/local_preview/start” URL을 호출하면 브라우저 내에 쿠키나 Local Storage등에 프리뷰 모드로 동작하라는 정보를 설정해두고 내가 실행한 로컬서버에서 컨텐츠를 가져다가 보여주는 방식인 것 같았다.
아무튼, https://sqlgate.zendesk.com/hc/admin/local_preview/start 페이지를 호출하고 나면 로컬에서 내가 수정하고 있는 테마가 화면에 보이게된다. 로컬 프리뷰 화면 대신 실제로 서비스되는 헬프 데스크를 보기 위해서는 https://sqlgate.zendesk.com/hc/admin/local_preview/stop을 호출하면 원래대로 돌아온다.
특별히 어려운 내용은 없는데 공식문서가 불친절한 데다 세세한 설명들이 부족해서 정리해봤다.
