레퍼런스 분석 : Behance 모바일 앱 - [제로베이스 UIUX 디자인 스쿨 R02]

donghyeok·2024년 8월 18일
post-thumbnail

디자인에 관심이 있다면 모두 알법한 Behance는 높은 퀄리티의 방대한 포트폴리오를 가진, 아마도 그래픽 디자인 1황 서비스입니다.

유사한 서비스로 Pinterest, dribbble, Mobbin 등이 있지요. 저는 Pinterest, dribbble를 양으로 머릿속에 때려박는 무차별적인 시각적 영감을 얻기 위해, Mobbin은 실제 출시된 앱을 통한 UI 설계 구조의 영감을 위해, Behance는 완성된 포폴을 통해 시각적 영감을 구현하는 방법의 영감을 얻기위해 씁니다.

Behance 모바일 앱은 데스크탑에 맞춰진 작품을 보기 불편해 잘 안썼는데, 업데이트 이후 모바일 맞춤 컨텐츠가 늘면서 사용 빈도 또한 늘었습니다. 특히 폰트, 그래픽 에셋 같은 상품의 신상 업데이트가 보기 편하게 올라와 좋았습니다.

하지만 요즘 앱을 쓰면서 '아 이건 좀...' 싶은 아쉬움이 많았습니다. 애용하는 서비스였고, 깔끔한 UI와 모바일로 봐도 고퀄리티인 컨텐츠에 가려져 몰랐지만, 속된말로 '짜치는' 부분들이 사용 중에 눈에 들어왔습니다.

이번 분석에서 앱의 UI/UX를 분석, 가상의 사용자군을 만들어 시나리오를 구성, 파악된 기회와 취약점을 근거로 개선 방안을 제안합니다.


목차

  1. 화면 구성 분석 ▶︎
    a. 탐색 영역 ▶︎
    b. 갤러리 보기 영역 ▶︎
    c. 메시징 영역 ▶︎
    d. 구인 영역 ▶︎
    e. 프로필 영역
    ▶︎
  2. 사용자 분석 ▶︎
  3. 개선점 찾기 ▶︎

1. 화면 구성 분석

Behance 모바일 앱의 내비게이션 요소 순서에 따라 영역 내 UI를 살펴보겠습니다.

하단 내비게이션 바는 주요 사용자 패턴에 따라 분류되었습니다. 기존의 사용자 패턴에서 모바일에서 빠른 컨텐츠 탐색을 원하는 사용자와, 네트워킹이 목적인 사용자를 분리해 핵심 기능에 빠르게 접근하도록 설계했습니다.

비주얼 아이덴티티 때문인지, 아이콘 만으로 영역을 구성하면서 접근성이 떨어진건 다소 아쉽습니다. 특히 2. 갤러리 보기 영역 은 기호 만으로는 역할이 명확하게 설명되지 않아 사용자가 기능을 이해하기 어려울 수 있습니다.


a. 탐색 영역

앱을 열면 먼저 보이는 영역입니다. (3) 컨텐츠 필터 의 기본값인 작품 영역을 우선 표시하며, 상단 GNB를 통해 서비스가 추천하는 작품과 팔로우한 사용자의 작품으로 컨텐츠를 구분해 사용자가 탐색하는 경로를 분리했습니다. 작품의 태그 정보를 바탕으로 키워드 검색과 다양한 (4) 검색 필터 를 제공합니다.

컨텐츠 필터를 통해 Behance 내 다른 컨텐츠 유형을 탐색할 수 있습니다. 작품 내 이미지만 표시하는 이미지, 사용자, 여러 작품을 모은 무드보드, Behance에서 선정한 작품, 라이브 영상으로 영역을 나눴습니다.


(6) 이미지 리스트 는 검색 조건에 맞는 작품 내 이미지만 표시하는 영역입니다. 모바일 앱 한정으로 지원하는 기능이며 기존 작품 목록보다 빠른 탐색을 유도해 더 많은 사용을 유도합니다.

(7) 유저 리스트 는 Behance 사용자를 검색하는 영역입니다. 창작 영역, 지역, 구직 여부 등으로 필터해 유저를 찾을 수 있습니다.

(8) 무드보드 리스트 는 사용자들이 만든 공개 무드보드를 검색하는 영역입니다. 다른 사용자의 이미지 모음집을 확인하고 가져올 수 있습니다.


