아트 스타일 선택

아트 스타일 선택은 UI 요소에 대한 미적 방향을 계획하는 과정입니다. 아트 스타일로 디자인 프로세스를 시작하는 것이 중요한 이유는 아트 스타일이 UI가 게임에서 플레이어가 할 수 있는 일을 직관적으로 제공하는지 확인하기 위해 참조할 수 있는 시각적 기준을 제공하기 때문입니다.

샘플 레이저 태그 게임 .rbxl 파일을 참조하여, 이 사용자 인터페이스 커리큘럼의 이 섹션에서는 게임 장르에 따라 UI 요소를 디자인하는 방법에 대한 의미 있는 결정을 내리는 방법을 보여줍니다. 여기에는 다음과 같은 지침이 포함됩니다:

• 게임 전반에 걸쳐 플레이어에게 전달하고자 하는 내용을 기준으로 필요한 UI 요소 식별하기.
• 청중에게 직관적인 장르별 색상 규칙을 강화하는 색상 테마 선택하기.
• 모든 화면 크기에서 쉽게 해독할 수 있는 간단한 아이콘 윤곽 잡기.
• 다양한 플레이어 워크플로우의 가능성에 맞는 버튼 순서 설정하기.
• 대상 장치에서 가독성을 보장하는 텍스트 시스템 결정하기.

이 섹션을 완료한 후, 게임 내에서 플레이어에게 전달하고자 하는 정보의 구조와 흐름을 디자인하는 방법을 배우게 됩니다.

UI 요소 식별하기

UI의 아트 스타일을 선택하는 첫 번째 단계는 청중에게 전달하고자 하는 다양한 정보 유형에 필요한 UI 요소를 식별하는 것입니다. 디자인 프로세스의 시작에서 이 작업을 수행하는 것은 매우 중요합니다. 이는 UI 요소를 기능적 목적에 따라 분류하고, 플레이어가 각 UI 요소와 상호작용할 때와 장소에 따라 의미론적 결정을 내리며, 게임 전반에 걸쳐 UI 요소를 재사용할 수 있는 위치를 계획할 수 있게 해줍니다.

게임 플레이 요구 사항에 필요한 UI 요소를 브레인스토밍하는 방법은 여러 가지가 있지만, 플레이어가 게임에 참여하자마자 알아야 할 내용을 상상하는 것부터 시작하는 것이 좋습니다. 예를 들어, 플레이어가 샘플 레이저 태그 게임을 열면 다음과 같은 질문을 할 수 있습니다:

• 게임의 목표는 무엇인가요?
• 내 팀에 누가 있는지 어떻게 알 수 있나요?
• 내 팀의 점수를 어떻게 추적하나요?
• 블래스터를 어떻게 선택하나요?
• 블래스터가 레이저를 어디로 쏘는지 어떻게 알 수 있나요?
• 모바일 장치에서 블래스터를 어떻게 쏘나요?
• 레이저를 쏜 후 언제 다시 쏠 수 있나요?
• 라운드가 시작될 때 어떻게 알 수 있나요?
• 블래스터로 누군가를 성공적으로 태그했을 때 어떻게 알 수 있나요?
• 적 팀이 나를 성공적으로 태그했을 때 어떻게 알 수 있나요?

이 질문들을 사용하여 플레이어가 성공하기 위해 알아야 할 정보가 무엇인지 이해함으로써, 샘플 레이저 태그 게임의 UI 요구 사항을 세 가지 범주로 분류할 수 있습니다:

1. 게임의 목표에 대한 정보.
2. 블래스터에 대한 정보.
3. 플레이어의 상태에 대한 정보.

게임의 UI 요구 사항을 범주로 분류하는 것은 각 그룹에 대한 아트 스타일을 형성하여 각 범주가 플레이어에게 가르쳐야 할 정보를 강화할 수 있기 때문에 유용합니다. 예를 들어, UI가 플레이어에게 캐릭터의 건강 상태와 관련된 행동을 알리도록 하려면, UI 요소가 녹색과/또는 플러스 아이콘을 우선시하는 아트 스타일을 선택할 수 있습니다.

