UX 및 UI 가이드
플레이어가 머물고 다시 방문하고 싶어지는 씬을 만드는 팁과 실천 방법!
Decentraland 콘텐츠 제작자들이 자신의 창의성을 마음껏 활용할 수 있는 것은 우리에게 매우 중요합니다. 이는 Decentraland가 탐험할 가치가 있는 보람 있는 장소가 되기 위해 필수적입니다. 하지만 Decentraland의 씬은 다양한 사용자들이 방문하게 되므로, 모든 사람이 접근할 수 있도록 하는 것도 중요합니다. 그렇기 때문에 우리는 통일된 디자인 기준을 마련해야 할 필요성을 무시할 수 없습니다. 이 가이드는 플레이어가 어떤 씬에 있든 일관되게 직관적이고 즐거운 경험을 하도록 보장할 수 있어야 합니다.
이 문서에서는 인터페이스와 플레이어 경험을 설계할 때 우리가 최고의 실천 방식이라고 생각하는 것을 장려하기 위해 Decentraland의 디자인 원칙을 공유합니다. 이 기준들이 메타버스를 구성하는 씬을 구축 및/또는 개선하는 출발점이 되기를 바랍니다.
디자인 원칙
Decentraland의 모든 씬은 다음 원칙을 염두에 두고 설계되어야 합니다:
환영하는: 플레이어가 따뜻하게 환영받는다고 느낍니다.
사용자 친화적: UI는 쉽고 재미있게 사용할 수 있어야 합니다. 바퀴를 다시 발명하려 하지 마세요.
배우기 쉬운: 플레이어가 UI를 익숙하고 직관적으로 느낍니다. 패턴은 씬 전반에 걸쳐 일관되게 사용되어야 합니다.
안내 제공: 씬이 도움의 손길을 제공합니다. 텍스트, 모션, 사운드, 그래픽이 플레이어를 올바른 방향으로 이끌고 힌트를 줍니다.
반응형: 플레이어의 입력에 대한 명확한 작용-반작용이 있습니다.
미니멀한: 적을수록 좋습니다. 플레이어는 중요한 것에 집중할 수 있습니다.
흥미로운: 씬은 Decentraland를 독특하고 방문할 가치가 있게 만드는 요소들을 활용합니다.
목적이 분명한: 플레이어가 다시 돌아올 강한 이유가 있습니다.
즐거운: 플레이어는 보이는 모습, 들리는 소리, 느껴지는 방식을 즐깁니다.
사용자 경험
어디서부터 시작해야 할까요?
씬의 목적은 무엇인가요? 감상하고 탐험할 아름다운 풍경을 제공하는 것인가요? 박물관인가요? 싱글 플레이 게임인가요? 경쟁 게임인가요? 아니면 선형적인 스토리텔링 흐름을 따르나요?
디자인 과정의 모든 단계에서 이 목적을 명확히 인식하는 것이 중요합니다. 그것이 여러분의 모든 결정을 이끌어야 하며, 그 결정들은 방문자의 경험에 지대한 영향을 미칠 수 있습니다.
각 단계가 이전 단계에 의존하는 선형 흐름을 따르는 씬이라면, 플레이어가 잘못된 순서로 무언가를 접하지 않도록 씬을 벽으로 막고 하나 또는 여러 개의 고정 진입점을 설정하는 것을 권장합니다. 참고로 진입점은 플레이어를 환영하고 씬에서의 목표가 무엇인지 설명하는 메시지를 표시하기에 아주 좋은 위치입니다.
플레이어가 여러분의 씬에서 경험하는 것이 선형적일 필요는 없지만, 그래도 온전히 즐길 수 있도록 몇 가지 기본 지침을 제공해야 한다면 팝업으로 지침을 보여줄 수 있습니다. 플레이어가 어느 방향에서 들어오든 씬에 들어오자마자 플레이어 화면에 팝업을 표시할 수 있으며, 그렇게 하면 플레이어가 핵심 사항을 항상 알 수 있도록 할 수 있습니다.
환영 메시지는 플레이어에게 다음 내용을 전달해야 합니다:
씬 제목
플레이어를 환영하기
플레이어의 최종 목표 및 동기
지침/다음 단계
(선택 사항) 컨트롤. 주로 씬이 전역 버튼 이벤트를 사용하는 경우에 유용합니다. 그렇지 않다면 항목 자체가 마우스를 올렸을 때 어떻게 사용하는지 알려줍니다.
동기 부여
방문자들이 여러분의 씬에 계속 돌아오게 하고 싶을 가능성이 높습니다. 그렇게 하도록 동기를 부여할 수 있는 방법을 생각해 보세요! 스스로에게 이렇게 물어보세요. “무엇이 플레이어로 하여금 내 씬으로 다시 돌아오고 싶게 하거나, 친구에게 추천하고 싶게 만들까?”
예를 들어, 도전 과제를 제시해 몇 번의 시도가 필요할 만큼 충분히 어려운 달성 목표를 줄 수 있습니다. 경쟁적인 멀티플레이 이벤트를 조직할 수도 있는데, 이는 소셜 활동을 할 수 있는 흥미로운 기회이기도 합니다. 플레이어가 그곳에서 시간을 보내는 것을 즐긴다고 느끼는 역동적인 장소로 씬을 만드세요!
피드백과 사운드
사운드는 두 가지 핵심 역할을 합니다. 꼭 활용하세요! 한편으로는 몰입감을 만들어 내는 데 필수적입니다. 소리가 함께하지 않으면 현실감이 떨어지는 많은 것들이 있기 때문입니다. 사운드의 또 다른 중요한 역할은 플레이어의 행동에 대한 피드백을 제공하는 것입니다. 시각적 단서만 사용하면 플레이어가 자신의 행동 효과를 볼 수 있는 올바른 방향을 바라보고 있는지 확신할 수 없습니다. 사운드를 사용하면 무언가가 일어났다는 것을 플레이어가 인지하도록 만들 수 있습니다. 시각적 단서와 사운드 단서를 함께 사용하면, 소리를 들은 플레이어가 혹시 보지 못했을 경우 시각적 단서를 찾기 위해 주위를 둘러보게 됩니다.
일부 플레이어는 사운드를 끈 상태로 플레이할 수 있다는 점을 기억하세요. 사운드를 씬 지침을 제공하거나 게임 메커니즘의 핵심 요소로 사용한다면, 같은 방향을 암시하는 시각적 요소도 함께 제공해 보세요. 예를 들어 영화의 자막처럼, 이러한 사운드에 맞춰 UI 하단에 텍스트를 표시할 수 있습니다.
사용자 인터페이스
이 섹션은 씬 디자인을 통해 내러티브를 구성하여 플레이어의 시선을 가장 중요한 요소로 이끌도록 돕기 위한 것입니다. 여기서 설명하는 도구를 잘 활용하면 경험이 훨씬 더 몰입감 있고 성공적으로 느껴질 수 있습니다.
색상, 아이콘, 모션, 스케일이 올바른 메시지를 전달하는 데 얼마나 중요한지는 아무리 강조해도 지나치지 않습니다. 씬의 모든 것은 의미를 전달한다는 점을 기억하세요.
레이아웃
기본 Decentraland UI 요소와 겹치는 화면 영역에 UI를 배치할 때는 주의하세요. 데스크톱 클라이언트에서 기본 Decentraland UI(사이드바, 미니맵, 채팅 등)는 화면의 왼쪽 25%만 차지하도록 설계되어 있습니다(이미지에서 빨간색으로 강조된 부분). 나머지 화면 공간은 콘텐츠 제작자가 자유롭게 사용할 수 있는 안전 영역입니다.
화면의 왼쪽 25%에 UI 요소를 배치하는 데에는 제한이 없지만, 익스플로러가 계속해서 디자인을 변경하고 개선하고 있다는 점을 염두에 두세요. 오늘은 그 영역에서 가려지지 않는 공간도 향후 버전에서는 가려질 수 있습니다.
UI를 절대 좌측 상단에 고정하지 마세요
가장 흔한 레이아웃 실수는 패널을 왼쪽 상단 모서리에 고정하거나, 화면을 덮는 루트의 원점에 그대로 두는 것입니다. 그 모서리와 왼쪽 가장자리 전체는 익스플로러가 자체 미니맵과 채팅을 그리고, 모바일에서는 가상 조이스틱을 배치하는 위치입니다. 그곳에 배치된 씬 UI도 계속 렌더링되지만, 클라이언트의 UI가 그 위에 그려지므로 결국 가려지고 버튼을 클릭할 수 없는 경우가 많습니다. 레이아웃 엔진에는 이 문제를 경고해 주는 기능이 없습니다.
대신 다음 중 하나를 사용하세요:
오른쪽에 고정하거나, 요소를 가운데 정렬하세요. 점수, 타이머 또는 작은 패널의 경우 다음을 설정하세요.
positionType: 'absolute'과position: { top: 40, right: 40 }, 또는 다음을 사용해 가운데에 배치하세요.justifyContent: 'center'를 루트에 적용합니다.익스플로러가 안전한 위치를 알려 주도록 하세요. 다음을 설정하세요
screenInset: 'interactable'렌더러에 적용하세요. 그러면 UI는 익스플로러가 씬 UI를 위해 확보한 사각형 안에 배치되며, 그 영역에는 이미 미니맵, 채팅, 왼쪽 컨트롤이 제외되어 있습니다.
모바일에서는 오른쪽 아래 모서리의 액션 버튼이 의도적으로 그 영역 위에 그려지며, 그곳을 탭하면 여러분의 씬이 아니라 클라이언트의 버튼으로 입력이 전달됩니다. 하단 오른쪽 모서리에는 상호작용 요소를 두지 마세요. 또는 화면을 덮는 UI라면, 열려 있는 동안 터치 컨트롤을 숨기세요:
이 헬퍼는 데스크톱에서는 아무 작업도 하지 않으므로 조건 없이 호출할 수 있습니다. 참조: 화면 컨트롤.
UI를 공간적으로 정리할 때는 항상 그리드를 염두에 두고 주요 기준으로 사용하세요. HUD가 필요한 씬이라면 먼저 소모성 요소(예: 화폐, 음식, 생명)를 한쪽에 모으고, 반대쪽에는 도구나 무기 같은 비소모성 요소를 배치할 수 있습니다. 그리드 크기와 패딩은 일관되게 유지하세요. 모든 플레이어 행동에 대한 피드백을 명확하게 만드세요.
색상
색상 팔레트를 선택하는 것은 중요합니다. 이는 씬에 정체성을 부여하고 요소 간의 관계와 위계를 나타내기도 하기 때문입니다.
색상 팔레트를 구성할 때는 먼저 메인 색상을 선택하고, 필요하다면 보조 색상도 선택하세요. 그런 다음 그 메인 색상과의 관계에서 팔레트를 유사색 조합으로 할지, 보색 조합으로 할지, 삼색 조합으로 할지 등을 결정하면 됩니다.
메인 색상은 UI 구성 요소 전반에서 가장 자주 사용되어야 합니다. 팔레트에 보조 색상이 없다면 메인 색상과 검정 또는 흰색을 조합하여 요소에 강조를 줄 수 있습니다. 보조 색상은 필수는 아니지만, 씬의 UI 요소를 강조하고 구분하는 데 도움이 됩니다. 보조 색상은 하이라이트, 선택 컨트롤(슬라이더와 스위치), 링크, 헤드라인에 가장 잘 어울립니다.
각 색상은 저마다 고유한 표현적 특성을 가지고 있다는 점을 기억하고, 이를 활용해 메시지를 전달하세요. 예를 들어 빨간색은 흔히 부정적인 의미와 연관되는 반면 초록색은 긍정적인 의미와 연관됩니다.
색상을 전략적으로 사용해 상태 변화를 나타낼 수도 있습니다. 예를 들어 요소가 활성 상태인지 비활성 상태인지 보여 주기 위해 색을 바꿀 수 있습니다.
경고! 겹쳐서 표시될 색상을 선택할 때는 함께 사용할 경우에도 읽기 쉬운지 특히 주의하세요. 기본 규칙은 함께 표시되는 요소들의 색상이 서로 충분한 대비를 가져야 한다는 것입니다. 일부 플레이어는 최적이 아닌 조명 환경에서 화면을 보고 있을 수 있으므로 읽기가 더 어려워질 수 있다는 점도 유념하세요.
타이포그래피 위계
제목, 부제목, 본문에 대해 최소 3단계의 크기 체계를 정의해 보세요. 색상과 글꼴 크기 사용에 주의하세요. 모든 글꼴 크기는 12px 이상이어야 합니다.
이미지 위에(또는 월드 위에) 표시되는 텍스트를 배치하려면, 반드시 가독성을 실험해 보아야 합니다. 그런 경우에는 텍스트와 이미지 사이 레이어에 색이 있는 단색 영역을 추가하여 텍스트가 읽기 쉽도록 하는 것을 권장합니다.
아이콘
아이콘은 정보를 압축하여 이미지로 행동을 식별하는 데 도움을 줍니다. 텍스트로 항목에 라벨을 붙이는 것보다 훨씬 빠르게 해석할 수 있는 입력을 제공하는 매우 강력한 도구입니다. 텍스트와 함께 아이콘을 보여 주는 것도 유용한데, 의미를 더 명확하게 구분하는 데 도움이 되기 때문입니다.
모션
모션은 필요한 경우 피드백을 제공하고 길을 안내하는 데 사용하세요. 모션은 플레이어가 주의를 집중하도록 돕고, UI가 변경될 때 연속성을 유지하는 데 도움이 됩니다.
문구와 콘텐츠 구조
UI 텍스트는 인터페이스의 사용성을 높이고 플레이어가 자신의 행동에 더 자신감을 갖게 해 줍니다. UI 텍스트는 항상 가능한 한 간결하게 만드세요. 플레이어는 읽기 위해 있는 것이 아니라 플레이하기 위해 있습니다. 너무 길어 보이는 텍스트는 대부분의 플레이어가 읽지 않습니다.
환영 메시지로 플레이어를 맞이하고 씬의 목표를 알려 주세요. 먼저 씬에서의 목표를 분명히 한 다음, 이를 달성하는 데 필요한 행동을 설명하세요. 그런 다음 필요할 때마다 정보를 점진적으로 공개할 수 있습니다. 이렇게 하면 플레이어가 경험 초반에 압도당하지 않습니다. 그래픽 리소스와 마찬가지로, UI 기능과 스토리텔링 전반에서 일관된 단어를 사용하도록 노력하세요.
보여 주고, 설명하지 마세요
두 가지 패턴은 플레이어가 첫 상호작용 전에 이탈하게 만듭니다:
규칙 팝업: 모든 메커니즘, 점수 규칙, 조작 방법을 담은 여러 개의 빽빽한 문단이 있는 소개 패널입니다. 플레이어는 읽지 않고 닫아 버립니다.
월드 내 규칙서: 씬의 표지판이나 보드에 같은 문단이 적혀 있습니다. 디자인처럼 보일 수는 있지만, 월드 내 텍스트는 너무 작고 너무 길어서 읽기 어렵고, 플레이어는 그걸 읽으려고 가만히 서 있지 않을 것입니다.
소개 패널은 스크롤 없이 한 화면 분량으로 유지하세요: 3~5개의 짧은 줄, 이상적으로는 목표에 대한 한 줄, 조작법에 대한 한 줄, 그리고 한 장의 그림이면 충분합니다. 표지판은 하나의 내용만 담고, 10단어 이내로, 큰 글씨로, 한 표지판에 하나의 아이디어만 넣어야 합니다.
그 대신 나머지는 이렇게 보여 주세요:
첫 번째 목표는 명확하게 보여 주세요. 플레이어가 처음 시야를 잡는 선 안에 빛나거나, 움직이거나, 크게 보이는 오브젝트를 배치하세요. 맥박치듯 강조되는 외곽선은 문장보다 “나를 클릭하세요”를 더 잘 가르쳐 줍니다.
실제 게임이 시작되기 전에 연습 구역에서 플레이어가 한 번 안전하게 메커니즘을 수행하게 하세요.
다음을 사용하세요
hoverText상호작용 가능한 엔터티에 대한 즉시 제공 지침으로. 정확히 관련될 때 나타나며, 미리 읽을 필요가 없습니다. 참조: 호버 피드백.공간 또는 순서 규칙에는 다이어그램을 사용하세요. “빨간 보석 = 1, 파란 보석 = 5”와 같은 그림은 한 단락을 대체할 수 있습니다.
더 긴 내용은 NPC나 플레이어가 건너뛸 수 있는 대화를 통해 한 번에 한 메시지씩 전달하세요.
규칙에 그보다 더 많은 텍스트가 필요하다면, 메커니즘을 다시 설계하거나 시각적으로 보여 주세요.
오브젝트 상호작용
플레이어가 어떤 오브젝트가 상호작용 가능하고 어떤 것이 아닌지 구분할 수 있도록 하세요. 엔터티에 버튼 이벤트를 등록하면 SDK는 기본적으로 호버 피드백을 표시합니다. 즉, 엔터티에 가장자리 하이라이트가 나타나고 커서 옆에 사용할 입력을 알려 주는 힌트가 표시되며, 상호작용의 효과를 설명하는 사용자 정의 텍스트도 함께 제공됩니다. 이를 적극 권장합니다. 여러분의 씬이 훨씬 더 자연스럽고 사용하기 쉬워질 것입니다. 참조: 호버 피드백.
3인칭 카메라
플레이어는 ‘V’ 키를 눌러 언제든지 1인칭과 3인칭 카메라를 전환할 수 있습니다. 상호작용이 두 모드 모두에서 편안하게 작동하도록 씬을 설계하세요. 예를 들어 작은 클릭 대상은 3인칭에서 맞히기 더 어렵습니다. 여러분의 씬은 플레이어의 현재 카메라 모드를 읽을 수 있으며, 특정 영역에서 강제로 지정할 수도 있습니다. 참조: 카메라.
마지막 업데이트