01핵심 개요
- Nate Herk는 직전 영상에서 "디자인 킹"이라 불렀던 Fable 5.1을 뒤집고 Astra를 새 1위로 지목했다.
- Glido, Perk Form 등 실제 사례에서 3D·다이나믹·몰입형 히어로 섹션을 과하지 않게 구현했다.
- 모든 예시가 15회 이상 반복한 Fable 결과와 달리 단 1회 프롬프트(one-shot) 결과물이다.
- AIS Live 행사의 152GB 영상 폴더를 링크만 주고 35분 만에 1분 하이라이트 릴을 완성했다.
- Hyperframes로 음악과 3D를 동기화한 모션그래픽을 프롬프트 2번, 20~30분 만에 제작했다.
02핵심 주장 / 논점 구조
- "새로운 AI 디자인 킹이 나왔고 그 격차는 압도적이다" — 영상 서두의 핵심 선언.
- 레이어링(layering)이 몰입감의 핵심: 텍스트-배경 이미지-오브젝트가 서로 다른 깊이의 레이어로 분리돼야 "그럴듯한" 느낌이 난다.
- AI 슬롭(AI slop)은 두 가지로 정의된다: ① 뻔한 버튼·폰트·그라디언트 반복, ② 타겟 고객과 안 맞는 톤(예: 70대 의약품 사이트에 3D 스크롤 적용).
- 슬롭을 피하는 결정적 변수는 "영감(inspiration)"이며, 레퍼런스 사이트/컴포넌트를 Astra에 함께 제공하는 것이 브랜드 적합도를 좌우한다.
- "Cost doesn't justify price. Price justifies cost." — AIS Live 하이라이트 릴 속 인용으로, 저자가 가치 판단 기준으로 재인용.
03Astra 워크플로우: 스킬 + 레퍼런스 + 반복
- Scroll Craft 스킬: 저자의 무료 스쿨 커뮤니티에서 배포하는 커스텀 스킬로, 레이어링·스크롤 인터랙션·타이포그래피·간격(spacing)까지 통합적으로 이해하도록 설계됨. 계속 업데이트 중이라고 언급.
- 레퍼런스 소싱 3종 세트:
- godly.design — 전체 사이트 및 히어로 섹션·CTA·푸터 등 개별 컴포넌트 탐색 - 21st.dev — 버튼, 폼, AI 챗 UI 등 코드 블록 단위 컴포넌트 - awwwards.com — 업종별(전자상거래·레스토랑·호텔·패션 등) 수상작 카테고리 탐색
- iterative 워크플로우: 브랜드 가이드라인과 카피를 주고 → Scroll Craft 스킬 적용 → 스크롤하며 "이 부분 이렇게 바꿔줘"를 반복 → 컴포넌트를 21st.dev 등에서 가져와 교체 지시.
- 저자는 이 과정을 "그냥 브랜드 가이드라인과 카피를 주고 Astra가 알아서 하게 둔 다음, 스크롤하면서 고치라고 말하면 끝"이라고 요약.
043P 프레임워크: Pain, Person, Promise
| 요소 | 설명 | 예시 대비 |
|---|---|---|
| Pain (고통) | 타겟 고객이 겪는 문제/니즈 | 의약품 구매 vs 헤드폰 구매 |
| Person (인물) | 방문자의 연령·성향·기대치 | 70대 남성 vs 10대 남성 |
| Promise (약속) | 브랜드가 전달하려는 가치 | 신뢰/안정감 vs 힙함/역동성 |
- 저자는 댓글에서 나온 "이런 화려한 사이트가 전환율이 낮지 않냐"는 지적에 "맞을 수도 있지만 3P에 달렸다"고 반박.
- 같은 애니메이션·3D 기법도 럭셔리 시계 브랜드에는 "프리미엄함"을, 헤드폰 브랜드에는 "역동성"을 전달하도록 다르게 적용돼야 한다고 강조.
- 업종별로 구조 자체가 달라야 한다는 점도 언급: 콘텐츠 에이전시, 물리적 제품 브랜드, 컨설팅펌이 모두 다른 섹션 구조(예: 사이드바 유무)를 가짐.
05전략적 의미
- 웹사이트 제작에서 "얼마나 잘 반복(iterate)했는가"보다 "원샷 결과물의 기본기"가 모델 간 격차를 가르는 새 기준이 되고 있다.
- 모션그래픽·비디오 편집 영역까지 텍스트 프롬프트 하나로 확장되면서, 인적 편집자 대비 시간·비용 절감 폭이 커지고 있다(152GB 원본 → 35분 만에 완성작).
- "스킬(커스텀 지시문 세트) + 레퍼런스 사이트" 조합이 AI 디자인 생성의 새로운 표준 워크플로우로 자리잡는 흐름을 시사한다.
- 브랜드·업종에 따라 differentiated된 결과물을 내는 능력이 "슬롭이냐 아니냐"를 가르는 실질적 기준이 되고 있다.
06활용 시나리오
- 에이전시가 신규 클라이언트 랜딩페이지 초안을 Scroll Craft류 스킬 + 업종별 Awwwards 레퍼런스로 빠르게 뽑아 컨셉 회의용으로 활용.
- 이벤트 주최사가 대용량 촬영 원본(수백 GB)을 그대로 업로드해 소셜용 하이라이트 릴을 당일 제작.
- 브랜드팀이 21st.dev에서 원하는 UI 컴포넌트(버튼, 폼 등)를 골라 기존 AI 생성 사이트에 부분 교체 요청.
- 타겟 고객군이 명확한 이커머스가 3P 프레임워크로 톤을 미리 정의한 뒤 프롬프트에 반영해 슬롭 리스크를 줄임.
07현황 및 전망
- 저자는 불과 며칠 전 Fable 5.1을 디자인 킹으로 꼽았던 만큼, AI 웹디자인 모델 간 순위가 매우 빠르게 뒤집히는 국면임을 스스로 보여준다.
- 원샷 결과물 수준이 계속 올라가면, "반복 튜닝 능력"보다 "기본 취향(taste)과 브랜드 적합도"가 모델 비교의 핵심 지표로 이동할 가능성이 있다.
- Hyperframes 등 모션그래픽 도구와의 결합이 늘면서, 정적 웹사이트 생성을 넘어 이벤트 영상·광고 클립 등 인접 영역까지 자동화 범위가 확장되는 추세다.
- 다만 저자도 인정하듯 "일부 편집 오류"는 여전히 존재해, 완전한 무인 자동화보다는 사람이 최종 다듬는 하이브리드 워크플로우가 당분간 이어질 전망이다.
08용어 사전
- Astra: 영상에서 언급되는 신규 AI 디자인/생성 모델(GPT-6 계열로 지칭), 웹사이트·모션그래픽 원샷 생성에 사용됨.
- Scroll Craft: 저자가 만든 커스텀 스킬로, 레이어링·스크롤 인터랙션·타이포그래피·스페이싱 지식을 통합해 AI에 제공.
- One-shot 프롬프트: 반복 수정 없이 단 한 번의 프롬프트로 얻은 결과물.
- 3P (Pain, Person, Promise): 저자의 브랜드 적합성 판단 프레임워크 — 고통, 인물, 약속.
- AI 슬롭 (AI slop): 뻔한 템플릿형 UI 요소 반복, 또는 타겟 고객과 맞지 않는 과도한 연출을 지칭하는 표현.
- Hyperframes: 3D·음악 동기화 모션그래픽 제작에 사용된 도구.
- godly.design / 21st.dev / awwwards.com: 웹디자인 영감·컴포넌트 레퍼런스를 얻는 대표 사이트 3종.