표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Cyberpunk
네온 색상과 미래지향적 요소를 활용한 사이버펑크 스타일입니다.
- YEAR
- 2019
- MOOD
- 다크 · 테크·미래적 · 화려한
- PRIMARY#00FFFF
- SECONDARY#FF00FF
- ACCENT#FFFF00
- BG#0a0a0a
- SURFACE#1a1a1a
취급 표시
- 살짝 둥근 모서리
- 굵은 테두리
- 보통 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 4단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 1단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 5단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 2단계
- 다크
- 테크·미래적
- 화려한
어디에 쓰나
실제로 쓰는 곳
- Cyberpunk 2077 게임 UI
- 많은 NFT 마켓플레이스
사용 사례
- 게임 UI
- NFT·크립토 프로젝트
- 이스포츠 브랜딩
- SF 장르 콘텐츠
이런 프로젝트에 맞습니다
- 게임 UI
- NFT·크립토 프로젝트
- 이스포츠 브랜딩
- SF 콘텐츠
이런 프로젝트에 권합니다
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
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 적극 사용
설계 제약
반드시 포함
- scanline 또는 CRT 텍스처 효과
- neon glow (box-shadow: 0 0 10px neon-color)
- HUD/터미널 스타일 UI 요소
하지 말 것
- 밝은 배경 사용 금지
- 부드러운 rounded corner 과다 사용 금지 — 각진 느낌 유지
- 자연·유기적 요소 사용 금지
모션 — glitch animation (clip-path + transform 조합). scanline 흐르는 효과. 깜빡이는 neon. linear 또는 steps — ease 사용 금지.
접근성
네온 on 검은 배경 조합은 할레이션 효과로 오히려 가독성 저하. 접근성 요구사항이 있다면 별도 모드 고려.
자주 묻는 질문
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 마켓플레이스 등이 있습니다.