게임의 UI 요구 사항을 범주로 분류한 후, 각 범주의 요구 사항을 충족하기 위해 필요한 UI 요소 목록을 작성할 수 있습니다. 예를 들어, 샘플 레이저 태그 게임은 이전의 잠재적 플레이어 질문 목록을 해결하기 위해 다음과 같은 UI 요소 표를 사용합니다. 이 튜토리얼을 진행하면서 UI 커리큘럼은 이 목록을 계속 참조하고 각 UI 요소 범주와 관련된 주요 디자인 결정을 강조할 것입니다.

이제 게임의 UI 요소 목록이 생겼으니, 각 UI 요소 그룹에 대한 스타일적 및 의미론적 선택을 시작할 시간입니다. 색상 테마부터 시작하겠습니다.

색상 테마 선택하기

색상 테마 또는 색상 팔레트는 게임 내에서 일관되게 적용하여 메시지를 전달하는 색상 선택입니다. 예를 들어, 선택 가능한 항목을 나타내기 위해 밝은 색상을 사용하는 것입니다. UI 요소에 색상 테마를 적용하는 것은 중요합니다. 특히 게임 장르 내에서 색상 규칙에 의존할 때, 이는 플레이어가 최소한의 노력으로 UI를 빠르게 이해할 수 있게 해줍니다.

환경 아트 커리큘럼에서는 레이저 태그 환경의 각 반이 상단에서 하단으로의 뷰에서 색상으로 구분되어 각 팀의 스폰 존이 어디에 있는지를 구별합니다: 민트는 맵의 왼쪽에 모인 팀을 위해, 카네이션 핑크는 맵의 오른쪽에 모인 팀을 위해 사용됩니다. 이러한 특정 색상은 서로 잘 대비되는 보색이기 때문에 유용하며, 플레이어가 주변을 쉽게 스캔하고 자신이 건물에서 어떤 방향을 보고 있든지 간에 방향을 잡을 수 있게 해줍니다.

샘플 레이저 태그 게임은 UI에서 이 동일한 색상 테마를 사용하여 각 팀과 관련된 정보를 강조합니다. 예를 들어, 3D 공간 내에서 각 플레이어의 팀 표시기나 화면에 오버레이되는 팀 점수 추적기와 같은 것입니다. 이러한 일관성은 플레이어가 1인칭 슈팅 게임의 빠른 게임 플레이 중에 게임의 목표에 대한 정보를 빠르게 이해하는 데 도움을 줍니다. 특히 플레이어가 환경을 탐색하는 동안 빠른 결정을 내려야 할 때 더욱 그렇습니다.

자신의 게임에 대한 색상 테마를 선택할 때 다음 사항을 고려하세요:

• 색상 테마의 강점은 플레이어가 각 색상과 그 기능 간의 빠른 정신적 연관을 만들도록 돕는 데 있습니다. 이러한 이유로, 색상 테마를 제한하여 플레이어가 UI 요소와 연관시키고자 하는 주요 정보만 강조하세요.
• 색맹인 플레이어가 색상 테마의 메시지를 이해할 수 있도록 UI 요소를 구별하는 데 색상만 의존하지 마세요. 대신, 색상과 아이콘, 형태 및/또는 애니메이션을 결합하여 모든 플레이어가 UI를 효과적으로 소통할 수 있도록 하세요.
• UI가 미적으로 보기 좋기보다 가독성이 더 중요합니다. 이러한 이유로, 간단한 UI를 우선시하세요. 색상은 3D 세계의 밝은 요소와 어두운 요소 모두에서 읽을 수 있어야 합니다.

마지막 포인트의 지침을 강조하기 위해, 샘플 레이저 태그 게임은 2D 화면에 오버레이되는 거의 모든 UI 요소에 대해 검정색과 흰색의 중립 색상을 사용합니다. 검정색과 흰색은 서로 잘 대비되며, 나머지 화면이 다채로운 3D 환경을 표시할 때 읽기 쉽습니다.

