# 03 — 2026 웹디자인 트렌드 실측

> 기준 시점: **2026년 8월**. 수치는 각 출처가 밝힌 실측치이며, 출처는 05번 문서에 대응.
> 트렌드 나열이 아니라 **"지금 실제로 이기고 있는 것 / 죽은 것"**을 구분하는 게 목적이다.

---

## 1. Awwwards 수상작 실측 (2026 Q1, SOTD 47건 기준)

### 1.1 채점 구조 — 화려함은 4순위다

| 항목 | 배점 | 의미 |
|---|---|---|
| Design | **40%** | 타이포 체계, 스케일 일관성, 리듬, 위계, 여백 긴장감 |
| Usability | **30%** | 실제 기기에서의 성능·조작성 |
| Creativity | **20%** | WebGL·인터랙션 등 "볼거리" |
| Content | **10%** | 카피와 정보 |

심사는 최소 18명의 심사위원에게 배분되며, 평균에서 가장 먼 3개 점수는 자동 제외된다. 투표 기간은 5일.

> **핵심 시사점**: Design(40) + Usability(30) = 70%가 **타이포·그리드·성능**이다.
> 화려한 3D를 추가하는 것보다 타입 스케일을 정돈하는 편이 점수에 2배 유리하다.

### 1.2 2026 Q1 수상작 기술 분포

| 항목 | 수치 |
|---|---|
| 몰입형 3D 경험 비중 | **61%** (2024 Q1 23% → 2.6배) |
| Three.js를 주 렌더러로 사용 | 47건 중 **29건** |
| 커스텀 WebGL(직접 셰이더) | 8건 |
| Babylon.js | 4건 |
| WebGL 미사용 | 6건 |
| 스크롤 기반 서사 채택률 | 87% |
| 카메라 스플라인 애니메이션 | 82% |
| 커스텀 GLSL 셰이더 | 78% |
| 물리 기반 인터랙션 | 71% |
| 공간 오디오 | 54% |
| WebXR | 31% |
| 배경 비디오 사용 | **8% 미만** (2022년 40%+ → 급감) |

**성능 기준**: 스크롤 중 60fps 유지, 애니메이션 루프 프레임당 4ms 미만.
심사위원이 실제 기기에서 테스트하므로 중급 기기에서 버벅이면 탈락한다.

**업종 분포**: 럭셔리 패션 28% / 자동차 22% / 건축·부동산 18% / 문화기관 14% / **테크·SaaS 5% 미만**.

> **결정적 시사점**: Awwwards 수상작은 대부분 **SaaS가 아니다.**
> SaaS 랜딩 브리프에 Awwwards 스타일을 그대로 적용하면 목적이 어긋난다.
> Awwwards는 "야심의 상한선"으로만 쓰고, 구조는 Land-book·Refero에서 가져와라.

### 1.3 2026년 실제 수상작 사례

| 사이트 | URL | 수상 | 무엇이 통했나 |
|---|---|---|---|
| By-Kin | https://by-kin.com/ | Awwwards SOTD + Developer Award, FWA, CSSDA | 확신 있는 **에디토리얼 타이포**, 무게감 있는 스무스 스크롤, 티 안 나는 전환. Next.js + GSAP + Strapi |
| Iventions | https://iventions.com/ | CSSDA Website of the Month, Awwwards SOTD | Three.js의 **조명 설계**로 프로젝트를 "스포트라이트 설치물"처럼 다룸. 화려함이 아닌 분위기 |
| Mat Voyce | https://matvoyce.tv | Awwwards SOTD, GSAP SOTY 노미네이트 | 타임라인 기반 **키네틱 타입** — 글자가 늘어나고 붙는데 가독성은 유지 |
| Uncommon Studio | https://uncommonstudio.com.au/ | Awwwards SOTD + Developer Award, FWA | 정확한 지점에서만 깨지는 그리드, 카메라 무빙 같은 GSAP 전환 |
| Minh Pham | https://minhpham.design/ | Awwwards SOTD (개발 점수 7.77) | GSAP 모션 위에 Three.js — **3D가 작업물을 압도하지 않음** |

