해외 e-wallet 서비스 개발 중 드롭다운 UI의 성능 최적화를 성공적으로 수행했습니다. 서비스 특성상 280여 개의 국가 선택 기능이 필요했는데, 각 국가 플래그 이미지마다 개별 네트워크 요청이 발생하여 불필요한 네트워크 비용이 발생하는 문제가 있었습니다.
이 문제를 해결하기 위해 이미지 스프라이트 기법을 도입했습니다. 여러 개의 작은 이미지 파일을 하나의 큰 파일로 통합하는 방식을 선택한 것은, 다수의 네트워크 요청보다 하나의 큰 파일을 다운로드하는 것이 더 효율적이라고 판단했기 때문입니다. 특히 국가 플래그 이미지는 변경 빈도가 낮아 초기 로딩 시간이 다소 증가하더라도 전체적인 성능 향상을 기대할 수 있었습니다.
또한 스프라이트 이미지 관리의 번거로움을 해결하기 위해 자동화 스크립트를 구현했습니다. 이 스크립트는 개별 SVG 파일들을 하나의 스프라이트로 자동 통합하며, 이미지 변경 시 수동으로 실행하여 새로운 스프라이트를 생성할 수 있도록 했습니다. 이를 통해 스프라이트 생성과 관리에 드는 개발 리소스를 최소화할 수 있었습니다.
결과적으로 국가 선택 UI의 네트워크 요청을 280회에서 1회로 대폭 줄일 수 있었고, 자동화된 관리 시스템으로 인해 유지보수 비용도 크게 절감할 수 있었습니다. 이는 사용자 경험 개선과 함께 시스템 운영 효율성 향상이라는 두 가지 목표를 모두 달성한 성공적인 최적화 사례가 되었습니다.