이미지 최적화를 미루면 10배 비용과 20% 사용자를 잃는 이유

다음과 같은 문제를 경험해보셨나요?

• 이미지가 로딩이 느리거나 흐릿하게 보이는 경험 해보셨나요?
• 이미지를 전달받고 서비스에 적용하는 과정에서 비효율적인 점이 있었나요?
• 이미지와 관련된 클라우드 비용이 늘어나 부담스러웠나요?

이 문제들은 여러분만의 문제가 아닙니다. 전세계의 많은 팀이 겪고 있는 문제입니다. 저도 여러 회사에서 소프트웨어 엔지니어로 일하면서 이미지와 관련된 공통된 문제들을 마주했습니다. 이미지 최적화는 사용자 경험 개선과 검색 엔진에서 웹사이트의 가시성과 순위를 높이기 위해 매우 중요합니다. 이미지 최적화를 해야 하는 이유들과 이를 해결하는 방법을 함께 소개합니다.

실제 사용자가 겪는 느린 이미지 로딩

사용자들이 일상적으로 경험하는 이미지 로딩 지연 현상을 직접 확인해보세요. 이런 문제가 비즈니스에 미치는 영향은 생각보다 큽니다.

느린 이미지 로딩 시뮬레이션

실제 사용자가 경험하는 이미지 로딩 지연 현상

이런 문제를 겪고 계신가요? 아래에서 해결책을 확인해보세요.

느린 이미지 로딩은 사용자 이탈을 불러옵니다#

여러분의 서비스는 어떤가요?

브라우저 개발자 도구를 통해 여러분의 사이트 캐시를 모두 제거하고, 글로벌 사용자를 대상으로 하는 서비스라면 네트워크를 'Slow 4G'로 설정하고 열어보세요. 이때 웹 페이지의 이미지 최적화를 통해 로딩 속도와 SEO, 그리고 전체 웹 사이트 성능을 크게 개선할 수 있습니다.

페이지 로딩이 1초 지연될 때마다 구매 전환율이 최대 20% 감소할 수 있습니다. (Google/SOASTA 모바일 페이지 속도 연구↗)

또한 이미지는 네트워크 비용이 가장 높은 리소스 중 하나입니다. 그렇기에 이미지 로딩 지연은 웹 페이지 성능을 크게 저하시킵니다. 이미지의 파일 크기를 줄이는 것이 중요하며, 용량을 줄이면 웹 사이트 성능과 로딩 속도가 향상됩니다.

페이지 성능은 SEO의 평가 요소 중 하나이기에 검색순위와 매출에도 직접적인 영향을 미칩니다. 웹 크롤러는 최적화된 이미지와 올바른 HTML 구조를 통해 더 효율적으로 페이지를 크롤링할 수 있습니다. 추가로 SEO를 위해서는 이미지에 alt 태그, title 태그 등 적절한 태그를 추가하는 것도 중요합니다. 대체 텍스트는 시각장애인 등 접근성 향상과 검색 엔진 최적화에 필수적이며, 대체 텍스트 작성 시 이미지의 내용을 명확하고 간결하게 설명하는 방법이 권장됩니다.

성능 저하가 비즈니스에 미치는 실제 영향:

• Amazon: 0.1초 로딩 지연만으로도 매출 1% 감소 (Amazon 내부 연구)
• Google: 페이지 로딩 시간 0.5초 증가 시 검색량 20% 감소 (Google 웹 성능 연구)
• BBC: 1초 추가 로딩마다 사용자 10% 이탈 (BBC 사용자 행동 분석)

WebP나 AVIF와 같은 모던 포맷 변환은 이미지 압축 기술을 사용하여 파일 크기를 줄이고, 퀄리티는 유지한 채 용량을 획기적으로 줄여 이미지 로딩을 10배 가까이 빠르게 만들어 웹 사이트의 페이지 성능을 크게 개선할 수 있습니다.

