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

# 택타일 아날로그 (Tactile Analog)

> 한 줄 정의
> 실물 사물 — 라벨, 티켓, 카세트, 도장, 마스킹테이프, 바코드 — 의 물성을 UI로 옮긴 스타일. 화면인데 손에 잡힐 것 같아야 성공이다.

![[preview-tactile.jpg]]

## 언제 쓰나 / 피하나

| 적합 | 부적합 |
|------|--------|
| 아카이브·노트·저널링 제품 | 고밀도 프로 도구 (부품이 밀도를 방해) |
| 음악·굿즈·빈티지 커머스 | 순수 디지털 신뢰 톤 (핀테크 코어 화면) |
| 영수증·티켓·라벨 메타포가 자연스러운 도메인 | 전면 스큐어모피즘 회귀 — 부품은 포인트다 |
| 레트로·수집 감성 브랜딩 | |

## 스타일 DNA

### 팔레트 — 바랜 종이 + 잉크 + 스탬프

| 토큰 | 값 | 역할 |
|------|-----|------|
| desk | `#EFE6D8` | 책상/배경지 |
| label | `#FAF3E3` | 라벨지 |
| ink | `#2E2822` | 타자기 잉크 |
| rule | `#B7A98C` | 인쇄 괘선 |
| stamp | `rgba(192,57,43,.8)` | 도장 (불투명 100% 금지 — 잉크는 뭉침) |
| tape | `rgba(226,205,160,.75)` | 마스킹테이프 (반투명 필수) |

### 타이포

- 타자기체: Special Elite, Courier Prime. 한글 타자기 감성은 마땅한 무료 폰트가 드물다 — 눈누(https://noonnu.cc)에서 "타자"·"타이프" 검색, 없으면 고정폭 느낌의 명조/돋움에 `letter-spacing`으로 근사.
- 필기 메모 병기: 손글씨체를 **주석 역할로만** — 본체는 타자기체가 지킨다.
- `TITLE:` `DATE:` `NO.` 같은 서식 라벨이 이 스타일의 목소리다.

### 물성 부품 (시그니처)

라벨 카드(괘선 포함) · 바코드 · 원형 도장 · 마스킹테이프 · 절취선/천공 · 종이 노이즈. **한 화면에 2~3개까지만** — 부품이 많아지면 소품실이 된다.

## 핵심 레시피 (CSS)

```css
/* 라벨 카드 — 두께감: 밑면 하드 3px + 소프트 그림자 이중 */
.label-card {
  background: #FAF3E3; border: 1.5px solid #B7A98C;
  transform: rotate(-1.2deg);
  box-shadow: 0 3px 0 #CBBFA4, 0 14px 28px rgba(80,60,30,.18);
  font-family: 'Special Elite', monospace; color: #2E2822;
}
.label-card .line { border-bottom: 1.5px solid #B7A98C; padding: 7px 2px; } /* 인쇄 괘선 */

/* 바코드 — 이미지 불필요, 불규칙 폭의 반복 그라디언트 */
.barcode {
  height: 44px; width: 230px;
  background: repeating-linear-gradient(90deg,
    #2E2822 0 2px, transparent 2px 5px, #2E2822 5px 9px,
    transparent 9px 11px, #2E2822 11px 12px, transparent 12px 16px);
}

/* 도장 — 회전 + 반투명이 잉크 느낌의 전부 */
.stamp {
  width: 130px; height: 130px; border-radius: 50%;
  border: 3px solid rgba(192,57,43,.75); color: rgba(192,57,43,.8);
  transform: rotate(12deg); font-family: 'Special Elite';
}

/* 마스킹테이프 — 카드 모서리에 걸쳐 붙인다 */
.tape {
  width: 150px; height: 38px; background: rgba(226,205,160,.75);
  box-shadow: 0 2px 6px rgba(80,60,30,.15); transform: rotate(-8deg);
}
```

- 배경 종이 노이즈는 [[그레인 블러]]와 같은 turbulence 기법 — 단 밝은 바탕이므로 `feColorMatrix`로 갈색조를 입혀 낮은 opacity(.1~.15)로.
- 인터랙션에 물성 피드백을: 버튼은 눌리면 실제로 내려앉고(`translateY(2px)` + 밑면 두께 감소), 티켓은 찢어지는 절취선 애니메이션. **만질 수 있어 보이는데 반응이 없으면 배신감**이 스큐어모프의 함정이다.

## 흔한 실수

- 부품 총동원(도장+테이프+바코드+스탬프+라벨+…) → 빈티지 소품실. 시그니처는 2~3개로 절제.
- 텍스처 없이 타자기 폰트만 → 물성이 안 난다. 노이즈·괘선·두께 그림자가 몸통.
- 도장·테이프 불투명 100% → 스티커 아이콘으로 보임. 잉크와 테이프는 반드시 반투명.
- 완벽한 수평 정렬 → 사람 손이 붙인 것들은 미세하게 어긋난다 (±1~2deg).

## 실물 레퍼런스

**정석 — 물성으로 성공한 실물**
- [teenage engineering](https://teenage.engineering) — 하드웨어 택타일 미학의 정점. 라벨·다이얼·계기 감성의 원천.
- [Receiptify](https://receiptify.herokuapp.com) — 영수증 메타포 하나로 수백만이 공유한 사례. "부품 1개 절제"의 힘 ([제작 배경](https://studioforcreativeinquiry.org/project/receiptify)).
- [Poolsuite](https://poolsuite.net) — 레트로 물성(멤버십 카드·카세트 감성) 웹 연출의 컬트 클래식.

**폰트**
- [Special Elite](https://fonts.google.com/specimen/Special+Elite) · [Courier Prime](https://fonts.google.com/specimen/Courier+Prime) — 타자기체 2종. 한글 대안 탐색은 [눈누](https://noonnu.cc).

- 검색 키워드: `cassette label design`, `receipt UI`, `ticket stub design`, `washi tape mockup`
- 로컬 데모: `스타일/_previews/스타일-데모.html`

## 관련 문서

- [[디자인 스타일 카탈로그]] · 인접 스타일: [[페이퍼 컷아웃]] (같은 물성 축, 공작 버전), [[하프톤 도트]] (인쇄 축), [[리퀴드 글라스]] (반대 물성 — 유리 vs 종이)