심리테스트 만들기 (3) 결과물

그동안 정말 많은 검색과 복붙이 오갔습니다.

최종적으로 만족스러운 결과물이 나왔습니다.

 

1. 결과물

txt파일들로 이루어진 질문 데이터, mbti 결과 데이터, 궁합 데이터를 읽어 문제를 내고 결과화면을 보여주는 프로그램입니다.

 

나만의 초능력 심리테스트 : happyfacefriend.github.io/

깃허브 : github.com/HappyFaceFriend/HappyFaceFriend.github.io

변경된 깃 허브 :  https://github.com/HappyFaceFriend/SuperpowerMBTI 

(2022.08.05) 심리테스트를 테스트 할 수 있는 링크는 차후 블로그를 활용하기 위해 제거했습니다.

깃 허브의 프로젝트를 clone 해서 봐주시면 감사하겠습니다.

 

 

웹을 고등학교 때 맛만 보고 처음으로 뭔가 프로젝트를 해봤습니다.

물론 백엔드 없이 그냥 클라이언트만 만들긴 했습니다. 그래도 웹을 언제든 하려면 할 수 있겠다는 자신감이 생겼습니다.

다음에는 서버와 DB까지 사용하는 프로젝트도 해봐야겠습니다.

 

그리고 이런 단순해 보이는 심리테스트도 기술적으로나 콘텐츠적으로나 만들기 힘들다는 걸 깨달았습니다.

MBTI 질문지와 결과지를 만드는데 생각보다 많은 시간이 들어갔지만 다른 테스트들에 비해 퀄리티가 많이 떨어졌습니다.

존경합니다 여러분.

 

2. 주요 개발 포인트들

만들면서 모든 게 새로웠지만, 그중에서도 html과 css로 화면을 구성하는 데에 시간이 가장 많이 들어갔습니다.

각기 다른 모바일 화면에서 잘 보여지도록 하는 것과 다양한 태그들의 속성들을 잘 조정 하는 게 생각보다 까다로웠습니다.

 

-슬라이더 효과

좌우로 슬라이드 되는 애니메이션 효과를 만드는 방법은 모든 슬라이드를 좌우로 이어붙이고,

그것을 작은 마스크를 통해서만 보이게 하면 됩니다.

 

 

태그 하이아키는 마스크 div 내부에 slider div가 들어 있는 구조고,

마스크는 div에 overflow:hidden 속성을 적용 해 마스크 바깥쪽까지 나가 있는 slider는 보이지 않게 합니다.

 

슬라이더 이동은 margin-left 나 translate 애니메이션을 통해 구현합니다.

 

-스크롤 페이드인 효과

우선 검색을 해본 결과 이분의 포스팅에 너무 정리가 잘 돼있습니다.

 nana_log 블로그 : nykim.work/56

우선 핵심 함수는 getBoundingClientRect() 인데, 이 함수는 엘리먼트의 현재 윈도우 기준 위치를 Rect 형식으로 알려줍니다.

그래서 애니메이션을 적용하고자 하는 엘리먼트.getBoundingClientRect().top이 윈도우 크기(window.innerHeight)보다 위에 있으면(화면 내부데 있으면) 애니메이션을 실행하면 됩니다.

 

 

저의 경우 스크롤 애니메이션을 적용할 엘리먼트들을 getElementsByClassName을 이용해 animElements에 넣고,

스크롤 할 때마다 위치를 확인해 opacity 애니메이션을 적용해줬습니다.

대신 너무 빨리 나와 스르륵 나오는 느낌을 주기 위해 여러 엘리먼트가 한 번에 등장하지 않게 0.2초 딜레이를 넣었습니다.

 

 

3. 자주 사용한 / 신기했던 css/js 기능들

-워드랩

워드랩과 관련된 css 속성은 word-break이고, 기본값은 normald입니다.

이 속성을 사용하면 영문은 잘 되지만 한글은 되지 않기 때문에 word-break : keep-all을 사용해주면 됩니다.

저는 이 속성을 html 태그에 한번에 적용했습니다.

 

-메인 콘텐츠 구조

무작정 width:100%를 사용하면 화면을 좌우로 늘렸을 때 너무 늘어나서 이상한 뷰가 생깁니다.

모바일과 웹에서 동시에 잘 보이게 하기 위해 width:100%를 사용하고 추가로 max-width 라는 속성을 이용해 최대 너비를 정해줬습니다.

 

 

-url 복사

공유를 위해 주소 복사 기능을 넣었습니다.

검색해보니 예전에는 바로 clipBoardData를 이용해 클립보드에 접근할 수 있는 방법이 있었는데, 이제는 안되는 것 같습니다.

대신 임시로 textarea를 만들어 그곳에 원하는 텍스트를 넣고, 그 텍스트를 복사하는 약간의 꼼수를 사용하는 방법이 있었습니다.

 

-class 이용 버튼 색 변경

버튼을 누르면 그 버튼의 색을 바꾸는 것을 class를 이용해서 하는 기법이 있습니다.

css에 예를들어 .clicked 에 대한 속성을 정의하고, 버튼을 누르면 자바스크립트로 clicked 클래스를 추가해줘서 그때 .clicked의 속성을 적용해주는 방식입니다.

다시 clicked 클래스를 제거해서 속성을 지워줄 수도 있습니다.

클래스 추가는 엘리먼트.classList.add("clicked"); 이렇게 할 수 있습니다.