[포스코 x 코딩온] 웹 개발자 부트캠프 6주차 수업 회고

🐯  TEST-WORLD 팀 프로젝트 회고 

 

Test-World 팀 프로젝트

이번주는 4명이서 팀을 이뤄 프로젝트를 진행하는 시간을 가졌다.

프로젝트 주제는 경력 유형 검사, 성격 유형 검사, 반응속도 테스트, 색깔 찾기 테스트로 이루어진 모바일 기준의 웹앱을 만드는 것으로 결정했다.

사전 회의를 통해 디자인 컨셉은 픽셀게임 컨셉으로 결정하였고 이름도 여러가지 테스트가 모여있으니 test-world로 정하였다.

나는 반응속도 테스트 부분을 맡았고 일주일동안 팀원들과 맞춰가며 레이아웃과 디자인을 입히고 기능을 구현하였다.

주요 버튼들은 픽셀 컨셉에 맞추기 위해 이미지를 사용하였고 필요시 a태그나 이벤트 리스너를 통해 기능을 수행할 수 있게 하였다.

 

프로젝트 페이지:  https://posco-test-world.netlify.app/index.html

Test-World

 

- 메인 페이지

 

메인 페이지는 각 아이콘을 클릭하면 해당 검사 페이지로 이동 할 수 있도록 만들었다.

모든 페이지는 모바일 기준으로 레이아웃을 맞추기 위해 Bootstrap의 container-sm을 사용하여 컨텐츠들을 넣었다.

header와 content, footer로 이루어진 html을 작성했고 css는 scss를 이용하여 구현하였다.

가장 기억에 남는건 제목 부분에 타이핑 효과를 주는 부분을 내가 맡아 구현했었는데 일정 시간마다 함수를 반복해서 실행시키는 setInterval을 이용하였다.

제목의 컨텐츠를 인덱스 1개씩 잘라서 인덱스 값을 증가시키며 텍스트에 하나씩 더한 함수를 setInterval로 실행시켰고 

인덱스값이 컨텐츠와 같아지면 clearInterval을 통해 종료하는 형식으로 코드를 짰다.

커서가 깜빡거렸다가 사라지는 효과는 css keyframe을 통해 애니메이션으로 구현했다.

const headerTxt = document.querySelector(".header__text");
let content = "Test-World";
let i = 0;

function typingHeader() {
  if (i < content.length) {
    let text = content.charAt(i);
    headerTxt.innerHTML += text;
    i++;
  } // content의 i번째 인덱스를 text에 넣어 headerTxt에 밀어넣기
  if (content.length - 1 === i) {
    clearInterval(typingHeader);
  } // 인덱스 번호 i가 content의 길이 -1 이되면 clearInterval로 반복 중지 
}

window.onload = () => {
  setInterval(typingHeader, 150);
};

 

 // HEADER
    header {
      display: flex;
      border: 3px solid black;
      justify-content: center;
      align-items: center;
      height: 130px;
      width: 100%;
      padding: 20px;
      font-size: 50px;
      background-color: rgba(255, 255, 255, 0.5);
      p {
        margin: 0;

        &::after {
          content: "";
          margin-left: 0.4rem;

          animation: cursor 0.9s 5 steps(2);
        }
        @keyframes cursor {
          0% {
            border-right: none;
          }
          99% {
            border-right: 2px solid #181818;
          }
          100% {
            border-right: none;
          }
        }
      }
    }

 

 

- 반응속도 테스트?

 

내가 구현한 반응속도 테스트는 색깔이 바뀌는 순간 버튼을 눌러 시간을 기록하여 반응속도를 체크하는 테스트였다. 

 

 

- 테스트 페이지: 메인페이지

 

PLAY 버튼을 눌러 테스트 시작하게 하였고 test페이지의 html을 하나 더 만들어서 링크시키는 방식으로 페이지 전환을 구현했다.

 

테스트페이지 : 패널

 

테스트페이지의 패널은 색이 바뀌어 사용자에게 신호를 주는 역할을 한다.

그만큼 대기색과 신호색의 차이가 눈에 확 띄어야 한다고 생각해 대기 패널은 노란색 신호패널은 초록색으로 구성하였다.

