swiss-editorial-minimalist (SKILLS.md v3.1)

모델이 만든 페이지는 보통 모델이 봤던 모든 페이지의 평균처럼 보입니다: 그라데이션 히어로, 이모지 아이콘이 있는 둥근 카드 한 줄, 모든 버튼 아래 그림자, 그리고 무지개 색상을 로드하는 Tailwind CDN입니다. 그중 잘못된 것은 없지만, 결정된 것도 없습니다.

이 파일은 그 기본값을 결정으로 대체합니다. 세 가지를 다룹니다: 하우스 스타일(무엇을 보여주고 무엇을 생략할지), 이를 유지하는 기술 규칙(토큰, 스케일, 중단점, 접근성), 그리고 결과물이 출시되기 전에 확인하는 게이트입니다.

규칙은 작성된 그대로 따르세요. 요청이 이 규칙과 충돌하는 경우, 섹션 0이 수행할 작업을 알려줍니다.

0. 메타 규칙 (먼저 읽으세요)

이 파일을 받았을 때 해야 할 일

코드를 작성하기 전에 전체 파일을 읽으세요. 규칙은 서로 의존합니다.
이 파일이 이미 결정한 사항에 대해 명확히 묻지 마세요. 합리적인 가정을 바탕으로 실행하고 한 줄로 설명하세요.
요청이 하우스 스타일과 충돌하는 경우(예: "화려한", "장난기 있는", "그라데이션 히어로", "이모지 아이콘", "20px 둥근 카드"), 진행하기 전에 한 번 확인하세요:

이 요청은 SKILLS.md의 섹션 X를 위반합니다. 가이드를 벗어나지 않는 한, 스위스-편집 미니멀리스트 스타일로 해석하겠습니다.

답변을 기다린 후 빌드하세요.
기본 출력은 하나의 완전한 HTML 파일이며, 인라인 <style>과 <script>를 포함합니다. 사용자가 요청하지 않는 한 조각을 제공하지 마세요.
CSS는 항상 섹션 12의 :root 블록으로 시작하세요.

이 스타일을 명명하는 방법

일관된 어휘를 유지하기 위해 다음 용어를 사용하세요. "모던", "깔끔한" 또는 "세련된"을 단독으로 사용하지 마세요. 구체적인 의미가 없습니다.

"Swiss-editorial Minimalist": 기본값이며, 이 파일에 설명되어 있습니다.
"Soft Brutalism": 더 두꺼운 테두리와 거친 그리드.
"Neo-Brutalist Editorial": 하나의 악센트 색상이 추가되고 하드 오프셋 그림자가 있습니다. 그림자는 기본 스타일에서 금지되므로, 사용자가 명시적으로 요청할 때만 이 이름을 사용하세요.
"Monochrome Magazine": 타이포그래피 중심이며, 그림 카드가 없습니다.

1. 디자인 철학

세 가지 원칙, 모두 협상 불가:

콘텐츠가 왕이며, 타이포그래피가 건축입니다. 장식적인 일러스트레이션은 없습니다. 큰 제목이 주요 시각적 요소입니다.
구조는 보이게 유지됩니다. 테두리, 그리드 및 섹션 번호는 있는 그대로 나타납니다. 숨기지 않습니다.
모노크롬 우선, 나중에 색상. 기본값은 검은색, 흰색 및 회색입니다. 색상은 다크 모드에서만 또는 최소한의 악센트로만 나타납니다.

페이지는 엔지니어가 만든 인쇄 잡지처럼 차분하고, 확고하며, 똑똑하고, 편집적인 느낌을 주어야 합니다.

2. 팔레트

라이트 모드 (기본값)

:root {
  --bg:     #f5f5f5; /* 메인 배경, 순수 흰색 아님 */
  --ink:    #111111; /* 기본 텍스트, 순수 검은색 아님 */
  --muted:  #666666; /* 보조 텍스트 */
  --line:   #e0e0e0; /* 테두리와 구분선 */
  --card:   #eeeeee; /* 카드 배경 */
  --accent: #d4d4d4; /* 중립 악센트 */
  --dark:   #0a0a0a; /* 고대비 섹션 (스테이트먼트, 푸터) */
  --white:  #ffffff;
}

다크 모드

