Kadeka-SI/web-design-base-v1

web-design-base-v1은(는) 무엇을 하나요?

표준. 모든 사이트는 자신의 주제에 맞게 아트 디렉션되어야 하며, 템플릿으로 오인될 수 없고, 모든 세부 사항이 기술적으로 정확하며, 타이포그래피를 주요 도구로 사용해야 합니다.

방법. 주제를 읽고, 구체적인 시각적 아이디어 하나를 명명하고, 시스템을 구축하고, 콘텐츠를 계획한 다음 코드를 작성합니다. 시스템은 첫 코드 줄보다 먼저 존재해야 합니다. 코드를 작성하면서 내리는 선택은 기본값으로 표류하기 때문입니다.

0. 이 스킬을 읽는 방법

수준	의미
게이트(Gate)	마지막에 확인됩니다. 게이트를 통과하지 못한 페이지는 완료된 것이 아닙니다.
MUST / MUST NOT	기본 법칙입니다. 사용자가 요청한 경우에만 예외를 두며, 그 이유를 한 문장으로 설명합니다.
SHOULD	강력한 기본값입니다. 주제가 요구할 때는 묵시적으로 예외를 둡니다.
MAY	주제에 도움이 될 때 허용됩니다.

우선순위: 게이트 1 및 2 (접근성) → 사용자의 명시적 요청 → MUST → SHOULD → MAY. 사용자가 게이트를 위반하는 것을 요청하면, 가장 가까운 통과 가능한 버전을 구축하고 변경한 사항을 설명합니다. 같은 수준 내에서는 더 구체적인 규칙이 우선합니다.

예제는 시연이지 템플릿이 아닙니다. 아래의 모든 팔레트, 서체 쌍, 페리 시간표 및 코드 값은 좋은 답변의 형식을 보여줍니다. 관련 없는 주제에 그대로 복사하는 것은 이 스킬의 가장 흔한 실패입니다. 나열된 팔레트나 쌍을 그대로 선택하는 경우 주제에 대한 사실을 계획에 정당화하십시오.

1. 다섯 가지 게이트

1. 최초 페인트 및 No-JS. 히어로 헤드라인이 첫 프레임부터 보여야 합니다: 이동되지 않고, 잘리지 않으며(Ä Ö Ü의 움라우트 점 포함), 절대 애니메이션되지 않습니다. JavaScript가 비활성화되거나 모션이 축소된 상태에서 페이지가 완전해야 합니다.
2. 대비. 본문 텍스트 ≥ 7:1, 음소거 텍스트 및 강조-텍스트 ≥ 4.5:1, 큰 제목 ≥ 4.5:1, 구조적 테두리, 포커스 링 및 UI 부품 ≥ 3:1. 실제로 사용되는 모든 텍스트/표면 쌍에 대해 계산되어야 하며, 가정하지 않습니다(§6).
3. 팔레트 규율. 배경, 잉크, 하나의 강조 색상, 그리고 배경/잉크의 색조. 그라데이션, 글로우, 유리 모피즘 또는 색상 그림자는 없습니다.
4. 완전성. 모든 섹션에는 실제 콘텐츠(§8)가 있어야 하고, 모든 링크는 의도적인 곳으로 연결되어야 하며, 필요한 모든 상태가 존재해야 합니다.
5. 특수성. 팔레트와 서체가 변경 없이 다른 주제로 이동될 수 있다면 작업이 완료된 것이 아닙니다.

2. 모드 선택

모드	사용처	적용되는 규칙
쇼케이스(Showcase)	랜딩, 포트폴리오, 쇼핑몰 프론트, 에디토리얼, 이벤트, 기업	§12를 제외한 모든 것
제품 UI(Product UI)	대시보드, 관리자, 도구, 앱, 폼 중심 흐름	§1–§6, §10, §11, §12; 히어로 아키타입 및 섹션 풀 생략
문서(Docs)	문서, 핸드북, 모델 카드	쇼케이스의 타이포그래피 및 색상, 제품 UI의 구조(목차, 코드, 상태)
감사(Audit)	"내 페이지 검토/개선"	결과를 나열하고, 깨진 부분만 패치하며, 기존 정체성 유지
반복(Iterate)	"X 변경"	명명된 토큰 또는 규칙과 그 직접적인 종속 항목만 변경하고, 무음 리팩터링 금지

