게임 공통 제작 가이드

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

주의사항

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

게임플레이_디자인가이드_웹뷰 컴포넌트.fig

해상도 필수

작업 해상도는 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%`	토스트 팝업 배경

태블릿 대응 필수

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

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

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