사진 가볍게 만들기

카메라로 찍은 사진 한 장은 화면에 필요한 것보다 훨씬 커요. 그대로 올리면 손님이 기다리다 나가요. 쓸 크기로 줄여서 올리는 게 사진 최적화예요.

쉽게 말하면

손님이 메뉴 하나를 물어봤는데, 인쇄소에서 받은 벽 한 면짜리 대형 현수막 원본을 통째로 펼쳐서 보여주는 격이에요. 손님이 볼 건 A4 한 장인데, 현수막을 펴는 데만 1분이 걸리죠. 카메라 사진이 딱 그래요. 화면에 보이는 건 손바닥만 한데, 파일은 인화해도 되는 크기로 들어와요. 보여줄 크기만큼만 잘라서 주면 화면은 똑같고 기다림만 사라져요.

원본 그대로 올린 화면

가게 사진 12장 합계 48MB

밖에서 열면 첫 화면이 뜰 때까지 십수 초예요. 그 사이 손님은 뒤로 가기를 눌러요.

웹용으로 줄인 화면

같은 사진 12장 합계 1.4MB

눈으로는 차이를 못 느껴요. 대신 1초 안에 떠요. 사진을 뺀 게 아니라 무게만 뺐어요.

사진을 줄인다는 건 화질을 포기한다는 뜻이 아니에요. 화면에 보이지도 않을 여분을 버리는 일이에요. 인화용으로만 필요한 여분이거든요.

무거우면 손님이 나가요

사장님이 사이트를 볼 때는 대부분 가게 와이파이나 사무실 인터넷이에요. 그래서 느린 걸 사장님만 모르는 경우가 많아요. 손님은 지하철에서, 주차장에서, 신호 약한 곳에서 열어요.

그리고 손님은 기다리는 동안 "로딩 중"이라고 생각하지 않아요. "고장 났나"라고 생각해요. 흰 화면은 문 닫힌 가게와 똑같이 보여요.

1손님이 링크를 눌러요. 이 순간 손님 휴대폰이 사장님 사진을 한 장씩 내려받기 시작해요.
2글자는 금방 뜨는데 사진 자리가 비어 있어요. 사진이 도착하면 자리를 밀어내면서 들어와서, 손님이 누르려던 버튼이 손가락 밑에서 움직여요.
3첫 화면이 다 그려질 때까지 손님은 아무것도 못 해요. 이때가 이탈이 가장 많이 나는 구간이에요.
4게다가 무거운 사진은 손님의 데이터 요금을 써요. 48MB짜리 화면 한 번이 영상 몇 분치예요.

직접 확인하는 게 제일 확실해요

속도가 느릴수록 손님이 떠난다는 건 여러 조사에서 반복 확인된 사실이에요. 다만 내 가게 숫자는 남의 통계가 아니라 내 기록이에요. 와이파이를 끄고 휴대폰 데이터만으로 내 사이트를 열어 보세요. 그 체감이 손님이 겪는 것이고, 실제 이탈은 방문 기록에서 볼 수 있어요.

줄일 게 두 가지예요

사진에는 크기(가로 몇 픽셀인가)와 용량(몇 MB인가) 두 가지가 따로 있어요. 둘을 같이 줄여야 효과가 나요.

크기는 사진의 실제 가로 길이예요. 요즘 휴대폰 사진은 가로 4000픽셀이 넘어요. 그런데 손님 휴대폰 화면 자체가 가로 400픽셀 안팎이에요. 열 배를 보내고 있는 셈이에요.

여기서 가장 흔한 오해 하나. 화면에서 작게 보이니까 괜찮다고 생각하기 쉬운데, 브라우저는 보이는 크기만 줄여서 그릴 뿐 파일은 통째로 내려받아요. 작게 보인다고 가볍게 오는 게 아니에요.

