플레이북 ⑤ 프리미엄 웹디자인

목표: 전문가가 만든 것처럼 보이는(=신뢰 통과) 사이트. 반복 주장: “AI 슬롭의 원인은 도구가 아니라 지시다” · “빈 캔버스에서 시작하는 디자이너는 없다.”

1. 지시 파일 (페르소나 원문)

프로젝트마다 작업 지침 파일(CLAUDE.md류)에 한 문단:

You are a senior UI designer and front-end developer. You’re going to build premium, modern, elegant interfaces.

이 한 문단이 결과물을 가른다. 직원 채용 후 교육 문서(SOP)를 주는 것과 같은 원리.

소스	가져올 것	방법
좋아하는 실존 사이트(예: Stripe·Railway)	브랜드: 컬러·타이포·버튼·그라디언트	스크린샷 → 브랜드 킷 추출, 또는 “이 사이트 HTML/CSS를 분석해 클론하라”+스크린샷 첨부
같은 업종 시안(Dribbble 등)	페이지 구조: 섹션 순서·레이아웃	스크린샷 첨부 → “이 구조를 재현하라”

둘을 분리하는 이유: 소프트웨어 회사 사이트 구조는 서비스업 페이지 구조와 다르다. 일반 설명 프롬프트만 쓰면 “generic and average”가 나온다.

Tailwind CSS(저수준 스타일링) + shadcn/ui(아코디언·버튼 등 컴포넌트) — 프롬프트에 명시. 애니메이션은 GSAP(스크롤 진입) + Motion(호버). 폰트는 Google Fonts에서 타이틀용/본문용 2종 골라 이름만 전달.

배경(라디얼 그라디언트 + 블러 원형 / 노이즈·도트 텍스처 / 블롭 / 다크 오버레이 / 글래스) · 보더/섀도 규율(섀도 강할수록 떠 있는 느낌) · sticky+블러(frosted) 내비바. “미니멀한 사이트도 배경 하나로 질감과 캐릭터가 생긴다.”

Spline 3D: 커뮤니티 remix → 기존 UI 텍스트/버튼 삭제(텍스트 위 텍스트 금지) → code export → NPM 패키지 명시(안 하면 결과 엉망) → 경계는 그라디언트(색→투명) 페이드. 우하단 “Built with Spline” 무료 배지는 그라디언트로 가림 — “남의 회사 무료 홍보만큼 전환율 죽이는 것 없다.”
Three.js: 예제 코드 탭을 그대로 복붙해 전달.
AI 비디오: 프롬프트 생성까지 AI에 위임(“메가프롬프트를 만들어라”) → 생성 영상은 배경+다크 오버레이. “프리미엄하게 보이게 하라”는 직접 지시가 실제로 유효.
무게 기준: Spline ~5MB, 비디오 7.4MB급은 그대로 쓰면 속도 죽음 → 비디오는 1MB대로 압축, 5MB 초과 스크린샷은 압축 후 첨부.

수정은 항상 해당 섹션 스크린샷 첨부 + 자연어 지시(말로 그래픽 설명하는 것보다 효과적).
반응형: “desktop, tablet, mobile 최적화” 1프롬프트 → 디바이스 모드(iPhone SE 등)로 검수 → 스크린샷 반복 1~2회. 트래픽 ~70%가 모바일.
배포 전 시크릿 키 점검을 지시.