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

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

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

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

## 핵심 원칙
- 미래성
- 대비
- 반항

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

## 사용 사례
- 게임 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

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

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 ]

관련 스타일 탐색

Dark Mode Design

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

Neobrutalism

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

Pixel Art

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