[Sharetreats-Viber-Chatbot] 담당한 기능들에 대한 정리

내가 담당한 기능은 다음과 같다.

1. Viber 메신저에서 사용자가 브랜드를 선택하면 해당 브랜드의 상품리스트를 제공
2. 해당 상품의 상세 정보 제공
3. 상품 구매 정보 순차적 입력

1. 브랜드 선택시 해당 브랜드의 상품리스트 제공

기업 측에서 제공한 UI디자인과 요구사항에서는 키보드 타입으로 브랜드들을 제공하고, 사용자가 원하는 브랜드를 클릭했을 때, 다음과 같은 기능을 수행할 수 있는 응답을 보내야했다.
1. 해당 브랜드의 상품 리스트 제공해야 함.
2. 각 상품들마다 대표 정보(상품 이미지, 브랜드명, 상품명, 가격)을 제공해야 함.
3. 각 상품들마다 상세 정보 조회를 요청할 수 있어야 함.
4. 각 상품들마다 구매 요청을 할 수 있어야 함.

이러한 응답을 포함하는 메시지 타입으로 viber에서 제공하는 메시지 타입 중 Rich Media type을 선택하였다.

해당 메시지 타입은 여러 개의 항목들을 가로로 스크롤하여 확인할 수 있도록 제공하며, 각 항목마다, 이미지, 텍스트, 버튼을 커스텀할 수 있도록 하였으므로 적절한 판단이었다.

이를 바탕으로 구현한 결과는 다음과 같다.

다음과 같이 브랜드 키보드 형태의 화면을 제공해 주고 브랜드를 선택하게 되면

다음과 같이 해당 브랜드의 상품 리스트들을 Rich Media의 형태로 출력하게 되며 브랜드명, 상품명, 가격(초록 글씨)로 표현되며 사용자는 Send Treats(구매)와 View More(상세정보)버튼을 통해 해당 상품에 대한 특정 요청이 가능하다.

2. 해당 상품의 상세 정보 제공

해당 기능은 상품 리스트에서 각 상품 항목마다 제공하는 기능으로 상품의 상세 정보를 제공하는 기능이다. 이를 바탕으로 다음과 같은 요구사항을 정리했다.

1. 상품의 상세 정보 (브랜드명, 상품명, 원가, 할인가, 상품 설명, 할인매장)을 제공해야 함.
2. 해당 상품의 구매 요청을 할 수 있어야 함.

이를 위해 메시지 타입을 고민했고 선택한 것은 Text Type의 메시지에 Keyboard를 포함하는 방식이었다. 그 이유는 Viber에서 보내는 요청을 숨기기 위함이었다.

Viber에서 보내는 요청을 숨긴다는 의미가 무엇이냐면, Viber 사용자가 보내는 요청은 Viber의 메시지 형태이기 때문에 이는 채팅창에 드러날 수 밖에 없다.

아까 전 상품 리스트를 조회하는 상황을 예시로 보면

다음과 같이 브랜드를 선택한다고 했을 때 foodpanda라는 브랜드를 클릭하게 되면 그 요청이 Text로 보여진다는 것이다.

이 때 문제가 될 수 있는 요인은
특정한 항목의 정보에 대해 요청을 할 때 백엔드 서버에 id를 제공하고 그 id에 따른 엔티티를 조회해서 그 항목의 정보를 제공하는 방식이라는 점이다.
즉 예를 들어 상품의 구매요청을 하게 된다면 "send treats ${product id}"의 형태로 서버가 요청을 받고 이를 파싱하여 해당 상품에 대한 구매 로직을 실행하게 된다.

하지만 이러한 상품의 id와 같은 정보를 사용자에게 드러내는 것은 적절하지 않았고, 이를 위해 선택한 것이 keyboard이다.

공식문서에서 제공하는 Keyboard 가 포함된 메시지의 형태 에시는 다음과 같다.

{
   "receiver":"01234567890A=",
   "min_api_version":7,
   "type":"text",
   "text":"Hello world",
   "keyboard":{
      "Type":"keyboard",
      "DefaultHeight":false,
      "Buttons":[
         {
            "ActionType":"reply",
            "ActionBody":"reply to me",
            "Text":"Key text",
            "TextSize":"regular"
         }
      ]
   }
}

이러한 형태로 응답을 보내게 되면 사용자는 hello world라는 텍스트와 Key text라는 키보드 버튼을 보게 된다.