공통점 4가지:
1. **아트 디렉션이 하나의 아이디어로 통일**되어 있다. 장식된 템플릿이 아니다.
2. **타이포가 주인공**이고 3D는 프레임 역할이다.
3. 전환이 **자기 존재를 드러내지 않는다.**
4. 빠르다. 느린 3D는 심사에서 탈락한다.

---

## 2. 살아남은 트렌드 vs 과대평가된 트렌드

한 스튜디오가 2026년 상반기 실제 클라이언트 작업으로 검증한 결과.

### 2.1 예상대로 통한 것

| 트렌드 | 실측 |
|---|---|
| **벤토 그리드** | 12컬럼 대비 스크롤 깊이 **+23%**. Apple·Google·Spotify가 채택하며 표준화 |
| **다크 모드 지원** | 스마트폰 사용자 **82%+**가 최소 1개 앱을 다크로 사용. 다크 대응 사이트 세션 길이 **+18%** |
| **디자인 시스템·토큰** | 토큰 시스템 + 컴포넌트 라이브러리 + 시각 회귀 테스트가 표준이 됨 |

> 다크 모드에 대한 정확한 해석: **"다크를 지원하라"이지 "다크를 기본값으로 하라"가 아니다.**
> 토큰 기반으로 두 테마를 모두 성립시키는 게 핵심이다.

### 2.2 과대평가된 것

| 트렌드 | 실제로 벌어진 일 |
|---|---|
| **키네틱 타이포그래피** | 데모에서는 훌륭하나 프로덕션에 거의 안 들어감. 스크린리더와 충돌, 크롤러와 충돌, 레이아웃 시프트 유발 |
| **글래스모피즘 2.0** | 실사용 기기에서 **FPS 15–30% 하락**. 내비게이션 바와 모달 정도로 용도 제한 |
| **유기적 블롭 형태** | 랜딩페이지에만 등장. B2B SaaS·이커머스의 전환 경로에는 거의 안 씀 |

### 2.3 기대에 못 미친 것

| 트렌드 | 이유 |
|---|---|
| **3D / WebGL의 보편화** | 히어로에 Spline 씬 하나 넣으면 JS 런타임 **800KB–2MB**. 모바일 4G에서 Core Web Vitals 실패 |
| **AI 개인화** | GDPR 동의 흐름이 전제를 무너뜨림 (유럽 시장) |
| **지속가능 웹디자인** | 담론에 머물고 실제 채택은 저조 |

### 2.4 예상 밖으로 부상한 것

| 트렌드 | 내용 |
|---|---|
| **AI 가독성 레이어** | schema 마크업, `llms.txt`, `agents.json`. AI 경유 유입이 실측되기 시작 (한 스튜디오 3개월간 Bing Copilot 인용 2,300건) |
| **안티그리드 브루탈리즘** | 벤토가 흔해지자 반작용으로 등장. 의도적으로 깨진 레이아웃, 모노스페이스 타이포. **차별화 수단** |

> **designpaca 관점 결론**: 3D를 기본 무기로 삼지 마라. 2026년의 실전 승부처는
> **타이포 체계 + 여백 리듬 + 성능**이고, 개성은 3D가 아니라 **타입과 색 결정**에서 나온다.

---

## 3. 타이포그래피 트렌드

### 3.1 흐름

| 흐름 | 내용 | designpaca 적용 |
|---|---|---|
| **세리프 부활** | 에디토리얼·미디어 중심으로 복귀. 단 고전 세리프가 아니라 **높은 대비 + 날카로운 디테일**의 현대적 리바이벌 | AI가 sans 워드마크를 몇 초에 만들어내는 시대에 세리프는 "의도와 공예"의 신호가 된다. **차별화 1순위 카드** |
| **가변 폰트** | 2026년 기준 선택이 아니라 **인프라**. 한 파일로 굵기·폭·광학 크기 전환 | 로딩 비용 감소 + 유연한 스케일. 기본 채택 |
| **초대형 타입** | 헤드라인이 뷰포트 높이를 채움. 글자가 구조 요소 역할 | 스크롤 중 "쉼표" 역할. 단 본문 위계를 죽이지 않게 |
| **키네틱 타입** | 데모용으로는 강력하나 프로덕션 채택률 낮음 (§2.2) | 접근성·SEO 리스크를 감수할 이유가 있을 때만 |
| **대비의 극단화** | 표현적 디스플레이 + 실용적 본문의 조합 | 패밀리 2개 원칙 유지, 대신 성격 차이를 크게 |

