“우리 회사에 수지는 있는데,
남주혁이랑 김선호 씨는 어디 있는 거죠?”

때는 5개월 전, 팀원들 사이에서 이런 농담이 시시때때로 터져나오곤 했습니다. 주로 대표님과 개발자 분들을 바라보며 (ㅋㅋㅋㅋ) 하는 농담이었죠.

tvN 드라마 ‘스타트업’을 매주 시청하던 팀원들 사이에서 밈처럼 자리잡은 이 농담의 시작은, 제 이름이 ‘수지‘라는 것에서 시작했으며, 물론 뻔뻔 당당하게도 최초 발언자 역시 바로 저였음을! 말하지 않고는 넘어갈 수가 없네요. (저는 당당합니다.😎)

안녕하세요, 똑똑한개발자 프로덕트 디자이너 SUJI 입니다 :)

상향평준화 시켜주신 전 세계의 수지들께 감사드립니다.
상향평준화 시켜주신 전 세계의 수지들께 감사드립니다.

그런데 말입니다.. 점점 팀원들이 드라마에 과몰입하기 시작했습니다.

일단 공감 포인트가 너무 많았습니다. (K-드라마 너어는 진짜…!)

저희도 창업한지 얼마 되지 않은 작은 스타트업 개발사였고, 그 때만 해도 팀원 6명 남짓으로 다닥다닥 붙어 앉아 어깨와 등을 맞대고 농도 짙은 이산화탄소 속에서 방 한 칸 사무실을 공유하며 일했으니까요. (하지만 거리두기와 마스크는 필수 😷)

매 회 달미와 삼산텍 친구들이 고민하는 부분은 저희도 꼭 한 번 해본 적 있던 질문들이었습니다. (실제로 대표님은 창업할 때 참고하고 읽었던 책들이 그대로 드라마에 나와 현실고증에 깜짝 놀랐다고..) 당시 저희가 주로 진행하던 클라이언트 프로젝트도, 스타트업 대상의 소프트웨어 개발이었으니 공감가는 포인트나 용어가 더더욱 많았죠.

지난 12월 종영한 tvN 드라마 스타트업 (티빙) / 솔직히 이 정도면 내 재산 다 투자해주겠다. 한지평이 미래다.
지난 12월 종영한 tvN 드라마 스타트업 (티빙) / 솔직히 이 정도면 내 재산 다 투자해주겠다. 한지평이 미래다.

점점 아침 출근 인사가 “이번 화 보셨어요?”로 대체되고, 매주 본방 사수하며 점심 시간까지 팀원들과 드라마 리뷰가 이어지는 요상한 일상이 구축됐습니다. 뜬금없이 도산이와 달미의 키스신이 등장한 7회 방영 다음 날은, 우리 모두가 맥락없는 애정신에 분개했으며, 지평이를 대신해 눈물을 흘렸습니다. 서브 남주 못 잃어…

그러던 10월의 어느 날, 대표님이 고민이 있다며 디자인 팀에 자문을 구해왔습니다.

고등학생들을 대상으로 우리 회사와 스타트업, 개발자 실무에 대해 간단히 소개와 강연을 할 자리가 생겼는데 무슨 말을 해야 할지 고민이에요!

“좀 뻔하고 꼰대같은 얘기 말고 정말 도움이 될 만한 이야기들 흥미롭게 전달하고 싶은데 PPT 만드는 것도 막막하고.. 어떻게 하면 좋을까요..”

불현듯 번뜩이는 섬광이 저를 스치고 지나갔습니다.

저어... 그렇다면....
저어... 그렇다면....

그렇다면… 스타트업 캐릭터들로 MBTI 테스트 만드는거 어때요??

“요즘 유행이니까 강연 때 흥미도 끌고! 참여형 컨텐츠니까 SNS에서 바이럴 되면 수지랑 남주혁이랑 김.선.호.가 보게 될 수도 있고… 누가 디자인 한거냐면서 관심 가지고 DM 보내줄수도 있고…. 맞팔하고….!”

목적이 약간 이상하지만 너무 좋아요! 근데 시간이 너무 촉박하니 무리해서 작업 안해도 돼요. PPT로 평범하게 발표해도 됩니다.”

“그럴 순 없죠. 우리의 학생들에게 강연 당일에 링크 뿌리면서 딱 김선호를 영업해야 하는데! 강연이 언제시죠!”

수요일 저녁이요!”

“…..”

