노코드로 바이럴 콘텐츠 만들기
당신의 협업 유형과 어울리는 보드는? 유형 테스트 제작 과정
현재 저는 PARD라고 하는 IT 연합 동아리를 기획하고 운영 중에 있습니다. PARD는 실리콘밸리의 가치 중 하나인 Pay it Forward를 실천하고 확장하기 위해서 만들어진 동아리로, 현재 필자가 재학 중인 한동대학교에서 시작해 대경권으로의 확대를 목표로 하고 있습니다. 이번 유형테스트는 PARD의 홍보 및 Building in public을 위해서 진행한 프로젝트입니다. 간단한 유형테스트를 제작하고 활용할 생각이 있다면 작성한 내용을 통해서 조금이나마 시행착오 없이 진행할 수 있으면 좋겠다는 생각에 이렇게 공유하게 되었습니다.
목차
1) 기획 과정
2) 노코드 툴 기반 테스트 제작
3) 피드백 반영 및 기능 보완
4) 결과 및 회고
저는 예전부터 혈액형, 운세, MBTI까지 사람의 성격이나 경향을 규정하는 것과 관련해서 정말 아무런 관심이 없었습니다. 사실 지금도 나는 내 MBTI의 특징을 잘 모른다.
하지만 회의 때 PARD의 홍보 방안에 대한 논의를 진행하다가 비용 대비 효과를 따졌을 때 효과적으로 활용될 수 있다고 생각했던 것이 MBTI, 즉 성격 유형 테스트였습니다. 그래서 자신의 협업 유형을 알고 잘 맞는 팀을 알아볼 수 있는 '협업 유형에 맞는 서핑보드 찾기'를 기획하게 되었습니다.
해당 유형 테스트는 제목에서 알 수 있듯이 개발자 없이 기획자와 디자이너 두 명이서 완성했습니다.
아마 일잘러 장피엠님과 애드샐러드 대표이신 하희철 님을 통해서 노코드를 접하지 못했다면 이런 시도를 할 생각조차 해보지 못했을 것이기에 이 기회를 빌어 감사인사를 표합니다.
1. 기획 과정
왜 시작하게 됐어? 어떤 과정을 거쳤어?
독특하면서도 거부감이 없는 게 뭘까.....유형 테스트 제작에 돌입하면서 기획 단계에서 가장 고심했던 것은 이미 유형 테스트, MBTI 콘텐츠는 차고 넘치게 존재했기 때문에 '어떻게 하면 신선하면서도 유형 테스트로서의 기능을 잃지 않을까?'였습니다.
이미 나올 대로 나온 다양한 콘셉트들(붕어빵, 크리스마스 등)을 피하면서도 PARD라는 단체의 독특함을 녹여내야 하고, 유형 테스트만의 특성인 흥미와 정확성을 고려해야 했습니다. 그래서 목표를 명확하게 하고 보다 체계적으로 접근하기 위해 기획 단계를 아래와 같이 구분했습니다.
1. 기존 유형테스트 리서치
2. 목적과 특성에 맞는 콘셉트 설정하기
3. 정해진 내용에 맞게 내용 만들기
1. 기존 유형테스트 리서치
MBTI를 능가할 심리 테스트는 과연 나올 것인가원래는 다른 기준에 따른 유형 테스트도 많이 생기고 있어서 너무 흔한 MBTI가 아닌 다른 기준을 활용한 유형테스트를 진행하고 싶었습니다. 하지만 콘텐츠 제작에 투입할 수 있는 시간이 제한된 상황이기도 하고, 기존에 나온 테스트들 대부분이 MBTI를 기반으로 구성되어 있다 보니 다른 유형 테스트는 자료가 많이 부족해 최종적으로 MBTI 결과를 기반으로 한 유형 테스트를 제작하는 것으로 결정했습니다.
먼저 검색해서 찾아볼 수 있는 거의 모든 유형테스트를 모두 확인하고 MBTI별로 가지고 있는 특징들에 대해 정리를 진행했습니다. 특히나 협업과 관련해서 활용할 수 있는 내용이 포함되어 있는 테스트와 MBTI에 대한 설명을 조사해 활용할 수 있는 단순한 형태로 변환했습니다.
2. 목적과 특성에 맞는 콘셉트 설정하기
리서치를 마무리한 후 PARD라는 단체의 이름과 협업 유형이라는 주제, 이렇게 두 가지 요소를 가지고 뻔하지 않은 테스트를 제작하기 위해 독특하면서도 너무 생소하지 않은 콘셉트가 필요했습니다. 이때 각 직무 간에 팀을 이뤄서 다가오는 문제를 해결해 나가는 이미지에서 착안해 파도를 헤쳐나갈 때 활용하는 서핑보드를 선택하게 되었습니다.
확인해 보니 보드의 종류도 다양하고, 각 보드의 모양이나 구조에 따라 그 쓰임새도 구분되기 때문에 유형에 따라 결과가 나뉘는 MBTI와 결합하면 흔하지 않지만 흥미로운 결과를 기대할 수 있지 않을까 생각했습니다.
이후 개별적 특징을 가지는 보드와 그 특징을 모두 정리하고 MBTI의 특징과 비슷한 부분들을 찾아 각 보드와 MBTI를 연결했습니다. 또한 함께 협업한 디자이너와 논의를 거쳐 친숙하지만 귀여운 오브제인 동물을 활용하기로 결정하였습니다. 추가로 아래 보드의 형태를 다르게 삽입해 사용자가 조금이나마 각 보드의 차이점을 시각적으로 체감할 수 있게 만들었습니다.
3. 정해진 내용에 맞게 내용 만들기
1) 질문
콘셉트가 정해진 이후 진행해야 할 부분은 질문과 결과, 캐릭터 제작이었습니다. 질문의 경우 직무, 협업과 관련 있으면서도 신뢰감을 주기 위해 어느 정도 고민할 수 있는 것들을 선정했습니다. 또한 질문에 대한 집중도를 높이기 위해 질문마다 상단에 아이콘을 추가해 질문이 어떤 내용을 포함하고 있는지 한눈에 할 수 있게 구성했습니다.
2) 결과 내용
결과의 경우 보드라는 콘셉트를 정하고 각 보드와 MBTI를 연결했기 때문에 제목의 경우 결과를 최대한 요약하고 반영해지었으며, 자신의 유형 물론 잘 맞는 팀까지도 확인할 수 있게 구성했습니다.
3) 캐릭터
마지막으로 캐릭터는 MBTI에 따라 총 16개의 동물로 구성했습니다. 그리고 각 이름은 MBTI 유형의 특징을 포함한 수식어 + 보드의 종류로 완성했습니다. 캐릭터의 디자인은 본인이 소장하거나 쉽게 공유할 수 있도록 친근하면서도 귀여운 느낌으로 만들기 위해 노력했습니다.
그중 하나를 살펴보면
아이디어가 넘쳐 보이는 귀여운 부엉이INTP는 장기적 사고가 가능하고 다채로운 아이디어를 도출한다는 특징이 있어서 이를 제목으로 삽입했고, 생각을 확장하고 복잡한 문제에 대한 분석에 강점을 보이기 때문에 이를 축약해 '분석가'라는 수식어를 붙이게 되었습니다. 아래는 전체 결과입니다.
각 동물의 수식어마다 해당 MBTI의 특징을 축약한 수식어들이 포함되었습니다.
2. 노코드 툴 기반 테스트 제작
뭘로, 어떻게 만들었어?
국산 노코드 툴 waveon위에서 언급했듯 프로젝트 구성 인원이 기획자, 디자이너 단 둘이었고 시간도 여유롭지 않아서 자체 개발이 아니라 노코드 툴을 활용하기로 했습니다. 도다와 웨이브온 중에 많이 고민했었는데 기능 삽입에 대한 자유도, 무료 사용 시 허용되는 기능의 범위로 인해 웨이브온을 선택했습니다. 웨이브온의 경우 선택지 별로 점수를 부여해 사용자의 선택에 따라 지정한 결과가 도출되는 로직이 이미 구현되어있어 질문과 결과만 준비한다면 복잡한 개발 과정 없이 사용할 수 있다는 장점이 있었습니다.(무료는 앱을 한 개만 생성할 수 있어 예시를 보여드릴 수가 없네요...ㅠ)
waveon 제작 페이지기본적으로 페이지별 제작을 지원하고 있으며, 단순하게 본다면 피그마와도 비슷한 형태를 가지고 있다고 볼 수 있습니다. 오브젝트들은 원하는 곳에 자유롭게 배치가 가능하며 이미지 삽입이나 링크 같은 경우에도 손쉽게 삽입할 수 있습니다. 질문 페이지와 같이 반복적인 패턴을 가지는 페이지의 경우 하나의 페이지를 만든 후 질문 개수에 맞게 페이지를 복제헀습니다.
로직 기능의 경우 각 문항을 클릭했을 때 다음 페이지로 넘어가거나, 특정 결과에 점수를 추가하는 등의 로직을 설정할 수 있습니다. 특히 url 삽입이나, 링크 공유, 카톡 공유, 참여자 수 확인 등의 기능들도 손쉽게 구현할 수 있어서 원하는 시일에 춰 빠르게 완성할 수 있었습니다.
3. 피드백 반영 및 기능 보완
제작이 완료되고 제가 포함되어 있는 노코드, 기획자 커뮤니티와 주변 현업자 및 학생들에게 직접 테스트를 제공하고 피드백을 받았습니다. 아직까지 미숙한 부분이 많은지라 다양한 피드백이 있었고, 기왕 하는 김에 모든 피드백을 최대한 반영하고자 했습니다. 제시된 피드백을 카테고리화하면 다음과 같이 정리할 수 있을 것 같습니다.
1. 콘텐츠 부분
2. UI/UX 부분
1) 콘텐츠 부분
보드에 대한 부연 설명과 짧아진 선택지먼저 콘텐츠에서의 피드백은 보드와의 연관성 부족, 질문과 선택지의 길이, 다른 결과 확인 불가능 이렇게 세 가지였습니다. 피드백에 따라 먼저 결과별로 각 보드의 특징을 넣어서 내가 왜 이 보드와 연관성이 있는 결과가 나오게 되었는지 확인할 수 있도록 했습니다.
또한 선택지가 길어질수록 사용자가 고민하는 시간이 길어지게 되는데 스낵 컬처의 특징을 가지고 있는 유형테스트에 맞지 않다고 판단이 되었습니다. 그래서 긴 선택지들을 최소화하고 질문에 부연설명을 덧붙여 문제를 조금 오래 읽는 한이 있더라도 결정을 빠르게 해 진행 속도에 신경을 썼습니다.
다른 결과를 확인하는 경우 다른 결과가 무엇인지, 참가자 중 나와 같은 결과가 나온 사람이 전체 중 어느 정도 비율을 차지하고 있는지 관련 정보를 제공하려고 했으나 시간적 제한으로 인해 반영하지 못했습니다. 하지만 기존 기능들을 활용한다면 충분히 추후에라도 구현이 가능하지 않을까 생각합니다.
2) UI/UX 부분
반응하지 못한 웹 디자인과 카카오 디벨로퍼UI에서는 생각지 못한 이슈들이 굉장히 많이 발견되었습니다. 모바일 환경에서 제작하면 바로 웹으로 적용되는 줄 알았는데 웹으로 들어가 보니 배치가 뒤죽박죽이거나 문단 사이즈가 달라 텍스트가 디자인을 뚫고 나오기도 했습니다. 카카오톡 공유와 썸네일의 경우에도 제가 웨이브온에서 커스텀한 부분이 충돌해서 카카오 디벨로퍼를 통해 JS 키를 받아서 수동으로 적용했습니다. 혹시나 카카오톡 공유 기능을 활용하실 때는 배포 전 꼭 확인하시면 좋을 것 같습니다.
드디어 협업 유형 테스트 완성!!!그렇게 오랜 기획과 제작, 피드백 반영 기간을 거쳐 하나의 콘텐츠를 완성할 수 있었습니다. PARD의 첫 바이럴 콘텐츠이자 노코드로 완성해 본 제대로 된 아웃풋이기에 퀄리티나 기능적인 부분에서 만족할 순 없어도 나름대로 뿌듯한 마음을 만끽할 수 있었습니다.
4. 결과 및 회고
그래서 어떤 걸 얻었니?
2월 4일 토요일에 베타 버전 겸 협업 유형 테스트를 발행했습니다. 사실상 타깃으로 하는 사용자 풀이 워낙 좁고, 페이스북이나 기타 광고를 붙이지 않은 채 진행했기 때문에 큰 기대를 하지 않았으며 다음과 같은 추이로 흘러갔습니다.
2월 4일 토요일 - 기존 소속 커뮤니티를 통해 800여 회 플레이
2월 5일 일요일 - 타깃인 한동대학교 학생 및 지인을 통해 1500회까지 플레이 상승
그 후 일주일 간 - 지속적인 유입을 통해 2000 후반까지 플레이
현재 - 지속적으로 플레이 수가 감소하면서 3000회에서 사실상 정지
MBTI에 전혀 관심이 없는 사람이 만든 테스트다 보니 걱정이 많이 앞섰는데 생각보다 많은 분들의 관심과 피드백을 받으면서 감사함을 느꼈고, 부족한 부분들 또한 다시 한번 돌아보게 되었습니다.
출처 : 대학일기(작가님 좋아합니다.)돌아보면서 세 가지가 가장 아쉬웠습니다. 첫 번째는 세부적인 디테일이었습니다. 조금 더 썸네일을 디테일하게 만들었다면, 인터랙션이 다채로웠다면, 워딩에 신경 썼다면 또 하나의 독특하고 관심 가는 콘텐츠가 되었을 텐데 하는 마음이 들었습니다. 두 번째는 데이터였습니다. GA가 아니라면 핫자라도 탑재해서 사용자들이 어떻게 즐기는지, 어떤 부분에서 경험이 떨어지는지를 확인했다면 더욱 의미 있는 프로젝트가 되었지 않을까 하는 생각입니다. 마지막은 사용자 경험이었습니다. 단순히 유형 테스트가 유명하니까 해보자!로 시작되었다 보니 웹과 앱의 디자인 차이, 어떤 경로로 접속해서 공유로 이어지는지에 대한 고려가 많이 부족했습니다.
아쉬움을 단지 아쉬움으로 남기는 것이 아니라 이렇게 기록하고 곱씹으면서 더욱 사용자 중심적이고, 규모 있고 체계적으로 프로젝트를 진행할 수 있는 역량을 갖추기 위해 노력해야 할 것 같습니다. 이 아쉬움이 다음 프로젝트에서 더 큰 원동력이 될 것이라고 생각합니다.
앞으로도 기획, 개발, 디자이너가 한데 모여 Pay it forward를 실천하고, 제대로 된 협업을 경험하고 보다 성장하고 발전할 수 있는 PARD에 이야기에 귀 기울여주시면 감사하겠습니다!
PARD가 궁금하다면? - https://han.gl/ABxLGL