(9) Best of Behance 는 Behance 선정 작품을 보여주는 영역입니다. 다양한 선정 기준이 있지만 이를 필터할 수 있는 방법이 없어 아쉽습니다.

(10) 라이브 영상 은 현재 라이브 중인 방송이나 이전 라이브 영상, 예정된 라이브 영상을 확인할 수 있는 영역으로 작품 영역 내 태그를 사용해 분야별로 컨텐츠를 홍보할 수 있습니다.

두 영역은 이전 영역보다 컨텐츠 선별에서 서비스 주도적 성격이 강합니다. 업데이트 이전에는 독립적인 영역에 있었지만, 컨텐츠 필터로 통합되었습니다. 서비스 구조상 작품 관련 영역과 어울리는 느낌은 아닌것 같아 아쉽습니다.


작품을 표시하는 영역입니다. 댓글, 저자, 태그, 수상 내역 등 작품과 관계된 데이터를 제공해 자세한 정보와, 연관된 다른 작품으로 이어지는 상호작용을 갖췄습니다. 화면을 좌우로 스와이프해 검색결과 내 다른 작품으로 이동할 수 있습니다.


작품과 상호작용하는 부가기능을 표시하는 모달 영역으로 사용자에게 현재 어느 지점에 있는지 시각적으로 알려주는 좋은 방법입니다.

(24) 태그 연관 작품 영역 은 작품 태그를 선택시 이동하는 영역으로 현재 태그만을 기준으로 검색 결과를 보여주어 현 위치에서 추가 검색으로 이어지기 어렵습니다.


b. 갤러리 보기 영역

내비게이션 바를 통해 갤러리 보기 영역으로 이동할 수 있습니다. 모바일 앱에만 있는 영역으로 기존 작품 보기와 다른 모바일 친화적 컨텐츠를 제공합니다.


갤러리 보기 영역은 기존의 컨텐츠를 모바일 화면에 최적화된 보기를 지원해 더 많은 노출 기회를 제공하는 목적을 가진 기능입니다.

(26) 컨텐츠 영역 은 모바일 환경에 맞춰진 컨텐츠를 선별해 빠른 탐색을 유도하는 SNS 앱과 유사한 인터페이스를 갖췄습니다.

(29) 갤러리 모드 스위치 를 토글해 작품 내 이미지 외 요소를 숨김 처리할 수 있습니다. 갤러리 모드를 해제하면 기존 작품 페이지와 유사한 정보를 제공합니다.


c. 메시징 영역

Behance는 작품에 달 수 있는 댓글 외에 사용자 간의 인스턴스 메시징을 지원해 네트워크를 강화했습니다. Behance는 채용, 구인 경험에 집중한 메시징 서비스를 통해 인적 자원 플랫폼으로 정체성을 강화합니다.

다른 사용자와 나눈 대화와 팔로우 소식, 작품 업데이트 알림을 표시하는 영역입니다. 일반적인 메시징을 넘어 채용, 구인, 의뢰 등의 비즈니스에 집중한 네트워크 서비스를 제공해 채용 시장에서 매력적인 사용 경험을 제공합니다.


d. 구인 영역

구직 상태를 설정한 사용자를 표시하는 영역입니다. (43) 필터 설정 모달 을 통해 프리랜서, 풀타임 등의 채용 조건 필터를 적용하면 채용자는 조건에 적합한 구직자를 찾을 수 있습니다.


e. 프로필 영역

자신의 프로필을 확인할 수 있는 영역입니다. 업로드한 작품 정보와 팔로우, 추천 같은 관심의 척도, 계정 공개 설정 등의 설정을 담당하는 영역입니다. 포트폴리오 관리와 더불어 구직자와 채용자의 매칭을 돕는 기능을 업데이트 하면서 적극적으로 채용 시장에 진입하는 Behance의 시장 포지션 변화를 가장 크게 느낄 수 있는 영역이었습니다.


(44) 프로필 정보 영역 에서 개인 프로필 설정과 클라이언트 설정에 접근합니다. 프로필 이미지를 터치해 선정된 작품 목록을 확인 가능하며 하단의 버튼으로 자신의 구직 정보를 설정할 수 있습니다.

(46) 컨텐츠 CTA 버튼 을 눌러 작품이나 스토리를 빠르게 업로드할 수 있습니다.

(49) 작품 업로드 영역 에서 작품을 편집하여 업로드할 수 있습니다. 이미지 보정, 텍스트 서식과 외부 요소를 임베드하는 기능을 제공합니다.