사용자가 브랜드(색상, 로고, 서체)를 제공하는 경우 브랜드가 팔레트와 서체입니다. 대비를 계산합니다. 브랜드 강조 색상이 텍스트로 4.5:1에 실패하면 큰 요소나 비텍스트 요소에만 사용하고 동일한 색조의 더 어두운 텍스트 변형을 추가합니다.

3. 구축 방법

코드보다 먼저 계획을 작성합니다: 사용자 언어로 12–16줄 (반복: 3줄 차이).

3.1 주제를 읽습니다. 방문자가 무엇을 하거나 이해해야 합니까? 주제가 실제 장소(항구, 주물 공장, 실험실, 주방, 법정, 기록 보관소)에서 어떻게 보이고, 들리고, 느껴집니까? 그들이 반드시 기억해야 할 한 가지는 무엇입니까?

3.2 시각적 아이디어를 명명합니다. 주제에서 가져온 구체적인 물체, 재료 또는 관례를 명명하는 한 문장. 예: 페리 노선의 경우 "인쇄된 출발 시간표: 무거운 좁은 숫자, 줄 그어진 행, 보드가 히어로." 추상적인 형용사("현대적, 깔끔한, 대담한")와 색상 목록은 아이디어가 아닙니다. 독창성 테스트: 이 카테고리의 일반적인 사이트가 가진 세 가지를 명명하고, 이 디자인이 그 중 어떤 것도 가지고 있지 않음을 확인합니다.

3.3 시스템 구축 계획에 표로 작성:

필드	값
팔레트(Palette)	bg, ink, accent (hex), 이름이 붙은 재료, 사용된 쌍별 계산된 비율
서체(Type)	display + text face, 주제와 연결된 이유, 가장 긴 단어 및 모바일 크기
히어로(Hero)	아키타입(§7.1) + 한 줄 정당화
레이아웃(Layout)	기본 로직(§7.2) 및 섹션이 이를 어떻게 변형하는지
모션(Motion)	하나의 시그니처 패턴 + 선택적 지원 패턴
섹션(Sections)	순서대로, 각각의 역할과 형태
시그니처 순간(Signature moment)	방문자가 기억하는 한 가지

3.4 콘텐츠 계획. 각 섹션을 구체적인 사실, 단계, 이름, 수치, 날짜, 가격과 함께 나열합니다. 내부적으로 일관되고 표시(§8.3)된다면 창작된 콘텐츠도 허용됩니다.

4. 기본 사항

4.1 head는 디자인의 일부입니다

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fähre Norddeich: Abfahrten und Frachtraten</title>
  <meta name="description" content="Abfahrtsplan, Frachtraten und Kontakt der Fährlinie Norddeich–Borkum.">
  <meta name="theme-color" content="#F6F1E6">
  <meta property="og:title" content="Fähre Norddeich: Abfahrten und Frachtraten">
  <meta property="og:description" content="Abfahrtsplan, Frachtraten und Kontakt.">
  <meta property="og:locale" content="de_DE">
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23C0430B'/%3E%3C/svg%3E">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Public+Sans:wght@400;500;600&display=swap">
  <script>
    /* Motion gate: hidden start states exist only if this class is set (§9) */
    if (!matchMedia("(prefers-reduced-motion: reduce)").matches && "IntersectionObserver" in window)
      document.documentElement.classList.add("js-motion");
  </script>
  <style>/* §4.2 base, §4.3 tokens, then components */</style>
</head>

• MUST: lang이 복사본과 일치하고, title 및 description이 구체적이며, 글꼴 URL이 §5에서 선택된 패밀리와 일치하고 display=swap으로 끝나며, 파비콘이 있어야 합니다(404를 방지하고 완성된 느낌을 줍니다).
• MUST NOT: 빈 head, 독일어 복사본에 lang="en", display=swap 없는 글꼴.
• 개인정보 보호(EU/DE). Google 서버에서 로드된 Google Fonts는 방문자 IP를 전송합니다. 독일 법원은 이를 GDPR 문제로 간주했습니다. 프로토타입의 경우 허용됩니다. 프로덕션의 경우 글꼴을 자체 호스팅(woff2 파일, @font-face)해야 한다고 보고서에 명시합니다. 환경이 외부 글꼴을 차단하는 경우 대체 스택(§4.5)이 여전히 디자인된 것처럼 보여야 합니다.

