목차
안녕하세요, 케이트리솔루션입니다.
오늘은 홈페이지를 만들 때 반드시 피해야 할 제작 방식 하나를 이야기해 보려 합니다. 오래전부터 쓰여 왔고 지금도 생각보다 자주 보이는데, 저는 이걸 홈페이지 제작에서 가장 나쁜 패턴이라고 봅니다. 바로 페이지 전체를 이미지로 만들어 올리는 방식입니다.
이미지는 생각보다 무겁습니다
웹사이트는 HTML 문서와 CSS, 그리고 이미지 같은 여러 콘텐츠로 이루어져 있습니다. 이 가운데 용량을 가장 많이 차지하는 게 이미지입니다. 텍스트는 글자 정보만 있으면 되지만, 이미지는 픽셀 하나하나마다 색상 정보를 담고 있어야 하니까요.
바이트, 킬로바이트, 메가바이트
용량 단위부터 짚고 가겠습니다. 컴퓨터가 정보를 저장하는 기본 단위는 바이트(Byte)입니다. 영문자나 숫자 한 글자가 1바이트, 웹페이지에서 쓰는 한글 한 글자는 보통 3바이트입니다. 여기서 1,000배씩 커질 때마다 이름이 바뀝니다.
| 단위 | 크기 | 감 잡기 |
|---|---|---|
| 1KB (킬로바이트) | 약 1,000바이트 | 한글 300자 남짓 |
| 1MB (메가바이트) | 약 1,000KB | 스마트폰 사진 한 장이 보통 2~5MB |
| 1GB (기가바이트) | 약 1,000MB | 영화 한 편이 몇 GB |
(엄밀하게는 1,024배씩이지만 감을 잡는 데는 1,000으로 생각해도 충분합니다.)
A4 한 장을 빼곡히 채운 한글이 1,500자쯤 되는데, 이걸 바이트로 바꾸면 5KB 안팎입니다. 회사 소개 페이지의 글을 다 합쳐도 몇십 KB를 넘기기 어렵습니다.
이미지는 계산이 다릅니다. 가로 1,920픽셀, 세로 1,080픽셀짜리 화면 크기 이미지에는 픽셀이 약 207만 개 들어 있고, 픽셀마다 빨강·초록·파랑 색상값 3바이트가 붙습니다. 압축하지 않으면 이 한 장이 약 6MB입니다. JPG로 압축하면 수백 KB까지 줄지만, 그래도 같은 내용을 글자로 썼을 때보다 수십 배 무겁습니다.
우리가 웹사이트를 본다는 건 결국 서버에 있는 웹페이지를 내 기기로 내려받는 일입니다. 필요 이상으로 이미지가 많으면 받아야 할 양이 늘어나고, 그만큼 페이지가 늦게 뜹니다.
트래픽이란, 그리고 호스팅 요금제
방문자가 페이지를 열 때마다 서버에서 그 페이지의 파일들이 방문자에게 전송됩니다. 이렇게 서버가 내보낸 데이터의 총량을 트래픽(전송량)이라고 합니다. 페이지 하나가 3MB이고 하루에 1,000번 열렸다면 그날 트래픽은 약 3GB입니다.
웹호스팅은 이 트래픽 양으로 요금제가 나뉘는 경우가 많습니다. 국내에서 많이 쓰는 카페24 뉴아우토반 웹호스팅을 예로 들어 보겠습니다(2026년 9월 카페24 호스팅 상품 페이지 기준, 부가세 포함 월 요금).
| 요금제 | 월 요금 | 하루 트래픽 |
|---|---|---|
| 절약형 | 500원 | 1.6GB |
| 일반형 | 1,500원 | 4GB |
| 비즈니스 | 7,000원 | 10GB |
| 퍼스트클래스 | 12,000원 | 20GB |
| 자이언트 | 24,000원 | 40GB |
이 요금제들은 하루 단위로 트래픽 한도가 정해져 있어서, 한도를 넘기면 그날 자정에 초기화될 때까지 사이트 접속이 제한될 수 있습니다. 바로 풀려면 유료로 트래픽을 초기화하거나 상위 요금제로 옮겨야 합니다. 차단 없이 쓴 만큼 내는 종량제 상품(자이언트플러스, 월 1.2TB 기본 제공 후 초과분 GB당 165원)도 있지만, 그만큼 기본 요금이 올라갑니다.
이제 두 가지 방식으로 같은 메인 페이지를 만들었다고 가정해 보겠습니다.
- 글자와 여백까지 통이미지로 만들어 페이지 하나가 5MB인 경우
- 글자는 HTML로 쓰고 꼭 필요한 사진만 최적화해 넣어 페이지 하나가 0.5MB인 경우
절약형의 하루 한도 1.6GB로 계산하면 앞의 사이트는 하루 300번 남짓 열리면 한도가 찹니다. 뒤의 사이트는 3,000번 넘게 열려도 괜찮습니다. 방문자 수는 같은데 필요한 요금제가 한두 단계씩 달라지는 겁니다. 광고를 돌리거나 이벤트로 방문자가 몰리는 날, 통이미지 사이트가 먼저 멈추는 이유가 여기에 있습니다.
글자와 여백까지 이미지로 만드는 방식
문제는 사진처럼 꼭 이미지여야 하는 부분이 아닙니다. 텍스트로 써야 할 문구, 그냥 비워 두면 되는 여백까지 디자인 시안을 통째로 잘라 이미지로 올리는 제작 방식이 있습니다. 흔히 통이미지라고 부르는 방식입니다.
예전에 디자인을 시안 그대로 보여 주는 걸 중요하게 여기던 시절에 굳어진 방식인데, 이렇게 만들면 여러 곳에서 손해를 봅니다.
- 검색에 도움이 되지 않습니다. 검색엔진은 이미지 속 글자를 본문으로 읽지 못합니다. 회사 소개, 진료 과목, 서비스 설명이 전부 그림 안에 있으면 검색엔진 입장에선 내용이 거의 없는 페이지가 됩니다.
- 트래픽과 비용이 늘어납니다. 방문자가 페이지를 열 때마다 큰 이미지를 내려받아야 하니 데이터 전송량이 커지고, 그 트래픽은 호스팅 비용으로 돌아옵니다.
- 유지보수가 불편합니다. 전화번호 한 자리, 문구 한 줄을 고치려 해도 디자인 파일을 열어 이미지를 다시 만들고 다시 올려야 합니다.
- 모바일 대응이 안 됩니다. 이미지는 화면 크기에 맞춰 글자 배치가 바뀌지 않으니 반응형이 되지 않고, 결국 모바일용 이미지 사이트를 따로 한 벌 더 만드는 경우까지 생깁니다.
병원 홈페이지에서 특히 많이 보입니다
조심스러운 이야기지만, 이런 사례가 유독 많은 곳이 병원 홈페이지입니다. 병원 홈페이지를 만드는 제작사에 계시거나 병원 관계자라면 지금 운영 중인 사이트가 이렇게 만들어져 있지 않은지 한번 확인해 보시길 권합니다.
더 심한 경우에는 HTTPS 보안 인증서조차 설치되지 않은 사이트도 있습니다. 이건 디자인 이전의 문제이고, 방문자에게 보안 경고가 뜰 수 있는 심각한 상황입니다.
디자인은 마크업으로도 충분히 표현됩니다
웹사이트에서 디자인이 중요하다는 건 두말할 필요가 없습니다. 다만 그 디자인은 HTML과 CSS 같은 마크업으로 얼마든지 구현할 수 있어야 합니다. 글자는 글자로, 여백은 여백으로 두고, 이미지는 사진이나 일러스트처럼 정말 이미지가 필요한 자리에만 쓰는 게 맞습니다. 전부 이미지로 만드는 방식을 여전히 권하는 에이전시나 개발사가 있다면, 그건 업계에서 부끄럽게 여겨야 할 일이라고 생각합니다.
요즘은 AI를 활용한 바이브 코딩으로 홈페이지를 만드는 경우도 많아서, 처음부터 마크업 기반으로 만들면 이 문제는 애초에 생기지 않습니다. 그래도 이미지 자체를 잘 다루는 일은 여전히 남습니다.
- JPG, PNG만 쓰지 말고 WebP 같은 최적화된 이미지 형식을 활용합니다.
- 화면 크기별로 알맞은 크기의 이미지를 내보내, 모바일에서 불필요하게 큰 이미지를 받지 않게 합니다.
지금 내 홈페이지에서 확인해 볼 것
운영 중인 홈페이지가 있거나 제작을 준비하고 계시다면 아래만 먼저 살펴보세요.
- 페이지의 문구를 마우스로 드래그해 선택할 수 있는가 (선택이 안 되면 이미지일 가능성이 큽니다)
- 휴대폰으로 열었을 때 글자가 화면에 맞게 다시 배치되는가
- 주소창에 자물쇠 표시가 있는가 (HTTPS 적용 여부)
- 문구 하나를 고칠 때 디자인 작업부터 다시 해야 하는 구조인가
좋은 콘텐츠와 이미지를 효율적인 트래픽으로 운영할 수 있어야 제대로 만든 홈페이지입니다. 지금 사이트가 어떻게 만들어져 있는지 궁금하시다면 언제든 케이트리솔루션에 문의해 주세요.