홈페이지 메인에 걸 배너를 열심히 만들었는데, 막상 올려 보니 글자가 잘리거나 흐릿하게 보인 적 있으시죠? 대부분 사이즈를 정하지 않고 일단 만들어서 생기는 일입니다. 홈페이지 배너 사이즈는 "어디에 넣을지 → 어떤 화면에서 볼지 → 어떤 형식으로 저장할지" 순서로 정하면 됩니다. 이 글에서는 배너를 만들기 전에 확인할 6가지를 표와 예시로 정리했습니다.
홈페이지 배너 사이즈, 왜 미리 정해야 하나요?
배너는 정해진 액자에 끼우는 그림이라, 액자 크기를 먼저 재야 합니다. 그림부터 그리고 액자를 맞추면 어딘가가 잘립니다.
홈페이지는 컴퓨터, 태블릿, 휴대폰마다 화면 폭이 다릅니다. 반응형(화면 크기에 맞춰 자동으로 바뀌는 방식) 홈페이지는 배너를 화면에 맞게 늘리거나 잘라서 보여 줍니다. 그래서 같은 그림이라도 휴대폰에서는 양옆이 잘려 보일 수 있습니다.
| 한눈에 보기 | 확인할 것 | 놓치면 생기는 일 |
|---|---|---|
| 체크 1 | 배너가 들어갈 자리 | 엉뚱한 비율로 만들어 다시 작업 |
| 체크 2 | 컴퓨터·모바일 크기 | 휴대폰에서 글자 잘림 |
| 체크 3 | 글자 안전 영역 | 화면에 따라 문구가 사라짐 |
| 체크 4 | 파일 형식 | 글자가 뭉개지거나 색이 탁해짐 |
| 체크 5 | 파일 용량 | 첫 화면이 느리게 열림 |
| 체크 6 | 직접 만들지, 맡길지 | 시간만 쓰고 결과는 아쉬움 |
한 줄 정리: 배너는 액자 크기를 재고 그리는 그림이라고 생각하세요.
체크 1·2: 넣을 자리와 화면 크기부터 확인하세요
가장 먼저 우리 홈페이지 관리자 화면이나 제작사가 안내한 규격을 확인하세요. 홈페이지마다 배너 자리의 크기가 다르기 때문에 이 규격이 가장 정확합니다.
안내받은 규격이 없다면 아래처럼 많이 쓰는 크기를 출발점으로 삼으면 됩니다. 픽셀(화면을 이루는 아주 작은 점)은 가로×세로 순서로 적습니다.
| 배너 종류 | 많이 쓰는 크기 예시 | 메모 |
|---|---|---|
| 컴퓨터용 메인 배너 | 가로 1920 × 세로 600~800 픽셀 | 넓은 모니터 폭을 꽉 채우는 크기 |
| 모바일용 메인 배너 | 가로 750~1080 × 세로 750~1000 픽셀 | 정사각형에 가까운 비율 |
| 페이지 중간 띠 배너 | 가로 1200 × 세로 200~300 픽셀 | 이벤트·공지 안내용 |
위 숫자는 정답이 아니라 출발점입니다. 템플릿이나 제작사가 정한 규격이 있으면 그 숫자를 따르세요.
한 줄 정리: 규격은 우리 홈페이지 관리자 화면 안내가 먼저, 일반 예시는 그다음입니다.
체크 3: 글자는 가운데 안전 영역에만 넣으세요
문구와 버튼은 배너 가운데 가로 1200픽셀 안쪽에 모아 두세요. 이 구역을 안전 영역(어느 화면에서도 잘리지 않는 가운데 구역)이라고 부릅니다.
넓은 모니터에서는 배너 전체가 보입니다. 하지만 작은 노트북이나 태블릿에서는 양옆이 잘려 나갑니다. 그래서 양쪽 끝에는 하늘, 벽, 바닥처럼 잘려도 괜찮은 배경만 두는 게 좋습니다.
예를 들어, 직원 2명인 동네 빵집이 "주말 한정 소금빵 20% 할인" 배너를 만든다고 해 볼게요. 빵 사진은 배너 전체에 깔고, 할인 문구와 "주문하기" 버튼은 가운데에 모으면 됩니다. 휴대폰용은 문구를 두 줄로 나눠 따로 만드세요.
- □ 문구가 가운데 1200픽셀 안에 있나요?
- □ 양쪽 끝에는 배경만 있나요?
- □ 휴대폰용 배너의 글자가 손톱보다 크게 보이나요?
한 줄 정리: 잘려도 되는 것은 끝에, 꼭 보여야 하는 것은 가운데에 두세요.
체크 4·5: 파일 형식과 용량을 정하세요
사진이 많은 배너는 JPG, 글자와 로고가 주인공인 배너는 PNG로 저장하세요. 형식을 잘못 고르면 글자 테두리가 뭉개지거나 파일이 쓸데없이 커집니다.
용량은 홈페이지가 열리는 속도와 바로 이어집니다. 첫 화면 배너가 무거우면 손님이 기다리다 나가 버립니다. 1장에 0.5메가바이트 안팎을 목표로 줄여 보세요.
| 알아두면 좋은 용어 | 쉬운 뜻 | 비유·예시 |
|---|---|---|
| JPG | 사진을 작게 압축하는 저장 방식 | 옷을 진공 팩에 눌러 담기 |
| PNG | 글자 테두리를 또렷하게 지키는 방식 | 다림질한 셔츠를 그대로 걸기 |
| 해상도 | 그림이 얼마나 촘촘한 점으로 되어 있는지 | 사진 인화지의 결 |
| 용량 | 파일의 무게 | 짐 가방의 무게 |
용량을 줄이는 방법은 어렵지 않습니다. 저장할 때 "품질"을 80% 정도로 낮추면 눈으로는 차이가 거의 없습니다. 그래도 크면 가로 크기를 규격에 딱 맞게 줄이세요.
한 줄 정리: 사진은 JPG, 글자는 PNG, 무게는 한 장에 0.5메가바이트 안팎입니다.
캔바로 배너 만들 때 사이즈 맞추는 법
캔바(온라인 디자인 도구)에서는 "사용자 지정 크기"로 픽셀 숫자를 직접 넣고 시작하세요. 이미 있는 디자인 틀을 고르면 비율이 맞지 않을 수 있습니다.
캔바는 디자인 경험이 없어도 글자와 사진을 끌어다 놓기만 하면 되는 도구입니다. 순서는 아래와 같습니다. 메뉴 이름은 화면 개편에 따라 조금 달라질 수 있습니다.
- 캔바에 로그인한 뒤 "디자인 만들기"를 누르세요.
- "사용자 지정 크기"를 골라 가로·세로를 픽셀로 넣으세요.
- 가운데 1200픽셀 안에 문구와 버튼을 배치하세요.
- 같은 내용으로 모바일용 크기를 하나 더 만드세요.
- 다운로드할 때 사진 위주면 JPG, 글자 위주면 PNG를 고르세요.
캔바 안의 사진·글꼴을 홈페이지에 쓸 때는 상업적 이용 조건이 있을 수 있습니다. 캔바 공식 안내에서 사용 범위를 한 번 확인하세요.
한 줄 정리: 캔바는 템플릿보다 "사용자 지정 크기"로 시작해야 규격이 정확합니다.
체크 6: 직접 만들까, 맡길까? 기준은 이렇습니다
문구만 바꾸는 배너는 직접, 새 디자인이 필요한 배너는 맡기는 게 효율적입니다. 시간과 결과물을 같이 놓고 보면 판단이 쉽습니다.
잇다웹 유지보수 안내 페이지에는 배너 작업 단가가 공개돼 있습니다(2026년 10월 공식 페이지 기준, VAT 포함).
| 작업 | 예상 비용 | 작업 기간 | 이런 분께 |
|---|---|---|---|
| 메인 슬라이드 배너 교체 | 세트(3장) 50,000원 | 1일 | 이미지는 직접 만든 분 |
| 배너 이미지 신규 디자인 | 건당 80,000원 | 2~3일 | 컴퓨터·모바일 각 1종이 필요한 분 |
| 메인 슬라이드 신규 디자인 | 세트(3장) 200,000원 | 3~5일 | 첫 화면을 새로 꾸미려는 분 |
신규 배너 디자인에는 시안 1회와 수정 2회가 들어 있습니다. 반대로 완성 디자인으로 홈페이지를 만들면, 디자인 모드에서 배너 사진과 문구를 직접 바꿀 수 있습니다. 어떤 화면인지 궁금하시면 홈페이지 템플릿 보기에서 미리 둘러보세요.
한 줄 정리: 자주 바꾸는 배너는 직접, 첫인상을 바꾸는 배너는 전문가에게 맡기세요.
배너 만들기 전 체크리스트
- 관리자 화면이나 제작사 안내에서 배너 규격을 확인하세요.
- 컴퓨터용과 모바일용 크기를 각각 적어 두세요.
- 문구와 버튼을 가운데 1200픽셀 안에 배치하세요.
- 사진 위주는 JPG, 글자 위주는 PNG로 저장하세요.
- 파일 1장을 0.5메가바이트 안팎으로 줄이세요.
- 올린 뒤 휴대폰으로 직접 열어 잘린 곳이 없는지 보세요.
한 줄 정리: 마지막 6번, 내 휴대폰으로 확인하기가 가장 확실한 점검입니다.
자주 묻는 질문
홈페이지 메인 배너 사이즈는 몇으로 해야 하나요?
우리 홈페이지 관리자 화면이나 제작사가 알려 준 규격이 정답입니다. 안내가 없다면 컴퓨터용은 가로 1920 × 세로 600~800픽셀에서 시작해 보세요. 모바일용은 가로 750~1080픽셀로 따로 만드는 게 좋습니다.
배너 하나로 컴퓨터와 모바일을 같이 쓸 수 없나요?
쓸 수는 있지만 글자가 들어간 배너라면 따로 만드는 게 안전합니다. 하나로 쓰면 휴대폰에서 양옆이 잘리거나 글자가 너무 작아집니다. 글자가 없는 풍경 사진 배너라면 하나로 써도 괜찮습니다.
배너가 흐릿하게 보이는 이유는 뭔가요?
대부분 규격보다 작은 그림을 늘려서 생깁니다. 가로 1920픽셀 자리에 1000픽셀짜리 그림을 넣으면 두 배 가까이 늘어나 흐려집니다. 처음부터 규격 크기 이상으로 만들고, 글자 위주라면 PNG로 저장하세요.
한 줄 정리: 규격 확인, 화면별 따로 만들기, 크게 만들어 줄이기가 배너의 기본입니다.
우리 홈페이지에 맞는 배너 규격이나 제작 비용이 궁금하시면 무료 견적 상담에서 편하게 물어보세요.
사진: Unsplash (photo-1572044162444-ad60f128bdea, photo-1523901839036-a3030662f220, photo-1758797850551-eb83fc94f1c3)