간단한 아이콘 윤곽 잡기

아이콘은 게임 내에서 행동, 객체 또는 개념을 나타내는 기호입니다. 간단하고 직관적인 아이콘을 윤곽 잡는 것은 중요합니다. 최종 결과는 플레이어가 텍스트를 사용하지 않고도 자신이 할 수 있는 일과 UI를 통해 전달하고자 하는 내용을 쉽게 인식할 수 있게 해줍니다. 이는 특히 청중이 모바일 장치의 작은 화면을 사용하여 게임에 접근할 경우 더욱 중요합니다.

간단한 아이콘은 이상적으로 3D 요소와 뚜렷한 스타일을 가져야 하며, 게임의 전체 세계와 여전히 조화를 이루어야 합니다. 예를 들어, 환경 아트 커리큘럼의 최종 환경에서는 모듈형 및 소품 3D 자산이 부드럽고 둥근 모서리를 가진 직사각형 형태를 사용하는 깨끗하고 하이테크 아트 스타일을 가지고 있습니다. 바닥의 경사진 패널에서 천장의 거의 원형 창에 이르기까지, 날카로운 모서리는 포함되어 있지 않습니다.

이 아트 스타일을 보완하면서도 여전히 독특하게 유지하기 위해, 이 튜토리얼에서 나중에 만들 UI 요소는 모두 미래적인 미학과 둥근 각도를 포함하며, 환경의 3D 자산의 형태 언어와 일치하지 않습니다. 이는 각 아이콘의 의미가 2D 및 3D 공간의 다른 정보와 구별되도록 유지합니다.

이 개념을 보여주기 위해, 샘플 레이저 태그 게임의 조준점과 모바일 장치에서 블래스터를 쏘는 버튼의 두 이미지를 참조하세요. 두 아이콘 모두 전체 세계와 조화를 이루기 위해 부드러운 각도를 포함하고 있지만, 육각형 및 원형 형태는 플레이어가 게임 내에서 아이콘과 연관시킬 수 있는 어떤 것과도 구별됩니다.

자신의 게임을 위한 간단한 아이콘을 윤곽 잡을 때 다음 사항을 고려하세요:

• 간단한 아이콘은 작아도 가독성이 있어야 합니다. 이러한 이유로, 아이콘의 세부 사항을 제한하세요. 모바일 장치 화면에서 알아볼 수 없게 될 수 있습니다.
• 아이콘은 플레이어의 언어와 관계없이 메시지를 전달할 수 있는 강력한 도구입니다. 플레이어가 UI를 이해하는 데 영향을 미치지 않는 한, 불필요한 텍스트를 아이콘으로 대체하여 현지화 노력을 개선하세요.
• 동일한 장르의 많은 게임이 유사한 스타일의 아이콘을 사용합니다. 예를 들어, 힘을 나타내는 검 아이콘이나 마법을 나타내는 비커 아이콘이 있습니다. 게임의 장르 내 상징성을 수용하세요. 그래야 플레이어가 추가적인 안내 없이도 아이콘을 이해할 수 있습니다.

자신의 게임 장르 내에서 어떤 유형의 아이콘이 일반적인지 모른다면, 게임 UI 데이터베이스를 확인하세요. 이 무료 리소스 도구는 UI 디자이너를 위해 다양한 장르의 수백 개 게임의 스크린샷을 포함하고 있어 디자인 프로세스 중 참조할 수 있습니다.

상호작용 순서 설정하기

상호작용 순서는 플레이어가 UI와 가질 수 있는 상호작용의 순서입니다. 화면에 여러 개의 상호작용 가능한 UI 요소가 있는 경우, 플레이어가 다양한 워크플로우를 탐색할 때 결정을 내리는 데 도움을 주기 위해 직관적인 상호작용 순서를 설정하는 것이 중요합니다.

워크플로우에는 일반적으로 세 가지 유형의 상호작용이 있습니다:

• 주요 상호작용 – 플레이어가 가장 가능성이 높은 행동.
• 보조 상호작용 – 플레이어가 주요 행동의 대안으로 수행할 가능성이 있는 행동.
• 3차 상호작용 – 플레이어가 가장 적게 수행할 가능성이 있는 행동.

각 상호작용 유형은 플레이어가 행동을 수행할 가능성에 따라 서로 다른 수준의 시각적 강조가 필요합니다. 이 개념을 설명하기 위해, 샘플 레이저 태그 게임에서 블래스터를 선택하는 워크플로우의 상호작용 순서를 보여주는 다음 이미지를 살펴보세요. 여기서 A는 주요 상호작용, B는 보조 상호작용, C는 3차 상호작용을 나타냅니다.

이 워크플로우에서 플레이어가 가장 가능성이 높은 행동은 두 가지 유형의 블래스터 중에서 선택하는 것이므로, 블래스터 버튼은 디자인의 다른 상호작용 가능한 요소보다 훨씬 큽니다. 이러한 수준의 시각적 강조는 플레이어의 주의를 끌고, 전체 UI 요소의 중앙으로 시선을 이끌어냅니다. 플레이어가 결정을 내린 후, 워크플로우의 논리적 다음 단계는 선택을 확인하고 라운드를 시작하는 것입니다. 이러한 이유로, SELECT 버튼은 주요 상호작용 바로 아래에 위치합니다.

가능성은 낮지만, 플레이어는 블래스터 버튼 중 하나를 선택하여 어떤 블래스터를 사용하고 싶은지 전달할 수 있다는 것을 모를 수 있습니다. 이러한 상황을 돕기 위해, 플레이어가 선택할 수 있는 두 개의 화살표 3차 버튼이 있습니다. 이 버튼은 미세하고 주요 및 보조 상호작용 요소보다 훨씬 작지만, 어떤 행동을 수행할 수 있는지에 대한 방향이 필요한 플레이어에게는 인식 가능합니다.

이러한 주요, 보조 및 3차 상호작용을 다른 상호작용 순서에 배치한다면, 예를 들어 SELECT 버튼과 왼쪽 화살표 버튼을 교환한다면, 플레이어는 선택해야 할 순서에 대한 명확한 방향을 갖지 못할 것입니다. 이러한 이유로, 버튼 순서의 시각적 강조 외에도, 효과적인 워크플로우는 플레이어가 정보를 스캔할 가능성이 있는 방향에 따라 결정의 이상적인 순서를 안내하는 시각적 계층 구조를 따릅니다. 예를 들어, 위에서 아래로, 왼쪽에서 오른쪽으로입니다.

자신의 게임의 워크플로우에 대한 상호작용 순서를 설정할 때 다음 사항을 고려하세요:

• 플레이어는 UI와 상호작용하여 행동을 수행할 수 있는 시점을 명확히 이해해야 합니다. 이러한 이유로, 상호작용 가능한 UI 요소에 대해 최소한 하나의 시각적 피드백 형태를 제공하는 것이 좋습니다. 예를 들어, 포커스가 맞춰졌을 때 윤곽선을 표시하거나 버튼의 크기, 색상 또는 애니메이션을 변경하는 것입니다.
• 상호작용 가능한 UI 요소의 레이블이 모호하거나 동일한 워크플로우 내에서 서로 유사하다면, 플레이어는 행동이나 프로세스를 완료하는 방법을 오해할 수 있습니다. 부정적인 플레이어 경험을 피하기 위해, 명확하고 간결하며 서로 구별되는 레이블을 만드세요.
• 상호작용 가능한 UI 요소가 너무 크면 화면의 다른 중요한 정보를 방해할 수 있습니다. 반대로, 너무 작으면 읽기 어렵거나 선택하기 어려울 수 있습니다. 특히 모바일 장치에서 가까이 있을 경우 더욱 그렇습니다. 이러한 이유로, 다양한 화면 크기에서 상호작용 가능한 UI 요소의 크기를 검토하는 것이 필수적입니다.

