센스있는 서베이, 타입폼(Typeform) 리뷰 ① - 설문 만들기 편

구글 드라이브 내에서의 강력한 호환성과 인터넷만 연결되어 있다면 언제든 불러낼 수 있는 클라우드 기반 그리고 무료라는 삼위일체(?)의 강점이 어우러져 국내 뿐만 아니라 전세계 수 많은 사용자들의 많은 사랑을 받고 있는 구글 문서도구. 

그 중에서도 구글 폼(Forms) 또는 구글 설문지(Survey)로 불리우는 툴은 손쉽게 설문지를 만들어 공유/관리할 수 있어, 간단한 리서치나 정보수집의 목적으로 많이 사용되고 있습니다. 저 역시도 구글 폼을 이용해서 강의 참가자에 대한 신청을 받고 참가자 정보를 관리하고 있는데, 구글 폼 덕택에 쪽지나 이메일로 참가자 정보를 수집, 이를 다시 엑셀로 옮기는 등의 번거로운 작업이 사라져 한결 편리한 강의 참가자 관리가 가능해졌는데요, 사람이 참 간사하다고 했나요?

별 불평 불만 없이 이용하던 구글 폼이건만 우연찮게 접한 설문조사 툴, 타입폼(Typeform)을 접하고 보니, 구글 폼과 관련된 이런저런 아쉬운 점^[각주:1]이 나타납니다. 스페인 바로셀로나에 위치한 Typeform은 2012년도 설립, 2013년도에 베타버전이 개발되었고 2014년도 2월에 공식 런칭된 이후 불과 6개월 후인 2014년도 8월에 이용자 수 10만명을 돌파, 2015년도에 Series A 펀딩을 1,500만불(한화 약 167억) 투자를 유치, 현재에 이르고 있습니다.

www.typeform.com

Typeform은 기존의 딱딱하게 느껴졌던 설문조사 인터페이스를 과감히 탈피, 질문자 관점의 설문조사가 아닌 응답자 중심의 인터렉티브함이 돋보이는 설문조사 툴 입니다. 응답자 중심의 설문조사 툴이란 한마디로 설문조사의 양이 많더라도 그 전개과정에서 응답자에게 "언제 다 하나..."가 아닌 "재미있네?"와 같은 생각이 전달되어야 함을 의미합니다. 그런 관점에서 Typeform은 후자의 즐거움을 제대로 제공해주고 있으며, 높은 수준의 UX적 완성도를 통해 이를 뒷받침하고 있습니다.

하지만 세상에 공짜는 없죠.. 그리고 비쌉니다..

뿐만 아니라 질문자의 공통적인 니즈인 기능적 완성도 역시 지금까지 경험해 본 어떠한 설문조사 툴과 도 비교가 안될 만큼 강력하고 다양한 기능을 제공합니다. 사실... 이런 재미난 툴 경험은 오랜만이다보니 제가 좀 과하게 흥분한 감이 없지 않은데요. 백문이 불여일견이라고 했습니다. 하나씩 보면서 Typeform의 위대함을 살펴보도록 하고요. 임의대로 만들기 보단 강의 수강신청 폼을 만든다고 가정하고 하나씩 정리해보겠습니다.

간편한 가입과 휑한 초기화면... 뭥미?

Typeform(www.typeform.com) 서비스는 기본적으로 유료 서베이 폼 입니다. 때문에 모든 기능을 파워풀하게 이용하기 위해서는 월 30불^[각주:2]에서 59불의 정기결제를 해야 하지만, 제한된 인원에 일반적인 수준의 일회성 서베이라면 굳이 결제하지 않더라도 충분히 이용할 수 있습니다. 때문에 덜컥 결제부터 해놓고 이용하지 마시고 좀 사용해보신 후 필요하다면 유료로 이용하시는 것을 권유해드립니다.

먼저 가입부터 시작해보죠. Typeform 사이트에 들어가 이름과 이메일주소(ID), 비밀번호를 입력하는 간단한 가입절차를 거쳐, 가입을 완료하면 뭔가 휑한 초기화면이 나옵니다. 초기화면을 보고 살짝 당황하긴 했는데, 찬찬히 살펴보니 화면의 좌측은 설문조사의 목차와 Depth를 구분하는 영역이고, 우측 화면은 각각의 설문조사 폼이 배치되는 공간 입니다.