(52) 컨텐츠 설정 에서 상세한 컨텐츠 설정을 제공해 데스크탑과 유사한 작품 업로드 경험을 제공합니다.


(53) 프로필 요약(54) 프로필 영역 을 제공해 통계와 외부 링크로 연결을 제공합니다.

(55) 무드보드 영역 에서 사용자가 등록한 무드보드를 관리할 수 있습니다. 자신의 프로필 화면에서 편집이 가능합니다.

(56) 추천 작품 영역 은 사용자가 추천한 작품들을 최신순으로 정렬한 영역입니다. 추천을 취소하려면 작품 페이지로 들어가는 과정이 필요해 개인 프로필 화면에서 빠르게 여러 추천 작품을 관리할 수 없는 점은 아쉽습니다.

(57) 구직 상태 설정 모달 에서 자신의 구직 상태를 업데이트 할 수 있습니다.


의뢰 서비스를 설정한 사용자의 프로필에 별도의 항목이 생기며 양식을 통해 서비스를 의뢰할 수 있습니다.


프로필의 상세한 정보와 상호작용하는 기능이 있는 영역입니다.


2. 사용자 분석

Behance를 이용하는 많은 학생과 디자이너들은 포트폴리오를 통해 노출 기회를 얻습니다. 전세계의 전문가들의 작품을 관찰하고 피드백을 받아 포트폴리오를 업데이트하여 고퀄리티의 이미지와 자세한 설명으로 자신을 홍보합니다. 다양한 포트폴리오 서비스 중 Behance를 사용하는 이유는 무엇일까요?

Behance의 가치를 판단하기 위해 포트폴리오 서비스를 이용하는 사용자의 주요 성향을 다음과 같이 정의합니다. 이런 성향들은 사용자 경험에서 가장 중요한 서비스를 사용하는 이유며, 사용자가 서비스를 평가하는 요소가 됩니다.

  • 창작 활동 참여도 사용자가 창작 활동에 얼마나 적극적으로 참여하는지 나타냅니다
  • 창작 프로젝트 규모 사용자가 주로 수행하는 창작 프로젝트의 규모
  • 디지털 포트폴리오 숙련도 디지털 기술과 플랫폼을 활용해 포트폴리오를 제작하고 관리하는 능력
  • 디자인 도구 및 소프트웨어 활용도 사용자가 주로 사용하는 디자인 도구와 소프트웨어
  • 창작 동기 및 목표 사용자가 Behance를 사용하는 주요 목적과 목표. 자기 홍보를 위한 사용자와 영감을 얻기 위해 탐색을 중시하거나, 자신의 기술 향상을 위해 피드백 위주의 활동 등등이 있습니다
  • 네트워킹 및 커뮤니티 참여도 다른 사용자와의 상호작용 정도 및 커뮤니티 참여도
  • 사용 기기 및 플랫폼 선호도 사용자가 Behance를 이용하는 주요 기기와 플랫폼
  • 창작 스타일 및 테마 선호도 사용자가 선호하는 디자인 스타일과 주제. 모던/미니멀, 클래식, 실험적 등의 타입이 있습니다
  • 지역 및 문화적 배경 사용자의 지리적 위치 및 문화적 배경이 창작 활동에 미치는 영향

Behance는 포트폴리오 서비스로서 높은 평가를 받습니다. Behance의 창작 활동 참여도창작 프로젝트 규모 는 가장 활발한 커뮤니티로서 증명됩니다. 디지털 포트폴리오 숙련도디자인 도구 및 소프트웨어 활용도 또한 다양한 형태의 포트폴리오와 사용된 도구를 구체적으로 명시하는 점에서 좋은 평가를 받습니다. 창작 동기 및 목표네트워킹 및 커뮤니티 참여도 또한 양질의 작품이 올라오는 플랫폼으로서 사용자들에게 이를 독려하는 순선환 구조로 포트폴리오 유저층을 이뤘습니다.

반면 Behance의 약점은 사용 기기 및 플랫폼 선호도, 창작 스타일 및 테마 선호도, 지역 및 문화적 배경 입니다. 데스크탑에 맞춰진 컨텐츠 중심의 플랫폼으로 짧고 가벼운 모바일 트렌드와 맞지 않습니다.

