첫 화면에서 한 가지 행동으로 · Hero + CTA

히어로는 첫 화면의 대표 영역, CTA는 행동 유도 버튼, 공지 배너는 짧은 소식을 알리는 띠

조회 0추천 0

직접 만든 예시

Hero section · CTA · Announcement banner: 히어로는 첫 화면의 대표 영역, CTA는 행동 유도 버튼, 공지 배너는 짧은 소식을 알리는 띠

[서비스] 첫 화면을 히어로 섹션으로 만들어줘. 핵심 효익 한 줄, 설명 두 줄, 주요 CTA 하나로 시선을 모아줘. 이벤트 공지는 별도 announcement banner에 넣고 닫을 수 있게 해줘.

빈칸을 내 상황에 맞게 채워 사용하세요.

입력과 결과 비교

설명용 예시

입력 홈페이지 배너를 예쁘게 만들어줘.

공지 띠 → 핵심 효익 → 설명 → 단일 시작 버튼으로 위계 구성

활용 방식을 보여주는 예시이며, 직접 실행한 결과가 아닙니다.

배너라는 말로 뭉뚱그리면 광고 이미지인지 대표 소개인지 혼동하기 쉽습니다. 각 영역의 목적과 행동을 나누면 첫 화면의 우선순위가 명확해집니다.

전문 용어를 활용해 mouseco가 작성한 문구입니다. 출처는 용어와 기법의 참고 문서입니다. 원출처 ↗

기존 가이드와 자세한 사용법 읽기

안녕하세요 mouseco 입니다. :)

Hero section · CTA · Announcement banner은 히어로는 첫 화면의 대표 영역, CTA는 행동 유도 버튼, 공지 배너는 짧은 소식을 알리는 띠입니다.

막연한 요청을 구체적인 문구로

기존 요청: 홈페이지 배너를 예쁘게 만들어줘.

[서비스] 첫 화면을 히어로 섹션으로 만들어줘. 핵심 효익 한 줄, 설명 두 줄, 주요 CTA 하나로 시선을 모아줘. 이벤트 공지는 별도 announcement banner에 넣고 닫을 수 있게 해줘.

공지 띠 → 핵심 효익 → 설명 → 단일 시작 버튼으로 위계 구성

예시는 위 기법을 보여주기 위해 직접 제작했습니다. 수치와 업무 상황은 가상이며 특정 모델의 성능 비교 결과가 아닙니다.

배너라는 말로 뭉뚱그리면 광고 이미지인지 대표 소개인지 혼동하기 쉽습니다. 각 영역의 목적과 행동을 나누면 첫 화면의 우선순위가 명확해집니다.

적용할 때 확인할 점: 공지 배너의 알림 역할은 Carbon 지침을 참고했습니다. 히어로의 문구와 배치는 직접 만든 예시입니다.