brunch

매거진 플엑 익힘책

라이킷 178 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 플러스엑스 Jul 10. 2020

플엑익힘책_UI Team편

안녕하세요. Plus X UI팀입니다.

이번 브런치는 UI팀에 대해 소개합니다.

#. UI 팀이 하는 일

앞서 플엑 익힘책 UX편에서 언급했듯이 대부분의 프로젝트는 UX팀과 함께 진행합니다. 프로젝트는 일반적으로 크게 제안과 구축으로 구분됩니다. 먼저 제안 프로젝트를 기준으로 설명하자면 UX팀과 함께 사업 분석, 시장 조사, 인터뷰 등을 통하여 방향을 설정하고 구조 설계, 기능 정의, 아이데이션을 진행합니다. 이후 와이어프레임이 나왔다면, 와이어프레임을 기준으로 UX팀은 전략 구체화, UI팀은 디자인 구체화를 진행합니다. 디자인 구체화는 와이어프레임에서는 표현하기 어려운 감성적 시각 요소로 표현하는 과정인데요. 예를 들어 그래픽 모티브, 조형적 레이아웃, 서체, 아이콘, 컬러, 이미지, 인터랙션 등 프로젝트 전반의 톤앤매너에서 작은 요소들까지 고민하며 화면을 구성합니다. 완료된 디자인 시안은 전략의 쉬운 이해를 위해 영상 시뮬레이션 또는 프로토타입으로 제작됩니다. 제안 이후 구축 범위에서 UX팀은 UX설계로 이어지고 UI팀은 전체 화면 디자인, 제플린 개발 가이드, 인터랙션 가이드, 디자인 스타일 가이드, 운영 가이드 및 템플릿을 제작합니다. 그리고 마지막으로 다시 UX팀과 함께 QA까지 진행하면 제안부터 구축까지의 프로젝트가 마무리됩니다. 현재 UX팀과 UI팀의 역할은 구분되어 있지만, 최근 UI팀은 다양한 경험을 위해 프로젝트 성격에 따라 영역 구분 없이 역할을 맡아 역량을 확장해가고 있으며 이를 통해 UI관점에서 재해석되는 UX 및 브랜드 경험을 만들어 가고 있습니다. 최근 진행되었던 프로젝트 중 ‘아파트멘터리’와 ‘에어프레미아’를 통해서 UI팀의 업무 사례를 간략하게 소개하겠습니다.

# 아파트멘터리

아파트멘터리는 아파트 인테리어를 FIVE(도배, 조명, 바닥, 커튼, 필름), KITCHEN, BATH로 구분하여 합리적인 스마트 솔루션을 제공하는 인테리어 서비스입니다. 이번 프로젝트는 아파트멘터리에 특화된 UX/UI 개선으로 고객의 니즈에 맞는 소비 경험과 가치를 제공하고 리뉴얼된 브랜드 아이덴티티를 담아내는 것을 목표로 하였습니다.

저희는 아파트멘터리를 브랜드 생애주기(BLC : Brand Life Cycle)에 대입해 보았습니다. 현재 아파트멘터리는 서비스 운영적인 측면에서는 성장기에 해당하지만, 브랜드 인지도 관점에서 바라본다면 도입기에 해당합니다. 도입기의 아파트멘터리는 브랜드 이미지, 서비스 개념, 포트폴리오의 효과적 표현, 어느 것 하나 중요하지 않은 것이 없습니다.

따라서 공급자는 이 모든 것을 빠짐없이 설명하고 표현하려 합니다. 하지만 고객은 공급자의 의지대로 모든 것에 궁금해하지 않습니다. 아파트멘터리는 고객의 니즈에 맞는 단계적 접근이 필요합니다. 브랜드와 고객 접점의 단계적 흐름을 생각해 보면 생각보다 단순합니다.

01. 어떤 브랜드지?

02. 자세히 알아볼까?

03. 좋은데! 서비스 신청!

고객이 아파트멘터리를 처음 만나는 곳은 대부분 SNS입니다. SNS의 잘 만들어진 비주얼 컷, 짧은 에피소드, 광고 등으로 “어떤 브랜드지”라는 첫 번째 단계는 충족됩니다.

그리고 두 번째 단계에 해당하는 “자세히 알아볼까”를 위해 브랜드 마케팅 사이트에 진입하게 되고 저희의 과제는 여기서부터 시작됩니다.

고객의 근본적 니즈는 “신뢰할 수 있는 포트폴리오를 가지고 있는가?”입니다.

기존 마케팅 사이트는 매우 설명적이었습니다. 브랜드 이미지를 멋진 영상으로 강조하고 서비스를 하나하나 설명하는 것에 집중했죠. 리뉴얼 버전에서는 고객의 근본적 니즈에 집중했습니다. 포트폴리오를 강조하고 탐색하는 과정에서 자연스럽게 브랜드 이미지와 서비스 개념을 이해할 수 있도록 하는 것이죠. 근본적 니즈를 충족하는 것이 이성적 목적이라면, 탐색하는 과정은 감성적 경험입니다. 여기서 만족감을 느꼈다면 마지막 결과에 해당하는 “서비스 신청”이라는 아파트멘터리 마케팅 사이트의 비지니스적 목적을 달성하는 것이죠.

