프로젝트 설명
카카오 이모티콘 샵을 마크업과 라이트 하우스를 기반으로 분석한 뒤, 개선점이 있다면 개선 방법까지 반영하여 html, css로 구현해보았다.
프로젝트 진행 이유
현재 이미 서비스 중인 웹 사이트를 분석하여 왜 지금과 같이 마크업을 했는지, 같은 기능을 다르게 구현할 수는 없었는지를 고민할 수 있었다.
카카오 이모티콘 샵을 선택한 이유
✔ 직접 사용해 보았을 때, 이미지가 주 컨텐츠인만큼 이미지가 늦게 로딩되는 경우 그 공백이 눈에 들어왔다.
✔ Light House 분석 결과 Performance도 다른 웹 사이트에 비해 점수가 낮아서 이를 개선해보고 싶었다.
-
카카오 이모티콘 샵 Light House 결과⬇️
-
개발자 도구 > 네트워크 패널로 확인한 로딩 속도⬇️
목표
✔ 카카오 이모티콘 샵의 메인 페이지를 마크업, 접근성, 성능 관점에서 분석하고 개선하기
✔ 개선 후 Light House 분석 결과를 비교해 유의미한 변화 확인
역할 분배
✅ HTML 마크업
✅ 헤더 및 네비게이션 구현
✅ 인기 이모티콘 콘텐츠, 스타일 콘텐츠 구현
✅ 신규 이모티콘 콘텐츠, 푸터 영역 구현
HTML 마크업은 시맨틱한 마크업을 중점으로 다같이 의논하며 진행했고
내가 온전히 맡은 부분은 인기 이모티콘 콘텐츠와 스타일 콘텐츠 구현이었다.
나의 주안점
- 시맨틱 마크업
- 이미지 성능 최적화
- WCAG 기반 접근성 개선
- 반응형 구현
이미지 성능 최적화
기존 사이트의 문제점
✔ 현재 카카오 이모티콘 샵에서 사용하는 이미지 포맷은 모두 png 혹은 gif이다.
이들은 무손실 포맷으로 다른 포맷에 비해 파일 크기가 크다.
위의 카카오 이모티콘 샵 Light House 결과에서 이미 확인할 수 있듯이 크기가 큰 이미지 파일을 다운로드 시 전체 페이지 로딩 시간을 지연시킨다.
이미지 파일 포맷 변경
✔ 대부분의 웹 사용자들이 크게 구분하지 못할 정도의 화질 저하로 이미지 로딩 속도를 올릴 수 있다면, 그 편이 사용자 경험에 더 유리하다고 판단했다.
1. Webp로 변환
png 대신 WebP로 변환하여 파일 크기를 25~35%로 줄였다.
- png와 webP 파일 크기 비교⬇️
웹 사이트에서 보다 빠르게 이미지를 읽을 수 있도록 개발된 압축포맷이다.
손실 압축(JPEG)와 비손실 압축(PNG, GIF)를 모두 지원하며, 모두 약 30% 정도 용량을 줄여 빠른 웹 사이트 로딩이 가능하다.
하지만 WebP를 지원하지 않는 브라우저들도 있어 그런 경우엔 태그를 이용해 png 파일로 보이도록 설정해주었다.
<picture class="popularEmoticon__img">
<source
type="image/webp"
srcset="./images/popularEmoticon/optimization/tiny-big-bean_thumbnail.webp"
/>
<source
type="image/png"
srcset="./images/popularEmoticon/tiny-big-bean_thumbnail.png"
/>
<img
class="popularEmoticon__img"
alt="뽀시래기 짱큰콩 썸네일"
src="./images/popularEmoticon/tiny-big-bean_thumbnail.png"
/>
</picture>Mp4로 변환
gif의 경우 Mp4로 바꿔주어 용량을 줄였다.
WebP로도 변환하여 Webp가 지원되지 않으면 Mp4로 나오도록 했으면 더 좋았을 것 같다.
<video
autoplay loop muted playsinline
class="popularEmoticon__img popularEmoticon__img__hover">
<source
type="video/mp4"
src="./images/popularEmoticon/optimization/tiny-big-bean_hover.mp4"/>
뽀시래기 짱큰콩 썸네일
</video>