kennedys0/taste-style-swiss-editorial

이 스킬은 사용자가 명시적으로 선택하거나 확인된 프로젝트 구성에서 지정한 경우에만 사용하십시오. 설명되지 않은 새로운 UI 요청의 경우, 여기서 사용자의 취향을 결정하지 말고 스타일 선택기를 사용하십시오. 기존 브랜드, 접근성 및 사용자 재정의는 아래 모든 예제보다 우선합니다. 다음 스타일 가이드는 스타일 선택 전에 UI 코딩을 시작할 수 있는 권한이 아닙니다.

스타일 팩: Swiss / Editorial

ID: swiss-editorial
시그니처: 엄격한 그리드 기반 타이포그래피 위계, 극적인 스케일 대비, 구조적 헤어라인 규칙, 번호가 매겨진 인덱스, 의도적인 네거티브 공간.

이것은 스타일 팩이지, 필수 기본값이 아닙니다. 명시적 선택 또는 확인된 적용 가능한 프로젝트 스타일 후에만 로드하십시오. 프로젝트 지침은 개별 선택을 재정의할 수 있습니다. 접근성, 유용성 및 브랜드 제약 조건을 유지하십시오. 글꼴은 제안 사항이지 필수 종속성이 아닙니다. 검은색 산세리프체 텍스트만 있는 일반 페이지는 Swiss Editorial로 간주되지 않습니다.

적합성 / 장단점

