카카오 이모티콘 샵 분석 및 개선 프로젝트

🌙🌱·2021년 9월 6일
0
post-thumbnail

프로젝트 설명

카카오 이모티콘 샵을 마크업과 라이트 하우스를 기반으로 분석한 뒤, 개선점이 있다면 개선 방법까지 반영하여 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>
profile
프론트 엔드 개발자 지향

0개의 댓글