"이거, 개발자 없이 만들 수 있을까?"
MBTI 콘텐츠가 한창 뜨거울 때였다. 아르바이트 공고에 MBTI 유형을 적으라는 곳까지 나올 정도였다.
바이럴이 잘 되는 콘텐츠였다. 결과를 공유하고 친구와 비교하고 SNS에 올리는 흐름이 저절로 생긴다. 근데 주변에 도는 테스트는 죄다 개발자가 만든 거였다.
"개발자 없이 직접 만들어보면 어떨까?"
기획은 내가 할 수 있다. 구현은 HTML/CSS/JS로 할 수 있다는 걸 어렴풋이 알고 있었다. 그래서 진짜 만들어 봤다. 테마는 슬램덩크로 잡았다.
MBTI 구조부터 뜯어봤다
기획이 분명해야 구현도 수월하다고 봤다.
그래서 MBTI가 어떤 구조로 돌아가는지부터 정확히 알아야 했다.
MBTI는 2차 대전 때 여성에게 맞는 직업을 찾아 주려고 만든 성격 검사다. 핵심은 8가지 선호도를 서로 맞서는 변인 4쌍으로 나누는 거다.
- [외향 E | 내향 I]
- [감각 S | 직관 N]
- [사고 T | 감정 F]
- [판단 J | 인식 P]
4쌍을 조합하면 유형이 16가지 나온다.
슬램덩크 세계관으로 설계했다
결과 페이지에는 참가자 MBTI에 맞는 슬램덩크 캐릭터를 띄우기로 했다. 그러려면 16가지 유형마다 캐릭터를 한 명씩 붙여야 했다.
캐릭터 성격을 보고 MBTI를 하나씩 붙여 봤다.
송태섭 (INFJ): 통찰력이 뛰어나 주변 사람에게 영감을 주고, 공동체의 이익을 중요하게 여긴다.
채치수 (INFP): 성실하고 책임감이 강하다. 자기가 정한 목표를 향한 신념이 뜨겁다.
윤대협 (ENFP): 상상력이 풍부하고 순발력이 좋다. 결과보다 승부 자체를 즐기는 자유로운 타입이다.
정대만 (ISTP): 말수가 적고 분석적이다. 새로운 걸 만들어 내는 데 타고난 재능이 있다.
질문 수는 변인마다 홀수로 정했다
기획에서 제일 공들인 건 질문 수였다.
변인 4쌍을 하나씩 판정하려면 변인마다 질문이 3개 이상 있어야 한다. 개수는 반드시 홀수로 맞춘다. 짝수면 동점이 나와서 어느 쪽인지 못 가릴 수 있다.
E 2 : I 1 = E 승
E 2 : I 2 = 동률 (판단 불가)
변인 4쌍에 질문을 3개씩 붙이면 총 12개다. 이 뼈대를 먼저 세우고 나서 실제 질문을 썼다.
"당신은 외향적인가요?"라고 대놓고 물으면 재미가 없다. 그래서 참가자를 슬램덩크 세계관 속 신입 농구부원으로 두고 상황을 구체적으로 짰다.
E/I를 가르는 질문은 이렇게 만들었다.
Q1) 농구부에 신입으로 들어간 당신. 전원이 모인 입부식에서 신입생 3명을 뽑아 실력 테스트를 한단다. 당신의 반응은?
- E) 내 실력을 보여줄 기회! 가장 먼저 손들어 지원한다.
- I) 섣불리 나섰다가 첫날부터 당할 수 있으니 다른 신입생들 반응부터 살핀다.
Q2) 농구부에서 제일 친한 A가 농구부를 그만두려 한다. 당신의 반응은?
- E) 같이 계속하고 싶으니 어떻게 설득할지 고민한다.
- I) 아쉽지만 본인이 싫으면 어쩔 수 없다. 수고 많았다고 격려한다.
Q3) 아무리 연습해도 슛 폼이 부드럽지 않아 마음에 안 든다. 당신의 선택은?
- E) 슛 폼이 좋은 선배에게 1:1 코칭을 부탁한다.
- I) 유튜브와 시합 영상을 돌려 보며 혼자 익힌다.
S/N, T/F, J/P도 같은 방식으로 질문을 3개씩 만들면 기획은 끝난다.
결과는 이렇다
해 보고 나서 든 생각
해 보니 기획은 구현할 수 있는 범위부터 그리는 일이었다.
개발자 없이 만들 수 있는 건 생각보다 많다.
결과 페이지는 장점을 앞세우고 단점은 크게 드러내지 않게 짰다. 참가자가 기분 좋게 공유해야 테스트가 퍼진다.
그 범위 안에서 HTML/CSS/JS와 Bootstrap으로 실제 구현까지 했고, Netlify 배포와 카카오톡 공유하기 기능 연동도 직접 끝냈다. 개발자도 외주도 없이 했다.
