글

라벨이 UX 설계인 게시물 표시

[UX] 게임 UX 설계 (Game UX design)

이미지
브롤스타즈(Brawl stars)는 Supercell이 만든 슈팅게임입니다. 우리는 UX를 이야기할 때, 그래픽 디자인과 관련된 요소에 대해 흔히 이야기합니다. 그래픽 디자인은 대부분의 UX 디자이너의 결과물을 차지하기 때문에 그래픽 디자인이 UX의 전부라고 오해하는 경우도 많습니다. 1. 그래픽 디자인(Graphic design) 오늘 이야기할 주제는 아니지만 간단히 브롤스타즈(Brawl stars)의 그래픽 디자인적인 요소를 살펴보면 Supercell은 클래시 로얄(Clash Royale), 붐비치(Boom Beach)의 전작들의 앙증맞은 캐릭터 디자인을 브롤스타즈에서도 잘 살려냈습니다. 이 캐릭터들의 디자인은 누가봐도 이 게임이 Supercell이 만들었구나라는 것을 알 수 있고, 디자인 일관성이 단순히 앙증맞은 캐릭터가 주는 친숙한 정서라는 측면의 UX를 넘어서 제품의 브랜드 인지도에도 큰 영향을 미치고 있다는 것도 알 수 있습니다. 다시 말하지만 그래픽 디자인은 UX 디자인에 여전히 많은 부분을 차지하고 있습니다. 2. 게임모드 종류 (Game modes) 브롤스타즈(Brawl stars)는 크게 단체전과 개인전으로 구분됩니다. 단체전은 3명이 한 팀을 이루어 상대팀과 겨루는 모드이며, 잼그랩(Gem grab) 외에도 다양한 단체전 모드가 있습니다. Team play mode in the game 개인전은 10명의 플레이어가 서바이벌 형태(Free-for-all) 방식으로 싸우는 방식이며, 생존 순위에 따른 보상이 주어집니다. 개인전은 몇 명을 처치한 것과 상관없이 마지막까지 살아남는게 목적입니다. Single play mode in the game 3. 단체전 모드와 UX (Team play mode and UX) Supercell은 다양한 단체전 모드를 제공하여 게임 내에서 플레이어가 혼자 고립된 플레이를 하다가 이탈하지 않고, 다른 플레이어들과 함께 게임을 즐기며 오래 동안 게임을 즐기는 것을 바랬을 것입니다. 이것은 게임을 디자인하는 모든 회...

[UX] 구글 머티리얼 디자인 – 3.3.머티리얼 기초(Material foundation) – 레이아웃(Layout): 간격 설정 방법 (Spacing methods)

이미지
머티리얼 디자인에서 간격 설정 방법(Spacing methods)은 기준 격자(Baseline grids), 중심선(Keylines), 패딩(Padding), 비율, 컨테이너, 터치 영역을 적용하기 위해 8의 배수에 해당하는 dp값으로 간격(Incremental spacing)을 설정합니다.

[UX] 구글 머티리얼 디자인 – 3.3.머티리얼 기초(Material foundation) – 레이아웃(Layout): 반응형 레이아웃 격자 (Responsive layout grid)

이미지
머티리얼 디자인 반응형 레이아웃 격자(Responsive layout grid)는 스크린 사이즈와 화면 회전 등의 상황에서 레이아웃 전반에 일관성을 보장합니다. 다시 말해, 반응형 레이아웃 격자 시스템은 구성한 레이아웃을 스크린 상황에따라 가변적으로 변경하는 방식이라 생각하면 되겠습니다.

[UX] 구글 머티리얼 디자인 – 3.3.머티리얼 기초(Material foundation) – 레이아웃(Layout): 화소 밀도 (Pixel density)

이미지
머티리얼 기초 중 레이아웃에서 화면의 화소 밀도(Screen pixel density)와 해상도(Resolution)는 플랫폼에 따라 다양할 수 있습니다. 화소 밀도는 픽셀 밀도나 픽셀 퍼 인치(Pixels per inch, PPI) 등의 용어로도 사용됩니다. 이 단위는 장치의 스크린 해상도를 측정하는데 사용됩니다.

[UX] 구글 머티리얼 디자인 – 3.3.머티리얼 기초(Material foundation) – 레이아웃(Layout): 레이아웃 이해하기(Understanding layout)

이미지
머티리얼 기초(Material foundation)에서 레이아웃(Layout)은 플랫폼, 환경, 동일하고 균일한 요소와 간격을 이용하여 스크린 사이즈 전반에 걸쳐 일관성 있는 디자인을 유지시켜주는 역할을 합니다.

[UX] 구글 머티리얼 디자인 – 3.2.머티리얼 기초(Material foundation) – 환경(Environment): 빛과 그림자(Light and shadows)

이미지
머티리얼 기초(Material foundation)에서 빛과 그림자(Light and shadows)는 표면(Surface), 높이값(Elevation)과 함께 머티리얼 환경(Environment)을 이루는 핵심 요소입니다.  그림자(Shadows)는 머티리얼 표면(Surface)이 광원(Light source)을 막을 때, 생성됩니다.

[UX] 구글 머티리얼 디자인 – 3.2.머티리얼 기초(Material foundation) – 환경(Environment): 높이값(Elevation)

이미지
머티리얼 기초(Material foundation)에서 높이값(Elevation)은 평평한 2차원 개체인 표면(Surface)와 함께 구글 머티리얼 디자인(Google material design) 을 이루는 핵심 요소입니다. 머티리얼 디자인에서의 3차원 입체 표현은 표면(Surface)에 높이값을 부여함으로써 완성됩니다. 

[UX] 구글 머티리얼 디자인 – 2.3.머티리얼 시스템 – 머티리얼 스터디(Google material studies) 사례: 바질(Basil)

이미지
구글 머티리얼 스터디(Google material studies)는 구글에서 제안하는 머티리얼 디자인(Material design)의 우수사례(Best practice)를 소개하는 콘텐츠로 구성됩니다. 그 중에서도 바질(Basil)이라는 음식 레시피(Recipe) 소개 애플리케이션을 먼저 살펴보겠습니다.

[UX] 사용자들에게 유용한 가치가 될 수 있는 것은 무엇일까?

이미지
필자는 UX 담당자로서 UX를 설계하는데 사용자들에게 제공해야 되는 사용자 가치가 무엇일지에 대해서 늘 고민해왔다. UX 설계 시, 기술이 갖고 있는 기능성 외에 때로는 철학적 가치가 더 중요할 때도 있다. 휴대폰 제조사의 사례를 비교하며, 두 제조사가 사용자에게 전달하고자 했던 가치가 무엇이었는지 비교하여 살펴본다.