<사이트 성능 개선>
서비스 사이트의 검색 결과 상위 노출을 목적으로 성능 개선을 진행했습니다.
성능 개선 포인트
- 개발자 도구 > 네트워크 탭에서 병목 발생 구간을 찾아 문제점을 파악하였습니다.
- 네트워크에서 호출하는 파일의 개수와 용량을 줄였습니다.
First Contentful Paint 시간 단축
- 모바일: 11초대에서 4초대로 개선했습니다.
- 데스크톱: 2초대에서 1초대로 개선했습니다.
- 성능 개선 결과는 Lighthouse와 Think with Google를 이용해 확인하였습니다.
최적화 과정에서 진행한 작업
- Webpack bundle analyzer를 사용하여 최적화가 필요한 파일을 탐색했습니다.
- UI 라이브러리와 유틸리티 라이브러리 용량을 최적화 했습니다.
- 웹 폰트, 이미지, SVG 등 리소스 용량을 최적화 했습니다.
- CSS, JS 코드 리팩토링 및 최적화를 진행했습니다.
<SEO 최적화>
마케팅팀과 협업하여 핵심 키워드 검색 시 검색 결과 첫 페이지에 서비스 사이트와 블로그가 상위에 노출되도록 하였습니다.
- Adobe의 SEO 책임자로부터 자문을 받으며 진행했습니다.
- 메타 데이터 추가, 검색엔진에 사이트맵 제공, 웹 접근성 준수, 사이트 성능 개선 등을 진행했습니다.
<Nuxt.js를 사용한 SSG 방식 사이트 개발>
기존에 Vue.js로 운영되던 서비스 사이트를 Nuxt.js로 전환하였습니다. 대체로 정적 페이지 운영이 많았고, 변경이 되더라도 변경사항을 자주 반영해야 하는 페이지가 없었기 때문에 SSG 방식을 선택했습니다.
사용 기술
- Nuxt.js, Vuex
<정기적인 사이트 업데이트>
디자인 또는 콘텐츠 변경사항을 매주 1회 업데이트하였습니다.
- UI/UX 변경사항에 대해 적극적으로 의견을 제시하였습니다.
- 변경사항 중에 클릭이 이루어지는 곳 또는 동작을 파악해야 하는 곳 등에 Google Analytics UTM 태그를 추가했습니다.
<장애 대응>
사이트에서 장애가 발생했을 때 핫픽스를 진행하였습니다.
- 대응을 마친 후 관련 내용을 정리하여 개발팀 구성원과 공유했습니다. 어떤 문제가 있었고, 왜 문제가 발생했으며, 어떤 방식으로 수정했는지 전달했습니다.
- 같은 문제가 발생하지 않도록 하기 위해 무엇이 필요하고 어떻게 준비해야 하는지를 논의했습니다.
<브랜드 사이트 관리>
브랜드 사이트를 컨버팅하고, 컨텐츠를 업데이트했습니다.
- Jekyll로 운영되던 사이트를 관리하다가, 이후 Nuxt로 변경했습니다.
- 마케팅 팀에서 운영하는 블로그를 주 1회 업데이트하였습니다.
<디자인 시스템 개발>
서비스 사이트에서 사용할 디자인 시스템 개발에 참여했습니다.
- 디자이너와 함께 컴포넌트와 그리드 시스템의 세부 사항을 정의했습니다.
- Storybook으로 컴포넌트를 관리했습니다.
- UI 라이브러리에서 그리드 시스템과 연관된 css 속성값을 수정하였습니다.
<백오피스 제작>
서비스 운영에 참여하는 외부 인력의 신상 정보, 지급 비용 등을 관리하는 사이트를 제작했습니다.
और देखें
