ep.1 <김초엽 SF소설'지구 끝의 온실' 인물 테스트>

김초엽의 SF소설 속 등장인물 중 어떤 인물과 내 성격이 비슷한지 알아보는 테스트 입니다.

테스트를 진행하시려면 아래 링크를 클릭하세요!

https://sf-charactertest.netlify.app/

sf소설 속 나와 닮은 인물은?

출처: 메인 이미지-자이언트북스'지구끝의온실', 결과창 아이콘- IconMarketPK:Flaticon

<사이트 제작에 참고한 강의 추천>

www.inflearn.com/course/심리테스트-사이트-제작/dashboard

[무료] [하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기 - 인프런 | 강의

인프런에서 무료강의로 진행하는데다가 qna까지 열려있어서 친구가 수강하고 추천해줘서 저도 완강했습니다. 

1. 제작 단계

강의 수강-아이디어 도출-1차 작업(인풋으로 데이터관리 하려했으나 중단)-2차작업(강의 기반으로 완성후 css다듬기)-이미지 작업(시간상 너무 많이 잡아먹어 중단)-알고리즘 데이터 수정-완성

위 강의 영상을 보시면 십이간지를 이용한 심리테스트인데 인터페이스 디자인이 아쉬워서 이부분은 css로 충분히 바꿀 수 있다는 생각이 들어 시작하게 됨. 색만 바꾸기에는 강의 내용이 아까워 차라리 이전에 배운것들을 사용하여 테스트 종류를 바꿔보자고 결심하고 최근 읽었던 책에 대한 내용이 들어가면 좋겠다는 아이디어로 진행 시작

마케팅의 일환으로 책의 등장인물에 대한 성격들을 엿볼 수 있고, 관심도를 높이기 위해서 심리테스트 종류의 사용자 참여도가 높은 페이지가 사용되면 좋을 것이라 생각함

따라서 진행하는 동안 많이 헤매서 검색도 많이 해보고 강의도 돌려보면서 2주에 걸쳐 페이지를 완성

 2. 문제 해결

알고리즘을 위한 자바스크립트와 부트스트랩을 처음 사용해봤기 때문에 난관 봉착

-> 부트스트랩은 곧 적응하기 쉬웠지만 자바스크립트는 프로젝트 게시 이후로 추가로 강의 예정..

사이트 개설 방법 app.netlify.com

-> 위 사이트를 알게되어 배포가 가능해짐

3. 추가 사항

강의 + 추가 기능과 디자인

1. 지구끝의 온실 등장인물 분석 및 qna페이지 작성

2. URL 복사 태그로 alert 띄우기

3. 새창 열기로 곧바로 책 구매로 이어지는 버튼 생성 (기존 창에서 열기로는 뒤로가서 결과지를 다시 볼 수 없음)

4. 처음으로 가서 테스트를 다시 할 수 있는 버튼 생성

이외 모든 css 디자인도 마찬가지로 혼자서 진행하였습니다.

4. 발전 계획

1. 프로그래스 바 부드러운 이동

2. 결과 이미지 애니메이션 효과 적용

3. 사이트 접속 시 로딩 페이지 만들기

4. 글씨 폰트 보다 적합한 것으로 변경

5. 뒤로가기 키 만들기

---

많은 사담글을 읽어주시고, 제가 만든 테스트에 참여해주셔서 감사합니다.

혹여나 오류가 있거나, 간단한 테스트 후기를 댓글로 남겨주시면 꼭! 답변드리도록 하겠습니다. 감사합니다.