대기화면에서 버튼을 누르는 것은 반칙이므로(광클(?)을 통해 빠른 기록이 가능해서) 빨간색 패널을 띄울 수 있도록 하였다.

각각 패널의 색을 변경하는 함수를 정의하여 패널의 색이 바뀌어야 하는 상황에 가져다 쓸 수 있도록 하였다.

대기색에서 신호색으로 패널의 색을 바꿀 때에는 일정 시간에 함수를 한번 실행시키는 setTimeout메서드를 이용하여 패널을 교체하였다.

실행 시간은 Math.random을 이용하여 3~7초 사이의 랜덤 시간으로 설정하였다.

 

 

//패널,버튼 색깔 바꾸기
function setYellowPanel() {
  testScreen.style.backgroundColor = YELLOW;
  testScreenText.textContent = "Wait for Green";
  recordBtn.setAttribute("src", "./img/btn/btn_yellow.png");
}

function setGreenPanel() {
  testScreen.style.backgroundColor = GREEN;
  testScreenText.textContent = "Push!";
  recordBtn.setAttribute("src", "./img/btn/btn_green.png");
}

function setRedPanel() {
  testScreen.style.backgroundColor = RED;
  testScreenText.innerHTML = `초록색에 버튼을 눌러주세요 <br> 버튼을 눌러 다시 시작하세요!`;
  recordBtn.setAttribute("src", "./img/btn/btn_red.png");
}

 

// 정답 노출 함수
function timer() {
  const randomTime = Math.floor(Math.random() * 5 + 3) * 1000;
  timeOut = setTimeout(() => {
    recordBtn.classList.add("animate__animated", "animate__bounceIn");
    setGreenPanel();
    START_TIME = new Date();
  }, randomTime);
}

 

테스트 페이지 - 버튼

 

가장 삽질을 많이했던 버튼 부분이다. 이벤트 리스너를 어떠한 상황에 따라 어떠한 방식으로 적용시켜야 할지 고민을 많이했고

여러번 수정한 끝에 하나의 이벤트 리스너에 조건을 걸어 다양한 역할을 할 수 있도록 하였다.

또 navigator객체의 userAgent에 접근하여 사용자의 디바이스를 확인해 모바일 환경에서는 touchdown이벤트를 적용하고 pc환경에서는 mousedown이벤트를 적용하였다. 이러한 테스트는 시간측정의 반응이 빨라야 한다고 생각 click이벤트를 쓰지 않고 mousedown 이벤트를 써보았다.