### 3.2 실전 타입 스케일 기준

- **비율**: 1.25 (major third) 또는 1.333 (perfect fourth)가 웹 표준 범위.
  1.2는 위계가 약하고, 1.5 이상은 중간 단계가 비어 답답해진다.
- **단계 수**: 3–5단계. 8단계 이상이면 통제 실패 신호.
- **최대/본문 비**: 4배 이상 확보 (예: 본문 17px → 히어로 68px).
- **line-height**: 본문 1.5–1.7 / 대형 헤드라인 1.0–1.15.
- **letter-spacing**: 대형 헤드라인 -0.02em ~ -0.04em / 본문 0 / 소형 대문자 라벨은 +0.08em.
  **본문에 0.05em 이상 주면 가독성이 무너진다.**
- **한 줄 글자 수**: 영문 45–75자 / **국문 25–40자**.

---

## 4. 컬러 트렌드

### 4.1 2026년 두 갈래

| 방향 | 성격 | 대표 톤 | 적합 브리프 |
|---|---|---|---|
| **따뜻함·촉각** | Quiet Luxury, New Botanicals, Solar Warmth, Muted Earth | 고급 중립색, 부드러운 초록, 볕에 익은 산호, 흙빛 클레이 | 브랜드, 라이프스타일, D2C, 문화기관 |
| **차갑고 디지털** | Digital Calm, Digital Neon | 저자극 블루, 보이드 블랙 위 고전압 액센트 | 핀테크·인프라(전자) / 게이밍·테크(후자) |

Pantone 2026 올해의 색: **Cloud Dancer (PANTONE 11-4201)** — 중립색이 주도.

> **주의**: "Digital Neon on void black"은 04번 문서의 슬롭 시그니처와 **한 끗 차이**다.
> 브리프가 게이밍·개발자 도구처럼 명확히 요구할 때만 쓰고, 그때도 네온은 액센트 10% 이내로 묶어라.

### 4.2 색 시스템 기술 표준

- **OKLCH가 사실상 표준.** 지각적으로 균일한 밝기 축을 가져 톤 스케일을 프로그램으로 생성해도 대비가 고르게 나온다.
  많은 디자인 시스템이 **토큰은 OKLCH로 저장하고 빌드 시 HEX로 내보낸다.**
- **의미 기반 토큰 필수.** `purple-500`이 아니라 `color-action-primary`, `color-surface-elevated`, `color-text-secondary`.
- **톤 스케일 10–11단계**, 500이 원색. `color-mix()`로 파생하되 접근성을 위해 chroma를 클램프.
- **대비 검증**: WCAG 2 기준 본문 4.5:1 / 대형 텍스트 3:1. APCA를 쓴다면 본문 **Lc ≥ 75**.

### 4.3 팔레트 구성 규칙

- 색상(hue)은 **3개 이하**.
- 면적 배분 60(지배) / 30(중립) / 10(강조).
- **순백 `#fff` / 순흑 `#000`을 피하고** 오프화이트·오프블랙을 쓴다 (예: `#FAFAF7`, `#111014`).
  순백·순흑은 슬롭 시그니처이자 눈부심·번짐의 원인이다.
- 강조색을 제거해도 페이지가 읽혀야 한다.

---

## 5. 모션 트렌드

### 5.1 기술 지형 변화 — 2026년의 가장 큰 사건

| 변화 | 내용 |
|---|---|
| **CSS 스크롤 기반 애니메이션 전 브라우저 지원** | `animation-timeline`, `view-timeline`, `timeline-scope`. JS 0KB로 reveal·패럴랙스 구현 |
| **View Transitions API 크로스브라우저 안착** | SPA 라우트 전환을 CSS만으로. 브라우저가 이전/이후 상태를 스냅샷 |
| **GSAP 전면 무료화** | ScrollTrigger 포함 모든 플러그인 무료 |

**선택 기준**:
- reveal, 패럴랙스, 스티키 진행 표시 → **CSS scroll-driven** (컴포지터에서 실행, JS 없음)
- 페이지·라우트 전환 → **View Transitions API**
- 복잡한 타임라인, 순차 오케스트레이션, 핀 고정 스크롤 시퀀스 → **GSAP**
- React 컴포넌트 단위 상태 모션 → **Motion (motion.dev)**

