coastdigitalgroup/coastai-skills

히어로 섹션 최적화

목적

히어로 섹션 최적화 스킬은 웹페이지에서 가장 중요한 부분인 '접히는 부분 위(above the fold)' 콘텐츠를 개선하기 위한 체계적인 프레임워크를 제공합니다. 이 스킬은 사용자 의도와 메시지를 일치시키고, 인지적 마찰을 줄이며, 명확한 행동 경로를 보장하는 데 초점을 맞춥니다. 헤드라인, 서브헤드라인, 시각적 자산, 클릭 유도 문구(CTA)를 최적화함으로써 전환율 및 세션 시간과 같은 측정 가능한 결과를 직접적으로 개선합니다.

사용 사례

• 유료 광고 캠페인(PPC)을 위한 랜딩 페이지 최적화
• 이탈률이 높은 홈페이지 개선
• 명확성이 중요한 신제품 또는 서비스 출시
• SaaS 랜딩 페이지를 개선하여 무료 체험 가입자 수 증가

사용하지 말아야 할 경우

• 깊은 퍼널 페이지: '히어로' 패턴이 적용되지 않는 체크아웃 페이지, 문서 페이지, 계정 설정 페이지에는 사용하지 마세요.
• 순수 정보 전달/장문 콘텐츠: 주요 목표가 기사 읽기(예: 블로그 게시물)인 경우, 표준 히어로 섹션은 오히려 방해가 될 수 있습니다.
• 브랜드 인지도 전용: 사용자가 취할 특정 행동이 없는 경우(성장 지향 사이트에서는 드묾), 전환 중심의 히어로는 적절하지 않을 수 있습니다.

입력

1. 타겟 고객: 이 페이지는 누구를 위한 것인가요? (예: "간편한 회계 소프트웨어를 찾는 소기업 소유주")
2. 주 목표/CTA: 사용자가 단 하나의 행동을 취하게 하려면 무엇인가요? (예: "무료 체험 가입하기")
3. 현재 히어로 데이터(가능한 경우): 이탈률, CTA 클릭률(CTR), 히트맵
4. 핵심 가치 제안: 제품/서비스의 주요 이점은 무엇인가요?
5. 현재 자산: 기존 헤드라인, 이미지, 카피

출력

1. 히어로 감사 보고서: 현재 마찰 지점과 놓친 기회 식별
2. 최적화된 히어로 카피: 새로운 헤드라인(H1), 서브헤드라인, CTA 텍스트
3. 시각적 권장 사항: 메시지를 지원하는 이미지/비디오 선택 가이드
4. 레이아웃 와이어프레임/가이드: 정보 계층 구조 개선을 위한 구조적 변경

워크플로

1. 현재 히어로 감사

'5초 테스트'를 수행하세요. 다음이 명확한가요?

• 서비스/제품이 무엇인지?
• 누구를 위한 것인지?
• 사용자가 다음에 무엇을 해야 하는지?
• 주요 이점이 무엇인지?

2. 가치 제안 정의

핵심 제공 사항을 사용자를 위한 '나에게 무슨 이익이 있나?'(WIIFM) 문장으로 요약하세요. 다음 공식을 사용하세요: 타겟 고객 + 문제 + 해결책 + 독특한 이점

3. 최적화된 카피 초안 작성

• 헤드라인(H1): 영리함보다 명확함이 우선이어야 합니다. 제품 사용 결과 또는 주요 이점을 명시하세요.
• 서브헤드라인: 맥락을 제공하고, 고충을 다루거나, 일반적인 이의를 처리하세요.
• CTA: 행동 지향적이고 이점 중심의 언어를 사용하세요(예: "제출" 대신 "무료 체험 시작하기").

4. 시각적 계층 구조 최적화

• CTA가 시각적으로 가장 두드러진 요소가 되도록 하세요.
• 제품이 사용되는 모습이나 사용 결과(사회적 증거 또는 포부)를 보여주는 이미지를 사용하세요.
• 텍스트와 배경 사이의 대비를 높게 유지하세요.

5. 의사 결정 규칙 검토

새로운 디자인이 아래 정의된 성장 휴리스틱을 따르는지 확인하세요.

의사 결정 규칙

• 하나의 목표: 모든 히어로 섹션은 정확히 하나의 기본 CTA를 가져야 합니다. 보조 CTA(예: "더 알아보기")는 시각적으로 덜 눈에 띄어야 합니다.
• 명확함 > 창의성: 헤드라인이 '영리'하지만 5초 안에 제품이 무엇인지 설명하지 못한다면 폐기하세요.
• 접히는 부분 위: 헤드라인, 서브헤드라인, 기본 CTA가 스크롤 없이 표준 모바일 및 데스크톱 뷰포트에서 보여야 합니다.
• 사회적 증거: 공간이 허락한다면 CTA 근처에 작은 '신뢰 신호'(예: "1만 명 이상의 사용자가 함께함" 또는 5성 평점)를 포함하세요.

제약 사항

• 진실된 주장: 가치 제안은 제품이나 서비스가 실제로 제공하는 것을 정확히 반영해야 합니다. 과장된 약속은 초기 인상 후 이탈률을 증가시킵니다.
• 브랜드 일관성: 시각적 스타일, 어조, 메시지는 더 넓은 브랜드 아이덴티티와 일관성을 유지해야 합니다.
• 접히는 부분 위 우선 순위: 기본 CTA는 가장 일반적인 뷰포트 크기에서 스크롤 없이 보여야 합니다.

비목표

• 전체적인 브랜드 메시징 전략 또는 제품 포지셔닝 재작성
• 사진, 일러스트레이션, 비디오와 같은 새로운 시각적 자산 의뢰 또는 제작
• 히어로에서 약속한 내용을 제공하기 위해 제품 자체 개선

일반적인 실패 패턴

• '모호한 헤드라인': '미래로의 환영' 또는 '우리가 더 잘합니다'와 같이 제품을 설명하지 않는 헤드라인
• CTA 매몰: CTA를 접히는 부분 아래에 배치하거나 배경과 혼합되게 만드는 경우
• 이미지 괴리: 가치 제안과 관련 없는 일반적인 스톡 사진 사용
• 정보 과부하: 주요 이점에 집중하는 대신 히어로 섹션에서 모든 기능을 설명하려는 경우

검증 기준

• 5초 테스트: 최적화된 히어로를 누군가에게 5초 동안 보여주고 사이트가 무엇에 관한 것인지, 무엇을 해야 하는지 물어보세요.
• A/B 테스트: 최적화된 버전을 원본과 비교하여 CTR과 이탈률의 변화를 측정하세요.
• 스크롤 맵핑: Hotjar와 같은 도구를 사용하여 사용자가 이탈하기 전에 CTA를 보고 있는지 확인하세요.
• 명확성 점수: 가치 제안이 얼마나 빨리 이해되는지를 기준으로 히어로를 1-10점 척도로 평가하세요.