brunch

라이킷 8 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 번개거북 Feb 17. 2023

Typeform 및 short.io 활용기

토익 스피킹 오픈 베타 서비스 개발

개발을 하자니 시간이 많이 걸릴 것 같은데 어떻게 하지?

계속 유지를 해야 되는 서비스 기능은 차근차근 잘 설계하고 개발을 하는 것이 중요하지만, 짧은 기간에만 필요한 기능이라면 그 기능의 구현 난이도 및 사용자 경험에 미치는 영향 정도에 따라서 선택할 수 있는 옵션이 다양할 수 있을 것입니다. 그 여러 가지 선택 중에 개발자 리소스를 많이 사용하는 것보다는 SaaS 서비스를 통해 효율을 높이는 선택을 했던 내용의 일부를 소개하려고 합니다.

얼마 전에 산타 토익 스피킹 서비스를 오픈했는데요, 오픈 베타 기간 동안 사용자에게 설문을 하게 되었습니다. (제가 PM 역할로 몇 달간 작업을 했습니다) 그리고 좀 더 많은 설문 결과를 얻기 위해서 결과 리포트의 일부만 노출하고 나머지는 숨겨둔 이후 설문을 완료하면 정보가 보이도록 하는 흐름을 기획하였습니다.

이쯤되면 더이상 읽지 않을 분들이 계실 것 같아 일단 광고 하나.

위에 얘기한 토익 스피킹 서비스에 대한 안내 공지라도 읽어주십사 굽신 굽신^^

>> 링크 : https://myhong.link/santa.speaking

링크가 특이하다고 생각하실 분도 계실텐데요, 실제 공지 링크는 훨씬 길지만 이렇게 짧게 주소를 바꾸는 서비스를 또 다른 용도로 활용하는 방법을 아래에서 좀 더 설명을 드리겠습니다.

실제 서비스 화면의 일부와 구성에 대한 것들을 이제 말씀을 드리겠습니다.

< 모자이크는 실제 서비스에는 없음. 아래 부분 상세를 막아놓고 설문하기 버튼을 노출 >

토익 스피킹 모의고사를 다 풀고 나서 결과 페이지에 오면, 본인의 점수를 확인하고 세부 해설을 볼 수 있게 됩니다. 그리고 무료로 서비스를 제공하고 있는 기간 동안 사용자에게 피드백을 받기 위한 설문을 준비했습니다.

이때 단순히 설문을 받기만 하면 되는 것이 아니라 사용자가 설문을 완료하면 즉시 막아두었던 화면 일부를 열어주는 기능이 필요했습니다. 무엇이든 직접 만들면 가능하겠지만, 외부 서비스를 활용해서 빠르게 적용하기를 희망했기 때문에 적절한 도구를 찾는 리서치를 진행했습니다.

참고로 저희가 선택한 설문 도구인 typeform은 여러 기능이 많은 장점이 있지만, 당연히 그에 맞는 비용이 필요합니다. 저희의 경우 개발자 및 디자이너 리소스를 쓰는 것보다 확실히 유리한 상황이었기에 회사에서 비용 품의 승인이 되어서 사용할 수 있었습니다.

< typeform 가격 >

구현에 필요한 요구사항을 만족하기 위한 web hook의 경우 모든 plan에서 가능했지만, 얼마나 많은 사용자 응답을 받을지와 디자인 요소 등에 대한 부분도 plan 선택에 고려가 되었습니다.

< plan 선택에 고민했던 요소 일부 내역. 실제로는 굉장히 많은 기능 목록이 있음 >

Webhook 자체에 대한 것은 이번 글에서는 다루지 않을 내용이지만 아래처럼 쉽게 동작에 대한 결과를 확인하는 내부 기능도 지원하고 있다는 것은 소개를 해둡니다.

< webhook 발송 이력 확인이 가능 >

위의 화면에 빨간색으로 표시를 해둔 부분은 외부 도구인 typeform에서 적절한 값을 개발 시스템으로 전달하기 위해 미리 설정된 값들인데요, 아래에서 볼 수 있는 것과 같이 Hidden Fields 값을 통해 여러개의 값을 정의할 수 있습니다. 간단하게 설명하자면 저희 서비스에서 typeform 설문을 띄울 때 해당 필드값을 추가를 해두면, 설문이 쭉 진행된 이후 완료가 되는 시점에 처음에 받았던 값들을 돌려주면서 점수/해설 화면에서 자물쇠로 막혀 있던 영역을 열어주는 등의 동작을 수행하는데 사용하게 됩니다.

이번에는 짧은 URL을 만들어서 활용한 부분을 소개해 봅니다. 사실 bit.ly 가 가장 유명한 서비스일텐데요, 이미 회사에서 주요한 운영 요소로 쓰이고 있는 부분이 있기도 했고, 혼동없이 가볍게 사용하고 중단할 수 있는 다른 서비스를 찾아서 활용을 해보고자 short.io 를 선택했습니다.

< short.io를 통해 타깃 url 관리를 일원화하는 구조 샘플 >

위의 화면을 보고 이미 감을 잡으신 분이 계실지 모르겠는데요, typeform에서 설문이 완료된 이후 갱신되어야 할 서비스 주소가 여러 곳인 경우를 처리하기 위한 방안이 필요했습니다.

위에 예제에서는 개발을 담당하는 개인 컴퓨터 주소인 localhost:3000 이라는 곳으로 설문 결과를 전달받기 위한 설정인 것이죠. 물론 동일한 내용을 가지고 있는 typeform 설문을 여러개 만드는 것이 사실상 더 쉬울 수도 있지만, 서비스 오픈 직전까지 설문 내용에 대한 변경이 있었기 때문에 하나의 설문 폼을 두고 작업을 하는 선택이 필요했습니다.

< url 에 hidden field 값을 포함하도록 설정 >

개발을 아시는 분들에게는 너무나 쉬운 내용이고, 반대로 개발과 관련이 없는 분들에게는 어려운 내용일텐데 이 부분의 팁은 사실상 이런 툴을 도입하고 설정해야 할 일이 있는 분에게는 도움이 될 정보라서 남겨둡니다.

http 로 시작하는 주소 바로 뒤에 /@env 라는 값을 넣어서 link를 만들도록 한 내용인데요, bit.ly 나 short.io 에서 주로 사용하는 주소를 단축하는 기능 외에 동적으로 할당된 주소로 분기를 하는 것도 가능하다는 팁을 활용해보셔도 좋을 것 같습니다.

p.s) 설문 결과를 바로 구글 시트에 연결하는 기능을 typeform에서 제공하고 있어서 간단한 통계로 바로 볼 수 있어서 편하네요. 물론 약간의 변환 작업은 필요했지만요.