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

# 하프톤 도트 (Halftone Dots)

> 한 줄 정의
> 인쇄기의 망점(도트 크기·밀도로 톤을 표현)을 화면으로 가져온 프린트/팝 스타일. 잉크 1~2도 + 종이색 + 판이 살짝 어긋난 미스레지스트레이션이 시그니처.

![[preview-halftone.jpg]]

## 언제 쓰나 / 피하나

| 적합 | 부적합 |
|------|--------|
| 포스터형 랜딩, 이벤트·공연·매거진 | 정밀 데이터 UI (도트가 시각 소음) |
| 음악·스트리트·유스 브랜드 | 장문 독서 화면 — 도트 배경 위 본문 금지 |
| 브루탈리즘보다 따뜻한 "인쇄물" 개성 | 3색 이상 필요한 화려한 브랜딩 |

## 스타일 DNA

### 팔레트 — 종이 + 잉크 2도

| 토큰 | 값 | 역할 |
|------|-----|------|
| paper | `#F5EFE3` | 바탕 (순백 금지 — 종이는 미색) |
| ink | `#191919` | 주 잉크 (순흑 대신 잉크 블랙) |
| ink-2 | `#E0362C` | 별색 (리소 레드; 대안: 리소 블루 `#0078BF`, 형광 핑크 `#FF48B0`) |

- 잉크는 **2도까지만**. 3도부터는 리소/실크스크린 감성이 무너진다.

### 타이포

- 디스플레이: 초고중량 산세리프 (Archivo Black, 한글: Black Han Sans·검은고딕) + 대문자 + `text-shadow` 오프셋으로 판 어긋남 표현.
- 라벨: 모노 + 잉크 배경 반전 태그.
- 본문: 도트 없는 영역에 일반 굵은 산세리프 — 본문에는 오프셋 그림자 금지.

### 질감

- 도트 크기 변화가 톤 — 균일 도트는 그냥 패턴이고, **mask로 페이드시켜야 하프톤**이다.
- 두 잉크 판을 살짝 어긋나게 겹치고 `mix-blend-mode: multiply` — 인쇄 물리학의 재현.

## 핵심 레시피 (CSS)

```css
/* 하프톤 원판 — 도트 반복 + mask로 톤 페이드 */
.halftone {
  background-image: radial-gradient(circle, #191919 0 4.5px, transparent 5px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(circle at 35% 35%, #000 0%, rgba(0,0,0,.55) 45%, transparent 72%);
  mask-image: radial-gradient(circle at 35% 35%, #000 0%, rgba(0,0,0,.55) 45%, transparent 72%);
}
/* 별색 판 — 몇 px 어긋나게 겹쳐 미스레지스트레이션 */
.halftone--red {
  background-image: radial-gradient(circle, #E0362C 0 4.5px, transparent 5px);
  transform: translate(20px, 24px);
  opacity: .75; mix-blend-mode: multiply;
}
/* 판 어긋난 헤드라인 */
h1 {
  font-family: 'Archivo Black', 'Black Han Sans', sans-serif;
  text-transform: uppercase; color: #191919;
  text-shadow: 5px 5px 0 #E0362C;   /* blur 0 필수 — 번지면 인쇄가 아니다 */
}
```

- 도트 톤을 이미지 위에 얹으려면: 이미지에 `filter: grayscale(1) contrast(1.4)` + 위 도트 레이어를 `mix-blend-mode: screen`(밝은 도트) 또는 `multiply`(어두운 도트)로.
- 그라디언트형 하프톤(선형 페이드)은 mask를 `linear-gradient`로 바꾸면 된다 — 데모의 하단 밴드가 그 예.

## 흔한 실수

- mask 없이 균일 도트만 → 하프톤이 아니라 물방울 벽지.
- 오프셋 그림자에 blur → 인쇄 미학 즉사. 하프톤의 그림자는 항상 `0 blur`.
- 본문 텍스트까지 별색 오프셋 → 가독성 붕괴. 어긋남은 디스플레이 전용.
- 순백 배경 + 순흑 도트 → 스캔한 종이가 아니라 QR코드 느낌. 종이색부터 잡아라.

## 실물 레퍼런스

**기법 — 망점 만드는 법**
- [CSS { In Real Life } — CSS Halftone Patterns](https://css-irl.info/css-halftone-patterns/) — radial-gradient 망점 기법의 표준 해설.
- [Frontend Masters — Pure CSS Halftone in 3 Declarations](https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/) — 선언 3줄 최소 구현. contrast 필터가 비밀 병기.
- [leanrada — Pure CSS halftone](https://leanrada.com/notes/pure-css-halftone/) — 이미지 위 하프톤을 인터랙티브 데모로 해설.
- [Speckyboy — 하프톤 스니펫 8선](https://speckyboy.com/combining-halftone-effects-with-code/) — CSS·JS 변주 모음.
- [CodePen — Pure CSS Halftone](https://codepen.io/coreh/pen/LQJBLa) — 바로 포크해서 실험.

**리소그래프 — 잉크의 세계**
- [stencil.wiki](https://stencil.wiki/wiki/Main_Page) — 리소 인쇄 커뮤니티 위키. 잉크 컬러 차트·색분판 지식의 허브.
- [riso-colors (GitHub)](https://github.com/mattdesl/riso-colors) — 리소 잉크 실색상 hex 목록. ink-2 별색은 여기서 고르면 실제 인쇄 감성이 난다.
- [Halftone 원리 (Wikipedia)](https://en.wikipedia.org/wiki/Halftone) — 망점이 톤을 만드는 인쇄 물리.

- 검색 키워드: `risograph poster`, `riso print misregistration`
- 로컬 데모: `스타일/_previews/스타일-데모.html`

## 관련 문서

- [[디자인 스타일 카탈로그]] · [[UI 시각 체계]] · 인접 스타일: [[페이퍼 컷아웃]] (같은 인쇄·공작 축), [[나이브 디자인]] (같은 수공예 감성)