MBTI 테스트 <Be MBTIous> 제작 회고

🔮 Be MBTIous로 이동하기
🔬 깃 레포로 이동하기

서비스를 직접 이용해보시고, 오류가 발생할 시, 
해당 포스트에 댓글로 제보해주시면 너무 너무 감사하겠습니다 🙇🏻‍♂️

👻 부트캠프를 수료한 나, 진짜 개발자 될 수 있음?

나는 나 자신에 대한 의심이 많다. 코드스테이츠 이머시브코스를 수료한 후에도 한동안은, 정말 이대로 현업에서 개발자로 일할 수 있긴 한 걸까, 하는 생각을 매 시간 했다. 나는 관계지향적인 편이라, 코드스테이츠의 페어프로그래밍과 팀프로젝트는 더 없이 좋은 학습방법이었다. 5개월간 페어들, 팀원들과 함께 만족할 만한 과제와 프로젝트를 완성했다. 그런데 그 만족스런 결과물들을 혼자 살펴볼 때면 한편으론 불안했다. “이걸 온전히 ‘내’ 코드라고 할 수 있을까?”, “나보고 이 코드를 혼자 짜라고 하면, 할 수 있을까?” 의심이 계속 들었다.

💁🏻‍♂️ 코드스테이츠 파이널 프로젝트로 제작했던 BINGO
🐶 BINGO로 이동하기

기쁘게도, 영양가 없는 의심을 반복하고 앉아있을 시간이 많지 않았다. 곧 코드스테이츠에서 인턴으로 일하게 되었고, 일을 하다보면 잡생각이 상대적으로 덜 들기 마련이니까. 입사 후 “인턴을 하는 동안 뭘 얻어가고 싶냐”는 똑같은 질문을 엄청 들었다. (엄청 들었고, 나도 다음 기수 인턴분들에게 비슷한 질문을 했다. 뭐 사실 처음 만난 사람에게 물어볼 게 그리 많지 않다. 아무튼.) 처음 몇 번은 생각나는 대로 대답하다가, 나중에는 “혼자서 프로젝트 하나를 완성해보고 싶어요”라고 대답했다. 그리고 오늘 작성하는 이 회고는 코드스테이츠에서 인턴으로 생활하며 지난 2개월간 완성한 사이드프로젝트 <Be MBTIous>에 대한 회고이다.

💁🏻‍♂️ Be MBTIous Test Page

강제성이 없는 환경에서 스스로 하나의 프로젝트를 완성해낼 수 있을지, 반신반의했다. 그래서 최대한 간단한 프로젝트를 기획해보기로 마음먹었다, 고 하면 좀 핑계처럼 들릴까? 실은 간단하고 복잡하고 하는 문제를 떠나서 유저들이 많이 사용해볼 수 있을 만한 서비스를 제작해보고 싶었다. 그러면서도 내가 흥미를 가진 주제와 관련한 서비스였으면 했고, 그러다 떠오른 것이, 흔한 MBTI테스트 서비스였다. MBTI테스트에 케이팝 걸그룹을 엮어보면 나름대로 재밌지 않을까 생각했고, 살을 덧붙이면서 본격적인 기획이 시작되었다. 지금부터는 이 서비스를 개발하며 학습한 것들에 대해 이야기하려고 한다.

💁🏻‍♂️ SR단계에서 그린 wireframe과 실제 구현된 모습

⚽️ Three.js와 라이브러리들

취업준비를 앞둔 부트캠프 수강생들이라면 “프론트 vs 백”이란 고민은 피할 수 없는 숙명과도 같지 않을까. 다른 고민거리들에 대해서는 늘 앞장서서 갈팡질팡했지만, “프론트/백”이란 고민에 대해서만큼은 “나는 프론트”라는 확신이 항상 있었다. 알고리즘과 백엔드 개념에 대해 학습하면서 때론 백엔드 분야가 좀 더 명쾌하다는 느낌이 받는데도 결심이 흔들리는 일은 없었다. 처음 개발을 접한 것 역시 마케팅회사에서 HTML콘텐츠를 다루면서 였고, 인문/예술분야 전공생인 나는 낯선 코딩 공부에 멘붕이 올 때면 웹사이트 어워드 홈페이지를 돌아다니거나, 스타일링과 관련한 라이브러리들을 둘러보며 마음을 다잡았다.

