# Pixel Art

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

- 층: 스타일 (시각적 스타일)
- ID: pixel-art
- 연도: 1970s
- 무드 태그: 레트로, 친근·발랄
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/pixel-art

## 정의

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

## 역사·배경

1970~80년대 아케이드 게임과 8비트 컴퓨터의 기술적 한계에서 탄생. 2010년대 인디 게임 르네상스와 NFT 붐으로 재조명.

## 주요 특징

- 픽셀 단위 그래픽
- 제한된 색상 팔레트
- 레트로 게임 감성
- 그리드 기반 디자인
- 노스탤지어 유발

## 핵심 원칙

- 제약 속의 창의성
- 향수
- 단순함의 매력

## 컬러 시스템

제한된 팔레트 (8~32색). 8비트·16비트 게임의 색 제약을 재현

### 색상 역할

- primary: 주인공·주요 오브젝트 색
- secondary: 배경·보조 오브젝트
- shadow: 픽셀 그림자 (1~2픽셀 어두운 색)
- highlight: 픽셀 하이라이트 (1~2픽셀 밝은 색)
- background: 하늘·배경 색

### 색상 제약

- 색상 수 최대 32색 — 제약이 미학
- 각 색은 명확히 구분되는 고유 역할 필요
- 그라데이션 표현 시 디더링(dithering) 기법 사용

### 다크모드 전략

dark theme 픽셀 팔레트로 전환. 전체 색 교체 방식

### 대비 요구사항

픽셀 단위 대비 — 각 픽셀이 배경과 구분되어야 함

## 타이포그래피

- 폰트 성격: 픽셀 폰트 (비트맵 폰트) 또는 픽셀 느낌의 모노스페이스
- 권장 폰트 수: 최대 1개
- 타입 스케일: 정수 배수 (×1, ×2, ×3) — 픽셀 그리드 기반

### 타이포그래피 제약

- 안티앨리어싱 폰트 사용 금지 — 픽셀 경계 선명하게
- 폰트 크기는 픽셀 그리드 배수로 (8px, 16px, 24px)

## 설계 제약

### 하면 안 되는 것

- 안티앨리어싱 사용 금지 — 모든 엣지 픽셀 경계 선명하게
- 부드러운 그림자 금지 — 픽셀 단위 hard shadow만
- 고해상도 사진 사용 금지

### 반드시 포함할 것

- 픽셀 그리드 정렬 (모든 요소가 픽셀 단위 정렬)
- 비트맵 스타일 아이콘·일러스트
- 제한된 색 팔레트

### 모션 가이드

frames per second 제한 (8fps, 12fps). steps() timing function 사용 — ease 금지. sprite 기반 애니메이션.

## 무드 프로파일

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

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

## 사용 사례

- 인디 게임 UI
- 레트로 감성 앱
- 브랜드 마스코트
- NFT 아트워크

## 추천 프로젝트 유형

- 인디 게임 UI
- 레트로 감성 앱
- NFT 아트워크
- 브랜드 마스코트

## 장단점

### 장점

- 강렬한 복고 감성과 노스탤지어
- 적은 용량으로 표현력 풍부
- 인디 게임 커뮤니티와 강한 공감대

### 단점·한계

- 일반 비즈니스·기업 서비스엔 부적합
- 고해상도 디스플레이에서 선명도 유지 어려움 (image-rendering 필요)
- 제작에 시간이 많이 걸림

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

- Minecraft
- Stardew Valley
- 많은 NFT 프로젝트 (CryptoPunks 등)

## 접근성

텍스트 가독성이 낮을 수 있음. 게임 UI에서는 대형 픽셀 폰트 사용 시 가독성 확보.

## 자주 묻는 질문

### Q1. Pixel Art이란 무엇인가요?

레트로 게임에서 영감을 받은 픽셀 단위의 그래픽 스타일로, 향수와 창의성을 자극합니다. 1970~80년대 아케이드 게임과 8비트 컴퓨터의 기술적 한계에서 탄생. 2010년대 인디 게임 르네상스와 NFT 붐으로 재조명.

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

