CHIRO.
← Blog
웹사이트 제작2026년 5월 19일

첫 화면(히어로) 설계 — 브랜드 사이트와 전문성 사이트의 차이

히어로 영역의 카피, 비주얼, 정보량은 사이트 유형에 따라 정반대로 설계됩니다.

by 최정원

첫 7초가 다른 일을 한다

브랜드 사이트의 첫 7초는 "느낌"을 전달합니다. 전문성 사이트의 첫 7초는 "정체"를 전달합니다. 같은 7초가 다른 업무를 합니다.

브랜드 사이트 히어로는 풀스크린 영상·이미지, 한 줄 슬로건, CTA 1개로 끝냅니다. 정보를 일부러 줄여서 호기심을 만듭니다.

전문성 사이트 히어로는 정체성 문장, 실적 숫자, 핵심 서비스 3개를 동시에 노출합니다. 호기심이 아니라 안심을 만들어야 합니다.

카피 길이가 정반대다

브랜드 히어로 카피: "Move with the wind."(4단어). 의미보다 음감.

전문성 히어로 카피: "10년 경력, 250건 자문, 평균 응답 24시간 — 세무 전문 OOO."(20단어 이상). 단어마다 검증 정보가 들어갑니다.

문장이 길어진다고 "촌스럽다"가 아닙니다. 전문성에서는 정보 부재가 더 큰 위험입니다. 방문자가 회사명을 본 뒤 두 번째로 보는 것이 "이 회사가 뭘 하는가"입니다. 이 답이 없으면 5초 안에 이탈합니다.

비주얼의 역할도 다르다

브랜드 히어로 비주얼은 무드(mood)를 전달합니다. 모델 사진, 라이프스타일 영상, 추상 그래픽이 주로 쓰입니다.

전문성 히어로 비주얼은 증거(evidence)를 전달합니다. 대표 사진, 사무실 전경, 인증서, 수상 로고가 주로 쓰입니다. 스톡 이미지(특히 외국인 모델)는 신뢰를 깎습니다. 방문자는 "이 사람이 진짜 한국에서 일하는 사람인가"를 봅니다.

CTA도 다른 단어를 쓴다

브랜드 사이트 CTA: "Shop now", "Discover". 짧고 욕망 지향.

전문성 사이트 CTA: "무료 상담 예약 (24시간 내 회신)", "사례 자료 다운로드". 길고 안심 지향. CTA 안에 보장 문구를 넣으면 클릭률이 B2B 기준 평균 14% 올라갑니다.

흔한 오해 두 가지

오해 1 — "전문성 사이트도 영상 히어로가 있어야 트렌디해 보인다." 자동재생 영상은 LCP(Largest Contentful Paint)를 1.5~3초 늦춥니다. 첫 인상이 빈 화면이 되는 순간 신뢰는 사라집니다.

오해 2 — "브랜드 사이트도 실적 숫자를 넣어야 한다." 브랜드 사이트는 숫자가 아니라 정서적 단어로 일합니다. "100만 명이 선택"같은 문장은 오히려 브랜드 톤을 깎습니다.

자주 묻는 질문

히어로에 영상을 넣어야 하나요? 브랜드형이면 도움이 됩니다. 전문성형이면 자동재생 영상은 로딩 속도를 떨어뜨려 오히려 손해입니다. 대신 정적 이미지 + 실적 숫자 조합이 효율적입니다.

히어로에 정보를 다 넣으면 답답해 보이지 않나요? 밀도가 높아도 위계(크기·여백·색)가 잡혀 있으면 답답해 보이지 않습니다. 정보 밀도 비교 글에서 다룹니다.

히어로 디자인첫 화면 설계브랜드 히어로전문성 히어로홈페이지 첫 화면