어디에 쓰는 사진	가로 픽셀 기준	파일 용량 목표
화면 전체를 덮는 배경	1600~2000픽셀	200~400KB
본문 중간에 넣는 사진	800~1200픽셀	100~200KB
목록에 줄줄이 뜨는 작은 사진	400~600픽셀	30~80KB
로고·아이콘	쓰는 크기 그대로. 되도록 SVG나 PNG	10~50KB
카메라 원본(줄이기 전)	4000~6000픽셀	3~8MB

표의 마지막 줄과 첫 줄을 비교해 보세요. 배경 사진 한 장에 필요한 건 300KB인데 원본은 5MB예요. 열 배 넘게 무거운 걸 보내고 있었던 거예요.

화면 하나의 목표치

사진을 다 합쳐서 첫 화면 1MB 안팎을 목표로 잡으면 충분히 빨라요. 사진이 많은 갤러리 화면이라도 처음 보이는 몇 장만 먼저 오고 나머지는 스크롤할 때 오게 하면 돼요.

webp 가 뭐예요

사진을 저장하는 방식의 이름이에요. jpg, png 같은 것과 같은 자리에 있는 형식이고, 구글이 웹에 쓰라고 만들었어요. 파일 이름 끝이 .webp 로 끝나요.

쓸모는 한 줄이에요. 같은 화질인데 파일이 더 작아요. 사진에서 흔히 jpg보다 눈에 띄게 작아지고, 투명 배경도 되니까 로고에도 쓸 수 있어요. 요즘 브라우저는 거의 다 열어요.

형식	어울리는 것	알아둘 점
JPEG(jpg)	사진	어디서나 열려요. 가장 무난한 선택이에요
PNG	로고·글자·투명 배경	화질 손실이 없는 대신 사진에 쓰면 무거워져요
WebP	사진과 로고 둘 다	같은 화질에 더 작아요. 아주 오래된 기기에선 안 보일 수 있어요
SVG	로고·아이콘·도형	확대해도 안 깨지고 아주 가벼워요. 사진에는 못 써요
HEIC	아이폰 촬영 기본값	웹에서 그냥은 안 보여요. 올리기 전에 JPEG로 바꿔야 해요

형식보다 크기가 먼저예요

5000픽셀짜리를 webp로 바꾸는 것보다 1200픽셀로 줄이는 게 훨씬 큰 효과예요. 순서는 크기 줄이기가 먼저, 형식 고르기가 그다음이에요. 형식만 바꾸고 크기를 그대로 두면 여전히 무거워요.

사장님이 실제로 겪는 장면

장면 1 · 손님이 전화로 말했다

“사장님 사이트 안 열려요. 계속 하얀 화면만 나오는데요.”

고장이 아니라 아직 내려받는 중일 가능성이 커요. 가게 와이파이로는 순식간이라 사장님은 몰랐던 거예요. 확인법은 간단해요. 휴대폰 와이파이를 끄고 데이터로만 열어 보세요. 손님이 보는 화면이 그거예요.

장면 2 · 촬영해 준 곳에서 말했다

“원본 그대로 드릴게요. 인쇄까지 생각해서 고화질로 찍었습니다.”

고마운 말인데 그대로 웹에 올리면 안 돼요. 인쇄용과 웹용은 필요한 크기가 완전히 달라요. "웹에 올릴 사본도 가로 1600픽셀 정도로 따로 주세요"라고 한마디만 하면, 대부분 그 자리에서 같이 내줘요. 원본은 인쇄나 재편집용으로 따로 보관해 두세요.

장면 3 · 외주 개발자가 말했다

“사진들 webp로 바꾸고 lazy 걸어놨어요. 첫 화면이 4초대에서 1초대로 줄었습니다.”

이제 해석돼요. 사진을 더 작은 형식으로 다시 저장했고, 화면 아래쪽 사진은 스크롤이 거기 닿을 때 내려받게(lazy) 바꿨다는 뜻이에요. 손님이 처음 보는 화면에 필요한 것만 먼저 오게 한 거죠. 좋은 작업이에요.

바이브캠퍼스가 해 주는 것, 사장님이 할 것

역할이 나뉘어 있어요. 파일을 다루는 손질은 바이브캠퍼스가 하고, 무엇을 보여줄지 고르는 건 사장님이 해요. 뒤바뀌면 둘 다 어색해져요.

