빠른 화면 만들기
손님이 주소를 누른 뒤 화면이 보이기까지 걸리는 시간이에요. 이 몇 초가 가게 문 앞에서 손님이 기다려 주는 시간이라, 길어지면 그냥 돌아서요.
쉽게 말하면
가게 셔터가 반쯤 올라간 채로 멈춰 있다고 생각해 보세요. 안에 좋은 물건이 가득해도 손님은 그걸 몰라요. 셔터가 다 올라갈 때까지 기다려 주는 사람은 많지 않고, 대부분은 옆 가게로 가요. 화면 속도가 그 셔터예요. 내가 만든 것이 아무리 좋아도, 보이기 전에는 없는 것과 같아요.
그래서 속도는 기술 문제가 아니라 매출 문제예요. 광고비를 써서 사람을 데려와도, 화면이 늦게 뜨면 그 돈이 문 앞에서 새어 나가요.
데이터로 열면 흰 화면이 몇 초씩 이어져요. 손님은 고장 났다고 생각해요.
같은 내용인데 1초 안에 첫 글자가 보여요. 손님이 안으로 들어와요.
느리다는 건 몇 초부터일까
사장님이 직접 만든 화면은 이미 여러 번 봐서 느린 줄 몰라요. 처음 오는 손님의 머릿속은 이렇게 흘러가요.
| 기다린 시간 | 손님 머릿속 | 사장님이 할 일 |
|---|---|---|
| 1초 안 | 기다렸다는 느낌 자체가 없어요 | 지금 상태를 지켜요 |
| 2~3초 | "좀 느리네" 하고 인지해요. 아직은 기다려 줘요 | 무거운 사진부터 손봐요 |
| 4초 넘어감 | 손가락이 뒤로 가기를 눌러요. 이유는 스스로도 몰라요 | 급한 문제예요. 원인을 찾아요 |
| 10초 넘어감 | 고장 났다고 판단해요. 다시 안 와요 | 기능 하나가 멈춰 있을 가능성이 높아요 |
숫자보다 내 손님이 정답이에요
"몇 초가 넘으면 몇 퍼센트가 나간다" 같은 수치는 업종·기기·나라마다 달라요. 남의 숫자를 외우지 말고, 방문 기록에서 내 화면이 실제로 몇 초에 뜨고 사람들이 어디서 나가는지 확인하세요.
느려지는 이유는 순위가 있어요
원인은 수십 가지가 아니에요. 거의 항상 아래 순서예요. 위에서부터 보면 대부분 해결돼요.
| 순위 | 원인 | 왜 무거운가 |
|---|---|---|
| 1위 | 무거운 사진 | 요즘 휴대폰 사진 한 장이 3~5MB예요. 화면에 실제로 필요한 크기는 그보다 훨씬 작아요. 원본 그대로 열 장 올리면 손님은 그 전부를 내려받아요 |
| 2위 | 한 화면에 너무 많은 기능 | 열자마자 예약·지도·후기·슬라이드·애니메이션을 전부 준비해요. 손님이 첫 화면에서 안 볼 것까지 미리 만드느라 늦어져요 |
| 3위 | 외부 서비스 | 채팅 위젯·지도·통계·광고처럼 남의 회사 코드를 붙인 것들이에요. 그쪽이 느리면 내 화면도 같이 멈춰요. 내가 고칠 수 없는 게 문제예요 |
| 4위 | 서버가 깨어나는 시간 | 손님이 뜸한 시간대에 서버가 잠들었다가 첫 손님 때 깨어나느라 몇 초 걸리는 경우가 있어요. 첫 한 명만 느리고 그다음은 빨라요 |
1위가 압도적이에요
속도 상담의 절반 이상은 사진 하나로 끝나요. 사진 가볍게 만들기만 해도 체감이 확 달라지는 경우가 많아요. 어려운 것부터 손대지 마세요.
사장님이 직접 확인하는 법
컴퓨터에서 보면 거의 다 빨라요. 손님의 절반 이상은 휴대폰으로, 그것도 와이파이가 아닌 데이터로 들어와요. 손님 조건을 흉내 내는 게 핵심이에요.
- 1휴대폰에서 와이파이를 끄고 데이터로 바꿔요. 가게 와이파이는 손님 조건이 아니에요.
- 2브라우저를 시크릿 모드(새 창)로 열어요. 내 폰에는 이미 저장된 게 있어서 실제보다 빨라 보여요.
- 3주소를 누르고 속으로 숫자를 세요. 첫 글자가 보일 때까지 몇 초, 사진까지 다 뜰 때까지 몇 초. 두 번을 따로 재요.
- 4가장 느린 화면 한 개만 고르세요. 전부 고치려 들면 아무것도 못 고쳐요.
- 5여유가 되면 지하철이나 건물 안처럼 신호가 약한 곳에서 한 번 더 열어 봐요. 여기서 견디면 진짜예요.
가장 정직한 방법
가족이나 직원에게 평소 쓰던 자기 폰으로 주소를 열어 달라고 하고 옆에서 보세요. 표정이 먼저 말해 줘요. 이 방법이 어떤 측정 도구보다 정확해요.
실제로 겪는 장면
장면 1 · 손님이 전화로 말했다
“사장님, 예약하려고 들어갔는데 화면이 안 떠서 그냥 전화했어요.”
전화를 걸어 준 이 손님은 고마운 예외예요. 말없이 나간 사람이 훨씬 많다는 신호로 읽어야 해요. 이런 말을 한 번이라도 들었다면 그날 안에 휴대폰 데이터로 직접 열어 보세요.
장면 2 · 외주 개발자가 말했다
“이미지 최적화하고 스크립트 지연 로딩 걸면 훨씬 나아질 거예요.”
쉬운 말로 옮기면 사진을 알맞은 크기로 줄이고, 당장 안 보이는 것들은 나중에 불러오겠다는 뜻이에요. 둘 다 효과가 크고 비용이 작은 작업이라 정상적인 제안이에요. 작업 전후로 같은 조건에서 시간을 재 달라고 요청하세요.
장면 3 · 사장님 혼잣말
“어제까진 빨랐는데 오늘 갑자기 느려졌네.”
하루아침에 느려졌다면 원인은 보통 어제 내가 추가한 것이에요. 사진을 올렸거나, 위젯을 붙였거나, 기능을 하나 켰거나요. 마지막에 바꾼 것을 잠깐 되돌려 보면 범인이 바로 나와요.
효과가 큰 것부터
속도 개선은 노력 대비 효과 차이가 아주 커요. 위에서부터 하나씩 하고, 할 때마다 다시 재 보세요.
| 순서 | 할 일 | 효과 | 드는 노력 |
|---|---|---|---|
| 1 | 사진을 화면에 맞는 크기로 줄이기 | 매우 큼 | 작음 |
| 2 | 첫 화면에 안 보이는 사진은 스크롤할 때 불러오기 | 큼 | 작음 |
| 3 | 안 쓰는 외부 위젯 걷어내기(채팅·통계 중복 등) | 큼 | 작음 |
| 4 | 첫 화면을 가볍게 하고 나머지는 다음 화면으로 나누기 | 중간 | 중간 |
| 5 | 첫 화면 자동재생 영상을 사진 한 장으로 바꾸기 | 큼 | 작음 |
| 6 | 서버·호스팅 등급 올리기 | 작음에서 중간 | 큼(돈이 들어요) |
돈 쓰는 건 맨 마지막이에요
많은 분이 느리면 서버부터 올려요. 그런데 원인이 사진이면 서버를 아무리 좋게 해도 그대로예요. 택배 트럭을 큰 걸로 바꾸는 것보다, 짐을 줄이는 게 먼저예요.
화려함과 속도는 반대말이 아니에요
속도 얘기가 나오면 "그럼 다 밋밋하게 만들라는 거냐"고 생각하기 쉬워요. 아니에요. 손님을 붙잡는 건 결국 인상이고, 볼 것 없는 화면은 빨라도 팔리지 않아요.
정답은 먼저 보여주고 나중에 채우기예요. 첫 1초에는 이름·한 줄 소개·버튼처럼 가벼운 것을 띄우고, 큰 사진과 움직임은 손님이 스크롤하는 동안 따라오게 해요. 손님은 이미 안으로 들어와 있어서 기다려 줘요.
실제로 잘 만든 곳들도 첫 화면은 의외로 단순해요. 화려함을 버린 게 아니라 순서를 정한 것이에요. 문 앞은 트여 있고, 진열은 안쪽에 있는 가게처럼요.
이건 지키세요
손님이 첫 화면에서 무엇을 하는 곳인지, 뭘 누르면 되는지만은 기다림 없이 알 수 있어야 해요. 그 두 가지보다 먼저 뜨는 장식은 순서를 잘못 잡은 거예요. 첫 화면 만들기와 함께 보면 좋아요.
- Q. 제 폰에서는 빠른데 손님이 느리다고 해요. 왜 그래요?
- 두 가지예요. 첫째, 내 폰에는 이미 내려받은 것이 저장돼 있어서 다시 안 받아요. 둘째, 나는 보통 와이파이로 열어요. 시크릿 모드 + 데이터로 열면 손님과 비슷한 조건이 돼요.
- Q. 사진은 몇 장까지 괜찮아요?
- 장수보다 한 장의 무게가 중요해요. 알맞게 줄인 사진이면 여러 장도 괜찮고, 원본 그대로면 세 장도 무거워요. 그리고 첫 화면에 다 보여줄 필요는 없어요.
- Q. 첫 화면에 동영상을 넣고 싶은데요?
- 가장 무거운 선택이에요. 꼭 넣고 싶다면 대표 장면을 사진 한 장으로 먼저 띄우고, 손님이 재생을 누를 때 영상을 불러오세요. 소리 없는 짧은 영상이라도 데이터 환경에서는 부담이 커요.
- Q. 속도가 검색 순위에도 영향이 있나요?
- 검색엔진들이 화면 뜨는 속도를 평가 항목으로 본다고 공개적으로 밝혀 왔어요. 다만 순위는 여러 요소가 함께 작용해서 속도만 고친다고 순위가 뛰지는 않아요. 자세한 기준은 검색 노출에서 보세요.
- Q. 바이브캠퍼스에서 만들면 알아서 빨라지나요?
- 시작은 가볍게 나와요. 하지만 사장님이 사진을 올리고 기능을 얹으면 무거워지는 건 어디서 만들든 같아요. 속도는 한 번 맞추고 끝나는 게 아니라 바꿀 때마다 다시 확인하는 항목이에요.
- Q. 느린 게 서버 탓인지 사진 탓인지 어떻게 구분해요?
- 화면이 흰 채로 오래 멈춰 있다가 한꺼번에 뜨면 서버 쪽일 가능성이 커요. 글은 금방 뜨는데 사진 자리만 오래 비어 있으면 사진 문제예요. 이것만 봐도 방향이 갈려요.
확인해 보세요
내 폰에서는 1초 만에 뜨는데 손님은 느리다고 해요. 가장 그럴듯한 이유는?
하나 더
화면이 느려요. 예산을 딱 한 곳에만 쓸 수 있다면?
직접 해보기
만든 화면을 휴대폰으로 열어 보세요
스튜디오에서 만든 결과를 미리보기로 볼 수 있어요. 컴퓨터에서 한 번, 와이파이를 끈 휴대폰에서 한 번 열어 보고 걸린 시간을 비교해 보세요. 차이가 크면 손볼 곳이 있다는 뜻이에요.
스튜디오 열기더 깊이 (안 읽어도 괜찮아요)
재야 할 시간은 두 개예요 · 첫 글자가 보이는 시간과, 전부 다 뜨는 시간은 달라요. 손님의 체감은 첫 글자 쪽에 훨씬 가까워요. 뒤에 사진이 몇 장 더 붙는 건 이미 들어온 손님에게는 큰 문제가 아니에요. 그래서 개선의 목표는 "전부 빨리"가 아니라 "보여줄 것을 먼저"예요.
왜 사진이 항상 1등인가 · 글은 한 화면을 가득 채워도 무게가 아주 가벼워요. 반면 사진 한 장은 그 수백 배가 되기도 해요. 게다가 화면에 보이는 크기는 손바닥만 한데 실제로는 원본 전체를 내려받아요. 사장님 눈에는 똑같이 보여서 문제인 줄 모르는 게 함정이에요. 자세한 방법은 사진 가볍게 만들기에 있어요.
외부 서비스는 내 통제 밖이에요 · 채팅 위젯이나 지도처럼 남의 회사 코드를 붙이면, 그 회사 서버가 느린 날 내 화면도 같이 느려져요. 내가 고칠 방법이 없다는 게 진짜 문제예요. 그래서 외부 위젯은 꼭 필요한 것만, 되도록 나중에 불러오게 붙이는 게 원칙이에요. 통계 도구를 두 개씩 붙여 두고 잊어버린 경우도 흔해요.
이것만 기억하세요
- ·화면이 뜨기 전까지는 내 가게가 없는 것과 같아요
- ·원인은 대개 사진 · 너무 많은 기능 · 외부 서비스 순서예요
- ·확인은 와이파이를 끈 휴대폰 시크릿 모드로 해요
- ·사진 줄이기부터 하고, 돈 쓰는 건 맨 마지막이에요
- ·화려함을 버리는 게 아니라 보여줄 순서를 정하는 거예요