Typeform 가입 후 초기화면.

좌측 목차 영역 우측의 New typeform 타이틀이 쓰여진 카드는 작성할 빈 문서에 해당합니다. 카드 하단의 No responses는 설문지의 응답자 수를 의미하는데, 아직 설문이 없는 관계로 응답자가 없다고 나오고요. 그 옆의 ••• 메뉴를 클릭해보니, 해당 설문의 수정(Edit)과 미리보기(Preview), 복사(Duplicate), 설문결과(Results), 삭제(Delete) 등의 기능이 제공됩니다. 뭐 굳이 설명드리지 않아도 우측 상단의 +New typeform 버튼은 새로운 설문조사 카드를 생성하는 버튼이겠죠?

그럼 이제 카드를 클릭해서 설문조사를 만들어보죠. 카드를 클릭하면 아래와 같은 화면이 나오는데요, 화면 좌측의 툴 바 영역을 통해 질문 항목을 추가하고 각 질문에 따른 옵션 값을 지정해 줄 수 있습니다. 자세히 보니 4개의 블럭으로 표기된 아이콘을 제외하고는 다 비활성화 되어 있고, Pick a BLOCK or just type & press enter란 메시지가 깜빡입니다. 

Typeform의 설문작성 화면

블럭 모양의 아이콘을 클릭하면 때깔 고운 아이콘들이 쫙 펼쳐지는데, 각 항목들이 바로 설문조사를 만들기 위해 필요한 요소들 입니다. 각 항목들에 커서를 올려보면 물음표 코치마크가 나오는데, 코치마크에 커서를 올리면 해당 기능에 대해 간단하게 설명(물론 영어로)해주고 있습니다. 

Typeform 설문에 활용되는 폼(블럭) 화면

먼저 첫번째 블럭인 Welcome Screen 블럭을 클릭하거나 마우스로 드래그하여 중간 영역에 놓아주세요. Welcome Screen 블럭은 말 그대로 설문조사의 시작 페이지를 의미하는데, 마우스로 해당 블럭을 이동시키면 앞서 비활성화 되어 있던 좌측 툴 바가 모두 활성화 됩니다. 활성화되면 가장 먼저 몽키스패너 툴로 탭이 이동되며, 여기서 해당 블럭을 설정할 수 있습니다. (점선 부분)

Typeform 설문 시 설정메뉴.

설정 메뉴에서는 만들어진 블럭을 삭제하거나 상세한 설명(Description)의 추가, 변수(Variables) 설정을 통해 설문조사를 수행하는 개개인에게 각각 다른 메시지를 보여주거나 하는 설정이 가능합니다. 또한 Add 버튼을 눌러 타이틀 이미지나 Youtube, Vimeo 동영상을 삽입할 수 있고, 버튼의 타이틀 명을 변경할 수도 있습니다. 각각의 설정에 따라 우측 미리보기 화면이 변경되며, 텍스트는 좌측의 설정과 우측의 미리보기 중간 영역에서 입력할 수 있습니다.

참고로 변수설정은 저 역시도 아직 사용해보지 못했습니다만, 제공되는 가이드를 보니 개인정보를 식별하여 URL을 생성하고 개별 응답자 별 대응 메시지를 뿌려주는 기능으로 보입니다. 대상이 정해진 형태의 질문지라면 한 번 써봄직한 기능일 듯 하며, 차후 다시 다루겠습니다. 여기까지 잘 따라오셨다면 그 다음은 더 쉽습니다.

Typeform 설문 Intro 작성화면.

저는 위 이미지와 같이 메인 카피를 넣고 Descriptions을 활성화 시킨 후, 간단한 서브 카피를 넣었습니다. 그리고 이전에 만들어 두었던 youtube 동영상을 삽입 후, 버튼 이름을 변경해 두었습니다. 꽤나 번거로워 보이지만 실제 세팅 시간은 2분이 채 걸리지 않네요.

직관적인 인터페이스와 손쉬운 사용성

