웹툰 취향 테스트 만들기(1)

0. 링크

배포 : https://webtoon-type-test.netlify.app
깃헙 : https://github.com/kimmsoll/webtoon-type-test-js

---

1. 동기

평소 취미로 웹툰을 즐겨 보는데, 친구들에게 추천해 줄 때 링크를 하나하나 찾아 보내는 것보다 더 쉽게 추천할 수 있는 방법이 없을까 생각했다. 심리테스트 형식을 빌려 친구들의 취향에 딱 맞는 웹툰을 추천하는 프로젝트를 만들면 좋을 것 같았다.

---

2. 진행 계획

1. 문항을 만들고, 데이터를 엑셀로 정리한다.
2. 시작 화면부터, 각 페이지 별로 버튼을 누르면 다음 페이지로 넘어가게 한다.
3. 각 선택 버튼의 dataset 을 특정 숫자로 주고, 버튼을 누를 때마다 배열과 localStorage 에 추가되도록 한다.
4. 결과 화면에서 추려진 dataset의 조합으로 이미지, 텍스트를 출력한다.
5. 결과 화면에 웹툰 보러 가기 링크, 다시 하기, 카톡으로 공유하기 버튼을 넣는다.
6. netlify 로 배포해본다.

---

3. 진행 과정

1. 처음에 question html 파일을 question 별로 나눠서 3개로 만들었는데, 다음 페이지로 넘어갈 때마다 localStorage가 새로고침 되어버렸다. 방법을 찾다가, question 파일을 하나로 통일하고, dataset 값이 담기는 배열 길이에 따라 각 question의 display를 none 또는 flex 로 바뀌게끔 구현했다. 좋은 방법일지는 모르겠으나, 구현은 됐다.

const onClick = (e) => {
    if (e.target.dataset.num) {
        result.push(e.target.dataset.num);
        localStorage.setItem("key", result);
    }
    if (result.length === 1) {
        firstQ.style.display = "none";
        secondQ.style.display = "flex";
    } else if (result.length === 2) {
        firstQ.style.display = "none";
        secondQ.style.display = "none";
        finalQ.style.display = "flex";
    } else if (result.length === 3) {
        location.replace("https://webtoon-type-test.netlify.app/result.html");
    }
};

2. Class로 데이터를 만들어봤는데, json으로 만들 때보다 훨씬 간단하게 만들 수 있었다.

