Real-Fruit-Snacks/killer-design

Killer Design (킬러 디자인)

목표는 사람들이 로드하자마자 '와' 하고 감탄하는 사이트를 만드는 것입니다. 즉, 이 프로젝트를 위해 최고의 스튜디오가 만들 수 있었을 법한 사이트를 말합니다. 깔끔하고 정확하며 세련된 것은 기본이지 목표가 아닙니다. 실수만 피한 페이지는 잊혀집니다. 다음 세 가지 습관이 목표에 도달하게 해주며, 이 스킬은 이 습관을 중심으로 구성되었습니다:

1. 코드를 작성하기 전에 디자인을 결정하세요. 제네릭한 사이트는 결정을 내리지 않았기 때문에 나옵니다. 폰트, 색상, 레이아웃은 모든 템플릿이 사용하는 기본값으로 설정됩니다. 주제(또는 브랜드가 있다면 브랜드)에 뿌리를 둔 짧은 문서화된 방향은 이후의 모든 선택에 이유를 부여합니다.
2. 하나의 '와우 모멘트'를 디자인하세요. 첫 화면에 컨셉에 기반한 중심 요소를 배치하여 누군가를 멈추게 만드세요: 라이브 데모, 대담한 타이포그래피, 포인터에 반응하는 조명, 스크롤에 따라 구성되는 장면. 이를 높은 기준으로 실행하고 주변의 모든 것을 차분하게 유지하여 공간을 확보하세요. references/motion-and-wow.md를 참조하세요.
3. 결과물을 확인하세요. 보지 않고 작성된 CSS는 항상 잘못됩니다: 좁은 모바일 레이아웃, 약한 계층 구조, 아무도 읽을 수 없는 회색 텍스트, 느려터진 애니메이션. 페이지를 렌더링하고(모션 포함), 비평가처럼 보고, 문제를 수정하고, 다시 확인하세요.

작업은 6단계로 진행됩니다: 프로젝트 이해, 방향 설정, 콘텐츠 작성, 구축, 스크린샷 검토 및 수정, 마무리 및 인계. 리디자인의 경우 먼저 인벤토리 단계를 추가합니다(아래 '기존 사이트 리디자인' 참조).

1. 프로젝트 이해

질문하기 전에 이미 존재하는 것을 먼저 읽으세요. 즉, README, 문서, 패키지 또는 앱 메타데이터, 기존 카피, 로고 및 브랜드 파일, 스크린샷, 그리고 DESIGN.md 파일을 말합니다. 다음을 파악하세요:

• 그것이 무엇인지, 낯선 사람도 이해할 수 있는 한 문장으로.
• 누가 방문하며, 그들이 무엇을 결정하거나 해야 하는지. 단일 주요 행동을 지정하세요: 설치, 사전 주문, 가입, 연락.
• 구체적인 사항: 실제 명령어, 숫자, 이름, 시간, 장소, 기능, 제약 조건, 이야기. 이것이 카피와 비주얼의 원자재이며, 구체적인 세부 사항이 사이트가 제네릭하게 느껴지는 것을 방지합니다.
• 성격: 세 개의 형용사와, 그것이 아닌 한 가지. "정확하고, 조용하며, 신뢰할 수 있음; 장난스럽지 않음."
• 제약 조건: 호스팅(예: 정적 GitHub Pages), 반드시 유지해야 할 것, 기존 브랜드 자산.
• 문서화된 의도: README나 문서에 명시된 사이트의 용도와 의도적으로 생략된 것("한 페이지, GitHub 버튼; 전체 목록은 다른 곳에 있음"). 이는 이미 내려진 결정입니다. 이를 따르고, 그 이상의 것은 구축하는 대신 인계 시 제안으로 제공하세요.
• 브랜드 시스템의 존재 여부: 브랜드 가이드(BRAND.md, 스타일 가이드, 브랜드 저장소), 디자인 토큰, DESIGN.md, 또는 일관된 완성된 브랜드 아트워크 세트(소셜 카드, 배너, README 표지, 현재 사이트). 존재한다면 2단계가 다르게 진행됩니다. 아래 '기존 브랜드 내에서 작업하기'를 참조하세요.