먼저 대문 페이지를 만들어 두었으니, 그 다음으로 강좌 안내를 위한 텍스트 안내 페이지를 만들어야 겠네요. 적당한 블럭을 찾아보니 Statement 블럭이 있네요. 뭔가 특별한 기능이 있는 것은 아니고, 서술형 메시지를 등록할 수 있습니다.

Typeform에서 Statement(서술) 블럭을 적용한 화면.

설정 탭의 기본 기능은 앞서 설명한 내용과 크게 다르지 않으니 넘어가고요, 서술형 메시지 등록이 끝나면 이제 본격적인 신청자 정보 수집 블럭을 만들어보도록 하죠. 가장 보편적으로 사용되는 설문조사 폼은 단답형 메시지를 수집하는 Short Text 블럭 일텐데요. 해당 폼은 응답자가 한 문장 수준의 단답형 메시지를 등록할 수 있습니다. Short Text 블럭을 불러온 후 타이틀을 입력했습니다.

그런데 Short Text의 설정에서 못보던 설정 값이 2개 생겼는데요, 해당 설문을 필수 입력으로 세팅하기 위한 Required 옵션과 최대 글자 수를 지정할 수 있는 Max characters 옵션이 그 것입니다. 두 옵션을 적절히 활용해서 블럭을 만들어보세요.  이름에 대한 수집은 필수, 글자 수는 따로 지정하지 않았습니다.

Typeform에서 Short Text 블럭을 적용한 화면.

그 다음, 참가자의 성별과 나이를 받을 생각으로 다시 Short Text 블럭을 호출했습니다. 이번엔 제가 알아보기 쉽게 Descriptions을 활성화하고 응답자가 등록할 형식을 예시로 작성해봤습니다. 그 다음 전화번호를 수집해야 하는데요. 어떤 폼을 불러와야 하나 고민하다가 Number 블럭을 불러왔습니다.

Typeform에서 Number 블럭을 적용한 화면.

Number 블럭은 숫자만을 입력할 수 있는 폼인데, Required와 Descriptions 옵션 뿐만 아니라 최소, 최대 글자 수 옵션을 설정할 수 있습니다. 안타깝게도 Number 블럭은 맨 앞자리 숫자에 0이 입력되지 않습니다. 한국 휴대폰 식별번호는 01x로 시작하는데 반해 해외의 경우 국가번호 다음에 0이 빠진 번호로 입력되는 점이 반영된 것 같습니다. 혹시나 Number 블럭이 불편할 것 같다면 Short Text을 사용해도 무관합니다. 

그 다음 신청자의 이메일 주소를 수집하려고 하는데요, Typeform에서 제공하는 폼을 살펴보니 Email 블럭이 있네요? Email 블럭은 무조건 이메일 주소만 입력할 수 있는 폼으로 이메일 주소의 형식이 제대로 입력되어야만 다음 단계로 이동할 수 있어 정확한 이메일 주소를 수집하는데 필요한 블럭이죠. 

Typeform에서 Email 블럭을 적용한 화면.

이메일 주소의 경우에도 Short Text 블럭으로 수집할 수 있지만, Typeform에서는 응답자의 이메일 주소와 연동한 다양한 기능 구현이 가능하니, Email 블럭을 활용하여 응답자의 이메일 주소를 수집하는 것이 좋습니다. 관련 기능은 "센스있는 서베이, 타입폼(Typeform) 리뷰 ② - 기능편"에서 자세히 다루겠습니다.

다음으로 Yes/No 의견수집 블럭입니다. 제 경우엔 수집한 응답자의 이메일 주소로 정기적인 뉴스레터를 발행하고 있습니다. 그런데 응답자의 동의 없이 무작정 메일을 보내게 되면 문제의 소지가 있으므로 그에 대한 동의 목적의 설문을 별도로 받고 있는데요. 마침 적당한 블럭이 있네요.

Yes/No 블럭은 특별한 설정옵션이 없으니, 해당 설문의 타이틀을 작성해주고 Required와 Descriptions 여부를 선택해주면 되고, 필요에 따라 이미지나 동영상을 등록할 수도 있습니다. 그 다음 참가유형에 따라 개인 참가자와 법인 참가자를 구분하려고 하는데요, 이때 사용할 만한 블럭이 Multiple Choice 블럭입니다. 

