표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Pixel Art
레트로 게임에서 영감을 받은 픽셀 단위의 그래픽 스타일로, 향수와 창의성을 자극합니다.
- YEAR
- 1970s
- MOOD
- 레트로 · 친근·발랄
- PRIMARY#FF006E
- SECONDARY#FB5607
- ACCENT#FFBE0B
- BG#1A1A2E
- SURFACE#16213E
취급 표시
- 각진 모서리
- 굵은 테두리
- 격자 바탕
- 굵은 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 3단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 3단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 1단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 2단계
- 레트로
- 친근·발랄
어디에 쓰나
실제로 쓰는 곳
- Minecraft
- Stardew Valley
- 많은 NFT 프로젝트 (CryptoPunks 등)
사용 사례
- 인디 게임 UI
- 레트로 감성 앱
- 브랜드 마스코트
- NFT 아트워크
이런 프로젝트에 맞습니다
- 인디 게임 UI
- 레트로 감성 앱
- NFT 아트워크
- 브랜드 마스코트
이런 프로젝트에 권합니다
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
1970~80년대 아케이드 게임과 8비트 컴퓨터의 기술적 한계에서 탄생. 2010년대 인디 게임 르네상스와 NFT 붐으로 재조명.
핵심 원칙
- 제약 속의 창의성
- 향수
- 단순함의 매력
주요 특징
- 픽셀 단위 그래픽
- 제한된 색상 팔레트
- 레트로 게임 감성
- 그리드 기반 디자인
- 노스탤지어 유발
장점과 한계
장점
- 강렬한 복고 감성과 노스탤지어
- 적은 용량으로 표현력 풍부
- 인디 게임 커뮤니티와 강한 공감대
한계
- 일반 비즈니스·기업 서비스엔 부적합
- 고해상도 디스플레이에서 선명도 유지 어려움 (image-rendering 필요)
- 제작에 시간이 많이 걸림
컬러 시스템
제한된 팔레트 (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 기반 애니메이션.
접근성
텍스트 가독성이 낮을 수 있음. 게임 UI에서는 대형 픽셀 폰트 사용 시 가독성 확보.
자주 묻는 질문
Pixel Art이란 무엇인가요?
레트로 게임에서 영감을 받은 픽셀 단위의 그래픽 스타일로, 향수와 창의성을 자극합니다. 1970~80년대 아케이드 게임과 8비트 컴퓨터의 기술적 한계에서 탄생. 2010년대 인디 게임 르네상스와 NFT 붐으로 재조명.
Pixel Art의 핵심 디자인 원칙은 무엇인가요?
Pixel Art의 핵심 원칙은 제약 속의 창의성, 향수, 단순함의 매력입니다.
Pixel Art은 어떤 프로젝트에 적합한가요?
Pixel Art은 인디 게임 UI, 레트로 감성 앱, 브랜드 마스코트, NFT 아트워크, 인디 게임 UI, 레트로 감성 앱, NFT 아트워크, 브랜드 마스코트 등의 프로젝트에 적합합니다.
Pixel Art의 장단점은 무엇인가요?
장점으로는 강렬한 복고 감성과 노스탤지어, 적은 용량으로 표현력 풍부, 인디 게임 커뮤니티와 강한 공감대이 있습니다. 단점으로는 일반 비즈니스·기업 서비스엔 부적합, 고해상도 디스플레이에서 선명도 유지 어려움 (image-rendering 필요), 제작에 시간이 많이 걸림이 있습니다.
Pixel Art에서 색상은 어떻게 사용하나요?
제한된 팔레트 (8~32색). 8비트·16비트 게임의 색 제약을 재현 색상 역할은 primary: 주인공·주요 오브젝트 색, secondary: 배경·보조 오브젝트, shadow: 픽셀 그림자 (1~2픽셀 어두운 색)입니다. 주의사항: 색상 수 최대 32색 — 제약이 미학, 각 색은 명확히 구분되는 고유 역할 필요.
Pixel Art에 어울리는 폰트 스타일은 무엇인가요?
Pixel Art에는 픽셀 폰트 (비트맵 폰트) 또는 픽셀 느낌의 모노스페이스 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 안티앨리어싱 폰트 사용 금지 — 픽셀 경계 선명하게, 폰트 크기는 픽셀 그리드 배수로 (8px, 16px, 24px).
Pixel Art 디자인에서 하면 안 되는 것은 무엇인가요?
Pixel Art에서 피해야 할 것: 안티앨리어싱 사용 금지 — 모든 엣지 픽셀 경계 선명하게, 부드러운 그림자 금지 — 픽셀 단위 hard shadow만, 고해상도 사진 사용 금지.
Pixel Art을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Pixel Art을 적용한 대표적인 제품·서비스로는 Minecraft, Stardew Valley, 많은 NFT 프로젝트 (CryptoPunks 등) 등이 있습니다.