찾을 수 없거나 합리적으로 유추할 수 없고 디자인을 변경할 만한 것에 대해서만 사용자에게 질문하세요. 가장 명백한 예는 제품이 실제로 무엇을 하는지입니다. 그 외의 모든 것에 대해 합리적인 결정을 내리고 인계 시 가정 사항을 나열하세요. 실제 페이지에 반응하는 것이 설문지에 답하는 것보다 사용자에게 더 쉽습니다.

2. 디자인 방향 설정

프로젝트에 이미 브랜드 시스템이 있다면, 그 브랜드 자체가 방향입니다. 아래 '기존 브랜드 내에서 작업하기'로 건너뛰고 3단계로 돌아오세요. 다음은 디자인을 새로 만들어야 하는 프로젝트를 위한 것입니다.

"깔끔하고 현대적인"은 방향이 아닙니다. 아무 결정도 내리지 않았을 때 나오는 결과일 뿐입니다.

주제에서 컨셉을 찾으세요. 프로젝트가 속한 세계가 무엇인지 물어보세요. 바이올린 수리 공방은 가문비나무와 니스, 손글씨 라벨, 측정 도면을 암시합니다. 도시 오픈 데이터 포털은 대중교통 지도, 표지판 시스템, 시간표를 암시합니다. 암벽 등반장은 지형도, 초크, 루트 등급을 암시합니다. 첫 번째 연상 이상으로 더 구체적인 것을 찾으세요: "종이와 잉크"는 거의 모든 것에 적용되지만 "1950년대 카탈로그의 씨앗 봉투"는 그렇지 않습니다. 컨셉은 서체, 팔레트, 질감, 레이아웃을 형성해야 합니다. 클립 아트나 말장난이 되어서는 안 됩니다.

세 가지 근본적으로 다른 방향을 각각 한두 줄로 스케치하고, 컨셉, 서체, 색온도, 레이아웃 태도를 다양하게 해보세요. 그런 다음 대상 청중과 성격에 가장 잘 맞는 것을 선택하세요. 가장 먼저 떠오르는 아이디어는 대개 가장 제네릭하기 때문에 세 가지를 작성하는 것입니다. 선택한 방향을 이 파일 끝에 있는 'AI가 만든 듯한 사이트의 특징'과 대조해 보세요. 일반적인 팔레트와 평범한 섹션으로 구성되어 있다면 더 발전시키세요.

와우 모멘트를 선택하세요. 프로젝트에 대한 가장 흥미로운 진실된 한 가지가 무엇인지, 그리고 첫 화면이 어떻게 그것을 말하는 대신 보여줄 수 있는지 질문하세요. 두세 가지 후보 모멘트를 작성하고, 가장 컨셉에 부합하면서 아름답게 실행할 수 있는 것을 선택하세요. 기술 메뉴와 검증된 레시피는 references/motion-and-wow.md를 읽으세요. 그런 다음 누군가 이것을 보고 "와"라고 말할지 아니면 "좋네"라고 말할지 정직하게 질문하세요. 답이 "좋네"라면 더 용기 내세요: 규모를 키우고, 더 강한 대비를 만들고, 순간을 더 생생하게 만드세요.

방향을 DESIGN.md에 기록하세요. 사이트 루트에 아래 템플릿을 사용하세요. 이 파일은 향후 페이지와 세션의 일관성을 유지합니다. DESIGN.md가 이미 존재한다면, 새로운 방향을 요청하지 않는 한 따르고 확장하세요.

서체와 색상을 선택하기 전에 references/typography.md와 references/color.md를 읽으세요. 일반적인 기본값을 피하는 글꼴 쌍과 팔레트 방법이 포함되어 있습니다. references/layout.md는 '히어로 플러스 세 개의 카드' 이상의 구성을 다룹니다.