Typeform에서 Multiple selection 블럭을 적용한 화면.

해당 블럭은 2개 이상 복수 개의 보기를 설정하고 이 중 1개 혹은 2개 이상의 선택할 수 있는 기능을 담고 있습니다. Multiple Choice 블록 생성 후 설정 메뉴를 보니 앞서 언급되지 않았던 옵션이 몇 가지 있네요. 먼저 Multiple selection^[각주:3] 옵션은 1개 이상의 보기를 멀티로 선택할 수 있는 옵션입니다. 

그 아래에 Randomize 옵션이 있는데, 해당 옵션은 보기의 노출순서를 랜덤하게 조정하는 기능입니다. 어떤 사람은 개인자격 보기가 2번째 나올 수도 있다는 얘기죠. 보통 이 기능은 데이터의 신뢰성과 보안성을 높이기 위한 기능입니다. 예를 들어 인/적성 검사를 한다고 가정해보죠. 첫 번째로 인/적성 검사를 본 후 답안을 몽땅 외워서 두 번째 시험자에게 전달한다면 인/적성 검사의 신뢰도가 떨어질 수 밖에 없겠죠? 이를 보완하기 위한 목적으로 이 기능을 활용하게 되며, 일반적인 응답 목적이라면 사용할 이유가 없을 것 같습니다. 전 일반적인 응답인 만큼 이 기능을 비활성화 시켰습니다.

Typeform에서 Multiple Choice 블럭에서 옵션을 활성화한 화면.

Multiple selection의 세 번째 옵션으로 Add "Other" option 입니다. 해당 옵션은 제시된 보기 이외에 응답자에게 기타 의견을 듣고자 할 때, 적용하게 되는 옵션입니다. 예를 들어 회원탈퇴 시, 여러가지 이유를 받는데 그 중 기타 보기를 선택하면 주관식의 이유를 써 넣는 입력필드가 나오는 것과 동일한 기능입니다. 일반적인 보기 이외의 기타에 해당하는 의견을 수집하고자 할 때 유용한 기능일텐데 지금은 필요가 없을 것 같네요.

그 이외에 Vetical alignment 옵션도 있는데, 이 옵션의 역할은 잘 모르겠습니다. 혹시 이 옵션의 역할을 알고 계신 분이 있다면 아래 댓글에 코멘트 부탁드리고요. 설문조사 작성이 이제 거의 마무리 되었는데요, 이 시점에서 기능 하나를 사용해보려고 합니다. 앞선 설문 항목에서 개인자격과 법인자격에 대한 선택 항목을 뒀는데, 어떤 항목을 선택하느냐에 따라 각각 다른 화면을 보여주고 싶습니다.

Logic Jump 기능만 익히면 Typeform 마스터!!

위 설문 항목의 선택에 따라 이동시킬 두 개의 Statement 블럭을 생성했고, 여기에 Thank You Screen^[각주:4] 블럭을 생성해서 설문 종료에 따른 안내 메시지를 노출하려고 합니다. 생성해놓은 Statement 블럭과 설문 종료를 알리는 Thank You Screen 블럭에 각각의 메시지를 입력했습니다. 이제 분기설정을 해야하는데요, 여기서부터가 복잡합니다. 

Typeform의 툴 바에서 Logic Jump 기능을 선택한 화면.

먼저 이전에 등록해놓은 Multiple Choice 블럭을 클릭하고 화면 좌측 툴 바 위에서 네 번째에 있는 Logic Jump 메뉴를 클릭해주세요. 그 다음, 왼쪽 화면의 Add a Logic Jump 버튼을 클릭하면 When answering block 카드가 하나 생성됩니다. 이 카드를 통해 if 조건(...한다면)에 따라 그 다음의 액션을 어떻게 처리할 지를 설정할 수 있습니다.

Typeform의 Logic Jump에서 Add a Logic Jump을 선택한 화면.

앞서 Multiple Choice에서 개인자격와 법인자격 선택 항목이 있었죠? 위 화면처럼 사각형의 + 버튼을 누르면 또 하나의 동일한 카드가 생기는데, 여기서 분기처리를 설정할 수 있습니다. 먼저 개인자격 입니다. If 아래에 있는 Select Box를 선택해서 개인자격을 선택하고 그 아래에 있는 Then jump to Select Box를 선택해서 보내고자 하는 페이지를 선택해 줍니다.

