동물 심리 테스트 사이트 만들기
당신은 어떤 동물과 비슷할까요?
이번엔 심리 테스트 사이트를 만들어봤습니다. 질문의 구성은 DISC 행동 분석법을 활용해 간단하게 만들었습니다. 대단한 권위를 가지고 만든건 아니지만 제가 해봤을 때 결과가 저와 맞는거 같아 만족스러웠습니다. 소개는 이정도로만 하고 만드는 과정을 구체적으로 알려드리겠습니다. 이하의 내용은 대부분 nuxt를 활용한 개발에 대한 내용입니다.
1. 정적 사이트 + 동적 라우트
서버 사이드 연산이 필요하지 않기 때문에 정적 웹사이트 수준만 구현하면 됩니다. 저는 Vue와 Nuxt를 사용했습니다. 애를 먹었던 부분은 정적인 웹사이트의 경우 동적 라우트 처리 방법이 골치아팠는데, 결과적으로 nuxt generate의 configuration을 조정해서 동적 라우트를 처리할 수 있었습니다.
아직까지 제가 배포했던 사이트의 경우 nuxt build 명령을 통해 dist 디렉토리가 생성되고, 배포가 간단히 완료됐지만 이번의 경우 동적 라우트가 발생해서 그런지 build를 통해선 dist 디렉토리가 생성되지 않았습니다. 결국 nuxt generate 명령으로 생성하고, 라우트를 개별 설정해주는 방법을 통해 구현했습니다.
2. 인터렉션
하나의 공간에 두 개의 컴포넌트가 부드럽게 전환되기 위해선 position: absolute를 통해 위치를 정해줄 필요가 있습니다. 다만 absolute의 경우 다른 엘리먼트에 따라 위치가 상대적으로 바뀌지 않고 부모 엘리먼트에게만 영향을 받다보니 컴포넌트의 생성과 제거 과정에서 시간 딜레이를 적절히 주어 해결했습니다.
3. 배포
수 많은 정적 사이트 배포방법이 있지만 제 생각에 가장 좋은건 netlify인것 같습니다. 배포도 간단하고, 레포지토리에 push하면 바로 빌드가 이뤄지기 때문에 간편합니다. 만약 이걸 수동으로 만든다면 꽤 할 일이 많겠죠. 도메인의 경우 따로 연결은 안했는데, 도메인 관리도 워낙 간편해서 차후에 서비스를 키우는데에도 좋을 것 같습니다.
4. 공유
트위터와 페이스북 공유하기 버튼을 넣었습니다. 모두 앵커 엘리먼트에 각 서비스사에서 제공하는 공유 url을 사용해서 쉽게 구현할 수 있었습니다. 한가지 특징이라면 트위터의 경우 url을 바로 복사해서 넣어주면 되지만, 페이스북의 경우 encode를 해줘야만 한다는 점 정도가 특이점이었습니다. 또한 트위터의 경우 오픈그래프 메타 태그를 사용하지 않고, 트위터만의 태그를 추가로 요구합니다. 이 부분은 모두 vue-meta 모듈을 통해 쉽게 구현이 가능했습니다.
5. 그 밖의 요소들
이 사이트는 제가 속한 회사에서 사이드 프로젝트로 진행됐습니다. 제가 생각할 때 이런 사이트를 만드는건 기술의 문제라기보단 컨텐츠의 재미와 이미지라고 생각하는데 이 부분을 팀원분들이 구현해주셨습니다. 덕분에 시간도 얼마 걸리지 않고 빠르게 제작할 수 있었습니다.
이번에 만든 심리 테스트를 기반으로 몇가지 더 재밌는 테스트들을 지속적으로 추가할 예정입니다. 아무래도 제 개인 사이드 프로젝트는 아니다보니 진행이 어떻게 될지는 미지수지만 말이죠. 다들 재밌게 사용해주셨으면 좋겠습니다.
추신. 심리테스트 제작 관련 문의는 홈페이지 또는 이메일로 연락주시면 감사하겠습니다!