# 디자인: <프로젝트>

## 컨셉
한두 문장: 이 프로젝트가 속한 세계와 방문자가 떠날 때 느껴야 할 감정.

## 대상 청중 및 주요 행동
누가 방문하는지, 그들이 알아야 할 것, 우리가 그들이 하길 바라는 한 가지.

## 서체
디스플레이: <패밀리, 굵기>, 그리고 이유. 텍스트: <패밀리, 굵기>, 그리고 이유. 모노(해당하는 경우).
스케일: 기본 크기와 비율 (`scripts/scale.mjs`에서).

## 색상
역할 -> 값: bg, surface, ink, ink-muted, line, accent, on-accent, focus.
사용 규칙 (예: "어센트는 주요 행동과 활성 상태에만 사용").

## 레이아웃
그리드와 너비, 섹션 리듬, 전반적인 태도 (편집적, 조밀함, 통풍 잘 됨, 비대칭...).

## 시그니처
사람들이 이 사이트를 기억하게 할 한두 가지 요소.

## 와우 모멘트
첫 화면에서 누군가를 멈추게 하는 것과 그것이 작동하는 방식. JS 없을 때, 움직임 감소 설정에서, 그리고 휴대폰에서 어떻게 보이는지도 포함.

## 이미지 및 질감
주어진 자산을 고려하여 비주얼이 무엇이며 어떻게 만들어지는지.

## 모션
무엇이 움직이고, 어떻게, 얼마나 움직이는지. 움직임 감소 설정을 존중합니다.

## 음성
카피의 어조; 사용할 단어와 피해야 할 단어.

## 고려된 대안
다른 두 방향을 각각 한 줄씩, 사용자가 방향을 바꿀 수 있도록.

방향을 선택하고 구축하세요. 추상적인 선택을 위해 사용자에게 질문하는 것을 멈추지 마세요. 사용자가 실제 페이지를 보고 방향을 바꿀 수 있도록 인계 시 대안을 나열하세요.

3. 콘텐츠 먼저 작성하기

레이아웃은 콘텐츠를 따릅니다. Lorem Ipsum을 중심으로 그려진 디자인은 제네릭한 상자를 만들고, 제네릭한 카피는 좋은 레이아웃조차 템플릿처럼 읽히게 만듭니다. 레이아웃을 시작하기 전에 실제 단어를 작성하세요:

• 헤드라인: 그것이 무엇인지, 또는 방문자에게 무엇이 바뀌는지, 평범한 단어로. 구체적이면서도 센스 있는 것이 좋습니다. "당신의 게임, 업그레이드됨"보다 "리즈에 있는 모든 공공 테니스 클럽에서 코트 예약"이 낫습니다.

• 프로젝트의 구체적인 내용 사용: 실제 명령어, 실제 숫자, 실제 이름, 실제 시간과 장소.

• 재고 마케팅 언어 제거: unlock, elevate, seamless, empower, revolutionize, supercharge, effortless, cutting-edge, robust, leverage, game-changer, "다음 단계로", "오늘날의 빠르게 변화하는 세상에서". 어떤 웹사이트에나 나올 수 있는 문장이라면 다시 작성하세요.

• AI 단어뿐만 아니라 AI 문장 구조도 피하세요. 다음을 주의하세요:

  • 모든 섹션 제목이 동일한 두 박자 공식으로 구성됨 ("하나의 바이너리. 얻는 방법을 선택하세요.", "지금 또는 그때의 스냅샷을 되찾으세요.");
  • "X 없음. Y 없음. 그냥 Z.";
  • 형용사 삼중창;
  • 모든 제목에 말장난.

  평범한 레이블 ("설치", "스냅샷 복원")이 종종 센스 있는 문장보다 강력하며, 정성껏 만들어진 하나의 헤드라인이 돋보일 수 있는 공간을 제공합니다.