Typeform의 Logic Jump를 이용해 이동할 페이지를 선택하는 화면.

그 다음 새로 생성된 카드에서 법인자격으로 선택 후 Then jump to Select Box를 선택해서 보내고자 하는 페이지를 선택해 줍니다. 그 다음, 화면 우측의 Logic을 마우스로 조정하여 보내질 페이지를 하나씩 클릭합니다. 

Typeform의 Logic Jump를 이용해 종료페이지를 선택하는 화면.

그리고 위 화면과 같이 좌측의 Always jump to Select Box에서 사전에 만들어놓은 종료 페이지(Thank You Screen 블럭)를 선택해줍니다. 그리고 또 다른 Statement 블럭을 선택에서 동일한 과정으로 세팅합니다. 그럼 위 화면과 달리 아래의 화면처럼 최종 이동경로가 동일한 Logic로 세팅되며 설문조사 문항 설정이 완료됩니다.

Typeform의 완성된 Logic 화면. 

이제 테스트를 해봐야겠죠? 화면 상단의 우측 부분에 View 버튼이 있는데, 클릭하면 등록해놓은 설문 문항이 제대로 동작하는지 테스트 해 볼 수 있습니다. 물론 화면 우측의 미리보기를 통해 바로 체크를 해 볼 수 있겠지만, 최종 점검 차원에서 다 만들어놓은 후 한 번에 체크해봐야 이상 여부를 정확하게 파악해 볼 수 있을 것 같네요. 

지금까지 Typeform을 이용해 응답자 정보수집 폼을 샘플로 만들어봤는데요, 이번 리뷰에서 사용된 예시는 비교적 단순한 정보수집 폼이었기 때문에 상대적으로 손쉽게 만들 수 있었습니다. 하지만 제대로 된 서베이 폼은 꽤나 많은 설계과정이 필요하기 때문에 설문조사 관련 지식을 공부해보시면 큰 도움이 될 겁니다. 다음 편에서는 Typeform의 부가 기능과 연계 기능을 통해 Typeform를 200% 이상 활용하는 방법을 정리해보겠습니다. 아... 맛보기 하나!!! 아래 버튼을 클릭해보세요!!

Test click!!

야메군. Web와 Mobile, Digital 카테고리 SME(Subject Matter Expert). 웹기획 18년차로 네이버 웹기획자 커뮤니티 "웹(WWW)를 만드는 사람들"에서 운영진으로 활동하고 있으며, 딴지일보를 시작으로 아이러브스쿨, 짱공유닷컴, YES24 등의 회사를 거쳐, 민간 IT 원천기술 연구소 "Valhalla Lab"에서 Pattern recognition과 Machine learning, Natural Language Processing 기술의 상업적 이용방법에 대해 연구. 현재 하나투어에서 데이터 기반 서비스 설계 중. 2016년 7월 7일, 웹/모바일 기획자의 업무능력 향상으로 위한 Guide Book "처음부터 다시배우는 웹기획(정재용, 최준호, 조영수 공저)" 출간.

1. 부가 기능을 이용 시, Typeform의 기능을 대부분 구현할 수 있습니다. 단, 전문적인 지식이 필요한 경우가 있습니다. [본문으로]
2. 30불은 1년 결제 시 비용이고 월 별 결제 옵션을 선택하는 경우 35불로 올라갑니다. [본문으로]
3. 해당 옵션의 활성화/비활성화에 따라 경고메시지가 나오는데, 아직 설문문항을 정리하는 중이라면 상관없지만 이미 설문이 시작되어 응답 데이터가 쌓여있다면 방식 변경 시 데이터가 삭제되니, 설문 시작 후엔 가급적 이 Multiple selection 옵션은 손대시면 안됩니다. [본문으로]
4. 무료버전인 경우엔 Default end 블럭만 사용할 수 있으며, 무료버전 사용 시 Thank You Screen 블럭을 선택하는 경우, 화면 좌측 상단의 열쇠가 Close 되며 다른 사용자한테 배포할 수 없습니다. [본문으로]