미리보기

데이터를 기반으로 기록한 성과

• 한국조폐공사와 협업하여 지역사랑상품권을 이용하는 신규 결제 수단 착페이를 추가 → 잠재적 지역상품권을 소지한 사용자의 매출을 올려 이전 달 대비 총매출을 약 10% 증가

• iOS 유니버셜 링크, Android 앱 링크를 개발하여 공통 딥링크 기능을 추가 → 오프라인 행사, 온라인 광고 등에서 딥링크를 활용한 QR코드로 사용하여 신규 사용자를 이전 달 대비 5,000명 이상 유입

• 크로스 브라우징 관리, 페이지 로딩 속도 개선 등 서비스 운영 안정화 작업을 진행 → 레거시 버그 관련 CS 연락을 60%에서 10%까지 축소

• 과도한 이미지 및 애니메이션으로 인한 페이지 초기 로딩 속도 저하 이슈를 해결 → 기존 CSR 렌더링을 SSG 렌더링으로 변경하여 초기 로딩 속도를 1.5초에서 0.2초로 단축

서비스 개선을 통한 성과

• 기존에 없던 검색 엔진 최적화 작업을 웹 서비스에 추가하여 서비스 페이지를 검색창 1페이지 상단에 노출되도록 개선 → 신규 사용자 유입 경로를 확장하고 웹 검색을 통한 접근성을 크게 향상

• 불필요한 코드를 삭제하고 오래된 로직을 최적화하는 등의 리팩토링 과정을 거쳐 코드 유지 보수성을 개선 → 간단한 유지보수 업무의 처리속도를 2배가량 단축하여 팀원들의 개발 효율성을 높임

서비스 품질 향상을 통한 성과

• MVVM 패턴을 기반으로 프로젝트 상태 관리를 설계 → 기능별로 모듈화하여 유지 보수성을 높이고, 테스트 단위를 분리해 프로젝트 관리 효율성을 높임

• 테이블 UI 컴포넌트를 그리드 스타일로 수정하여 다양한 용도로 활용할 수 있도록 개선 → 테이블 외의 리스트나 갤러리 UI 등을 개발할 때도 사용하여 컴포넌트 활용도를 크게 높임

검색 엔진 최적화(SEO)

• 도메인에 HTTPS를 추가하는 과정에서 Vue의 Hash 모드 라우팅을 강제로 써야하는 상황이 발생 → index 페이지를 제외한 다른 페이지를 검색엔진이 색인할 수 없어 전체 사이트의 크롤링률이 낮아지는 단점이 생김

• 문제를 해결하기 위해 페이지가 색인될 수 있도록 sitemap.xml을 추가하고, 검색엔진의 크롤링률을 높이기 위해서 robots.txt 파일을 추가하는 등의 방법으로 최적화 작업을 진행

• 2주간의 노력 끝에 네이버, 구글 등의 사이트에서 검색 첫 페이지 상단에 서비스 페이지가 노출되도록 개선

디버깅 환경 개선

• 기존 에뮬레이터로만 디버깅할 수 있었던 환경을 웹으로도 디버깅 될 수 있도록 컴포넌트 호환성을 개선 → 작업한 내용을 가이드 문서로 작성하여 팀원들의 디버깅 효율을 높임

결제 수단 확장성 개선

• 결제 수단을 추가하면서 기존 결제 프로세스가 확장성이 떨어진다는 문제를 발견 → 각 결제 API의 연동 프로세스를 하나로 합쳐주는 중간 함수를 개발 → 결제 수단 추가 업무의 작업량을 크게 단축하여 신규 개발 효율성을 높임

API 호출 프로세스 간편화

• 불필요할 정도로 많은 레이어를 가진 API 호출 프로세스 때문에 추가 개발 효율이 떨어지는 문제를 발견 → 모델과 비즈니스 로직을 합친 하나의 레이어로 프로세스를 단축하여 API 확장성을 넓힘 → API 관련 개발 업무의 작업량을 단축하여 팀원들의 개발 효율성을 높임

페이지 로딩속도 개선

• GET API에서 과도하게 많은 응답 데이터로 인한 페이지 로딩속도 저하 문제가 발생 → 스크롤 위치에 따라 페이지네이션이 발생할 수 있도록 API fetch 함수를 수정 → 페이지 로딩 속도를 2초에서 0.5초로 단축하여 문제를 해결

크로스 브라우징 관리

• 일부 디바이스마다 UI가 잘못 표시되는 문제를 발견 → 크로스 웹 브라우저 테스트 툴을 사용하여 브라우저 별로 UI에 이상이 없는지 문제를 파악하면서 컴포넌트 호환성을 개선

서비스 접근성 개선

• 딥링크 기능을 개발하여 SNS 게시글에서 상품 바로가기 링크로 활용 → 딥링크를 통해 상품을 구매한 소비자 비율을 총매출의 10%까지 올림