[팀프로젝트] HTML/CSS | | 왓챠 클론 코딩

왓챠 클론 코딩 GOTCHA with HTML/CSS/JS

왓챠의 클론 코딩을 하며 접근성과 성능 부분을 개선한 GOTCHA 사이트를 만들고자하였고, 자바스크립트를 배운후 계속 리펙토링 할 예정입니다. (완성사이트)

기간

• 2021.08.27 : 주제 선정, 로고 제작, CSS 설계 기법 정리, 칸반차트 생성
• 2021.08.28~08.30 : 왓챠와 넷플릭스(경쟁사) 페이지 (성능 및 접근석 분석), 공통 UI 마크업 및 스타일링 작업, 깃 컨벤션 및 코딩 컨벤션 작성
• 2021.08.31~09.01 : 개별 UI 마크업 및 스타일링, JS 작업
• 2021.09.02 : 코드 리뷰 및 리펙토링, 발표 준비하기 (PPT 및 대본 준비), KPT 작성
• 2021.09.03 : 발표

사용 스택

• HTML
• SCSS
• Git, Github
• Javascript

주제 선정 배경

• 미니 프로젝트를 시작했을때, 새로 페이지를 디자인해서 만들지 아니면 클론코딩을 할 지 고민을 많이했다. 사실 우리 팀만의 독자적인 사이트를 만들어보고싶었지만 너무나도 짧은 시간에 디자인에 너무 많은 시간을 빼앗길것 같다는 생각에 클론 코딩을 하기로 결정했다. 대신, 수업시간에 배웠던 것을 최대한 많이 활용하여 접근성과 성능을 개선시켜보기로 목표를 잡았다.
• 왓챠 팝콘먹다 왓챠 1개월 무료 감상권 쿠폰(?) 뽑고 팀원들이랑 너무 들떴다. 그래서 왓챠를 보려고하는데 로딩 시간이 너무 길어서 화가난 우리는 왓챠 클론 코딩을 하며 이런 부분을 우리가 개선시키고자했다.
• 갓챠의 최종 목표는 접근성과 성능을 모두 향상시켜 국내 유일의 OTT 서비스를 제공하는 것이다. (자바스크립트를 배우면서 계속 리펙토링을 할 예정이다)

---

왓챠 분석 : Lighthouse

• 성능 점수는 예상과도 같이 낮았다. (로딩속도가 10~15초 정도라서 web core vitals의 LCP 지표에 한참 미치지 못했다)

• 접근성 점수는 높음에도 불구하고 마크업은 전혀 시멘틱하지못했다 (div와 span이 대다수인 마크업)
• 클래스 이름 또한 불분명하여 해당 마크업 구조를 전혀 파악할 수 없었다.
  
• 탭 키 또한 논리적으로 이동하지않았고, 중간에 outline이 사라져 어디에 탭이 위치한지 파악하기도 힘들었고 어떤 부분은 탭키로 다가갈수도 없었다.

why??

• 수많은 폰트 호출한다.
• webp나 svg를 사용한것이 아니라 jpg를 사용한다. (이미지 최적화가 필요)
• 적응형 디자인임에도 불구하고 사용하지 않는 이미지까지 다 받아온다. (예를 들어, 한국 서비스에서 일본 이미지까지 가져온다)
• third party api 호출한다 (google analytics, google tag manager)
• emotion.js 사용으로 class 이름을 알아보기 어렵다.

GOTCHA 와이어 프레임 & 스토리 보드

• 위에서 설정한 목표를 토대로 레이아웃과 페이지 흐름 설정
• 스토리 보드로 페이지의 흐름과 인터렉션, 방향성 설정
• 와이어 프레임 : 실제 구현을 어떻게 할지 레이아웃 설정

---

View Page

• 내가 담당했던 작품 상세 소개페이지에 대해 한 번 기술해보고자한다. 해당 페이지는 작품에 관해 다양한 정보를 제공하는 페이지로 사용자가 정보를 한눈에 알아볼수있도록 탭 메뉴로 구성했다.

구현하기 어려웠던 기술 & 해결방안

• 모바일 환경과 데스크탑의 UI가 급격히바뀌어 시멘틱한 마크업을 하는데 어려웠다. 어디를 기준으로 마크업을할까 고민을 했는데, 결국 별점 부분은 데스크탑 기준, 밑에 설명 부분은 모바일 기준으로 마크업을 작성하였다.
• 모바일 환경에서는 탭이 사라지기때문에 탭 기능을 가진 태그를 사용하기보다는 div에 wai-aria의 role을 주며 접근성을 지키고자 하였다. 또한, 탭 리스트와 탭 정보부분을 분할아여 id로 연결해주었다.

<!-- 탭 리스트 -->
<div class="viewTab">
  <ul class="viewTab__list" role="tablist">
    <li class="viewTab__list--item btn-left">
      <button class="viewTab-btnMove" role="tab" tabindex="0" aria-selected="true" aria-controls="basicInfo"
        id="tab-basic" data-tab="basicInfo">기본정보</button>
    </li>
    <li class="viewTab__list--item btn-center">
      <button class="viewTab-btnMove" role="tab" tabindex="-1" aria-selected="false" aria-controls="contentDetail"
        id="tab-detail" data-tab="contentDetail">상세정보</button>
    </li>
    <li class="viewTab__list--item btn-right">
      <button class="viewTab-btnMove" role="tab" tabindex="-1" aria-selected="false"
        aria-controls="similarContent" id="tab-similar" data-tab="similarContent">비슷한 작품</button>
    </li>
  </ul>
