이벤트 기반 소개팅 서비스, 나우히어의 디자인은 어떻게 탄생했을까요?

안녕하세요!

이벤트 기반 소개팅 서비스를 개발하고 있는 '나우히어' 팀입니다. 😊

이전 글에서는 서비스와 기획에 대헤 소개했습니다.

이번에는 디자인을 보여드리면서, 고민한 부분들에 대해서 얘기해드리려고 합니다.

💡 로고

로고를 디자인하기에 앞서, 본 서비스의 기획에 대한 분석을 진행했습니다.

이벤트가 있는 특정 위치에서만 QR을 통해 접속할 수 있고, 그곳에서 만난 사람들 간에 인연을

연결시켜준다는 것이 저희 서비스의 가장 큰 매력이자 차별성이라고 결정했습니다!

이러한 특징을 살리기 위해, 사용자가 “위치”라는 특징을 쉽게 이해시키는 것이 로고를 디자인할 때 중점이었습니다.

이에 대한 해결책으로 선택한 것이 “아이콘”이었습니다.

위치 아이콘을 응용하면, 서비스의 특징을 효과적으로 표현하면서,

적절히 응용하는 경우. “하트”의 형태 또한 표현할 수 있는 적절한 소재라고 생각했습니다.

초기 로고의 디자인의 경우, 위치 아이콘을 겹쳐 “하트”의 형태를 구현하였지만, 전후면 간의 대비가 부족하여, 위치와 하트라는 두 가지의 의미를 효과적으로 부각하지 못하였습니다.

전면에 위치한 아이콘에 외곽선을 추가하고, 색의 차이를 두어 부각하는 방식을 택했습니다.

추가로, 하트 형태의 외곽선에 색을 추가하여 명확하게 전달될 수 있도록 했습니다.

💡 웹앱 구성의 UI

전체적인 UI를 구성하는 데 있어서, 유저의 사용 과정이 적절히 반영될 수 있도록 하였습니다.

유저는 다양한 장소의 이벤트에 부착된 QR 코드를 통해 본 서비스에 접속하게 됩니다.

이 때, 다운로드와 같은 번거로움이 없이 편하게 사용할 수 있도록 웹 앱으로 기획되었습니다.

QR 코드를 통해 서비스에 접속하는 점에서, 사용자는 모바일 디바이스를 통해 사용하게 됩니다.

그렇기에, UI의 구성이 모바일에 대응하고, 적절히 사용할 수 있는 방향으로 UI를 구성하였습니다.

터치를 통해 서비스를 사용하기 때문에, 버튼을 비롯해 상호 작용하는 컴포넌트의 크기를

기존의 웹보다 크게 설계하여 사용에 용이하도록 하였습니다.

데스크탑에 비해 작은 화면을 사용하기 때문에, 텍스트의 가독성과 배치가 중요하다고 생각했습니다.

텍스트가 가지고 있는 정보 간의 중요도를 세분화한 뒤, 중요도에 따라 크기와 위치를 배정하여

가독성을 확보하였습니다.

💡 회원가입

유저 피로도와 모바일의 입력 방식을 고려하여, 해당 파트를 디자인하였습니다.

회원가입을 적절히 분배하지 않는다면, 자칫 사용자가 회원가입이 오래 걸린다는 인상을 주어,

이로 인해 가입에 대한 피로도와 거부감을 발생시킬 수 있다고 판단하였습니다.

회원가입의 정보에 따라 과정을 세분화하는 작업을 우선적으로 진행했습니다.

각 단계에 대해 사용자가 명확히 인식할 수 있도록 하고, 완료라는 작은 보상을 제공하여, 피로도를 개선하는 방향으로 진행하였습니다.

물리적 입력을 하는 데스크탑과 달리, 모바일은 가상 키보드를 사용하여 입력을 진행하게 됩니다.

이러한 점에서, 유연한 레이아웃을 구성해야 가상 키보드로 인한 UI 변형을 막을 수 있다고 판단하였습니다.

각 단계를 간소화하여, 하단에 적절한 여백을 두는 방향으로 해결하였습니다.

💡 홈

홈 화면은 서비스의 활성화에 기여하는 중요 컴포넌트를 배치하는 방향으로 진행했습니다.

1. 이벤트 마감 시간 헤더

쇼핑몰의 세일 팝업이 마감 시, 손해를 본다는 심리를 이용해 구매 욕구를 증진시키듯,

사용자로 하여금 이벤트의 마감을 상기시키고, 보다 적극적인 활동을 이끌어낼 수 있다고 판단하여 배치하였습니다.

2. 오늘의 카드

MBTI 점수 등을 통해 사용자에게 타 사용자를 추천하는 배너 역할을 하며, 이를 통해 매칭 서비스로 자연스럽게 유도하는 역할을 합니다.

3. 하트 내역

사용자에게 현재 주고 받은 하트를 상기시켜, 서비스 활동을 촉진시키기 위한 의도로 배치하였습니다.

4. 매칭현황

타 사용자 간의 매칭을 노출시켜, 서비스 활성도를 어필하고 사용자 또한 매칭되도록 자극하여

활성화시키고자 하는 목적으로 배치하였습니다.

5. 의견 남기기

본 서비스의 현재 목적은 서비스를 통해 유저를 받아보고, 피드백을 통해 서비스를 개선시키는

것이기에 사용자가 쉽게 피드백을 남길 수 있도록 메인 화면에 배치하였습니다.

💡 아바타 & 카드

해당 주제에 있어서 "타 사용자를 어떻게 표현하는 것이 효과적인가"에 대해 많은 고민을 하였습니다.

익명을 전제하는 본 서비스의 특성에 따라, 사용자 간 제공되는 정보가

"닉네임 / 나이 / 성별 / MBTI / 자기소개" 로 제한적입니다.

각 사용자에게 주어지는 정보가 제한된 상황에서, 해당 정보를 전달하는 매개체의 중요성이

타 서비스보다 상대적으로 높은 상황이라고 판단하였습니다.

또한, 모바일의 제한된 화면에서 정보를 효과적으로 전달하기 위해서 집약된 표현이 필요하였습니다.

이를 해결하기 위해 각 성별과 MBTI에 대응하는 아바타를 만드는 것으로 진행하였습니다.

각 MBTI의 특징을 효과적으로 보여줄 수 있고, 긍정적인 인상을 만들기에 효과적이라 생각하였습니다.

또한, 아바타를 포함한 사용자의 정보를 카드의 형식으로 표현하였습니다.

작은 공간에 많은 정보를 담는 상황에서 사용자에게 낯선 레이아웃은 정보를 읽을 때 피로도를

유발할 수 있다고 생각합니다.

그렇기에 익숙한 레이아웃을 사용하는 것이 많은 정보를 집약적으로 전달하기에 적절한 방법이 될 수 있다 생각하여 진행하게 되었습니다.

💡 마치며

이러한 고민들을 담아, 본 서비스의 디자인을 진행하게 되었습니다!

곧 출시되는 서비스인 만큼 참여해보신 뒤, 많은 피드백을 주시면 감사할 것 같습니다! 감사합니다!

축제에서 “Now,Here”를 통해 특별한 인연을 만나보세요! 🎉