내가 스스로 공부한 첫 스택은 SCSS였고, 회사에 들어오자마자 처음 보았던 강의도 framer-motion 튜토리얼과 chart.js 비디오 클립들이었다. 마음 한 켠에는 “지금 이런 스택/라이브러리를 공부할 때가 아닌데”하는 고민이 있었고, 내 관심사가 “충분히 개발자스럽지 못하다”고 느낄 때가 많았다. 대단한 깨우침이나 비장한 다짐이 있었던 건 아닌데, 그래도 좋아하는 걸 꾸준히 해내는 건 몇 안 되는 내 장기였고, 짬을 내서라도 공부하고 싶은 건 하는 수밖에 없다고 판단했다.

💁🏻‍♂️ Artist Page 도입 애니메이션 캡쳐 이미지

그런 내가 수강생시절에 꿈처럼 생각하던 라이브러리가 있었는데, Three.js였다! 무턱대고 10만원도 넘는 외국어강의를 결제했고, 난생 처음 보는 3D 소프트웨어 프로그램까지 깔아가며 코드를 따라쳤었다. 자연스럽게, 프로젝트를 시작하며 설정한 하나의 목표는 프로젝트에 Three.js를 활용해보자는 것이었다. 학습한 것들을 십분 활용하지는 못했다. 그래도, 우선 Three.js로 프로젝트를 제작해보았다는 데서 크게 뿌듯하다.

💁🏻‍♂️ Artist Page에서 큐브를 클릭해 최애 걸그룹을 설정하는 모습

Three.js가 적용된 페이지는 Landing Page와 Artist Page이다. Landing Page에서는 Three.js 입문자들이 많이 시도하는 구성을 사용했다. 사실 기본원리는 단순한데 cube를 생성하고 x, y, z 포지션에 랜덤값을 적용한 것. 여기에서 더 나아가 environment map을 사용해 배경에 사진을 넣어보려고도 했지만, 큐브에 입혀지는 앨범 커버들이 이미 충분히 화려해 이 부분은 포기하기로 결정했다. Artist Page에서는 3D 이미지와 기본적인 마우스 컨트롤에, 클릭 이벤트를 추가해야 했다.Three.js는 캔버스에 랜더링되기 때문에 클릭 이벤트 적용 과정이 쉽지는 않았다. raycaster를 통해 클릭 이벤트를 구현할 수 있었다. 사실 여기까지는 three.js의 기본 개념을 익히고 나니 크게 어렵지 않았으나, react와 typescript를 함께 사용하며 타입을 설정하거나 DOM을 조작하는 부분에서 오히려 많은 시간을 소모했던 기억이 난다. 이 부분은 리팩토링을 하며 따로 에러로그를 적어보고 싶다.

🧜🏼‍♂️ 다짐: Hooks 콜렉터가 될 것!

새로운 스킬이나 스택을 학습할 때면, “자 여러분, 이걸 사용하면, 우리가 코드를 작성하며 느꼈던 이러이러한 불편함이 이렇게나 쉽게 해소된답니다!”라는 식의 설명을 자주 들었다. 그런데 사실 부트캠프 수강생에게는 “이러이러한 불편함”이라는 걸 느껴볼 겨를이 없다. 정작 불편했던 건 특정한 스킬에 익숙해지기도 전에 또 다른 스킬을 학습해야 한다는 점이었다. (물론 이건 부트캠프 특성상 어쩔 수 없는 부분이다.)

💁🏻‍♂️ 리액트 생명주기

아마 컴포넌트 생명주기 때문에 그랬을 거라 생각한다. 내가 코드스테이츠 코스를 수강할 때는 리액트 클래스컴포넌트와 함수컴포넌트를 모두 학습했다. (코드스테이츠는 변화가 빠른 곳이다, 일 년도 채 안 된 경험으로 라떼신화를 읊을 수도 있다.) 모쪼록 수강생이던 나는 클래스컴포넌트에 적응하려던 찰나에 함수컴포넌트를 새로 학습해야 했고, 결국 함수컴포넌트를 제대로 이해하지 못 한 채로 코드만 어설프게 복사붙여넣기하며 해당 유닛을 지나왔다. 그게 프로젝트 때까지 내 발목을 잡았다. 리액트를 제1 스킬셋으로 쓰면서도 자신감 있게 리액트 개발자라고 말하기가 좀 민망했다. 사용해본 훅이 고작 useState와 useEffect 정도뿐이라는 것, 그마저도 제대로 이해하고 있지 못하다는 것에 나는 늘 마음이 불편했다.