또 사용자가 바뀌는 순간을 조금 더 잘 알아차릴 수 있도록 버튼에 애니메이션을 넣었는데 animate.css 라이브러리를 사용하여 통통튀는 귀여운 버튼 애니메이션을 구현했다.(https://animate.style/)

 

//사용자 디바이스 확인
function isMobile() {
  const user = navigator.userAgent;
  let CHECK = false;

  if (
    user.indexOf("iPhone") > -1 ||
    user.indexOf("Android") > -1 ||
    user.indexOf("iPad") > -1
  ) {
    CHECK = true;
  }

  return CHECK;
}

//게임시작
function setGame() {
  setYellowPanel();
  timer();
  if (isMobile()) recordBtn.addEventListener("touchstart", touchEvent);
  if (!isMobile()) recordBtn.addEventListener("mousedown", touchEvent);
}

이벤트 리스너 함수는

패널이 노란색일때 이벤트가 발생하면 반칙이므로 빨간색 패널로 교체한 후 clearTimeout을 시켜 timeout을 종료시켰다.

패널이 초록색일때 이벤트가 발생하면 시간을 기록하고 테스트가 끝났는지 확인하고 노란색패널로 다시 교체하였다. 그리고 setTimeout을 다시 활성화 시켜 다음 단계로 넘어갈 수 있게 하였다.

패널이 빨간색일때 이벤트가 발생하면 반칙을 한 상태에서 한번 더 클릭을 한 것이므로 기록을 모두 지우고 노란색 패널로 바뀐 뒤 setTimeout을 실행시켜 게임을 다시 시작할 수 있도록 설정하였다.

// 이벤트 리스너 함수
function touchEvent() {
  recordBtn.classList.remove("animate__animated", "animate__bounceIn");
  if (testScreen.style.backgroundColor === YELLOW) {
    setRedPanel();
    clearTimeout(timeOut);
    return;
  }
  if (testScreen.style.backgroundColor === GREEN) {
    setYellowPanel();
    timer();
    getRecord();
    isEnd();
    return;
  }
  if (testScreen.style.backgroundColor === RED) {
    clearResult();
    setYellowPanel();
    timer();
    return;
  }
}

 

테스트 페이지 - 시간 기록

 

시간 기록은 Date생성자를 이용해 패널이 초록색으로 바뀌는 순간을 START_TIME, 버튼이 클릭되는 순간을 END_TIME으로 설정해

두 시간의 차를 ul태그의 list태그로 집어넣었다.

또, 추후의 결과 페이지에 해당 기록들을 사용해야 하기 때문에 recordArr 전역변수 배열에 기록을 저장해 두었다.

list가 5개가 되면(측정을 5번 하면) 테스트 페이지의 버튼과 패널을 display-none 처리 하여 없애고 테스트 결과 요소에 hide(display-none) class를 제거해 결과 화면이 나올 수 있게 하였다.

// 시간 기록 함수
function getRecord() {
  END_TIME = new Date();
  const recordedTime = END_TIME - START_TIME;
  resultArr.push(recordedTime);
  const recordTimeList = document.createElement("li");
  recordTimeList.classList.add("content__record__list");
  recordTimeList.textContent = `Trial ${
    recordUl.childElementCount + 1
  }: ${recordedTime} ms`;
  recordTimeList.classList.add("animate__animated", "animate__bounceInLeft");
  recordUl.append(recordTimeList);
}

//결과 호출 함수
function isEnd() {
  if (recordUl.childElementCount === 5) {
    resultDiv.classList.remove("hide");
    const avgResult =
      resultArr.reduce((acc, cur) => {
        return acc + cur;
      }) / resultArr.length;
    const maxResult = Math.min(...resultArr);
    testScreen.style.display = "none";
    recordBtn.style.display = "none";
    printAnalyzeResult(avgResult);
    printMaxResult(maxResult);
    printAvgSpeed(avgResult);
    share.classList.remove("hide");
  }
}

 

결과 페이지

 

결과 페이지에서는 저장해둔 resultArr를 통해 평균 반응속도와 최고반응속도를 출력했고 타 사이트의 기준들을 참고해 결과분석 문구도 출력되게 하였다.

또 각 시도의 기록들을 테스트를 하면서 확인하기 힘들다고 생각했기 때문에 기록은 display-none처리를 하지 않고 남겨두었다.

일정 시간마다 함수를 반복해서 실행시키는 setInterval을 통해 평균반응속도의 count-up 애니메이션과 결과분석의 타이핑 효과를 구현하였다.

결과 공유는 html2canvas와 카카오톡api를 이용해 카톡 결과공유와 이미지 결과저장 버튼을 넣었다.

//평균 반응속도 출력 함수 (count up 애니메이션)
function printAvgSpeed(avgResult) {
  const result = document.createElement("p");
  result.classList.add("result--avg");

  let now = avgResult;
  const handle = setInterval(() => {
    if (avgResult - now < 150) {
      result.style.color = "red";
    }
    if (avgResult - now >= 150 && avgResult - now < 200) {
      result.style.color = "gold";
    }
    if (avgResult - now >= 200 && avgResult - now < 273) {
      result.style.color = "purple";
    }
    if (avgResult - now >= 273 && avgResult - now < 300) {
      result.style.color = "green";
    }
    if (avgResult - now >= 300 && avgResult - now < 370) {
      result.style.color = "white";
    }
    if (avgResult - now >= 370 && avgResult - now < 400) {
      result.style.color = "pink";
    }
    if (avgResult - now >= 400) {
      result.style.color = "blue";
    }

    result.innerHTML = `당신의 평균 반응속도<br>
    ${Math.round(avgResult - now)} ms`;

    if (now < 1) {
      clearInterval(handle);
    }
    const step = now / 10;
    now -= step;
  }, 50);
  resultDiv.prepend(result);
}

//최고 속도 출력 함수
function printMaxResult(maxResult) {
  const maxResultText = document.createElement("p");
  maxResultText.classList.add("result--max");
  maxResultText.textContent = `최고 속도: ${maxResult} ms`;
  resultDiv.prepend(maxResultText);
}

 

//결과 분석 함수
function printAnalyzeResult(avgResult) {
  let content = " ";
  const resultAnalyze = document.createElement("p");
  resultAnalyze.classList.add("result--analyze");
  resultDiv.prepend(resultAnalyze);

  if (avgResult < 150) {
    content = "손에 꼽히는 반응속도네요! 당신은 반응속도 랭커!";
  }

  if (avgResult >= 150 && avgResult < 200) {
    content = "수준급의 반응속도입니다! 혹시 프로게이머?";
  }

  if (avgResult >= 200 && avgResult < 273) {
    content = "평균보다 좋은 반응속도를 가지셨군요!";
  }

  if (avgResult >= 273 && avgResult < 300) {
    content = "평균정도의 반응속도 입니다!";
  }

  if (avgResult >= 300 && avgResult < 370) {
    content = "평균보다 조금 느리시네요! 조금더 힘내봅시다!";
  }

  if (avgResult >= 370 && avgResult < 400) {
    content = "아쉬운 속도에요 ㅠㅠ 한번 더 시도해보세요!";
  }

  if (avgResult >= 400) {
    content = "세월이 야속하네요 ㅠㅠ 더 연습해볼까요?";
  }

  //typing 효과
  let i = 0;
  function typingAnalyze() {
    if (i < content.length) {
      let text = content.charAt(i);
      resultAnalyze.innerHTML += text;
      i++;
    }
    if (content.length - 1 === i) {
      clearInterval(typingAnalyze);
    }
  }

  setInterval(typingAnalyze, 100);
}

 

협업

 

협업은 github를 통해 진행하였고 팀원 각각 branch에서 코드를 작성하고 push하였다. 그리고 각자의 local main branch에 pull을 받고 다시 각각 branch에 rebase하는 방식으로 진행하였다.

pull request를 comment를 1개이상 달아야 merge할 수 있도록 설정하였다.

깃을 통해 협업을 해본 것은 처음이고 내 코드만 있는것이 아니다보니 푸쉬 한번이 무서웠고 conflict 날까봐 많이 조심스러웠던 것 같다.

그래도 소통을 깃을 사용할 때 팀원끼리 많이 하고 애초에 각자 기능 파일을 나눠놓은 상태라서 conflict는 많이 발생하지 않았고 걱정 했던 것보다는 덜 힘들었던 것 같다.

git을 통한 팀 협업을 몇번 더 해서 git 협업에 자신있게 다가가고 싶다.

 

github: https://github.com/JKyEun/test-world

GitHub - JKyEun/test-world: 4가지 테스트를 경험해볼 수 있는 모바일 기준 웹사이트 (장경은, 김계환,

소감

처음으로 팀프로젝트를 경험 해 보았는데 아무래도 혼자하는 것이 아니다보니 조심스러웠고 걱정됬었다.

하지만 정말 운이 좋게 팀원들이 정말 좋은 사람들 이었고, 다들 자신의 맡은 바를 열심히 해서 무사히 프로젝트를 마칠 수 있었던 것 같다.

우리끼리 머리를 모아 정한 주제와 디자인 컨셉도 마음에 들었고 그래서 기능을 구현할 때 더 재미있게 할 수 있었던 것 같다.

일주일이라는 시간이 시작하기 전에는 길다고 느껴졌지만 막상 들어가고 나니 금방 지나간 것 같다.

기능을 구현하는 것도 금방 탁! 하고 구현해낼줄 알았는데 생각보다 나는 너무 개발 초보였고 기능을 하나 추가 할 때마다 앞서 했던 작업들이 고장났다. 덕분에 콘솔에서 오류를 쳐다보며 몇번이고 함수를 바꾸고 심지어 Js파일도 갈아 엎었다 ㅋㅋ..

다행히 어느정도 능숙해져 작동하는 기능을 구현했고 나름 뿌듯하다고 느꼈다.

교육과정을 진행하면서 배웠던 것들을 직접 프로젝트에 넣어 볼 수 있어서 좋은 경험이었고 앞으로 이런 기회가 많이 생겼으면 좋겠다.

그리고 다시한번 함께 고생한 우리 팀원들에게 고마움을 느꼈다..!