한 줄 요약
요즘 가장 자주 보는 AI 제품 랜딩의 골격을 한 페이지에 다크 톤, aurora 배경, hero 카피의 그라데이션 강조, 라이브 rewrite 데모, stats 밴드, CTA.
이럴 때 필요해요
AIdev toolcreative SaaS의 랜딩은 톤이 비슷합니다 어두운 배경 + 발광하는 그라데이션 + 제품이 실제로 무엇을 해주는지 보여주는 라이브 영역. 이 골격을 한 번 익혀두면, 카피와 데모 한 칸만 바꿔서 비슷한 톤의 랜딩을 빠르게 만들 수 있어요.
어떻게 동작하나
1. 배경: violet/fuchsia 두 색의 큰 blur 원을 천천히 움직이는 keyframe(aurorablob). 그 위에 점 도트 패턴을 깔아 깊이를 만듭니다.
2. hero 헤드라인의 핵심 단어만 background-clip:text 그라데이션으로 강조 정적이지만 시선을 잡아요.
3. rewrite 데모는 타입라이터 훅으로 "AI가 지금 답을 쓰는 중"을 시각화. 캐럿 깜빡임은 별도 keyframe.
4. statsCTA는 카드 위에 살짝 흐릿한 보더(border-white/10) + 반투명 배경으로 floating 느낌.
놓치기 쉬운 것
- 다크 배경 + 그라데이션은 모니터마다 채도 차이가 크게 나타납니다. blur 강도를 너무 약하게 두면 라인이 보이고 광원처럼 안 느껴집니다.
- 모바일에서 hero 헤드라인의 그라데이션 단어가 줄바꿈되면 그라데이션이 어색하게 끊깁니다 inline-block이나 줄바꿈 방지로 한 단어 단위 유지.
- 라이브 데모를 무한 루프로 두면 산만합니다. 사용자가 "재생" 버튼을 누르거나 화면 진입 시 한 번만 트리거하는 게 좋아요.
이런 곳에 써요
- AIdev toolcreative SaaS 메인 랜딩
- 새 기능 발표용 microsite
- 베타waitlist 페이지