히어로 섹션Hero Section

업데이트 2026.10.31 · Qshop Growth Lab

한 줄 정의

히어로 섹션은 방문자가 홈페이지에 들어왔을 때 가장 먼저 보는 맨 위 영역으로, 큰 제목 · 짧은 설명 · 대표 이미지 · 행동 버튼을 담아 이 사이트가 무엇을 하는 곳인지 알리는 섹션이에요.

쉽게 말하면

방문자가 홈페이지에 들어와 스크롤을 내리기 전에 보는 첫 화면이 히어로 섹션이에요. 가게로 치면 길을 걷다 보이는 쇼윈도와 비슷해요. 방문자는 이 영역을 보고 여기가 자기가 찾던 곳인지 판단하고, 아니라고 느끼면 아래 내용을 보지 않고 나갈 수 있어요. 그래서 히어로 섹션에는 사이트의 핵심을 한눈에 알 수 있는 내용을 담아요.

무엇을 담나요

큰 제목: 무엇을 하는 곳인지, 누구를 위한 곳인지 한 문장으로 말해요. '최고의 서비스'보다 '강남역 1분 거리 1:1 필라테스'처럼 구체적인 문장이 방문자에게 더 많은 정보를 줘요
짧은 설명: 제목에 다 담지 못한 내용을 한두 줄로 보태요
대표 이미지나 영상: 상품이나 공간을 말 대신 직접 보여 줘요
CTA 버튼: '예약하기'처럼 방문자가 바로 할 수 있는 행동 하나를 놓아요

첫 화면에 보이는 범위는 기기마다 달라요. 휴대폰 화면은 컴퓨터 화면보다 좁고 짧아서, 컴퓨터에서는 첫 화면에 보이던 버튼이 휴대폰에서는 스크롤을 내려야 보일 수 있어요. 히어로 섹션을 만든 뒤에는 휴대폰 화면으로도 확인해 보세요.

큐샵에서는

클래식 에디터와 스튜디오 에디터 모두 섹션 템플릿이 있어서, 히어로 섹션으로 자주 쓰는 구성을 골라 바로 적용할 수 있어요. 섹션 템플릿이 아닌 사이트 템플릿에서도 히어로 섹션을 어떻게 꾸몄는지 예시를 참고할 수 있어요.

헷갈리는 말

헷갈리는 말	뜻	히어로 섹션과 다른 점
랜딩 페이지	광고나 링크를 누른 사람이 처음 도착하도록 만든 페이지	랜딩 페이지는 페이지 한 장 전체이고, 히어로 섹션은 페이지 맨 위의 한 영역이에요
배너	공지나 광고를 알리는 띠 또는 그림 영역	배너는 페이지 어디에나 놓일 수 있고 이벤트처럼 바뀌는 소식을 알려요. 히어로 섹션은 맨 위에서 사이트 자체를 소개해요