수업/TA

TA 6강 / 디자인 기초 1, 2

jh009 2026. 7. 10. 10:44

디자인 기초 1

게임 개발자에게 디자인 이론이 필요한 이유

  • 게임 개발자는 모든 아트 리소스를 직접 만들 필요는 없음
  • 게임 화면이 왜 잘 읽히는지, 왜 안 읽히는지 판단할 수 있어야 함

색상

상태, 위험, 보상, 속성, 분위기, 진영, 상호작용 가능 여부를 전달하는 데 사용

 

명도

색이 얼마나 밝거나 어두운지를 의미

  • 게임 화면에서 명도는 가독성과 시선 유도에 매우 중요함

 

UI 텍스트

  • 밝은 배경 위에 밝은 글자를 올리면 글자가 잘 보이지 않음
  • UI에서는 텍스트와 배경 사이의 명도 차이를 충분히 확보를 해야함 

 

채도

색이 얼마나 선명한지를 의미

  • 채도가 높으면 색이 강하고 눈에 잘 띔
  • 채도가 낮으면 색이 차분하고 흐리며 현실적인 느낌을 줄 수 있음

 

화면 분위기

  • 채도가 낮은 화면 → 현실적이고 차분하거나 우울한 느낌
  • 채도가 높은 화면 → 활기차고 판타지적이며 강한 인상

 

대비

두 요소 사이의 차이를 의미

  • 색상 차이만 의미하지 않음
  • 밝기 차이, 크기 차이, 채도 차이, 움직임 차이, 형태 차이도 모두 대비가 될 수 있음
대비 종류 설명 게임 예시
명도 대비 밝고 어두운 차이 어두운 배경 위 밝은 캐릭터
색상 대비 색의 차이 빨간 경고 표시와 어두운 UI
채도 대비 선명함의 차이 낮은 채도 배경 위 높은 채도 아이템
크기 대비 크기의 차이 큰 보스와 작은 플레이어
움직임 대비 움직임의 차이 정적인 배경 속 움직이는 적
형태 대비 모양의 차이 둥근 배경 속 날카로운 함정

 

강조

플레이어가 먼저 봐야 하는 요소를 드러내는 방법

강조 방식 예시
색상 중요한 아이템을 금색으로 표시
명도 상호작용 오브젝트를 밝게 표시
채도 보상 아이템만 선명하게 표시
크기 보스 체력바를 크게 표시
이펙트 아이템에 반짝이는 효과 추가
움직임 퀘스트 마커가 살짝 움직임
Outline 상호작용 가능한 물체 외곽선 표시
UI 화면 중앙에 경고 메시지 표시

 

가독성

플레이어가 정보를 빠르게 이해할 수 있는 정도


디자인 기초 2

화면 구성

화면 안의 요소들을 어디에, 어떤 크기로, 어떤 관계로 배치할지 결정하는 과정

요소 질문
플레이어 캐릭터 화면에서 캐릭터 위치를 빠르게 확인할 수 있는가?
적의 위치와 행동이 잘 보이는가?
위험 요소 공격 범위, 함정, 투사체가 명확하게 보이는가?
보상 요소 아이템, 목표 지점, 상호작용 오브젝트가 눈에 띄는가?
UI 필요한 정보가 적절한 위치에 배치되어 있는가?
배경 분위기를 만들면서도 주요 정보를 방해하지 않는가?
카메라 플레이어가 봐야 할 정보를 화면 안에 담고 있는가?

 

 

비율

화면 안의 요소들이 서로 어떤 크기 관계를 가지는지 의미

  • 게임 화면에서 비율은 중요도, 위협감, 거리감, 공간감을 만듦

보스와 플레이어의 비율

  • 보스가 플레이어보다 훨씬 크게 보이면 플레이어는 보스를 강한 위협으로 인식
  • 보스 : 플레이어 = 3:1
    • 보스는 화면 높이의 35~50%
    • 플레이어는 화면 높이의 12~18%

 

균형

화면 안의 시각적 무게가 어떻게 분포되어 있는지를 의미

  • 게임에서는 안정감과 긴장감을 모두 사용 가능
  • 탐험 장면에서는 안정적인 균형이 좋을 수 있음
  • 전투 장면에서는 약간의 불균형이 긴장감을 만듦

대칭 균형과 비대칭 균형

  • 캐릭터가 중앙에 있고 양쪽 배경이 비슷한 형태라면 안정감을 들게 함
  • 비대칭 균형은 화면 양쪽이 완전히 같지는 않지만 시각적 무게가 조절된 구성

 

시선 흐름

플레이어가 화면을 어떤 순서로 읽는지를 의미

  • 좋은 화면 → 플레이어가 봐야 할 정보를 자연스러운 순서로 보여줌
  • 나쁜 화면 → 중요한 정보가 너무 늦게 보이거나, 불필요한 요소가 시선을 먼저 빼앗음

요소 역할
위치 화면 중앙, 상단, 하단, 가장자리 배치
크기 큰 요소가 먼저 보이기 쉬움
명도 밝은 요소가 먼저 보이기 쉬움
채도 선명한 요소가 먼저 보이기 쉬움
움직임 움직이는 요소가 시선을 끌기 쉬움
이펙트 빛, 폭발, 반짝임이 시선을 유도
방향성 캐릭터 시선, 무기 방향, 길의 흐름
UI 아이콘, 마커, 경고 표시가 시선을 유도

 

탐험 화면의 시선 흐름

  • 플레이어가 다음 목적지를 자연스럽게 발견해야 함
  • 길의 형태, 조명, 색상, 카메라 방향, 배경 구조가 시선 흐름을 만듦

요새는 왼쪽 화면을 더 선호하는 느낌이긴 하지만, 오른쪽의 화면을 섞어서 쓰는 느낌? 

 

전투 화면의 시선 흐름

플레이어가 정보 인식하기 쉽게끔 설계가 필요함

 

오른쪽 화면의 난이도를 높이는 방법

- 공격 범위 삭제

- 적의 공격 모션을 조금 더 빠르게 하기

- 캐릭터의 스킬 쿨타임 늘리