• 버튼 레이블은 무엇이 일어나는지 말하세요: "앱 다운로드", "테이블 예약", "수리 예약", "시작하기" 또는 "더 알아보기" 대신.

• 발명된 사실을 실제로 제시하지 마세요. 가짜 가격, 주소, 시간, 통계, 사용 후기, 고객 로고 또는 "10,000개 팀이 신뢰함". 이는 사용자 자신의 프로젝트이며, 조작된 주장은 실수로 배송되기 쉬운 책임입니다. 섹션에 정말로 필요한 사실이 없으면 <span class="todo">[가격]</span>과 같이 눈에 띄도록 스타일링된 보이는 대체 텍스트를 넣고, 각 항목을 인계 시 나열하세요.

4. 구축

토큰 우선. 어떤 컴포넌트보다 먼저, styles.css 상단에 CSS 사용자 정의 속성으로 시스템을 정의하세요: 색상 역할, 서체 단계, 공백 단계, 모서리 반경, 그림자, 텍스트 측정값 및 모션 타이밍. 유체 서체 및 공백 스케일을 생성하세요:

node <skill-dir>/scripts/scale.mjs --min-ratio 1.2 --max-ratio 1.333   # 방향에 맞는 비율 선택

그 후에는 하드코딩된 숫자 대신 토큰을 사용하세요. 하드코딩된 숫자는 변동되며, 이러한 변동이 공간이 모든 곳에서 약간 잘못 보이게 만듭니다.

스크립트는 Node 20 이상이 필요합니다. node가 PATH에 없으면 ~/.cache/killer-skills-node/node.exe로 실행하세요. Windows 설치 프로그램은 Node가 없을 때 해당 위치에 넣습니다.

글꼴. references/typography.md에 명명된 모든 서체가 있는 killer-skills 글꼴 팩에서 자체 호스팅하세요:

node <skill-dir>/scripts/fonts.mjs list                       # 패밀리와 해당 굵기 또는 축
node <skill-dir>/scripts/fonts.mjs add path/to/site "Newsreader" "IBM Plex Mono" --weights 400,600

add는 파일과 라이선스를 assets/fonts/에 복사하고 assets/fonts/fonts.css를 작성합니다. styles.css 전에 해당 스타일시트를 연결하고, 첫 화면에 의존하는 서체만 미리 로드하세요(스크립트가 해당 줄을 출력합니다). 네트워크가 필요 없으며, 완성된 사이트는 글꼴 호스트에 아무것도 요청하지 않습니다. 팩이 설치되지 않았거나 서체가 없으면 references/typography.md에 설명된 대로 Google Fonts에서 로드하세요.

파일. 새 사이트의 경우, 프로젝트에서 달리 지정하지 않는 한:

site/            (또는 사용자나 프로젝트가 원하는 곳)
  index.html
  styles.css
  DESIGN.md
  icon.svg, favicon.ico, apple-touch-icon.png, icon-192/512.png, icon-maskable-512.png, manifest.webmanifest
  assets/        (svg, images, fonts/)
  script.js      (와우 모멘트와 작은 상호작용; 짧게 유지)

HTML. 시맨틱 랜드마크 사용 (header, nav, main, 제목이 있는 section, footer), 하나의 h1과 순서대로 제목. 작업에는 <button>, 탐색에는 <a>를 사용하고, 모든 양식 필드에는 <label>을 제공하세요. 모든 페이지에는 lang, 뷰포트 메타 태그, 실제 <title>, 메타 설명, 오픈 그래프 태그, 그리고 전체 파비콘 및 앱 아이콘 세트가 필요합니다.

CSS. 일반적인 최신 CSS, 모바일 우선:

• 레이아웃에는 grid와 flex를 사용하고, repeat(auto-fit, minmax(min(100%, 18rem), 1fr))과 같은 내재적 패턴 사용.
• 유체 토큰은 clamp()를 통해, 읽기 측정값은 약 60-70ch.
• 디자인에 맞는 :focus-visible 스타일. 호버 효과는 @media (hover: hover) 내부에.
• 제목에는 text-wrap: balance, 단락에는 text-wrap: pretty.
• @media (prefers-reduced-motion: reduce).

JavaScript. 경험을 향상시키는 곳에 사용하세요: 와우 모멘트, 포인터 효과, 스위핑되는 테마 전환, 라이브 데모, 모바일 네비게이션 토글 (<button aria-expanded> 또는 <details>). 바닐라로 유지하고 사이트 자체 파일에 직접 작성하세요: 프레임워크 없음, CDN 없음, 외부에서 로드되는 것 없음, 그리고 보통 100줄 미만. 향상 기능으로 구축하세요. JS 없이도 콘텐츠가 보여야 합니다. 스크립트가 실패할 때 콘텐츠가 사라지기 때문에 스크립트가 공개할 때까지 opacity: 0으로 섹션을 숨기지 마세요. CSS가 할 수 있는 것은 CSS를 선호하세요(등장, 타이핑 효과, 스크롤 기반 장면).

모션. 다른 곳의 모션은 빠르고 조용하게 유지: 150-250ms 호버 및 포커스 전환, 작은 등장. 이러한 차분함이 와우 모멘트가 제대로 전달되게 합니다. 모든 애니메이션은 @media (prefers-reduced-motion: no-preference) 내부에 있거나 matchMedia 확인 뒤에 있으며, 움직임 감소 버전은 완성된 정적 디자인입니다. 레시피와 성능 규칙은 references/motion-and-wow.md에 있습니다.

파비콘 및 앱 아이콘. 히어로만큼 진지하게 파비콘을 디자인하세요: 디자인에서 가장 많이 보이는 부분입니다. 16px에서 워드마크는 형체를 알아보기 어려워지므로, 대부분의 마크는 작은 크기(예: 굵은 글자 하나나 모양 하나)를 위해 축소된 버전이 필요하며, 밝은 탭과 어두운 탭 모두에서 읽을 수 있는 타일에 배치하세요. references/favicons.md를 읽으세요. 그런 다음 하나의 SVG로 세트를 구축하고 확인하세요:

node <skill-dir>/scripts/icons.mjs build mark.svg --out path/to/site --bg "#hex" --name "Site" --theme-color "#hex"
node <skill-dir>/scripts/icons.mjs audit path/to/site     # 미리보기 시트: 1x/2x 탭, 밝음/어두움, 홈 화면

재고 사진 없이 비주얼 만들기:

• 소프트웨어: HTML과 CSS로 제품의 실제 인터페이스를 구축하세요. 예: 실제 명령어와 출력이 있는 스타일링된 터미널 세션, 현실적인 데이터가 있는 앱 창. 어떤 일러스트레이션보다 설득력이 있고 브랜드에 부합합니다.
• 타이포그래피를 이미지로: 과장된 헤드라인, 숫자, 인용문, 인쇄된 카드처럼 설정된 메뉴.
• SVG 및 CSS: 기하학적 모양, 다이어그램, 지도, 차트, 패턴, 입자 질감(낮은 불투명도의 SVG feTurbulence 필터), 일관된 선 두께의 간단한 인라인 아이콘.
• 실제 사물을 손으로 그리는 것은 주의하세요. 음식, 사람, 동물, 식물, 건물, 도구는 수제 SVG가 가장 자주 실패하는 부분입니다. 비율이 어긋나고, 한 가지 디테일(빵의 점수 표시, 하이라이트, 손)이 다른 것으로 읽혀 잘못된 이유로 시선을 끕니다. 서투른 일러스트레이션은 없는 것보다 페이지에 더 해롭습니다. 따라서:
  • 코드로 할 수 있는 비주얼을 선호하세요

…

[더 이상의 내용은 생략됨]

이하 생략