바닐라 JS로 만든 심리테스트 페이지

​

​

 

https://camerart7th.netlify.app/

 

위는 완성한 심리테스트!

---

이걸 만들 당시 자료구조도 모르고 알고리즘도 몰랐다. 지금도 그런 편이다.

이것이 시사하는 것은

> 바닐라 자바스크립트만 알아도 심리테스트 페이지를 만들 수 있다.

​

어쨌든 시작합니다

---

시작하기 전

심리테스트 페이지를 만들어 보고 싶었다.

요즘 유행하는 심리테스트를 보면 보통 문제가 12개인데

아마 I와 E를 묻는 문항 3개, N과 S를 묻는 문항 3개, F와 T를 묻는 문항 세 개, P와 J를 묻는 문항 세 개

이렇게 해서 12개 인듯 했다.

이런 식으로 세 질문에 대한 답을 비교해서 E가 많으면 이 사람은 EXXX가 되는 것..

근데 이건 그냥 내 생각이다.

어쨌든 요즘 심리테스트가 유행하면서 구조를 생각해 볼 일이 많았고

이에 따라서 전시기획 동아리에서 선보일 단체작품도 심리테스트를 하면 좋겠다는 생각이 들었다.

그래서 제안했고 좋은 경험이었다

구조 생각하기

'심리테스트처럼 보이는 일상 테스트를 해보자!'

라고 해서 시작한 팀프로젝트

 

선택지에 따라 점수가 부여되고 그 점수가 쌓여서 끝에 다른 결과를 보여주는 방식을 생각했다.

이걸 보여줄 수 있는 구조로

처음에는 파워포인트에 링크를 달아서 페이지를 넘나드는..

하이퍼링크 방식을 생각했는데..

출처 : 미리캔버스

​

이런 식으로 여러 페이지를 만들고 연결 방식은 링크를 거는 식으로..

근데 이렇게 하면 문제점이 링크를 타고 들어갈 때마다 점수가 초기화 된다는 것.

그래서 정말 정말 피하고 싶었지만 어쩔 수 없이

점수를 세는 것 뿐 아니라 html 내의 내용을 바꾸는 것까지 자바스크립트로 했다.

그리고 나는.. 리액트 뷰 그런 거 모르고 바닐라 자바스크립트만 할 줄 아는 사람...

그래서 바닐라 자바스크립트와의 긴 여행이 시작됐다..

---

구조 짜기

인생 처음 200줄을 넘긴 코드

근데 사실 겹치는 부분이 많아서 그거 빼면 100줄 좀 넘는 듯

실질적으로 사용한 건 함수 선언, while, for, if, addeventlistener..정도

​

우선 html에서 필요한 요소들을 불러온다

거의 뭐 다 불러왔다고 보면 된다

그리고 마지막에 backGround는 귀찮아서 id만 바꿔줬는데

저렇게 선언해 버리면 나중에 어떤 background를 의미하는지

본인이 헷갈릴 확률이 백퍼센트 이기 때문에

자세하지만 간결하게 지어주는 것이 좋다

 

자바스크립트에서는 함수 선언을 할 때 띄어쓰기에 해당되는 부분의 글자를 대문자로 써준다.

예를 들면 background content = backgroundContent

지금 보니 background를 왜 backGround라고 썼는지 모르겠다

협업할 때 이러면 안될텐데 나는 혼자 했으니까 괜찮다.

하지만 고쳐놔야겠다.

​

마지막에 선언한 size는 배경 불러오는 방식을 설명할 때 필요한 요소이다.

​

---

let은 자바스크립트에서 변화하는 변수를 선언할 때 쓴다.

여기서 항목별 점수를 만들고 그 점수를 합산할 예정이었기 때문에 값이 항상 변화한다.

그래서 let으로 선언했다.

click은 버튼을 몇 번 클릭했는지 자바스크립트가 알아채게 하기 위해 따로 선언해준 변수다.

​

changeSection은 원래 저런 간결한 형태가 아니었다.

페이지마다 쓸 함수를 따로 만들어서 선언했었는데

너무 길어서 더 간단하게 할 방법이 없을까 하다가 argument를 넣어주면 되지 않을까 해서 바꿔봤다.

길이를 줄이는 것이 목표였기 때문에 결과는 만족스러웠는데

문제는 이게 최선의 함수인지 아직도 모르겠다.

이런 식으로 한 번 클릭했을 때 이런 내용으로 바꿔라 하면

자바스크립트가 알아서 html 태그 속 내용을 바꿔준다.

innerHTML은 자바스크립트에서 html의 내용을 제어하는 방법이다.

​

이건 마지막 화면에서 그동안 화면에 나왔던 옵션 버튼을 없애기 위해 만들어준 함수

hasChildNodes는 말그대로 자식 요소가 있다는 의미임

자식요소가 있는 동안엔 자식을 다 없애라는 의미의 함수다.

​

​

결과를 보여주는 경우인데..

제일 뜯어고치고 싶다.

자바스크립트로 css도 제어할 수 있는데 css의 display none을 활용하는 것이 별로 좋지 않다고 한다.

근데 append child remove child 하는데 뜻대로 안돼서 결국 편한 방식을 택해버렸다.

hide라는 class 명을 선언하고 거기에 display none을 줘서 필요할 때마다 써먹었다.

​

