---
type: knowledge
domain: design
status: active
last-reviewed: 2026-07-06
---

# 스위스 인터내셔널 (Swiss / International Typographic Style)

> 한 줄 정의
> 그리드·그로테스크 산세리프·여백·비대칭 — 장식을 걷어내고 정보의 위계만으로 아름다움을 만드는 1950년대 스위스 타이포그래피의 웹 버전. 모든 "미니멀 디자인"의 조상이자, 어설픈 미니멀과 구분되는 기준점.

![[preview-swiss.jpg]]

## 언제 쓰나 / 피하나

| 적합 | 부적합 |
|------|--------|
| 타이포·콘텐츠가 주인공인 에이전시·포트폴리오 | 콘텐츠가 얕을 때 (스위스는 내용이 약하면 즉시 들통) |
| 문화·전시·페스티벌 포스터형 랜딩 | 따뜻함·수공예 감성이 필요한 곳 |
| 디자인 시스템의 뼈대 (어느 브랜드로도 확장 가능) | 유아·키즈 (규율이 차갑게 읽힘) |

## 스타일 DNA

### 팔레트 — 백·흑 + 시그널 레드 하나

| 토큰 | 값 | 역할 |
|------|-----|------|
| white | `#FFFFFF` | 바탕 |
| ink | `#111111` | 텍스트·괘선 |
| red | `#E63329` | 시그널 레드 — 강조·번호·화살표 전용 |

- 색은 **1개, 그것도 기능으로만**. 두 번째 색이 들어오는 순간 장식이 시작되고 인터내셔널 스타일에서 이탈한다.

### 타이포

- Helvetica/Univers/Akzidenz-Grotesk 계열 — 웹 무료 대체는 **Inter·Archivo**, 한글은 **Pretendard**가 사실상 표준 페어.
- 크기 대비를 절벽으로: 캡션 12px ↔ 헤드라인 `8vw`. 1.5배짜리 소심한 계단은 스위스가 아니다.
- 왼쪽 정렬 + 래그드 라이트. 큰 글자는 자간 살짝 음수(`-0.02em`), 행간 1.0 미만.

### 구조 — 그리드가 보여야 한다

- 12컬럼 그리드를 "느껴지게" 쓴다 — 요소들이 같은 정렬선에 붙어 있어야 스위스.
- **비대칭 배치** (중앙 정렬 금지). 여백은 남는 공간이 아니라 배치한 재료.
- 구획은 1px 잉크 괘선으로.

## 핵심 레시피 (CSS)

```css
.page {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px; padding: 48px;
  background: #fff; color: #111;
  font-family: 'Inter', 'Pretendard', 'Helvetica Neue', sans-serif;
}
h1 {
  grid-column: 1 / 9;                      /* 비대칭 — 12칸을 다 쓰지 않는다 */
  font-size: clamp(48px, 8vw, 128px);
  line-height: .95; letter-spacing: -.02em; font-weight: 700;
}
.meta {
  grid-column: 10 / 13; align-self: start;
  font-size: 12px; line-height: 1.5;
  border-top: 1px solid #111; padding-top: 8px;   /* 괘선이 구획이다 */
}
.accent { color: #E63329; }                /* 색은 한 번, 기능으로만 */
```

- 위계는 크기 대비 + 위치로 만든다 — 그림자·색·장식 없이 "어디에 놓였는가"가 계급.
- 본문은 measure 60~75자, 행간 1.5 — 포스터가 아니라 본문 조판이 스위스의 진짜 실력이다.

## 흔한 실수

- 중앙 정렬 + 대칭 → 스위스가 아니라 밋밋한 랜딩. 비대칭 긴장이 생명.
- 색 2개 이상 → 장식의 시작. 레드가 부족해 보이면 색이 아니라 배치가 약한 것.
- 크기 대비 소심 (1.2~1.5배) → 계단이 아니라 절벽(4~8배)으로.
- 여백을 "남는 공간" 취급 → 요소를 줄이고 여백을 설계하라.
- 자간 벌린 소문자 헤드라인 → 그로테스크 대형 글자는 자간을 조인다.

## 실물 레퍼런스

**원전**
- [Swissted](https://www.swissted.com) — 펑크 공연 포스터를 인터내셔널 스타일로 재조판한 프로젝트. 문법 학습에 이만한 교재가 없다 (서체는 Helvetica가 아니라 스위스 원조 Akzidenz-Grotesk).
- [The Vignelli Canon (PDF)](https://www.rit.edu/vignellicenter/sites/rit.edu.vignellicenter/files/documents/The%20Vignelli%20Canon.pdf) — 비녤리가 직접 쓴 무료 공개 원칙서. 그리드·서체 절제의 성경.
- Josef Müller-Brockmann 『Grid Systems in Graphic Design』 — 책. 그리드라는 개념 자체의 원전.

**아카이브**
- [Fonts In Use](https://fontsinuse.com) — 실물 인쇄·웹의 서체 사용 아카이브. "이 서체가 실전에서 어떻게 쓰였나"의 사전.
- [Museum für Gestaltung Zürich — 컬렉션 아카이브](https://museum-gestaltung.ch/en/collection-archives) — 포스터 38만 점을 보유한 세계 최대급 아카이브(eMuseum 온라인 공개). 뮐러-브록만 원본 포스터를 직접 보는 곳.

**아티클**
- [Swiss Style: The Principles, the Typefaces & the Designers (PRINT)](https://www.printmag.com/featured/swiss-style-principles-typefaces-designers/) — 원칙·서체·인물을 한 편으로 정리한 입문 결정판.
- [Lessons From Swiss Style Graphic Design (Smashing Magazine)](https://www.smashingmagazine.com/2009/07/lessons-from-swiss-style-graphic-design/) — 웹 적용 관점의 고전(2009). 그리드·비대칭을 화면으로 옮기는 법.

**폰트**
- [Inter](https://fonts.google.com/specimen/Inter) · [Archivo](https://fonts.google.com/specimen/Archivo) — Helvetica의 웹 실용 대체. 한글: [Pretendard](https://github.com/orioncactus/pretendard).

- 검색 키워드: `swiss international typographic style`, `müller-brockmann grid poster`

- 로컬 데모(코드=이 문서 레시피): `스타일/_previews/스타일-데모.html`

## 관련 문서

- [[디자인 스타일 카탈로그]] · [[UI 시각 체계]] (그리드·위계 절) · 인접 스타일: [[데이터 디자인]] (같은 객관주의의 계기판 버전), [[에디토리얼 매거진]] (조판 축 형제 — 산세리프 객관 vs 세리프 표현), [[벤토 그리드]] (그리드의 상품 진열 버전)