프론트엔드 슬라이드
완전히 브라우저에서 실행되는 제로 의존성, 애니메이션이 풍부한 HTML 프레젠테이션을 만듭니다.
핵심 원칙
- 제로 의존성 — 인라인 CSS/JS가 포함된 단일 HTML 파일. npm, 빌드 도구 없음.
- 보여주고 말하지 마라 — 추상적인 선택이 아닌 시각적 미리보기를 생성합니다. 사람들은 보고 원하는 것을 발견합니다.
- 독창적인 디자인 — 제네릭한 "AI 슬롭"은 안 됩니다. 모든 프레젠테이션은 맞춤 제작된 느낌이어야 합니다.
- 점진적 공개 — 먼저 가벼운 스타일 인덱스를 읽습니다. 대담한 템플릿의 경우 작은 미리보기 카드를 사용하여 스타일을 미리 보고 사용자가 해당 템플릿을 선택한 후에만 전체
design.md를 로드합니다. - 고정 16:9 스테이지 (NON-NEGOTIABLE) — 모든 덱은 뷰포트에 맞춰 전체적으로 배율이 조정되는 1920×1080 슬라이드 캔버스를 사용합니다. 슬라이드는 휴대폰을 포함한 모든 화면에서 16:9를 유지해야 합니다. 슬라이드 콘텐츠를 기기에 맞게 리플로우하지 마십시오.
디자인 미학
당신은 일반적이고 "평균적인" 출력물로 수렴하는 경향이 있습니다. 프론트엔드 디자인에서 이것은 사용자들이 "AI 슬롭" 미학이라고 부르는 것을 만듭니다. 이를 피하십시오: 놀랍고 즐거움을 주는 창의적이고 독창적인 프론트엔드를 만드십시오.
다음에 집중하십시오:
- 타이포그래피: 아름답고 독특하며 흥미로운 글꼴을 선택하십시오. Arial 및 Inter와 같은 일반적인 글꼴은 피하고 대신 프론트엔드의 미학을 높이는 독창적인 선택을 하십시오.
- 색상 및 테마: 일관된 미학을 고수하십시오. 일관성을 위해 CSS 변수를 사용하십시오. 강한 악센트가 있는 지배적인 색상은 소심하고 고르게 분포된 팔레트보다 성능이 좋습니다. 영감을 위해 IDE 테마 및 문화적 미학에서 그리십시오.
- 모션: 효과 및 마이크로 인터랙션에 애니메이션을 사용하십시오. HTML의 경우 CSS 전용 솔루션을 우선시하십시오. React에서 사용 가능한 경우 Motion 라이브러리를 사용하십시오. 영향력이 큰 순간에 집중하십시오: 지연된 공개(animation-delay)가 있는 잘 조율된 페이지 로드 한 번이 흩어진 마이크로 인터랙션보다 더 큰 즐거움을 만듭니다.
- 배경: 단색을 기본값으로 사용하는 대신 분위기와 깊이를 만드십시오. CSS 그라데이션을 레이어링하고, 기하학적 패턴을 사용하거나, 전체 미학과 일치하는 상황별 효과를 추가하십시오.
다음과 같은 일반적인 AI 생성 미학을 피하십시오:
- 남용된 글꼴 모음(Inter, Roboto, Arial, 시스템 글꼴)
- 진부한 색상 구성(특히 흰색 배경의 보라색 그라데이션)
- 예측 가능한 레이아웃 및 컴포넌트 패턴
- 맥락별 특성이 결여된 판에 박힌 디자인
창의적으로 해석하고 해당 맥락을 위해 진정으로 디자인된 느낌이 드는 예상치 못한 선택을 하십시오. 밝은 테마와 어두운 테마, 다른 글꼴, 다른 미학을 다양하게 사용하십시오. 여전히 생성 전반에 걸쳐 일반적인 선택(예: Space Grotesk)으로 수렴하는 경향이 있습니다. 이를 피하십시오: 틀에 박힌 생각에서 벗어나는 것이 중요합니다!
고정 스테이지 규칙
다음 불변 규칙은 모든 프레젠테이션의 모든 슬라이드에 적용됩니다:
- 모든 덱에는 브라우저 창을 채우는 뷰포트 래퍼가 있습니다.
- 모든 슬라이드는 고정된 1920×1080 스테이지 내에서 작성됩니다.
- 스테이지는 뷰포트에 맞게 균일하게 배율이 조정됩니다. 레터박스/필러박스가 발생할 수 있습니다. 콘텐츠 레이아웃을 변경해서는 안 됩니다.
- 반응형 중단점을 사용하여 휴대폰용 슬라이드 콘텐츠를 재배치하지 마십시오.
- 1920×1080 디자인 크기에서 고정된 내부 슬라이드 측정값을 사용하십시오.
- 슬라이드 가시성은
viewport-base.css에서visibility,opacity,pointer-events를 사용하여.active/.visible에 의해 제어되어야 합니다. 슬라이드 전환에display: none/display: block을 사용하지 마십시오. 이후의 레이아웃 클래스(예:.slide-content { display: flex; })가 이를 재정의하여 모든 슬라이드를 한 번에 표시할 수 있습니다. clamp()는 스테이지 외부의 비슬라이드 UI 또는 전체 스테이지가 비실용적인 작은 대체 미리보기에만 사용하십시오.prefers-reduced-motion지원을 포함하십시오.- CSS 함수를 직접 부정하지 마십시오(
-clamp(),-min(),-max()는 자동으로 무시됨) — 대신calc(-1 * clamp(...))를 사용하십시오.
생성 시 viewport-base.css를 읽고 모든 프레젠테이션에 전체 내용을 포함하십시오.
콘텐츠 밀도 모드
사용자에게 이것이 주로 읽기용 덱인지 말하기용 덱인지 물어본 후 그에 따라 디자인하십시오:
| 밀도 모드 | 최적 대상 | 디자인 동작 |
|---|---|---|
| 낮은 밀도 / 발표자 중심 | 공개 강연, 기조 스타일 공유, 실시간 설명 | 슬라이드당 하나의 아이디어, 큰 타입, 강력한 시각적 계층 구조, 넉넉한 여백, 최대 1-3개 불릿, 필요한 경우 더 많은 슬라이드 |
| 높은 밀도 / 읽기 우선 | 보고서, 유인물, 비동기 검토, 상세 내부 문서 | 더 자체 포함된 슬라이드, 구조화된 그리드/표/주석, 읽을 수 있을 때 4-8개 불릿 또는 4-6개 카드, 빡빡하지만 여전히 의도적인 간격 |
기본 제한은 여전히 적용됩니다: 스크롤 금지, 오버플로우 금지, 겹치는 패널 금지, 편안한 읽기 크기 미만의 텍스트 금지. 콘텐츠가 선택한 밀도 모드를 초과하면 비좁아질 때까지 축소하는 대신 더 많은 슬라이드로 분할하십시오.
0단계: 모드 감지
사용자가 원하는 것을 결정하십시오:
- 모드 A: 새 프레젠테이션 — 처음부터 만듭니다. 1단계로 이동합니다.
- 모드 B: PPT 변환 — .pptx 파일을 변환합니다. 4단계로 이동합니다.
- 모드 C: 개선 — 기존 HTML 프레젠테이션을 개선합니다. 읽고, 이해하고, 개선합니다. 아래 모드 C 수정 규칙을 따르십시오.
모드 C: 수정 규칙
기존 프레젠테이션을 개선할 때 고정 스테이지 맞춤이 가장 큰 위험입니다:
- 콘텐츠를 추가하기 전에: 기존 요소 수를 세고 밀도 제한을 확인하십시오.
- 이미지 추가: 1920×1080 슬라이드 캔버스 안에 맞추십시오. 슬라이드에 이미 콘텐츠가 최대이면 두 개의 슬라이드로 분할하십시오.
- 텍스트 추가: 슬라이드당 최대 4-6개 불릿. 제한 초과? 계속 슬라이드로 분할하십시오.
- 수정 후 항상 확인: 슬라이드 스테이지가 16:9를 유지하는지, 텍스트가 카드를 오버플로우하지 않는지, 패널이 겹치지 않는지, 스크린샷이 1280×720 및 휴대폰 뷰포트 하나에서 올바르게 보이는지 확인하십시오.
- 사전에 재구성: 수정으로 인해 오버플로우가 발생할 경우 자동으로 콘텐츠를 분할하고 사용자에게 알리십시오. 요청을 기다리지 마십시오.
기존 슬라이드에 이미지를 추가할 때: 먼저 이미지를 새 슬라이드로 이동하거나 다른 콘텐츠를 줄이십시오. 기존 콘텐츠가 이미 1920×1080 슬라이드 스테이지를 채우는지 확인하지 않고 이미지를 추가하지 마십시오.
1단계: 콘텐츠 발견 (새 프레젠테이션)
모든 질문을 함께 하여 사용자가 한 번에 모든 내용을 작성할 수 있도록 하십시오. 현재 환경이 기본 구조화된 질문 UI를 제공하는 경우 이를 사용하고, 그렇지 않으면 하나의 간결한 메시지로 명확하게 번호가 매겨진 선택 사항과 함께 질문하십시오:
질문 1 — 목적 (헤더: "목적"): 이 프레젠테이션의 용도는 무엇입니까? 옵션: 피치 덱 / 교육-튜토리얼 / 컨퍼런스 강연 / 내부 프레젠테이션
질문 2 — 분량 (헤더: "분량"): 대략 몇 개의 슬라이드입니까? 옵션: 짧게 5-10 / 중간 10-20 / 길게 20+
질문 3 — 콘텐츠 (헤더: "콘텐츠"): 콘텐츠가 준비되었습니까? 옵션: 모든 콘텐츠 준비됨 / 대략적인 노트 / 주제만 있음
질문 4 — 밀도 (헤더: "밀도"): 덱의 밀도는 어느 정도여야 합니까? 옵션:
- "낮은 밀도 / 발표자 중심" — 큰 아이디어, 적은 단어, 더 많은 시각적 여유
- "높은 밀도 / 읽기 우선" — 비동기 읽기를 위한 더 자체 포함된 세부 정보
1단계에서 인라인 편집에 대해 묻지 마십시오. 사용자는 초안을 보기 전에 편집 동작을 선택할 필요가 없습니다. 인라인 편집은 초안 작성 후 편의 기능입니다. 사용자가 명시적으로 잠금/내보내기 전용 파일을 요청하지 않는 한 기본적으로 포함하십시오.
사용자의 밀도 선택을 기억하십시오. 이는 슬라이드 수, 타이포그래피 척도, 슬라이드당 텍스트 양, 레이아웃 밀도, 영화적인 발표자 슬라이드와 자체 포함된 읽기 슬라이드 중 선호도에 영향을 미칩니다.
사용자에게 콘텐츠가 있으면 공유하도록 요청하십시오.
1.2단계: 이미지 평가 (이미지가 제공된 경우)
사용자가 "이미지 없음"을 선택한 경우 → 2단계로 건너뜁니다.
사용자가 이미지 폴더를 제공하는 경우:
- 스캔 — 모든 이미지 파일(.png, .jpg, .svg, .webp 등)을 나열합니다.
- 각 이미지 검사 — 에이전트의 사용 가능한 이미지 이해 기능을 사용합니다. 이미지 읽기를 사용할 수 없는 경우 파일 이름/메타데이터를 사용하고 필요한 경우에만 사용자에게 설명을 요청합니다.
- 평가 — 각 이미지에 대해: 표시되는 내용, 사용 가능 또는 사용 불가능(이유 포함), 나타내는 개념, 주요 색상.
- 개요 공동 디자인 — 선별된 이미지는 텍스트와 함께 슬라이드 구조를 알립니다. 이것은 "슬라이드를 계획한 다음 이미지를 추가하는" 것이 아닙니다. 처음부터 둘 다를 중심으로 디자인하십시오 (예: 스크린샷 3개 → 기능 슬라이드 3개, 로고 1개 → 제목/종료 슬라이드).
- 개요 확인 가능한 경우 동일한 구조화된 질문 메커니즘을 사용하여: "이 슬라이드 개요와 이미지 선택이 올바른가요?" 옵션: 좋아요 / 이미지 조정 / 개요 조정
미리보기의 로고: 사용 가능한 로고가 식별된 경우 각 스타일 미리보기에 (base64로) 포함하십시오. 사용자는 자신의 브랜드가 세 가지 다른 방식으로 스타일링된 것을 보게 됩니다.
2단계: 스타일 발견
이것은 "보여주고 말하지 마라" 단계입니다. 대부분의 사람들은 디자인 선호도를 말로 표현할 수 없습니다.
2.0단계: 3개의 스타일 미리보기를 직접 생성
목적, 청중, 분위기 및 콘텐츠 밀도를 기반으로 타이포그래피, 색상, 애니메이션 및 전체적인 미학을 보여주는 3개의 고유한 단일 슬라이드 HTML 미리보기를 생성하십시오.
사용자에게 옵션이나 사전 설정 선택기를 원하는지 묻지 마십시오. 기본 발견 경험은 항상 시각적 비교입니다.
사용자가 이미 분위기를 알려준 경우 이를 사용하십시오. 그렇지 않은 경우 행사, 청중, 콘텐츠 및 중요성에서 가능한 분위기를 추론하십시오. 사용자가 취향을 먼저 말로 표현할 필요 없이 시각적으로 반응할 수 있도록 옵션을 충분히 다양하게 유지하십시오.
사용자가 명시적으로 사전 설정 또는 대담한 템플릿을 지정하는 경우 그 옵션을 하나로 존중하고 나머지 미리보기 슬롯을 그 주변에서 생성하십시오.
안전한 사전 설정 후보에 대해 STYLE_PRESETS.md를 읽으십시오. bold-template-pack/selection-index.json이 존재하는 경우 해당 간결한 인덱스도 읽으십시오. 그러나 아직 design.md 파일은 읽지 마십시오.
| 분위기 | 제안된 사전 설정 |
|---|---|
| 감명/자신감 | Bold Signal, Electric Studio, Dark Botanical |
| 흥분/에너지 | Creative Voltage, Neon Cyber, Split Pastel |
| 차분/집중 | Notebook Tabs, Paper & Ink, Swiss Modern |
| 영감/감동 | Dark Botanical, Vintage Editorial, Pastel Geometry |
미리보기 혼합 규칙:
- 기본적으로 3개의 미리보기를 생성합니다:
STYLE_PRESETS.md의 안전한 사전 설정 1개,bold-template-pack/selection-index.json의 대담한 템플릿 1개 이상, 와일드카드 1개. - 와일드카드는 두 번째 대담한 템플릿 또는 자체 생성된 맞춤 디자인 중 하나일 수 있습니다. 사용자의 행사, 청중, 분위기 및 콘텐츠에 대해 가장 강력하고 유용한 대비를 만드는 것을 선택하십시오.
- 모든 표현 옵션이 템플릿 라이브러리에서 제공되도록 강요하지 마십시오. 사용 가능한 템플릿보다 더 날카롭고 구체적인 디자인 기회가 있는 경우 와일드카드 슬롯을 사용하여 자유롭게 디자인하십시오.
- 보수적이거나 중요도가 높은 덱의 경우 안전한 사전 설정을 특히 절제되게 만드십시오. 차분하고 격식이 높은 대담한 템플릿을 선택하십시오. 와일드카드는 권위적이고 장식적이지 않은 느낌의 또 다른 절제된 템플릿 또는 맞춤 디자인으로 만드십시오.
- 표현적인 덱의 경우 안전한 사전 설정을 읽기 쉬운 대체재로 유지하십시오. 하나의 강력한 대담한 템플릿을 선택하십시오. 와일드카드는 모험적이고 맥락에 맞으며 다른 두 미리보기와 명확히 다른 것으로 만드십시오.
- 대담한 템플릿 일치가 약하다고 느껴지면 템플릿을 강제하는 대신 와일드카드를 맞춤 디자인으로 사용하거나 다른 안전한 사전 설정으로 대체하십시오.
맞춤 와일드카드 디자인 규칙:
- 위의 디자인 미학 섹션을 따르십시오: 제네릭한 "AI 슬롭" 없음, 기본 글꼴/색상/레이아웃 선택 없음, 흰색에 보라색 그라데이션 클리셰 없음, 판에 박힌 대시보드/카드 모양 없음.
- 사용자가 명시한 행사, 청중, 분위기/바이브 및 콘텐츠 밀도와 일치하십시오. 맞춤 디자인은 단순히 "세련된" 것이 아니라 이 덱을 위해 작성된 느낌이어야 합니다.
- 의도적인 시각적 테제를 만드십시오: 독특한 타이포그래피, 확고한 팔레트, 인식 가능한 레이아웃 시스템, 하나의 강력한 분위기 또는 그래픽 장치.
- 전체 덱에 대해 실행 가능한지 확인하십시오. 미리보기는 섹션, 콘텐츠, 인용문, 비교 및 종료 슬라이드로 확장될 수 있는 디자인 시스템을 암시해야 합니다.
- 고정 1920×1080 스테이지 규칙을 사용하고 다른 모든 옵션과 동일한 미리보기 진정성 검사를 통과하십시오.
- "custom", "wildcard", "AI-generated" 또는 디자인 프로세스 레이블을 슬라이드 자체에 절대 렌더링하지 마십시오.
대담한 템플릿 선택 규칙:
mood,tone,best_for,avoid_for,formality,density및scheme에 대해 사용자 목적 및 분위기를 일치시키십시오.best_for예제는 엄격한 산업 필터가 아닌 소프트 신호로 취급하십시오.- 세 개의 미리보기가 서로 진정으로 다르도록 유지하십시오.
- 대담한 템플릿 후보를 선택한 후 선택 인덱스의
preview_md경로에서 해당 후보의preview.md파일만 읽으십시오. preview.md는 제목 슬라이드 미리보기에만 사용하십시오. 사용자가 최종 템플릿을 선택할 때까지 전체design.md파일을 읽지 마십시오.- 선택한 최종
design.md에 중요한 구현 세부 사항이 누락된 경우가 아니라면template.html을 읽거나 복사하지 마십시오.
미리보기 진정성 규칙 (NON-NEGOTIABLE):
- 모든 스타일 미리보기는 진단 카드가 아닌 사용자 덱의 실제 첫 번째 슬라이드처럼 보여야 합니다.
- 슬라이드에 내부 워크플로 텍스트를 절대 렌더링하지 마십시오:
preview,generated from,preview.md,template,preset,style option,Option A/B/C, 파일 이름, 경로 또는 소스 문서 레이블. - 슬라이드 자체에 템플릿 이름이나 슬러그 이름을 절대 렌더링하지 마십시오. 템플릿/스타일 이름은 사용자에게 보내는 메시지에만 속합니다. 또한 사용자가 해당 정확한 문구가 덱에 나타나길 원하지 않는 한 "sharp and provocative", "safe option", "bold option", "for internal sharing" 또는 "audience: ..."와 같은 사용자 요구 사항 메모를 슬라이드 콘텐츠로 렌더링하지 마십시오.
- 슬라이드에 크롬이 필요한 경우 실제 덱 크롬만 사용하십시오: 덱 제목, 섹션 제목, 날짜, 작성자, 회사, 페이지 번호 또는 사용자 자료의 실제 콘텐츠 문구.
- 미리보기를 열기 전에 표시되는 텍스트를 검사하고 내부 메타데이터가 나타나면 수정하십시오.
미리보기를 .frontend-slides/slide-previews/에 저장하십시오(style-a.html, style-b.html, style-c.html). 각 파일...