결과 보여주는 페이지는 결과별로 따로 선언했다.

이름만 다르지 구조는 같은 함수들임

사실 얘네도 위에 제시한 방법처럼 할 수 있었는데 내용이 워낙 길어서 관리하기엔 이게 더 편할 거 같아 그냥

이대로 뒀다.

근데 더 편한진 모르겠음

​

제일 고민한 부분이다.

왜냐면 4번째 질문에서 분기점이 나뉘는데 그걸 어떻게 해야할지 감이 안왔다.

그래서 한 방법은 그동안 click된 수로 구분 했다면

세 번째에서 네 번째로 넘어갈 때는

클릭된 부분의 내용으로 넘어갈 페이지를 판단했다.

혼자 해결하면서 제일 뿌듯했던 부분

​

​

---

배경 만들기

배경은 ...진짜 진짜 고민했던 부분

왜냐하면 실행할 때 자꾸 왼쪽 부분에 이전 페이지가 얇게 겹쳐보이는 현상이 발생했다...

원래는 글자가 바뀔 때마다 배경도 자바스크립트로 바꾸는 방식을 생각했다. 그리고 요소도 움직이는 효과를 주려고 했음. 근데 용량 문제인지 로딩이 너무 오래 걸리고 뜻대로 움직이지도 않았다. 그래서 로딩 문제를 최대한 해결하고자 생각한 것이 carousel 방식이었다.

위 그림과 같은 건데 길게 화면을 먼저 만들어 둔 담에 화면을 터치하거나하는 인터렉션이 일어나면 화면이 옆으로 넘어가는 방식이다.

위 그림 기준으로 사용자가 흰 화면을 보고 있더라도 주황색 화면이 이미 로딩되는 방식이라고 이해해서(맞나..?)

배경 로딩으로 인한 기다림을 줄일 수 있을 거라고 생각했다. 근데 앞에서 말한 것과 같이 배경이 약간씩 1px 정도 겹치는 현상이 발생했다..

​

왜!!!!!그랬을까!!!!!!!!

​

carousel 방식으로 하면 제일 처음에 변수를 선언할 때 썼던 size라는 변수를 사용해야한다. size 너비 만큼 다음 화면으로 넘겨주는 방식이다. size 변수를 처음엔 첫 페이지에 뜨는 이미지의 width 값으로 설정했었다. 근데 다음 페이지로 넘어가도 이전 페이지의 끝 부분이 미묘하게 보였다. 아마 이미지 크기가 미묘하게 달라서 그랬던 거 같다.

그래서 이미지 자체를 배경으로 쓰는 방법은 버리고 다른 방법을 사용했다.

​

div 사용해서 배경 만들기

html을 보면 알겠지만 div 밭이다 정말

이렇게 div가 많아진 이유는 위에 말한 carousel을 div로 실현하기 위함..

이런 식으로 1300이 위위위의 그림 기준으로 연두색~주황색 상자를 모두 담는 긴 상자라고 생각하면 된다. 그렇게 상자를 만들고 flex를 선언하면 div 상자가 알아서 13등분 됨. 나는 거기다가 background 값을 각각 설정하면서 backgroundsize를 cover로 설정해서 해결했다.

​

카카오톡 공유 버튼 만들기

이거 진짜.. 내가 하려고 정말.. 몇 번의 오류를 거쳤는지 모르겠다...

참고로 카카오톡 공유 버튼 계속 되다가 안되시는 분들....오류나는 분들..

그거 크롬 개발자 환경으로 하면 그럴 수 있다고 하니 참고하십시오..

원래 addThis 사이트 이용해서 하려고 했는데 할 수록.. 카카오톡이 가끔 연결이 안될 때가 있더라고..

그래서 카카오톡 api 직접 사용하는 걸로 방향을 틀었다...

이건..

https://developers.kakao.com/

가면 설명 진짜 자세히 나와있다. 근데 나는 이해 못해서 공유 템플릿 만들어 놓고도

결국 그냥 html에 삽입한 걸로 수정했다.

​

방법은.. 구글에 검색하자 나는 이제 낡고 지쳐서 이거까진 못 쓰겠다...

iframe 활용하기

회의 때 부원 중 한 명이 결과 페이지를 확인하기 전에

텀블벅 후원 페이지를 볼 수 있으면 홍보 효과에 좋지 않겠냐는 말을 했고 나는 엄청 혹했다.

그리고 머리를 엄청 굴렸는데 노션에서 링크 삽입하면 해당 링크 화면이 그대로 삽입되는 기능이 떠올랐고

노션이 되면 html도 되지 않겠냐면서 서칭을 겁나 했다.

그리고 알게 된 게 iframe 완전 간단하게 내가 생각하던 대로 구현 됐다.

​

이런 식으로 iframe에 원하는 페이지 url을 넣으면 된다.

​

---

깃허브 링크 남깁니다

https://github.com/Yeyeong99/camerart

 

https://camerart7th.netlify.app/

 

Camerart

당신의 하루는 어떤가요? 당신의 일상 속 크고 작은 영향력을 알아보아요. 결과 다운로드를 위해 크롬 또는 네이버에서 실행할 것을 권장합니다. 화면 로딩이 느릴 수 있으니 천천히 기다려주세요! 시작

 

심리테스트 한 번 더 넣으면서 마무리 합니다..ㅎㅎ