스튜디오에서 구현하기에서는 UIAspectRatioConstraint 객체를 사용하여 UI 요소가 플레이어가 게임에 접근하는 장치에 관계없이 특정 종횡비를 유지하도록 하는 방법을 배우게 됩니다. 이 기술은 디자인 프로세스를 더 쉽게 만들 뿐만 아니라, 웹 콘텐츠 접근성 지침의 터치 대상 크기 및 간격 권장 사항을 충족하는 데도 도움이 됩니다. 이는 모바일 장치에서 상호작용 가능한 UI 요소에 대해 최소 9x9mm의 터치 영역을 생성하는 것입니다.

텍스트 시스템 결정하기

텍스트 시스템은 UI의 모든 단어에 대한 글꼴 및 스타일에 대한 규칙 집합입니다. 예를 들어, "항상 제목을 굵게" 또는 "건강 통계를 참조할 때 녹색 글꼴 사용"과 같은 것입니다. 디자인 프로세스 초기에 텍스트 시스템을 결정하면 게임 전반에 걸쳐 일관되게 적용할 수 있는 구조를 가질 수 있어 플레이어가 필요한 정보를 검색할 때 무엇을 기대할 수 있는지 알 수 있습니다.

텍스트 시스템은 게임의 장르나 3D 세계 요구 사항에 따라 다를 수 있지만, 모든 텍스트 시스템이 따라야 할 가장 중요한 규칙은 모든 UI 텍스트가 명확하고 읽기 쉬워야 한다는 것입니다. 이 규칙을 텍스트 시스템과 관련된 모든 결정의 기준으로 사용함으로써, 플레이어가 UI를 읽을 때 접근성과 사용자 경험을 개선할 수 있습니다. 플레이어가 텍스트와 상호작용하는 다양한 방법을 고려해야 합니다. 예를 들어:

• 플레이어가 게임에 접근하는 데 사용할 수 있는 장치.
• 플레이어가 읽을 수 있는 현지화된 텍스트의 언어.
• 화면 텍스트 뒤에 있는 가능한 배경.

예를 들어, 플레이어가 태그 아웃될 때의 화면 응답 디자인은 플레이어의 장치에 따라 더 작거나 큰 글꼴 크기로 조정되며, 영어 텍스트의 양쪽에 충분한 공간을 포함하여 긴 번역을 포함하는 언어를 수용하고, 배경 색상과 대조되는 배경을 포함하여 플레이어가 배경 색상에 관계없이 텍스트를 읽을 수 있도록 합니다.

자신의 게임에 대한 텍스트 시스템을 결정할 때 다음 사항을 고려하세요:

• 텍스트가 배경의 소음과 섞일 때 읽기 어렵습니다. UI의 가독성을 개선하기 위해, 대조되는 색상 위에 텍스트를 표시하거나 윤곽선을 추가하세요.
• 다양한 장치에 맞게 텍스트를 조정하지 않으면, 텍스트가 너무 많은 공간을 차지하거나 플레이어의 화면에서 작고 알아볼 수 없게 됩니다. 텍스트의 불일치를 포착하기 위해, 디자인 프로세스 전반에 걸쳐 여러 장치에서 디자인을 테스트하세요.
• 단어는 다른 언어로 현지화할 때 원래 디자인을 넘어 확장될 수 있습니다. 디자인의 구성을 개선하기 위해, 텍스트가 화면에서 차지할 수 있는 최대 공간을 참조하세요.
• 일부 글꼴은 게임의 미학에 맞을 수 있지만, 대량으로 읽기 어려울 수 있습니다. 이러한 이유로, 스타일화된 텍스트는 제목이나 알림 텍스트와 같은 경우에만 드물게 사용하세요.

UI의 아트 스타일에 대한 계획이 수립되면, 다음 섹션으로 넘어가 각 요소의 레이아웃을 다양한 플레이어 워크플로우에서 와이어프레임하는 방법을 배울 수 있습니다.