여기서 활용한 것은 Buttons의 ActionType과 ActionBody이다.

ActionType이 reply의 키보드 버튼일 경우 사용자가 해당 키보드의 버튼을 누르게 되면 화면에 뜨는 것은 Key text이지만, 실제로 서버에 전송되는 것은 ActionBody에 들어있는 텍스트가 된다.

Buy 버튼을 누르게 될 경우

실제 채팅화면에 뜨게 되는 것은 "Text"의 값인 Buy이지만, 서버에서 받게 되는 값은 ActionBody의 값이 되므로, 이렇게 드러낼 수 있는 정보만 드러내도록 할 수 있다.

Rich Media의 Button도 ActionType과 ActionBody를 활용할 수 있어, 동일한 원리로 동작하게 된다.

3. 상품 구매 정보 순차적 입력

해당 서비스에서는 상품에 대한 구매를 원할 경우 다음과 같이 선물을 받을 사람의 이름, 이메일, 전달 메시지, 할인 코드를 순차적으로 입력하게 된다.

팀에서는 다음과 같이 순차적으로 입력을 하고 구매정보를 모두 입력하면 해당 상품의 구매정보를 출력하고 이를 확인하는 절차를 진행하는 것으로 플로우를 계획했다.

하지만 여기서 문제가 발생한다.

• 이전 구현 항목에서 언급한 대로 Viber에서의 모든 요청은 하나의 Controller로 들어오게 된다.
• Viber로부터 들어오는 요청, Callback은 text의 형태로 들어오기 때문에 구매 정보에 대한 입력과 같이 사용자가 임의로 입력하는 경우 해당 값이 어떠한 메타 데이터인지 (이메일인지, 이름인지, 메시지인지 등)을 파악할 수 없다.

이렇게 기존 웹 개발과 다른 점에서 발생한 문제점이 발생했고, 팀에서는 이러한 문제를 해결하기 위해 별도의 웹 사이트를 만들어서 한 번에 여러 입력값들을 받는 방법을 고려했다.

하지만 별도의 페이지로 이동한다는 것은 사용자 경험 측면에서 불편함을 주기 때문에 반영하기는 어려웠고 챗봇에서 해당 로직을 수행하는 방법을 모색해야 했다.

공식문서를 분석한 결과 Tracking Data의 활용하기로 결정했다.

아이디어 생각

Viber 메시지 타입에서 공통적으로 적용되는 파라미터들을 살펴본 결과 tracking_data라는 파라미터를 찾을 수 있었다.

해당 파라미터는 메시지와 사용자의 응답을 추적할 수 있는 일종의 메타데이터를 담는 용도로 활용할 수 있다.

Backend Server에서 Viber Server로 요청을 보낼 때 해당 요청에 대한 tracking_data를 보낸다면 사용자의 답변에도 동일한 tracking_data가 포함되서 오기 때문에, 어떤 요청에 대한 응답인지 확인할 수 있게 된다.

테스트 진행

다음과 같이 챗봇과 채팅을 하게 될 경우 아래와 같이 서버와 정보를 주고 받는다

server에서 tracking_data에 name이라는 식별값을 담아서 보내게 되면

다음과 같이 해당 tracking_data가 유지되기 때문에 어떤 요청에 대한 답변인지 확인할 수 있게 된다.

예컨대 '이름을 입력해주세요'라는 요청에 'name'이라는 tracking_data를 담아서 보내고 사용자가 그 메시지에 대한 답변을 하게 될 경우 해당 callback의 tracking_data에 역시 동일한 'name'이라는 값이 포함되기 때문에 이것이 이름을 입력하라는 요청에 대한 답변임을 확인할 수 있게 되는 것이다.

이렇게 구매정보를 입력하는 순차적인 요청에 각각 구분되는 tracking_data를 담아서 보냄으로써 답변에 대한 구분이 가능해지게 되었다.

CTO님과 질답 내용

이전에 다른 팀원 분도 마찬가지로 tracking_data에 대해 질문을 하셨고

CTO님께서 다음과 같이 답변해주셨다.

이를 바탕으로 내가 해결한 방법이 tracking_data에 대한 적절한 활용방안인지 확인하기 위해 위와 CTO님께 해당 문제 상황과, 상황에 대한 해결 방안에 대해 말씀드렸다.

적절한 해결이 되었다!