게임 UI는 플레이어가 게임과 대화하는 창구입니다. 체력 바, 인벤토리, 상점 화면처럼 매 순간 보는 요소들이 한눈에 읽히지 않으면 아무리 재미있는 게임도 불…
스타일 가이드가 없으면 생기는 일
게임 UI는 여러 디자이너가 오랜 기간에 걸쳐 만듭니다. 기준이 없으면 화면마다 확인 버튼의 색이 조금씩 다르고, 제목 글자 크기가 들쭉날쭉하고, 닫기 버튼이 어떤 팝업은 오른쪽 위에, 어떤 팝업은 아래에 붙어 있게 됩니다. 하나하나는 작은 차이지만, 유저는 화면이 바뀔 때마다 버튼을 다시 찾아야 하는 피로를 느낍니다.
작업 속도에도 영향을 줍니다. 새 화면을 만들 때마다 버튼 크기와 색을 처음부터 고민하고, 개발자는 비슷하지만 미묘하게 다른 버튼 이미지를 여러 벌 받아 관리해야 합니다. 스타일 가이드는 이런 반복 결정을 한 번에 정리해 모두의 시간을 아껴 주는 문서입니다.
라이브 서비스 게임에서는 특히 중요합니다. 몇 년에 걸쳐 업데이트가 이어지는 동안 담당 디자이너가 바뀌어도, 가이드가 있으면 새로 합류한 사람이 기존 화면과 어울리는 UI를 빠르게 만들 수 있습니다.
1단계: 기존 화면에서 반복 요소 모으기
스타일 가이드는 빈 문서에서 시작하기보다, 이미 만든 화면들을 한곳에 늘어놓고 반복되는 요소를 모으는 데서 시작하는 편이 쉽습니다. 버튼, 탭, 팝업 틀, 입력창, 슬라이더, 재화 표시, 빨간 알림 점처럼 여러 화면에 등장하는 요소를 잘라 한 장에 모아 보세요.
모아 놓으면 같은 역할인데 모양이 다른 요소가 바로 눈에 띕니다. 확인 버튼이 세 가지 초록색으로 나뉘어 있다면 하나로 통일할 대상입니다. 이 정리 과정 자체가 이후 가이드의 뼈대가 됩니다. 새 프로젝트라 화면이 아직 없다면, 핵심 화면 서너 장의 시안을 먼저 만들고 거기서 요소를 뽑아내면 됩니다.
이때 게임의 세계관과 장르도 함께 적어 두세요. 판타지 게임이라면 금속 장식이 들어간 틀과 따뜻한 금색 강조, 공상과학 게임이라면 얇은 선과 차가운 빛 효과처럼 UI가 지켜야 할 분위기의 방향이 정해집니다. 이 방향 문장 몇 줄이 이후 세부 규칙을 정할 때 판단 기준이 되고, 새 요소를 만들 때 '이게 우리 게임다운가'를 묻는 근거가 됩니다.
2단계: 색, 글꼴, 간격의 기본 규칙 정하기
| 항목 | 정할 내용 | 예시 규칙 |
|---|---|---|
| 색 | 주색, 보조색, 상태색(성공·경고·위험), 배경과 글자색 | 확인 동작은 주색, 삭제·판매 같은 되돌릴 수 없는 동작은 위험색 |
| 글꼴 | 사용 글꼴, 제목·본문·작은 글씨 크기 단계, 굵기 | 제목·소제목·본문·보조 네 단계만 사용 |
| 간격 | 요소 사이 여백의 기본 단위 | 여백은 기본 단위의 배수로만 사용 |
| 모서리·테두리 | 둥근 모서리 정도, 테두리 두께 | 팝업과 버튼의 모서리 둥글기를 통일 |
| 그림자·효과 | 그림자 방향과 세기, 빛나는 효과 사용 범위 | 강조 효과는 한 화면에 한 곳만 |
색은 이름과 값을 함께 적습니다. '진한 파랑'처럼 느낌으로만 적으면 사람마다 다르게 이해하므로, 색상 코드를 함께 넣고 그 색을 어떤 역할에 쓰는지까지 적어야 합니다. 글꼴은 다국어 출시 계획이 있다면 언어별로 쓸 글꼴과 글자가 길어질 때의 처리 규칙도 미리 정해 두는 것이 좋습니다.
규칙의 수는 적을수록 지키기 쉽습니다. 글자 크기가 열 단계나 되면 아무도 외우지 못합니다. 꼭 필요한 단계만 남기고, 예외는 이유와 함께 따로 표시하세요.
3단계: 공통 요소를 상태별로 정리하기
버튼 하나도 여러 상태를 가집니다. 기본, 눌림, 비활성, 선택됨, 알림 있음 상태가 각각 어떻게 보이는지 한 줄로 나란히 정리해야 개발자가 빠짐없이 구현할 수 있습니다. 탭, 체크박스, 토글, 슬롯도 같은 방식으로 상태를 정리합니다.
- 요소 이름과 용도를 적습니다. (예: 주 버튼 - 화면의 핵심 동작 하나에만 사용)
- 크기 종류를 정합니다. (큰 버튼, 기본 버튼, 작은 버튼)
- 상태별 모습을 나란히 배치합니다.
- 안에 들어가는 글자와 아이콘의 위치, 최대 글자 수를 적습니다.
- 실제 화면에 쓰인 예시를 하나 이상 붙입니다.
팝업도 정리 대상입니다. 확인만 있는 팝업, 확인과 취소가 있는 팝업, 보상 팝업처럼 종류를 나누고, 제목 위치, 닫기 버튼 위치, 버튼 순서를 통일합니다. 확인 버튼이 팝업마다 왼쪽과 오른쪽을 오가면 유저가 실수로 원하지 않는 버튼을 누르기 쉽습니다.
4단계: 사용 규칙, 금지 예시, 파일 관리
모양만 정리하면 반쪽짜리 가이드입니다. '한 화면에 주 버튼은 하나만', '위험색은 되돌릴 수 없는 동작에만', '재화 표시는 항상 화면 오른쪽 위'처럼 언제 어떻게 쓰는지 규칙을 적어야 합니다. 잘못 쓴 예시를 함께 보여 주면 규칙이 훨씬 빨리 전달됩니다.
파일과 이름 규칙도 가이드에 넣습니다. 이미지 파일 이름을 'btn_primary_large_pressed'처럼 종류, 역할, 크기, 상태 순서로 짓기로 정하면, 개발자가 엔진에서 찾고 연결하기 쉽습니다. 9슬라이스로 늘려 쓸 이미지라면 늘어나는 영역 기준도 함께 적어 둡니다.
가이드는 피그마 같은 디자인 도구의 공용 컴포넌트와 함께 관리하는 경우가 많습니다. 문서에 적힌 규칙과 실제 컴포넌트 파일이 일치해야 의미가 있으므로, 규칙을 바꿀 때는 두 곳을 함께 고치고 변경 이력을 남기세요.
포트폴리오에 넣을 때는 모든 항목을 채운 두꺼운 문서보다, 자기가 만든 창작 UI를 기준으로 색·글꼴·버튼 상태·팝업 규칙을 몇 장으로 정리한 버전이 더 잘 읽힙니다. 내 창작 UI에서 어떤 규칙을 뽑아 가이드로 만들어야 할지 판단이 서지 않는다면, SBS아카데미게임학원 게임UIUX 과정 상담에 시안을 들고 와 정리 방향을 함께 잡아 보시는 것도 좋습니다.
자주 묻는 질문
스타일 가이드는 게임 개발 초기에 만들어야 하나요?
핵심 화면 몇 장이 나왔을 때 작게 시작하는 것이 좋습니다. 너무 이르면 자주 바뀌고, 너무 늦으면 이미 흩어진 화면을 고치는 일이 커집니다.
스타일 가이드와 디자인 시스템은 같은 말인가요?
비슷하게 쓰이지만, 디자인 시스템은 가이드 문서에 재사용 컴포넌트와 구현 코드까지 묶은 더 넓은 개념으로 쓰는 경우가 많습니다.
가까운 캠퍼스에서 게임 UI·UX 알아보기
사는 곳과 가까운 캠퍼스를 고르면 수업 내용, 오시는 길, 상담 신청을 한 번에 볼 수 있습니다.