그 날은 월요일이었고 주어진 시간은 48시간 뿐이었지만, 오직 김선호를 만나겠다는 일념으로 호기롭게 고개를 끄덕였습니다. 디자이너랑 개발자가 모이면 뭐든 다 할 수 있어!

(괜찮아.. 심장은 잘.. 터지지 않아…)

먼저, 드라마 속 캐릭터들이 추구하는 가치를
목표와 성향 10가지 키워드로 분류했습니다.

주요 캐릭터가 어떤 성향을 가지고 있으며, 스타트업을 통해서 이루고자 하는 목표가 무엇인지, 주요인물 위주로 캐릭터를 선택하고, 분석 후 키워드를 도출했습니다.

1) 분석 기준 및 지표 도출


  1. 캐릭터의 성향 → 테스트 문항 선택에 따른 알고리즘을 위한 지표

    3개의 지표는 0부터 10점까지 척도가 나뉘어 측정되며, 선택 문항에 따라 각 캐릭터 특성에 맞게 구분되도록 배치됩니다. 0~10의 구분은 어떤 성향이 좋고 나쁘다를 판단하는 것은 아니며, 선택에 따른 결과페이지 구분을 위해 임의로 설정한 점수입니다.

  2. 각 캐릭터가 ‘스타트업’을 통해 이루고자 하는 목표 → 결과 페이지 작성을 위한 지표

    1. 돈, 명예 ←→ 즐거움
    2. 성장 ←→ 현실 도피

    결과 페이지의 분석 결과 작성을 위해, 캐릭터 별 목표를 분석해 키워드를 도출했습니다.

2) 캐릭터 선정 및 키워드에 따른 분류


다음으로 각 키워드에 대응될만한 주요 캐릭터를 선정했습니다.

분석 기준에 따라 경우의 수를 계산하면 8명이 되어야 하지만, 대응되는 모든 키워드에서 만점을 획득한 경우 히든 캐릭터를 보여주면 좋겠다 싶어 2명을 추가해 아래 10명의 캐릭터를 최종 선정했습니다.

이후 앞서 분류한 키워드에 대응하여 각 캐릭터가 어떤 목표와 성향을 가진 인물인지 리스트를 작성했습니다.

달미아빠 - 감성 / 과정 / 능동 (모든 문항이 10점일 때)
서달미 - 감성 / 과정 / 능동
남도산 - 감성 / 과정 / 수동
이철산 - 감성 / 목표 / 능동
김용산 - 감성 / 목표 / 수동
한지평 - 이성 / 과정 / 능동
정사하 - 이성 / 과정 / 수동
원인재 - 이성 / 목표 / 능동
달미엄마 - 이성 / 목표 / 수동
영실이 - 이성 / 목표 / 수동 (모든 문항이 0점일 때)

다음은 어떤 과정으로 테스트를 진행할지
알고리즘을 설정합니다.

3) 분석 알고리즘


테스트 문항은 개인의 성향 지표인 Emotion, Progress, Active에서 각 5문항, 총 15문항으로 구성했습니다.

문제는 2지선다 형태로, 선택하는 답에 따라 +0점 / +2점을 누적해 부여받게 됩니다.

모든 문항에 응답이 끝나면 참여자는 각 지표별로 0에서 10점까지, Emotion 2점 Progress 6점 Active 10점 과 같은 개인 고유의 결과 값을 가지게 되겠죠.

실제 구현된 테스트 문항 페이지 중 일부

앞서 분석기준 및 지표 도출 부분에서 언급했듯이, 임의로 배분한 지표 값에 따라, 총점이 0~5점일 땐 이성 / 5~10점일 땐 감성 등으로 분류해 결과 값이 나타나도록 설정했습니다.

따라서 모든 문항에 답변을 완료한 사용자들은, 자신이 선택한 결과 값에 따라 [이성 / 과정 / 수동] 등의 결과 조합을 얻게 됩니다.

4) 테스트 문항 작성


여기까진 큰 무리 없이 착착 진행했지만, 가장 중요한 테스트 문항 작성이 남아있었습니다.

문항을 설정하면서 가장 고민했던 부분은 “최대한 중립적인 질문이어야 할 것!”이었어요.

임의대로 지표를 [감성적 / 이성적] 또는 [목표중심적 / 과정중심적] 등으로 설정하긴 했지만, 어느 특정한 성향이나 목표가 정답인 것처럼 보이거나, 옳고 그른 것처럼 느껴져서는 안된다는 것이 팀원들의 공통적인 생각이었습니다.