• 적합한 경우: 고급 디자인 에이전시, 건축 출판물, 에디토리얼 포트폴리오, 문화 잡지, 연례 보고서, 럭셔리 제품 내러티브.
• 주의해야 할 경우: 대형 디스플레이 타이포그래피가 반복적인 데이터 입력을 느리게 하는 빠른 속도의 트랜잭션 운영 도구.
• 참고 방향:
  • 클래식 취리히 국제 스타일: 선명한 종이 흰색 배경(#FFFFFF 또는 #F7F7F7), 대비되는 짙은 검은색 타이포그래피(#111111), 1px 구조적 구분선, 번호가 매겨진 인덱스(01, 02), 하나의 스위스 레드(#E3000F) 사용.
  • 모던 에디토리얼 클라인 블루: 인터내셔널 클라인 블루(#002FA7)를 내비게이션 및 주요 액션의 정밀 초점 악센트로 사용하는 초깔끔한 단색 캔버스.

Swiss editorial 충실도 게이트 — 필수

swiss-editorial 페이지를 완료라고 부르기 전에, 열리는 뷰포트가 엄격하고 그리드 정렬된 타이포그래피 에디토리얼 작업으로 명확하게 읽혀야 합니다. 사용자가 이 스타일을 선택했는데 드라마틱한 스케일 대비와 구조적 규칙이 없는 일반적인 미니멀 페이지는 FAIL입니다.

성공적인 swiss-editorial 구현은 다음 모두를 보여줍니다:

1. 극단적인 타이포그래피 스케일 대비: 거대한 그로테스크 디스플레이 헤드라인(데스크탑 48px–72px / 모바일 32px–44px, 좁은 자간)과 규율 있는 본문(16px, line-height 1.55) 사이의 결정적이고 타협하지 않는 대비, 대문자 트래킹 섹션 레이블(letter-spacing: 0.08em).
2. 구조적 수평 헤어라인 규칙: 콘텐츠 섹션, 컬럼 경계, 메타데이터 헤더가 깔끔한 1px 실선 규칙(border-top: 1px solid #111111)으로 구분되어 명확한 시각적 선반을 형성합니다.
3. 번호가 매겨진 섹션 위계: 주요 아티클 블록 위나 옆에 별개의 에디토리얼 인덱스 번호(01, 02, 03)를 배치하여 스캔 가능한 시각적 앵커를 만듭니다.
4. 엄격한 다중 컬럼 그리드 정렬: 레이아웃은 넉넉한 비대칭 거터와 마진을 가진 12열 데스크탑 그리드를 엄격히 따릅니다. 콘텐츠는 그리드 앵커링 없이 느슨하게 떠다니지 않습니다.
5. 단색 베이스 + 1개의 고임팩트 신호 악센트: 레이아웃은 엄격히 단색(검정, 오프화이트, 종이 회색)을 유지하며, 정확히 하나의 의도적인 신호 악센트(스위스 레드 #E3000F 또는 클라인 블루 #002FA7)를 활성 링크, 인덱스 태그 또는 주요 CTA에 절약적으로 사용합니다.

첫 뷰포트 테스트: 데스크탑 스크린샷에서 페이지 제목을 읽지 않고 거대한 헤드라인 스케일, 1px 구조적 구분선, 번호가 매겨진 섹션 마커, 의도적인 비대칭 그리드를 식별하십시오. 표준 블로그 템플릿처럼 보인다면 타이포그래피 스케일과 그리드 규칙을 높이십시오.

명시적 swiss editorial 타이포그래피 예외 — 드라마틱한 스케일 필수

Swiss-editorial 특정 재정의: 과도한 글꼴 크기나 빈 공간에 대한 보편적인 안티-슬롭 주의사항은 여기서 큰 디스플레이 헤드라인(48px–72px)이나 넉넉한 공백을 금지하는 것으로 해석되어서는 안 됩니다. Swiss Typography(Josef Müller-Brockmann, Max Bill)에서 능동적인 네거티브 공간과 대담한 스케일 대비는 장식적인 그래픽이나 그림자를 대체하는 기본 구조 재료입니다.

• 허용되는 타이포그래피 처리: 대형 디스플레이 스케일(최대 72px), 번호가 매겨진 인덱스 타이포그래피, 헤어라인 구조적 테두리, 대문자 트래킹 메타데이터, 고임팩트 단일 악센트 링크.
• 안티-슬롭 경계: 편집 맥락 없이 임의의 떠다니는 인용문, 가짜 발행물 호수, 또는 실제 읽을 수 있는 콘텐츠를 압도하는 과도하게 큰 헤드라인을 붙이지 마십시오.
• 안티-슬롭 해석: 모든 평방 인치를 카드로 채우려고 하지 말고 그리드 규율, 타이포그래피 리듬, 정보 명확성으로 swiss 레이아웃을 평가하십시오. 초점을 유도하는 공백은 정통 디자인입니다.

타이포그래피 및 타입라이팅

목적적 그로테스크 산세리프: Helvetica Neue, Neue Haas Grotesk, Arial, Inter, 또는 시스템 산세리프. 헤드라인: 48–72 px 데스크탑(weight 700–800, letter-spacing: -0.03em); 부제목: 24–32 px; 본문: 16–18 px (line-height 1.55–1.65); 인덱스 숫자 및 캡션: 12–14 px 대문자(letter-spacing: 0.08em).

색상 방향

• 라이트 모드 (선명한 갤러리 화이트 페이퍼):
  • 캔버스 베이스: 종이 흰색(#FFFFFF 또는 따뜻한 갤러리 흰색 #FBFBFA).
  • 잉크 / 타이포그래피: 딥 옵시디언 블랙(#111111).
  • 구분선: 실선 헤어라인 스트로크(#111111 또는 #D1D5DB).
  • 보조 회색: 에디토리얼 중립(#6B7280).
• 다크 모드 (드라마틱한 다크 모놀리스):
  • 캔버스 베이스: 피치 옵시디언 캔버스(#0D0D0D).
  • 잉크 / 타이포그래피: 본-화이트 디스플레이 타이포그래피(#F5F5F5).
  • 구분선: 반투명 흰색 헤어라인 규칙(rgba(255, 255, 255, 0.20) 또는 #2A2A2A).
  • 보조 회색: 스톤 그레이(#9CA3AF).
• 단일 신호 악센트: 스위스 레드(#E3000F 라이트 / #EF4444 다크) 또는 인터내셔널 클라인 블루(#002FA7 라이트 / #3B82F6 다크).
• 테마 반전 규칙: swiss editorial에서 다크/라이트 모드는 권위적인 타이포그래피 극성 전환입니다. 다크 모드에서 캔버스는 #0D0D0D, 타이포그래피는 #F5F5F5입니다. 기본 버튼은 깔끔하게 반전됩니다(라이트 모드: 단색 검정 블록에 흰색 텍스트; 다크 모드: 단색 흰색 블록에 검정 텍스트). 어두운 캔버스에 검정 텍스트나 흰색 캔버스에 흰색 텍스트는 엄격히 금지됩니다.

레이아웃 및 기하학

모서리는 면도날처럼 날카롭습니다(기본 0px border-radius, 최대 2px); 넉넉한 바깥 여백; 엄격한 12열 그리드 정렬. 구조적 1px 수평 규칙이 콘텐츠 블록을 프레임화합니다.

표면, 깊이, 질감

표면은 완전히 평평하고 장식이 없으며 잉크처럼 선명합니다. 드롭 섀도우, 배경 그라데이션, 블러가 전혀 없습니다. 깊이는 순수하게 타이포그래피 스케일, 무게, 공간적 병치를 통해 전달됩니다.

컴포넌트 해부학 및 인터랙션

• 에디토리얼 기본 CTA: 선명한 단색 검정 블록에 흰색 타이포그래피, 또는 2px 스트로크 오프셋이 있는 깔끔한 밑줄 텍스트 링크.
• 번호가 매겨진 인덱스 태그: 작은 대문자 태그: [ 01 / ARCHITECTURE ].
• 구분선: border-top: 1px solid #111111; padding-top: 1.5rem; margin-top: 2rem;.
• 표 형식 메타데이터: 헤어라인 구분자로 분리된 2열 키-값 쌍.

모션

미니멀, 즉각적, 또는 120–160 ms의 깔끔한 선형 전환. 스프링 바운스, 떠다니는 패럴랙스 없음. 선명한 상태 변화에 집중하십시오.

선택적 Anime.js v4 레시피

• 모션 결정: 스크롤 시 깔끔한 텍스트 불투명도 페이드 또는 수평 규칙 확장.
• 시작 지속 시간: 140ms (0 = 즉시); 작업 및 사용자 선호도에 따라 조정.
• 피해야 할 것: 탄성 모션, 3D 회전, 장난스러운 움직임.
• 종속성: 기본적으로 CSS/native. 요청된 인터랙션이 정당화하는 경우에만 Anime.js v4를 사용하십시오. 사용 가능한 경우 Taste Engine references/motion-engine.md를 따르십시오; 독립 실행형 스킬은 위의 축소 모션 및 비장식 루프 원칙을 따릅니다.

UI 작성 및 마이크로카피

교양 있고, 간결하며, 명확합니다. 예: “Selected Works 2026”, “Index”, “Read Documentation”, “01 / Overview”. 구어체 속어나 열정적인 판매 과대광고는 피하십시오.

스타터 토큰 (제안 사항, 완전한 테마 아님)

토큰	라이트 모드 기본값	다크 모드 기본값
--taste-swiss-bg	#ffffff	#0d0d0d
--taste-swiss-ink	#111111	#f5f5f5
--taste-swiss-accent	#e3000f	#ef4444
--taste-swiss-muted	#6b7280	#9ca3af
--taste-swiss-rule	1px solid #111111	1px solid rgba(255, 255, 255, 0.20)
--taste-swiss-radius	0px	0px
--taste-swiss-font-heading	'Helvetica Neue', Inter, system-ui, sans-serif	'Helvetica Neue', Inter, system-ui, sans-serif
--taste-swiss-font-body	'Helvetica Neue', Inter, system-ui, sans-serif	'Helvetica Neue', Inter, system-ui, sans-serif
--taste-swiss-motion-duration	120ms	120ms

토큰은 방향을 나타내며 모든 팔레트/플랫폼에 복사-붙여넣기로 보장되지 않습니다. 프로젝트 수준에서 --taste-swiss-*를 정의하고, 색상 대비를 확인하며, 리터럴 값을 흩뿌리지 말고 테마 토큰을 통해 적용하십시오.

히어로 구성 (전체 첫 뷰포트)

공개 포트폴리오/랜딩/홈페이지에 히어로가 있는 경우: 하나의 표시 화면 헤더+히어로 구성을 사용하십시오. 100vh 폴백이 있는 min-height: 100svh를 기반으로 하고, 헤더가 일반 흐름에 있을 때만 실제 헤더를 빼십시오; 히어로가 접근성과 짧은 모바일 화면을 위해 확장되도록 하십시오. 개인 대시보드나 다른 작업 화면에는 적용하지 마십시오; 사용자 직접 재정의가 우선합니다. 스타일별 방향: 권위 있고 거대한 디스플레이 제목, 명확한 섹션 번호 매기기, 히어로 내러티브와 주요 내비게이션 사이의 비대칭 그리드 분할로 시작 화면을 고정하십시오. 공백은 비어 있는 것이 아니라 의도적이고 구성된 느낌이어야 합니다. 라우터 references/hero-layout.md가 있을 때 참조하십시오. 독립 실행형 사용은 동일한 반응형 및 안티-슬롭 원칙을 따릅니다.

스타일별 품질 게이트

• 해야 할 것: 엄격한 12열 그리드 정렬 확인; 드라마틱한 헤드라인-본문 스케일 비율 유지; 1px 헤어라인 규칙이 섹션을 깔끔하게 분리하는지 확인; 악센트 색상을 엄격히 단일로 유지; 다크/라이트 모드 전환 확인하여 타이포그래피, 캔버스, 헤어라인 규칙, 주요 액션이 색상 충돌 없이 깔끔하게 전환되는지 확인(최소 4.5:1 대비).
• 하지 말아야 할 것: 드롭 섀도우, 둥근 버블, 장식적인 그라데이션을 추가하지 마십시오; 의미 없는 배지 칩으로 공백을 어지럽히지 마십시오; 작은 레이블에 저대비 회색 텍스트를 사용하지 마십시오; 어두운 옵시디언 캔버스에 검정 타이포그래피를 남기지 마십시오.
• 데스크탑과 모바일 일관성 확인; 가시적인 키보드 포커스(:focus-visible); 로딩, 비어 있음, 비활성화, 오류 및 성공 상태; 축소 모션 동작(prefers-reduced-motion) 확인.
• 스타일별 가정을 관련 없는 프로젝트에 주입하지 마십시오. 스타일을 결합할 때는 기본 스타일과 차용한 기능을 명시적으로 지정하십시오.

보편적 안티-슬롭 게이트 (자체 포함)

모든 요소는 그 자리를 얻기 위해 노력해야 합니다. 장식보다 콘텐츠가 먼저입니다. 불확실성을 장식하지 마십시오. 잔액, 지표, 사용자 평가, 사용자, 로고, 승인, 확인됨/라이브/온라인 상태, 가짜 활동 또는 성공 확인을 발명하지 마십시오; 대신 정직한 빈/로딩/오류 상태를 사용하십시오. 데모 데이터는 요청되고 명시적으로 표시된 경우에만 허용됩니다.

장식적인 카드-인-카드 레이어를 추가하지 마십시오: 중첩된 표면은 별개의 인터랙션 또는 정보 경계를 나타내야 합니다. 자동 생성된 3-특징 그리드, 4-통계 대시보드, 가짜 히어로 주장, 목적 없는 차트, 배지/칩/아이콘 스팸, 관련 없는 장식용 아트, 뷰포트 채우기 위한 무작위 루프를 피하십시오. 타이포그래피, 간격, 정렬 및 구분선을 사용한 그룹화를 선호하십시오. 동등한 피어는 의도적인 시각적 균형이 필요합니다.

안티-슬롭 카피라이팅: "잠재력을 깨우세요", "미래를 경험하세요", "워크플로우를 강화하세요", "완벽한" 주장 또는 번역된 등가물을 사용하지 마십시오. 제목은 실제 콘텐츠를 전달해야 하고, CTA는 액션의 이름을 명시해야 하며, 빈/오류/성공 텍스트는 실제 상태와 다음 단계를 설명해야 합니다. 가짜 긴박감, 조작된 숫자, 모호한 AI 과대광고, 불필요한 이모지, 접근 불가능한 대문자 블록을 피하십시오. 진실을 변경하지 않고 이 스타일과 사용자의 언어에 맞게 표현을 조정하십시오.

테마 및 모드 대비 무결성: 사용자가 다크 모드나 라이트 모드를 요청하거나(테마 전환기를 구축할 때) 모든 표면, 텍스트, 테두리, 입력 및 의미론적 배지에서 배경 및 전경 색상이 동기화된 쌍으로 전환되어야 합니다. 어두운 배경에 검은색 텍스트, 흰색 배경에 흰색 텍스트 또는 읽을 수 없는 저대비 상태 표시기를 남기지 마십시오. 모든 상태는 WCAG AA 대비(본문/일반 텍스트의 경우 최소 4.5:1, 큰 헤드라인 및 인터랙티브 경계의 경우 3:1)를 충족해야 합니다.

반응형 및 모션: 모바일을 의도적으로 구성하고, 긴 레이블, 포커스 상태 및 접근 가능한 대비를 확인하십시오; 유행하는 레이아웃에 맞추기 위해 텍스트를 자르지 마십시오. 기본적으로 정적; 의미 있는 상호작용에 모션을 사용하고, 축소 모션 선호도를 존중하며, 실제 상태 없이 바운스/플로팅/펄싱 장식을 피하십시오.

Critical/High 발견 사항 블록 완료: 조작된 상태/데이터, 깨진 액션, 접근 불가능/클리핑된 컨트롤, 오해의 소지가 있는 카피, 테마 대비 충돌 또는 심각한 모바일 오류는 수정되어야 합니다. 실제로 확인된 내용을 보고하십시오; 실행되지 않은 테스트를 주장하지 마십시오.

미학 거부권이 아님: 표현적인 색상, 그림자, 그라데이션, 카드 레이아웃 또는 장식적 처리는 선택된 미학의 의도적인 부분이고 사용성 검사를 통과하는 경우 합법적입니다. 조용히 미니멀리즘을 강요하지 마십시오.

안티-슬롭: 스타일별

타이포그래피 권위, 일반적인 미니멀리즘이 아닙니다.

• 거부: 약한 헤드라인, 텍스트 주위의 장식용 카드 래퍼, 여러 경쟁 악센트 색상, 저대비 작은 캡션, 테마 충돌(예: 어두운 에디토리얼 캔버스에 검정 타이포그래피가 남아 있는 경우).
• 대신: 스케일 대비, 정확한 컬럼 정렬, 단일 악센트 신호, 동기화된 다크/라이트 극성 반전에 의존하십시오.
• 카피 확인: 텍스트는 에디토리얼 간행물처럼 읽혀야 합니다—명확하고, 구조적이며, 의도적입니다.
• 감사: 보편적 안티-슬롭 목적, 진실, 중첩 표면, 카피라이팅, 반응형 실행