이 문서는 Zendesk 헬프 센터에 개인화된 고유한 기능을 통합하는 문제를 해결하는 데 도움이 됩니다. Guide Enterprise 플랜에사용자 지정 페이지를 추가하는 과정을 안내하면서 React.js 및 Node.js와 같은 기술을 사용하여 사용자 지정 페이지를 개발, 번들 및 임베드하는 방법에 대해 설명합니다. 예를 들어 기존 헬프 센터 디자인에 잘 어울리는 사용자 지정 VIP Support 가입 페이지를 만들어 일관되고 맞춤화된 사용자 경험을 제공할 수 있습니다.
이 단일 페이지 앱 예에서는 프론트엔드에 TypeScript와 함께React를 사용하고 백엔드에Node.js를 사용합니다. Tailwind CSS는 앱에 스타일을 지정하고,Nodemailer는 성공적으로 가입한 신규 사용자에 대한 이메일 확인을 처리합니다.
React 앱이므로 이 예에서는 Webpack을 단일 파일로 컴파일하는 단계를 다룹니다. 헬프 센터 테마에 파일을 임베드하여 업로드합니다. 각 단계 집합에 대해 아래 섹션을 따르세요.
- 개발: TypeScript 및 Node.js와 함께 React를 사용하여 사용자 지정 페이지를 만듭니다.
- 번들: 사용자 지정 페이지를 번들로 묶도록 Webpack 구성
- 임베드: 프로젝트를 테마에 연동하여 헬프 센터에 게시하세요.
개발: TypeScript 및 Node.js와 함께 React를 사용하여 사용자 지정 페이지를 만듭니다.
사용자 지정 페이지를 통해 원하는 웹 기술 스택을 사용하여 개발할 수 있습니다. 많은 사람들이 백엔드 개발을 위해 Node.js와 함께 React.js를 사용하는 것을 선호합니다. 각 기술마다 미묘한 차이와 사양이 있습니다. 다음은 몇 가지 기술적 고려 사항입니다.
React
단일 페이지 애플리케이션 프레임워크이므로 사용자 지정 페이지용React 앱 만들기를 사용하세요. 위의 VIP Support 가입 페이지에서는 두 가지 요청을 합니다. 하나는 백엔드 인증을 위한 보안 토큰을 생성합니다. 다른 하나는 실제 데이터를 제출합니다.
예제 사용자 지정 페이지는 Zendesk 내에서 사용자 프로필 및 조직을 변경합니다. 페이지에서 비슷한 요청을 하는 경우에는 요청 전에 프런트엔드의 데이터를 확인하세요. 백엔드 유효성 검사는 필수적이지만 프론트엔드 유효성 검사는 특히 사용자 입력으로부터 얻은 데이터를 정리합니다.
사용자 지정 페이지는 헬프 센터의 일부일 뿐입니다. 모든 기능, 브랜딩 또는 스타일이 전체적으로 헬프 센터와 일치하도록 하세요.
다음과 같은 디자인 측면을 고려하세요.
-
인증: 상담사, 모든 인증된 사용자 또는 모든 사용자 중에서 이 페이지에 액세스할 수 있는 사람을 결정합니다.
-
탐색:
-
사용자 지정 페이지에서 헤더나 탐색을 개발하지 마세요. 계정의 Guide 팀에서 설정합니다. 사용자 지정 페이지는 현재 테마의 헤더 및 탐색을 상속합니다.
-
이 페이지를 헬프 센터 내에 적절하게 배치하세요. 기능과 마찬가지로 사용자 지정 페이지는 기본 헬프 센터 스키마 밖에 존재합니다. 사용자는 헬프 센터 기본서식의 링크나 홈 페이지와 같은 미리 정의된 페이지를 통해 이러한 페이지에 액세스합니다. 사용자 지정 페이지 URL은 다음 형식을 따릅니다.
https://{domain_name}/hc[/{locale}]/p/{page_name}
-
-
페이지 스타일: 헬프 센터 테마에 맞는 스타일 라이브러리를 선택하세요. 글꼴 및 색 팔레트가 기존 테마와 일치하도록 하세요.
-
이미지 처리: 사용자 지정 페이지를 수동으로 구성하고 번들로 제공하므로 이미지나 자산을 로컬에 저장하면 작동하지 않습니다. 임베드하기 전에 헬프 센터 테마에 업로드하세요. 단계별 가이드는 헬프 센터에 자체 테마 자산 사용하기 문서를 참조하세요.
Node.js
사용자 지정 페이지는 방문자에게 개인화된 경험을 구축할 수 있는 빈 캔버스를 제공합니다. Node.js 및 Express와 같은 도구를 사용하여 기존 시스템 및 데이터베이스에 직접 연결할 수 있습니다. 원하는 기술 스택으로 새 서비스를 만들어 헬프 센터와 연동하여 원활한 사용자 경험을 제공할 수도 있습니다.
예제 앱은 아래 함수를 사용합니다.
-
프론트엔드 양식에서 제출한 사용자 및 조직 정보를 수신하는 개발된Express API입니다.
-
API 요청을 Zendesk Support에 보내node-fetch로 관련 사용자 및 조직을 만들고 업데이트하세요.
-
validator.js를 사용하여 양식 제출 데이터의 유효성을 검사합니다.
-
Nodemailer로 양식이 성공적으로 제출되면 사용자에게확인 이메일 알림을 보냅니다.
서버 측 사용자 지정 페이지 서비스를 구축할 때에는 보안에 유의하고 API 라우트를 보호하세요. JWT와 같은 도구를 사용하여 요청 인증을 구축하여 애플리케이션을 보호하세요. JWT에 대한 자세한 내용은 JWT 웹사이트에서 JSON 웹 토큰 소개.
예제 앱은 아래 인증을 사용합니다.
-
양식 제출 API에 대한 요청에 권한을 부여하기 위해 JWT 토큰을 요청하는 프런트 엔드의인증 엔드포인트입니다.
-
jsonwebtoken 을 사용하여 JWT 토큰을 생성하고 확인하는 인증 모듈입니다.
구축하는 애플리케이션에 따라 CORS(Cross-Origin Resource Sharing) 정책을 고려하세요. 클라이언트 측에서 요청을 수신하는 라우트에 CORS가 사용 설정되어 있는지 확인합니다. 요청을 보내는 도메인을 알고 있는 경우에는 이러한 도메인을 명시적으로 지정하세요. 그렇지 않은 경우에는 와일드카드를 사용합니다. *. CORS에 대한 자세한 내용은 Mozilla 웹사이트의 교차 출처 리소스 공유(CORS).
번들: 사용자 지정 페이지를 번들로 묶도록 Webpack 구성
사용자 지정 페이지 개발을 완료했으면 Webpack을 사용하여 React 앱을 번들로 묶으세요. 모든 사용자 지정 페이지는 테마 내에 임베드되어야 하므로 사용자 지정 페이지를 단일 HTML 파일로 컴파일하세요. Create React App은 자체 번들 및 최적화와 함께 제공됩니다. 하지만 목표는 index.html파일의 예에는 자체웹팩 구성이 있어 이 프로세스를 간소화할 수 있습니다.
임베드: 프로젝트를 테마에 연동하여 헬프 센터에 게시하세요.
애플리케이션을 구축한 후 헬프 센터에 임베드하세요. 새로 만든 빌드 디렉토리로 이동합니다. 여기에 새 사용자 지정 페이지를 만드는 데 필요한 몇 가지 파일이 있습니다.
index.htmlstatic/css/bundle.min.cssstatic/bundle.min.js
The index.html파일은 사용자 지정 페이지에 넣을 코드입니다. 프로젝트에 대해 만들어진 JavaScript 및 CSS에 액세스합니다. 먼저 JavaScript 및 CSS 파일을자산으로 헬프 센터에 업로드합니다. 그런 다음 에서 코드를 복사합니다. index.html파일을 사용자 지정 페이지에 추가하고 자산의 파일 경로를 조정하세요.
아래에서 코드 편집기에 이것이 어떻게 나타나는지에 대한 예를 찾아보세요.
완료되면 사용자 지정 페이지를 게시합니다. 헬프 센터에서 콘텐츠를 관리하는 데 대한 추가 리소스는 Guide 리소스.
번역 고지 사항: 본 문서는 콘텐츠에 대한 기본적인 이해를 제공하기 위해 자동 번역 소프트웨어를 사용하여 번역되었습니다. 정확한 번역을 제공하고자 합당한 노력을 기울였으나 Zendesk는 번역의 정확성을 보장하지 않습니다.
번역된 문서에 포함된 정보의 정확성과 관련하여 질문이 있으시면 문서의 공식 버전인 영문 버전을 참조하시기 바랍니다.
댓글 2개
로그인하세요.