🔮 내가 마법소녀였다면 어떤 마법소녀였을까? 테스트 하러 가기➰
🧚🏻♀️ 개발에 참여한 사람
나,
회사의 옆 자리 프론트엔드 개발자. 이하 햄님🐹 (그 분은 햄스터를 좋아하기도 하고 햄스터를 닮았기 때문)
총 2명의 프론트엔드 개발자
🌟 개발 동기
심심하면 MBTI 테스트를 해보며 결과를 공유하던 햄님과 나..
이럴 거면 우리가 만들자!
둘 다 프론트엔드인데 서버도 필요 없고 아주 딱이라고 생각했다!
여러 MBTI 테스트를 섭렵해 본 결과 우리가 만드는 건 특별한 컨셉을 가지고 있으면 좋겠고 햄님과 나의 덕력을 뽐낼 수 있으면 좋아서(?)
"눈 떠보니 내가 마법소녀?!?!" 이런 컨셉이 되었다.
🎨 UI 디자인
일단 나는 프론트엔드 개발자이지만 고등학생 때 콘텐츠 디자인을 배운 사람으로서 퀄리티가 중요했다!
우리의 컨셉이 마법소녀인 것이 결정되자 메인 페이지와 결과 페이지 디자인을 어떻게 할 것인가부터 생각했다🤔
메인 페이지
로고는 눈을 떠보니 마법소녀가 되어있는 컨셉이기 때문에 요즘 로판 제목 스타일로 디자인하였다.
뭐가 어울릴지 모르겠어서 무려 6가지 버전으로 만들었는데 결론적으로 6번째 버전이 채택되었다.
서체 : 빛의 계승자체
문제 페이지
문제 페이지는 고른 배경 이미지들이 아까워 홀수 페이지와 짝수 페이지를 나누어 디자인하였다.
피그마로 작업할 때는 예뻐 보였으나 막상 프론트로 옮겼을 때 질문, 답변 문항들이 길어지면서 디자인을 해치는 것 같아 약간 아쉬움이 남는 페이지이다. (개발자의 디자인적 한계인가라는 생각이 든 페이지였다🤣)
결과 페이지
몇몇 사람들은 16개의 유형만으로 사람을 판단할 수 없다며 MBTI를 믿지 않는다지만 16개의 결과지를 만들면서 드는 생각은
MBTI의 유형은 왜 16개나 되는가..🧐 였다.
결과 페이지에 대한 고민도 되게 많았는데 결론적으로는 마법소녀 컨셉과 잘 어울리는 타로카드 느낌으로 만들었다.
가독성이 중요하기 때문에 16가지 색을 뽑아내는 게 은근 힘들었다!
💻 프론트 개발기
햄님은 배포, 문제 페이지를 맡아주셨고 (햄님의 개발기 바로가기),
나는 Router와 Layout, 메인 페이지, 결과 페이지를 개발하였다.
사실 개발 범위가 크지 않아 콩 한 쪽을 나눠먹는 기분이었다🫛🤣
나를 괴롭히던 og 태그
MBTI 테스트는 무조건 결과 공유가 있는데 og 태그가 퀄리티를 높여주기 때문에 무조건 넣고 싶었다.
React는 CSR의 특성으로 하나의 index.html을 두어 페이지별 SEO설정이 어렵다.
그래서 react-helmet-async과 react-snap을 이용하기로 했다.
react-helmet-async로 메인 페이지와 결과 페이지에 서로 다른 메타태그를 설정하였고, react-snap으로 페이지별 index.html을 생성하여 결과 페이지마다 og 태그를 설정하였다.
문제는 여기서부터 시작되었는데, 회사 업무중 og 태그가 잘 작동하나 테스트하기 위해 ngrok으로 테스트를 했었는데, 그때의 기억도 있고 og 태그 테스트를 위해 계속 배포하기도 번거롭기 때문에 이번에도 ngrok으로 테스트를 진행하였다.
ngrok으로 띄운 페이지는 react-helmet-async로 설정한 meta 태그들이 전혀 동작하지 않았다..🥺
react-helmet-async부터 react-snap을 다양한 방식으로 고쳐보다가 포기해갈 때 즈음..
한 번 배포를 해봤는데 이게 무슨..? 너무 잘 동작하였다..🤣
이 프로젝트를 하면서 가장 기뻤던 순간이다...
💜 마치며
발전이 없다면 사이드 프로젝트가 아니지!
처음에 프론트엔드 개발자 2명이서 만드는 MBTI 테스트? 아주 그냥 껌이지! 라고 생각했지만, 햄님과 나 둘 다 예상치 못한 곳에서 부딪혔다.
마지막 배포를 하고 SNS에 공유하지는 않고 햄님과 나 주변 지인들에게 공유를 했는데, 16개의 결과 이미지를 만든 입장에서 한 번도 안 나온 MBTI들을 생각하니 약간 눈물이 나왔다..🥹
(혹시 블로그를 방문해 주시는 분들 한 번씩 부탁드려요😉)
그렇지만 재밌다는 지인들, 잘 만들었다고 칭찬해 주는 지인들, 피드백 해주는 지인들의 반응을 보니 다들 즐겁게 테스트 했던 것 같아서 뿌듯했다.
개발뿐 아니라 기획, 디자인도 처음부터 끝까지 다 하다보니 자연스럽게 어떻게 하면 이 테스트를 더 잘 만들 수 있을지 고민해가며 만들어서 재밌었고, 디테일 하나 하나 포기하지 않는 내 모습이 마음에 들었다.
만약 다음 MBTI 테스트를 만든다면 더 끝내주는 테스트를 만들 수 있을 것 같다!
