# Cyberpunk

> 네온 색상과 미래지향적 요소를 활용한 사이버펑크 스타일입니다.

- 층: 스타일 (시각적 스타일)
- ID: cyberpunk
- 연도: 2019
- 무드 태그: 다크, 테크·미래적, 화려한
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/cyberpunk

## 정의

네온 색상과 미래지향적 요소를 활용한 사이버펑크 스타일입니다.

## 역사·배경

Philip K. Dick·William Gibson의 SF 문학과 영화 블레이드 러너에서 영감. 2019~2020년 게임·크립토 붐과 함께 디지털 디자인으로 확산.

## 주요 특징

- 네온 색상
- 글리치 효과
- 미래지향적 타이포그래피
- 어두운 배경
- 기술적 요소

## 핵심 원칙

- 미래성
- 대비
- 반항

## 컬러 시스템

어두운 배경 위 네온 형광색. 검정+네온 노랑/핑크/시안의 극단적 대비

### 색상 역할

- background: 거의 검정 (#0a0a0a~#111) — 야간 도시
- neon-primary: 네온 노랑·라임·시안 중 주색 — 발광 효과 강조
- neon-accent: 핑크·마젠타·퍼플 계열 — 보조 네온
- text: 밝은 흰색 또는 주 네온 색상
- grid/scanline: 반투명 그린·시안 — 배경 텍스처

### 색상 제약

- 밝은 배경 사용 금지 — 배경은 반드시 어두워야 네온이 빛남
- 파스텔·earth tone 사용 금지 — 형광·네온만
- 그라데이션은 네온 색 계열 내에서만

### 다크모드 전략

이미 다크 기반 — 라이트 모드는 사실상 불가능하거나 정체성 상실

### 대비 요구사항

네온 색+검정 배경 조합은 자연적으로 높은 대비 확보

## 타이포그래피

- 폰트 성격: 각지고 미래지향적인 산세리프 또는 모노스페이스. SF 영화 HUD에서 보이는 폰트
- 권장 폰트 수: 최대 2개
- 타입 스케일: 1.333 이상 — 강렬한 계층 대비

### 타이포그래피 제약

- 세리프·장식 폰트 금지
- heading에 glitch 효과 또는 neon glow text-shadow 적극 활용
- letter-spacing 넓게 (0.1~0.2em) — 차갑고 미래적인 느낌
- uppercase 적극 사용

## 설계 제약

### 하면 안 되는 것

- 밝은 배경 사용 금지
- 부드러운 rounded corner 과다 사용 금지 — 각진 느낌 유지
- 자연·유기적 요소 사용 금지

### 반드시 포함할 것

- scanline 또는 CRT 텍스처 효과
- neon glow (box-shadow: 0 0 10px neon-color)
- HUD/터미널 스타일 UI 요소

### 모션 가이드

glitch animation (clip-path + transform 조합). scanline 흐르는 효과. 깜빡이는 neon. linear 또는 steps — ease 사용 금지.

## 무드 프로파일

4축 각각 −2 ~ +2 정수. 취향 테스트(/fit)와 비교 페이지가 같은 좌표를 쓴다.

- 밀도: +1 (여백 −2 ↔ +2 빽빽)
- 온도감: -2 (차가움 −2 ↔ +2 따뜻함)
- 시대감: +2 (레트로 −2 ↔ +2 미래적)
- 격식: -1 (자유분방 −2 ↔ +2 격식)

## 사용 사례

- 게임 UI
- NFT·크립토 프로젝트
- 이스포츠 브랜딩
- SF 장르 콘텐츠

## 추천 프로젝트 유형

- 게임 UI
- NFT·크립토 프로젝트
- 이스포츠 브랜딩
- SF 콘텐츠

## 장단점

### 장점

- 강렬하고 미래지향적인 이미지
- 게임·크립토 커뮤니티와 강한 공감대
- 독특한 분위기로 차별화

### 단점·한계

- 일반 비즈니스에는 부적합
- 접근성 최악 수준 (어두운 배경 + 형광 텍스트)
- 트렌드 의존적

## 실제 사용 제품·서비스

- Cyberpunk 2077 게임 UI
- 많은 NFT 마켓플레이스

## 접근성

네온 on 검은 배경 조합은 할레이션 효과로 오히려 가독성 저하. 접근성 요구사항이 있다면 별도 모드 고려.

## 자주 묻는 질문

### Q1. Cyberpunk이란 무엇인가요?

네온 색상과 미래지향적 요소를 활용한 사이버펑크 스타일입니다. Philip K. Dick·William Gibson의 SF 문학과 영화 블레이드 러너에서 영감. 2019~2020년 게임·크립토 붐과 함께 디지털 디자인으로 확산.

### Q2. Cyberpunk의 핵심 디자인 원칙은 무엇인가요?

Cyberpunk의 핵심 원칙은 미래성, 대비, 반항입니다.

### Q3. Cyberpunk은 어떤 프로젝트에 적합한가요?

Cyberpunk은 게임 UI, NFT·크립토 프로젝트, 이스포츠 브랜딩, SF 장르 콘텐츠, 게임 UI, NFT·크립토 프로젝트, 이스포츠 브랜딩, SF 콘텐츠 등의 프로젝트에 적합합니다.

### Q4. Cyberpunk의 장단점은 무엇인가요?

장점으로는 강렬하고 미래지향적인 이미지, 게임·크립토 커뮤니티와 강한 공감대, 독특한 분위기로 차별화이 있습니다. 단점으로는 일반 비즈니스에는 부적합, 접근성 최악 수준 (어두운 배경 + 형광 텍스트), 트렌드 의존적이 있습니다.

### Q5. Cyberpunk에서 색상은 어떻게 사용하나요?

어두운 배경 위 네온 형광색. 검정+네온 노랑/핑크/시안의 극단적 대비 색상 역할은 background: 거의 검정 (#0a0a0a~#111) — 야간 도시, neon-primary: 네온 노랑·라임·시안 중 주색 — 발광 효과 강조, neon-accent: 핑크·마젠타·퍼플 계열 — 보조 네온입니다. 주의사항: 밝은 배경 사용 금지 — 배경은 반드시 어두워야 네온이 빛남, 파스텔·earth tone 사용 금지 — 형광·네온만.

### Q6. Cyberpunk에 어울리는 폰트 스타일은 무엇인가요?

Cyberpunk에는 각지고 미래지향적인 산세리프 또는 모노스페이스. SF 영화 HUD에서 보이는 폰트 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 세리프·장식 폰트 금지, heading에 glitch 효과 또는 neon glow text-shadow 적극 활용.

### Q7. Cyberpunk 디자인에서 하면 안 되는 것은 무엇인가요?

Cyberpunk에서 피해야 할 것: 밝은 배경 사용 금지, 부드러운 rounded corner 과다 사용 금지 — 각진 느낌 유지, 자연·유기적 요소 사용 금지.

### Q8. Cyberpunk을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Cyberpunk을 적용한 대표적인 제품·서비스로는 Cyberpunk 2077 게임 UI, 많은 NFT 마켓플레이스 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #00FFFF
- secondary: #FF00FF
- accent: #FFFF00
- background: #0a0a0a
- surface: #1a1a1a
- text: #00FFFF
- textSecondary: #FF00FF
- border: #00FFFF

### 타이포그래피

- fontFamily: Orbitron, 'Noto Sans KR', monospace
- headingWeight: 900
- bodyWeight: 400
- letterSpacing: 0.05em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1
- borderRadius: sm 2px / md 4px / lg 8px / full 9999px
- shadow sm: 0 0 10px #00FFFF
- shadow md: 0 0 20px #00FFFF, 0 0 30px #FF00FF
- shadow lg: 0 0 30px #00FFFF, 0 0 40px #FF00FF
- border: 2px solid #00FFFF

### 컴포넌트 형태

- button: square / hover glow / text uppercase
- card: outlined / hover glow
- input: outlined / focus glow
- badge: square / outlined
- icon: phosphor / stroke 2 / size 24px
- layout: fluid / section compact
- animation: 200ms linear
- specialEffects: gradientText, animatedBackground, scanlines

## 관련 링크

### 관련 스타일

- [Dark Mode Design](https://ui.buildersgate.com/styles/dark-mode)
- [Neobrutalism](https://ui.buildersgate.com/styles/neobrutalism)
- [Pixel Art](https://ui.buildersgate.com/styles/pixel-art)

### 데모 (같은 화면, 이 스타일로)

- [브랜드 랜딩 데모](https://ui.buildersgate.com/demo/brand/cyberpunk)
- [SaaS 대시보드 데모](https://ui.buildersgate.com/demo/saas/cyberpunk)
- [커머스 데모](https://ui.buildersgate.com/demo/commerce/cyberpunk)

### 비교

- [Cyberpunk vs Dark Mode Design](https://ui.buildersgate.com/compare/cyberpunk-vs-dark-mode)
- [Cyberpunk vs Neobrutalism](https://ui.buildersgate.com/compare/cyberpunk-vs-neobrutalism)
- [Cyberpunk vs Pixel Art](https://ui.buildersgate.com/compare/cyberpunk-vs-pixel-art)

### 쓰임새별 추천

- [게임·엔터테인먼트](https://ui.buildersgate.com/for/game-entertainment)

---

HTML 버전: https://ui.buildersgate.com/styles/cyberpunk

이 문서는 https://ui.buildersgate.com/styles/cyberpunk.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.