class Webtoon {
    constructor(title, description, synopsis, link){
        this.title = title;
        this.description = description;
        this.synopsis = synopsis;
        this.link = link;
    }
}
const cartoons = {
    "111" : new Webtoon(
    "2B 작가의 < 퀴퀴한 일기 >",
    "친근한 캐릭터를 좋아하는 당신! 오늘부터 보람 언냐의 “벗”이 되어보는 건 어때요? 때론 가볍고 때론 묵직한 이야기 속, 섬세한 표정과 생생한 제스처에 함께 울고 웃을 수 있을 거예요.",
    "내 주변에 반드시 한 명은 있을 것만 같은, 어쩌면 나 같기도 한 그녀의 일기. 어느덧 40대의 아기 엄마가 된 주인공 이보람과 그의 군단들의 이야기이다...바쁜 하루 동안 미처 돌아보지 못한 내 마음 깊은 곳에 숨어있는 작은 먼지들을 툭툭 털어내어 볼 수 있는 우리의 일기장. 퀴퀴한 일기.",
    "https://webtoon.kakao.com/content/%ED%80%B4%ED%80%B4%ED%95%9C-%EC%9D%BC%EA%B8%B0/1295"
    ),
// 이하 생략

3. js에서 화면 넘어가기 기능을 어떻게 구현해야 할 지 막막했다. 구글링으로 알아보니 location.href, location.replace 를 쓰는 방법이 있었다.

   https://developer.mozilla.org/en-US/docs/Web/API/Location/href

4. netlify로 배포할 때 드래그로 생성하는 방법은 쉽지만 코드를 업데이트했을 때 바로 반영될 수 없는 방법이었다. 깃허브 레포지토리로 생성하면 새로 커밋한 내용이 바로 반영되는 장점이 있었다. directory 지정 부분에서 많이 헤맸는데, 아무 것도 지정하지 않았더니 정상적으로 만들어졌다. 그리고 파일 링크("./index.html")로 만들었더니 netlify에서 동작하지 않아서, netlify링크로 수정했더니 동작이 됐다.

3-1 javascript 전체 코드

const buttons = document.querySelectorAll("button");
const firstQ = document.querySelector("#q--first");
const secondQ = document.querySelector("#q--second");
const finalQ = document.querySelector("#q--final");
const cartoonTitle = document.querySelector("#cartoon__title");
const cartoonImg = document.querySelector("#cartoon__img");
const description = document.querySelector("#description");
const synopsis = document.querySelector("#synopsis");
const startImg = document.querySelector("#start__img");
const goToWatchBtn = document.querySelector("#button--watch");

let result = [];

const randomStartImg = () => {
    const imgNums = [111,112,121,122,131,132,141,142,151,152,211,212,221,222,231,232,241,242,251,252]; 
    const randomNum = Math.floor(Math.random() * (imgNums.length)) + 1;
    startImg.innerHTML = `<img src="./imgs/${imgNums[randomNum-1]}.png">`;
}

const onClick = (e) => {
    if (e.target.dataset.num) {
        result.push(e.target.dataset.num);
        localStorage.setItem("key", result);
    }
    if (result.length === 1) {
        firstQ.style.display = "none";
        secondQ.style.display = "flex";
    } else if (result.length === 2) {
        firstQ.style.display = "none";
        secondQ.style.display = "none";
        finalQ.style.display = "flex";
    } else if (result.length === 3) {
        location.replace("https://webtoon-type-test.netlify.app/result.html");
    }
};

const showResult = (num) => {
    cartoonImg.innerHTML = `<img src="imgs/${num}.png" id="result__image">`;
    cartoonTitle.innerText = cartoons[num].title;
    description.innerText = cartoons[num].description;
    synopsis.innerText = cartoons[num].synopsis;
};

const goToWatchWebtoon = (num) => {
    goToWatchBtn.addEventListener("click", () => {
        location.replace(cartoons[num].link);
    });
};

if(location.href === "https://webtoon-type-test.netlify.app/"){
    setInterval(()=>randomStartImg(),50);
}

if(location.href === "https://webtoon-type-test.netlify.app/result.html"){
    let resultNum = localStorage.getItem("key").split(",");
    resultNum = resultNum.reduce((pre,cur)=>pre+cur);
    showResult(resultNum);
    goToWatchWebtoon(resultNum);
}

buttons.forEach((btn)=>btn.addEventListener("click", onClick));

---

4. 화면

1. 시작 화면
   

2. 질문 화면
   

3. 결과 화면
   

---

5. 느낀점

• 처음 계획으로 70개의 경우의 수가 있었는데, js 구현에 신경을 더 쓰자는 판단으로 결국 20개의 데이터로 작업하게 됐다. 문항 수도 원래 계획했던 5개에서 3개로 줄였다. 사실 mbti 테스트보다 공부할 것이 적으니까 쉽게 데이터를 만들 수 있을 줄 알았는데, 문항 수에 따라 데이터를 분류하고 정리하는 게 쉽지 않았다.

• netlify 배포가 처음이라 많이 헤맸다. Live server 로 확인할 땐 결과 화면이 너무 빠르게 나와서, 기다리는 재미를 위해 "분석중" 애니매이션을 넣어야겠다고 생각했는데, netlify 배포 후 폰에서 확인했을 때는 동작이 너무 느렸다. 개선할 부분이 많을 것 같다.

• 아직 카카오톡 공유하기 기능은 구현하지 못했지만, 어떻게든 방법을 찾아 해낼 생각이다. 아직 부끄러운 실력이지만, 원하는 기능이 구현된다는 사실에 행복했다!