‘구글폼 게섯거라’… 오픈소스 사용자 조사 서비스 Formbricks 사용기
Awesome 설문 + Shiny 이식성 = 10점… 10점이요!
개발 업무를 하긴 하지만 종종 VoC를 위해 사용자 조사를 해야 할 때가 있다. 내 경우 업무 특성상 피드백을 다이렉트로 받기도 하고, 사용자가 많지는 않다보니 서비스의 피드백을 위한 용도보다는, 차라투에서 인턴십했던 친구들의 후기와 피드백을 주로 받는 편.
설문조사, 사용자 조사의 목적으로 이전 C사에서는 타입폼이라는 서비스를 사용했었는데 깔끔하고 좋다. 최소한의 기능은 무료이지만 뭐라도 각잡고 하려면 꽤 비용이 들어가는 서비스다.
대체제로 지금은 다들 많이 쓰기도 하는 구글폼을 주로 사용하는데 그렇게 막 이쁘지가 않다는 점에서 아쉬워 네이버폼이나, 모아폼 같은 유사 서비스들을 방황했다. (각 서비스별 장단점들은 명확하지만 내 기준으로는 이쁜가, 무료인가가 제일 고려사항)
그런데 어쩌다 Open Source Surveys & Experience Management Solution이라는 Formbricks를 깃헙에서 이전에 보게 되었고, 틈틈히 눈팅하던중 2일전 (7월 14일) V1.0을 릴리스 했기에 사용해 본 후기를 작성한다.
계정 생성 및 프로덕트 설정
폼브릭스 계정은 이메일 혹은 깃헙 계정으로 만들 수 있다. 나는 깃헙계정으로 만들었고, 로그인 이후 아래 이미지들처럼 온보딩을 “폼브릭스 설문”으로 진행한다. (스킵 가능)
온보딩의 맨 마지막으로, 팀의 프로덕트를 만드는 단계가 있는데 공동 작업을 할 수 있는 팀과 팀원을 설정을 통해 추가 할 수 있다. 프로덕트는 1개의 작업 단위라고 이해했다. 팀-프로덕트-서베이 의 구조.
서베이 생성
다른 서베이 조사와 마찬가지로 폼브릭스도 무료로 다양한 템플릿을 제공한다. (현재 38개인가 제공) 원하면 빈 템플릿으로 시작도 가능.
여기서 나는 shiny 어플리케이션에 심어지는 사용자 피드백을 받는 서베이를 만들고 싶었고, 아래 쪽에 Uncover Strentghs & Weaknesses를 선택했다.
서베이 생성 페이지는 위 이미지처럼 왼쪽에는 어떤 질문으로 서베이를 구성할지 설계 하는 페이지로, 오른쪽에는 왼쪽의 내용을 심었을때 어떻게 보여지는지 미리 테스트 해볼 수 있는 화면이 보여진다.
왼쪽에서 해당 서베이를 클릭하면 그 내용이 오른쪽 페이지로 바로 보여지는 것도 UX의 관점에서 아주 좋았다.
서베이의 Advanced Settings에는 버튼 라벨이나 답변에 따른 “로직 점프”, 그리고 아마 API나 웹훅으로 연결해 작업용으로 쓰일 ID를 지정하는 옵션이 있다.
추가 가능한 서베이 종류는 지금은 아래처럼 주관식, 객관식, 다중 객관식, NPS, CTA, Rating, 체크 (동의)가 있다.
여기서 CTA도 신기함. 외부 링크로 걸어도 되고, 로직 점프로 태워도 되고, 체크 처럼 여부만 서베이 대시보드로 확인해서 추후 액션도 가능할 듯 하다.
서베이 문항의 설정 말고, 서베이 “전체”의 설정이 좋은 의미로 골때렸는데, 서베이를 어디서 실행할 것인지 (링크 전달 / 앱에 심기 나중에 이메일 과 모바일 앱도 추가 예정), 서베이 대상을 userID나 이메일 혹은 커스텀한 변수로 필터링 하거나, 서베이를 사용자에게 언제 보여줄지, 마치고 나면 어떻게 할지 다시 하게 할지 등 세세한 것들을 조절할 수 있다.
서베이를 사용자에게 언제 보여줄지가 특히 신기했는데 가령 세션이 새로 시작되면, 이 페이지에 접속하면 등의 옵션이 있고 더 신기한건 세션이 몇번 열렸는지 같은 액션들이 폼브릭스 대시보드에서 각각 추적이 가능하다 ! (당연히 커스텀 가능)
배포 및 Shiny에 심기
폼브릭스는 오피셜하게 다른 서비스와 연동 되는 것은 아직 Next.js를 활용한 자스 앱과, 자피어 2개가 다이긴 하다. (페이지에 표기만 안되어 있을 뿐 문서나 다른 페이지에는 몇개 더 있음)
그런데 여기서 Javascript widget 설명 문서를 잘 뜯어보면, 꼭 NPM이나 폼브릭스 SDK를 활용하지 않아도 HTML의 <head> 태그를 사용해 앱에 심어 넣을 수가 있다는 것을 알 수 있다. 즉 폼브릭스는 Shiny dashboard에 심을 수 있다. (저 코드에는 폼브릭스 JS파일과 서베이의 id, 폼브릭스 api host 등의 정보를 전부 포함하고 있음)
애정하는 bslib을 활용하여, 대시보드를 만들고 위의 코드를 넣어 앱을 실행하면 바로 아까 만들었던 서베이가 나타나는 것을 확인할 수 있고 (서베이가 사용자에게 나타나는 조건이 조금 헷갈리긴 해서 액션들을 다 설정 함), 실제로 이 서베이를 마쳤을때의 결과는 저장되어 내 계정의 폼브릭스 대시보드에서 확인할 수 있다.
기타
- 프라이싱
보통의 서비스들이 시간이 지나면서 기능들을 추가하고 비용을 올리는 경우가 많다. 그런데 적어도 지금은, 폼브릭스의 경우 유료 (사용자수 상관없이 월 99달러)와 무료의 차이는 딱 하나, 서베이당 결과를 받는 수의 차이이다. (만약 서버에 도커로 셀프호스팅을 한다면 이것도 무료로 가능)
- 껍데기 설정 (Look & Feel)
서베이가 보여지는 위치 (좌우상하)를 커스텀 할 수 있고 메인 색상도 조절 가능하다. 단 색상은 원색이 그대로 나오진 않고, 좀 연하게 변환되서 적용됨. 그리고 보통 이런 서비스들이 powered by formbricks 같은 문구는 무료요금제에 필수로 박게끔 하는데 여긴 무료도 제거할 수 있다.
완전 번외로 고양이가 저렇게 동공 크게 하는 것은, 곧 냥냥펀치 때릴거란 신호다.
- 고객 지원
문서가 깔끔하게 잘 작성 되어 있으며, 디스코드와 깃헙을 메인 채널로 운영한다는 것이 신기하다. (아직 초기라서 그럴 수도)
- 서베이 작업 환경을 Production 과 Develop으로 구분해둔 것도 신기한데, 경험상 이게 크게 체감 될 정도의 서베이 일은 많지 않았어서 그냥 이런 기능도 있다 정도.
이상으로 오픈소스 서베이 솔루션 폼브릭스를 살펴봤고, 실제로 Shiny 앱에 심는 방법과 기타 몇가지 소개를 했다. 물론 다 소개한 건 아니기 때문에 관심이 있다면 한번 살펴 보는 것도 괜찮을 것 같다.
폼브릭스는 이전에 snoopforms라는 이름의 서비스로 시작했다. 그때도 메인 키워드는 The Open-source Typeform Alternative 였음 ㅋㅋ