💁🏻‍♂️ 클래스 컴포넌트로 작성된 퍼스트프로젝트 VIMO

솔로 사이드프로젝트 경험은 리액트 개발자로서 자신감의 토대를 마련해주는 계기가 되었다. 물론 아직도 모든 훅들을 자유자재로 사용하지는 못 한다. 공식문서에 소개된 훅들 중 모르는 것들도 많고. 그럼에도 앞서 언급한 three.js 등 라이브러리를 사용하며, useRef를 공부하기도 했고, useEffect의 클린업 함수에 대해서도 알아볼 수 있었다. useMemo, useCallback, useReducer 등을 활용하기도 했고. 그리고 완벽히 터득한 것은 아니지만, 앞으로 어떤 것들을 더 공부해야 할지, 비슷한 로직이 반복될 때 커스텀 훅스를 활용할 수 있다던지, 규모가 작을 때는 Redux가 아니라 ContextAPI로도 충분히 전역에서 상태를 관리할 수 있다는 것 등을 알 수 있었다.

💁🏻‍♂️ Result Page에서 오류가 발생하는 모습

공식문서나 좋은 강의 자료를 읽는 것은 늘 학습에 많은 도움이 된다. 그러나 개념들을 익히고 예시 코드를 따라쳐봐도 지나고 나면 어떤 개념 혹은 기술이었는지 까먹는 경우가 부지기수였다. useMemo도 내게는 그런 것들 중 하나였다. 프로젝트를 통해 구체적인 에러상황들을 마주하고 해결하다보니, 확실히 막연하게만 읽고 공부하던 것과는 다른 구체적인 이해가 생겼다. 일례로, 결과페이지에서 이미지가 랜덤으로 출력되도록 설정했는데, 이 부분이 다른 스테이트가 변화할 때도 수시로 변경되는 에러가 발생했었다. 내가 원할 때만 컴포넌트의 특정 부분을 재렌더링할 수는 없을까를 고민하다가, 재렌더링 시에도 특정 변수에 할당된 값을 보존하고 기억해두는 useMemo를 활용해 문제를 해결했었다. 직접적인 경험을 통한 이해는 확실히 체화되는 속도가 빠르다는 것이 느껴진다. 이러한 이해는 꼭 리액트에 한정된 것은 아니었다. 결과 페이지의 컴포넌트 클로즈버튼을 만들면서는 구체적인 코드를 통해 이벤트 버블링과 캡쳐링을 탐구하고 stopProgagation과 preventDefault를 활용할 수도 있었다.

🧡 애증의 AWS: 오기로 https 달기

어떤 주제들은 배워놓고 시간이 지나는 것만으로도 해당 주제에 대한 이해가 더 명쾌해질 수도 있는 걸까? 부트캠프 코스에서 가장 어려웠던 부분을 꼽으라면 두 말할 것 없이 AWS 배포일 거다. 사실 서버와 네트워크 이후로 어렵지 않은 부분이 없었지만, 배포와는 유독 안 좋은 기억이 많다. https 배포를 해보겠다고 페어들과 주말 내내 슬랙으로 메시지를 주고받으며 말 안 되는 뻘짓을 많이 하기도 했고, weekly reflection 시간에 발표하려고 일주일간 공들여 만든 홈페이지 배포에 실패하기도 했다. 결국 프로젝트 때도 다른 팀원이 배포를 맡았고 나는 어깨 너머로 지켜보기만 했었다.

💁🏻‍♂️ Be MBTIous 시스템 아키텍쳐 + 스택

AWS를 이용한 https 배포과정에 변화가 있던 것도, 내가 인턴 생활 시작 후 따로 배포를 공부한 것도 아닌데, 이상하게도 가이드 문서 몇 개만 잘 따라하니 큰 어려움 없이 배포에 성공할 수 있었다. 명확한 이유는 나도 알 수 없다. 추측해보건데, 3티어 아키텍쳐 각각에 대한 이해가 조금씩이나마 나아진 게 그 이유가 아닐까 싶다. AWS의 많은 스택을 활용할 때 확실히 수강생 시절 때보다는 머릿속에 전체적인 구조가 그려지긴 했다. 단기간에 해내야 한다는 압박감이 덜 하기도 했고.

