[게임 기획 기초]UI 컴포넌트에 관하여

UI 컴포넌트에는 다음 요소들이 있습니다.

[마우스 포인터] [버튼] [박스] [Bar] [트리노드] [윈도우] [패널] [그룹박스] [탭컨트롤] [윈도우 버튼] [대화상자 아이콘]

1. 마우스 포인터

마우스 포인터는 사용자의 마우스가 위치한 좌표를 나타내며, 해당 위치에서 어떤 기능을 수행할 수 있는지를 보여줍니다.

마우스 포인터는 컴퓨터를 처음 사용하는 사용자가 학습하는 단계에서 중요한 역할을 합니다.

사용자는 보통 아무런 인식 없이 마우스 포인터를 사용하다가 점차적으로 그 기능을 이해하게 됩니다.

마우스 포인터의 형태는 특정 어플리케이션에 따라 다를 수 있지만, 일반적으로 큰 차이는 없으며 컨셉 정도만 다를 수 있습니다.

마우스 포인터의 형태는 사용자에게 새로운 학습을 강요할 필요가 없기 때문에 일관성을 유지하는 것이 일반적입니다.

다만, 어플리케이션에 따라 사용되는 커서의 종류에는 차이가 있을 수 있습니다.

2. 버튼(단추)

- 일반버튼
    - 가장 일반적인 GUI 단추
    - 텍스트로 이루어진 상자 외에도 GUI에서 대부분의 아이콘은 단추의 기능을 가진다.
- 라디오 버튼
    - 특정 항목을 선택할 때 사용하는 단추
    - 2개 이상의 항목 중 하나만을 선택해야할 때 사용
- 체크박스
    - 특정 항목을 선택할 때 사용되는 단추
    - 2개 이상의 항목을 중복해서 선택해야 할 경우에 사용
- 스핀버튼
    - 스크롤을 움직이는 기능
    - 개수를 설정하거나 값을 변경할 때 사용하기도 함.

버튼은 자동화에 따라 우리의 생활에 깊이 뿌리를 내리고 있습니다.

우리가 형광등을 켜고 끌 때, 전화번호를 입력할 때, 게임 속에서 아이템을 사용할 때 등 다양한 상황에서 버튼을 사용합니다.

버튼은 기본적으로 On/Off 개념으로 시작했으며, 현대에 이르러서는 더욱 세밀하고 다양한 기능을 가진 버튼들이 개발되었습니다.

버튼은 모두 활성/비활성 상태를 가질 수 있습니다.

비활성화 상태일 때는 기본적으로 동일한 형태를 유지하지만 시선을 끌지 않도록 낮은 명도와 채도로 처리되거나 제작될 수 있습니다.

이를 통해 사용자의 주목을 덜 받으면서도 기능적인 차이를 나타낼 수 있습니다.

3. 박스(상자)

- 텍스트상자(한 줄 또는 여러 줄)
    - 한 줄일 경우
        - 텍스트를 입력할 수 있는 칸
        - 설계될 때부터 입력 가능한 글자 수를 결정하는 경우가 많음
        - ID나 암호, 대화명, 제목 등을 입력할 때 주로 사용
    - 여러 줄일 경우
        - 텍스트를 입력할 수 있는 칸
        - 레이아웃 상 한 줄에 입력되어야 할 글자수를 미리 결정하는 경우가 있음
        - 하지만 한 줄 짜리 텍스트 상자만큼 중요한 요소는 아님

**상자 (Box)**는 창 안에 존재하는 또 다른 공간을 의미합니다.

이 공간은 단순히 텍스트를 입력할 수 있는 공간이 될 수도 있고, 선택 가능한 여러 목록을 보여주는 역할을 할 수도 있습니다.

상자를 통해 사용자는 다양한 상호작용을 할 수 있습니다.

UI (사용자 인터페이스)는 조작 단계가 적을수록 간편하다고 할 수 있습니다.

사용자가 조작해야 할 단계가 적을수록 사용자 경험이 향상되고, 더욱 간편하게 인터페이스를 사용할 수 있습니다.

따라서 UI를 설계할 때는 조작 단계를 최소화하고 사용자의 편의성을 고려하는 것이 중요합니다.

하지만, 목록 상자를 이용해 목록을 한 번에 다 보여주거나, 한 화면에 모든 정보를 노출시키는 방법은 위험한 발상일 수 있습니다.

왜냐하면 정보의 과다노출은 사용자를 혼란스럽게 만들 수 있기 때문입니다.

이상적인 UI 레이아웃은 미적인 기준과 기능적인 부분을 모두 고려하여 결정되어야 합니다.