Behance에서 다뤄지는 컨텐츠의 스펙트럼은 거의 모든 영역을 다루며 특정한 스타일을 대변하지 않는 포지션에 있습니다. 광범위한 사용자를 갖췄지만, 반대로 뚜렷한 색을 갖추고 있지 않다고 보일 수 있습니다.

전 세계 사람들이 모두 모여 활동하는 곳이기에 특정 지역색을 띄지 않습니다. 하지만 서로 다른 언어권의 사용자를 마주할 가능성이 높으며 이들 간의 네트워킹이 약화되어 기회를 잃는 요소로 보입니다.


사용자 경험에서 장점이 단점으로 변하는 순간이 가장 위험합니다. 사용자가 서비스를 이용할 이유가 없어지면 불만족스러운 경험을 갖고 서비스를 이탈하게 됩니다. Behance라면 어떻게 대처 해야 할까요? 사용자가 이탈하는 시나리오를 다음과 같이 예상합니다.

  • 만약 더 이상 새롭고 흥미로운 작품을 찾기 어려워지면, 흥미를 잃고 다른 곳을 찾게 될 수도 있습니다.

  • 시간이 지남에 따라 관심사가 바뀌면, Behance의 사용 빈도가 줄어들 수 있습니다. 예를 들어, 새로운 취미를 찾거나 다른 플랫폼에서 더 많은 영감을 받을 수 있습니다.

가설을 바탕으로 유저 페르소나를 설계해 위험 요소를 기회로 반전하기 위한 개선점을 제안합니다.

태블릿으로 그림을 그리며 작품활동을 하는 지망생
리서치를 하기 위해 비헨스를 이용한다
좋은 포트폴리오를 찾기 위해 다양한 검색을 한다
검색에 부족함이 있어 원하는 결과를 찾기까지 오래 걸린다
좋은 작품을 찾고 설명을 읽으려 하지만 외국어로 되어있어 해석이 어렵다
시각적 자료에 의존한 채 레퍼런스를 만든다
결과적으로 시간을 많이 사용하게 되었다.

3. 개선점 찾기

사용자 모두 한명의 관객으로서, 작품을 본다는 것을 고민하는 것을 어떨까

관객을 위해 작품을 감상하는 경험을 강화할 방안을 제시합니다.

As-it 다른 언어권의 작품을 보는데 불편함을 가져다 줍니다.
To-be 전 서비스에 걸친 번역기 기능을 제공합니다.

As-it 갤러리 보기 영역에서 작품 페이지로 이동시, 다음 작품으로 넘기기 위해 작품 간 부자연스러운 이동 과정이 필요했습니다.
To-be 스크롤을 내리면 다음 컨텐츠를 이어 바로 이동할 수 있도록 만든다.

태그 팔로우 기능이 왜 모바일에선 없을까? 피드 개인 맞춤화가 모바일엔 없다...

As-it 필터 초기화시 명확한 시각적 피드백이 있으면 좋을 것 같습니다.
To-be 리셋을 누르면 필터 창이 닫히면서 필터 조건이 사라짐을 표현한다.




Behance 모바일 앱을 조사하는 작업을 하며, 처음에는 잘 만들어진 앱 다웠지만 점점 작은 불편함들이 눈에 들어오기 시작했다. 예를 들어, 터치 반응이 어색하거나, 생각만큼 검색이 직관적이지 않다는 점이 느껴졌다. 그동안 내가 무비판적으로 앱을 사용하고 있었던 것일까? 다른 작업물은 철저히 분석하고 평가하면서도, 왜 나의 생활권에서는 그런 점이 무뎌질까?

많은 창의적인 사람들은 일상 속에서 무심코 지나쳤던 디테일들이 때로는 중요한 통찰을 던져주고, 그렇게 쌓인 일상 속 작은 경험들로 성장한다고 말한다. 나도 그런 사람들처럼 멋진 사람이 되고 싶고, 늘 날카로운 눈으로 문제를 찾아내고 싶지만, 나는 그정도로 날카로운 사람은 못된다.

그래도 일상과 직업 사이에서 더 나은 디자이너로 성장할 수 있는 길을 찾고자 한다. 작은 경험이라도 놓치지 않고, 모든 순간을 소중히 하고자 한다. 디자인의 일부로 볼지, 아니면 그저 흘려보낼지 고민하더라도, 그 속에서 의미를 찾고 배우는 사람이 되고 싶다.

profile
재밌는 일을 하고 싶어요

0개의 댓글