brunch

매거진 기업의 디자인 분석

라이킷 21 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UXUI디자이너 데이지 Jun 18. 2024

[UXUI] GLN은 왜 메인화면 리뉴얼을 했을까

어떤 이유로 더 좋아졌는가

GLN(Global Life Navigater)은 글로벌 금융 결제 네트워크로, 하나금융그룹의 하나은행에서 출발하여 다양한 금융사와 전자지갑 서비스와 제휴를 통해 제공되는 서비스입니다. GLN은 해외에서 QR 코드를 이용한 간편 결제 서비스를 주요 기능으로 하고 있어 동남아 여행 갈 때 환전을 할 필요 없이 매우 유용하게 사용됩니다. 이런 GLN 서비스가 최근 메인 화면 디자인이 변경되었는데 어떠한 점이 변하고 좋아졌는지 살펴보겠습니다.

(좌) 기존의 홈 화면과 구조 (우) 변경된 홈 화면

기존에는 홈 화면에서 결제를 누른 후 진입할 수 있는 기능의 화면이었는데, 변경된 홈 화면은 기존의 결제 화면이 홈 화면으로 대체된 것과 같은 디자인으로 되어 있습니다.

화면의 시각적 구성

기존 홈 화면은 크게 시각적으로 A, B, C, D 4가지 그룹으로 묶여 구분되어 보입니다.

이 중 A, D 영역은 그대로 놔두고 B, C 영역이 변경되었습니다.

B영역 변경 부분

(좌) 변경 전 디자인 (우) 변경 후 디자인

B영역은 좌측에 텍스트, 우측에 두 가지 내용이 보이는 구조로 변경 전, 후가 유사해 보입니다. 하지만 시각적인 부분보다 구성에 있어 큰 변화가 있습니다.

구조상 사용자의 시선흐름은 d -> e -> f 순으로 이어지게 됩니다. 이때 보이는 3가지 요소는 각자 다른 정보를 나타내고 있습니다. d는 앱 전체 서비스의 슬로건과 같은 역할을, e는 현재 앱 서비스에 충전되어 있는 금액을, f는 앱 내부의 콘텐츠로 여행 시 사용가능한 스톤이라는 포인트를 보여주고 있습니다.

이 3가지 정보는 시각적으로 한 영역으로 묶여서 보이지만, 각자 별개의 정도로 의미하고 있는 정보가 다르고 상호작용이 이뤄지지 않기 때문에 자연스럽게 이어지지 않고 있습니다.

변경된 화면은 시각적으로는 유사한 디자인의 구조이지만, 그 내용에 있어 훨씬 더 자연스러운 구조를 취하고 있습니다. 같은 배치, 같은 시선의 흐름이지만 각 요소의 내용이 서로 상호작용을 이루고 있어서 흐름이 자연스럽게 이어집니다.

띳머니(=tt머니)는 네이버 머니, 카카오 머니와 같이 GLN앱에서 쓸 수 있는 금액의 명칭으로 환전한 금액인 e를 보조하며 사용되고 있고, f는 환전한 금액인 d가 원(₩)으로 얼마인지 보조 정보로써 보여주고 있습니다. 또한 텍스트 크기와 색상의 강약 조절로 f는 e에 종속되어 있는 보조 정보라는 것을 시각적으로 잘 보여주고 있습니다.

C영역 변경 부분

C영역에서는 3가지의 카드 배너 형태가 묶인 형태로 보이고 있습니다. 이 역시 B에서 개선한 것과 같이 중요성이 서로 동일한 것 내용끼리 묶여있지 않습니다.

여러 개의 동일한 레벨의 카드가 쌓여있는 듯한 UI

g(GLN의 다음 여정) - 서비스의 향후 목표
h(미션) - 서비스의 가치관
i(결제) - 서비스의 핵심 기능

g, h는 서비스(공급)가 사용자(수요)에게 보여주고 싶어 하는 보조적인 내용입니다. 반면 i는 서비스의 핵심 기능으로 같이 묶여있을 중요도가 다른 서비스끼리 묶여있었습니다. 사용자 측면에서 i의 기능을 사용하기 위해 들어온 서비스인데 g, h의 내용은 원하지 않는 불필요한 정보가 노출되어 보입니다. 이러한 디자인은 이 서비스의 핵심 기능이 1개인지, 3개인지, 어떤 서비스가 가장 중요한지 직관성을 떨어트리게 됩니다. 또한 사용자에게 무엇이 중요한지 판단하기 어렵게 만들고, 불필요한 정보를 제공받는다는 느낌을 줄 수 있습니다.

반드시 단계를 나눠야 하는가

또한 결제 배너를 누르더라고 바로 기능이 실행되지 않고 한 단계 뎁스를 거쳐야 합니다. 현재 GLN에 충전된 금액이 한화로 얼마인지만 알 수 있을 뿐 현지 통화로 얼마인지 역시 한 단계 뎁스를 거쳐야지만 알 수 있습니다.

리뉴얼된 디자인

변경된 디자인은 여러 묶음의 배너가 삭제되고, 가장 핵심 기능인 결제가 메인 화면으로 나와있는 구조로 불필요한 뎁스가 축소되었습니다. 보다 직관적으로 이 서비스는 결제라는 1가지의 핵심 기능이 있다는 것을 명확하게 보여주고, 이에 대한 보조 정보들이 자연스럽게 상호작용되는 구조로 변경되었습니다. 시선을 사로잡는 배너와 뎁스를 없애고 심미적인 영역보다 기능에 충실한 디자인으로 변경된 것으로 보입니다.

이처럼 디자인 리뉴얼 시에는 명확한 장점이 있어야 합니다. 새로운 디자인은 중요도에 따른 위계질서를 도입하고 상호작용이 가능한 정보들을 같은 시각적 그룹으로 묶어 메인 서비스에 집중할 수 있게 했습니다. 사용자 경험을 향상하고 기능 접근성을 높여, 사용자 만족도를 높일 수 있는 좋은 리뉴얼 디자인 사례라 생각됩니다.

구독과 라이킷은 글 작성에 많은 힘이 됩니다.

keyword