<div class="viewTab__tabPanel current">

• 숫자나 좋아요 버튼을 누르면 숫자가 올라갈 수 있도록 자바 스크립트를 사용하여 클릭할동안 내부 숫자가 올라가도록 구현하였습니다.

  //좋아요 버튼 업
likeBtn.forEach((el) => {
  el.addEventListener("click", function () {
    ++el.innerHTML;
  });
});

• 탭 부분또한 자바스크립트를 활용하여 해당 버튼을 클릭할 때 한 쪽 페이지만 보여줄 수 있도록 하였다. 하지만 이 부분은 리펙토링해야할 부분으로, DOM에 너무 많이 접근하여(많은 변수 선언과 중복이 많은 코드) 성능 이슈가 생길수 있기때문이다.
• 상세정보와 비슷한 작품 탭에서만 뒷배경을 흐리게 설정하기 위해 자바스크립트를 활용하였다. 처음에는 scss의 backdrop-filter을 사용하려고 했으나 해당 속성은 IE와 파이어폭스 모두에서 사용이 불가능했기때문에 background에 opacity를 주는 방식으로 바꾸었다.

• SCSS에 미리 ellipsisMulti라는 여러줄일 경우 말줄임을 할 수 있는 기능을 구현해두고 해당 댓글과 영화 설명 부분에 적용했다.

// 텍스트 ellipsis multiline ----------------------------------------------------------- /
@mixin ellipsisMulti($line, $lineheight: 1.5) {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $line;
    line-height: $lineheight * 1em;
    max-height: $lineheight * $line * 1em;
}

리펙토링 해야할 부분

구현하지 못한 부분은 자바스크립트를 배우면서 원하는 기능들을 추가해나가고자 한다.

수정

• 재생 버튼을 누르면 해당 영화 링크로 넘어갈 수 있도록 마크업에 a 태그를 추가해야겠다.
• 재생 버튼에 가상 요소 선택자를 활용하여 재생 버튼 이미지를 넣을 예정이다.

기능 추가

• 평가하기 기능 : 구형 브라우저에서도 호환이 가능하도록 별을 채울수 있도록 기능을 구현하고 싶다. 이부분은 radio checkbox를 활용하여 hover을 했을 때 클릭될 수 있도록 구현을 해보는 방향으로 구현해 볼 예정이다. 최대한 js를 사용하지않고 css를 사용하여 성능을 개선해볼 예정이다.
• 갓챠 랜덤 플레이 : 자바스크립트를 활용하여 해당 버튼을 누르면 랜덤으로 고객에게 영상을 선택해서 보여주는 것.

잘한점 & 아쉬운점

잘한점

• 깃플로우를 활용하여 깃 컨플릭트를 최소화했다.
  
• 노션과 칸반차트를 활용하여 현재 해야할 tasks 및 프로젝트 설계를 애자일하게 할 수 있었다.
• 팀웍이 너무 좋았고, 서로 코드리뷰를 해주며 더 많이 발전할 수 있었다.
• IE를 호환시키지 못한 것을 제외한다면 성능과 접근성을 왓챠보다 개선시켰다.
  
• lighthouse의 점수 또한 모두 기존의 왓챠보다 높다.

아쉬운점

• 우리 팀의 목표는 IE10까지 호환이 가능하도록 한것인데 공통 UI, 보고싶어요 페이지가 IE에서는 아예 보이지 않았다. 리펙토링을 하며 최대한 구형 브라우저까지 해결할 수 있도록 노력해보겠다.
• 컴포넌트화를 시도했으나 부분적인 성공밖에 하지못했다. 이 부분또한 더 공부를해서 시도해보고싶다.

---

칸반차트 및 KPT📊

칸반차트

KPT

---

짧은 회고☀️

왓챠와 넷플릭스의 마크업과 성능을 분석해본결과 정말 달랐다. 넷플릭스는 보면서 감탄을 금치 못했다 (나도 이런 코드 짜고싶다는 욕구가 뿜뿜) 접근성 또한 너무 좋아서 우리나라에도 이렇게 접근성이 좋은 사이트가 많았다면 얼마나 좋을까라는 생각을 했다.

시간이 너무 부족해서 랜덤 갓챠 플레이 기능도 구현하지 못한것도, 조금 더 긴 시간동안 코드리뷰를 하지 못했다는 것이 너무 아쉬웠다.만약 프로젝트 기간이 조금 더 길었더라면 더 나은 사이트를 제작할 수 있지 않았을까라는 생각도하지만 한편으로는 이렇게 짧은 시간안에 만드는 것 또한 우리의 능력이기때문에 이러한 능력을 길러야겠다는 생각도했다. (그리고 우리 팀은 다들 욕심이 정말 많아서 넣고 싶은 기능들이 정말 많았다. 거의 스크루지ㅋㅋㅋ)

비록 부족한점이 많았지만, 계속 개선해나갈 수 있기때문에 잊지않고 자바스크립트를 배우며 적용해보려고 한다. 전체적으로 너무 즐거운 시간이였다. 팀원끼리 마음도 정말 잘맞고 다들 으쌰으쌰해서 프로젝트를 해나간 덕분에 정말 많이 성장하고 배운것같다.

열쩡!!!