무조건 용량을 줄이는 포맷을 선택하기보다 여러 압축 방식을 비교해 결정하는 것이 좋습니다. 예를 들어 손실 압축 방식은 파일 크기를 줄이지만 약간의 퀄리티 저하가 발생할 수 있습니다. jpg, png, WebP, AVIF 등 다양한 포맷을 적절히 선택하여 사용하면 웹 이미지 최적화에 효과적입니다.

특히 반응형 이미지 적용을 통해 다양한 기기와 해상도에 맞춰 이미지를 최적화하면, 모바일 등 고해상도 환경에서도 사진과 이미지가 선명하게 보이고 빠르게 로딩됩니다. 크기도 사용자에게 노출하는 크기만큼만 변환하여 보여준다면 더 빠르게 로딩할 수 있습니다.

이미지 최적화 방법으로는 CSS 스프라이트, lazy loading, WebP 변환, 이미지 CDN 사용 등 다양한 전략이 있습니다. 이러한 방법을 사용하면 웹 페이지의 성능과 사용자 경험을 동시에 개선할 수 있습니다.

이미지 압축과 다양한 이미지 파일 관리, 그리고 최적화 도구의 사용은 웹 사이트의 퀄리티와 품질을 유지하면서 파일 크기를 효과적으로 줄일 수 있습니다. 또한, 고유한 사진 및 이미지를 사용하면 SEO 경쟁력을 높일 수 있습니다. 이미지를 확대해도 품질 저하 없이 용량을 줄이는 것은 충분히 가능합니다.

스냅킷 이미지 포맷 변환 기능을 통해 쿼리 파라미터를 수정하여 쉽게 적용할 수 있습니다.

이미지 최적화로 클라우드 비용 절약은 필수입니다#

이미지 최적화를 하지 않으면 이미지 기반 서비스들은 클라우드 인프라 비용이 최적화 대비 많게는 10배가 증가합니다(스냅킷 고객 분석 데이터). 이는 팀에서 제작하는 디자인 이미지뿐만 아니라 사용자가 직접 업로드하는 이미지에서도 마찬가지입니다. 업로드 후에는 이미지 원본을 수정하여 크기나 품질을 조절하는 것은 어렵습니다. 따라서 처음부터 최적화된 이미지를 준비하거나 이미지 변환을 고려하는 것이 중요합니다.

많은 스타트업이 사용자가 늘어나는 것을 기뻐하지만, 그와 비례해서 늘어나는 클라우드 비용에 당황합니다. 특히 사용자가 직접 업로드하는 고화질 사진들은 예상보다 훨씬 큰 비용을 발생시킵니다. 스타트업에서는 이 비용이 사업 지속성을 좌우할 수 있습니다. 이미지 최적화는 팀 제작 이미지와 사용자 업로드 이미지 모두에 대해 품질은 유지하면서도 크기는 최대 90% 가까이 줄여 10배 가까운 인프라 비용을 절약합니다.

단순 최적화만으로 끝이 아닙니다. 여러 플랫폼을 운영한다면 또 다른 문제에 직면합니다.

스냅킷은 이미지 최적화 지원을 통해 고객 문제 해결에 집중할 수 있도록 도와드립니다. 비용도 사용하는 만큼 지불하기 때문에 서비스 규모에 따라 비용을 절약할 수 있습니다. 가격은 여기에서 확인할 수 있습니다.

여러 플랫폼을 운영한다면 이미지 최적화는 더 복잡해집니다#

제가 겪은 사례를 소개합니다.

1. 모바일 기기에서 상품 이미지가 흐릿하다는 사용자 피드백을 전달받았습니다.
2. 우리 팀은 iOS, Android, Web 세 가지 플랫폼을 운영하고 있었습니다.
3. 원인은 각 디바이스마다 해상도가 다르기 때문에 모바일 기기에서는 사용자에게 보이는 것보다 최소 2배 크기의 이미지를 제공해야 했습니다.
4. 하지만 이미지 최적화를 하지 않았기 때문에 이미지는 선명해졌지만 로딩이 느려졌습니다.

