Premium SaaS Web

이 스킬은 베스트셀러 SaaS/AI/에이전시 템플릿이 고급스러워 보이게 만드는 요소를 인코딩합니다. 6개의 참조 사이트(OptimAI, Aigocy, Adon, Davies, Pastily, AI 이미지 생성 데모)를 CSS 수준에서 검사하고 실제 사용된 값을 측정하여 도출했습니다. 레시피는 추측이 아닌 실제 기술입니다.

파일 레이아웃. 작업에 필요한 것만 로드하세요:

directions/<name>/style.md: 시각적 방향 하나당 하나의 파일(토큰, 글꼴, 시그니처 조각, 해당 방향만 사용하는 기술). 선택한 것만 읽으세요.
shared/*.md: 모든 방향이 공통으로 사용하는 기술을 주제별로 분리한 파일. 구축 중인 섹션에 해당하는 파일을 읽으세요(3단계에서 매핑).

핵심 인사이트: 프리미엄 = 제어된 빛 + 절제 + 움직임

저렴한 페이지와 프리미엄 페이지는 종종 동일한 구성 요소(히어로, 로고, 기능, 가격, FAQ, CTA)를 사용합니다. 차이는 네 가지 마감 레이어에 있습니다:

빛 — 표면이 채워진 듯한 느낌이 아닌 조명을 받은 느낌이어야 합니다. 글로우는 흐릿한 모양으로 조각됩니다. 카드는 왼쪽 상단에 광택이 있습니다. 버튼은 내부 하이라이트와 내부 하단 가장자리가 있습니다. 테두리는 6–20% 불투명도의 가는 선(1px)입니다. 실제 빛은 멀어질수록 희미해지므로 어떤 것도 평평한 색상 블록이 되어서는 안 됩니다.
절제 — 하나의 강조 색상을 페이지의 ≤5%에만 사용합니다. 텍스트 계층 구조는 여러 회색이 아닌 한 가지 색상의 불투명도 (100 / 80 / 60 / 50%)에서 비롯됩니다. 최대 두 개의 글꼴(+ 라벨용 모노 글꼴 선택 가능). 의미를 전달하지 않는 데코레이션은 제로입니다.
긴장감 있는 타이포그래피 — 디스플레이 타입은 크고 단단히 자간을 조정(letter-spacing −2% ~ −7%)하며, line-height ≈ 1.0–1.2입니다. 헤드라인의 절반은 종종 흐리게(opacity .5 또는 더 밝은 그라데이션) 처리되어 눈이 먼저 강한 절반을 읽게 합니다.
무게감 있는 모션 — 부드러운 스크롤(Lenis), 단어별로 올라오는 헤드라인, 스크롤에 따라 채워지는 텍스트, 롤링 카운터, 멈추지 않는 마키, 쌓이는 카드. 모든 것은 이징 아웃(선형 없음), 바운스 없음, prefers-reduced-motion을 존중합니다.

출력물에 이러한 네 가지 레이어 없이 구성 요소만 있다면, 섹션이 아무리 많아도 무료 Bootstrap 테마처럼 보일 것입니다.

워크플로우

1. 브리핑을 읽고, 하나의 방향을 선택하세요

다음 표에서 방향을 선택한 다음, 해당 directions/<folder>/style.md(전체 토큰 세트 및 시그니처 기술)를 읽으세요. 다른 방향은 읽지 마세요.

방향 (폴더)	느낌	가장 적합한 대상	출처
Ember Dark (`ember-dark`)	진한 네이비-블랙, 조각된 오렌지/레드 또는 블루 글로우, 레인보우-보더 CTA, 모노 버튼 라벨	AI 도구, 개발자 도구, SaaS 앱	OptimAI
Tactile Light (`tactile-light`)	아연/오프-화이트, 광택의 스큐어모픽 버튼, 광택 카드, 하나의 핫 악센트(레드), 3D 렌더링이 있는 프레임 히어로	AI 에이전시, B2B SaaS, 컨설팅	Aigocy
Editorial Mono (`editorial-mono`)	#F0F0F0 위의 순수 #111, −7% 자간의 140px 그로테스크, 가는 선 그리드, 스크롤-필 텍스트, 그림자 없음	에이전시, 스튜디오, 프리미엄 서비스	Adon
Noir Spotlight (`noir-spotlight`)	블랙, 하나의 네온 악센트, 사진과 상호작용하는 거대한 단어, 셰이더/WebGL 배경, 쌓이는 프로젝트 카드	개인 브랜드, 포트폴리오, 크리에이티브 테크	Davies
Warm Playful (`warm-playful`)	따뜻한 오프-화이트 종이, 거의 검정 잉크, 음소거된 그린→골드, 28px 흰색 카드, 손글씨 노트, 가장자리를 벗어나는 장치, 사진 배경의 가격	데스크톱/메뉴-바 앱, 유틸리티, 인디 & 컨슈머 도구, 일회성 구매 소프트웨어	Pastily

사용자가 지정하지 않았고 SaaS/AI라면 기본값으로 Ember Dark를 선택하세요. 제품이 네이티브/데스크톱/모바일 유틸리티, 인디 또는 솔로 파운더 도구이거나 브리핑이 친근함, 접근성, 아늑함, "기업적이지 않음"을 언급하는 경우(SaaS라고 명시되지 않더라도) Warm Playful로 전환하세요. Ember Dark는 9달러 클립보드 앱을 엔터프라이즈 인프라처럼 보이게 할 수 있습니다. 방향을 혼합하면 페이지가 지저분해집니다. 다른 방향에서 기법 하나를 빌리는 것은 팔레트와 타입이 일관성을 유지한다면 괜찮습니다.

사용자에게 선택한 방향과 그 이유를 한 줄로 알려주어 조기에 수정할 수 있도록 하세요. 브랜드에 자체 색상이 없는 한(사용자가 색상을 지정하거나 제품이 이미 색상을 사용하는 경우) 방향의 악센트를 유지하세요. "아늑한" 또는 "황혼"과 같은 분위기 단어는 브랜드 색상이 아닙니다. 실제 브랜드 색상의 경우 directions/README.md의 "악센트 교체"를 참조하세요.

2. 페이지를 목록이 아닌 리듬으로 계획하세요

프리미엄 페이지는 밀도와 톤을 번갈아 사용합니다. 잘 작동하는 일반적인 SaaS 홈페이지:

히어로: 눈썹 배지("✦ AI 기반 에이전시"와 같은 알약 또는 "v1.4 출시"와 같은 실제 사실; 사용자가 실제 평가를 제공한 경우에만 아바타 스택 + 평점), 절반이 흐려진 2줄 헤드라인, 60% 불투명도의 1–2줄 서브카피, 기본 + 보조 CTA, 그리고 제품 자체(브라우저 프레임 목업 또는 대화형 프롬프트 상자)가 그라데이션 페이드로 다음 섹션으로 번짐.
로고 스트립: 그레이스케일 로고, 무한 마키, 마스킹된 가장자리.
Bento 기능 그리드: 5–7개의 크기가 다른 셀. 각 셀에는 스톡 아이콘이 아닌 HTML/CSS로 구축된 미니 UI 일러스트레이션(워크플로우 노드, 채팅 버블, 토글, 차트, 색상 칩)이 포함됩니다.
스크롤-필 성명서: 스크롤함에 따라 30% → 100%로 채워지는 하나의 큰 문장. 채우기는 엄격하게 줄 단위로 실행됩니다(블록당 하나의 스크러빙된 타임라인, 줄이 연속적으로 이어짐). 한 번에 여러 줄이 채워지지 않음. shared/typography.md 참조.
숫자: 롤링 카운터가 있는 3–4개의 통계; 장식용으로 하나의 거대한 흐려진 숫자.
작동 방식 / 탭 또는 쌓이는 카드.
사용후기: 사용자가 제공한 인용문만, 아바타 + 이름 + 역할, 수직 마키 카드일 수 있음. 인용문이 없으면 섹션을 생략하거나(또는 신뢰/개인정보 보호 밴드 또는 제작자의 짧은 메모로 대체)하세요. 가상의 리뷰, 평점 및 사용자 수는 가짜 사회적 증거입니다. 구매자를 오도하고 소유자가 실수로 배송할 수 있습니다.
가격: 3단계, 중간 단계가 악센트 테두리/글로우로 올라감, 월간/연간 토글.
FAQ 아코디언.
최종 CTA 페이지에서 가장 강한 글로우, 그 다음 큰 워드마크가 있는 조용한 푸터.

다크/라이트(또는 bg-1/bg-2) 섹션 배경을 번갈아 사용하여 리듬을 만듭니다. 섹션 패딩은 넉넉하게: 데스크톱에서 세로 120–176px.

3. 레시피로 구축하세요

레시피는 복사하여 바로 사용할 수 있는 CSS/HTML/JS입니다. 선택한 방향의 style.md에는 이미 시그니처 기술(예: Ember의 레인보우 테두리, Tactile의 촉각 버튼 및 광택 카드)이 포함되어 있습니다. 그 외의 모든 것에 대해, 구축 중인 것과 일치하는 공유 파일을 읽으세요:

구축 중…	읽을 파일
히어로 라이트, 글로우, 도트/그리드/노이즈 배경, 가는 선 그리드 및 컬럼 가이드	`shared/light.md`
헤드라인(좁은 자간, 흐려진 절반, 메탈릭 그라데이션), 스크롤-필 성명서(라인별 GSAP, 또는 색상 키워드가 있는 단어별)	`shared/typography.md`
히어로의 제품 목업(브라우저 프레임 또는 OS 크롬이 있는 데스크톱 앱 장치), 스크린샷 갤러리, 미니 UI가 포함된 bento 그리드	`shared/product-proof.md`
유리 네비게이션, 섹션 인식 알약 네비게이션, 눈썹 배지 및 아바타 스택, 손글씨 주석, 부드러운 흰색 카드, 카드 스포트라이트, 마키, 가격(3단계, 사진 배경의 단일 가격, 또는 일반 단일 가격 카드), FAQ, 푸터 워드마크	`shared/components.md`
아이콘이 있는 명명된 브랜드(통합, 로고 스트립, 오빗, "함께 작동")	`shared/logos.md`
GSAP + Lenis 보일러플레이트, 타이밍/이징 테이블, `gsap.matchMedia()` 축소 모션 패턴, 리빌, 카운터, 쌓이는 카드, CSS 전용 톤-시프팅 스토리 스택, 고정 UI-칩 월, 고정 스크롤, 호버, 주의사항, 네이티브 CSS 스크롤 기반 모션	`shared/motion.md`
셰이더/WebGL 배경, 입자 필드, 블룸(Three.js, CSS 폴백 및 모바일 게이트 포함)	`shared/webgl.md`

전체 랜딩 페이지는 일반적으로 모든 파일이 필요합니다. 단일 섹션 또는 작은 편집은 해당 행만 필요합니다. SplitText를 포함한 모든 GSAP 플러그인은 3.13부터 무료이므로 jsDelivr에서 로드하세요.

4. 기술 기본값

Tailwind CDN(또는 프로젝트의 기존 스택 — 있으면 따름)을 사용하는 단일 파일 HTML. 디자인 토큰은 :root의 CSS 사용자 정의 속성에 넣어 팔레트 교체가 한 번의 편집으로 가능하도록 하세요.
Google Fonts의 글꼴. 참조 사이트에서 입증된 페어링: Sora + Inter Tight + IBM Plex Mono (Ember), Urbanist (Tactile), "Inter Tight"/"Schibsted Grotesk"/"Familjen Grotesk" + DM Sans와 같은 그로테스크 (Editorial), Figtree/"Outfit" (Noir).
아이콘: 인라인 SVG(Lucide 스타일 1.5px 스트로크). 아이콘으로 이모지를 사용하지 마세요.
이미지: 이미지 생성이 가능하면 브랜드에 맞는 3D 렌더링/추상 객체를 생성하고, 그렇지 않으면 CSS/SVG(글로우, 미니 UI, 도트 글로브)로 시각적 요소를 구축하세요. 사람/초상화 사진에만 https://images.unsplash.com/... 사진을 사용하세요. 히어로에 시각적 앵커가 없는 페이지는 미완성으로 보입니다.
실제 브랜드 로고, 문자 자리 표시자는 절대 안 됨. 페이지에서 기존 회사, 제품 또는 SaaS(통합 칩, 로고 아크/스트립, "함께 작동" 밴드, 사용후기, 비교 테이블)를 언급하고 옆에 아이콘을 표시할 때는 해당 브랜드의 실제 로고를 사용하세요. 이니셜이 있는 컬러 사각형("F"는 Figma, "S"는 Slack)은 값싼 템플릿으로 읽히고 신뢰를 깨뜨립니다. 자세한 내용과 출처는 shared/logos.md에 있습니다. 실제 로고를 찾을 수 없으면 아이콘 없이 이름을 일반 텍스트로만 표시하세요. 가짜 아이콘은 없는 것보다 나쁩니다.
모바일: <768px에서 모든 것이 하나의 열로 축소됨. 디스플레이 타입은 clamp()로 크기 조정됨. 글로우 축소(큰 블러는 휴대폰에서 비용이 많이 듬). 터치에서 커서 효과 비활성화.

5. 전달 전 자체 검토

가능하면 브라우저에서 페이지를 열고 1440px 및 390px에서 스크린샷을 찍으세요. 다음 목록을 확인하세요. 이것이 "AI 생성"과 "베스트셀러"를 구분하는 요소입니다:

피해야 할 것 ("값싼 템플릿" 신호)

호버 시 움직이는 버튼. 엄격한 규칙, 예외 없음. 자기/커서 추종 버튼, :hover에서 버튼 또는 해당 라벨/아이콘에 translate/scale/rotate 사용, 미끄러져 나오는 화살표, 호버 시 들림 없음. 레이아웃은 커서 아래에서 정지 상태를 유지하므로 클릭 대상이 절대 움직이지 않음. 색상, 밝기, 글로우, 테두리 또는 그림자 변경으로만 호버를 표시하세요. (카드는 여전히 들릴 수 있음. 버튼 및 버튼으로 스타일링된 링크는 들릴 수 없음.)
모든 것에 보라색-파란색 그라데이션, 여러 경쟁 악센트 색상.
어두운 배경에 0 4px 6px rgba(0,0,0,.3) 같은 그림자 효과(그림자는 어두운 곳에서 잘 보이지 않음. 글로우와 테두리를 대신 사용).
3개의 아이콘 + 제목 + 텍스트로 구성된 동일한 카드 그리드로 모든 것을 중앙 정렬.
뒤에 흐릴 것이 없는 유리 모피즘.
가짜 브랜드 아이콘: Figma, Slack, GitHub 등을 대신하는 문자가 있는 컬러 둥근 사각형.
바운시/탄성 이징, >1초가 걸리는 페이드 인, 모든 요소에 동시에 적용되는 애니메이션.
본문 텍스트에 그라데이션 텍스트, 뷰포트당 하나 이상의 그라데이션 텍스트 구문.
스톡 "AI 두뇌" 이미지. 대신 제품 또는 추상 렌더링을 표시.
어두운 곳에서 본문 텍스트의 대비 부족: 본문 텍스트는 최소 ~70% 흰색으로 유지하여 글로우 아래에서도 읽기 쉽게 유지.

프리미엄 SaaS 웹 빌더