# Cyberpunk — 디자인 스타일 가이드

## 기본 정보
- **ID**: cyberpunk
- **카테고리**: visual-style
- **연도**: 2019

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

## 역사·배경
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 사용 금지.

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

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

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

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

## 실제 사용 제품·서비스
- Cyberpunk 2077 게임 UI
- 많은 NFT 마켓플레이스

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

## 관련 스타일
- [dark-mode](https://ui.buildersgate.com/styles/dark-mode)
- [neobrutalism](https://ui.buildersgate.com/styles/neobrutalism)
- [pixel-art](https://ui.buildersgate.com/styles/pixel-art)

## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.

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

### 헤더
- background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%)
- textColor: #00FFFF
- accentColor: #FF00FF

### 타이포그래피
- fontFamily: Orbitron, 'Noto Sans KR', monospace
- headingWeight: 900
- bodyWeight: 400
- letterSpacing: 0.05em

### 스페이싱
- unit: 8px
- scale: 1

### 그림자 (Shadows)
- sm: 0 0 10px #00FFFF
- md: 0 0 20px #00FFFF, 0 0 30px #FF00FF
- lg: 0 0 30px #00FFFF, 0 0 40px #FF00FF
- xl: 0 0 50px #00FFFF, 0 0 60px #FF00FF, 0 0 70px #FFFF00

### Border Radius
- none: 0
- sm: 2px
- md: 4px
- lg: 8px
- full: 9999px

### 테두리 (Borders)
- width: 2px
- style: solid
- color: #00FFFF

### 이펙트
- blur: 0px
- opacity: 0.9
- transition: all 0.2s linear

### 애니메이션
- duration: 200ms
- easing: linear

### 컴포넌트 토큰
- 버튼: shape=square / hoverEffect=glow / textTransform=uppercase
- 카드: style=outlined / hoverEffect=glow
- 인풋: style=outlined / focusEffect=glow
- 배지: shape=square / style=outlined
- 아이콘: package=phosphor / strokeWidth=2 / defaultSize=24

### 레이아웃
- containerStyle: fluid
- sectionSpacing: compact

### 특수 효과
- glassmorphism: false
- gradientText: true
- animatedBackground: true
- scanlines: true
- noise: false

## 자주 묻는 질문 (FAQ)

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

### Q: Cyberpunk의 핵심 디자인 원칙은 무엇인가요?
A: Cyberpunk의 핵심 원칙은 미래성, 대비, 반항입니다.

### Q: Cyberpunk은 어떤 프로젝트에 적합한가요?
A: Cyberpunk은 게임 UI, NFT·크립토 프로젝트, 이스포츠 브랜딩, SF 장르 콘텐츠, 게임 UI, NFT·크립토 프로젝트, 이스포츠 브랜딩, SF 콘텐츠 등의 프로젝트에 적합합니다.

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

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

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

### Q: Cyberpunk 디자인에서 하면 안 되는 것은 무엇인가요?
A: Cyberpunk에서 피해야 할 것: 밝은 배경 사용 금지, 부드러운 rounded corner 과다 사용 금지 — 각진 느낌 유지, 자연·유기적 요소 사용 금지.

### Q: Cyberpunk을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Cyberpunk을 적용한 대표적인 제품·서비스로는 Cyberpunk 2077 게임 UI, 많은 NFT 마켓플레이스 등이 있습니다.

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=cyberpunk
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=cyberpunk&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

← 홈으로 돌아가기

Cyberpunk

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

연도

2019

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

#00FFFF

핵심 원칙

1

미래성

2

대비

3

반항

주요 특징

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

장단점

장점

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

단점 / 한계

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

적합한 사용처

사용 사례

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

이런 프로젝트에 추천

게임 UINFT·크립토 프로젝트이스포츠 브랜딩SF 콘텐츠
접근성

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

실제 사용 예시

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

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

Neon Buttons

네온 효과가 있는 사이버펑크 버튼

Cyberpunk Cards

네온과 글리치 효과가 있는 카드

Neural Link

사이버펑크 미학으로 미래지향적 인터페이스를 구현합니다.

> CONNECT_

Neon City

네온 색상과 어두운 배경의 강렬한 대비를 활용합니다.

> ACCESS_

Terminal Interface

터미널 스타일의 인터페이스

terminal@cyberpunk:~$
> initializing system...
> loading neural interface...
> connection established
> ready_

Neon Typography

발광하는 네온 텍스트

Cyberpunk

Neon Lights

Future Vision

Cyber Grid

사이버펑크 스타일의 그리드 패턴

[ GRID SYSTEM ]

자주 묻는 질문

Cyberpunk이란 무엇인가요?
네온 색상과 미래지향적 요소를 활용한 사이버펑크 스타일입니다. Philip K. Dick·William Gibson의 SF 문학과 영화 블레이드 러너에서 영감. 2019~2020년 게임·크립토 붐과 함께 디지털 디자인으로 확산.
Cyberpunk의 핵심 디자인 원칙은 무엇인가요?
Cyberpunk의 핵심 원칙은 미래성, 대비, 반항입니다.
Cyberpunk은 어떤 프로젝트에 적합한가요?
Cyberpunk은 게임 UI, NFT·크립토 프로젝트, 이스포츠 브랜딩, SF 장르 콘텐츠, 게임 UI, NFT·크립토 프로젝트, 이스포츠 브랜딩, SF 콘텐츠 등의 프로젝트에 적합합니다.
Cyberpunk의 장단점은 무엇인가요?
장점으로는 강렬하고 미래지향적인 이미지, 게임·크립토 커뮤니티와 강한 공감대, 독특한 분위기로 차별화이 있습니다. 단점으로는 일반 비즈니스에는 부적합, 접근성 최악 수준 (어두운 배경 + 형광 텍스트), 트렌드 의존적이 있습니다.
Cyberpunk에서 색상은 어떻게 사용하나요?
어두운 배경 위 네온 형광색. 검정+네온 노랑/핑크/시안의 극단적 대비 색상 역할은 background: 거의 검정 (#0a0a0a~#111) — 야간 도시, neon-primary: 네온 노랑·라임·시안 중 주색 — 발광 효과 강조, neon-accent: 핑크·마젠타·퍼플 계열 — 보조 네온입니다. 주의사항: 밝은 배경 사용 금지 — 배경은 반드시 어두워야 네온이 빛남, 파스텔·earth tone 사용 금지 — 형광·네온만.
Cyberpunk에 어울리는 폰트 스타일은 무엇인가요?
Cyberpunk에는 각지고 미래지향적인 산세리프 또는 모노스페이스. SF 영화 HUD에서 보이는 폰트 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 세리프·장식 폰트 금지, heading에 glitch 효과 또는 neon glow text-shadow 적극 활용.
Cyberpunk 디자인에서 하면 안 되는 것은 무엇인가요?
Cyberpunk에서 피해야 할 것: 밝은 배경 사용 금지, 부드러운 rounded corner 과다 사용 금지 — 각진 느낌 유지, 자연·유기적 요소 사용 금지.
Cyberpunk을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Cyberpunk을 적용한 대표적인 제품·서비스로는 Cyberpunk 2077 게임 UI, 많은 NFT 마켓플레이스 등이 있습니다.

관련 스타일 탐색

Dark Mode Design

어두운 배경을 사용하여 눈의 피로를 줄이고 배터리를 절약합니다.

Neobrutalism

브루탈리즘의 현대적 해석으로, 굵은 테두리와 대담한 색상을 사용합니다.

Pixel Art

레트로 게임에서 영감을 받은 픽셀 단위의 그래픽 스타일로, 향수와 창의성을 자극합니다.