선명하고 빠른 이미지 로딩을 위해 아래 요구사항을 달성해야 했습니다.

• WebP, AVIF 포맷으로 품질은 유지한 채 용량을 줄이는 포맷으로 변환
• 이미지를 사용자에게 보이는 크기보다 불필요하게 크지 않도록 크기 조정

이미지 최적화와 변환을 자동화하기 위해 다양한 프로그램(예: 이미지 편집 소프트웨어, 자동화 스크립트 등)을 사용할 수 있습니다. 하지만 사용자가 업로드한 모든 이미지를 최적화하고 변환하는 것은 어려운 일입니다.

각 플랫폼에 구애받지 않고 많은 이미지 변환을 쉽게 적용할 수 있는 방법은 이미지 URL에 변환 파라미터를 추가하는 것입니다. 우리 팀은 이를 해결하기 위해 DevOps, Server 엔지니어가 수개월에 걸쳐 이미지 변환 시스템을 개발했고 각 플랫폼의 클라이언트 개발자 3명이 코드를 수정해야 했습니다.

스냅킷은 이를 쉽게 적용할 수 있는 기능을 제공합니다. image.png?dpr=3, image.png?blur=true와 같은 쿼리 파라미터를 이미지 URL에 추가하여 Retina 디스플레이 대응과 블러처리를 간단하게 실시간으로 처리한다면 간편합니다. 더 많은 이미지 변환 살펴보기

디자이너가 제작한 이미지가 피그마에 있어요. 어떻게 최적화하여 서비스에 적용할까요?#

피그마에 있는 이미지를 서비스에 적용하기 위해서는 다운로드 받아야 합니다.

디자이너가 이미지를 제작하고 개발자가 서비스에 적용하는 단계는 생각보다 번거롭습니다.

1. 디자이너가 피그마에 이미지 올려두기
2. 개발자가 피그마에서 다운로드 받기
3. S3 업로드
4. CDN 주소에서 이미지 노출 확인
5. 코드 작성

이 문제를 해결하기 위해서는 피그마 플러그인을 제작해 피그마에서 나가지 않고 이미지 최적화와 동시에 업로드하고 개발자가 서비스에 통합하는 2단계로 줄일 수 있습니다.

스냅킷의 피그마 플러그인↗을 통해 피그마에서 나가지 않고 이미지 최적화와 동시에 업로드하고 개발자가 서비스에 통합하는 2단계로 줄일 수 있습니다.

이미지 최적화를 위한 자체 개발은 핵심 비즈니스에 집중할 시간을 빼앗아갑니다#

사실, 이미지 최적화에 대해서 많은 팀들은 아래 케이스 중 하나로 대응합니다.

1. 중요성을 인지하지 못하거나, 어떻게 해야 하는지 모르는 경우
2. 인지하고 있지만 개발 리소스가 부족하여 직접 개발하지 못하는 경우
3. (저작권 침해의 우려가 있는) 무료 이미지 최적화 웹사이트에 업로드하고 다시 다운로드하는 경우

그리고 추후에 비즈니스가 성장하여 이미지 사용량이 많아질수록 불필요한 인프라 비용 지출과 사용자 이탈을 초래합니다.

이런 여러 문제들을 해결하기 위해 자체 개발을 고려하게 되지만, 과연 현명한 선택일까요?

개발 인력이 충분하지 않거나 스타트업 개발팀이 가진 목표는 빠른 성장과 생존이 가장 높은 우선순위일 것입니다. 개발 비용을 아끼고 핵심 비즈니스에 집중하여 비즈니스가 성장하여 개발 인력이 충분해졌을 때 직접 개발하는 것이 더 합리적일 수 있습니다. 전 세계 수백 개의 개발팀도 동일한 고민을 하고 있습니다.

자체 개발 실패 사례

