Marvel 성격 유형 테스트 (팀 프로젝트)

[포스코x코딩온] 웹개발자 풀스택 부트캠프8기 2023. 7. 27. 11:04

728x90

웹 사이트 프로젝트

Day1. 23.07.17

지금까지 배운 내용(HTML, CSS, JS)들로 간단한 웹 사이트를 다른 2명의 크루분들과 함께 협업하여 제작하는 프로젝트 시작하였습니다.
아이디어 회의: 어떠한 주제를 가지고 웹사이트를 제작할지에 대한 아이디어 회의를 진행하였다. 주제를 정하기 위해 서로의 관심사나 원하는 주제에 대해 이야기를 나누었다. 그 결과, 쇼핑몰, 심리테스트, 영화 추천, 여행지 추천의 후보지가 도출되었다. 4가지의 후보 중에 개인정보 데이터를 저장할 데이터베이스 서버와 클라우드 플랫폼이 필요 없을 것 같은(아직 만들지 않았으니...) 심리테스트 사이트를 만들기로 결정하였다.
서버와 데이터베이스가 없는 상태에서 간단한 데이터를 저장하기 위해 HTML5웹 스토리지 옵션인 LocalStorage와 SessionStorage를 사용하려고 한다.
- 로컬 스토리지는 데이터를 사용자의 로컬 브라우저에 영구적으로 저장한다. 따라서 동일한 브라우저에서 여러 세션에 걸쳐 데이터가 지속된다.
- 세션 스토리지는 데이터를 현재 브라우저 세션 동안만 저장하며, 브라우저가 닫히면 데이터는 삭제된다.
- 둘 다 일시적인 데이터 저장에 유용하지만, 보안에 취약하다는 단점을 가지고 있다.
- 이러한 특징들을 가지고 있어서 개인정보 데이터의 중요도가 높지 않은 심리 테스트로 결정하였다.
심리테스트 구체화: 마블 영화 캐릭터들이 결과로 나오는 심리 테스트 / 여러가지의 질문에 대해 답을 하고 나면 마블 캐릭터로 결과가 나오는 심리 테스트
협업을 위한 기본 세팅
- Git Repositories를 새로 만들어서 공유.
  - https://github.com/KDT-8-Team-8/marvel_test.git

GitHub - KDT-8-Team-8/marvel_test

Contribute to KDT-8-Team-8/marvel_test development by creating an account on GitHub.

github.com

내 branch 생성(kdh)

kdh 브랜치에서 작업 내용을 올리고 pull request를 develop으로 하면 된다. 그 후 다른 크루들과의 충돌 여부를 확인하고 모든 작업 다 끝나고 배포하기 위해서 main으로 옮기면 된다.
아래 사진처럼 branch들이 확인되면 협업 준비 끝!

과제로 할 일: 각자 협업 준비하고 마블 심리 테스트 질문 및 선택지 작성하기.

처음 보는 사람들과의 협업이 오랜만이라 살짝 어색하지만 이 또한 경험이라고 생각하여 도전하기로 했습니다.

Day2. 23.07.18

각자 준비해온 마블 심리 테스트 질문지를 공유하고 그중에 질문을 추렸다.
협업을 위해 업무 분담을 진행
A크루분은 추린 질문을 통해서 선택지들을 클릭하였을 때 결과값으로 그에 맞는 마블 히어로가 나오는 개발을 담당하였고, B크루분은 모든 화면에 들어갈 Header과 Footer 요소 개발을 담당하였다. 나는 첫 시작 화면과 결과값을 가지고 화면에 도출되는 마지막 화면 개발을 담당하였다.

첫 시작 화면(main)

화면에 들어갈 이미지 선택
버튼 디자인을 위해 Bootstrap 사용
글자 폰트 변경을 위해 구글 폰트 사용

구글 폰트를 사용하기 위한 방법

https://fonts.google.com/?preview.size=27

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

여기서 원하는 폰트를 선택한다.

1번(미클릭시 +로 나와있음), 2번을 순서대로 클릭한다.

@import 부분을 복사하여 VS Code에 붙여 넣어서 사용한다.

나머지 화면 구성은 다른 작성글을 보면 나와있습니다.

