---
url: /docs/design/common-guide.md
description: 게임플레이 디자인에 공통으로 적용하는 해상도·타이포그래피·컬러·태블릿 대응 기준
---

# 게임 공통 제작 가이드

게임플레이 화면을 제작할 때 공통으로 적용하는 해상도·타이포그래피·컬러 기준을 안내합니다.
태블릿과 폴더블 기기에서도 안정적으로 노출되도록 반응형 레이아웃 기준을 함께 확인하세요.

:::: warning 주의사항
SDK 적용 전 게임은 기존 디자인 가이드 기준으로 제작해야 합니다.
자세한 수치와 예시는 피그마 파일을 참고해 주세요.

[게임플레이\_디자인가이드\_웹뷰 컴포넌트.fig](https://drive.google.com/drive/folders/1O2aKBC3_jWCLoHevwG45Nadrpu17o4nw)
::::

## 해상도 

* 작업 해상도는 `393 × 852` 기준입니다.
* 심사 기준 해상도는 최소 `320 × 800`, 최대 `720 × 800`입니다.
* 수치는 `1x` 기준으로 표기합니다.
* 모바일 화면은 단말별 `100%` 비율 대응을 전제로 플렉서블하게 제작합니다.
* 모바일 화면은 상태바를 확장한 풀스크린뷰로 제작합니다.
* 태블릿 기종 대응은 별도 태블릿 프레임을 함께 참고합니다.

## 타이포그래피

### 폰트

`Pretendard` 웹폰트 사용을 권장합니다.
필요 시 `NotoSans` 또는 시스템 웹폰트를 사용할 수 있습니다.

```css
font-family:
  system-ui,
  -apple-system,
  'Helvetica Neue',
  'Apple SD Gothic Neo',
  'Segoe UI',
  Roboto,
  Arial,
  'NotoSans',
  'Open Sans',
  'Malgun Gothic',
  '맑은 고딕',
  sans-serif;
```

### 글자 크기 

글자 크기와 위치값의 소수점 사용은 지양합니다.

| 역할 | 기준 | 사이즈 | Line height |
| --- | --- | --- | --- |
| Title 1 | 주요 화면 타이틀 | 19 | Auto |
| Body 1 | 본문 또는 강조 본문 | 17 | Auto |
| Body 2 | 일반 본문 | 16 | Auto |
| Body 3 | 보조 본문 | 15 | Auto |
| Caption 1 | 보조 정보 | 14 | Auto |
| Caption 2 | 작은 보조 정보 | 13 | Auto |

## 컬러 

서비스 내 액션 완결성을 가진 과업 및 주요 액션에 사용하는 컬러입니다.

| 구분 | 이름 | 값 | 용도 |
| --- | --- | --- | --- |
| Brand | KakaoTalk Yellow | `#FEE502` | 카카오 브랜드 컬러 |
| Base | White | `#FFFFFF` | 기본 배경, 텍스트 등 |
| Text | Primary | `#191919` | 본문, 버튼 텍스트 |
| Text | Secondary | `#595959` | 서브 텍스트 |
| Overlay | Gray Scale 40% | `#000000 40%` | 스피너 아이콘 배경 |
| Overlay | Gray Scale 6% | `#000000 6%` | 버튼 |
| Overlay | Gray 67% | `#2E2E2E 67%` | 아이콘 배경 |
| Overlay | Dark 67% | `#1B1C25 67%` | 토스트 팝업 배경 |

## 태블릿 대응 

태블릿 디바이스에 대응할 수 있도록 제작합니다.
코드에서 태블릿 여부를 구분해야 한다면 [디바이스 구분 방법](/docs/webview/device-detection)을 참고하세요.
**화면 크기로 태블릿을 판정하면 폴더블 폰 펼침 상태를 태블릿으로 잘못 판단합니다.**

* 가로 모드는 높이에 맞춰 제작합니다.
* 세로 모드도 높이에 맞춰 제작합니다.
* 모바일 사이즈 그대로 작게 나오는 뷰는 지양합니다.
* 게임 일부가 보이지 않는 뷰는 지양합니다.

| 게임 유형 | 대응 기준 |
| --- | --- |
| 플렉서블 게임 | 디바이스 너비에 맞춰 화면을 채웁니다 |
| 모바일 전용 게임 | 디바이스 높이에 맞추고 좌우 여백(레터박스)으로 노출합니다 |

### 상태바 

태블릿 디바이스에서는 상태바 비확장으로 적용합니다. (iOS, Android 동일)

### 레터박스

### 레터박스 기본 배경 컬러 

내비게이션바 아이콘은 레터박스 컬러 적용 기준에 따라 노출 영역이 달라집니다. 기본 검정 레터박스 사용 시 모바일과 동일하게 게임 영역 내에 노출되며, 게임별 커스텀 레터박스 컬러 지정 시 디바이스 우상단에 노출됩니다.

* 레터박스 기본 배경 컬러는 검은색(`#000000`)입니다.
* 기본 검정 레터박스 사용 시, 내비게이션바 아이콘은 모바일과 동일하게 게임 영역 내에 노출됩니다.

### 레터박스 커스텀 배경 컬러 

* 상태바에 지정한 컬러를 레터박스 배경 컬러로 사용합니다.
* 게임별 커스텀 레터박스 컬러 지정 시, 내비게이션바 아이콘은 디바이스 우상단 영역에 노출됩니다.

**iPad 가로 모드**

**iPad 세로 모드**

**Android 가로 모드**

**Android 세로 모드**

**주의사항**

**세로 모드**

**가로 모드**

## 참고 문서

* [게임 콘텐츠 제작 가이드](/docs/design/content-image-guide): 앱 아이콘·가로형·세로형·공유 이미지와 동영상 제작 기준
* [웹뷰 컴포넌트 가이드](/docs/design/webview-component-guide): 내비게이션·로딩·팝업 등 게임웹뷰 UI 기준
* [게임 실행 흐름](/docs/webview/launch-flow#게임-url-접근-분기): PC·모바일 웹 직접 접근 시 환경별 분기 기준
* [심사 체크리스트](/docs/checklist/review-checklist): 디자인 자체 점검 항목