메인 배너, 슬라이더·사진 한 장·움직이는 배경 중 무엇이 맞을까: 업종별 고르는 법

메인 배너는 보여줄 것이 여러 개이고 자주 바뀌면 슬라이더, 대표 장면 하나와 첫 화면에서 할 일이 분명하면 사진 한 장, 보여줄 사진이 마땅치 않은 IT·캠페인 페이지라면 코드로 그린 움직이는 배경이 맞습니다. 어느 쪽이든 예약·문의·구매처럼 방문자가 해야 할 일이 배너에 묻히지 않는지를 먼저 봐야 합니다. 기술 LAB 데모 두 개와 콘셉트 시안 두 개로 차이를 정리했습니다.

홈페이지에 들어오자마자 보이는 첫 화면의 큰 영역을 메인 배너, 또는 히어로라고 부릅니다. 홈페이지를 만들 때 "메인에 슬라이드 몇 장"은 흔히 가장 먼저 떠올리는 구성입니다. 그런데 슬라이더가 모든 업종에 맞지는 않습니다. 사진 한 장이 더 나은 곳도 있고, 아예 사진 없이 배경을 코드로 그리는 편이 나은 곳도 있습니다.

메인 배너 슬라이더 직접 넘겨보기 →

한눈에 비교: 메인 배너 세 가지

아래에서 하나씩 화면으로 보겠습니다.

1슬라이더: 보여줄 것이 여러 개이고 자주 바뀔 때

기술 LAB의 1번 데모 '메인 배너 슬라이더'입니다. 기업, 쇼핑몰, 호텔, 기술 기업 예시 네 장이 차례로 넘어가고, 위 화면은 두 번째 장인 쇼핑몰 예시("이번 시즌, 새로운 컬렉션")입니다. 아래쪽에 막대 네 개와 '02 / 04' 표시, 멈춤 버튼, 이전·다음 화살표가 있습니다.

• 진행 막대: 지금 몇 번째 장인지, 다음 장까지 얼마나 남았는지 막대가 차오르며 보여줍니다. 한 장은 약 5.6초 동안 머뭅니다.
• 멈춤: 배너 위에 마우스를 올려 두면 막대가 멈추고, 멈춤 버튼을 누르면 자동 넘김이 꺼집니다. 문구를 읽는 도중에 장이 넘어가지 않습니다.
• 손가락과 키보드: 휴대폰에서는 옆으로 밀어서 넘기고, PC에서는 키보드 방향키로도 넘깁니다.
• 움직임 줄이기 설정: 휴대폰이나 PC에서 '동작 줄이기'를 켜 둔 방문자에게는 저절로 넘어가지 않게 만들어 두었습니다.
• 천천히 확대되는 사진: 배경 사진이 아주 느리게 확대되어, 정지된 사진도 움직이는 화면처럼 보입니다.

휴대폰에서는 틀이 세로로 길어지고, 문구와 진행 막대, 버튼이 사진 아래쪽에 모입니다. 가로로 긴 PC용 사진은 가운데 부분만 보이게 잘립니다.

LAB 데모 카드의 '이런 곳에 씁니다'에는 기업·브랜드 메인 비주얼, 쇼핑몰 신상품·이벤트 배너, 호텔·리조트 공간 소개가 적혀 있습니다. 공통점은 첫 화면에서 알릴 것이 여러 개이고, 그 내용이 자주 바뀐다는 점입니다.

2사진 한 장: 대표 장면과 할 일이 분명할 때

한 달 살기까지 받는 장기 투숙형 숙소를 가정한 콘셉트 시안 'URBAN NEST'입니다.

화면 가득 객실 사진 한 장을 깔고, 그 위에 "Stay a little longer."와 "하루도, 한 달도 머물 수 있게 모든 객실에 주방을 넣었습니다."라는 문구를 올렸습니다. 버튼은 '객실 예약'과 '부대시설' 두 개이고, 사진 아래쪽에는 체크인·체크아웃·인원을 고르고 '객실 검색'을 누르는 예약 바가 붙어 있습니다.

숙소 홈페이지의 첫 화면에서 방문자가 할 일은 날짜를 넣어 보는 것입니다. 예약 바가 사진 위에 얹혀 있는 구성에서 뒤의 사진이 계속 바뀌면 시선이 사진으로 갑니다. 이 시안은 사진을 한 장으로 두고 시선을 문구와 예약 바에 모았습니다. 객실이 여러 종류라는 것은 바로 아래 'ROOMS' 섹션의 카드 세 장(스튜디오 더블, 로프트 트윈, 한 달 살기)이 맡습니다.

휴대폰에서는 예약 바가 사진 밑으로 내려와 두 줄(체크인·체크아웃 / 인원·객실 검색)로 바뀝니다. 사진이 한 장이라 첫 화면이 단순하고, '객실 검색' 버튼까지 첫 화면 안에 들어옵니다.

앞에서 본 LAB 카드에는 호텔·리조트도 슬라이더 쓰임새로 적혀 있습니다. 수영장, 레스토랑, 객실동처럼 시설마다 분위기가 다른 리조트라면 슬라이더가 맞습니다. URBAN NEST처럼 "모든 객실에 주방"이라는 한 문장이 핵심인 숙소는 사진 한 장으로 충분합니다. 그래도 객실 사진을 여러 장 보여주고 싶다면, 예약 바는 그대로 두고 뒤의 사진만 넘어가게 만들 수 있습니다.

3움직이는 배경: 보여줄 사진이 마땅치 않을 때

에너지 관제 플랫폼을 가정한 콘셉트 시안 'GRID WATCH'입니다.

제목은 "전력망의 이상을 초 단위로", 보조 문구는 "전압과 부하의 이상 징후를 초 단위로 잡아 관제사에게 먼저 보여줍니다."입니다. 배경에는 연한 초록과 파랑이 번지는 그라디언트를 깔고, 사진은 송전탑 사진 카드 한 장('실시간 관제 · 전압·전류·부하 초 단위 감시')으로 줄였습니다.

관제 소프트웨어가 하는 일은 사진으로 찍기 어렵습니다. 그래서 이 시안은 첫 화면을 사진으로 채우지 않고, 배경은 색으로, 하는 일은 제목으로 말합니다. 지금 이 배경은 CSS로 그린 정지된 그라디언트입니다.

이 배경을 움직이게 만든 것이 기술 LAB의 18번 데모 '셰이더 그라디언트 히어로'입니다.

데모의 제목은 "이미지가 아니라 코드로 그린 배경"입니다. 사진 파일 없이 GPU가 매 순간 배경을 직접 그립니다. 색이 대리석 무늬처럼 천천히 흐르고, 마우스를 움직이면 그 자리를 따라 물결이 일어납니다. 데모 설명을 그대로 옮기면 "용량은 몇 KB뿐"입니다.

아래쪽 OLIVE·AURORA·SUNSET 버튼을 누르면 색 조합이 부드럽게 바뀝니다. 위는 SUNSET으로 바꾼 화면입니다. 실제 홈페이지에서는 이 세 가지 대신 브랜드 색을 넣습니다. GRID WATCH라면 지금의 초록·파랑 그라디언트 자리에 같은 색의 셰이더 배경을 넣고, 송전탑 사진 카드는 그대로 두는 구성이 됩니다.

업종별로 고르면

실제 홈페이지에 넣을 때 확인할 것

---

메인 배너 슬라이더 직접 넘겨보기 → 셰이더 배경 직접 움직여 보기 · URBAN NEST 시안 · GRID WATCH 시안 · 기술 LAB 데모 23개 보기 · 우리 업체 예상 견적 보기