코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>시작 페이지</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
      crossorigin="anonymous"
    ></script>
    <style></style>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Fasthand&family=Pangolin&display=swap");

      .sub {
        font-family: Bagel + Fat + One;
        position: absolute;
        top: 13%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 25px;
        color: white;
        text-align: center;
      }
      .poster {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      img {
        width: 350px;
        height: 500px;
        opacity: 0.9;
      }
      .start {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      #startButton {
        font-family: Fasthand;
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 25px;
        text-align: center;
        width: 150px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div class="poster">
      <img
        src="/marvel_test/Marvel Fans Are Freaking Out Over the Leaked 'Avengers 4' Title.jpg"
        alt="poster"
      />
      <div class="sub">내가 전생에 히어로였다면...?</div>
      <div class="start">
        <button id="startButton" type="button" class="btn btn-light">
          시작하기
        </button>
      </div>
    </div>
  </body>
</html>

실행

아직 버튼 연결 및 반응형 웹으로 고정을 시키지는 않았다. 이렇게 하고 Github에 push 완료하였고 나머지 부족한 부분은 B크루분이 Header와 Footer을 넣으면서 수정하기로 했다.

마지막 화면(finish)

결과값을 받아와서 그에 맞는 히어로의 사진이 나타나고 히어로의 MBTI, 특징, 최고의 궁합, 최악의 궁합의 데이터가 함께 나타나야 한다.
히어로의 사진 및 히어로별 MBTI, 특징 그리고 궁합에 대한 데이터를 수집
수집된 데이터를 가지고 화면 구성 시작

1. 화면 구성

히어로 사진
히어로 이름
MBTI
특징
최고의 궁합
최악의 궁합

코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>결과 페이지</title>
    <link rel="stylesheet" href="./finish.css" />
  </head>
  <body>
    <div id="resultContainer">
      <!--MBTI 결과값에 따라 변함-->
      <div class="poster">
        <img class="img" />
      </div>
      <div class="resultContent">
        <h1 id="heroName">히어로 이름</h1>
        <h2 id="resultMBTI">mbti 결과</h2>
        <br />
        <h2 id="explain">설명</h2>
        <div class="match">
          <div>
            <h1>최고의 궁합</h1>
            <h2 id="bestMatch"></h2>
            <img class="bestMatchImg" onclick="onClick('bestMatchImg')" />
          </div>
          <div>
            <h1>최악의 궁합</h1>
            <h2 id="worstMatch"></h2>
            <img class="worstMatchImg" onclick="onClick('worstMatchImg')" />
          </div>
        </div>
      </div>
    </div>
    <script src="/marvel_test/finish.js"></script>
    <script>
      result();
    </script>
  </body>
</html>

.poster {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
}
.img {
  border: solid 10px;
  border-color: black;
  width: 500px;
  height: 500px;
  border-radius: 10%;
}
.resultContent {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#explain {
  width: 700px;
  text-align: left;
}
.match {
  display: flex;
}
.match > div:not(:last-child) {
  margin-right: 250px;
}
.match img {
  width: 300px;
  height: 300px;
  border-radius: 10%;
  border: solid 10px;
  border-color: black;
}

2. 데이터 띄우기

if~else if문을 사용하여 히어로별로 각자의 데이터를 띄우는 데 성공하였다.
이렇게 char에 dr_strange가 할당되면 화면에 dr_strange 데이터가 들어간다.

function result(char){  
  char = "dr_strange";
  let imgElement = document.querySelector(".img");
  let heroNameElement = document.getElementById("heroName");
  let resultMBTIElement = document.getElementById("resultMBTI");
  let explainElement = document.getElementById("explain");
  let bestMatchElement = document.getElementById("bestMatch");
  let worstMatchElement = document.getElementById("worstMatch");
  let bestMatchImgElement = document.querySelector(".bestMatchImg");
  let worstMatchImgElement = document.querySelector(".worstMatchImg");

  if (char === "dr_strange") {
    imgElement.src = "/marvel_test/imge/hero/dr_strange.jpg";
    imgElement.alt = "dr_strange";
    heroNameElement.textContent = "닥터 스트레인지";
    resultMBTIElement.textContent = "INTJ";
    explainElement.textContent =
      "행동과 사고에 있어 독창적입니다.";

    bestMatchElement.textContent = "스파이더맨";
    bestMatchImgElement.src = "/marvel_test/imge/hero/SpiderMan.jpg";
    bestMatchImgElement.alt = "spider_man";

    worstMatchElement.textContent = "캡틴 아메리카";
    worstMatchImgElement.src = "/marvel_test/imge/hero/CaptainAmerica.jpg";
    worstMatchImgElement.alt = "cpt_america";
  } else if ~~

궁합에 있는 히어로를 클릭하였을 때 클릭된 히어로가 메인으로 뜨게 만들었다.

그러기 위해서 이미지를 클릭하였을 때 클릭된 히어로가 char에 할당이 되야 한다는 것을 알게 되었다. 이 부분을 해결하기 위하여 로컬스토리지와 세션스토리지 둘 중에 고민을 했다. 나는 세션스토리지를 사용하기로 결정했다. 그 이유는 로컬스토리지를 사용하게 되면 만료기간이 존재하지 않아서 페이지를 변경하거나 브라우저를 닫아도 반영구적으로 유지되기에 새로운 심리 테스트를 진행해도 예전의 결과값이 나올 확률이 존재하기 때문이다. 그에 반해 세션스토리지는 브라우저를 닫는 경우 소멸이 되기 때문에 새로운 심리테스트를 할 수 있다.

function onClick(imageId) {
  var char = "";
  if (imageId === "bestMatchImg") {
    char = document.querySelector(".bestMatchImg").alt;
  } else if (imageId === "worstMatchImg") {
    char = document.querySelector(".worstMatchImg").alt;
  }
  result(char);
  sessionStorage.setItem("charValue", char); //로컬 스토리지에 char값 저장
  location.reload(); //현재 페이지 새로고침
}

이미지 클릭 시 클릭된 값을 세션스토리지에 담고

  var storedChar = sessionStorage.getItem("charValue"); //로컬 스토리지에 저장된 charValue 값을 가져온다.
  var char = storedChar ? storedChar : "thanos";
  //삼항 연산자를 사용하여 storedChar의 있으면 storedChar의 값을 사용하고 없으면 "dr_strange"(이부분을 설문조사 결과값으로 받아오면 된다.)사용.

char 변수를 삼항연산자를 사용하여 할당하면 된다.

아직, 선택지에 대한 결과값을 받아오는 부분은 구성하지 않았기에 예시로 thanos를 넣어두었다.

결과

Day3. 23.07.19

마지막 화면(finish)

마지막화면에서는 선택된 값에 따라 MBTI와 히어로가 결정된다.
A크루분이 구성한 MBTI가 결정되는 로직을 바탕으로 결과값을 세션스토리지에 담는다.

sessionStorage.setItem("charValueFirst", user_char);

세션스토리지에 담긴 값을 result 함수의 변수에 넣어야 하는데 이때 궁합을 클릭했을 때의 값도 받아야 하므로 삼항연산자를 사용한다.

var storedChar = sessionStorage.getItem("charValue"); //로컬 스토리지에 저장된 charValue 값을 가져온다.

var charValueFirst = sessionStorage.getItem("charValueFirst");

var char = storedChar ? storedChar : charValueFirst;

이렇게 하면 처음 결과 페이지로 넘어올때는 charValue이 비어있기 때문에 charValueFirst의 값을 받아오고 결과를 보고 난 후 궁합을 클릭했을 때는 charValue의 값이 있으니 그 값을 할당하게 된다.

질문(question) 및 결과(result) 도출

코드

<div class="question">
      <p>나는 사람들을 만날 때</p>
    </div>
    <div class="answer">
      <button class="answer1" id="I">
        사람이 너무 많으면 부담스러워.. 일대일이나 소수끼리 만나는 것이 좋다!
      </button>
      <button class="answer2" id="E">
        사람은 많을수록 재미있지! 다수로 만나는 것이 좋다!
      </button>
    </div>

  </div>

  <footer id="footer"></footer>

  <script>
    // 진행 바 변경
    let num = $("title").text();
    $("#bar").attr("style", "width: calc(100/12*" + num + "%)");

    // 로컬스토리지 저장
    $("button").click(function () {
      my_key = $(this).attr("id");
      console.log(my_key);
      localStorage.setItem("answer2", my_key);
      $(location).attr("href", "question3.html");
    });
  </script>
</body>

이 코드를 통해 두개의 선택지를 클릭했을 때 I나 E가 로컬스토리지에 저장되게 하였다.

질문지별로 선택된 값들을 로컬스토리지에 저장하여 마지막에 아래의 코드를 통해 MBTI와 히어로를 도출한다.

function make_arr() {
  let resArr = [];
  // 유저가 답한 I,E,N,S,T,F,J,P 배열에 추가
  for (let i = 1; i <= 20; i++) {
    let res = localStorage.getItem(`answer${i}`);
    resArr.push(res);
  }

  let IE_res = 0;
  let NS_res = 0;
  let TF_res = 0;
  let JP_res = 0;
  // 유저 답안 배열 검사해 숫자 설정
  for (let i = 0; i <= 20; i++) {
    if (resArr[i] === "I") {
      IE_res += 1;
    } else if (resArr[i] === "N") {
      NS_res += 1;
    } else if (resArr[i] === "T") {
      TF_res += 1;
    } else if (resArr[i] === "J") {
      JP_res += 1;
    }
  }
  // 설정한 숫자 배열로 만들기
  let mbtiArr = [IE_res, NS_res, TF_res, JP_res];
  return mbtiArr;
}

// MBTI 추출 함수
function MBTI(ans) {
  // ans에는 [0,1,3,0]등의 배열이 들어감
  // 질문 수
  let IE_question = 5;
  let NS_question = 5;
  let TF_question = 5;
  let JP_question = 5;
  // 결과 값 넣을 변수
  let MBTIres = "";
  // 문제 수로 나눠 몇% 체크했는지 확인
  let IE_res = ans[0] / IE_question;
  let NS_res = ans[1] / NS_question;
  let TF_res = ans[2] / TF_question;
  let JP_res = ans[3] / JP_question;
  let res_arr = [IE_res, NS_res, TF_res, JP_res];
  // 결과 값에 넣을 MBTI 배열로 활용
  let mbti_arr = ["I", "E", "N", "S", "T", "F", "J", "P"];

  for (let i = 0; i <= 3; i++) {
    if (res_arr[i] > 0.5) {
      MBTIres += mbti_arr[2 * i];
    } else {
      MBTIres += mbti_arr[2 * i + 1];
    }
  }
  return MBTIres;
}
// 캐릭터 추출 함수
function check_char(ans) {
  // ans에는 INTJ,ENFP 등의 MBTI 문자열이 들어감
  let char_arr = [
    "dr_strange", // INTJ
    "hulk", // INTP
    "thanos", // ENTJ
    "iron_man", // ENTP
    "vision", // INFJ
    "witch", // INFP
    "roki", // ENFJ
    "spider_man", // ENFP
    "hawk_eye", // ISTJ
    "cpt_america", // ISFJ
    "cpt_marvel", // ESTJ
    "ant_man", // ESFJ
    "black_widow", // ISTP
    "black_panther", // ISFP
    "star_load", // ESTP
    "thor", // ESFP
  ];
  let mbti_res = [
    "INTJ",
    "INTP",
    "ENTJ",
    "ENTP",
    "INFJ",
    "INFP",
    "ENFJ",
    "ENFP",
    "ISTJ",
    "ISFJ",
    "ESTJ",
    "ESFJ",
    "ISTP",
    "ISFP",
    "ESTP",
    "ESFP",
  ];
  for (let i = 0; i < 16; i++) {
    if (ans == mbti_res[i]) {
      // 캐릭터와 mbti 매칭
      return char_arr[i];
    }
  }
}

크루분들과 협업을 통해 하다 보니 깃허브를 필수로 사용하였다. 우리는 초반에 깃허브에서 충돌이 많이 생겼다. 사용순서가 엉켰기 때문이다. 그래서 따로 협업을 위한 깃허브를 정리하였습니다.
https://dongho-kang.tistory.com/25

협업을 위한 간단한 Github사용법

협업을 위한 Github 사용 제가 실제로 사용하면서 배운 점을 작성하였습니다.(정답은 아닐 수 있어요...) 간단한 프로젝트인 경우에도 브랜치를 2개 이상 구성합니다. Main Branch : 실제로 서버에서

dongho-kang.tistory.com

이제 CSS 구성 및 테스트를 통해 오류 발견하고 잡으면 될 것 같다!!

Day3. 23.07.20

끝날 줄 알았지만 아직 많이 남은 프로젝트...

마지막 결과 페이지 뒷배경에 히어로별 영상 깔기
마지막 결과 페이지에 헤더와 풋더 넣기

히어로별 영상 넣기

히어로별 영상을 다운받아서 넣으면 된다.

videoElement.src = "/video/dr_strange.mp4";

배경을 넣을 자리를 정해준다.

<strong>해당 브라우저에서는 영상이 제공되지 않습니다.</strong>

</video>

Header와 Footer 넣기

이미 헤더와 풋더는 만들어 둔 것이 있어서 가져오기만 하면 된다.
Body 태그에 넣어주고

head 태그에 js와 jQuery를 연결해 주면 된다.

<script

src="https://code.jquery.com/jquery-3.7.0.js"

integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="

crossorigin="anonymous"

></script>

오늘은 히어로별 영상 찾고 연결하는 데 시간을 많이 사용하였다. 또, 작은 오류들(버튼 클릭 이슈, 애니메이션 효과 등)을 수정하는 것으로 마무리하였다. 분명 어제만 해도 금방 끝날 거 같았는데 프로젝트를 진행할수록 눈에 거슬리는 게 많아지고 수정하는 작업이 많아진다. 이게 프로젝트의 묘미가 아닌가 생각한다. ㅎㅎ 큰 틀을 잡아두면 끝나는 게 아니라 작은 것들(세심한 부분)을 수정하고 또 수정하는 게 더 완벽한 결과물을 만드는 것이라 생각한다.

다음 할일: 로딩 페이지 만들기, 반응형으로 웹 사이트 크기 변하였을 때의 화면 만들기

Day3. 23.07.21

로딩 페이지 만들기
반응형 웹 사이트 만들기(@media 쿼리)
카카오톡 연동으로 공유하기 만들기

로딩 페이지 만들기

부트스트랩을 사용하여 prograss 바 만들기

<link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
      crossorigin="anonymous"
    />
<div class="progress">
      <div
        class="progress-bar"
        id="bar"
        role="progressbar"
        aria-valuenow="100"
        aria-valuemin="0"
        aria-valuemax="100"
      ></div>
    </div>

애니메이션을 설정하여 prograss 바가 5초 동안 진행되게 설정하였습니다.

.progress {
        margin-top: 20px;
        width: 50%;
        height: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        overflow: hidden;
      }

      .progress-bar {
        animation: progress 5s linear infinite;
        height: 100%;
        background-color: #007bff;
      }

      @keyframes progress {
        0% {
          width: 0;
        }
        100% {
          width: 100%;
        }
      }

지금은 보여주기 위해서 애니메이션을 사용하여 대기시간을 만들었지만 나중에는 실제 데이터를 처리하는 시간만큼 로딩페이지가 나타날 수 있게 만들어 보려고 합니다.

반응형 웹 사이트 만들기(@media 쿼리)(finish 화면)

@media쿼리를 사용하여 넓이가 768px이하일때 다른 css가 적용되게 함
크기에 따라 font를 다르게 주어서 작은 화면에서도 가독성 좋게 만듦
자동 줄 바꿈을 설정하여 긴 글의 경우에도 글자들이 화면에 맞게 조절되게 함
영상도 object-fit : cover을 사용하여 영상 비율을 유지하며 화면 비율에 맞춤

finish 화면 전체 CSS

@font-face {
  font-family: "GmarketSansMedium";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

.fullscreen-video {
  font-family: "GmarketSansMedium";
}
.poster {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10vh;
}
.img {
  border: solid 5px;
  border-color: black;
  width: 350px;
  height: 350px;
  border-radius: 10%;
}
.resultContent {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#heroName {
  font-size: 40px;
}
#resultMBTI {
  font-size: 25px;
}
#explain {
  width: 70%; /*%로 하니 화면 비율에 따라 자동으로 글자 줄 바꿈을 한다.*/
  text-align: justify;
  word-break: break-all;
  font-size: 25px;
}
#best {
  font-size: 30px;
}
#bestMatch {
  font-size: 20px;
}
#worst {
  font-size: 30px;
}
#worstMatch {
  font-size: 20px;
}
.match {
  display: flex;
}
.match > div:not(:last-child) {
  margin-right: 250px;
}
.match img {
  width: 250px;
  height: 250px;
  border-radius: 10%;
  border: solid 5px;
  border-color: black;
  cursor: pointer;
}

