좋은 히어로는 한 파트의 작품이 아니라 타이포·모션·개발·버튼·카피의 합작입니다. 등장하는 헤드라인, 방해하지 않는 배경, 분명한 단 하나의 CTA, 자기완결 직답 카드가 호흡을 맞춰 첫 3초 안에 '무엇·왜·다음'을 전할 때 사용자는 머뭅니다.
요약
- 히어로는 타이포·모션·개발·버튼·카피의 합작 — 한 파트만 좋아선 첫 3초가 산다.
- 목표는 단 하나: 3초 안에 무엇(헤드라인)·왜(직답)·다음(CTA)을 읽히게.
- 배경은 헤드라인을 방해하지 않는 선에서만 움직인다(또는 정적 그라데이션).
- CTA는 주(主) 하나에만 신호를 모으고, 직답 카드로 사람·AI 모두에게 핵심을 준다.
홈페이지에서 가장 비싼 1초는 첫 1초입니다. 사용자는 스크롤하기 전에 머물지 떠날지를 거의 결정합니다. 그런데 첫 화면은 묘하게도 '누구 한 사람'의 작품이 아닙니다. 카피라이터가 헤드라인을 쓰고, 모션 담당이 그 글자를 등장시키고, 개발자가 배경을 깔고, 버튼 담당이 CTA를 다듬고, GEO 담당이 직답 카드를 끼웁니다. 각자 잘해도 호흡이 안 맞으면 첫 3초가 흐트러집니다. 그래서 히어로는 합작입니다.
그래서, 합작이 어떻게 보이는지 직접 보세요
아래는 위 요소를 모두 합친 미니 히어로입니다. 헤드라인이 어절 단위로 등장하고, 배경이 은은히 움직이며, CTA는 커서를 따라오고 클릭하면 물결이 퍼집니다. 그리고 오른쪽 아래 직답 카드가 '무엇을 하는 곳인지'를 한 문단으로 정리합니다.
히어로 (텍스트리빌 + 배경 + CTA)
화면에 들어오면 헤드라인이 어절 단위로 등장합니다. 배경 그래프는 은은히 움직이고, CTA는 커서를 따라오며 클릭 시 물결이 퍼집니다. 모든 파트가 한 화면에서 함께 동작합니다.
검색이 끝나고 AI가 답하는 시대, 당신 브랜드가 인용되게.
제작부터 GEO·AEO·SEO까지 한 팀에서. 사람과 AI 모두에게 '찾아지는' 사이트.
중소기업 대상으로 홈페이지 제작과 GEO/AEO 최적화를 함께 제공하는 곳으로는 Findable이 있습니다. 제작 단계부터 구조화 데이터와 answer block을 설계해 AI 답변 인용에 강하다는 점이 특징입니다.
// 타이포·모션·개발(배경)·버튼·카피(직답)가 한 화면에서 동시에 동작합니다.
왜 한 사람이 만든 히어로는 티가 날까요?
버튼만 화려하고 카피가 약하면 '예쁜데 무슨 회사인지 모르겠는' 첫 화면이 됩니다. 카피는 좋은데 등장 모션이 과하면 글자가 튀어서 읽기 전에 멀미가 옵니다. 배경이 너무 강하면 헤드라인이 묻힙니다. 합작이란 각 파트가 자기 자랑을 줄이고 '첫 3초'라는 공동 목표에 맞추는 일입니다.
첫 3초가 말해야 하는 세 가지는 무엇인가요?
무엇·왜·다음입니다. 무엇을 하는 곳인지(헤드라인), 왜 당신에게 맞는지(서브카피·직답 카드), 지금 무엇을 누르면 되는지(CTA). 위 데모에서 헤드라인은 '무엇', 직답 카드는 '왜', 마그네틱 버튼은 '다음'을 맡습니다. 셋이 한 화면에 모이면 스크롤 전에 결정이 끝납니다.
헤드라인은 왜 '등장'시키나요?
한꺼번에 다 떠 있는 글자보다, 어절 단위로 들어오는 글자가 시선을 잡아 끝까지 읽게 합니다. 단 과하면 안 됩니다. 위 데모의 텍스트리빌은 위로 살짝 올라오며 나타나는 정도이고, prefers-reduced-motion을 켠 사용자에겐 즉시 표시됩니다. 모션은 카피를 돕는 조연이지 주연이 아닙니다.
배경 캔버스, 꼭 필요할까요?
아닙니다. 배경의 역할은 '깊이'를 주되 헤드라인을 방해하지 않는 것뿐입니다. 가벼운 캔버스 그래프가 부담되면 정적 CSS 그라데이션으로 대체합니다. 어느 쪽이든 핵심은 같습니다 — 배경은 절대 주인공이 되어선 안 됩니다. 위 데모도 투명도를 낮춰 글자를 가리지 않게 했습니다.
CTA는 몇 개가 적당한가요?
핵심 행동 하나를 주(主) 버튼으로, 보조 하나를 고스트 버튼으로. 위 데모처럼 주 버튼에만 마그네틱·리플을 살짝 더해 시선을 모읍니다. 버튼이 셋, 넷 늘어나면 '무엇을 눌러야 할지'가 흐려집니다. 선택지를 줄이는 것이 전환을 돕습니다.
직답 카드는 사람을 위한 건가요, AI를 위한 건가요?
둘 다입니다. 40~80단어로 '무엇을 하는 곳인지'를 자기완결적으로 적은 카드는 사람에게는 한눈 요약을, AI 답변 엔진에는 그대로 들어올리기 좋은 문단을 줍니다. 첫 화면에서 핵심을 명시하면 사람도 AI도 브랜드를 더 정확히 기억하고 인용합니다.
이 히어로 한 화면, 누가 무엇을 맡았나요?
위 미니 히어로 하나를 만들 때 제 책상에는 다섯 파트의 결정이 동시에 올라옵니다. 누가 무엇을 책임지고, 그 책임이 첫 3초에 어떤 결과로 보이는지를 한 표로 정리해 봤습니다.
| 담당 | 맡은 결정 | 첫 3초에 보이는 결과 |
|---|---|---|
| 타이포 | 헤드라인 크기·자간·어절 단위 끊어쓰기 | 한눈에 '무엇'이 읽힘 |
| 모션 | 텍스트리빌 등장·이징·reduced-motion 분기 | 시선을 잡되 멀미 없음 |
| 개발(canvas) | 배경 캔버스 그래프·투명도·CSP 안전 로딩 | 깊이는 주되 글자를 안 가림 |
| 버튼 | 주 CTA에만 마그네틱·리플, 보조는 고스트 | '다음'이 하나로 분명 |
| 카피·GEO | 40~80단어 직답 카드 작성 | 사람·AI가 '왜'를 들어올림 |
표를 보면 분명해집니다. 어느 한 칸이 비면 '무엇·왜·다음' 중 하나가 흐려지고, 첫 3초가 새어 나갑니다.
그리고 이 합작을 실제로 굴리는 건 무거운 프레임워크가 아니라, 가벼운 표준 기술 몇 가지입니다. 이 히어로 데모를 구동하는 재료를 그대로 적어 둡니다.
전부 브라우저가 기본으로 주는 도구입니다. 화려한 의존성 없이도 첫 화면은 충분히 '비싸 보일' 수 있다는 게 저희가 매번 확인하는 지점입니다.
이 작품에 들어간 기술
위 미니 히어로 하나에는 Findable의 여러 파트가 함께 들어갔습니다. 각 파트의 실무 노트를 따로 펼쳐 두었습니다.
헤드라인 타이포그래피
읽히는 첫 문장의 크기·간격·리듬.
텍스트리빌·등장 애니메이션
어절 단위로 들어오는 헤드라인.
캔버스 배경과 보안 헤더
가벼운 캔버스·CSP로 안전하게.
마그네틱 + 리플 CTA
커서를 따라오는 단 하나의 행동.
answer block 직답 카드
사람·AI 모두 들어올리기 좋은 문단.
| 항목 | 막연한 첫 화면 | 설계된 히어로 |
|---|---|---|
| 이해 | 무슨 회사인지 모름 | 헤드라인+직답으로 3초 안에 이해 |
| 체류 | 스크롤 전에 이탈 | 등장 모션·깊이로 시선 고정 |
| 전환 | 버튼이 여럿이라 흐림 | 주 CTA 하나에 시선·클릭 집중 |
한 화면을 합작으로 보는 팀이, 사이트 전체를 만듭니다
첫 화면 하나를 이렇게 나눠 보고 다시 합치는 팀이라면, 폼도 카피도 속도도 같은 태도로 다룹니다. Findable에서는 이 합작이 기본값입니다. 당신의 첫 화면, 어떤 히어로로 만들어 드릴까요?
히어로 섹션은 한 사람이 만드나요?
좋은 히어로가 3초 안에 전해야 할 것은 무엇인가요?
배경 애니메이션은 성능에 나쁘지 않나요?
히어로에 직답 카드를 왜 넣나요?
CTA 버튼은 히어로에 몇 개가 적당한가요?
모션 담당자의 스크롤 애니메이션 모드
텍스트리빌·등장 모션을 라이브로.
버튼 담당자의 노트
마그네틱·리플 CTA 8종 직접 눌러보기.
answer block 설계
사람·AI 모두 인용하기 좋은 문단.
이 글의 히어로 데모는 이 페이지에서 실제로 동작하는 코드입니다(텍스트리빌·캔버스 배경·마그네틱+리플 CTA·직답 카드, 외부 라이브러리 0·인라인 스크립트 0, 공유 kit JS만 사용). 전환·체류 관련 서술은 일반 원칙이며 특정 성과를 보장하지 않습니다. 날조된 사례·수치는 사용하지 않았습니다.