body.dark {
  --bg:     #121212;
  --ink:    #f0f0f0;
  --muted:  #999999;
  --line:   #333333;
  --card:   #1e1e1e;
  --accent: #2a2a2a;
  --dark:   #050505;
  --white:  #181818;
}

색상 규칙 (필수)

본문 배경은 절대 #fff가 아닙니다. 오프화이트 #f5f5f5를 사용하세요.
텍스트는 절대 #000이 아닙니다. #111을 사용하세요.
브랜드 색상은 페이지당 최대 한두 번 나타나며, 항상 CSS 변수를 통해 사용하고 하드코딩하지 않습니다.
밝은 색상은 금지됩니다(상태, 아이콘 및 텍스트용). 금지된 예: emerald-500, green-600, red-500, blue-500, yellow-400, #27c93f, #ff5f56, #ffbd2e. 이를 var(--ink) 또는 var(--muted)의 모노크롬 기호(●, ▲, ✕, →)로 대체하세요.
대비 섹션(스테이트먼트, CTA, 푸터)은 밝은 텍스트와 함께 var(--dark)를 사용합니다.
다크 모드는 필수입니다. 기본적으로 prefers-color-scheme을 따르고 사용자가 재정의할 수 있도록 하여 localStorage에 선택 사항을 저장하세요. 토글은 섹션 5("테마 토글")의 필수 마크업을 사용합니다.

3. 타이포그래피

글꼴 페어링

제목:    'Space Grotesk'  (또는 Inter Tight, General Sans, Neue Montreal)
본문:    'DM Sans'        (또는 Inter, Satoshi, IBM Plex Sans)
모노:    'JetBrains Mono' (또는 시스템 모노스페이스)

본문 텍스트에 장식용, 필기체 또는 세리프 글꼴을 사용하지 마세요. 세리프는 인용문이나 서명에만 허용됩니다(예: Georgia, 이탤릭체).

타입 스케일 (clamp는 필수이므로, 미디어 쿼리 없이 타입이 조정됩니다)

/* 히어로 H1 */
font-size: clamp(55px, 5.6vw, 94px);   /* 또는 좁은 히어로의 경우 clamp(32px, 4.3vw, 62px) */
line-height: 1.025;
letter-spacing: -0.07em;               /* 네거티브, 항상 */
font-weight: 500;                      /* 700이 아니고 400도 아님 */

/* 섹션 H2 */
font-size: clamp(42px, 4.2vw, 69px);
line-height: 1.08;
letter-spacing: -0.06em;
font-weight: 500;

/* 카드 H3 */
font-size: clamp(22px, 2.2vw, 27px);
line-height: 1.2;
letter-spacing: -0.04em;
font-weight: 500;

/* 본문 */
font-size: 16px–18px;
line-height: 1.7–1.8;
color: var(--muted);

/* 마이크로 / 아이브로우 / 라벨 */
font-size: 12px;
letter-spacing: 0.15em–0.17em;
font-weight: 700;
text-transform: uppercase;

하드 타이포그래피 규칙

제목은 항상 네거티브 자간을 사용합니다(-0.04em ~ -0.07em 사이). 이것이 이 스타일의 특징입니다.
제목 두께는 500입니다. 볼드 700은 편집적인 느낌을 없앱니다.
아이브로우와 마이크로 라벨은 항상 대문자(UPPERCASE)이며 넓은 자간(0.15em 이상)입니다.
섹션 번호(01, 02, 03)는 마이크로 라벨로 나타납니다. 숨기지 마세요.
헤드라인 끝의 마침표는 선택적으로 악센트 역할을 할 수 있습니다:
```
<h1>Judul.<span style="color:var(--muted)">.</span></h1>
```
본문 텍스트는 왼쪽 정렬입니다. 긴 단락을 가운데 정렬하지 마세요.

4. 레이아웃 및 그리드

컨테이너

.wrap {
  max-width: 1440px;
  margin: auto;
  padding: 0 clamp(24px, 5vw, 84px);
}

수직 간격

섹션 간: 데스크톱에서 padding: 130px 0, 모바일에서 85px로 줄어듦.
헤더 높이: 데스크톱에서 88px, 모바일에서 75px.
카드 간 간격: 15–16px. 24px 이상이 아닌 좁게 유지하세요.

일반적인 그리드 패턴

/* 비대칭 히어로 */
.hero { grid-template-columns: 1.04fr .96fr; }

