HOYA & THREE PARK
김정호 | 박지영 | 박바름 | 박태준

갓챠 탄생 배경

Beginning Of A Story

찐 한국인은 화가난다...

로딩중...

로딩중...

WATCHA's

Lighthouse scoring

WATCHA,,, WHAT?!

내 키보드는 어디에....?

Accessibility

1. Semantic 하지 않은 Markup

2. Accessibility Issues

3. Cross Browsing Issues

3. Cross Browsing Issues

Performance Issues

Lighthouse Scoring

WHY??

WHY??

3 Main Characteristics

1. 긴 서버 통신 시간

2. Third-party코드의 로드

3. 불필요한 JS 와 JS의 긴 수행 시간

Performance Records

1-1. Server Response가 긴 이유

많은 폰트 로드

1-1. Server Response가 긴 이유

많은 폰트 로드

1-2. Server Response가 긴 이유

최적화되지 않은 이미지

1-3. Server Response가 긴 이유

불필요한 이미지 로드 및 캐싱

2. third-party 로드

Google Analytics, Google Tag Manager

3. 자주 실행되는 JS

성능저하에 영향을 끼치는 스크립트 자주 사용

3. 자주 실행되는 JS

Class의 상태가..?

3. 자주 실행되는 JS

CSS in JS

3. 자주 실행되는 JS

CSS in JS

WELCOME TO GOTCHA

http://barumweb.co.kr

Story Board & Wireframe

1. Story Board

2. Wireframe

Main Page

View Page

Evaluate Page

3. Lean Canvas

Improvements

Compare to WATCHA...

1. Header & Footer 마크업

2. 무한 스크롤 개선

3. 적응형에서 반응형으로...

4. WAI-ARIA 사용

<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>

Lighthouse Scoring

칸반 차트 &

KPT

1. Kanban Chart

2. KPT

좋았던 점

&

아쉬웠던 점

1-1. 좋았던 점

깃플로우 버전관리

1-2. 좋았던 점

애자일한 노션 활용

1-3. 좋았던 점

리팩토링과 코드 리뷰

1-4. 좋았던 점

Accessibility

Performance

2-1. 아쉬웠던 점

갓챠 랜덤 버튼

2-2. 아쉬웠던 점

설계 부족

2-3. 아쉬웠던 점

크로스 브라우징 이슈

왓챠를 뛰어넘는 갓챠가 되자...!

Thank You

Made with Slides.com