fairy-client v0.1.1

Fairy

웹 페이지 안의 작은 고객센터를 쉽게 구축해주는 서비스

Describe

Fairy라는 이름은 웹 페이지의 작은 요정이라는 뜻에서 지었습니다. 웹 페이지를 개발하면서 문득 드는 생각이, 만약 내가 만든 기능을 사용자가 제대로 사용하지 못한다면 그것만큼 아쉬울 때가 없을 것 같아 사용자에게 이러한 내용을 직관적으로, 그러면서도 UI를 해치지 않는 방법을 생각하다 개발하게 되었습니다.

형태는 어떤 페이지에서나 삽입시킬 수 있는 형태로 만들었습니다. 채널톡 혹은 Help Scout 같이 페이지 우측 하단에 이모티콘 같은 Element를 삽입시키는 형태에 영감을 받아 제작하였습니다.

Fairy는 웹 서비스를 제공하는 웹 페이지에서 서비스의 접근성을 높이는 데에 도움을 줄 수 있습니다. 서비스를 제공하는 입장에서 사용자가 서비스를 사용하는 데에 어려움을 겪는다면 도움말 혹은 힌트를 제공할 수 있습니다. Fairy는 이런 도움말 혹은 힌트를 제공하는 데에 도움을 주는 웹 서비스입니다.

Scenario

먼저, Fairy를 페이지에 삽입시키고 싶다면 사용자는 Fairy를 만들 수 있는 웹 페이지에 접속합니다. 약간의 정보를 입력하고 생성된 코드를 복사합니다. 그 코드를 Fairy를 삽입시킬 HTML에 붙여넣기 합니다. 페이지에 Fairy가 삽입됩니다.

Components

생성된 코드는 CDN에서 자바스크립트 파일을 불러오는 코드일 뿐입니다. Fairy는 크게 3개의 구성 요소로 나누었습니다.

Fairy를 생성할 수 있는 사용자 페이지와 실제 Fairy를 보여주는 App, Firestore에 저장된 데이터를 가져오고 처리하기 위한 서버로 나누어집니다. CDN에서 받아온 자바스크립트 파일은 Vue가 Webpack으로 빌드된 번들링 파일입니다.

이제 사용자 페이지에 삽입된 Fairy가 서버와 통신하여 정보를 주고 받습니다. 이 과정에서 입력된 정보와 Firestore에 저장된 정보가 일치하지 않으면 Fairy가 만들어지지 않습니다. Fairy를 만들 때 입력되는 정보는 다음과 같습니다.

• 페이지 이름
• 페이지 URL
• 테마 색상
• 컨텐츠

서버는 요청이 온 URL과 내부에 저장된 URL이 일치하지 않으면 Access-Control-Allow-Origin 헤더에 저장된 URL을 담고 응답합니다. 그렇기 때문에 등록된 페이지 외에서는 사용할 수 없습니다.

테마 색상은 Fairy가 가지는 전반적인 스타일을 지정할 때 사용됩니다. 버튼의 배경 색상 등 다양한 요소를 테마 색상으로 지정합니다.

컨텐츠는 Fairy에서 표시될 컨텐츠를 의미합니다. 마크다운으로 작성하여 사용자에게 도움말 혹은 힌트를 제공할 수 있습니다.

Messages

때로는 제공된 컨텐츠로 해결이 되지 않는 문제가 존재할 수도 있습니다. 사용자는 페이지 관리자에게 이러한 문제를 토대로 메세지를 보낼 수 있습니다. 이 메세지는 Fairy 사용자 페이지에서 확인하고 관리할 수 있습니다.