물론 드라마 속에서는 달미와 도산이가 주인공이기에 그들의 방향이 정답인 것처럼 더 공감성 있게 그려지지만, 사실 원재나 사하, 지평이도 자신만의 가치관과 신념대로 멋진 방향을 나아가는 사람들이니까요.

역량을 다해..! 멋진 질문 리스트를..! 생각해내..!

만드는 내내, 스타트업 MBTI 테스트가 ‘나는 어떤 장점이 있고 어떻게 일할 때 잘 맞으며, 어떤 사람이 함께 하면 보완 될지’ 주고받는, 긍정적인 형태로 공유되는 모습을 상상했어요.

“너는 스타트업에 안 맞는 사람이야! 너는 스타트업 하면 안돼!” 같은 맥락으로 읽히지 않았으면 좋겠다. 그러기 위해선 무엇보다 중립성을 가진 텍스트 가 중요했습니다.

그렇게 개발자 디자이너 기획자 할 것 없이, 늦은 시간까지 팀원들이 다함께 치열하게 고민과 수정을 거쳐 15문항을 작성했습니다. 유쾌함을 전달하기 위해 + 촉박한 시간 탓에 다소 아쉽게 느껴지는 문항들이 더러 있었을지 모르나, 전반적으로는 저희가 목표한 [중립성]에 가장 가까운 형태로 완성하게 되었습니다!

MBTI 테스트의 꽃은
눈을 사로잡는 심플하면서도 화려한 일러스트..★

5) 캐릭터 일러스트 제작


앞의 대략적인 구조와 알고리즘, 캐릭터 분석을 끝낸 후 일러스트 작업을 진행했습니다.

  1. 우선 배우들 사진을 보며 아이패드로 간략히 특징을 잡은 스케치를 그린 후,
  2. 스케치 파일을 Adobe 일러스트레이터로 옮겨 펜 툴로 라인을 따고 정리했습니다.
  3. 색상을 채우고 배경을 디자인 해 완성합니다. 각 캐릭터의 배경 색은 드라마 Start up 로고 색상에서 조화롭게 참고했습니다.

작업과정

초기스케치. 참고로 영실이는 스케치가 없어도 완성 가능한 전설의 조형미를 가지고 있었습니다..

최종 캐릭터 일러스트레이션

6) 테스트 페이지 UI 디자인


본업 디Zㅏ이너인 저는, 앞의 캐릭터 분석과 알고리즘 키워드 분류 및 일러스트 작업에 만개의 손으로 멀티태스킹하고 있었기 때문에, 테스트 페이지의 반응형 UI 디자인은 (무려 UI디자인을 혼자 독학하신) 프런트 엔지니어 JIWOO님께서 일당백으로 맡아서 작업해 주셨습니다. 캐릭터가 등장하는 결과 페이지 UI만 일러스트 제작시점에 맞춰 제가 빠르게 디자인을 잡았습니다.

JIWOO 님이 작업해주신 페이지

결과 페이지에서 눈에 띄는 타이틀을 작성하기 위해 고군분투 했던 기억도 새록새록 나네요. (이래서 UX Writer 라는 직군도 있는 것이구나 새삼 깨우쳤습니다.)

저는 개인적으로 내적웃음 참으면서 작업했던 영실이 히든페이지를 좋아하는데요. 요건 다음 ‘분석결과 작성’ 항목에서 더 자세히 남기기 위해 일단 넘어갑니다.

달미, 도산, 인재, 지평의 결과페이지
달미, 도산, 인재, 지평의 결과페이지
영실, 달미 아빠의 히든 페이지
영실, 달미 아빠의 히든 페이지

7) Lottie, 파비콘, 썸네일 등 기타 이미지 제작


부가적으로, 로딩페이지에 등장할 금전수 모션 일러스트를 Lottie Json 파일로 만들어 제작했습니다.

귀여운 파비콘과 SNS 공유용 썸네일 이미지도 제작하고요!

이제 대망의 결과페이지 작성 과정과 후기들이 남아있지만, 여백이 충분하지 않아 2편에 나누어 찾아오도록 하겠습니다!

감동적인 에피소드도(?) 한가득 준비되어 있으니 기대해주세요. 모두들 안녕!

👉 스타트업 적성검사가 궁금하다면? 테스트 하러 가기

suji's profile image

suji

2021-02-25 20:24

Read more posts by this author