개발자 없이 MBTI 테스트를 만들었다

"이거, 개발자 없이 만들 수 있을까?"

MBTI 콘텐츠가 뜨겁던 시기였다. 아르바이트 공고에 MBTI 유형 기재를 요청하는 곳이 생길 정도로 유행이었다.

MBTI 아르바이트 공고

바이럴이 잘 되는 콘텐츠였다. 테스트 결과를 공유하고, 친구와 비교하고, SNS에 올리는 흐름이 자연스럽게 만들어진다. 그런데 주변에서 도는 테스트들은 죄다 개발자가 만든 것들이었다.

"개발자 없이 직접 만들어보면 어떨까?"

기획은 내가 할 수 있다. 구현은 HTML/CSS/JS로 할 수 있다는 걸 어렴풋이 알고 있었다. 그래서 실제로 만들어봤다. 테마는 슬램덩크로 정했다.

MBTI 구조 이해하기

기획이 명확하면 구현은 따라온다.
먼저 MBTI가 어떤 구조로 작동하는지 정확히 이해해야 했다.

MBTI는 2차 대전 시기, 여성들의 적합한 직업을 찾아주기 위해 고안된 성격 검사다. 핵심은 8가지 선호도를 4쌍의 대립 변인으로 구분하는 것이다.

[외향 E | 내향 I]
[감각 S | 직관 N]
[사고 T | 감정 F]
[판단 J | 인식 P]

4쌍을 조합하면 총 16가지 유형이 나온다.

16가지 MBTI 유형

주의할 점은, MBTI가 "이 사람은 E다"라고 단정 짓는 게 아니라는 것이다. 누구나 8가지 특성을 조금씩 가지고 있지만, 어떤 특성이 더 뚜렷하게 나타나는지를 보는 것이 MBTI의 목적이다.

슬램덩크 세계관으로 설계하다

테스트 결과 페이지에는 참가자의 MBTI에 맞는 슬램덩크 캐릭터를 보여주는 구조로 잡았다. 16가지 유형 각각에 캐릭터 한 명씩을 매칭하는 작업이 필요했다.

슬램덩크 MBTI 테스트 GIF

슬램덩크 캐릭터들의 성격과 MBTI를 연결해봤다.

황태산 (INTJ): 독립적이며 의지가 강하다. 뛰어난 집념을 바탕으로 목표를 달성해버리고야 마는 스타일이다.

강백호 (ENTP): 독창적이고 창의력이 풍부하며 직접 몸으로 부딪혀 도전을 멈추지 않는다.

송태섭 (INFJ): 높은 통찰력으로 사람들에게 영감을 주며 공동체의 이익을 중요시 한다.

채치수 (INFP): 성실하고 높은 책임감을 바탕으로 자신이 지향하는 목표에 정열적인 신념을 가진다.

윤대협 (ENFP): 상상력이 풍부하고 순발력이 뛰어나다. 결과보다 승부 자체를 즐기는 자유로운 영혼.

정대만 (ISTP): 과묵하고 분석적이며 새로운 무언가를 만드는 일에 타고난 재능을 가졌다.

질문 설계의 핵심: 홀수 원칙

기획에서 가장 중요한 부분은 질문 수였다.

4쌍의 변인 각각을 판단하려면, 변인 하나당 질문이 3개 이상 필요하다. 그리고 반드시 홀수로 유지해야 한다. 짝수면 동점이 날 수 있어서 변인이 결정되지 않기 때문이다.

E 2 : I 1 = E 승
E 2 : I 2 = 동률 (판단 불가)

MBTI 로직 구조

4쌍 변인, 각 3개 질문 = 총 12개 질문. 이 구조를 먼저 잡고, 그 다음에 실제 질문을 작성했다.

MBTI 질문 구조

단순히 "당신은 외향적인가요?"라고 물으면 재미가 없다. 슬램덩크 세계관 안에 참가자를 신입 농구부원으로 투영해서, 상황을 구체적으로 설계했다.

E/I를 판단하는 질문 예시:

Q1) 농구부에 신입으로 입부한 당신. 전원이 모인 입부식에서 신입생 3명을 뽑아 실력 테스트를 한다고 한다. 당신의 반응은?

E) 내 실력을 보여줄 기회! 가장 먼저 손들어 지원한다.
I) 섣불리 나섰다가 첫날부터 당할 수 있으니 다른 신입생들의 반응을 살핀다.

Q2) 농구부 가운데 가장 친한 A가 농구부를 관두려 한다. 당신의 반응은?

E) 함께 계속 하고 싶으니 어떻게 설득할지 고민한다.
I) 아쉽지만 본인이 싫으면 어쩔 수 없다. 수고 많았다고 격려한다.

Q3) 아무리 연습해도 슛 폼이 부드럽지 못해 불만족스럽다. 당신의 선택은?

E) 슛 폼이 좋은 선배에게 1:1 코칭을 부탁한다.
I) 유튜브와 시합 영상을 돌려보며 스스로 체득한다.

같은 방식으로 S/N, T/F, J/P에 대한 질문을 각각 3개씩 작성하면 기획 파트가 완성된다.

결과

16가지성격 유형 (슬램덩크 캐릭터 매칭)

4쌍변인 (E/I, S/N, T/F, J/P)

12개질문 수 (변인당 3개 홀수)

0원개발 외주 비용

돌아보며

마케터에게 기획이란, 구현 가능한 범위를 먼저 설계하는 것이다.
개발자가 없어도 만들 수 있는 것은 생각보다 많다.

결과 페이지는 장점을 부각하고 단점은 크게 노출하지 않는 방향으로 구성했다. 참가자가 기분 좋게 공유할 수 있어야 바이럴이 된다.

기획 단계에서 구현 가능한 범위를 먼저 정의하는 것. 이것만으로 마케터가 할 수 있는 기여가 달라진다. 이후 HTML/CSS/JS와 Bootstrap으로 실제 구현까지 진행했고, Netlify 배포와 카카오톡 공유하기 기능 연동도 직접 마무리했다. 개발자 없이, 외주 없이.