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
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
Gotcha
By hoya
