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

# 서베일런스 (Surveillance)

> 한 줄 정의
> CCTV·관제실·군용 HUD의 미학 — 스캔라인, 타임스탬프, 코너 브래킷, 바운딩 박스, 포스퍼 그린. "기계가 지금 무언가를 지켜보고 있다"는 긴장감을 연출한다.

![[preview-surveillance.jpg]]

## 언제 쓰나 / 피하나

| 적합 | 부적합 |
|------|--------|
| 보안·모니터링·관제 제품 | 밝고 친근해야 하는 소비자 제품 |
| 개발자 도구·터미널 감성 서비스 | 장시간 독서 (저대비 녹색 본문은 눈 피로) |
| 게임·엔터·티저 캠페인 | 신뢰보다 안정감이 필요한 헬스케어류 |
| 라이브·실시간성 강조 (LIVE, REC) | |

## 스타일 DNA

### 팔레트 — 어둠 + 발광체 1색

| 토큰 | 값 | 역할 |
|------|-----|------|
| void | `#050807` | 바탕 (모니터 꺼진 검정) |
| phosphor | `#63F78F` | 포스퍼 그린 — 주 발광색 |
| alert | `#FF4B3E` | REC·경고 전용 |
| dim | `rgba(99,247,143,.22)` | 크로스헤어·보조선 |

- 대안 팔레트: 앰버 단색(`#FFB000` — 구형 단말), 열화상(마젠타→옐로 그라디언트), 나이트비전 화이트.
- 발광색은 **한 색 체제**. 두 색이 넘으면 관제실이 아니라 게이밍 기어가 된다.

### 타이포

- 전부 모노스페이스 (IBM Plex Mono·JetBrains Mono). 예외 없음 — 프로포셔널이 섞이는 순간 "시스템" 감이 깨진다.
- `letter-spacing: .08~.15em`, 대문자, 좌표·시각 등 텔레메트리는 실데이터처럼 포맷(`LAT 37.5326`).
- 발광 표현: `text-shadow: 0 0 8px rgba(99,247,143,.55)`.

### 구조 장치 (시그니처 부품)

코너 브래킷 · 크로스헤어 · 바운딩 박스 + 라벨 탭(`SUBJECT_01 · 98.2%`) · 상단 상태바(`CAM_04 // REC // timestamp`) · 하단 텔레메트리 스트립.

## 핵심 레시피 (CSS)

```css
/* CRT 스캔라인 + 비네트 — 오버레이 두 장이 전부다 */
.crt { position: relative; background: #050807; }
.crt::before {  /* 스캔라인 */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.32) 0 2px, transparent 2px 4px);
}
.crt::after {   /* 비네트 */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55));
}
/* 코너 브래킷 — border 두 변만 */
.corner { position: absolute; width: 34px; height: 34px; border: 2px solid #63F78F; }
.corner--tl { left: 18px; top: 18px; border-right: none; border-bottom: none; }
/* 바운딩 박스 */
.bbox { border: 1.5px dashed #63F78F; box-shadow: 0 0 14px rgba(99,247,143,.3); }
.bbox .label { position: absolute; top: -26px; background: #63F78F; color: #050807; padding: 3px 8px; }
```

```css
/* REC 점멸 — step이어야 기계답다. ease면 숨쉬는 생물이 된다 */
@keyframes rec { 50% { opacity: 0; } }
.rec-dot { animation: rec 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }
```

- 타임스탬프는 JS로 실제 시각을 흘려보내는 것이 최고의 디테일 — 멈춘 시계는 세트장 소품이다.
- 글리치 효과는 이벤트(에러·감지)에만. 상시 글리치는 사흘 만에 소음이 된다.

## 흔한 실수

- 스캔라인 과농도(> 0.35) → 텍스트 간섭, 저해상도 흉내가 아니라 그냥 안 보임.
- 포스퍼 그린으로 장문 본문 → 눈 피로. 본문이 필요하면 회색조로 낮추고 그린은 상태·라벨에.
- 부품 총동원(브래킷+크로스헤어+글리치+노이즈+…) → 긴장이 아니라 소음. 화면당 장치 3개면 충분.
- 프로포셔널 폰트 혼입 → 세계관 붕괴.

## 실물 레퍼런스

**아카이브 — FUI의 사전**
- [HUDS+GUIS](https://www.hudsandguis.com) — 영화·게임 FUI 아카이브. 이 장르의 표준 수집처.
- [Sci-fi Interfaces](https://scifiinterfaces.com) — 영화 UI를 UX 관점에서 비평하는 블로그. [HUD 태그](https://scifiinterfaces.com/tag/hud/)부터 보면 된다.
- [Interface In Game](https://interfaceingame.com) — 게임 UI 스크린샷 1.5만+. HUD·타깃팅·미니맵 부품 관찰용.
- [Game UI Database](https://www.gameuidatabase.com) — 스크린샷 5.5만 장을 색·레이아웃·장르로 필터.

**제작사 — 진짜 만든 사람들**
- [Territory Studio](https://territorystudio.com) — 블레이드 러너 2049·마션 등 실제 영화 FUI를 만든 스튜디오. 포트폴리오가 곧 교재.

- 검색 키워드: `FUI design`, `CCTV interface`, `tactical HUD`
- 로컬 데모: `스타일/_previews/스타일-데모.html`

## 관련 문서

- [[디자인 스타일 카탈로그]] · 인접 스타일: [[데이터 디자인]] (같은 모노·계기판 축의 밝고 차분한 버전)