/* 2열 섹션 헤드 */
.section-head { grid-template-columns: 1fr 1fr; align-items: end; }

/* 3열 기능 */
.features { grid-template-columns: repeat(3, 1fr); gap: 15px; }

/* 스테이트먼트 */
.statement-grid { grid-template-columns: 1fr 1fr; gap: 60px; }

/* 사용후기 (섹션 8 참조) */
.testimonial-grid { grid-template-columns: 1.2fr .8fr; gap: 60px; }

레이아웃 규칙 (필수)

섹션은 그림자나 다른 배경이 아닌 1px var(--line) 테두리로 구분됩니다.
큰 border-radius를 피하세요. 버튼과 카드는 최대 4px입니다. 이미지와 스크린샷만 12–22px입니다.
섹션 헤드에 align-items: end를 사용하여 제목과 단락이 같은 기준선에 놓이도록 하세요. 이것이 편집 트릭입니다.
비대칭 그리드(1.04fr / .96fr)가 1fr / 1fr보다 더 좋아 보입니다.
본문 텍스트를 가운데 정렬하지 마세요. 항상 왼쪽 정렬하세요.
모든 섹션에는 1px var(--line)의 border-top 또는 border-bottom이 필요합니다.

5. 컴포넌트

버튼

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-radius: 4px;                 /* 거의 정사각형 */
  padding: 15px 20px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s, background .2s;
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); background: #333333; }
}

/* 변형 */
.btn.outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.light   { background: var(--bg); color: var(--ink); border-color: var(--bg); }

버튼 규칙:

모든 버튼에는 화살표 아이콘이 있습니다: 외부 링크는 ↗, 스크롤은 ↓.
호버는 버튼을 -2px 위로 들어 올리며, @media (hover: hover) 내에서만 작동합니다. 크기가 조정되거나 그림자가 추가되지 않습니다.
.btn.light에 #fff를 사용하지 마세요. var(--bg)를 사용하세요.

기능 카드

┌─────────────────────────┐
│  [SVG 라인 아트 8:5]     │  ← 추상 모노크롬 일러스트레이션, 또는 비어 있음
├─────────────────────────┤
│  라벨 마이크로            │  ← 대문자, 넓은 자간
│  카드 제목.              │  ← Space Grotesk 24–27px
│  설명 1–2문장            │  ← muted, 14px
└─────────────────────────┘

배경 var(--card), border-radius 없음(또는 최대 4px).
테두리 없음(카드가 배경에 혼합됨), 또는 1px solid var(--line).

호버: transform: translateY(-5px), @media (hover: hover) 내에서만:

@media (hover: hover) { .card:hover { transform: translateY(-5px); } }

일러스트레이션은 stroke-width: 1.2px, fill: none, 잉크 색상의 SVG 라인 아트입니다. 사진, 그라데이션, 이모지가 아닙니다.

헤더

높이 88px, border-bottom: 1px solid var(--line).
브랜드: 34px 로고와 Space Grotesk 22px의 이름, letter-spacing: -1.1px.
내비게이션: 14px, 두께 600, 간격 36px.
액션: 테마 토글(해/달 아이콘, 아래 "테마 토글"의 필수 마크업), CTA 버튼, 모바일용 햄버거.
모바일 내비게이션은 헤더 아래 절대 패널로 열리고 Escape 키로 닫힙니다.
햄버거에는 aria-label, aria-expanded 및 aria-controls가 필요합니다. 테마 토글에는 aria-label 및 aria-pressed가 필요합니다(아래 참조).

테마 토글 (필수 마크업)

모든 페이지에는 다크 모드 토글이 있으며 항상 이 마크업을 사용합니다. 아이콘을 다시 그리거나, 이모지로 바꾸거나, 텍스트 라벨을 추가하지 마세요. SVG 경로, id 값 및 aria-label은 고정되어 있습니다.

<div class="header-actions">
  <!-- 다크 모드 토글 버튼 -->
  <button id="theme-toggle" type="button" class="theme-toggle" aria-label="다크/라이트 모드 전환" aria-pressed="false">
    <!-- 해 아이콘 (라이트 모드에서 숨김, 다크 모드에서 표시) -->
    <svg id="sun-icon" class="theme-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.8" aria-hidden="true">
      <circle cx="12" cy="12" r="5"></circle>
      <path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"></path>
    </svg>
    <!-- 달 아이콘 (라이트 모드에서 표시, 다크 모드에서 숨김) -->
    <svg id="moon-icon" class="theme-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.8" aria-hidden="true">
      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
    </svg>
  </button>
  <!-- CTA 버튼과 햄버거는 같은 래퍼 내 여기에 위치 -->
