용량 줄이기
기능을 하나 붙일 때마다 눈에 안 보이는 짐이 함께 실려 와요. 그 짐이 쌓이면 첫 화면이 늦게 뜨고, 특히 처음 오는 손님의 휴대폰에서 티가 나요.
쉽게 말하면
손님이 가게 문을 열면, 그 순간 배달 트럭 한 대가 같이 도착해요. 트럭에는 그날 장사에 필요한 물건이 실려 있어요. 문제는 손님이 그 트럭을 다 내릴 때까지 가게 안으로 들어올 수 없다는 거예요. 기능을 하나 붙일 때마다 그 트럭에 상자가 하나씩 더 올라가요. 화면에는 버튼 하나만 늘었는데 트럭은 훨씬 무거워져 있어요. 손님이 문 앞에서 기다리는 그 시간이 바로 트럭을 내리는 시간이에요.
개발하는 사람들은 이 트럭을 번들이라고 불러요. 화면을 보여주기 위해 손님 휴대폰이 먼저 내려받아야 하는 코드 덩어리를 한 단어로 묶어 부르는 말이에요. "번들 사이즈가 크다"는 말은 "그 트럭이 무겁다"는 뜻이고요.
이 문서는 그 무게가 어디서 오는지, 언제 손을 대야 하고 언제는 손대지 않는 게 이득인지를 다뤄요. 두 번째가 더 중요해요. 대부분의 사장님에게 용량 줄이기는 아직 순서가 오지 않은 일이에요.
손님이 첫 화면 하나 보려는데 관리자 화면 코드까지 같이 내려받아요. 안 쓰는 짐이 대기 시간이 돼요.
기능은 하나도 안 없앴어요. 순서만 바꿨어요. 첫 화면이 먼저 뜨고 손님이 안으로 들어와요.
기능 하나에 붙어 오는 숨은 무게
무게가 눈에 안 보이는 이유가 있어요. 기능을 만들 때는 남이 미리 만들어 둔 코드를 가져다 쓰는 게 정석이에요. 달력을 처음부터 만드는 사람은 없어요. 그런데 그 남의 코드는 내가 쓰는 부분만 오지 않고 통째로 와요.
달력에서 날짜 고르기 하나만 쓰려고 했는데, 그 달력 꾸러미에는 여러 나라 달력, 음력 변환, 시간대 계산까지 들어 있어요. 다 안 쓰는데 트럭에는 다 실려요. 요즘 도구들이 안 쓰는 부분을 걸러내 주기는 하지만 완벽하지 않아요.
| 화면에 늘어난 것 | 함께 실려 오는 것 | 손님이 느끼는 것 |
|---|---|---|
| 날짜 고르는 칸 | 달력 꾸러미 전체. 안 쓰는 나라별 설정과 시간대 계산까지 | 첫 화면이 조금 늦어져요. 하나면 티가 안 나요 |
| 매출 그래프 | 그림 그리는 도구 전체. 안 쓰는 그래프 종류 수십 가지가 같이 | 무게로 치면 상위권이에요. 그런데 사장님만 보는 화면인 경우가 많아요 |
| 지도로 위치 보여주기 | 지도 회사 코드. 대부분 남의 서버에서 따로 내려와요 | 내 통제 밖이라 그쪽이 느리면 같이 느려져요 |
| 화면이 스르륵 나타나는 효과 | 움직임 도구. 생각보다 가벼운 편이에요 | 거의 안 느껴져요. 여기서 화려함을 뺄 필요는 없어요 |
| 실시간 채팅 상담 위젯 | 남의 서비스 코드 한 벌. 보통 가장 무거운 손님 중 하나예요 | 첫 화면과 상관없는 기능인데 첫 화면을 늦춰요 |
| 예전에 만들었다가 안 쓰는 화면 | 지운 줄 알았는데 코드가 남아 트럭에 계속 실려요 | 아무도 안 쓰는데 모두가 기다려요. 가장 아까운 무게예요 |
마지막 줄이 제일 흔해요
만들다 방향을 바꾼 화면, 시안으로 만들어 둔 페이지, 쓰다 만 기능. 화면 어디에도 안 보이니까 사장님은 없는 줄 알아요. 그런데 코드에서 완전히 떼어내지 않으면 트럭에는 계속 실려요. 큰 개편을 한 뒤에는 이걸 한 번 물어보는 게 좋아요.
지금은 신경 쓰지 않아도 되는 때
정직하게 말씀드릴게요. 이 문서를 읽는 사장님 열 명 중 여덟 명은 오늘 이 일을 하면 안 돼요. 용량 줄이기는 손이 많이 가는데, 손님이 적을 때는 효과가 0에 가까워요. 시간을 여기 쓰면 손님을 늘리는 데 쓸 시간이 없어져요.
| 내 상황 | 지금 할 일 | 이유 |
|---|---|---|
| 손님이 하루 열 명, 대부분 아는 사람 | 손대지 마세요 | 1초를 줄여서 얻는 손님이 하루 0명이에요. 같은 시간을 손님 늘리는 데 쓰는 게 몇십 배 이득이에요 |
| 아직 뭐가 팔릴지 모르는 단계 | 기능을 더 붙이세요 | 무엇이 필요한지 찾는 게 먼저예요. 다 만든 뒤에 정리하면 돼요. 정리는 언제든 할 수 있어요 |
| 사장님과 직원만 쓰는 관리 화면 | 손대지 마세요 | 쓰는 사람이 정해져 있고 재방문이라 두 번째부터 빨라요. 여기 무게는 아무도 안 아파요 |
| 첫 화면이 이미 2초 안에 뜬다 | 손대지 마세요 | 손님은 기다렸다는 느낌조차 없어요. 여기서 더 줄여도 매출은 안 움직여요 |
| 사진을 휴대폰 원본 그대로 올려 뒀다 | 사진부터 정리하세요 | 사진이 코드보다 훨씬 무겁고 고치기도 쉬워요. 순서가 완전히 반대예요. 사진 가볍게 만들기 |
반대로, 아래 중 하나라도 해당하면 그때는 순서가 온 거예요.
- 1광고비를 쓰기 시작했어요. 광고로 들어오는 손님은 전부 첫 방문이에요. 첫 방문이 무게를 통째로 뒤집어써요. 문 앞에서 돌아서는 손님 한 명이 곧 광고비 한 번이에요.
- 2손님 대부분이 휴대폰 데이터로 들어와요. 와이파이와 데이터는 체감이 다르고, 보급형 휴대폰은 더 다르게 느껴요.
- 3기능을 열 개 넘게 붙였고 첫 화면이 4초를 넘어가요. 이건 이미 손님이 나가고 있는 구간이에요. 빠른 화면 만들기에서 몇 초부터 위험한지 볼 수 있어요.
- 4검색으로 손님을 받으려고 해요. 검색엔진들은 화면 속도를 순위 요소 중 하나로 본다고 공개해 뒀어요. 다만 내용이 부실한데 빠르다고 올라가지는 않아요. 내용이 먼저예요.
- 5첫 방문만 느리고 두 번째부터 멀쩡해요. 이 증상은 거의 확정적으로 무게 문제예요. 아래 표에서 이유를 설명해요.
증상으로 알아보기
"느려요"는 원인이 여러 개예요. 무게 문제인지 아닌지를 가르는 건 어떻게 느린가예요. 아래에서 내 증상을 찾아보세요.
| 증상 | 이게 무게 문제인가 | 먼저 볼 곳 |
|---|---|---|
| 첫 방문만 느리고 두 번째 방문부터 빠르다 | 거의 확실히 맞아요 | 휴대폰은 한 번 내려받은 트럭을 기억해 둬요. 그래서 나만 빠르고 새 손님은 계속 느려요 |
| 몇 번을 열어도 항상 똑같이 느리다 | 아닐 가능성이 높아요 | 목록 조회나 서버 쪽 문제예요. 느려진 목록 되살리기(인덱스) 쪽을 보세요 |
| 기능을 붙인 그날부터 느려졌다 | 맞아요 | 그 기능이 데려온 짐이 원인이에요. 그 기능만 따로 떼어 늦게 보내면 돼요 |
| 내 휴대폰은 괜찮은데 손님이 느리다고 한다 | 맞을 가능성이 높아요 | 내 휴대폰에는 이미 기억돼 있고 사무실 와이파이예요. 손님은 처음이고 지하철이에요 |
| 흰 화면이 몇 초 이어지다가 한꺼번에 다 뜬다 | 맞아요 | 화면 뜨는 걸 막고 있는 코드가 있어요. 이게 무게 문제의 전형적인 모습이에요 |
| 글은 먼저 뜨고 사진이 나중에 채워진다 | 아니에요. 잘 되고 있는 상태예요 | 고칠 게 아니에요. 손님은 이미 글을 읽고 있어요. 오히려 목표하는 모습이에요 |
| 버튼을 누르면 잠깐 멈춘 뒤 반응한다 | 반대 방향이에요 | 짐을 너무 잘게 나눠서 그럴 수 있어요. 아래 더 깊이에서 다뤄요 |
확인은 손님 조건으로 해요
내 컴퓨터에서 열어 보는 건 확인이 아니에요. 와이파이를 끊고 데이터로, 되면 오래된 휴대폰으로, 그리고 한 번도 안 열어 본 상태로 열어야 손님이 보는 화면이에요. 브라우저에 손님 조건을 흉내 내는 기능이 있어요. 개발자 도구(F12)에서 볼 수 있어요.
AI에게 그대로 말할 문장
무게 문제는 사장님이 직접 고칠 일이 아니에요. 증상을 정확히 말하는 게 사장님 몫이고, 나머지는 맡기면 돼요. 아래 문장은 그대로 복사해서 붙여 넣어도 되게 써 뒀어요.
| 내 상황 | 이렇게 말하세요 |
|---|---|
| 무엇이 무거운지 모르겠어요 | "첫 화면을 여는 데 함께 실려 오는 것들을 무거운 순서대로 알려 주세요. 고치는 건 나중에 하고, 지금은 목록만 보고 싶어요." |
| 첫 화면이 늦게 떠요 | "첫 화면에 꼭 필요한 것만 남기고, 나머지는 손님이 그 버튼을 눌렀을 때 불러오도록 바꿔 주세요. 기능은 하나도 없애지 마세요." |
| 기능 붙인 뒤부터 느려요 | "방금 추가한 기능 때문에 첫 화면이 무거워진 것 같아요. 이 기능은 해당 화면에서만 불러오게 분리해 주세요." |
| 특정 기능 하나가 의심돼요 | "이 기능에 쓰인 남의 코드가 얼마나 무거운지 알려 주고, 더 가벼운 방법이 있으면 그걸로 바꿔 주세요." |
| 보급형 휴대폰에서만 느려요 | "보급형 휴대폰 기준으로 첫 화면이 무거워요. 화면 뜨는 걸 막고 있는 코드부터 줄여 주세요." |
| 안 쓰는 기능이 남아 있을 것 같아요 | "예전에 만들었다가 지금 화면에 없는 기능들이 아직 실려 오는지 확인하고, 있으면 완전히 빼 주세요." |
| 관리자 화면 때문인 것 같아요 | "관리자 화면과 통계 화면은 손님이 안 봐요. 손님용 첫 화면과 완전히 분리해 주세요." |
| 고치고 나서 확인하고 싶어요 | "바꾸기 전과 후에 첫 화면이 얼마나 가벼워졌는지 숫자로 알려 주세요. 기능이 그대로 동작하는지도 확인해 주세요." |
마지막 줄을 빼지 마세요
짐을 나누는 작업은 잘 되면 티가 안 나고, 잘못되면 어떤 버튼이 조용히 안 눌려요. 그래서 "기능이 그대로 동작하는지 확인해 주세요"를 매번 붙이는 게 좋아요. 무게는 줄었는데 주문 버튼이 안 되면 그건 손해예요.
효과가 큰 것부터
무게를 줄이는 방법은 사실 세 가지뿐이에요. 순서대로 하면 대부분 첫 두 개에서 끝나요.
- 1안 쓰는 걸 빼요. 지운 줄 알았던 화면, 시험용으로 넣었던 도구, 쓰다 만 기능. 손이 가장 적게 가면서 부작용이 없어요. 여기서 절반이 빠지는 경우가 흔해요.
- 2첫 화면에 필요 없는 걸 나중에 보내요. 관리자 화면, 통계, 설정, 결제 완료 화면처럼 손님이 처음에 안 보는 것부터 떼요. 기능은 그대로 남아 있고 순서만 바뀌어요. 효과가 가장 커요.
- 3무거운 도구를 가벼운 것으로 갈아타요. 예를 들어 그래프 도구 하나를 더 가벼운 것으로 바꾸는 일이에요. 효과는 크지만 화면이 조금 달라질 수 있어서 마지막에 해요.
그리고 이 순서 앞에 하나가 더 있어요. 사진과 영상 정리예요. 사진 한 장이 코드 전체보다 무거운 경우가 흔해요. 사진을 안 만졌다면 그것부터 하는 게 맞아요. 코드 무게는 그다음 문제예요.
화려함을 빼는 게 답이 아니에요
속도를 잡겠다고 색·그림자·움직임을 걷어내는 건 대개 잘못된 처방이에요. 그런 꾸밈은 무게에서 차지하는 몫이 작아요. 진짜 무게는 안 쓰는 기능과 남의 코드 꾸러미에 있어요. 손님이 보고 좋아하는 걸 깎지 말고, 손님이 안 보는 걸 깎으세요.
실제로 겪는 장면
장면 1 · 외주 개발자가 말했다
“번들이 3메가라서 그래요. 코드 스플리팅부터 하고, 안 쓰는 라이브러리 트리셰이킹 되는지 봐야 해요.”
번역하면 이래요. "첫 화면 열 때 실려 오는 코드 덩어리가 너무 커요. 필요한 것만 먼저 보내고 나머지는 나중에 보내게 나누고, 안 쓰는 남의 코드가 잘 걸러지는지 확인하자"는 뜻이에요. 사장님이 판단할 건 하나예요. 지금 손님 수와 광고 지출을 생각할 때 이 작업에 시간을 쓸 때인가. 아니라면 "기록해 두고 광고 켤 때 하죠"라고 말하면 돼요.
장면 2 · 광고를 켠 첫 주에 알게 된 것
“광고로 하루 300명이 들어왔다는데, 실제로 화면을 본 사람은 절반쯤이었어요. 저는 그동안 아무 문제 없다고 생각했거든요.”
지인과 단골만 들어올 때는 문제가 안 보여요. 그 사람들 휴대폰에는 트럭이 이미 기억돼 있으니까요. 광고 손님은 전부 첫 방문이라 무게를 통째로 뒤집어써요. 광고를 켜는 날이 무게가 처음 청구되는 날이에요. 그래서 광고 계획이 잡히면 그 전에 한 번 확인하는 게 순서예요.
자주 묻는 것
- Q. 몇 메가면 무거운 거예요? 기준 숫자가 있나요?
- 외울 만한 절대 기준은 없어요. 손님 휴대폰과 인터넷이 기준을 정해요. 다만 첫 화면 열 때 실려 오는 코드가 1메가를 넘어가면 보급형 휴대폰에서 티가 나기 시작해요. 숫자를 외우는 것보다 데이터로 한 번 열어 보는 게 정확해요.
- Q. 사진과 코드 중에 뭘 먼저 손대야 하나요?
- 거의 항상 사진이에요. 사진이 몇 배에서 몇십 배 무거우면서 고치기도 쉬워요. 사진을 화면 크기에 맞게 줄이고 늦게 불러오게 하는 것만으로 체감이 확 달라져요. 코드 무게는 사진 정리 다음이에요.
- Q. 그럼 기능을 빼야 하는 거예요?
- 아니에요. 빼는 게 아니라 늦게 보내는 거예요. 손님이 그 버튼을 누를 때 그때 내려받게 하면 기능은 그대로 있고 첫 화면만 가벼워져요. 기능을 줄이라는 문서가 아니에요.
- Q. 바이브캠퍼스에서 만든 것도 무거워지나요?
- 기능을 붙일 때마다 그 기능이 쓰는 코드가 함께 들어와요. 이건 도구를 바꿔도 마찬가지예요. 화면에 안 보이는 무게라 만드는 사람이 알아채기 어려운 게 핵심이에요. 그래서 기능을 여러 개 붙인 뒤에는 무엇이 무거운지 한 번 물어보는 걸 습관으로 두면 좋아요.
- Q. 한 번 줄여 놓으면 끝인가요?
- 아니에요. 기능을 붙일 때마다 조금씩 다시 붙어요. 가게 청소와 같아요. 큰 개편을 한 뒤나 광고를 켜기 전에 한 번씩 확인하는 주기로 두면 충분해요. 만든 뒤 관리하기에 이런 정기 점검을 모아 뒀어요.
- Q. 인터넷이 이렇게 빨라졌는데 아직 문제가 되나요?
- 내려받는 시간은 확실히 빨라졌어요. 그런데 코드는 내려받은 다음 손님 휴대폰이 읽고 해석하고 실행해야 해요. 그 시간은 인터넷 속도가 아니라 휴대폰 성능이 정하고, 보급형 휴대폰 성능은 인터넷만큼 빨라지지 않았어요. 그래서 여전히 문제가 돼요.
- Q. 검색 순위에 정말 영향이 있나요?
- 검색엔진들은 화면 속도를 순위에 쓰는 요소 중 하나로 공개해 뒀어요. 다만 여러 요소 중 하나예요. 내용이 부실한데 빠르다고 올라가지 않아요. 순서는 내용이 먼저, 속도가 다음이에요. 검색에 뜨게 하기를 함께 보세요.
헷갈리기 쉬운 것
용량 줄이기 = 기능 줄이기? 아니에요. 이게 가장 흔한 오해예요. 트럭이 무거우면 물건을 버리는 게 아니라 두 번에 나눠 실어요. 손님이 지금 필요한 것만 먼저, 나머지는 필요할 때. 기능 수는 그대로예요.
빠른 화면 만들기와 뭐가 달라요? 빠른 화면 만들기는 "손님이 몇 초 기다리는가"라는 결과를 다뤄요. 이 문서는 그 원인 중 한 갈래인 "실려 오는 짐의 무게"만 파고들어요. 증상을 먼저 보고 싶으면 그쪽, 원인이 무게라고 좁혀졌으면 이쪽이에요.
앱은 상관없죠? 스마트폰 앱은 설치할 때 한 번 내려받으니까 매번 트럭이 오지는 않아요. 대신 설치 용량이 커지면 설치를 포기하는 사람이 생겨요. 아픈 지점이 옮겨 갈 뿐 없어지지는 않아요. 앱과 웹사이트의 차이에서 두 방식을 비교해 뒀어요.
확인해 보세요
내 서비스가 첫 방문에만 느리고 두 번째 방문부터는 멀쩡해요. 무슨 뜻일까요?
하나 더
손님이 하루 열 명, 대부분 단골이고, 첫 화면은 2초 안에 떠요. 오늘 할 일은?
직접 해보기
지금 만든 것에 무게를 물어보세요
고치기 전에 목록만 보는 게 순서예요. 스튜디오 채팅에 이 문장을 그대로 붙여 넣어 보세요. "첫 화면을 여는 데 함께 실려 오는 것들을 무거운 순서대로 알려 주세요. 고치는 건 나중에 하고, 지금은 목록만 보고 싶어요." 목록을 보고 나서 손댈지 말지 결정하면 돼요. 안 손대는 것도 정답이에요.
스튜디오에서 물어보기더 깊이 (안 읽어도 괜찮아요)
같은 1메가인데 코드가 사진보다 아픈 이유 · 사진은 내려받아서 화면에 그리면 끝이에요. 코드는 내려받은 뒤에 손님 휴대폰이 그걸 읽고 해석하고 실행해야 해요. 그 해석과 실행이 휴대폰 성능을 그대로 먹어요. 그래서 코드 1메가와 사진 1메가는 값이 달라요. 인터넷이 두 배 빨라지면 사진 문제는 절반이 되지만, 코드 문제는 내려받는 부분만 절반이 되고 해석·실행 부분은 그대로 남아요. 이게 보급형 휴대폰에서 유독 티가 나는 이유이기도 해요. 그리고 그 해석·실행이 끝날 때까지 손님은 버튼을 눌러도 반응이 없어요. 화면은 떴는데 눌러도 안 되는 그 어색한 몇 초가 여기서 나와요.
나중에 보내기가 공짜는 아니에요 · 짐을 나누면 첫 화면은 확실히 가벼워져요. 대신 손님이 그 버튼을 누른 순간 없던 기다림이 새로 생겨요. 너무 잘게 나누면 누를 때마다 조금씩 끊기는 느낌이 되고, 그건 첫 화면 1초보다 더 짜증스러울 수 있어요. 그래서 나누는 기준은 하나예요. 대부분의 손님이 안 가는 곳부터. 관리자·설정·통계·이용약관 같은 화면은 떼어내도 부작용이 거의 없어요. 반대로 손님이 첫 화면에서 바로 누르는 주문 버튼 같은 건 절대 떼지 않아요. 떼야 하는데 기다림이 신경 쓰이면 기다리는 중 표시로 덮어 주는 방법도 있어요.
기억해 둔 것이 무효가 되는 순간 · 휴대폰이 트럭을 기억해 두는 덕분에 단골은 빨라요. 그런데 코드를 조금이라도 고쳐서 새로 내보내면 그 기억이 못 쓰게 되고, 단골도 다시 내려받아요. 여기서 트럭을 나눠 둔 것이 두 번째로 효과를 내요. 통째로 한 덩어리면 한 줄만 고쳐도 전부 다시 내려가지만, 나눠 두면 바뀐 조각만 다시 내려가요. 자주 고치는 서비스일수록 이 차이가 커요. 무게를 나누는 일이 첫 방문만 돕는 게 아니라 재방문 속도까지 지켜 주는 이유예요. 이 기억의 규칙은 같은 답을 두 번 안 만들기(캐시)에서 더 자세히 다뤄요.
이것만 기억하세요
- ·기능을 붙이면 눈에 안 보이는 짐이 함께 실려 와요. 첫 화면이 늦는 원인 중 하나예요
- ·손님이 적고 첫 화면이 2초 안에 뜨면 지금 할 일이 아니에요. 손님 늘리는 게 이득이에요
- ·순서가 오는 건 광고를 켤 때, 손님이 데이터로 들어올 때, 첫 화면이 4초를 넘길 때예요
- ·첫 방문만 느리고 두 번째부터 빠르면 거의 확정적으로 무게 문제예요
- ·고치는 건 기능을 빼는 게 아니라 늦게 보내는 거예요. 사진 정리가 언제나 먼저예요