글래스모피즘 랜딩 스킬
Tailwind 유틸리티 클래스로 구축된 단일 파일 글래스모피즘 스타일의 랜딩 페이지를 생성합니다. 전체적인 외관은 하나의 규칙에 기반합니다: 블러는 뒤에 화려한 색상이 있을 때만 보입니다 — 따라서 모든 유리 창은 평평한 흰색 위가 아닌 그라데이션 필드 위에 떠 있습니다.
유리창 레시피
모든 표면에 적용되는 공통 유리창 레시피:
backdrop-blur-xl bg-white/10 border border-white/20 shadow-2xl rounded-2xl
레이어링 규칙:
- 페이지 배경은 생생한 그라데이션(두 가지 또는 세 가지 색상)입니다. 창은 그 위에 있는 유일한 반투명 레이어입니다.
- 하나의 악센트 색상이 그라데이션과 주요 동작을 주도하며, 나머지는 중립을 유지합니다.
- 유리 위의 텍스트는 제목의 경우 90-100% 불투명도, 본문의 경우 60-70% 불투명도로 흰색을 사용합니다. 밝은 유리창 위에 대비가 낮은 회색을 절대 배치하지 마십시오.
- 모든 창에 1px
border-white/20테두리를 추가하십시오. 이것이 유리가 흐릿한 사각형 대신 물리적인 시트처럼 보이게 만듭니다. - 모서리는 넉넉하게 둥글게 처리하십시오(
rounded-2xl/rounded-3xl). 유리는 부드럽고 날카롭지 않게 읽혀야 합니다.
색상 변형
아래 네 가지 변형을 선택 가능한 세트로 제공하십시오. 예시에서는 그라데이션 필드와 악센트를 실시간으로 교체하는 테마 칩 행으로 노출됩니다.
| 변형 | 그라데이션 필드 | 악센트 |
|---|---|---|
| aurora | 보라 → 핑크 → 앰버 | #7C3AED |
| ocean | 하늘 → 시안 → 인디고 | #0EA5E9 |
| ember | 로즈 → 오렌지 → 옐로우 | #F43F5E |
| forest | 에메랄드 → 틸 → 라임 | #10B981 |
워크플로우
- 활성 DESIGN.md를 읽으십시오 (위에 주입됨). 색상과 타입을 정의하는 경우 해당 토큰을 텍스트와 주요 동작에 사용하고, 유리 레시피와 그라데이션은 이 스타일 자체의 기여입니다.
- 브리프에서 제품명과 약속을 명명하십시오. 실제 카피만 사용하십시오.
- 레이아웃: 접착성 유리 내비게이션, 그라데이션 위에 H1 + 문단 + CTA가 있는 히어로, 테마 변형 행, 3열 유리 기능 카드 그리드, 유리 사용자 평가 패널 하나, 마무리 CTA.
- 장인 정신 유지: H1 하나; 주요 CTA는 악센트 사용; 유리 위 본문 텍스트는 >= 4.5:1 유지; 반투명 표면에서 포커스 링이 보여야 함; 768px 미만에서 레이아웃은 단일 열로 축소.
- 자체 포함된
index.html하나를 출력하십시오. 프로토타입용으로 Tailwind는 Play CDN을 통해 로드되며, 프로덕션 출력은 대신 Tailwind를 컴파일해야 합니다.
안티패턴
- 평평하고 거의 흰색에 가까운 배경 위의 유리창 (블러가 사라짐).
- 한 화면에 두 개 이상의 악센트 색상.
- 텍스트를 흐리게 하거나, 유리 위에 유리를 계속 쌓아 대비가 사라질 때까지 반복.
- 날카로운 직각 모서리의 프로스티드 패널.