물론 <be MBTIous>는 굳이 https 배포가 필요한 서비스는 아니다. 회원정보가 관리되는 것도, 정보를 암호화해 서버와 클라이언트가 주고받는 과정도 없다. 순전히 https 배포에 대한 나의 오기와 도전의식 때문이었다. 그 과정에서 얻어걸린 배움들이 있으므로 후회는 없다. cloudFront를 활용했었는데, 이상하게도 S3에 오브젝트를 업로드해도, 브라우저에서 업데이트가 되지 않았었다. cloudFront 배포를 비활성화해보기도하고, S3 버킷도 비워보고, route53의 레코드도 지웠다 다시 생성해보았지만, 문제를 쉽게 해결할 수 없었다. 좀 미련하지만 며칠을 고민해보고야 cloudFront의 경우 캐시가 24시간 유지된다는 사실을 알게 되었다... cloudFront 배포 무효화를 통해 캐시를 지우고 업데이트를 하곤 했는데, 나는 사실 아직도 AWS의 모든 서비스들이 좀 무섭다. 과금의 공포랄까... AWS도 막연히 따라하는 게 아니라 기회가 있다면 제대로 공부해볼 필요가 있겠다.

🍃 나의 첫 백엔드 코드 with 몽고DB

프론트에 확고한 마음을 가졌던 만큼 부트캠프의 두 차례 프로젝트에서 모두 프론트 포지션을 도맡았었다. 자연스럽게 백엔드에 대한 이해가 부족했졌던 것이 사실이다. 특히 데이터베이스에 대한 부분. 회사에 입사하고 일부러 데이터베이스 세션을 맡아 콘텐츠를 개선하며 데이터베이스에 대해 학습했다. 중간 중간 관계형데이터베이스와 비관계형데이터베이스를 비교하며 특징들을 살피는 부분이 있었다. 3주 남짓되는 기간동안 강의를 구매해 꾸준히 내용을 학습하고 코드를 작성해보았다. 막상 강의를 듣다보니 백엔드 전반에 대한 지식을 보충할 수도 있었고, 프로젝트에 활용해보고 싶다는 욕심도 생겼다.

💁🏻‍♂️ Be MBTIous 클라이언트 flow chart

물론 강의에서는 방대한 내용을 다뤘다. MongoDB를 MongoDB스럽게 사용하는 다양한 코드들을 학습했다. pagination이나 index 활용 등. 이런 부분까지 프로젝트에 활용해보지는 못 했다. 사실은 이렇게 한 섹션을 잡아 글쓰는게 민망하리만치, 내 사이드프로젝트의 백엔드 플로우는 단순하다. 그럼에도 처음으로 백엔드 코드를 스스로 빌드업해보고, 또 새로운 스택을 학습했다는 점은 분명 인상적인 경험이었다.

💁🏻‍♂️ Be MBTIous 서버 flow chart

💅🏻 styled-component & SNS 연동

그 이외에 몇 가지 더 이야기해보고 싶은 것 중 하나는 우선 스타일드 컴포넌트가 있다. 나는 SCSS가 CSS계의 신문물이라고만 생각하고 있었는데, 큰 오산이었다. 스타일드 컴포넌트라는 초신문물이 있었다. 타입스크립트와 framer-motion 등을 함께 사용하면서 컴포넌트를 정의하는 과정이 조금 헷갈리긴 했지만, styled-component는 전반적으로 정말 편했다. ‘컴포넌트’라는 이름을 내세운 만큼 재사용성이 뛰어났다. 사실 불편했다고 할 만한 경험은, class명을 브라우저 콘솔에서 조회할 때 조금 난감했다는 점 정도?

💁🏻‍♂️ <Be MBTIous> Result Page 핑크모드

CSS도, SCSS도 styled-component도 재밌게 활용하고 있긴하지만 아직 이 스택들을 잘 활용하고 있다는 생각이 들지는 않는다. 웹표준 디자인을 활용하거나 디자이너가 미리 짜준 시안을 갖고 작업하는 것이 아니라, 이것저것 만져보면서 예쁜 레이아웃을 찾아가는 식으로 작업하다보니 색상과 반응형 모드 이외에는 변수활용도 그리 잘 해내지는 못했다. 그럼에도 처음으로 다크모드(<Be MBTIous>에서는 핑크모드와 바이올렛모드)를 시도해볼 수 있었던 점과 반응형을 기존보다 조금이나마 쉽게 조작해볼 수 있던 점은 흥미로웠다.

💁🏻‍♂️ <Be MBTIous> 반응형 디자인