일	누가 하나	내용
만들기 재료로 붙인 사진 줄이기	바이브캠퍼스	긴 변을 1400픽셀 기준으로 줄이고 JPEG로 다시 저장해서 만들기에 넣어요
아래쪽 사진 나중에 부르기	바이브캠퍼스	첫 화면에 안 보이는 사진은 스크롤이 닿을 때 오도록 지시가 걸려 있어요
사진 자리 미리 잡기	바이브캠퍼스	가로세로를 지정해서, 사진이 도착할 때 화면이 밀리지 않게 해요
사진 없이도 되는 부분	바이브캠퍼스	장식과 아이콘은 코드로 그려서 무게가 아예 안 붙어요
어떤 사진을 쓸지 고르기	사장님	10장 중 3장만 고르는 판단은 사람이 해요
올리기 전에 미리 줄이기	사장님	한 장에 5MB가 넘으면 아예 안 붙어요. 원본을 그대로 던지지 마세요
아이폰 HEIC 바꾸기	사장님	웹에서 안 열리는 형식이라 JPEG로 저장해서 올려요
완성 후 밖에서 열어보기	사장님	데이터로 직접 열어보는 확인은 사람만 할 수 있어요

만들기 전에 붙이는 게 유리해요

아직 아무것도 안 만든 상태에서 사진을 붙이면 바이브캠퍼스가 재료로 받아 줄여서 넣어요. 반대로 이미 만들어진 화면에 사진을 끼워 넣을 때는 붙인 파일이 그대로 들어가요. 그러니 나중에 사진을 추가할 때는 사장님이 먼저 줄여서 올리는 게 좋아요.

1고르기. 찍은 사진 전부 말고, 손님 마음을 움직일 서너 장만 남겨요. 비슷한 각도 다섯 장은 한 장이면 충분해요.
2줄이기. 휴대폰 사진 앱이나 컴퓨터 기본 그림 프로그램에서 크기 조절로 가로 1600픽셀 정도로 저장해요. 원본은 지우지 말고 따로 두세요.
3올리고 확인하기. 만든 화면을 와이파이 끄고 데이터로 열어 보세요. 3초 안에 첫 화면이 뜨면 합격이에요.

자주 묻는 것

Q. 사진을 줄이면 흐릿해지지 않나요?: 화면에서 보일 크기보다 크게만 저장하면 안 흐려져요. 가로 1200픽셀로 보일 사진을 1600픽셀로 저장하면 오히려 여유가 있어요. 흐려지는 건 크기를 너무 작게 줄였을 때, 또는 품질을 아주 낮게 저장했을 때예요. 품질은 80 근처면 눈으로 차이를 못 느껴요.
Q. 돈 안 들이고 줄이는 방법이 있나요?: 휴대폰 사진 앱의 편집 기능과 컴퓨터에 원래 깔린 그림 프로그램만으로 충분해요. 인터넷에서 파일을 올리면 줄여 주는 도구도 많지만, 그건 사진이 남의 서버로 한 번 올라간다는 뜻이에요. 손님 얼굴이나 개인정보가 담긴 사진은 그런 도구에 올리지 마세요.
Q. 아이폰 사진이 HEIC로 저장돼요. 어떻게 해요?: 두 가지 방법이 있어요. 사진을 메일이나 메신저로 자기한테 한 번 보내면 대개 JPEG로 바뀌어요. 아니면 카메라 설정에서 저장 형식을 호환성이 높은 쪽으로 바꿔 두면 처음부터 JPEG로 찍혀요. 웹에 자주 올릴 거라면 설정을 바꿔 두는 쪽이 편해요.
Q. 한 장에 몇 MB까지 괜찮아요?: 웹에 올릴 사진은 한 장 200KB 안쪽을 목표로 잡으세요. 큰 배경 사진이라도 400KB를 넘길 이유는 거의 없어요. MB 단위가 나오면 그건 아직 원본이라는 신호예요.
Q. 사진이 수십 장인 갤러리 화면은 어떡해요?: 다 줄여서 올리되, 처음에는 몇 장만 보여주고 스크롤할 때 나머지가 오게 하면 돼요. 만들 때 "사진은 스크롤이 닿을 때 불러와 줘"라고 말하면 그렇게 만들어져요. 목록에 뜨는 작은 사진은 400~600픽셀이면 충분하다는 점도 같이 기억해 두세요.