아파트멘터리 서비스는 스튜디오 인테리어와 동네 인테리어의 중간 개념이라고 할 수 있습니다. 스튜디오 인테리어의 감성적 퀄리티는 유지하고 동네 인테리어처럼 쉽고 간편한 소비 경험이 되어야 합니다. 그래서 아파트멘터리 웹사이트의 디자인 톤앤매너는 프리미엄 스튜디오 같은 인상을 주고자 했고 사용 경험은 커머스 플랫폼과 유사한 형태가 되도록 했습니다. 따라서 서비스 전략은 “가치 있는 경험을 가볍게 소비하자”라는 의미의, 가치 커머스(Value + Commerce)라는 컨셉을 제안하였습니다.

저희가 구현한 가치 커머스(Value + Commerce)의 기능, 콘텐츠, 디자인 세 가지 측면을 살펴보겠습니다.

1.기능

포트폴리오

AS IS - 기존의 포트폴리오에서 얻을 수 있는 정보는 한정적이고, 이미지 나열 중심이기 때문에 수직적으로 긴 구조여서 스크롤 피로도가 높았습니다.

TO BE - 포트폴리오 화면을 크게 이미지와 정보로 2 분할하였고 스크롤 방향도 달리하여 사용자 원하는 정보의 흐름을 명확하게 구분하여 인지하도록 설계했습니다.

검색

AS IS - 단순 통합 검색

TO BE - 위치, 공간별 검색 (인테리어 서비스의 특징상 사용자마다 가지고 있는 주거 공간의 컨디션이 제각각이므로, 좀 더 최적화된 검색 결과를 확인할 수 있도록 하였습니다.)

2. 콘텐츠

상담 건수나 진행 과정을 시각적 그래프를 활용하여 이성적으로 설명하고, 매니저의 인테리어 과정 스토리, 고객 리뷰인 감성적 콘텐츠로 타 업체들과 차별성을 가지도록 하였습니다. 또한, 커머스 방향으로 나아가기 위해 인테리어와 서비스 가격 정보를 제공하였고, 이를 통해 아파트멘터리의 합리성, 신뢰성의 가치를 향상하도록 하였습니다.

3. 디자인

리뉴얼된 브랜드 아이덴티티를 디지털 환경에서도 적용하여 모든 접점에서 고객이 일관된 경험을 할 수 있게 디자인하였습니다.

아파트멘터리 프로젝트는 UI팀에서 리서치와 기획, 전략 수립부터 디자인까지 진행된 프로젝트였기에, 더 넓은 시각으로 프로젝트를 이해하고 진행할 수 있었습니다. 포트폴리오 등록, 스토리 컨텐츠 작성, 위치/공간 기반 검색 시스템 등 프론트엔드, 백엔드 전반적인 개발 영역에서 애써주신 DX팀께 감사드립니다. 더 많은 디자인은 아래 아파트멘터리 사이트를 통해 보실 수 있습니다.

https://apartmentary.com/

#에어프레미아

항공업의 비즈니스 모델은 FSC(Full Service Carrier)와 LCC(Low Cost Carrier)로 분류됩니다. 에어프레미아는 FSC의 단점인 비싼 가격을 보완하고, LCC의 단점인 낮은 서비스를 보완한HSC(Hybrid Service Carrier)사업 모델을 가진 국내 유일의 중장거리 전문 항공 스타트업입니다. 저희는 브랜드 페르소나 정의, 항공권 예매 온라인 서비스 UX/UI, IFEC (기내 태블릿) GUI를 담당하였습니다. 신생 항공사이기에 우리는 임직원들이 생각하는 에어프레미아의 모습이 중요하다고 생각하였고, 에어프레미아의 브랜드 철학인 ‘Balanced Premium(합리적인 프리미엄)’을 서비스에서 녹이는 방법을 고민하였습니다.

저희는 임직원 인터뷰를 통해 에어프레미아가 편안함(Comfort)이 기억에 남는 서비스가 되길 원한다는 지향점을 파악할 수 있었습니다. 이에 저희는 항공 서비스가 단순한 이동을 위한 비행이 아닌 즐거운 여행의 관점으로, 고객 여정의 시작에서부터 끝까지 기획하는 에어플래너(Air Planner)가 되어야 한다고 생각했습니다. 그렇기에 UI 디자인은 여정의 시작에서부터 끝까지 사용자가 갖는 편안함(Comfort)에 집중했습니다.

저희는 편안함을 크게 시각적 편안함과 심리적 편안함, 두 가지로 나누어 이를 기반으로 UI 디자인을 진행했습니다

그렇다면 시각적 편안함은 무엇일까요?

사용자가 플랫폼을 소비할 때 보다 더 집중시키고 피로감을 주지 않는 것을 말합니다. 저희는 한 화면에서 보이는 정보의 양을 최소화하여 서비스의 본질에 집중할 수 있도록 하였습니다. 디자인 엘리먼트들은 복잡도를 줄이고 이미지는 충분한 여백과 수평, 수직의 일관된 각도를 사용하여 시각적 편안함을 느끼게 하였습니다.

이에 더해 에어프레미아 아이덴티티가 느껴지도록 아이콘과 폰트는 로고에서 느껴지는 형태감과 규칙감을 바탕으로 디자인했습니다.

심리적 편안함이란 고객보다 먼저 행동하여 필요로 하는 것들 적시에 제시하여 고객이 쉽고 부담 없이 사용할 수 있도록 하는 것입니다. 여행의 시작과 끝을 고객과 함께하며 순간순간마다 필요한 정보나 알림을 제공함으로써 편안함 경험을 만들도록 하였습니다. 또한, 에어프레미아만의 감성을 고객 눈높이에 맞춘 쉬운 언어로 커뮤니케이션하여 편안한 인상을 남기도록 하였습니다.