### 5.2 모션 설계 기준값

| 용도 | duration | easing |
|---|---|---|
| 마이크로 (호버, 포커스, 토글) | 100–200ms | ease-out |
| 트랜지션 (모달, 드로어, 탭) | 200–400ms | ease-out / cubic-bezier(0.2, 0, 0, 1) |
| 연출 (히어로 진입, 스크롤 시퀀스) | 600–1200ms | 커스텀 베지어 |
| 페이지 전환 | 300–500ms | ease-in-out |

**금지 사항**:
- 인터페이스 요소에 bounce/elastic 이징 — 2010년대 감성이고 즉시 촌스러워진다
- 모든 요소에 같은 fade-in — 슬롭 1순위 모션 시그니처
- reveal 실패 시 콘텐츠가 `opacity: 0`으로 남는 구현
- `prefers-reduced-motion` 미대응

### 5.3 모션 아이디어의 출처

Awwwards 수상작을 보고 "저거 어떻게 하지"가 아니라, **기법 이름을 먼저 확보**하라.
`eyecannndy.com`은 모션 기법마다 이름을 붙여 분류해두었고, `Codrops`는 같은 기법의 소스 코드를 준다.
이 둘의 조합이 AI 에이전트가 모션을 다루는 가장 실용적인 경로다.

---

## 6. 레이아웃 트렌드

| 패턴 | 상태 | 주의 |
|---|---|---|
| **벤토 그리드** | 표준화 완료. 스크롤 깊이 +23% | 이제 **기본값이라 차별화가 안 된다.** 2026년의 벤토는 정적 타일이 아니라 호버 시 열리거나 영상이 재생되는 "활성 벤토" |
| **비대칭 / 깨진 그리드** | 벤토의 반작용으로 상승 | 규칙 위에서 깨야 한다. 규칙 없이 깨면 그냥 사고다 |
| **에디토리얼 레이아웃** | 세리프 부활과 함께 | 텍스트 컬럼 폭 통제가 핵심 |
| **안티그리드 브루탈리즘** | 차별화 수단으로 부상 | 모노스페이스 + 원시 HTML 미학. 브랜드가 감당할 수 있을 때만 |
| **3열 균등 카드** | **죽었다** | 04번 문서 참조. AI 슬롭의 핵심 시그니처 |

---

## 7. 폰트 추천

### 7.1 무료 — 영문 (구글 폰트 / Fontshare)

| 폰트 | 성격 | 용도 | 출처 |
|---|---|---|---|
| **Fraunces** | 가변 세리프, 부드러움·광학 크기 축 조절 가능 | 디스플레이 + 본문 겸용 | Google Fonts |
| **Instrument Serif** | 고대비 디스플레이 세리프 | 히어로 헤드라인 | Google Fonts |
| **Spectral** | 화면용 세리프, 본문 가독성 좋음 | 긴 본문 | Google Fonts |
| **Lora** | 브러시 계열 세리프 | 에디토리얼 본문 | Google Fonts |
| **DM Sans** | 기하학 산세, 중립적이되 Inter보다 성격 있음 | 본문·UI | Google Fonts |
| **Work Sans** | 그로테스크, 넓은 굵기 범위 | 본문·헤드라인 | Google Fonts |
| **Libre Franklin** | 프랭클린 고딕 계열, 미국적 신문 톤 | 본문 | Google Fonts |
| **IBM Plex Sans / Mono** | 기업적이되 개성 있음 | 개발자 도구·문서 | Google Fonts |
| **Archivo / Archivo Narrow** | 강한 그로테스크, 축약형 있음 | 헤드라인 | Google Fonts |
| **Satoshi** | 현대적 기하학 산세 | 본문·UI (Inter 대체) | Fontshare |
| **Clash Display** | 개성 강한 디스플레이 | 히어로 | Fontshare |
| **Switzer** | 스위스 그로테스크 계열 | 본문·UI | Fontshare |
| **Chillax / Cabinet Grotesk** | 부드러운 그로테스크 | 브랜드 톤 | Fontshare |
| **JetBrains Mono** | 모노스페이스, 가독성 좋음 | 코드·라벨 | Google Fonts |