헷갈리기 쉬운 것

"화질 좋은 사진이 장사에 유리하지 않나요?" 유리해요. 다만 화질과 파일 크기는 같은 말이 아니에요. 손님 화면에 보이는 선명함은 이미 1600픽셀에서 끝나요. 그 위는 손님에게 도달하지 않는 무게일 뿐이에요.

"인터넷이 빨라졌는데 아직도 신경 써야 해요?" 회선은 빨라졌지만 사진은 더 빨리 커졌어요. 카메라 화소는 계속 올라가고, 손님은 여전히 신호 약한 곳에서 열어요. 격차는 안 줄었어요.

확인해 보세요

화면에서 가로 800픽셀로 보일 사진이에요. 원본은 6000픽셀이고요. 어떻게 올릴까요?

하나 더

손님이 "사이트가 안 열린다"고 해요. 사장님 사무실에서는 잘 열려요. 가장 먼저 해볼 일은?

직접 해보기

사진 한 장으로 시험해 보세요

스튜디오 채팅창에 가게 사진을 붙여 보세요. 아직 아무것도 만들지 않은 상태에서 붙이면, 바이브캠퍼스가 만들기 재료로 받아서 줄인 다음 화면에 넣어 줘요. 만들어진 결과를 데이터로 한 번 열어보면 무게 감각이 잡혀요.

스튜디오 열기

더 깊이 (안 읽어도 괜찮아요)

"줄인다"가 실제로 하는 일 · 사진 압축은 사람 눈이 잘 못 알아채는 정보부터 골라서 버려요. 하늘처럼 색이 비슷하게 이어지는 부분이 먼저 정리돼요. 그래서 품질 80으로 저장해도 눈으로는 원본과 구분이 안 가는데 파일은 크게 줄어요. 다만 버린 정보는 되돌아오지 않아요. 줄인 사본을 다시 줄이고 또 줄이면 점점 뭉개져요. 그러니 손질은 항상 원본에서 한 번만 하고, 원본은 따로 보관하세요.

사진이 페이지 안에 통째로 들어가는 경우 · 사진을 별도 파일로 두지 않고 화면 코드 안에 글자로 바꿔 넣는 방식이 있어요. 파일이 하나로 끝나서 편하고 깨질 일이 없는 대신, 글자로 바꾸는 과정에서 원래 파일보다 3분의 1쯤 커져요. 붙여 넣는 사진을 미리 줄여야 하는 이유가 여기 하나 더 있는 거예요.

휴대폰과 컴퓨터에 다른 사진을 주는 방법 · 한 장만 준비하는 대신 작은 것과 큰 것을 같이 준비해 두고, 기기 화면에 맞는 쪽을 브라우저가 골라 가게 하는 방법이 있어요. 개발자들이 srcset 이라고 부르는 기능이에요. 휴대폰 손님에게 큰 배경 사진을 안 보내도 되니 효과가 커요. 화면 크기에 따라 모양이 바뀌는 이야기는 화면 크기 대응 쪽에 더 있어요.

이것만 기억하세요

·카메라 원본은 화면에 필요한 것보다 열 배쯤 커요. 그대로 올리지 않아요
·크기부터 줄이고(가로 1600픽셀 안팎), 그다음에 형식을 골라요
·webp 는 같은 화질에 파일이 작은 저장 방식이에요. 아이폰 HEIC 는 웹에서 안 열려요
·바이브캠퍼스는 재료로 붙인 사진을 줄이고 아래쪽 사진을 나중에 부르게 해요. 고르는 건 사장님 몫이에요
·확인은 와이파이 끄고 데이터로. 첫 화면 3초 안이면 합격이에요