# Supanova Design Skill 심층 분석 보고서 **분석일:** 2026-04-02 **분석 대상:** https://github.com/uxjoseph/supanova-design-skill **분석자:** 아누 (개발실장) **원본 리포:** [taste-skill](https://github.com/Leonxlnx/taste-skill) by @lexnlin 포크 --- ## 1. 리포 구조 분석 ### 1.1 전체 파일/폴더 구조 ``` supanova-design-skill/ ├── README.md (98줄) - 프로젝트 설명, 사용법, 설정 가이드 ├── examples/ │ ├── floria-full.webp - 완성 랜딩페이지 전체 스크린샷 │ ├── floria-top.webp - 상단(Hero~Features) 스크린샷 │ └── floria-bottom.webp - 하단(Testimonials~Footer) 스크린샷 ├── taste-skill/ │ └── SKILL.md (213줄) - **핵심 메인 스킬** (디자인 엔진) ├── soft-skill/ │ └── SKILL.md (121줄) - 프리미엄 미학 강화 스킬 ├── redesign-skill/ │ └── SKILL.md (142줄) - 기존 페이지 리디자인 스킬 ├── output-skill/ │ └── SKILL.md (93줄) - 출력 완전성 강제 스킬 └── research/ ├── README.md (8줄) └── laziness/ ├── README.md (25줄) ├── root-causes/ │ ├── rlhf-and-compute.md (27줄) - RLHF 경제학적 원인 │ ├── training-data-bias.md (28줄) - 학습 데이터 편향 │ ├── cognitive-shortcuts.md (23줄) - 인지 지름길 │ └── output-limits.md (39줄) - 출력 제한 메커니즘 ├── remediation/ │ ├── prompt-engineering.md (52줄) - 프롬프트 기법 │ ├── parameter-tuning.md (44줄) - 파라미터 튜닝 │ ├── architectural-patterns.md (55줄) - 아키텍처 패턴 │ └── reference-prompts.md (79줄) - 레퍼런스 프롬프트 └── findings/ ├── empirical-results.md (58줄) - 실험 결과 └── references.md (20줄) - 참고 문헌 ``` ### 1.2 핵심 파일 vs 보조 파일 | 분류 | 파일 | 역할 | |------|------|------| | **핵심** | `taste-skill/SKILL.md` | 메인 디자인 엔진. 모든 디자인 규칙의 근간 | | **핵심** | `soft-skill/SKILL.md` | $150k 에이전시급 미학 표준 | | **핵심** | `output-skill/SKILL.md` | AI 출력 생략 방지 | | **보조** | `redesign-skill/SKILL.md` | 기존 페이지 업그레이드용 (진단+수정) | | **보조** | `research/laziness/` | LLM laziness 리서치 (output-skill의 이론적 배경) | | **참고** | `examples/` | 실제 출력 예시 (Floria 꽃가게 랜딩페이지) | ### 1.3 Git 히스토리 관찰 - 총 50+ 커밋. 원본 `taste-skill`에서 `supanova-design-skill`로 리브랜딩 - 초기: React/Next.js 기반 -> 현재: **Standalone HTML + Tailwind CDN** 으로 전환 - 반복적 하드닝: 이모지 제거, Tailwind v4 호환, RSC 크래시 방지, 모바일 최적화 - 추가된 스킬: brutalist-skill, minimalist-ui, stitch-skill (구글 Stitch용) 등도 있었으나 현재 main에는 4개만 유지 --- ## 2. 스킬 정의 분석 ### 2.1 4개 스킬 목적과 범위 #### taste-skill (Supanova Design Engine) -- 메인 - **목적:** 프리미엄 전환율 중심 한국어 랜딩페이지를 처음부터 생성 - **범위:** 레이아웃, 타이포그래피, 색상, 모션, 한국어 콘텐츠 품질 전체 - **트리거:** 사용자가 랜딩페이지 생성을 요청할 때 - **출력:** 단일 standalone HTML 파일 (Tailwind CDN, Pretendard 폰트, Iconify Solar) YAML 메타데이터: ```yaml name: supanova-design-engine description: Supanova Landing Page Design Engine. Generates premium, conversion-optimized landing pages using pure HTML + Tailwind CSS (CDN). Overrides default LLM biases toward generic templates. Enforces metric-based design rules, Korean typography standards, and hardware-accelerated motion for standalone HTML output. ``` #### soft-skill (Supanova Premium Aesthetic) - **목적:** $150k 에이전시 수준의 시각적 품질 달성 - **범위:** Double-Bezel 카드, 스프링 물리, 글래스 네비게이션, 한국어 타이포 표준 - **트리거:** taste-skill과 함께 사용하여 최고 품질 필요 시 #### output-skill (Supanova Full-Output) - **목적:** AI의 출력 생략/축약 행동 방지 - **범위:** 금지 패턴 정의, 완전 출력 강제, 토큰 한도 대응 전략 - **트리거:** 모든 랜딩페이지 생성 시 병행 사용 #### redesign-skill (Supanova Redesign Engine) - **목적:** 기존 랜딩페이지를 분석하고 점진적 업그레이드 - **범위:** 진단 체크리스트 + 수정 우선순위 + 업그레이드 테크닉 - **트리거:** 기존 HTML 랜딩페이지 개선 요청 시 ### 2.2 입력/출력 형식 - **입력:** 자연어 요청 (랜딩페이지 주제/목적 설명) - **출력:** `` ~ `` 완전한 단일 HTML 파일 - **기술 스택:** Tailwind CSS CDN + Pretendard 한국어 폰트 + Iconify Solar 아이콘 - **출력 언어:** 한국어 (콘텐츠, CTA, 메타태그 포함) ### 2.3 설정 파라미터 (taste-skill) 4개의 다이얼로 출력 스타일을 제어: | 파라미터 | 기본값 | 범위 | 설명 | |----------|--------|------|------| | DESIGN_VARIANCE | 8 | 1-10 | 레이아웃 실험성 (8=비대칭, 모던) | | MOTION_INTENSITY | 6 | 1-10 | 애니메이션 수준 | | VISUAL_DENSITY | 3 | 1-10 | 화면당 콘텐츠 밀도 (3=럭셔리) | | LANDING_PURPOSE | conversion | 5가지 | 페이지 목적 (conversion/brand/portfolio/saas/ecommerce) | **핵심 설계:** "Do not ask the user to edit this file. ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their prompts." -- 파일 수정 없이 대화에서 동적으로 조절 가능 --- ## 3. 디자인 원칙/철학 분석 ### 3.1 핵심 디자인 철학 **"Premium by Default"** -- 모든 픽셀이 의도적이어야 한다. 템플릿처럼 보이면 실패. 3가지 축: 1. **Korean-Native:** 한국인이 한국인을 위해 디자인한 느낌. 번역체 금지. 2. **Conversion-Focused:** 모든 섹션이 CTA로 시선을 유도. 시각 위계 = 전환 퍼널. 3. **Mobile-First:** 한국 웹 트래픽 70%+ 모바일. 모바일 우선, 데스크톱 확장. ### 3.2 타이포그래피 규칙 (상세) **한국어 전용 규칙:** - **필수 폰트:** Pretendard (NON-NEGOTIABLE). Noto Sans KR, Inter, Roboto, Arial 모두 **금지** - **영문 헤드라인:** Geist, Outfit, Cabinet Grotesk, Satoshi 중 선택 - **한국어 헤드라인:** `text-4xl md:text-5xl lg:text-6xl tracking-tight leading-tight font-bold` - **핵심 규칙:** 한국어는 `leading-tight` ~ `leading-snug` 사용 (NOT `leading-none`). 한글 자모가 라틴보다 수직 공간을 더 필요로 함 - **줄바꿈:** `word-break: keep-all` (`break-keep-all`) 필수 -- 한국어 음절 중간 줄바꿈 방지 - **본문:** `text-base md:text-lg text-gray-600 leading-relaxed max-w-[65ch]` - **숫자:** `font-variant-numeric: tabular-nums` 사용 - **Orphan 방지:** `text-wrap: balance` 헤딩에 적용 **금지 폰트 목록 (ANTI-SLOP):** Inter, Noto Sans KR, Roboto, Arial, Open Sans, Helvetica, Malgun Gothic ### 3.3 색상 규칙 - **최대 1개 악센트 컬러** per page. 채도 80% 미만. - **LILA BAN:** 보라/파랑 "AI" 그라디언트 절대 금지. 네온 글로우 금지. - **팔레트 철학:** 딥 뉴트럴 베이스 (Zinc-900, Slate-950, Stone-100) + ONE 하이콘트라스트 악센트 (Emerald, Electric Blue, Warm Amber, Deep Rose) - **다크 모드 기본:** 랜딩페이지는 다크 배경이 더 프리미엄 (`bg-zinc-950`, `bg-slate-950`) - **순수 검정(#000000) 금지:** `#0a0a0a`, Zinc-950, Slate-950 사용 - **그림자:** 배경 색조에 맞춘 틴티드 섀도우. `rgba(0,0,0,0.3)` 금지 3개의 Vibe Archetype (soft-skill에서 정의): 1. **Vantablack Luxe** (SaaS/AI/Tech): OLED 블랙 #050505, mesh gradient orbs, glass-effect cards 2. **Warm Editorial** (Lifestyle/Brand): 크림 #FDFBF7, sage/espresso 악센트, noise texture 3. **Clean Structural** (Consumer/Health): 순백/실버그레이, 대형 볼드 타이포, ultra-diffused shadow ### 3.4 레이아웃 규칙 **ANTI-CENTER BIAS:** DESIGN_VARIANCE > 4일 때 중앙 정렬 Hero 금지. 대안: - Split Screen (50/50 텍스트 + 비주얼) - 왼쪽 콘텐츠 / 오른쪽 에셋 - 비대칭 여백 + 극적 네거티브 스페이스 - Full-bleed 이미지 + 오버레이 텍스트 **섹션 다양성:** 인접 섹션은 반드시 **다른** 레이아웃 패턴 사용. 예시 흐름: Hero(split) -> Features(Bento Grid) -> Social Proof(Masonry) -> CTA(Full-bleed) **3-Column Equal Card 금지:** AI의 가장 일반적인 레이아웃 패턴을 원천 차단 **레이아웃 아키타입 (soft-skill):** 1. Asymmetrical Bento Grid 2. Z-Axis Cascade (물리적 카드 겹침 효과) 3. Editorial Split (대형 타이포 좌측, 인터랙티브 우측) ### 3.5 반응형 전략 - **Viewport Stability:** `h-screen` 금지, `min-h-[100dvh]` 사용 (iOS Safari 레이아웃 점프 방지) - **Grid 우선:** `grid grid-cols-1 md:grid-cols-3 gap-6` -- 복잡한 flexbox 퍼센트 계산 금지 - **컨테이너:** `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8` - **모바일 Collapse:** 모든 비대칭 레이아웃은 768px 이하에서 `w-full px-4 py-8` 단일 컬럼 - **CTA 터치 타겟:** 최소 48px 높이 (모바일 탭 표적) - **표준 브레이크포인트:** `sm:`, `md:`, `lg:`, `xl:` (Tailwind 기본) --- ## 4. 프롬프트 엔지니어링 분석 ### 4.1 프롬프트 구조 각 스킬은 YAML frontmatter + Markdown body 구조의 SKILL.md 파일: ```yaml --- name: supanova-design-engine description: [AI 디스커버리용 설명 - ~100토큰] --- # [스킬 제목] ## [섹션별 규칙] ``` 이 구조는 "Lazy-loaded Skills" 패턴 -- AI 에이전트가 초기화 시 YAML만 읽고, 관련성 판단 후 전체 로드. ### 4.2 품질 향상 핵심 기법 #### 기법 1: "AI Tells" 명시적 금지 (네거티브 프롬프팅) AI가 생성하는 "제네릭 냄새"를 구체적으로 열거하고 금지: - 3-Column Equal Card -> Bento Grid / Zig-Zag로 대체 - 중앙 정렬 Hero -> Split Screen / Full-Bleed로 대체 - Inter/Noto Sans KR -> Pretendard로 대체 - "혁신적인", "원활한" AI 클리셰 카피 -> 구체적 언어로 대체 - 김철수/이영희 -> 하윤서/박도현/이서진 현대적 이름으로 대체 - 50,000+ -> 47,200+ 유기적 숫자로 대체 **이 기법의 핵심:** "무엇을 하라"보다 **"무엇을 하지 마라"**를 더 구체적으로 지정. AI의 통계적 편향(가장 빈번한 패턴 출력)을 정확히 파악하고 그것만 금지. #### 기법 2: 결정론적 CSS 값 지정 (Deterministic Design) 추상적 지시 대신 **정확한 CSS 클래스** 명시: ``` "프리미엄하게 만들어" (X) "text-4xl md:text-5xl lg:text-6xl tracking-tight leading-tight font-bold" (O) "카드에 깊이감을 줘" (X) "bg-white/5, ring-1 ring-white/10, p-1.5, rounded-[2rem]" + "shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]" (O) ``` #### 기법 3: 선택 강제 (Creative Variance Engine) soft-skill에서 생성 전 **반드시** 3가지 카테고리에서 1개씩 선택하도록 강제: 1. Vibe & Texture Archetype (3가지 중 1개) 2. Layout Archetype (3가지 중 1개) 3. (암시적) Section Pattern 조합 "NEVER generate the same layout or aesthetic twice" -- 동일 출력 반복 방지 #### 기법 4: 체크리스트 기반 자기 검증 (Pre-flight Check) 출력 전 반드시 통과해야 하는 체크리스트: - taste-skill: 11개 항목 Final Pre-flight Check - soft-skill: 13개 항목 Pre-output Checklist - output-skill: 6개 항목 Quick Check #### 기법 5: 패턴 라이브러리 제공 (Section Library) 추상적 "좋은 디자인"이 아닌 구체적 패턴 카탈로그: - Hero: Split Hero, Full-Bleed Media, Minimal Statement, Interactive (Typewriter) - Features: Bento Grid, Zig-Zag, Icon Strip, Comparison Table - Social Proof: Logo Cloud (Marquee), Testimonial Masonry, Metrics Bar, Case Study Cards - CTA: Full-Bleed, Sticky Bottom, Inline - Footer: Minimal, Rich #### 기법 6: 출력 생략 방지 (output-skill) 금지 패턴을 코드/산문/구조 3가지 레벨로 세분화: - **코드:** ``, `// ...`, `` 등 - **산문:** "Let me know if you want me to continue", "For brevity..." 등 - **구조:** Hero만 출력하고 나머지 생략, 중간 섹션 스킵 등 토큰 한도 대응 전략: ``` [PAUSED -- X of Y sections complete. Send "continue" to resume from: next section name] ``` ### 4.3 제약 조건과 가이드라인 체계 **하드 제약 (절대 위반 불가):** - 금지 폰트 7개 - 금지 아이콘 세트 3개 (Lucide, FontAwesome, Material Icons) - 이모지 사용 금지 (ANTI-EMOJI POLICY [CRITICAL]) - Unsplash URL 금지 (깨짐) -> picsum.photos 사용 - `h-screen` 금지 -> `min-h-[100dvh]` - `linear` / `ease-in-out` 트랜지션 금지 - `window.addEventListener('scroll')` 금지 -> IntersectionObserver - `top`, `left`, `width`, `height` 애니메이션 금지 -> `transform`, `opacity`만 **소프트 제약 (기본값이지만 사용자 요청으로 변경 가능):** - DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY, LANDING_PURPOSE 4가지 다이얼 - 다크 모드 기본 (콘텐츠가 요구하면 라이트 모드 가능) ### 4.4 예시/레퍼런스 활용 - **examples/ 폴더:** Floria (꽃 스튜디오) 랜딩페이지의 완성 스크린샷 3장 제공 - 다크 모드, Vantablack Luxe 스타일 - Split Hero + 비대칭 카드 그리드 + Masonry Testimonials + Full-bleed CTA - 실제 달성 가능한 품질 수준의 시각적 레퍼런스 - **한국어 더미 데이터 세트:** 실제 사용할 이름, 회사명, 직함, 메트릭스 사전 정의 - 이름: 하윤서, 박도현, 이서진, 김하늘, 정민준, 오예린, 최시우, 한지원 - 회사: 스텔라랩스, 베리파이, 루미너스, 플로우캔버스, 넥스트비전, 브릿지웍스 - 수치: 47,200+, 4.87/5.0, 2.3초, 98.7%, 12,847개 --- ## 5. 기술 스택 분석 ### 5.1 사용 기술 | 기술 | 용도 | CDN URL | |------|------|---------| | Tailwind CSS (CDN) | 스타일링 | `https://cdn.tailwindcss.com` | | Pretendard | 한국어 폰트 | `https://cdn.jsdelivr.net/gh/orioncactus/pretendard/...` | | Iconify Solar | 아이콘 시스템 | `https://code.iconify.design/iconify-icon/2.3.0/...` | | Motion One | 애니메이션 (선택) | `https://unpkg.com/motion@latest/dist/motion.js` | | picsum.photos | 플레이스홀더 이미지 | `https://picsum.photos/seed/{name}/{w}/{h}` | | i.pravatar.cc | 아바타 이미지 | `https://i.pravatar.cc/150?u={name}` | **CDN 규칙:** 최대 5개 외부 스크립트. Tailwind + Iconify + Pretendard가 기본. Motion One은 MOTION_INTENSITY > 5일 때만. ### 5.2 스타일링 접근법 **"No Build Tools" 원칙:** 빌드 도구, 번들러, 프레임워크 없음. 브라우저에서 파일 열기만 하면 동작. tailwind.config 인라인: ```html ``` ### 5.3 애니메이션 시스템 **Supanova 모션 시그니처:** ```css transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); ``` 모든 인터랙티브 요소에 이 이징 적용. `linear`, `ease-in-out` 절대 금지. **스크롤 진입 애니메이션:** ```css @keyframes fadeInUp { from { opacity: 0; transform: translateY(2rem); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } ``` `IntersectionObserver`로 트리거. 형제 요소에 `animation-delay: calc(var(--index) * 80ms)` 스태거. **영구 마이크로 모션:** - 떠다니는 오브: `float 6s ease-in-out infinite` - 그라디언트 회전: `gradientRotate` infinite - 마키 로고: 무한 수평 스크롤 CSS 애니메이션 ### 5.4 컴포넌트 패턴 **Double-Bezel 카드 (soft-skill 핵심 패턴):** ``` 외부 쉘: bg-white/5, ring-1 ring-white/10, p-1.5, rounded-[2rem] 내부 코어: 별도 배경, shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)], rounded-[calc(2rem-0.375rem)] ``` -- "유리판이 알루미늄 트레이 안에 있는" 가공된 하드웨어 느낌 **플로팅 글래스 네비게이션:** ``` mt-4 mx-auto w-max rounded-full backdrop-blur-xl bg-white/10 border border-white/10 ``` -- 상단에 붙은 스티키 바가 아닌, 떠있는 알약 형태 **프리미엄 CTA 버튼:** ``` rounded-full px-8 py-4 화살표 아이콘: w-8 h-8 rounded-full bg-black/5 내부 원형 래퍼 hover:scale-[1.02] + 화살표 hover:translate-x-1 active:scale-[0.98] 다크모드 글로우: shadow-[0_0_30px_rgba(accent,0.2)] ``` ### 5.5 퍼포먼스 가드레일 - GPU 안전: `transform`과 `opacity`만 애니메이션 - `backdrop-blur`는 fixed/sticky 요소에만 사용 - Noise 오버레이: `position: fixed; pointer-events: none; z-[60]` - 이미지: `loading="lazy"` + `decoding="async"` (below-fold 전체) - Z-index 표준: nav(40), overlay(50), decorative(60) --- ## 6. LLM Laziness 리서치 분석 ### 6.1 리서치 구조 output-skill의 이론적 근거를 제공하는 독립 리서치 섹션. 4가지 근본 원인 + 4가지 대응책 + 실험 결과로 구성. ### 6.2 근본 원인 요약 1. **RLHF 경제학:** 토큰당 ~$0.0001 비용 -> 짧은 출력이 경제적 -> RLHF로 간결함 선호 학습 2. **학습 데이터 편향:** Stack Overflow, GitHub의 `# implement here`, `// ...` 패턴이 "올바른 응답 형식"으로 학습됨 3. **인지 지름길:** LazyBench 연구 -- 모델이 과제를 "쉽다"고 판단하면 깊이 있는 처리를 건너뜀. 계절 효과도 존재 (12월에 출력 짧아짐) 4. **출력 제한:** 입력 200만 토큰 vs 출력 8,000 토큰 비대칭. 소비자 앱의 추가 미들웨어 절삭 ### 6.3 대응 전략 요약 1. **파라미터 튜닝:** 낮은 temperature + 낮은 top-p로 결정론적 실행 2. **프롬프트 기법:** 심리적 패턴 매칭 ("$200 tip" -> +45% 품질), 명시적 구문 바인딩, XML 구조, 검증 루프 3. **아키텍처:** Lazy-loaded Skills (35% 컨텍스트 절약), MCP 통합, 청크 단위 작업 분할 4. **레퍼런스 프롬프트:** 즉시 사용 가능한 4가지 템플릿 (범용, 코드생성, 분석, 이어쓰기) ### 6.4 실험 데이터 (2025 연구) - 모든 프론티어 모델이 길이+하위 지시사항 동시 충족 실패 - 출력 절삭은 디코딩 실패가 아닌 **의도적 행동 선택** - 200턴 대화에서도 컨텍스트 유실은 제한적 -> 절삭의 주원인은 "노력 임계값 초과" - 심리적 프롬프트 자극 조합 시 최대 +115% 성능 향상 --- ## 7. 우리 시스템에 학습/적용 가능한 포인트 ### 7.1 아마테라스(디자인팀)가 배울 수 있는 점 #### (A) "AI Tells" 금지 목록 체계화 현재 우리 `frontend-design` 스킬에는 AI 출력의 제네릭 패턴을 명시적으로 금지하는 규칙이 부족하다. Supanova의 접근법처럼 **구체적인 CSS 클래스/패턴 수준**에서 금지 목록을 만들면 효과적: 적용 가능 항목: - 3-column equal card 금지 -> Bento Grid / Zig-Zag 대체 - 중앙 정렬 Hero 금지 (편차 높을 때) - 라운드 넘버 금지 (50,000+ -> 47,200+) - AI 클리셰 한국어 금지 ("혁신적인", "원활한", "차세대") #### (B) 결정론적 CSS 값 사전 정의 "프리미엄하게"라는 추상적 지시 대신, 정확한 Tailwind 클래스 매핑: - 한국어 헤드라인: `text-4xl md:text-5xl lg:text-6xl tracking-tight leading-tight` - 섹션 패딩: `py-24 md:py-32 lg:py-40` - 트랜지션: `cubic-bezier(0.16, 1, 0.3, 1)` - 컨테이너: `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8` #### (C) 한국어 타이포그래피 표준 - Pretendard 폰트 강제 (Noto Sans KR 대체) - `word-break: keep-all` 필수 적용 - `leading-tight` ~ `leading-snug` (한국어 수직 간격) - 존댓말 일관성 (합니다/하세요 통일) #### (D) Creative Variance Engine (선택 강제 메커니즘) 생성 전 Vibe/Layout Archetype을 반드시 1개씩 선택하게 함으로써 매번 다른 결과 도출. 우리 시스템에서도 디자인 요청 시 "스타일 선택" 단계를 강제할 수 있음. ### 7.2 hybrid-image, satori-cardnews 스킬에 적용 가능한 점 #### hybrid-image에 적용: - **색상 규칙:** 악센트 1개 제한, 채도 80% 미만, AI 퍼플 금지 - **타이포그래피:** Pretendard 폰트 사용, `leading-snug` 한국어 간격 - **한국어 콘텐츠 품질:** AI 클리셰 한국어 금지 목록 직접 적용 가능 - **유기적 숫자:** 47,200+ 패턴 (라운드 넘버 회피) #### satori-cardnews에 적용: - **Double-Bezel 카드 구조:** 외부 쉘 + 내부 코어 패턴으로 카드뉴스 프리미엄 느낌 - **이모지 금지 -> Iconify Solar 대체:** 이미 우리도 이모지 제한하고 있지만, 아이콘 세트 표준화 참고 - **Grain Texture 오버레이:** 노이즈 텍스처로 디지털 느낌 탈피 - **Eyebrow Tags:** 헤딩 전 마이크로 뱃지 패턴 (`rounded-full px-3 py-1 text-[11px] uppercase tracking-[0.15em]`) ### 7.3 디자인 QC (DQ 10항목)에 반영할 수 있는 점 Supanova의 Pre-flight Checklist를 DQ 항목에 통합 가능: 1. **폰트 검증:** 금지 폰트 사용 여부 체크 2. **색상 일관성:** 악센트 1개 이하, 채도 80% 미만, warm/cool 그레이 혼용 금지 3. **레이아웃 다양성:** 인접 섹션 동일 레이아웃 사용 금지 4. **한국어 품질:** AI 클리셰 용어 사용 여부, 존댓말 일관성, 번역체 여부 5. **모바일 대응:** `min-h-[100dvh]` 사용, CTA 48px+ 높이, 단일 컬럼 collapse 6. **인터랙션:** 호버/액티브 상태 존재 여부, 스크롤 애니메이션 유무 7. **퍼포먼스:** `transform`/`opacity`만 애니메이션, `backdrop-blur` 위치 적절성 8. **이미지:** `loading="lazy"`, `alt` 텍스트, 깨진 URL 없음 9. **코드 품질:** 시맨틱 HTML, 메타태그 완전성, `lang="ko"` 10. **플레이스홀더 없음:** ``, `// TODO` 등 미완성 패턴 없음 ### 7.4 노하우 파일에 추가할 디자인 원칙 1. **"Banned Patterns" 접근법:** "좋은 것을 추가"보다 "나쁜 것을 제거"가 AI 디자인 품질에 더 효과적 2. **결정론적 값 매핑:** 추상적 형용사 -> 구체적 CSS 클래스 1:1 매핑 3. **Supanova 모션 시그니처:** `cubic-bezier(0.16, 1, 0.3, 1)` -- 스프링 물리 기반 자연스러운 이징 4. **Double-Bezel 카드 패턴:** 외부 쉘 + 내부 코어로 "가공된 하드웨어" 질감 5. **한국어 더미 데이터 세트:** 현대적 한국 이름/회사명/직함/수치 사전 정의 6. **출력 생략 방지:** [PAUSED -- X of Y] 패턴으로 토큰 한도 대응 7. **iOS Safari `min-h-[100dvh]`:** `h-screen` 대신 사용 (레이아웃 점프 방지) --- ## 8. 한계점/주의점 ### 8.1 이 스킬의 약점 #### (A) Standalone HTML 제한 - **프레임워크 미지원:** React, Next.js, Vue 등 실제 프로덕션 환경과 분리됨 - **컴포넌트 재사용 불가:** 단일 HTML 파일이라 컴포넌트 분리/재사용 메커니즘 없음 - **Tailwind CDN 의존:** 프로덕션에서 Tailwind CDN은 권장되지 않음 (JIT 빌드 필요) - **상태 관리 없음:** 인터랙티브 기능 (폼 제출, 다이나믹 콘텐츠) 구현 한계 #### (B) 랜딩페이지 전용 - 웹앱, 대시보드, 관리자 페이지 등 다른 UI 유형에는 적합하지 않음 - 전환율 중심 디자인이라 정보 밀도가 높은 페이지에는 부적합 - VISUAL_DENSITY 기본값 3 (럭셔리)은 데이터 중심 UI와 충돌 #### (C) 실제 백엔드 연동 불가 - 폼 제출, API 호출, 인증 등 실제 기능 구현 범위 밖 - 프로토타이핑/데모 수준에서만 활용 가능 #### (D) 이미지 의존성 - picsum.photos / i.pravatar.cc는 실제 프로덕션 이미지 대체 불가 - 실제 브랜드 에셋이 필요한 프로젝트에서는 추가 작업 필수 #### (E) 다크 모드 편향 - 기본이 다크 모드라서 라이트 모드 우선인 프로젝트와 충돌 가능 - 한국 보험/금융 사이트는 전통적으로 라이트 모드 선호 (특히 중장년층 타겟) #### (F) 리서치의 한계 - 인용된 연구의 구체적 논문명/DOI 미기재 (EmotionPrompt, LazyBench 언급하나 정확한 출처 부족) - "$200 tip -> +45% 품질" 같은 수치가 특정 벤치마크 기준이며 범용 적용 시 효과 불명확 ### 8.2 우리 시스템에 맞지 않는 부분 #### (A) 기술 스택 불일치 - 우리는 React/Next.js + Supabase 기반 프로덕션 시스템 운영 - Standalone HTML은 프로토타이핑에만 활용 가능 - satori-cardnews는 이미 자체 렌더링 파이프라인 보유 (JSX -> PNG) #### (B) 출력 형식 차이 - 우리 hybrid-image는 배경 이미지(Gemini) + HTML 텍스트 오버레이 방식 - Supanova는 순수 HTML 페이지 생성 -- 이미지 생성과는 근본적으로 다른 용도 #### (C) 한국 보험/금융 특화 부재 - Supanova는 범용 SaaS/포트폴리오/이커머스 타겟 - 보험 FA, 보험료 비교, 상담 신청 등 우리 도메인 특화 패턴 없음 - 신뢰/권위 중심 디자인 (규제 산업)과 "Vantablack Luxe" 간 괴리 가능 #### (D) 이모지 정책 충돌 가능성 - Supanova의 "ANTI-EMOJI POLICY [CRITICAL]"은 우리 카드뉴스/SNS 콘텐츠와 충돌 - SNS 콘텐츠에서 이모지는 참여율 향상에 기여 -- 무조건 금지는 부적절 #### (E) 위임 체계와의 통합 - Supanova는 AI가 직접 코딩하는 것을 전제 - 우리 시스템은 아누 -> 팀 위임 구조이므로, 스킬을 팀 프롬프트에 통합하는 별도 작업 필요 --- ## 9. 종합 평가 ### 점수: 7.5/10 **강점 (9/10):** - AI 디자인 품질 향상을 위한 프롬프트 엔지니어링이 **현재 공개된 스킬 중 가장 체계적** - "금지 패턴" 접근법이 실전에서 매우 효과적 -- AI의 통계적 편향을 정확히 겨냥 - 한국어 타이포그래피 규칙이 실무적이고 구체적 (Pretendard, keep-all, leading-snug) - LLM laziness 리서치가 output-skill의 이론적 근거를 탄탄하게 뒷받침 **약점 (6/10):** - Standalone HTML 한정이라 실제 프로덕션 적용에 한계 - 랜딩페이지 전용이라 범용성 부족 - 리서치 인용의 정확성에 아쉬움 (구체적 논문 링크 부재) ### 우리에게의 핵심 가치 **즉시 적용 가능:** "AI Tells" 금지 목록, 한국어 타이포 규칙, 결정론적 CSS 값 매핑 **구조 참고:** Creative Variance Engine, Pre-flight Checklist, [PAUSED] 패턴 **리서치 참고:** LLM laziness 대응 전략 (output-skill에 이미 우리도 비슷한 규칙이 있으나, 이론적 프레임워크가 유용) --- *분석 완료: 2026-04-02* *클론 위치: /tmp/supanova-analysis*