게임 UI 디자인 스타일 50종

같은 게임 화면 하나를 50가지 디자인 스타일로 렌더링한 비교 시트

→ https://bk927.github.io/game-ui-design-cheatsheet/

스타일 이름만 나열된 표는 실제로 어떻게 보이는지 감이 오지 않습니다. 그래서 화면 하나를 완전히 고정하고 스킨만 50번 갈아끼웠습니다. 50개 프레임의 마크업은 바이트 단위로 동일합니다 — 제목·부제, HP/MP 게이지, 본문 한 줄, 스탯 4종, 인벤토리 목록, 버튼 4개. 눈에 보이는 차이는 전부 디자인 언어의 차이입니다.

카드를 누르면 실제로 조작되는 데모가 나옵니다.

상세 페이지 — 눌러보는 화면

타이틀에서 Continue를 누르면 상태 화면으로 넘어가고, 목록에서 아이템을 고르면 하단 수치가 바뀌고, 설정의 슬라이더는 드래그되고 토글은 뒤집힙니다. 대화는 한 글자씩 타이핑된 뒤 선택지가 뜹니다.

화면	동작
타이틀	Continue / New game / Options → 화면 전환, Quit → 거부 반응
상태 · HUD	진입할 때 HP · MP 게이지가 0에서 차오름
대화	타이핑 연출 → 선택지 등장 → 3턴 진행 후 복귀
목록	행 선택 · Sort 역순 정렬 · Drop 제거 · Equip 별표
설정	슬라이더 클릭/드래그, ON/OFF 토글, Reset · Apply

전환 효과도 스타일의 일부

같은 화면 전환이라도 스타일마다 움직임이 달라야 합니다. Swiss는 디졸브하지 않고 하드컷으로 끊기며, CRT는 브라운관처럼 세로로 수축했다 펴지고, Pixel은 부드럽게 섞이는 대신 steps()로 계단을 밟습니다. 11가지 전환 성격을 정의하고 50종에 배정했습니다.

전환	성격	적용 예
cut	하드컷 + 라인 와이프	Swiss, Neo-Swiss, Minimalism, Magazine, Japanese Editorial
pop	팝 · 바운스	Bauhaus, Constructivism, Neo-Brutalism, Memphis, Collage, Kawaii Craft Pop, Messenger Casual
slide	물리적 슬라이드	Flat, Skeuomorphism, Y2K, Pixel × Modern, Bright Anime Gacha
elevate	계층 이동	Material, Neumorphism, Bento
glitch	RGB 스플릿 + 지터	Cyberpunk, Vaporwave, Maximalism
scan	스캔 수축	CRT, FUI, Blueprint, Retrofuturism
step	스텝 디졸브	Pixel, 90s Web, Punk / Zine
panel	컷 프레임 와이프	Manga Panel, Manga Editorial, Anime, Brush Kinetic Battle
paper	종이 넘김	Newspaper, Dossier, Archive, Scrapbook, Marginalia, Grunge
ornate	골드 페이드	Art Deco, Art Nouveau, Baroque, Manuscript, Occult
blur	블러 페이드	Glassmorphism, Frutiger Aero

prefers-reduced-motion을 켠 환경에서는 애니메이션과 타이핑이 모두 꺼지고 조작만 남습니다.

정지 시트 — 6화면 한눈에

데모 아래에는 같은 스타일의 화면 6종이 정지 상태로 깔립니다. 클릭 없이 비교할 때 씁니다.

#	화면	무엇을 보여주나
1	타이틀	로고 크기, 세로 메뉴, 1차/2차 버튼 위계
2	상태 · HUD	게이지 2종, 스탯 4종, 목록
3	대화 · 선택지	화자 라벨, 본문 조판, 선택지 3개
4	목록 · 인벤토리	6행 목록의 리듬, 수치 정렬
5	설정	슬라이더 3개, ON/OFF 토글 행
6	타이포 · 컴포넌트	Aa 견본, 숫자 4종, 0/50/100% 게이지

문구는 전부 로렘 입숨 더미입니다. 내용이 아니라 조판과 형태만 눈에 들어오게 하려는 의도입니다.

수록 계열

모더니즘 · 현대 · 장식주의 · 포스트모던 · 디지털 · 미래 · 레트로 · 거친 계열 · 인쇄물 · 물질성 · 판타지 · 일본계 — 12계열 50종.

각 카드의 영문 이름은 그대로 검색어로 쓸 수 있습니다. Pinterest · Behance · Dribbble에서 스타일명 + game UI 조합이 가장 잘 걸립니다.

★ 흑백 스케치 궁합

일부 스타일에는 별점이 붙어 있습니다. 흑백 스케치·펜화 리소스와의 궁합으로, 채색 없이 선화만으로도 화면이 완성되는 계열일수록 높습니다. 상단 흑백 스케치 ★4+ 필터로 해당 스타일만 추릴 수 있습니다.

구조

index.html    빌드 결과물 (GitHub Pages가 이 파일을 서빙)
build.js      생성기 — 스타일 데이터 + 화면 템플릿 + 페이지 셸
css/
  00-chrome.css              페이지 크롬 + 화면 프리미티브 기본형
  10-modern.css              모더니즘 · 현대
  20-ornament-digital.css    장식주의 · 포스트모던 · 디지털
  30-future-retro.css        미래 · 레트로
  40-rough-print-jp.css      거친 계열 · 인쇄물 · 물질성 · 판타지 · 일본계
  50-interactive.css         스테이지 + 11가지 전환 성격

핵심은 모든 화면이 같은 프리미티브로 조립된다는 점입니다. .ui-name .ui-sub .ui-bar .ui-stats .ui-list .ui-lbl button — 스킨은 이 프리미티브만 정의하면 인터랙티브 5화면과 정지 6화면 전부에 자동으로 적용됩니다. 스킨 CSS에는 화면별 예외도, 애니메이션도 없습니다. 전환은 --enter --exit --fx 커스텀 프로퍼티로 .tr-* 클래스가 주입합니다.

빌드

의존성 없음. Node.js만 있으면 됩니다.

node build.js

index.html(단독 문서)과 design-styles.html(head/body 없는 조각)을 함께 뽑습니다. 로컬에서 볼 때는 index.html을 브라우저로 바로 열면 됩니다.

스타일 추가하기

1. build.js 상단 S 배열에 한 줄 추가 — [계열, 이름, slug, 특징, 게임에서, 흑백스케치궁합(0~5), 추가검색어]
2. 같은 파일 TR 맵에 slug: '전환키' 한 줄 추가 (빠뜨리면 빌드가 에러로 알려줍니다)
3. css/ 중 알맞은 파일에 .sk-<slug> 블록 작성. 최소한 다음을 정의하면 모든 화면이 완성됩니다.

.sk-myskin { background: …; color: …; }
.sk-myskin .ui { font-family: …; }
.sk-myskin .ui-name { … }
.sk-myskin .ui-bar { … }
.sk-myskin .ui-bar i { … }
.sk-myskin .ui-stats span { … }
.sk-myskin .ui-list li { … }
.sk-myskin button { … }
.sk-myskin button.pri { … }

4. node build.js

조작

• 카드 클릭 또는 제목 링크 → 상세 보기
• ← → 이전/다음 스타일, Esc 목록으로
• 상세 페이지 상단 탭으로 화면 이동, ↻ 다시 보기로 전환 재생
• 주소창 해시로 바로 열기 — 예: #neoswiss, #manga

라이선스

MIT