UI, 유저인터페이스 기본 - 1 [Unity]

 

인터페이스하면

그냥 사용자와 컴퓨터 간의 상호작용을 할 수 있다는 감이 온다.

이건 오랜 시간 게임에 몸을 담고 있다면 느껴지는 감이다.

 

자세히 알아보자

 

---

 

먼저 자주 쓰이는 용어를 정의해보자

 

UI와 HUD란 것이 있다.

 

UI, User Interface 의 사전적의미는

사람과 컴퓨터같은 기계장치 간의 상호 작용을 하는 설계,design 를 말한다.

이 상호작용이 목적은 기계장치의 올바른 작동이나 효율적인 작동을 하기 위함이며

동시에 피드백을 줄 수 있어서 사용자의 의사 결정을 돕는다.

 

HUD는 Head-Up Display로

게임 안에서 상태창, 점수와 같이 플레이어가 직접 건드리지는 못하지만 게임의 UI라고 볼 수 있는 것을 말한다.

**우리가 점수를 얻을 수는 있어도 조작은 못하는 것처럼

 

 

---

 

그런데 UI가 저런 것만이 끝인 줄 알았지만

종류도 다양하다.

++ 굳이 이렇게 나누지 않아도 느낄 수 있다.

하지만 나누는 이유는.. 개발자의 입장에서 개발하는 기준같은 것이 필요하니까..? ㅎ

 

 

1. Diegetic UI , 몰입형이라고도 말한다.

 

게임 속에 존재하며 플레이어(게임캐릭터)가 이를 인지하고 있다.

플레이어가 볼 수 있고 들을 수 있다. 나만 보이는게 아니라 내가 조종하는 캐릭터도 본다는 의미다.

** 탄창 수가 총에 써있거나, 실제로 레이더를 켜야 레이더를 볼 수 있다던가.. 그런 것이다.

**서든어택 같은 경우 11시에 레이더가 있었고 플레이어가 보는 것이었지 실제로 캐릭터가 보는 것은 아니었다.

(2012년당시.. 지금은 모름)

 

 

Pros

당연히 유저가 게임에 더 몰입할 수 있고 서사를 따라가겠지..?

게임 장르마다 다르지만 몰입할 수 있도록 해준다면 만족도는 배가 된다.

 

Cons

한 번에 많은 정보를 얻는데 쓰이기에는 조금 힘들다.

주로 미래를 배경으로하는 FPS에서나 쓰인다. (아직은 ..?)

 

 

 

2. Non-diegetic UI, 비몰입이라고도 말한다.

 

게임 밖에 있다고 생각하자. 상호작용을 할 수 있지만 게임 속 플레이어가 상호작용을 하는 것은 아니다.

** 위에서 말했던 HUD와 같다. 점수창 같은 것

++ 점수창이 내게 보인다고 해서 게임 세상속에 존재하는 것은 아니다. 그런 것과 같은 의미

 

 

당연히 시간은 나한테만 보이는 것이고

킬로그도 나한테만 보인다.

 

Pros

보여줘야 하는 정보가 많을 경우 표현하기 어렵다는 Diegetic을 보완해서

많이 보여준다. FPS는 물론 RPG 장르 특성에 잘 맞는다.

 

Cons

정보 전달 측면에서 좋지만 당연히 그만큼 몰입도가 떨어질 수 밖에 없다

정보 양이 많아질수록 화면에서 UI가 차지하는 비율이 높아져서 몰입에 방해가 된다.

하지만 이를 보완하기 위해 UI를 껐다 킬 수 있는 기능이 생겨 많이 좋아지고 있다.

 

 

---

 

이 2개는 위의 것과 약간 성질이 다르다.

보조역할이라고 생각하면 된다.

 

3. Spatial UI, 그대로 해석하면 공간 UI가 된다.

이것 또한 게임 속에 존재하고 상호작용이 가능하지만 그럴 필요가 없는 것들이다.

**Particle이나 Shader를 말한다.

 

4. Meta UI, 메타 UI

3D 공간에 구현되지만 보이지 않는다.

물론 게임 속에 존재하지만 보이지 않으므로 플레이어는 있다는 것은 인지하지 못한다.

**이러한 효과는 FPS 게임의 데미지를 입을 때 많이본다. 

데미지를 입으면 화면에 피가 튀기거나 시야가 흔들리는 등의 효과를 말한다.

 

 

---

 

인터페이스 타입만 있느냐..?

아니다 ㅎㅎ

Canvas Type도 있다. (Unity)

 

 

각 캔버스에 대한 설명이 잘 나와있다.

 

일반적으로 각 캔버스에는 어울리는 인터페이스 종류가 있다.

 

**꼭 그런 것은 아니다.

보면서 왜 쟤네 둘이 어룰릴까 생각해보면 답이 나온다.

++ World에서  Camera 다루기가 어려운 것을 한 번 생각해보자.

 

 

1. Overlay에서는 씬 오브젝트 위에 렌더링 된다.

-> Layer를 최상위에 두어야함.

 

 

2. Camera는 특정 카메라의 앞쪽부터 평면에 놓인 것처럼 렌더링 된다.

UI로 설정된 평면보다 오브젝트가 앞에 있을 경우 UI를 가릴 수 있다.

UI 화면의 크기가 카메라의 거리에 따라 달라지는 것은 아니다.

-> 스크린 크기나 해상도에 따라 자동으로 바뀜.

 

 

3. World에서는 UI 오브젝트들을 회전까지도 가능하게 한다.

UI가 씬 안에 있는 평면 오브젝트처럼 다뤄지기 때문임.

여기서 캔버스의 크기는 카메라의 뷰 각도와 거리에 따라 달라짐.

아래 이미지는 회전된 것이다.

 

---

 

실제로 Canvas를 다뤄보자

 

UI에서 Canvas 오브젝트를 추가시킬 수 있으며 저렇게 Render Mode를 바꿀 수 있다.

 

 

하지만 UI를 만들 때 중요한 것이 있었다.

바로 해상도와 화면 비이다. (Resolution)

해상도는 기기마다, 쓰는 어플리케이션마다 다를 수 있다.

그렇다면 UI를 해상도마다 지정해줘야할까...?

 

보통 3가지를 고려한다. 

**우리가 환경을 WebGL, Android,iOS, PC를 기본으로 생각하기 때문.

일반적으로 모바일기기의 회전으로 인한 화면 비

웹에서 크기 조정이 가능으로 인한 화면 비

PC에서의 화면 비

 

Unity에서 해상도는 여기서 바꿀 수 있다.

++게임 창에서도 바꿀 수 있다.

 

또한 Unity에서는 Build Setting의 PlayerSetting에서 관리한다.

 

 

이렇게 누르면 Inspector창에서 제어할 수 있다.

 

 

Canvas Scaler도 쓰인다.

 

 

 

---

 

참고링크

docs.unity3d.com/

learn.unity.com/tutorial/user-interface-types

www.gamasutra.com/view/feature/4286/game_ui_discoveries_what_players_.php?print=1