사용자에게 필요한 정보를 제공하면서도 적절한 수준의 정보 노출을 유지하는 것이 중요합니다.

4. 바(막대)

**바(막대)**는 창의 스크롤을 이동하거나 진행 상황을 직관적으로 보여주는 컨트롤러를 일반적으로 가리키는 단어입니다.

바는 진행률 표시줄로 사용되기도 하며, 로딩이나 설치 등의 진행 상황을 표시할 때 자주 활용됩니다.

진행률 표시줄이나 다른 동적인 표시장치가 없다면 사용자는 진행 상황을 알 수 없을 뿐만 아니라, 현재 장치가 정상적으로 작동하는지조차 파악하기 어려울 수 있습니다.

따라서 바는 사용자에게 진행 상태를 시각적으로 알려주는 중요한 요소입니다.

스크롤 막대

• 화면의 스크롤을 이동시켜 현재 화면에서 보이지 않는 나머지 정보를 보기 위한 컨트롤러
• 양 끝의 스핀 버튼을 눌러 일정량 이동시키거나 중앙의 버튼을 눌러 직접 이동시키거나, 스크롤 막대의 빈 곳을 눌러 한번에 이동시킬 수도 있음
• 픽셀단위, 블럭단위

슬라이더

• 특정 기능의 정도(강약)을 조절하기 위한 컨트롤러
• 볼륨 조절 등의 기능에 많이 쓰임

5. 하이어라키(트리노드)

트리 구조는 부모/자식이라는 개념의 계층구조로 이루어져 있으며, 다양한 분류를 할 때 유용한 구조입니다.

이 구조는 각 항목이 서로 연결되어 있어 상위 항목(부모)과 하위 항목(자식)으로 구성되어 있습니다.

폴더 구조와의 유사성

'내컴퓨터'의 폴더 구조도 트리 구조와 유사한 형태로 구성되어 있습니다.

각 폴더는 상위 폴더(부모)와 하위 폴더(자식)로 연결되어 계층적인 구조를 형성합니다.

폴더 구조에서는 보이는 정보를 확장하거나 숨길 수 있는 기능을 제공하여 사용자가 필요한 정보에 집중할 수 있도록 합니다. 또한, 전체 분류를 한 눈에 볼 수 있어 사용자에게 편의성을 제공합니다.

트리 구조의 활용

트리 구조와 관련하여 퀘스트, 레시피, 경매장, 제작 시스템 등의 UI에서 자주 등장하는 이유는 해당 기능들이 다양한 분류와 계층적 구조를 가지고 있기 때문입니다.

사용자는 트리 구조를 통해 필요한 정보를 찾고, 필요에 따라 확장 또는 숨김 기능을 활용하여 UI를 효과적으로 탐색할 수 있습니다.

6. 윈도우(창)

컨트롤 정보를 불러오는 방법은 디스플레이 공간의 크기에 따라 두 가지 방식으로 나뉩니다. 아래는 각각의 방법에 대한 설명입니다:

1. 디스플레이 공간이 작은 경우 (스마트폰/MP3)

화면을 전환시켜 별도의 메뉴 화면을 출력하는 방식을 주로 사용합니다.

작은 화면에서는 한 번에 많은 정보를 표시하기 어려우므로, 사용자가 필요한 기능이나 정보를 선택할 수 있는 메뉴 화면을 전환하여 제공합니다.

이 방식은 사용자가 원하는 기능을 선택하고 실행할 수 있도록 도와줍니다.

2. 디스플레이 공간이 넓은 플랫폼 (PC/TV)

정보를 띄울 별도의 영역을 제공하는 방식을 사용합니다. 이 영역을 "창(Window)"이라고 합니다.

창은 목적이나 정보에 따라 세부 이름을 갖게 됩니다. 예를 들어 포토샵, MS Office와 같은 어플리케이션에서는 다양한 작업을 위한 창들이 제공되며, 경고 메시지와 같은 작은 창도 포함됩니다.

이 창 안에는 다양한 구성요소들이 위치할 수 있으며, 사용자는 이 창을 통해 필요한 정보를 확인하고 조작할 수 있습니다.

위 방법들은 디스플레이 공간의 크기에 따라 최적화된 사용자 경험을 제공하기 위해 선택되는 방식입니다.

디스플레이 공간이 작은 경우에는 전환 가능한 메뉴 화면을 사용하여 사용자가 쉽게 기능을 선택할 수 있도록 도와주고, 디스플레이 공간이 넓은 경우에는 별도의 창을 제공하여 다양한 정보와 기능을 효과적으로 표시하고 조작할 수 있도록 합니다.