Pixel Art의 핵심 원칙은 제약 속의 창의성, 향수, 단순함의 매력입니다.

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

Pixel Art은 인디 게임 UI, 레트로 감성 앱, 브랜드 마스코트, NFT 아트워크, 인디 게임 UI, 레트로 감성 앱, NFT 아트워크, 브랜드 마스코트 등의 프로젝트에 적합합니다.

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

장점으로는 강렬한 복고 감성과 노스탤지어, 적은 용량으로 표현력 풍부, 인디 게임 커뮤니티와 강한 공감대이 있습니다. 단점으로는 일반 비즈니스·기업 서비스엔 부적합, 고해상도 디스플레이에서 선명도 유지 어려움 (image-rendering 필요), 제작에 시간이 많이 걸림이 있습니다.

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

제한된 팔레트 (8~32색). 8비트·16비트 게임의 색 제약을 재현 색상 역할은 primary: 주인공·주요 오브젝트 색, secondary: 배경·보조 오브젝트, shadow: 픽셀 그림자 (1~2픽셀 어두운 색)입니다. 주의사항: 색상 수 최대 32색 — 제약이 미학, 각 색은 명확히 구분되는 고유 역할 필요.

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

Pixel Art에는 픽셀 폰트 (비트맵 폰트) 또는 픽셀 느낌의 모노스페이스 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 안티앨리어싱 폰트 사용 금지 — 픽셀 경계 선명하게, 폰트 크기는 픽셀 그리드 배수로 (8px, 16px, 24px).

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

Pixel Art에서 피해야 할 것: 안티앨리어싱 사용 금지 — 모든 엣지 픽셀 경계 선명하게, 부드러운 그림자 금지 — 픽셀 단위 hard shadow만, 고해상도 사진 사용 금지.

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

Pixel Art을 적용한 대표적인 제품·서비스로는 Minecraft, Stardew Valley, 많은 NFT 프로젝트 (CryptoPunks 등) 등이 있습니다.

## 참고 디자인 토큰

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

### 색상

- primary: #FF006E
- secondary: #FB5607
- accent: #FFBE0B
- background: #1A1A2E
- surface: #16213E
- text: #FFFFFF
- textSecondary: #94A3B8
- border: #3F3F46

### 타이포그래피

- fontFamily: 'Press Start 2P', 'Noto Sans KR', monospace
- headingWeight: 400
- bodyWeight: 400
- letterSpacing: 0.1em

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

- spacing: unit 8px × scale 1
- borderRadius: sm 0 / md 0 / lg 0 / full 0
- shadow sm: 4px 4px 0 #000000
- shadow md: 6px 6px 0 #000000
- shadow lg: 8px 8px 0 #000000
- border: 3px solid #3F3F46

### 컴포넌트 형태

- button: brutalist / hover offset / text uppercase
- card: brutal / hover border
- input: brutal / focus border
- badge: square / solid
- icon: tabler / stroke 2.5 / size 24px
- layout: boxed / section compact
- animation: 0ms steps(1)
- specialEffects: noise

## 관련 링크

### 관련 스타일

- [Retro & Vintage](https://ui.buildersgate.com/styles/retro-vintage)
- [Cyberpunk](https://ui.buildersgate.com/styles/cyberpunk)
- [Low Poly](https://ui.buildersgate.com/styles/low-poly)

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

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

### 비교

- [Pixel Art vs Cyberpunk](https://ui.buildersgate.com/compare/cyberpunk-vs-pixel-art)
- [Pixel Art vs Low Poly](https://ui.buildersgate.com/compare/low-poly-vs-pixel-art)
- [Pixel Art vs Retro & Vintage](https://ui.buildersgate.com/compare/pixel-art-vs-retro-vintage)

### 쓰임새별 추천

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

---

HTML 버전: https://ui.buildersgate.com/styles/pixel-art

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