두 번째는 SNS 연동에 대한 부분이다. 내가 부트캠프 코스에서 학습한 것들 중 넘지 못한 마지막 하나의 산이 있다면, 인증에 대한 부분이다. (사실 다른 것들도 산을 넘은 건 아니고, 전체적인 컨셉을 이해했다는 정도가 맞겠지만... 모쪼록 이 부분은 남은 1개월간의 인턴생활동안 보완해볼 계획이다.) 인증에 대한 이해가 부족하다보니 SNS 공유기능에 대해 막연한 두려움이 있었던 것이 사실이다. 그런데 회사에서 자동화 업무를 하고, 또 서비스에 SNS공유기능을 추가하면서, 이미 수많은 SNS들이 너무 나이스한 API와 웹훅 등을 지원하고 있다는 것을 알 수 있었다.

💁🏻‍♂️ <Be MBTIous> 카카오톡으로 공유된 모습과 공유를 위해 제작된 이미지

💆🏻‍♂️ 솔로 사이드 프로젝트 진짜 끗!

<Be MBTIous>를 제작한 두 달여 시간 중 절반 가까이 되는 시간은 사실 기획에 소요되었다. MBTI 유형들과 3, 4세대 K팝 걸그룹에 대해 조사하고, 각각을 매칭해 서너 문단씩 설명 글을 작성했다. 또 노래 가사에서 MBTI 테스트로 활용할 부분들을 추려냈다. 디자인 레퍼런스를 찾는 것도 즐거운 일이었다. 중간 중간 스스로, “이건 아무튼 개발 포트폴리오고, 개발에 좀 더 집중해야 하지 않을까?” 하는 생각도 많이 했다. 개발자로 일하게 됐을 때 내가 할 일은 기획과 디자인보다는 개발 자체일 테니까. 그런데도 기획과 디자인에 대한 부분을 쉽게 포기하고 싶지 않았다. 생각해보면 부트캠프에서 진행한 두 차례의 팀 프로젝트에서도 나는 기획과 디자인에 늘 열심이었다. 역시 개발자보다는 기획자 쪽인 걸까, 그런 생각 정말이지 매일 했다.

💁🏻‍♂️ 노션문서로 정리한 각 그룹별 설명 글과 질문 리스트

인문대와 예술대에서 학부를 마친 내가 프로그래밍을 배우겠다고 다짐한 이유 중 하나는 콘텐츠를 만드는데 활용할 수 있는 명확한 기술을 확보하고 싶다는 욕구 때문이었다. 거의 10년 전 철학과에 지원할 때 나는 “예술 분야에서 일하고 싶지만, 어떻게 작품을 만드냐보다, 작품에 어떤 이야기를 담아낼지 공부하고 싶다”고 자소서에 썼었다. 지금은 오히려 기술과 내용이란 것이 분리되어 있는 게 아니라는 생각이다. 어떤 기술을 어떤 맥락에서 활용하느냐는 것 자체가 작품 및 콘텐츠의 핵심 내용이 되는 걸 수도 없이 많이 봤다. 무엇보다 인문베이스의 예대 복수전공생인 나는 언제나 머릿속 “아이디어”로 승부를 봐야 했고, 기술의 부재는 나를 조금 무력하게 했었다.

💁🏻‍♂️ favicon을 위해 제작한 로고 이미지

취업의 압박 속에서 부트캠프 과정을 지나오다보니, 처음 프로그래밍을 배우겠다고 한 이유를 매번 곱씹을 여유가 없었다. 그러다보니, 사람들이 흔히들 말하는 “천년개발자”들을 볼 때, 혹은 크고 작은 삽질을 반복할 때, 난 이 길이 아닌 걸까, 의심을 수도 없이 했던 게 아닐까. 비록 작은 규모의 프로젝트이지만 <Be MBTIous>를 제작하고 나니, 개발자로서의 자신감을 조금이나마 갖게 되었을 뿐 아니라, 애초에 내가 왜 개발을 공부하고 싶었는지가 좀 명쾌해졌다. 나는 늘 내 콘텐츠를 만들기를 즐겨했고, 나한테는 그 콘텐츠를 만들 기술이 꼭 필요했다. 기획과 디자인 등 개발 외적영역에 큰 흥미를 느낀다고 해서, 개발자를 포기할 이유는 없다. 오히려 기획에 큰 열정이 있기 때문에 개발을 더 열심히 공부할 수도 있을 것이다.

회고는 여기까지고, 이제 지저분한 코드 리팩토링하러...🧚🏻‍♂️