by
Jul 27. 2021
이틀 만에 만든 성격 유형 테스트 프로젝트
(1) Intro
시간으로 따지면 대략 투자한 시간이 자잘 자잘한 수정들 빼면 24시간 정도 되는 것 같다. 그 시간 동안 메인 개발은 전부 끝내고, 배포, 광고, 검색 최적화까지 전부 끝냈다.
( 이해를 돕기 위해 사이트 링크를 첨부하지만, 글을 올린 현재 시간까지는 아직 그림 5개를 덜 받았고, 광고랑 네이버 웹마스터 검색어 승인절차가 아직 하루가 안 지나서 못 받은 상태이다. 그리고 욕심이 생겨서 점점 페이지 규모를 계속 키워가는 중이기에 조금씩 바뀌어 있을 수도 있다:) )
https://uridentity.netlify.app/
도메인도 사고 싶었는데 할인 중인 도메인이 shop이었다. shop을 할바에는 app 이 더 나은 것 같다는 생각에 그냥 netify 기본 도메인으로 만족했다. 아마 지금 하는 말이 정확히 이해가지 않더라도 괜찮다. 지금부터 한 챕터씩 글을 통해 차근차근 설명할 생각이다. 우선 이번 글은 앞으로의 인트로 격이 될 것이다.
계기
놀랍게도 정말 말 그대로 갑자기였다. 정확히 21년 7월 25일에 벌어진 일이었다. 오전 10시에 일어난 나는 12시까지 침대에서 인스타랑 카톡만 보면서 빈둥대고 있었다. 12시 반쯤 어떻게든 밥을 먹어야겠다고 생각하고 집에 있는 냉동도시락 하나를 돌려와 먹으면서 생각했다. '현타 온다'. 말 그대로였다. 이 기분으로 하루를 보내면 이도 저도 안 할 것 같아 일단 유튜브로 개발 관련 영상들을 찾아봤다. (광고 아닙니다...!)
https://www.youtube.com/watch?v=OI3fZJHQF8Y
그때 이 영상으로 알고리즘이 안내했다. 사실 이건 개발 공부를 처음 시작했을 당시에도 봤었던 영상이다. 그때는 단지 감탄만 하며 이런 것도 있구나 생각했다. 아마 그때 봤던 영상이었나, 하여튼 이 유튜버의 영상 중에 '총 강의시간이 2시간 반' 만에 성격유형 테스트, 소위 MBTI테스트로 불리는 서비스를 만들 수 있다는 말이 갑자기 기억났다. 열심히 구글링을 통해
https://animal.likelion.net/intro
이 테스트를 만드는 강의를 찾았다. 그리고 바로 결재했다. 이 프로젝트는 그렇게 시작했다.
기획
사실 막상 만들려고 하다 보니 뭘 만들어야 하지 방향을 잡아야겠다는 것이 느껴졌다. 그때까지의 내 상태는 단순히 무언가를 하나 완전히 만들어 봐야겠다!라는 생각에 그쳤기 때문이다. 내 인맥을 통틀어 나와 가까우면서도 기획, 아이디어가 좋은 친구, 그림을 잘 그리는 친구들이 생각나 바로 연락해봤다. 연락한 톡 내용을 공유해 더 생생하게 전달하고 싶었으나 카톡을 기다리는 시간을 참지 못하고 모두 전화를 해버렸다...
이러 이런 강의가 있는데 야 이거 2시간 반짜리면 그냥 오늘 안에 끝내버릴까?
콜 같이하자
이것저것 아이디어를 던져보다 지난번 해커톤 때 내가 냈던, 하지만 실현되지는 못했던 아이디어에서 따와서 이 주제를 기획하게 되었다. 기획의 주안점으로 둔 점은 크게 3가지였다.
1. 쉽게 매칭 할 수 있을 정도로 아는 분야인가
하루 만에 끝내기로 마음먹은 이상 그 분야에 대해 공부하기보다는 이미 알고 있는 분야에서 성격유형들을 매칭 하는 것이 훨씬 효율적이었다.
2. 다른 방향으로 뻗어나갈 가능성이 있는가? (단순히 일회성이 아닌)
성격유형 테스트들이 대부분 일회성으로 한번 공유하고 다시 접속하지 않는다는 점에서 계속 들어갈 만한 전략을 세우면 훨씬 신선할 것이라 판단했다.
3. 개발 부분이 크게 달라지지 않는가
일단 이 프로젝트를 하게 된 이유는 어차피 아무 공부도 하고 싶지 않은 주말에 뭐라도 생산적으로 살아보자는 마음에서 시작했고 사실할 일이 산더미라 강제로 단기간에 끝내야 했기에 너무 규모가 커지는 것은 지양했다.
테스트 결과로 나오는 그림 중 하나기본 개발
완전히 노 베이스는 아녔던지라, 강의 내용이 적당히 쉽게 느껴져서 2배속으로 후다닥 들었다. 말 그대로 강의를 결제하고 기본적인 기능이 동작하기까지 대략 2시간 정도 걸렸다. 이 서비스의 기본적인 개발 관련 특징은 아래와 같다.
1. 순수 html, css를 사용한 싱글 페이지
이건 조금 신선했다. 지금까지 나는 앱에서도 동작하는 SPA(Single Page Application)를 만들기 위해서는 너무나 당연히 리액트나 뷰, 앵귤러처럼 프레임 워크를 떠올리기만 했었다. 그런데 핵심을 무의식적으로 놓치고 있었다는 생각이 들었다. 결국 규모만 크지 않다면 하나의 html 파일을 이용해 SPA를 구현할 수 있지 않은가. 자바스크립트를 이용해 요소요소 별로 실제 프레임워크가 동작하는 것처럼 이벤트에 따른 display설정만 해주면 된다. 바로 그런 식으로 이 서비스는 개발되었다.
html은 보다시피 파일 하나다. 귀찮아서 이미지 정리를 안 한 건 눈감아 주길 바란다..2. 자바스크립트 대신 jquery사용
지금껏 제이쿼리는 항상 "오래된 문법", "배울 필요 없는 문법", 과 같은 말들만 들어온 나로서는 처음 강의를 보고 jquery로 처리한 부분이 조금은 어색하게 느껴졌다. 사실 이 서비스에 필요한 동적 부분은 요소들을 셀렉하고 간단한 동작 ( hidden, show) 정도에서 끝나는 경우가 많은데 이때 vanilla javascript를 사용했다면 많이 귀찮았을 것 같아 왜 이 여기에서 제이쿼리를 사용했는지가 이해가 갔다. 사실 편견과 인식으로 인해 제이쿼리 문법은 쳐다보지도 않았었는데 어떤 식으로 간단하게 요소를 셀렉하는지를 보다 보니 세상에 모든 지식은 다 어딘가 쓸모가 있구나 라는 생각과 함께 항상 지식에 대해 편견과 인식을 가지지 않도록 노력해야겠다.
작고 귀여운 제이쿼리로 만들어진 start 함수3. 서버를 사용하지 않고 JSON으로 더미 데이터처럼 처리
아마 나보고 만들라고 했다면 바로 리액트와 장고를 가져오지 않았을까? 사실 '이 테스트에 참여한 사람 수'와 같은 정보를 표시하지 않고 단순히 질문과 결과의 조합으로 이루어진 지금과 같은 간단한 프로젝트의 경우는 서버가 필요가 없을 수 있다는 신선함을 느꼈다. 약간의 막일과 함께.. 질문 12개와 결과 16개에 헤당하는 데이터만 필요했기 때문에 JSON형식으로 질문과 결과 데이터를 묶어 하나하나 버튼 클릭과 함께 html내부 콘텐츠만 리 랜더링 되는 방식을 택했다. 이렇게 정적 사이트로 만드니 배포도 훨씬 간단한 방법이 있었고 여러모로 초초 초소형 프로젝트인 이번 일에는 적합했다.
이런 식으로 var q에 해당하는 더미 데이터가 28개...!