저는 A 스타트업에서 이미지 처리 시스템을 내부 개발하려다가 개발자 2명이 3주간 매달렸지만 여전히 완성도가 떨어졌습니다. 지속적으로 유지보수할 시간도 추가로 필요했으나 이 시스템에 더 많은 시간을 쓰기 어려웠고 그 사이 경쟁사는 새로운 기능을 계속 출시했습니다.

결국 다른 업무의 우선순위에 밀려 자체 개발한 시스템은 유지보수가 어려워졌고 값비싼 엔터프라이즈 솔루션을 찾아야 했습니다.

이 문제를 해결할 수 있는 두 가지 선택지가 있습니다.

1. 개발자가 몇 주 이상 매달려서 불완전한 솔루션 만들기. 그리고 지속적인 유지보수 비용 투입하기.
2. 또는 5분 만에 이미지 기능을 전문적으로 제공하는 서비스 사용하기

이런 질문이 떠오를 수 있습니다. "나중에 해도 되는 거 아닌가요?", "우리 팀 개발자들이 할 수 있는 것 아닌가요?"

일찍 도입하지 않을수록 비용은 시간이 지날수록 커집니다.

1. 매일 늘어나는 클라우드 비용: 늦게 최적화하는 만큼 불필요한 비용 발생
2. 떠나가는 사용자들: 느린 성능으로 인해 매일 잠재 고객 이탈
3. 개발팀의 시간 낭비: 비즈니스와 동떨어진 개발로 인해 핵심 기능 개발 지연
4. 경쟁력 격차: 경쟁사는 이미 최적화된 성능으로 앞서나가는 중

스냅킷은 가입 직후 즉시 이미지 최적화 인프라를 제공하며 실제 구축했을 때 인프라 비용보다 더 저렴한 비용으로 이미지 최적화를 제공하고, 유지보수의 노력이 필요 없습니다.

이미지 CDN으로 글로벌 사용자 경험을 한 단계 더 개선하세요#

앞서 소개한 5가지 문제를 해결한 후에도, 글로벌 서비스로 확장하려면 한 가지 더 고려해야 할 점이 있습니다. 바로 이미지 CDN(Content Delivery Network) 활용입니다.

이미지 CDN은 원본 이미지를 전 세계 여러 서버에 분산 저장하여, 사용자가 어디에서 접속하든 가장 가까운 서버에서 이미지를 제공할 수 있습니다. 이를 통해 이미지 로딩 속도를 획기적으로 개선할 수 있습니다.

이미지 CDN은 단순히 파일을 빠르게 전송하는 것에 그치지 않습니다. 다양한 파일 형식과 해상도를 자동으로 지원하여, 사용자의 기기와 브라우저 환경에 최적화된 이미지를 제공할 수 있습니다. 또한, 이미지 CDN은 JPEG, WebP, AVIF 등 다양한 포맷을 활용한 이미지 압축 기능을 제공하여 파일 크기를 더욱 줄이고, 이미지 전달 속도를 높일 수 있습니다.

예를 들어, 모바일 기기에는 더 작은 사이즈의 이미지 파일을, 데스크톱에는 고해상도 이미지를 제공할 수 있습니다. 이로 인해 웹사이트의 전체적인 성능이 향상되고, 더 많은 사용자가 쾌적하게 이미지를 볼 수 있습니다.

또한, 이미지 CDN을 사용하면 원본 이미지 파일의 보관과 관리가 쉬워지고, 파일 업로드 및 배포 과정에서 발생할 수 있는 병목 현상도 줄일 수 있습니다. 결과적으로 웹사이트의 로딩 속도가 빨라지고, 사용자 만족도와 재방문율을 높일 수 있습니다.

---

스냅킷은 이미지 최적화 자동화를 통해 개발팀에는 효율적인 협업과 클라우드 비용 절약을, 사용자에게는 빠른 웹사이트 성능을 제공합니다. 여러분이 고객 문제 해결에 집중할 때 이미지 관련 문제는 스냅킷이 해결해줍니다.

이 이야기가 공감되신다면, 지금 바로 스냅킷을 시작해보세요.

무료로 시작하기