[프로젝트]심리테스트 사이트 개발

김수람·2023년 2월 16일

💻심리테스트 사이트 개발 프로젝트

주제 : 나와 가장 잘 어울리는 개발 언어는?

개발 프로그램
Frond-end : Vanilla JS
Back-end : FireBase

프로젝트 인원 : 3명

총 프로젝트 기간
기획 2월 14일 ~ 2월 15일
제작 2월 16일~ 2월 17일

📄프로젝트 기획안

🎬페이지 레이아웃

html 구성 : 메인페이지, QnA 페이지, 결과로딩페이지, 결과페이지

<!DOCTYPE html>
<html lang="ko">
<body>
  <section id="main">

  </section>
  <section id="qna">

  </section>
  <section id="loading">

  </section>
  <section id="result">
    
  </section>
</body>
</html>

🧸디자인 컨셉

오락실 게임기, 커맨드 창처럼 보이는 UI 구성

폰트는 눈누의 갈무리체,
화면이 넘어갈 때 오락기처럼 넘어가게끔 애니메이션 효과 구상

📋심리테스트 질문 및 결과 로직

우선 질문과 답변은 mbti 심리테스트를 기반으로 구성했고
qnaList(질문리스트)에 q(질문)과 a(답변)을 배열로 담았다.
a(답변) 안에 또 배열을 만들고 answer과 type으로 여러 개의 객체를 담아 질문을 타입별로 구분할 수 있게 했다.

const qnaList = [
  {
    q: "1. 현생에 적응이 안된 월요일 아침, 사무실 안 내 자리 정돈 상태는?",
    a: [
      {
        answer: "a. 파리도 미끄러지는 나의 책상 후훗!!",
        type: [14, 5, 4, 6, 0],
      },
      {
        answer:
          "b. 내 책상은 아수라백작 왜 저번주는 깨끗했는데 오늘은 드럽지 하아…",
        type: [11, 7, 0, 1],
      },
      {
        answer: "c. 겉만 깨끗하면 되지… 책상에 다 때려박자 히힛",
        type: [15, 13, 8, 2, 4, 3],
      },
      {
        answer: "d. 아 오늘은 해야지... 그렇게 내일이 되었다 키득키득",
        type: [3, 10, 9, 12, 4],
      },
    ],
  }
]

infoList(결과리스트)에도 객체별로 배열에 담아서 선택한 질문에 맞는 결과 나올수있게 했다.
결과페이지에는 잘 어울리는 언어, 언어의 소개, 언어 관련도서 추천, 언어 관련 강의추천, 잘 맞지 않는 언어의 정보를 담기로했다.

const infoList = [
  {
    name: "C (ISFJ)",
    detail:
      "언어 소개: C 언어는 1972년 켄 톰슨과 데니스 리치가 유닉스 운영체제를 만들기 위해 고안한 프로그래밍 언어이며 </br>" +
      "일반 사용자의 눈에 보이지 않는 컴퓨터 산업의 기반이 되는 곳에서 주로 쓰입니다. </br> " +
      "우리가 지금도 쓰고 있는 Windows, 리눅스, OS X와 iOS, Android, Windows Phone 모바일 운영체제의 핵심 요소인 커널은 C 언어로 만들어져 있습니다. </br> " +
      "또한 하드웨어의 호환성이 뛰어나 하드웨어를 제어할 수 있고 코드가 복잡하지 않아 상대적으로 유지보수가 쉽습니다. </br> " +
      "하지만 단점은 저수준 언어로서 배우는게 어려우며 컴파일러가 확인되지 않은 에러가 발생하여 오류 찾기가 어렵습니다.",
    book: "책 추천: c언어의 정석",
    lecture:
      "강의 추천: 29살의 C언어 with 거니 (유튜브)",
    negativeLang: "안 맞는 언어: Swift",
  }
]

👨‍👦‍👦팀원 간 역할분담

이름	역할
김o람	팀장, 컨셉 및 기획, UI, 정보수집
김o욱	db연동, 방문자 카운트 구현, 정보수집
박o건	정보 수집, 카카오 공유, 카카오 디스크립션 효과

🎮구현한 기능

메인페이지 화면

반응형 구현

심리테스트 참여자 수 표기

문항 선택 페이지

문항 선택에 따른 로직

프로그레스바

화면 넘김 시 애니메이션

공유하기 (KakaoTalk)

CTA(콜투액션) : 웹사이트, 랜딩페이지, 이메일 또는 광고에서 고객으로 하여금 원하는 작업을 수행하도록 유도하는 짧은 문구

firebase를 이용한 호스팅

Meta 태그 세팅

🔲호스팅페이지

프로젝트로 최종적으로 만든 → 구현 페이지

📝회고

🤩프로젝트에서 만족한 부분(keep)

사전기획과 소통이 잘 되어서 정해진 시간안에 프로젝트를
진행할 수 있었다.
사전에 생각했던 디자인 컨셉에 맞게 UI가 잘 구성된거 같다.

😥잘 되지 않았거나 문제가 있던 내용(problem)

자바스크립을 이용해 파이어베이스의 리얼타임데이터베이스에 정보를 넘기고 받는 과정에서 공식사이트에 나와있는
import { getFirestore } from "firebase/firestore"
코드를 사용하였지만 적용되지 않았다.
구글링을 통해 자바스크립트에는
import {
        getFirestore,
        doc,
        setDoc,
        getDoc,
      } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-firestore.js"
형식으로 가져와야 기능이 먹힌다는걸 알게되었다.

addthis 사이트를 이용해서 공유하기 기능을 삽입하였으나
카카오톡의 보안정책이 바뀌어서 공유기능이 되지 않아
카카오디벨롭 사이트에서 api를 받아서 구현했다.

Meta 태그 이미지
카톡공유하기로는 이미지가 잘 나오지만
링크를 복사해서 공유했을 때 메타태그 이미지가 구현되지않았다😥

🧐개선점(try)

firebase를 통해 더 많은 정보를 얻고 싶다. 본인의 mbti를 먼저 입력한 후 mbti들이 선택한 질문을 취합하여 질문지를 개선한다면 모든 mbti를 맞출 수 있는 test사이트를 구현해보고 싶다.

css부분에서
flex와 position을 어느정도 이해하고 쓸 수 있다고 생각했는데
반응형과 같이 만드는 건 이번 프로젝트에서도 여전히 미숙했던 것 같다.

js로직에서 인덱스페이지에서 한번에 결과까지 실행되는 코드로 짜서
결과 공유와 결과공유페이지에 제한이 있었다.
결과 공유페이지 자체가 없어서 다시 심리테스트를 만든다면 메인,질문,결과 페이지를 나누어서 만들어서 결과 공유페이지를 공유할 수 있게끔 설계해서 만들것이다.

🤔첫 프로젝트 후기(review)

첫 프로젝트보단 기획부분에 있어서 어느정도 구상이 가능해졌고
막히는 부분에 있어서 서칭하는 능력이 키워져있어서 두려움이 적었다.
아쉬운 점을 꼽자면 리액트를 사용하지 않은 부분이 아쉬웠다.
js와 react 중 더 기본적인 js로 구현을 하자고 하였지만 react가 왜 생겼는지 깨닫게 되었다.