</div>

.header-actions { display: flex; align-items: center; gap: 16px; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;                    /* 탭 대상 */
  min-height: 44px;
  padding: 8px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s;
}
@media (hover: hover) {
  .theme-toggle:hover { background: var(--card); }
}
.theme-icon { width: 20px; height: 20px; }

/* 아이콘 상태는 body.dark를 따르므로, JavaScript에서 클래스 교체 불필요 */
#sun-icon  { display: none; }
#moon-icon { display: block; }
body.dark #sun-icon  { display: block; }
body.dark #moon-icon { display: none; }

<!-- <body> 내 첫 번째 요소, 저장된 테마가 첫 페인트 전에 적용되도록 함 -->
<script>
  (function () {
    var KEY = 'theme';
    var saved = null;
    try { saved = localStorage.getItem(KEY); } catch (e) {}
    var dark = saved ? saved === 'dark'
                     : window.matchMedia('(prefers-color-scheme: dark)').matches;
    document.body.classList.toggle('dark', dark);

    document.addEventListener('DOMContentLoaded', function () {
      var btn = document.getElementById('theme-toggle');
      if (!btn) return;
      btn.setAttribute('aria-pressed', String(document.body.classList.contains('dark')));
      btn.addEventListener('click', function () {
        var isDark = document.body.classList.toggle('dark');
        btn.setAttribute('aria-pressed', String(isDark));
        try { localStorage.setItem(KEY, isDark ? 'dark' : 'light'); } catch (e) {}
      });
    });
  })();
</script>

테마 토글 규칙:

래퍼(.header-actions), 버튼 id="theme-toggle", 아이콘 id sun-icon 및 moon-icon을 정확히 작성된 대로 유지하세요. 스크립트와 체크리스트가 이를 찾습니다.
달은 라이트 모드에서 표시됩니다(클릭하면 다크 모드로 전환). 해는 다크 모드에서 표시됩니다(클릭하면 라이트 모드로 전환). 기본 상태는 라이트 모드이며, prefers-color-scheme: dark 또는 저장된 선택 사항이 달리 지정하지 않는 한 그렇습니다.
버튼은 변수에서만 색상을 가져옵니다: 아이콘과 텍스트는 var(--ink), 테두리는 var(--line), 호버 배경은 var(--card). 색상을 하드코딩하지 마세요.
border-radius는 최대 4px, 탭 대상은 최소 44×44px, 호버 상태는 @media (hover: hover) 내에 있어야 합니다.
아이콘은 20px, stroke="currentColor", stroke-width="1.8", fill="none", aria-hidden="true"입니다. 버튼은 aria-label을 가집니다.
이 버튼에 aria-pressed를 사용하세요. aria-expanded는 햄버거용이며, 테마 토글용이 아닙니다.
선택 사항을 키 theme로 localStorage에 저장하고 값은 light 또는 dark입니다. 저장소 호출을 try/catch로 감싸세요.
토글은 Tailwind 없이 작동합니다. 원본 스니펫은 Tailwind 유틸리티 클래스(flex items-center gap-4, p-2, w-5 h-5, hidden/block)를 사용했으며, Tailwind CDN이 금지되었으므로(섹션 10) 여기서는 위의 바닐라 CSS로 대체되었습니다. 프로젝트에 이미 빌드 단계와 함께 Tailwind를 실행 중인 경우 유틸리티 클래스는 유지될 수 있지만, 색상은 text-[var(--ink)]로 작성해야 합니다. text.var(--ink) 형식은 오타이며 아무 효과가 없습니다.

푸터

배경 var(--dark), 밝은 텍스트(var(--ink)가 아닌 var(--muted)).
두 열: 사이트 정보, 링크
세 번째 열은 아래쪽에 있으며 들여쓰기 없이, 그렇지 않으면 오른쪽 margin이나 float 없이.

[참고: 콘텐츠가 잘렸습니다. 위 규칙에 따라 전체 문서가 현지화되었습니다.]

RydzzKen/swiss-editorial-minimalist

swiss-editorial-minimalist란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

문서