대용량 이미지 렌더링 성능 개선 학습 기록 시작

최근 회사에서 새로운 프로젝트 MVP 개발을 진행하고 있다.

MVP 개발을 하면서 대용량 & 고화질 이미지들을 많이 다루게 되면서 꽤나 큰 고민거리가 생겼다..

바로 렌더링 속도 저하 문제이다.

 

이미지 한 두장은 괜찮지만, 리스트나 갤러리 형태로 여러 장이 한번에 로드되면 페이지가 버벅이고 사용자 경험이

확 떨어졌다. 이걸 MVP라는 명목상 냅두고 가려니.. 너무 신경쓰이고 이걸 해결하는 과정이 나에게

큰 도움이 될것 같다는 생각이 들어서 개선 과정을 블로그에 작성해보려고 한다.

 

회사에서는 프론트엔드만 담당하고 있어 서버에서 주는 이미지들만 렌더링하는 작업을 하고 있지만 

추가적으로 전송부터 렌더링까지 전체 파이프라인을 체계적으로 다뤄보고 싶다는 생각이 들었다.

(1) 이미지 렌더링 최적화

(2) 이미지 전송 최적화 

(3) 이미지 파이프 라인 

(4) 인프라 경험 

이렇게 위와 같은 경험들을 하면서 또한번 성장해보고싶다!

사실 인프라 라는 단어만 들어도 피하고 싶고 항상 약점이었는데, 이번 기회에 두려움을 깨보는게 내 목표 중 하나이다!

 

그래서 이 블로그에 단순히 배운 기술만 정리하는게 아니라

(1) 문제를 어떻게 만났는지 

(2) 어떻게 문제를 분석했는지

(3) 어떤 시도를 했는지

(4) 실제로 성능이 어떻게 개선됐는지 

이 과정들도 같이 정리해보려고 한다.