.fullscreen-video {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bgVideo {
  width: 100%;
  height: auto;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0.3;
}
#restart {
  margin-bottom: 10px;
}

.img_box {
  display: flex;
  justify-content: center;
}
.SNS {
  width: 50px;
  margin-left: 10px;
  margin-bottom: 10px;
}
img:hover {
  cursor: pointer;
}
/* 넓이가 768px이하일 때 적용 */
@media screen and (max-width: 768px) {
  .img {
    width: 255px;
    height: 255px;
    /* 다른 스타일 변경 내용 추가 */
  }
  #heroName {
    font-size: 25px;
  }
  #resultMBTI {
    font-size: 15px;
  }
  #explain {
    font-size: 20px;
  }
  #best {
    font-size: 20px;
  }
  #bestMatch {
    font-size: 15px;
  }
  #worst {
    font-size: 20px;
  }
  #worstMatch {
    font-size: 15px;
  }

  .match {
    flex-direction: column; /*열로 배치*/
    align-items: center; /*가로 중앙에 배치*/
    justify-content: center; /*세로 중앙에 배치*/
  }

  .match > div:not(:last-child) {
    margin: 20px; /* 각 요소 사이의 간격 설정 */
    text-align: center; /* 내부 요소들 가운데 정렬 */
  }

  .match img {
    width: 200px;
    height: 200px;
    /* 다른 스타일 변경 내용 추가 */
  }
  .bgVideo {
    width: 100%;
    height: 100%;
    object-fit: cover; /*영상 비율을 유지하며 화면 비율에 맞춤*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    opacity: 0.3;
  }
}

오류:

반응형으로 화면은 다 조절하였지만 모바일에서 실행해 봤을 때 백그라운드 영상이 재생이 안되는 오류를 발견하였다.

원인 및 해결:

모바일의 경우 사용자 데이터량 제한 등으로 자동 재생이 안될 수 있다.
저전력 모드인 경우 자동 재생이 안될 수 있다.

위의 두 부분은 내가 해결할 수 없는 부분이라 그냥 두었고, 다른 사람들의 코드와 비교한 결과 내가 사용한 코드 중에 playsinline이 없었다는 것을 발견하였다. 그래서 playinline을 추가했다.

<video muted playsinline autoplay loop id="bgVideo" class="bgVideo">
          <strong>해당 브라우저에서는 영상이 제공되지 않습니다.</strong>
        </video>

이러니 모바일에서도 재생이 원활하게 진행되었다.

카카오톡 연동으로 공유하기 만들기

이 부분은 작성할 게 많아서 따로 글을 작성해 두었습니다.

https://dongho-kang.tistory.com/26

카카오톡 공유 메시지(Kakao Developers 이용)

카카오톡 공유 메시지 보내기 마블 테스트 결과를 카카오톡으로 공유하는 메시지를 보내고 싶다는 마음으로 시작한 카톡 공유 메세지 보내기! 1. 카카오 개발자 아이디 생성 https://developers.kakao.c

dongho-kang.tistory.com

제일 인상 깊었던 개발은 내가 카카오 API를 사용하여 카카오톡으로 공유 메시지를 보낸 것이었다. 하면서 되게 어렵고 자료들을 읽으면서 하나씩 하느라 시간이 오래 걸렸지만 다 하고 나니 뿌듯했다. 그리고 모든 개발을 정식 문서를 읽으면서 하면 할 수 있다는 것을 한번 더 깨달았다.

Day4. 23.07.22

카카오 JavaScript키 이슈 해결방안

카카오 JavaScript 키 이슈

키 값을 공개하면 보안적 이슈가 발생할 수 있다는 생각이 듦
키 값을 공개하지 않으려고 여러 가지 방안을 고민하고 여러가지 자료들을 찾아봄

공개하지 않으려고 해 본 시도:

.gitignore 파일에 키 값을 넣었지만 그렇게 하게 되면 로컬에서만 작동이 되고 github에 있는 코드로 배포하는 netlify에서는 작동이 안 됨
환경변수 env로 설정하고 netlify에 키 값을 넣어두어서 받아오는 형식을 사용했지만 내가 지금 프로젝트로 사용하는 VS Code는 단순히 HTML을 사용함으로 Node.js처럼 환경변수를 받아오지 못한다는 것을 알게 됨
키 값을 암호화(RSA, Hash함수 등)를 하는 방식을 사용해 보려고 했지만 이 부분은 아직 나의 전문적인 지식이 부족하여 잘 작동되지 않았음

이러한 시도들을 하던 와중에 카카오에서 내놓은 답변을 보게 되었다.

이러한 자료들을 보고 나니 내가 설정한 도메인에서만 사용할 수 있다는 것을 알게 되었고 Admin 키를 공개하는 것이 아니니 괜찮겠다는 생각이 들었습니다. 그래서 일단은 html코드에 작성하기로 했습니다.

Day5. 23.07.24

카카오 로그인 기능 구현하기

로그인 기능 구현

카카오 로그인 기능을 구현하기 위한 글

https://dongho-kang.tistory.com/28

카카오톡 로그인 구현(with JavaScript)

카카오톡 로그인 구현하기 카카오로 로그인하기 이걸 구현하기 위해 카카오 개발자 문서와 구글링을 엄청 많이 했다... 그래서 꼭 성공한 후 정리해서 남겨두고 싶었다. 카카오 로그인의 로직은

dongho-kang.tistory.com

이후 검사 결과를 로그인정보에 저장하여 추후에 로그인하였을 때 검사 결과를 띄우는 걸 구현하고 싶었지만,

이번 프로젝트에는 데이터베이스를 따로 사용하지 않기에 구현하기가 어렵다는 걸 느꼈다...

이제 내일 최종으로 다른 팀원들의 코드와 합쳐서 최종 결과물을 확인하고 발표준비를 하면 이번 프로젝트는 끝이 난다!

Day6. 23.07.25

카카오 프로필 이미지 띄우기
netlify로 배포하기

카카오 프로필 이미지 띄우기

https://dongho-kang.tistory.com/29

카카오톡 이름, 프로필 이미지 및 아이디 사용하기

카카오톡 이름, 프로필 이미지 및 아이디 사용하기 카카오 로그인에서 사용한 코드 중 일부분을 자세히 보자 https://dongho-kang.tistory.com/28 카카오톡 로그인 구현(with JavaScript) 카카오톡 로그인 구현

dongho-kang.tistory.com

각자의 코드에서 오류가 있는 부분이 없는지 확인한 후 코드를 다 합치고 한번 더 검토를 한 후 netlify에 배포하였다.

netlify로 배포하기

https://dongho-kang.tistory.com/24

[포스코x코딩온] 웹 호스팅 서비스(netlify)

Netlify 웹 호스팅 서비스로 웹 사이트 배포가 가능하다. git repository와 연결해서 배포가 가능하다. https://www.netlify.com/ Develop and deploy websites and apps in record time | Netlify Accelerate the time to deploy your websit

dongho-kang.tistory.com

전체 코드

https://github.com/KDT-8-Team-8/marvel_test.git

GitHub - KDT-8-Team-8/marvel_test

Contribute to KDT-8-Team-8/marvel_test development by creating an account on GitHub.

github.com

결과

https://marveltest1.netlify.app/index.html

마블 성격 유형 테스트

marveltest1.netlify.app

한 번씩 해보세요~!~!

일주일이라는 시간 동안 밤낮없이 열심히 하여 완벽하진 않지만 결과물을 내서 되게 뿌듯하다. 우리는 우리가 배운 부분과 더불어 제한된 시간 안에 활용할 수 있는 모든 것을 활용하여 마블 성격 유형 테스트를 만들어냈다. 나 스스로도 코드를 짜면서 생각을 많이 하였고 카카오 개발자 문서나 이전에 배운 자료들을 다 찾아보았던 것 같다. 이는 나를 한층 더 성장시켜주었다. 문서와 자료들을 꼼꼼히 읽어가며 코드를 구성하는 방법을 한번 더 상기시키는 시간이었다.

이제 내일 발표만 하면 이번 프로젝트는 마무리된다.! 내일 피드백도 기대가 된다!

배운 점&좋았던 점

협업으로 진행되다 보니 각자 맡은 업무에 대해 더 깊이 있는 전문성을 가질 수 있었다.
새로운 사람들과 짧은 시간 안에 협업하는 방법을 익혔다.
카카오 API 사용법을 혼자 공부하고 구현하여 뿌듯함을 느꼈다.
깃허브 협업을 제대로 사용해 보았다.
HTML, CSS, JS만을 활용해서도 충분히 이 정도의 사이트는 만들 수 있겠다는 자신감이 생겼다.

아쉬운 점

데이터베이스를 쓰지 못한 점
디자인적 요소에 좀 더 신경 쓰지 못한 점
암호화방식을 사용하여 키 값을 숨기지 못한 점
프로그래밍 언어 규칙을 미리 정하지 않고 진행했던 점

발표

팀장님이 발표를 진행

팀 피드백

잘 만들었다.
심리 테스트라는 주제가 흔한 주제여서 경쟁력을 가지기 어려워 보인다.
발표에서 핵심 코드만 보여준 부분이 좋았다.

전체 피드백

발표도 중요하다.
JS에 집중하다 보니 UI/UX적인 부분의 살짝 부족하다.
면접관이 어떠한 화면 크기로 볼 지 모르니 모바일 버전을 구성할 때 가로 스크롤이 생기는 것을 방지해야 한다.
코드를 보여주고 싶을 때는 알고리즘 순서도를 활용하고 코드를 짧게만 보여줘야 한다.
hoover 기능은 모바일로 갔을 때는 사용할 수 없으니 모바일에서의 방안도 고민하기

마무리

총 8일이라는 짧다면 짧고 길다면 길다고 할 수 있는 시간 동안 빠르게 프로젝트를 해보는 경험은 나에게 있어서 큰 의미가 있었다. 길게 하는 프로젝트와는 다르게 빠르게 진행되니 좀 더 몰입하여 할 수 있었다. 또한, 처음 만난 사람들과 친해질 틈 없이 진행한 경험은 앞으로 사회생활을 할때 많은 도움이 될 거라 생각한다. 하지만 시간이 부족하여 깊이 있게 하지 못 한 부분이 아쉬움으로 남는 프로젝트였다.

★notion에 프로젝트 정리

https://standing-quart-92f.notion.site/Blue-Marvel-b87d58f98cfd40bcbaf27e4a7cb4a6b9?pvs=4

Blue Marvel

개발 범위

standing-quart-92f.notion.site

728x90

'[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글

[포스코x코딩온] 모듈(Module) (0)	2023.07.27
[포스코x코딩온] Node.js의 기본 개념 및 시작 (1)	2023.07.27
카카오톡 이름, 프로필 이미지 및 아이디 사용하기 (0)	2023.07.25
카카오톡 로그인 구현(with JavaScript) (1)	2023.07.24
API 키 GitHub에서 숨기기 (0)	2023.07.21

ABOUT ME

개발로 가치를 찾는 개발자 개발로 가치를 찾는 개발자

웹 사이트 프로젝트

Day1. 23.07.17

Day2. 23.07.18

첫 시작 화면(main)

마지막 화면(finish)

Day3. 23.07.19

마지막 화면(finish)

질문(question) 및 결과(result) 도출

Day3. 23.07.20

Day3. 23.07.21

Day4. 23.07.22

Day5. 23.07.24

Day6. 23.07.25

전체 코드

결과

발표

팀 피드백

전체 피드백

마무리

★notion에 프로젝트 정리

'[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글

티스토리툴바

ABOUT ME

웹 사이트 프로젝트

Day1. 23.07.17

Day2. 23.07.18

첫 시작 화면(main)

마지막 화면(finish)

Day3. 23.07.19

마지막 화면(finish)

질문(question) 및 결과(result) 도출

Day3. 23.07.20

Day3. 23.07.21

Day4. 23.07.22

Day5. 23.07.24

Day6. 23.07.25

전체 코드

결과

발표

팀 피드백

전체 피드백

마무리

★notion에 프로젝트 정리

'[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바