4.2 기본 CSS

모든 페이지를 이 기본 사항으로 시작합니다. 이동, 잘림 및 상속으로 인한 타이포그래피 손상을 방지합니다.

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h, 0px); }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.6;
  font-synthesis: none;              /* no fake bold/italic if a weight is not loaded */
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, table, form { margin: 0; }
ul, ol { padding-inline-start: 1.25em; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }  /* links stay recognizable */
nav a, .btn { text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[id] { scroll-margin-top: var(--header-h, 0px); }
table { border-collapse: collapse; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
::selection { background: var(--accent); color: var(--on-accent); }
.container { width: 100%; max-width: 90rem; margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.skip-link { position: absolute; inset-inline-start: -9999px; }
.skip-link:focus { inset-inline-start: var(--gutter); inset-block-start: 0.75rem; z-index: 20;
  background: var(--accent); color: var(--on-accent); padding: 0.75rem 1rem; }

• MUST NOT: 콘텐츠에 100vw, 유형 자르기에 overflow: hidden, 히어로 헤드라인에 음수 마진 또는 transform을 사용하지 않습니다. 광학적으로 교정하는 대신 글꼴의 자연스러운 측면 베어링을 수용합니다.
• 모든 텍스트는 .container 안에 넣어야 합니다. 히어로 헤드라인은 계획에 오프셋 레이아웃이 명명되지 않은 한 본문 복사본의 왼쪽 가장자리를 공유합니다.
• 전체 높이 히어로는 min-height: 100vh; min-height: 100svh;로 크기를 지정해야 합니다(svh 라인이 지원되는 곳에서 우선하므로 모바일 브라우저 막대가 히어로를 자르지 않습니다).
• 본문 복사본은 rem을 사용하고 고정 px를 사용하지 않으므로 방문자의 브라우저 글꼴 설정이 계속 작동합니다.

4.3 토큰

모든 색상, 글꼴, 크기 및 간격 값은 하나의 블록에 있습니다. 예제 값을 자신의 팔레트로 바꾸십시오(§6).

:root {
  color-scheme: light;                     /* "dark" for dark palettes: form controls and scrollbars follow */
  --bg: #F6F1E6;  --bg-soft: #ECE3D3;
  --ink: #1C1A17; --ink-muted: #635A4C;    /* muted: labels and captions only */
  --accent: #C0430B; --on-accent: #F6F1E6; /* text on accent fills */
  --line: #857A66;                         /* structural rules: ≥ 3:1 on bg and bg-soft */
  --line-soft: #C9BEA8;                    /* decorative hairlines only */
  --focus: var(--accent);                  /* re-assigned inside inverted bands */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-text: "Public Sans", "Segoe UI", sans-serif;
  --step-hero: clamp(3.25rem, 1rem + 11vw, 13rem);
  --step-h2:   clamp(2.25rem, 1rem + 5vw, 6rem);
  --step-label: 0.8125rem;
  --space-xs: 0.5rem;  --space-s: 1rem;
  --space-m: clamp(1.5rem, 1rem + 2vw, 3rem);
  --space-l: clamp(3rem, 2rem + 4vw, 6.5rem);
  --space-xl: clamp(5rem, 3rem + 8vw, 11rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --measure: 66ch;
  --header-h: 0px;                         /* set to the sticky header height, else 0 */
  --rule: 1px solid var(--line);
}

MUST: 모든 값은 이 토큰에서 가져와야 합니다. MUST NOT: 규칙에 인라인 16진수 또는 프레임워크 기본 팔레트(gray-500, slate-200)를 사용하지 않습니다. 유체 크기는 rem과 vw를 혼합하므로 브라우저 확대 및 글꼴 설정이 계속 크기를 조정합니다(순수 vw는 확대를 무시합니다).

4.4 언어 및 로케일

• 복사본은 요청 언어로 작성됩니다. lang이 일치합니다. Sie/du는 일관성을 유지합니다.
• 독일어: 좁은 열에서 hyphens: auto (올바른 lang 필요); 글꼴 하위 집합은 äöüß 및 „ “ ‚ ‘ –를 반드시 포함해야 합니다. 독일어 페이지에는 영어 마케팅 단어 없이 인용 부호(„…“), 숫자와 단위 사이에   (12 kg, 9:30 Uhr), 날짜는 1. November 2026 형식을 사용합니다.
• 비즈니스용 독일어 사이트는 바닥글에 Impressum 및 Datenschutz 링크가 필요합니다(프로토타입의 경우 인페이지 데모 섹션으로 충분합니다). 2025년부터 BFSG는 많은 소비자 대상 전자 상거래 서비스에 대해 접근성을 법적 의무로 만들었습니다. WCAG 2.1 AA가 최소 기준이며, 이 스킬의 게이트는 이미 이를 초과합니다.

4.5 네트워크 오류에서 살아남는 글꼴

같은 클래스의 대체 글꼴을 선택합니다(압축 → "Arial Narrow"; 세리프 → Georgia; 그로테스크 → system-ui). 두 대체 글꼴은 시각적으로 구별되어야 하므로 글꼴이 실패할 때 페이지의 계층 구조를 유지합니다. 사용하는 가중치만 로드합니다. 디스플레이에 사용되는 가중치는 로드된 패밀리에 존재해야 합니다(§5 참조).

4.6 중단점 및 375 px

모바일 우선. 중단점: 480, 760, 1024, 1320 px. 375 px에서: 가로 스크롤 없음, 히어로 헤드라인 ≤ 5줄, 가장 긴 단어가 들어맞음, 터치 대상 ≥ 44 × 44 px, 고정 헤더가 앵커를 덮지 않음(--header-h), 모든 2열 레이아웃에는 설계된 모바일 형식이 있습니다.

가장 긴 단어 규칙. 사용 가능한 너비 ≈ 375 − 2 × 19 ≈ 335 px. 최대 히어로 크기(px) ≈ 335 ÷ (가장 긴 단어의 문자 수 × 너비 계수). 너비 계수: 압축 0.42, 세리프 0.52, 그로테스크 0.58, 확장 0.68. clamp() 최소값을 해당 값으로 설정합니다. 압축 서체의 "Frachtabfertigung"(17자)는 ≈ 47 px를 허용하므로 위의 52 px 최소값은 넘칠 것입니다. 최소값을 낮추거나 소프트 하이픈(Fracht­abfertigung)을 추가합니다. 긴 독일어 합성어가 히어로에서 overflow-wrap: anywhere를 강제하지 않도록 합니다.

5. 타이포그래피: 주요 도구

정확히 두 개의 패밀리를 사용합니다: 하나는 디스플레이용, 하나는 텍스트용.

디스플레이(Display)	텍스트(Text)	어울림
Big Shoulders Display	Public Sans	시간표, 물류, 운송, 스포츠
Barlow Condensed	Barlow	교통, 안내 표지판, 클럽, 이벤트
Fraunces	Karla	음식, 공예, 인쇄, 환대
Instrument Serif (400 only)	Work Sans	에디토리얼, 패션, 건축
Newsreader	Libre Franklin	법률, 기관, 연구
Familjen Grotesk	Source Serif 4	잡지, 문화, 비영리
IBM Plex Mono (display)	IBM Plex Sans	실험실, 도구, 데이터, 문서
Archivo (width axis 112–125)	Spline Sans	항구, 산업, 제품 시트
Anton (400 only)	Barlow	캠페인, 장소, 포스터
Bodoni Moda	Karla	명품, 갤러리, 경매

이는 시작점입니다. 주제에 따라 선택하십시오. 물류가 아닌 주제에 대해 첫 번째 행을 선택한다는 것은 위치에 의해 선택했지 주제에 의해 선택한 것이 아님을 의미합니다. 글꼴의 실제 축과 가중치를 확인하십시오: Instrument Serif 및 Anton은 하나의 가중치만 있으므로 "heavy"를 사용할 수 없으며 font-synthesis: none은 브라우저가 가짜로 만들지 못하게 합니다. Archivo는 URL에서 wdth가 필요합니다(Archivo:wdth,[email protected],700..900) 및 CSS에서 font-stretch가 필요합니다.

MUST NOT: Inter, Roboto, Arial, Poppins, Playfair Display, Lora 또는 Merriweather를 정체성 쌍으로 사용하지 않습니다. MUST NOT: 하나의 패밀리를 모든 것에 사용하지 않습니다. 디스플레이로서의 모노스페이스는...

… [번역을 위해 잘림]