> **Inter는 금지가 아니라 "기본값 금지"다.** 명확한 이유(다국어 UI, 초고밀도 대시보드)가 있으면 쓴다.
> 이유 없이 쓰면 04번 B-01에 걸린다. Satoshi·Switzer·DM Sans가 거의 언제나 더 나은 선택.

### 7.2 유료 — 영문 (파운드리)

| 파운드리 | 대표 폰트 | 성격 |
|---|---|---|
| **Klim** (klim.co.nz) | Söhne, Signifier, Tiempos | 정밀하고 조용한 고급감. Söhne는 현재 웹에서 "비싼 톤"의 표준 |
| **Pangram Pangram** (pangrampangram.com) | Neue Montreal, PP Editorial New, Right Grotesk | 트렌디. 개인 사용 무료 항목 있음 |
| **Grilli Type** (grillitype.com) | GT America, GT Walsheim, GT Sectra | 스위스 정밀. 트라이얼 제공 |
| **Displaay** (displaay.net) | Nichrome, Signal | 에디토리얼 세리프 강세 |
| **Velvetyne** (velvetyne.fr) | Karrik, Basteleur, Terminal Grotesque | **무료 오픈소스**인데 개성이 유료급. 브루탈·아트 브리프 |

### 7.3 무료 — 한글

한국어 사이트는 **영문 폰트만 지정하면 한글이 시스템 기본(맑은 고딕/애플 SD 산돌고딕)으로 떨어진다.**
이건 그 자체로 완성도 미달 신호다. 반드시 한글 폰트를 명시하라.

| 폰트 | 제작 | 성격 | 웹폰트 | 라이선스 | 언제 |
|---|---|---|---|---|---|
| **Pretendard** | 길형진 (orioncactus) | system-ui 대체. Thin(100)–Black(900) 9단계, 가변 버전 존재 | O (jsDelivr CDN) | SIL OFL | **기본값. 고민되면 이거** |
| **Pretendard Variable** | 동일 | 가변 폰트 단일 파일 | O | SIL OFL | 웹에서는 static보다 이쪽 (용량 유리) |
| **본고딕 / Noto Sans KR** | Adobe·Google | 한중일 통합, 굵기 7단계 | O | SIL OFL | 다국어 혼용, 안정성 최우선 |
| **본명조 / Noto Serif KR** | Adobe·Google | 명조 계열 | O | SIL OFL | 에디토리얼 본문 |
| **마루 부리** | 네이버 | 현대적 명조. 세련되고 부드러움 | O | SIL OFL | **세리프 부활 트렌드의 한글 대응. 강력 추천** |
| **에스코어 드림** | S-Core | 굵기 9단계, 완성도 높은 고딕 | O | 상업 무료 | Pretendard 대안 |
| **Spoqa Han Sans Neo** | 스포카 | 숫자·영문 가독성 우수 | 배포 파일 사용 | SIL OFL | 대시보드·수치 많은 UI |
| **리디바탕** | 리디 | 화면 가독성 최적화 명조 | 배포 파일 사용 | SIL OFL | 긴 글 읽기 |
| **페이퍼로지 (Paperlogy)** | 이주임 × Paperlogy | 기하학 산세, 9단계 | O | SIL OFL | 프레젠테이션·헤드라인 |
| **나눔고딕 / 나눔명조** | 네이버 | 가장 널리 쓰임 | O | SIL OFL | **너무 흔해서 개성이 없다. 폴백으로만** |
| **조선일보명조체** | 조선일보 | 전통적 명조, 고급감 | O | 상업 무료 | 미디어·아카이브 톤 |
| **제주명조 / 한라산체** | 제주도 | 개성 있는 명조 | O | 상업 무료 | 지역·문화 브리프 |
| **배민 한나체 / 주아체 / 도현체** | 우아한형제들 | 강한 개성, 캐주얼 | O | 상업 무료 | **B2C 캠페인 한정. B2B에 쓰면 즉시 아마추어** |
| **여기어때 잘난체** | 여기어때 | 굵고 시원함 | O | 상업 무료 | 임팩트 헤드라인 |
| **자이언츠체** | 롯데자이언츠 | 속도감 | O | 상업 무료 | 스포츠·이벤트 |
| **빙그레 따옴 / 메로나체** | 빙그레 | 레트로·발랄 | O | 상업 무료 | 레트로 캠페인 |

