🧚 TL;DR

🖼️ 개발 배경

내가 보는 나의 모습과, 다른 사람들(지인, 가족, 친구 등)이 보는 내 모습이 어떻게 다른지, 나의 진짜 성격이 무엇일지 궁금했습니다.
당시 유행하고 있던 MBTI 성격 유형 검사는 '내가 내 성격을 평가한다'는 점에서 진짜 내 성격이라는 생각을 갖기 어려웠습니다. 그래서 제대로 성격을 알아볼 수 있는 테스트들을 찾아보다가 100개의 단어를 바탕으로 성격을 찾을 수 있는 방식을 발견했습니다.
100개의 단어 리스트는 이미 존재하는 리스트를 사용했습니다. 원래는 100개의 단어를 지인들에게 공유해 일일히 계산하는 시스템이었지만, 이 과정이 번거롭게 느껴졌고, 쉽게 공유할 수 있는 웹사이트를 만들게 되었습니다.

내가 보는 나, 친구가 보는 나, 가족이 보는 나는 어떻게 다를까? 진짜 내 성격은 무엇일까?

👉 내가 내 성격을 10~20개 고르고, 주변인이 내 성격을 10개 골라, 겹치는 것과 겹치지 않는 것들을 분류해 냅니다.

Frontend React, JavaScript, bootstrap, i18n, react-beautiful-dnd, react-router-dom, react-helmet, styled-components, wordcloud

Backend firebase

👇 전체 결과는 이렇게 👇

👇 흥미로운 워드클라우드도 만들어줘요 👇

프로젝트 기획부터 개발, 나름의 디자인, 도메인 등록까지 혼자 다 진행하면서 웹서비스 개발 전반의 분야들을 겪어볼 수 있었습니다.
React 서비스에서 SEO를 위해 페이지별 메타태그 추가하는 것과 메타 이미지 적용하는 것을 배웠습니다.
리팩토링을 진행하면서 styled-components를 사용해 재사용성이 용이하게 진행했습니다.
주위 및 유저들의 피드백을 받으면서 지속적인 개선을 진행했는데, 유저들은 다양한 사용환경을 가지고 있고 이로 인한 다양한 오류들이 존재할 수 있음을 배웠습니다. 서비스를 개발할 때는 빠르게 출시하고 싶어서 핵심 기능을 일주일만에 구현한 후 배포를 진행했는데, 조금 더 천천히 더 많이 고민하고, 완성도를 올린 뒤에 배포를 했어도 좋았겠다는 생각을 했습니다.
firebase를 이용하면서 백엔드 구현 없이 데이터를 업로드, 수정하는 방법을 터득했습니다.
리팩토링을 진행하면서 함수를 재사용하려고 노력했고, 주석으로 input과 output을 기록해두니 파악하기가 쉬웠습니다.
추후에 기능을 확장하기 위해 만들어두었지만, 사용하지 않아 사용성을 해치는 항목은 과감히 삭제해 유저들의 혼란을 줄이기 위해 노력했습니다.
i18n의 활용으로 다국어 지원하는 방식을 배웠습니다.

내 성격 다시 고르기 기능 👉 문제
- 기존에는 내 성격을 10개만 고르는 것이었음. 내 성격의 개수가 많지 않다보니, 다른 사람들이 고르는 내 성격과 일치하는 것의 개수가 적음.
- 결과의 정확도 향상을 위해 개수를 수정해야 했음 👉 해결
- 내가 고른 내 성격의 개수가 10개일 경우, 추가적으로 내 성격을 선택할 수 있는 버튼을 만듦
- 모달창을 띄워 추가적으로 선택이 가능하도록 함.
도메인 등록 👉 문제
- 서비스가 바이럴해지면서 netlify.app은 너무 안 멋져보였음 😅
- 도메인을 구입하고, 가비아 홈페이지에서 DNS를 변경하려고 했으나 적용이 되지 않음 👉 해결
- DNS 등록은 넷리파이 내부에서 하는 거였음
- 카카오 공유하기에 새로 산 도메인을 등록했어야 해서 빠르게 등록함