7. 패널

패널은 창 내에서 공간을 구분하기 위해 사용되는 요소입니다.

UI 창 안에서 패널은 주로 상단에 위치하며, 해당 패널과 직접적인 관련이 있는 항목들이 배치됩니다.

패널은 UI 요소들을 논리적으로 그룹화하여 사용자에게 정보를 구조화하고 시각적으로 구분할 수 있도록 도와줍니다.

8. 그룹박스(그룹상자)

그룹박스 또는 그룹상자는 창 내에서 공간을 구분하기 위해 사용됩니다.

하나의 UI 창 안에서 여러 가지 정보를 그 성격에 맞게 묶을 수 있으며, 각 그룹에 이름을 붙일 수도 있습니다

그룹박스는 관련된 UI 요소들을 시각적으로 묶어서 표현함으로써 사용자가 정보를 더 쉽게 이해하고 접근할 수 있도록 도와줍니다.

또한, 그룹박스는 UI 디자인의 일관성과 구조를 유지하는 데에도 도움이 됩니다.

패널과 그룹박스는 UI 창 내에서 정보의 구분과 구조화를 도와주는 요소입니다.

패널은 창의 상단에 위치하여 해당 패널과 관련된 항목을 배치하고, 그룹박스는 여러 가지 정보를 논리적으로 묶어서 표현하고 이름을 붙일 수 있습니다.

9. 탭 컨트롤

탭 컨트롤은 창 내에서 공간을 구분하기 위해 사용되는 요소입니다.

각각의 탭을 통해 다양한 정보를 구분할 수 있으며, 각 탭에 이름을 붙일 수 있습니다.

선택된 상태의 탭을 "전경 탭"으로 표시하고, 선택되지 않은 나머지 창을 "배경 탭"으로 표시합니다.

이를 통해 사용자는 필요한 정보에 쉽게 접근하고 선택된 탭의 내용을 확인할 수 있습니다.

게임에서는 종종 탭 컨트롤이 창의 역할을 대신하는 경우도 있습니다.

10. 윈도우 버튼(창 버튼)

윈도우 버튼 또는 창 버튼은 창 자체를 컨트롤하기 위해 사용됩니다. 이 버튼들은 창의 정보가 아닌 창의 상태를 조절하는 데 사용됩니다.

일반적으로 창의 제목과 같은 영역에 위치하며, 제목은 보통 좌측 정렬되고 버튼은 우측 정렬됩니다.

대표적인 창 버튼으로는 [최소화], [최대화], [닫기]가 있으며, [도움말], [복원] 등의 다른 버튼들도 종종 사용됩니다.

또한, 어플리케이션에 따라 [전체 화면 보기], [미니모드]와 같은 부가기능을 가지는 창 버튼도 있을 수 있습니다.

탭 컨트롤은 창 내에서 정보를 구분하고 선택할 수 있도록 도와주며, 윈도우 버튼은 창의 상태를 조절하고 창을 컨트롤하는 데 사용됩니다.

11. 대화상자 아이콘

대화상자 아이콘은 창에 출력되는 메시지 앞에 첨부되어 메시지의 주목성을 높이는 역할을 합니다.

이 아이콘들은 사용자에게 메시지의 성격과 중요도를 시각적으로 전달하여 사용자의 주의를 끌기 위해 사용됩니다.

대표적인 대화상자 아이콘으로는 [경고 메시지], [중대한 오류], [물음표], [정보] 아이콘이 있습니다.

[경고 메시지] : 사용자에게 경고하는 메시지를 전달할 때 사용됩니다. 주의해야 할 사항이나 잠재적인 문제에 대해 사용자를 경고하는 역할을 합니다.

[중대한 오류] : 중대한 오류가 발생했음을 사용자에게 알리는 메시지에 첨부됩니다. 심각한 문제나 오류 상황을 나타내며, 사용자의 주의가 필요함을 나타냅니다.

[물음표] : 사용자에게 질문이나 의문을 제기하는 메시지에 사용됩니다. 사용자의 참여나 선택이 필요한 상황을 나타내며, 추가 정보나 도움이 필요함을 알립니다.

[정보] : 일반적인 정보를 전달하는 메시지에 사용됩니다. 사용자에게 유용한 정보를 제공하거나 안내하는 역할을 합니다.

이러한 대화상자 아이콘은 메시지의 성격을 시각적으로 나타내어 사용자에게 즉각적으로 정보를 전달하고 사용자의 주의를 높이는 데 도움을 줍니다.

참고 : 콜로소(Coloso) / 게임 기획, 입문부터 완벽 취업 보장까지 (구본일)