**한글 폰트 수집처**: 눈누 (https://noonnu.cc) — 라이선스 범위 표기가 가장 명확.

### 7.4 한글 조판 실전 규칙

- **line-height를 영문보다 높게.** 한글은 글자 밀도가 높아 영문 기준 1.5로는 답답하다. **본문 1.6–1.8** 권장.
- **letter-spacing은 음수를 주지 마라.** 한글은 이미 고정폭에 가까워 음수 자간이 즉시 뭉개진다.
  대형 헤드라인에서만 -0.01em ~ -0.02em 정도.
- **`word-break: keep-all`** 을 설정하라. 기본값은 단어 중간에서 줄바꿈되어 어색하다.
  `overflow-wrap: break-word`와 함께 쓴다.
- **한 줄 25–40자.** 영문 기준(45–75자)을 그대로 쓰면 너무 길다. 컨테이너 폭을 좁혀라.
- **영문·숫자 폴백 순서**: 한글 폰트를 앞에 두면 라틴 문자까지 그 폰트로 그려진다.
  라틴을 다른 폰트로 쓰고 싶으면 `font-family: 'Satoshi', 'Pretendard', sans-serif` 순으로 라틴 폰트를 먼저 둔다.
- Pretendard CDN:
  `https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.min.css`

### 7.5 페어링 예시 (브리프별)

| 브리프 | 디스플레이 | 본문 | 한글 |
|---|---|---|---|
| 신뢰감 있는 B2B | Söhne / Switzer | Switzer | Pretendard |
| 에디토리얼 · 미디어 | Instrument Serif / Fraunces | Spectral | 마루 부리 + Pretendard |
| 럭셔리 · 브랜드 | Signifier / PP Editorial New | Söhne | 마루 부리 |
| 개발자 도구 | Archivo | IBM Plex Sans | Pretendard + JetBrains Mono |
| 대시보드 · 데이터 | DM Sans | DM Sans | Spoqa Han Sans Neo |
| 캠페인 · B2C | Clash Display | Satoshi | 배민 도현체 (헤드라인만) + Pretendard |
| 실험적 · 아트 | Karrik / Basteleur (Velvetyne) | Work Sans | 제주명조 |

---

## 8. 이미지·질감 트렌드

- **믹스드 미디어**: 3D 요소 + 스캔한 종이 질감의 결합이 2026년 주도 흐름.
- **필름 그레인 오버레이**: 실제 필름 스캔 기반 고해상도 그레인. 디지털 이미지에 물성을 준다.
- **노이즈 텍스처**: 그라디언트 위 미세 노이즈는 밴딩을 없애면서 질감을 준다.
  다만 **보라-파랑 그라디언트 + 노이즈** 조합은 슬롭이다 (04번 A-03).
- **스톡 사진 회피**: "랩탑 앞에서 웃는 다국적 팀"은 신뢰도를 **떨어뜨린다**는 게 실측 결과다.
  실제 제품 스크린샷 / 실제 팀 사진 / 커스텀 일러스트 / 추상 질감 순으로 선택.
- 무료 질감 소스: Texturize, Resource Boy(8K 노이즈), Pattern Club.

---

## 9. 2026년 요약 — 한 문단

지금 이기는 사이트는 **타이포 체계가 정돈되어 있고, 여백에 리듬이 있고, 빠르다.**
3D는 상위권에서 흔하지만 그건 럭셔리·자동차·문화기관의 이야기이고, SaaS·제품 사이트는 5% 미만이다.
벤토 그리드는 표준이 되어 더 이상 차별화가 아니며, 반작용으로 비대칭·브루탈 방향이 다시 올라오고 있다.
색은 중립색이 주도하고 OKLCH 기반 의미 토큰이 기술 표준이 됐다.
모션은 CSS 스크롤 애니메이션과 View Transitions로 JS 없이 대부분 처리 가능해졌고, GSAP은 전면 무료가 됐다.
그리고 **가장 크게 달라진 것은, 평균적인 결과물이 AI에 의해 대량 생산되면서 "평균처럼 보이는 것" 자체가 감점 요인이 됐다는 점이다.** (→ 04번 문서)
