# Swiss Design (국제 타이포그래피 양식)

> 스위스에서 발전한 그래픽 디자인 스타일로, 명료성과 객관성을 강조합니다.

- 층: 스타일 (디자인 스타일)
- ID: swiss-design
- 연도: 1950s
- 무드 태그: 미니멀, 신뢰감
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/swiss-design

## 정의

스위스에서 발전한 그래픽 디자인 스타일로, 명료성과 객관성을 강조합니다.

## 역사·배경

1950년대 스위스 취리히·바젤에서 발전한 국제 타이포그래피 양식(International Typographic Style). Helvetica 폰트의 탄생 배경이기도 함.

## 주요 특징

- 그리드 시스템
- 산세리프 타이포그래피
- 비대칭 레이아웃
- 사진 중심
- 여백의 활용

## 핵심 원칙

- 명료성
- 객관성
- 기능성

## 컬러 시스템

흑백 기반에 단 하나의 강조색(주로 빨강). 색은 장식이 아닌 기능

### 색상 역할

- primary: 빨강(#E63946) 또는 선택한 단일 강조색 — 핵심 강조에만 사용
- background: 흰색 (#fff) — 순수하고 깨끗하게
- text: 순수 검정 (#000) — 타이포가 전부
- photo: 흑백 사진 또는 단색 이미지

### 색상 제약

- 강조색 1개 초과 금지
- 그라데이션·그림자 사용 금지
- 색상을 장식 목적으로 사용 금지 — 구조적 의미만

### 다크모드 전략

흑백 반전 + 강조색 명도 약간 조정. 구조는 그대로

### 대비 요구사항

흑백 기반으로 최고 대비 — 강조색은 흰 배경 위 대비 확인 필수

## 타이포그래피

- 폰트 성격: Helvetica·Univers·Akzidenz Grotesk 계열 그로테스크 산세리프. 폰트 = 정체성
- 권장 폰트 수: 최대 1개
- 타입 스케일: 1.333 (Perfect Fourth) — 수학적 규칙성

### 타이포그래피 제약

- 세리프·장식 폰트 사용 금지
- 단일 폰트 패밀리로 모든 계층 표현
- left-alignment 원칙 — 중앙정렬 지양
- 수직 리듬(baseline grid) 엄격 준수
- heading과 body 크기 차이 최소 2배 이상

## 설계 제약

### 하면 안 되는 것

- 장식 요소 사용 금지 — 타이포그래피와 그리드만으로 구성
- 사진 컬러 처리 금지 — 흑백 또는 단일 듀오톤만
- 비대칭 그리드 사용 금지 — 명시적 컬럼 그리드 필수

### 반드시 포함할 것

- 명시적 컬럼 그리드 (12 또는 8컬럼)
- baseline grid
- 여백 — 콘텐츠와 같은 비중의 빈 공간

### 모션 가이드

모션 최소화. 있다면 폰트 기반 트랜지션 또는 그리드 기반 슬라이드. 장식적 애니메이션 금지.

## 무드 프로파일

4축 각각 −2 ~ +2 정수. 취향 테스트(/fit)와 비교 페이지가 같은 좌표를 쓴다.

- 밀도: -2 (여백 −2 ↔ +2 빽빽)
- 온도감: -1 (차가움 −2 ↔ +2 따뜻함)
- 시대감: 0 (레트로 −2 ↔ +2 미래적)
- 격식: +1 (자유분방 −2 ↔ +2 격식)

## 사용 사례

- 편집 디자인 (잡지·포스터)
- 기업 아이덴티티
- 문화·예술 기관
- 타이포그래피 중심 웹사이트

## 추천 프로젝트 유형

- 편집 디자인
- 기업 아이덴티티
- 문화·예술 기관
- 타이포그래피 중심 사이트

## 장단점

### 장점

- 시간이 지나도 낡지 않는 고전적 아름다움
- 그리드 기반으로 정보 정렬이 명확
- 타이포그래피 자체가 디자인 요소가 됨

### 단점·한계

- 지나치게 형식적이고 차가운 느낌
- 감성적 표현 범위 제한
- 트렌디한 디지털 제품엔 어울리지 않을 수 있음

## 실제 사용 제품·서비스

- Helvetica 폰트
- IKEA 카탈로그
- 국제연합 UI 자료

## 접근성

산세리프체와 충분한 여백이 가독성에 유리. 그리드 기반 레이아웃은 스크린 리더 탐색에도 구조적으로 유리.

## 자주 묻는 질문

### Q1. Swiss Design (국제 타이포그래피 양식)이란 무엇인가요?

스위스에서 발전한 그래픽 디자인 스타일로, 명료성과 객관성을 강조합니다. 1950년대 스위스 취리히·바젤에서 발전한 국제 타이포그래피 양식(International Typographic Style). Helvetica 폰트의 탄생 배경이기도 함.

### Q2. Swiss Design (국제 타이포그래피 양식)의 핵심 디자인 원칙은 무엇인가요?

Swiss Design (국제 타이포그래피 양식)의 핵심 원칙은 명료성, 객관성, 기능성입니다.

### Q3. Swiss Design (국제 타이포그래피 양식)은 어떤 프로젝트에 적합한가요?

Swiss Design (국제 타이포그래피 양식)은 편집 디자인 (잡지·포스터), 기업 아이덴티티, 문화·예술 기관, 타이포그래피 중심 웹사이트, 편집 디자인, 기업 아이덴티티, 문화·예술 기관, 타이포그래피 중심 사이트 등의 프로젝트에 적합합니다.

### Q4. Swiss Design (국제 타이포그래피 양식)의 장단점은 무엇인가요?

장점으로는 시간이 지나도 낡지 않는 고전적 아름다움, 그리드 기반으로 정보 정렬이 명확, 타이포그래피 자체가 디자인 요소가 됨이 있습니다. 단점으로는 지나치게 형식적이고 차가운 느낌, 감성적 표현 범위 제한, 트렌디한 디지털 제품엔 어울리지 않을 수 있음이 있습니다.

### Q5. Swiss Design (국제 타이포그래피 양식)에서 색상은 어떻게 사용하나요?

흑백 기반에 단 하나의 강조색(주로 빨강). 색은 장식이 아닌 기능 색상 역할은 primary: 빨강(#E63946) 또는 선택한 단일 강조색 — 핵심 강조에만 사용, background: 흰색 (#fff) — 순수하고 깨끗하게, text: 순수 검정 (#000) — 타이포가 전부입니다. 주의사항: 강조색 1개 초과 금지, 그라데이션·그림자 사용 금지.

### Q6. Swiss Design (국제 타이포그래피 양식)에 어울리는 폰트 스타일은 무엇인가요?

Swiss Design (국제 타이포그래피 양식)에는 Helvetica·Univers·Akzidenz Grotesk 계열 그로테스크 산세리프. 폰트 = 정체성 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 세리프·장식 폰트 사용 금지, 단일 폰트 패밀리로 모든 계층 표현.

### Q7. Swiss Design (국제 타이포그래피 양식) 디자인에서 하면 안 되는 것은 무엇인가요?

Swiss Design (국제 타이포그래피 양식)에서 피해야 할 것: 장식 요소 사용 금지 — 타이포그래피와 그리드만으로 구성, 사진 컬러 처리 금지 — 흑백 또는 단일 듀오톤만, 비대칭 그리드 사용 금지 — 명시적 컬럼 그리드 필수.

### Q8. Swiss Design (국제 타이포그래피 양식)을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Swiss Design (국제 타이포그래피 양식)을 적용한 대표적인 제품·서비스로는 Helvetica 폰트, IKEA 카탈로그, 국제연합 UI 자료 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #E74C3C
- secondary: #000000
- accent: #FFFFFF
- background: #FFFFFF
- surface: #F8F9FA
- text: #000000
- textSecondary: #666666
- border: #000000

### 타이포그래피

- fontFamily: Helvetica, Arial, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: -0.02em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1.5
- borderRadius: sm 0 / md 0 / lg 0 / full 0
- shadow sm: none
- shadow md: none
- shadow lg: none
- border: 1px solid #000000

### 컴포넌트 형태

- button: square / hover none / text uppercase
- card: flat / hover none
- input: underlined / focus border
- badge: square / outlined
- icon: lucide / stroke 1.5 / size 20px
- layout: boxed / section spacious
- animation: 150ms linear

## 관련 링크

### 관련 스타일

- [Minimalism](https://ui.buildersgate.com/styles/minimalism)
- [Brutalism](https://ui.buildersgate.com/styles/brutalism)
- [Flat Design](https://ui.buildersgate.com/styles/flat-design)

### 데모 (같은 화면, 이 스타일로)

- [브랜드 랜딩 데모](https://ui.buildersgate.com/demo/brand/swiss-design)
- [SaaS 대시보드 데모](https://ui.buildersgate.com/demo/saas/swiss-design)
- [커머스 데모](https://ui.buildersgate.com/demo/commerce/swiss-design)

### 비교

- [Swiss Design (국제 타이포그래피 양식) vs Abstract & Geometric](https://ui.buildersgate.com/compare/abstract-geometric-vs-swiss-design)
- [Swiss Design (국제 타이포그래피 양식) vs Brutalism](https://ui.buildersgate.com/compare/brutalism-vs-swiss-design)
- [Swiss Design (국제 타이포그래피 양식) vs Flat Design](https://ui.buildersgate.com/compare/flat-design-vs-swiss-design)
- [Swiss Design (국제 타이포그래피 양식) vs Minimalism](https://ui.buildersgate.com/compare/minimalism-vs-swiss-design)
- [Swiss Design (국제 타이포그래피 양식) vs Monochrome Design](https://ui.buildersgate.com/compare/monochrome-vs-swiss-design)
- [Swiss Design (국제 타이포그래피 양식) vs Neobrutalism](https://ui.buildersgate.com/compare/neobrutalism-vs-swiss-design)

### 쓰임새별 추천

- [포트폴리오](https://ui.buildersgate.com/for/portfolio)
- [기업·공공 사이트](https://ui.buildersgate.com/for/corporate-public)

---

HTML 버전: https://ui.buildersgate.com/styles/swiss-design

이 문서는 https://ui.buildersgate.com/styles/swiss-design.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.