민정

오늘도 당신에게

일상의 행복을 배달 중, 배달의 민족

: 배달의 민족 플랫폼은 대한민국 대표 배달 주문 앱 서비스로, 처음에는 음식 배달부터 시작했지만 현재는 음식 배달뿐 아니라 B마트(즉시 장보기), 배민상회(외식업자용 쇼핑몰) 등 다양한 서비스를 제공하고 있다. 배달의 민족은 무선 전화를 통해 음식점 가게에 직접 연락하여 배달을 받던 불편함을 페인 포인트로 삼아 구축한 플랫폼이다. 사용자 중심의 직관적인 UI, 다양한 결제 수단, 리뷰 및 별점 시스템, 그리고 브랜드와 감성을 더한 마케팅으로 많은 사랑을 받고 있다.

1. 홈

- 홈 화면 상단에는 쿠폰 정보를 배치하여 사용자들이 플랫폼을 시작하자마자 쿠폰에 대한 정보를 알 수 있도록 하고 있다. 그 하단에는 아이콘과 카테고리명을 나열하고, 배달의 민족 플랫폼에서 가장 많이 사용하는 '음식배달' 영역을 배치하여 쿠폰 확인 후 -> 음식배달로 자연스럽게 행동이 이어지도록 했다.

- 아래로 스크롤하면 빠른 배달 / 최근 주문 내역 / 기부 / 할인 브랜드 / B마트 등의 다양한 컨텐츠들이 보여진다. 각 주제에 따라 '배달'이면 (빠른 배달, 최근 주문) 이미지 영역 비율이 동일하고 또 다른 주제의 '브랜드', 'B마트' 이면 또 다른 비율과 형식으로 보여주고 있다. 이렇게 성격에 따라 이미지 영역 비율과 형식을 다르게 하여 사용자들에게 서비스 성격에 대한 차이를 무의식 중에서도 인지할 수 있도록 했다.

- 플랫폼 시작 화면에서 상단에 보이는 '음식배달' 탭을 누른 화면이다. 

가장 상단에는 여러개의 필터 버튼들이 있다. 정렬, 필터, 쿠폰, 배달방식 탭을 상단에 고정하여 사용자가 빠르게 조건을 변경할 수 있도록 했다.

- 대표 음식 이미지와 가격 정보를 큼직하게 배치하여 사용자가 한눈에 메뉴를 비교할 수 있게 했다.

- 평점, 리뷰 수, 배달 시간 등 주요 정보들을 아이콘과 함께 명확하게 시각화했다.

- ‘배민1’ 등 서비스 구분을 이미지 위에 배지 형태로 표시해 빠른 인지를 도왔다.

- 할인 정보나 추가 비용 유무를 컬러 텍스트로 강조하여 정보의 우선순위를 명확히 전달했다.

- 특정 가게를 선택하면 세부 정보를 볼 수 있는 화면으로 전환된다. 가게 정보, 배달 조건, 리뷰 등을 한 눈에 볼 수 있도록 주요 정보들을 상단에 카드 형태로 요약했다. 그리고 배달 예상 시간 및 거리를 구체적으로 제시해 실제 이용 경험에 대한 예상을 돕도록 했다.

- 리뷰를 하단에 미리보기 형태로 배치해 사용자의 신뢰 형성과 탐색 흐름을 자연스럽게 유도했다.

- 메뉴명, 설명, 가격, 리뷰 수를 리스트 형태로 구성해 비교 탐색을 용이하게 했다.

- 추천 메뉴와 카테고리를 상단 고정 탭으로 배치해 빠르게 원하는 메뉴 유형으로 이동할 수 있도록 했다.

2. 장보기, 쇼핑

- 장보기, 쇼핑 탭에서도 카테고리 탭과 검색창을 상단 고정하여 사용자가 언제든 탐색할 수 있도록 했다.

- 할인율·혜택 정보는 빨간 배지와 함께 노출해 사용자 눈에 더 잘 띄도록 구현했고, 얼마 남지 않은 상품 또한 빨간색 텍스트를 사용하였다.

- 혜택이 많은 가게, 리뷰 많은 가게 등 카테고리별 추천 브랜드들을 나열하여 사용자들을 자연스럽게 유입하도록 했다.

- 이 화면에서도 카테고리별로 이미지 영역 비율을 다르게 하여, 각각의 다른 성격들을 표현하고 있다.

- ‘할인 쿠폰 정보’, ‘할인율 높은 인기 상품’ 등의 이벤트성 정보는 포인트 색상을 할인율 텍스트로 적용하고, 배너 스타일로 노출해 구매를 유도하고 있다.

- 상품별 할인율을 썸네일 왼쪽 상단에 강조 표시하여 사용자의 눈에 잘 띄고, 다른 상품들과의 가격을 쉽게 비교할 수 있도록 했다.

- 정렬 필터(기본순, 판매순 등)를 제공해 사용자가 원하는 방식으로 상품을 탐색할 수 있게 했다.

- 브랜드 및 판매처가 있는 경우(편의점 탭 선택)는 브랜드, 판매처명으로 나열하여 사용자가 선택할 때에 신뢰감을 가질 수 있도록 도왔다.

- CU 를 클릭한 화면이다. 브랜드 전용관에서는 혜택·배달정보·쿠폰 등 핵심 정보를 첫 화면에 직관적으로 배치했다.

- 브랜드별 인기 카테고리를 하단 아이콘으로 구성해 빠른 탐색을 돕고 있다. 그리고 하단 탭바를 통해 ‘매장’, ‘카테고리’, ‘최근 본’으로 주요 쇼핑 흐름을 끊김 없이 이어갈 수 있게 했지만 갑자기 변해버린 하단 네비게이션바 때문에 사용자들이 혼란스러울 수 있을 것 같다.

- 하단바에서 '카테고리' 탭을 선택하면 좌측 상단에 브랜드 로고가 보이고, 버튼 명칭에도 곳곳에 브랜드 이름을 넣어 아이덴티티를 확실하게 보여주고 있다. 그리고 디테일한 상품들은 이미지 + 명칭 구조로 카테고리화하여 시각적으로 분류할 수 있게 했다.

- '최근본' 탭을 선택하면 화면에 최근 본 상품을 따로 모아 반복 구매나 비교 탐색이 쉬운 사용자 경험을 제공했다

3. 찜

- 찜 화면에서는 배달, 픽업 / 장보기, 쇼핑 탭으로 나누어져 있다. 배달의 민족 플랫폼에서 다루고 있는 분야가 많다보니 비슷한 성격을 지니고 있는 카테고리끼리 묶여 탭으로 나눈 것 같다.

- 해당 화면에서 느낀 점은 본인의 경우 찜한 목록이 많이 없기 때문에 금방 찾을 수 있겠지만, 찜 목록이 많은 사용자들에게는 특정 가게(상품)를 찾는 데에 어려움이 있을 것으로 예상했다. (개선점) 상단에 검색필터를 배치하여 특정 가게(상품)를 바로 찾을 수 있도록 한다.

4. 주문내역

- 주문내역 화면에서도 상단에 카테고리 별로 탭을 나누어 볼 수 있도록 구성하여 편의성을 제공했다.

- 검색 필터를 사용하여 특정 가게나 음식을 검색해볼 수 있다.

- 상세 페이지 상단에 '직원 상담 연결' 버튼을 배치하여 도움이 필요한 사용자들이 빠르게 도움을 요청할 수 있게 도왔다.  

5. 마이배민

- 마이배민 화면에서는 프로필 수정, 음식 배달을 시킬 때 지불할 방식(배민페이) 변경, 플랫폼 환경 설정 등을 볼 수 있는 화면이다.

배달의 민족 플랫폼에서 밀접한 기능(?)들은 텍스트에 Bold, 포인트 색상, 크기 조절을 사용해 사용자들에게 눈에 더 잘 띄게 했다.

- 리서치 참여 버튼을 넣어 UX 디자이너들이 따로 시간과 사용자들을 모아 리서치를 진행하지 않아도, 참여를 원하는 사용자들을 모아 데이터를 얻을 수 있게 했다.

- 우측 상단에 있는 설정 아이콘을 누르면 환경 설정 화면으로 전환되는데, 해당 화면에서는 여러가지 옵션들을 카테고리 별로 나누었고 각 카테고리 제목에 대해서는 배경색을 적용하여 제목과 옵션 영역을 나누어 가독성을 높였다.

억만장자처럼 쇼핑하기, 테무

: 테무(Temu)는 글로벌 쇼핑 플랫폼으로, 의류·생활용품·전자기기 등 다양한 카테고리의 상품을 중국 현지 제조사로부터 직접 공급받아 초저가에 판매하며, 첫 구매 90% 할인·무료배송·친구 추천 이벤트 등 다소 공격적인(?) 마케팅 전략을 통해 빠르게 사용자층을 확장하고 있다. 본인도 종종 이용해본 경험이 있는 사용자로서, 실제 사용 흐름과 서비스를 바탕으로 UX 관점에서 분석해보려 한다.

1. 홈

- 먼저 테무는 저렴한 가격으로 많은 상품을 판매하는 것이 목적이기 때문에 홈 화면에서 보여지는 상품들의 개수와 관련 이벤트들이 노출되는 개수가 굉장히 많다. '뭘 좋아할지 몰라 모두 준비해봤어' 의 나열 방식은 장점과 단점이 확실하기 때문에 플랫폼 특성에 맞게 사용해야 한다.

 보여지는 컨텐츠들이 많아 사용자들의 눈을 피로하게 하고 너무 많은 선택지를 쥐어준 것 때문에 이탈율이 높아질 수 있다. 하지만 다양성을 제공하고 사실상 가장 중요한 가격이 합리적이라면 말이 달라질 수 있다. 이 점으로 봤을 때 테무의 추천 컨텐츠들은 적절하다고 생각한다.

- 복잡하게 나열되어 있는 컨텐츠들을 아래로 스크롤하면 다른 플랫폼들과 같이 한 줄에 2개씩 컨텐츠들을 보여준다.

- 상단 카테고리바에서 하나씩 눌러보면 하단에 뿌려지는 필터들이 다 다른 것을 확인할 수 있다. ( 3, 4번째 이미지 )

컨텐츠들을 저렴한 가격으로 다양하게 볼 수 있는 것은 좋지만, 검색 필터들도 다양하게 뿌려놔서 난잡하게 느껴진다.

(개선점) 각 카테고리를 선택할 때마다 하단 필터를 동일하게 구성해 통일성을 준다.

- 한 줄에 2개의 컨텐츠들이 나열되는 화면에서는 각 컨텐츠 영역들의 비율이 조금씩 달라서 난잡하게 느껴지는 느낌을 더하고 있다. (개선점) 컨텐츠 영역의 비율을 통일시켜 보다 더 정돈된 느낌을 표현한다.

- 이번에는 상품 세부 페이지이다. 해당 화면에서는 본인의 시력이 좋은 게 정말 다행이라고 생각했다. (왼, 오 1.5) 

조금 더 눈이 안 좋았더라면 상품에 대한 제목만 읽다가 눈이 아파서 이탈했을 것 같다. 상품명을 불필요한 정보까지 모두 기재하여 실제 상품에 대한 정보를 흐리게 하고 있다. 그 외에 세부 정보들도 과도하게 많은 정보를 작은 텍스트로 배치해 가독성을 떨어뜨리고 있다. (개선점) 상품명은 문장 형식이 아닌 단어 형식으로 바꾸고 더 필요한 정보는 하단에 세부 정보로 배치될 수 있도록 변경한다.

- 세부 페이지를 하단으로 스크롤하면 개요/리뷰/추천 탭이 생성되면서 상품 정보들이 보여지는데, 선택되어 있는 탭의 명칭과는 다르게 정보가 뒤죽박죽으로 배치되어 있다. (개선점) 하단 스크롤 했을 때 가장 먼저 보여지는 건 리뷰 영역이다. 상단 탭의 순서는 개요가 먼저이기 때문에 리뷰 영역은 하단으로 내리고 상품에 대한 정보를 먼저 볼 수 있도록 순서를 변경한다.

- 홈 화면 상단에 검색바를 보면 우측에 카메라 아이콘이 있다. 해당 아이콘을 누르면 바로 자동으로 카메라 앵글에 있는 모든 것을 잡아내기 시작한다. 처음에 책상 쪽이 비춰져서 책상에 있는 문구류와 책들이 자동으로 인식되고 바로 관련 상품으로 연결돼서 놀랐다. (상품 페이지로 빨려들어가는 느낌이다) 레퍼런스 분석용으로 화면 캡쳐를 하고 싶은데 계속 자동 인식 후 상품 연결이 되어버려서 정신이 없었다. 결국 벽을 비춰놓고 나서야 해당 화면에 어떤 추가 기능이 있는지 볼 수 있었다ㅠㅠ

(개선점) 카메라로 특정 상품을 인식할 수 있는 기능은 좋지만 본인의 의지와 다르게 계속해서 (인식->연결)x999,,이기 때문에 내가 원하는 상품을 타켓으로 삼기 어렵다. 카메라 아이콘을 누르면 하단에 촬영 버튼을 배치하여 사용자들이 카메라를 실행한 후 원하는 상품을 직접 촬영할 수 있도록 변경한다.

2. 카테고리

- 카테고리 탭을 선택하면 눈을 어디에 둬야 할지 모를 정도로 촘촘하게 세부 카테고리들이 한 줄에 3개씩 나열되어 있다. 본인의 경우 카테고리 탭을 선택하고 잠깐 눈을 감고 있었다.. 너무 많은 선택지를 보면 이탈율이 높아진다는 이론을 직접 체감했다. 카테고리를 연상하게 하는 이미지 아이콘 크기는 적절했지만, 하단에 명칭이 너무 길어서(A&B 형식) 가독성도 떨어지고 피로감까지 느껴졌다. (개선점) 너무 세분화 되어 있는 카테고리를 합치고 하단 명칭을 통일시킨다.

-> 현재: 홈 수납&정리, 주방 수납&정리 각각 있음 / 개선: 수납

- 카테고리 탭에서도 추천 컨텐츠들을 쏟아붓고 있다. 테무에서는 어떤 버튼을 선택하나 어떤 탭을 선택하나 무조건 추천 컨텐츠들을 보게 되어 있다. (이게 가장 상단에서 테무를 소개할 때 공격적인 마케팅 방식이라고 표현했던 이유이다)

3. 나

- 내 정보 탭에서는 내 정보보단 추천 컨텐츠들이 더 많이 보인다ㅎㅎ. 그리고 수많은 메세지가 오는데, 메세지를 눌러보면 거의 프로모션에 대한 이벤트성 메세지이다. 본인의 경우, 카톡 아이콘 상단에 메세지 개수가 떠있으면 꼭 확인해서 없애고 싶어진다. 하지만 테무는 아무리 대화방을 눌러 뱃지를 없애도 계속해서 생성된다... 근데 그러다가 특정 프로모션에 눈이 가게 되면 홀린 듯 쇼핑이 시작된다. 이런 점을 테무에서는 잘 활용한 것 같다.(특정 사용자들을 타겟으로 함)

- 프로모션을 누르면 이벤트 페이지로 화면이 전환되고, 이벤트에 대한 정보 문구도 하단에 표기하여 사용자들이 인지할 수 있도록 돕고 있다.  

4. 장바구니

- 장바구니 화면에서도 열심히 추천 컨텐츠들을 뿌려 구매를 유도하고 있다. 장바구니가 비어있다면 오히려 좋아, 이건 어때? 의 느낌이다. 하지만 이런 구조 또한 저렴한 가격이 메리트인 플랫폼에서는 현명한 방식의 구매 유도법이라고 생각한다.

(본인도 레퍼런스 분석용을 캡쳐를 하다가 여러번 홀려 장바구니에 담을 뻔 했다) 

- 하지만 이 탭에서도 컨텐츠 영역 비율이 제각각이라 불안정해보였다. 이 화면에서도 역시나 컨텐츠 비율을 동일하게 배치하여 통일성을 주는 게 나을 것 같다.

50% 마감 할인 럭키박스 서비스, 럭키밀 

: 럭키밀(Luckymeal)은 음식물 쓰레기를 줄이고 환경을 보호하기 위한 50% 마감 할인 럭키박스 서비스 플랫폼이다. 사용자는 주변 맛집에서 당일 판매되지 않은 음식을 반값에 구매하여, 경제적인 이득과 함께 환경 보호에 기여할 수 있다는 장점이 있다.​

 주요 기능에는,

- 맛집 찾기: 앱을 통해 주변의 참여 매장을 검색하고 럭키백을 예약.​

- 예약하기: 할인된 가격으로 럭키백을 선착순으로 예약.​

- 픽업하기: 지정된 시간에 매장을 방문하여 예약한 럭키백을 수령.​

- 선한 영향력 확인하기: 앱에서 자신의 참여로 절약된 탄소 배출량 등 환경 기여도를 확인.​

의 기능이 있고, 이 과정을 통해 사용자들에게 경제적 혜택과 환경 보호에 대한 참여를 유도하고 있다.

1. 홈

- 홈 화면은 상단부터 위치, 필터, 픽업 가능 시간 그리고 리스트, 지도 탭으로 구성되어 있다. 먼저 리스트 탭에서는 한 줄에 한 가게씩 이미지와 가게 정보가 배치되어 있다. 플랫폼 특성상 중요한 할인 가격에 대해서는 Bold에 포인트 색상을 사용했고 텍스트 크기도 가게 이름와 비슷한 크기로 눈에 잘 띄게 배치했다.

 (개선점) 눈에 잘 띄게 하는 포인트들은 좋았지만 개인적으로 가격 정보는 왼쪽에 배치하여 사용자들의 눈에 더 먼저 띄도록 하는 것이 마케팅에 도움이 될 것으로 생각된다.

- 우측 하단 FAB 버튼을 누르면 리뷰작성, 가게 입점 요청, 문의하기 기능이 보여진다. 아직까지 너무 먼 거리의 가게들밖에 없어서 이용해보진 못 했지만 이용해본 적이 있는 사용자나 가게 주인일 경우 선택하기 쉬운 위치에 있는 플로팅 버튼을 편리하게 잘 사용할 것이라고 생각된다.

- 상단 지도 탭을 누르면 내 위치와 주변 픽업 가능한 매장들의 위치가 보인다. 포인트 색상으로 픽업 가능한 매장과 불가능한 매장을 구분지어 굳이 눌러보지 않아도 한 눈에 볼 수 있게 했지만, '리스트' 탭과는 달리 필터 기능이 없어서 모든 매장을 봐야 했다. (개선점) 지도 탭에서도 필터 기능을 추가해 특정 카테고리의 매장들의 위치만 볼 수 있도록 한다.

2. 커뮤니티

- 커뮤니티 탭에서는 스탬프, 쿠폰, 굿즈 정보와 다른 사용자들의 리뷰를 모아볼 수 있는 리뷰 모아보기 탭으로 나뉘어져 있다. 처음 이 탭을 분석했을 때의 의문점은 탭 이름이다. 커뮤니티라면 소통을 하는 곳인데, 혜택과 이벤트의 비중이 더 크다고 느껴졌다. (개선점) 탭 이름을 '혜택' 또는 '이벤트'로 변경하고 리뷰 모아보기 탭은 따로 탭으로 만들어 커뮤니티처럼 배치하는 게 더 효율적일 것 같다.

- 하단에 안내 메세지를 배치하여 사용자들이 참고해야 할 내용을 담아놓았다. (가장 하단에 있는 안내 문구는 앞에 띄어쓰기를 하나 빠뜨리신 듯 하다ㅎ)

3. 회원가입 및 퀴즈 이벤트

- '주문현황' 탭을 선택하면 바로 회원가입 페이지로 연결된다. 회원 가입 페이지는 많은 정보 요구로 인한 이탈 방지를 위해 한 카테고리당 한 페이지씩 입력하도록 되어 있다. 

- 리퍼럴 코드 부분은 처음 뜻을 몰랐지만 다른 플랫폼들처럼 추천인 코드이려니 하고 넘어갔지만 추천인 코드에 익숙하지 않은 사용자들은 헷갈릴 수 있을 것 같다. (개선점) 툴팁으로 리퍼럴 코드에 대한 정보를 추가한다.

- 회원가입이 완료되면 게이미피케이션 요소도 등장한다. 플랫폼의 목적에 맞게 아깝게 낭비되고 있는 음식물 쓰레기들을 줄이기 위한 퀴즈이고 퀴즈를 맞추면 쿠폰을 주는 방식이다.

- 문제는 꽤 어려웠다,,(무지한 본인 탓) 하지만 이런 참여 유도적 요소들이 해당 플랫폼에 대한 이미지를 높이는 것 같다.

- 퀴즈도 풀고 나면 간단한 튜토리얼 화면이 나온다. 1번 튜토리얼인 '가게 고르고' 에서는 상단에 있는 이미지와 아래 설명 텍스트가 매칭되었지만, 그 뒤로는 1번 이미지가 동일하게 나오고 바뀌지 않았다. 그리고 모바일 화면 비율에 맞지 않고 계속해서 상하좌우로 움직일 수 있었다(지도 화면을 보는 것 같았다)

(개선점) 모든 이미지들이 한 번에 뿌려져서 사용자가 직접 사진을 움직이며 보는 게 아닌, 튜토리얼이 넘어갈 때마다 각 설명에 맞는 이미지로 전환되도록 변경한다.

4. 주문현황

- 위에서 이야기 했지만 너무 거리가 먼 가게들만 있어서 본인은 아직 이용해보지 못 했다ㅠ 

주문현황 탭에서는 예약완료, 럭키백 확정, 주문 취소의 카테고리로 나뉘어 있다. 특정 키워드에 포인트 색상을 넣어 구분지었고, 하단에 설명 텍스트를 배치해 사용자들의 이해를 돕고 있다. 

- 예약 목록이 없는 경우는 '주문하러 가기' 버튼을 두었고, 해당 버튼을 선택하면 홈 화면으로 연결하게 해 사용자들의 편의성을 돕고 있다.

5. 내정보

- 내정보 탭에도 모바일 화면 비율이 맞지 않아, 일부 화면이 잘리는 문제가 보였다.   

가장 상단에는 쿠폰함, 알림, 설정 버튼들이 배치되어 있는데, 쿠폰함 버튼을 해당 탭 상단이 아니라 '커뮤니티' 탭이나 내정보 탭에서 할인 쿠폰 영역이 있는 곳 가까이 두는 것이 더 눈에 잘 띌 것으로 생각한다.

> 개선 방안

: 일부 탭에서 보여지는 화면들이 모바일 화면 비율과 맞지 않아 생기는 문제가 있어, 사용에 불편함이 생기고 있다. 여러가지 종류의 모바일과 타블렛 화면에 맞게 비율을 조정한다. 

'커뮤니티' 탭은 탭 명칭을 변경하거나 관련 정보들을 수정하여 목적에 맞도록 구성을 변경한다.

[ 스플래쉬 ]

- 스플래쉬 스크린 : 화면의 로딩 화면으로, 짧은 시간 반복적인 노출로 사용자에게 로고나 이미지를 각인시킬 수 있다.

- 첫 시작에는 하트와 하단 도형이 보이지 않다가 나중에 둘이 만나도록 하는 프로토타입을 주기 위해, 하트와 도형을 아트보드 밖으로 배치시켜준다. 이때 주의할 점은 화면 밖으로 아예 나가게 되면 XD에서 같은 객체로 인식할 수 없기 때문에 최소 1px 이상은 아트보드에 걸쳐 있어야 한다.

- 화면에 걸쳐져 있는 게 보일 수 있으니 불투명도를 100%로 준다.

[ 회원가입 ]

- 회원가입의 경우 사용자에게 입력을 요구하면 사용자는 이탈할 가능성이 높다. 그래서 최근에는 한 페이지에 한 카테고리의 정보를 입력 받거나 필수적 정보들과 선택적 정보들을 나누어 입력 받는 경우가 많다.

[ 튜토리얼 ]

< 관련 페이지 링크 >

• LottieFiles : https://lottiefiles.com/

[ 메인 페이지 ]

[ 콘텐츠 상세 페이지 ]

[ 검색 페이지 ]

- 검색창에서 엔터 키를 누르면 검색 완료된 상태의 화면으로 이동되도록 프로토타입 지정함.

[ 카트 리스트와 주문 ]

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

[ 상단 앱바 ]

- Title 텍스트를 텍스트 필드로 지정한 이유는 타이틀의 글자수가 길어졌을 때를 대비하여 우측에 있는 아이콘들이 밀리지 않게 함이다. 그래서 간격을 조절할 때에도 텍스트 필드 영역을 종모양 아이콘과 맞닿은 위치에서 아이콘의 크기만큼 빼줘서 계산한다.

( 종모양 아이콘과 맞닿은 위치값 - 24 )

- 베이스 라인을 계산할 때에는 텍스트 필드 박스를 기준으로 하는 것이 아닌 텍스트 자체에 두어 계산해야 한다. 보통 계산할 때에는 미리 가이드 할 수 있는 사각형을 만들어놓고 중간중간 계산해주면서 작업한다.

[ 탭 ]

- 탭을 알아보기 전에 먼저 반응형 크기 조정을 알아보자.

Tab 아트보드를 만든 후 모바일 형식으로 만든 상단 바를 복사해서 붙여넣는다. 그리고 각 레이어들마다 위치에 맞게 반응형 크기 조정을 '수동'으로 조절해준 후 전체선택하여 Tab 너비에 맞게 늘려준다.

이렇게 여러가지 탭과 웹, 모바일 화면을 작업할 수 있다.

[ 내비게이션 드로워 ]

[ 하단 내비게이션 ]

[ 버튼과 나인패치 ]

• 나인패치 제너레이터 : https://romannurik.github.io/AndroidAssetStudio/nine-patches.html#&sourceDensity=320&name=example

[ FAB 플로팅 액션 버튼 ]

[ 하단 앱바 ]

[ 리스트 디자인 ]

[ 카드와 스택 ]

- 먼저 타이틀과 이미지, 하단 텍스트 필드를 모두 선택하여 그룹 요소로 묶어준 후, Shift 키를 누르며 특정 요소를 드래그 하여 원하는 위치로 변경할 수 있다.

- 패딩 값도 상, 우, 하, 좌 방향의 값을 조정하여 사용할 수 있다.

[ 에셋의 활용 ]

- 특정 요소를 선택한 후 우클릭하여 '구성요소 만들기' (단축키 Ctrl K) 를 선택하면 좌측 구성 요소에 추가가 되고, 그 뒤로는 좌측 구성 요소에서 드래그 해서 가지고 와 사용할 수 있다.

( 피그마에서의 컴포넌트와 동일함 )

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

[ 이미지 삽입과 크기 변경 ]

- 이미지 가지고 와 사용할 때에는 항상 이미지가 망가지지 않는 선에서의 크기 조절과 다양한 효과 적용이다. 

최대한 이미지가 지지 않은 선에서 적용하도록 주의하자.

- 3D 효과를 줄 수도 있다. 해제를 할 때에는 옵션 값을 모두 0으로 수정한 다음 해제해야 한다.

[ 도형에 이미지 넣기 ]

- 도형 안에 이미지를 넣을 때에는 여러개의 이미지를 넣어보며 교체하기 쉬워 탐색기에서 이미지를 골라 드래그 하여 넣는 것이 편하다. 

- 더블클릭해서 보여질 부분을 조절할 수 있고, 기타 테두리와 효과 등의 옵션도 적용 가능하다.

[ 모양으로 마스크 만들기 ]

- 첫번째 자몽 이미지를 넣을 때에는 생성해놓은 다각형 안으로 바로 이미지를 넣어 삽입했다.

두번째는 마스크를 적용하려고 하는데 마스크를 적용하려면 도형이 가장 위에 있어야 하므로 정렬을 다듬어준다.

그리고 이미지와 도형을 모두 선택한 후 우클릭하여 '모양으로 마스크 만들기'를 적용한다.

- 마스크를 적용했을 때와 도형 안에 바로 이미지를 삽입했을 때 결과물은 동일하지만 마스크를 활용하여 생성한 것은 테두리는 지정할 수 없다는 차이가 있다.

그리고 마스크를 사용하면 종횡비를 풀어 이미지를 자유롭게 크기를 조절할 수 있다.

[ 반복 그리드 ]

- 반복 그리드를 사용하기 전에, 이미지 영역과 타이틀 영역을 생성해서 그룹핑하고 우측에 '반복 그리드' 버튼을 눌러 적용한다.

반복 그리드를 적용하면 우측과 하단에 초록색 바가 생성되고, 바를 늘려 반복 그리드를 생성할 수 있다.

- 특정 이미지의 크기를 변경할 때에는 반복 그리드를 해제한 후 특정 이미지만 더블 클릭하여 이미지를 변경해야 한다.

[ 스크롤 활용하기 ]

- 먼저 아트보드를 생성한 후 가이드 라인을 잡아야 한다. 가이드 라인은 가장 좌측과 상단에 마우스를 대고 드래그 해서 끌어올 수 있고 해당 가이드라인은 미리보기에서는 보이지 않는다.

- 아트보드의 상단에는 비디오를 둘 영역을 만들고 하단에는 반복 그리드를 사용하여 스크롤 영역을 생성 후 각각 이미지와 비디오를 삽입한다.

- 스크롤 영역에 대한 속성은 우측에서 설정할 수 있고, 우측 상단에 미리보기 아이콘을 눌러 확인할 수 있다.

- 비디오의 경우 기본 속성이 탭을 해야만 재생되도록 되어 있기 때문에 미리보기로만 봤을 때는 재생되지 않는다.

그렇기 때문에 다시 아트보드에서 비디오 부분을 더블클릭하여 선택한 후 관련 옵션을 설정한다.

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

[ 면과 선의 컬러 ]

- 색상을 지정할 때에는 Hex 코드를 자주 사용하고, 상단에 단색과 여러가지 그레이디언트 속성을 적용할 수도 있다.

- 하단에 + 버튼을 눌러 원하는 색상을 색상표로 등록할 수도 있고, 삭제하고 싶은 컬러는 선택한 뒤 드래그 하여 밖으로 버리면 된다.

[ 그림자와 흐림 효과 ]

[ 혼합 모드 ]

- 다양한 혼합 모드를 적용할 수 있고, 방향표를 사용하여 연속으로 효과를 바꾸어가며 적용해볼 수 있다.

- 보통 혼합 모드는 이미지의 특정 색상 영역을 안 보이게 하거나 보이게 하는 활용으로 많이 쓰인다.

[ 그레이디언트 ]

- 그레이디언트를 적용할 때에는 상단 바에서 원하는 위치를 클릭한 후 하단에 컬러를 다시 클릭하여 적용한다.

- 중간 지점에 다른 색상을 추가할 때에는 마우스로 클릭하여 추가하고 특정 컬러를 삭제할 때에는 마우스로 드래그 하여 밖으로 버려 삭제하거나 도형 레이어 안에 있는 선에서 클릭한 후 Delete 키를 눌러 삭제한다.

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

[ 기본 도형 ]

- 기본 도형을 그리기 전, 맞춤형 크기의 아트보드를 선택했을 때는 빈 화면의 보드이기 때문에 화면 비율의 정도를 알기 어려울 수 있고, 프로토타입 등의 작업이 불가능하다.

- 피그마와 거의 비슷하지만 XD에서는 마우스 위치에 따라 기준선을 생성하여 특정 위치와 동일한 점에서 또 다른 도형을 그릴 수 있다.

- 사각형 안에 사각형을 만들 때에는 가운데 선을 찾아 마우스를 위치시킨 후 Alt Shift 를 누르며 드래그 하여 생성할 수 있다.

- 우측 상단에 있는 정렬 속성을 사용해서 위와 동일한 사각형 안에 사각형을 만들 수도 있다. 

[ 다각형 ]

- 사각형의 경우 도형 내부에 생기는 동그라미가 각마다 보여졌다면 다각형에서는 하나의 동그라미만 보여진다. 그렇기 때문에 모든 각에 대한 Radius 값은 동일하게 적용된다.

- Path에 마우스를 가지고 가면 여기에도 동일하게 동그란 점이 생기는데, 이 점을 드래그 하여 움직이게 되면 도형이 뾰족하기를 조절할 수 있다.

[ 닫힌 도형 ]

- 펜 툴을 사용하여 닫힌 도형을 그려보자. 첫 시작인 앵커 포인트를 지정해주고 도형을 그리기 시작할 수 있다.

- 펜 툴로 사각형을 생성한 뒤 여러 패스 지점에 앵커 포인트들을 생성하고, 선택 툴로 포인트를 움직여 다양한 형태의 도형을 만들 수 있다. 

- 여러개의 앵커 포인트들을 선택하여 한 번에 움직일 수도 있다.

- 특정 앵커를 선택한 후 Delete 하여 없앨 수도 있다.

[ 직선과 곡선 ]

- 펜툴을 사용하여 직선과 곡선을 표현할 수 있다. (피그마와 동일하다)

- 위 아래로 생성되는 곡선이 아닌 위로만 볼록한 곡선을 만들 때에는 핸들러의 한 쪽 앵커에 마우스를 올린 후 Alt키를 누른 채로 움직여 없애준다. 그리고 전과 동일하게 드래그 하여 곡선을 생성하면 위로 볼록한 곡선을 만들 수 있다.

- 위로 볼록한 곡선을 연속으로 생성할 때의 다른 방법으로는, 펜툴을 사용하여 직선들을 생성한 후 특정 앵커를 더블클릭하여 곡선으로 만들거나 취소할 수 있다.

[ 선의 형태와 속성 ]

- 빨간색 직선은 펜툴로 만든 직선이고, 초록색 직선은 선툴로 만든 직선이다. 

먼저 펜툴로 만든 직선에서 볼 수 있는 원들은 앵커 포인트가 아닌 바운딩 박스의 표시이다. (도형에서의 회전과 이동을 설정한다)

그리고 선툴로 만든 직선에서 볼 수 있는 원들은 앵커 포인트이고 포인트를 움직이게 되면 해당 포인트만 이동 가능하다.

- 같은 크기의 도형을 만든 후 우측에 있는 속성 패널 옵션들을 사용하여 여러가지 형태로 변형하여 사용할 수 있다.

- 대시와 간격 옵션을 이용하여 직선(선과 도형)을 점선으로 만들 수도 있고, 선 끝 부분에 대한 속성도 적용할 수 있다.

[ 오브젝트의 배열과 병합 ]

- 오브젝트들의 정렬들은 Shift Ctrl [ ] 를 통해 변경할 수 있다. (피그마 툴과 동일하다)

- 다양한 병합 옵션을 통해 여러가지 도형을 만들 수 있다.

- 색상은 첫번째 적용한 색상 기준으로 일괄 적용된다. 

[ 텍스트와 플러그인 ]

- 텍스트를 입력하는 방식은 두가지 방식이 있다. 첫번째는 원하는 지점을 클릭하여 입력하는 방식이고 두번째는 영역을 먼저 만든 후 그 안에 텍스트를 입력하는 방식이다. 첫번째는 텍스트 박스, 두번째는 텍스트 필드라고 부르고 각각 속성이 조금씩 다르다.

- (텍스트) 박스에는 바운딩 박스가 하나이고, 필드는 4개가 있다. 박스 바운딩 박스를 움직여 크기를 키우면 텍스트 자체의 크기가 커지고, 필드의 바운딩 박스를 움직이면 텍스트 영역의 크기만 커진다.

- 해당 속성에 대해서는 우측 속성창에서 자유롭게 박스와 필드를 변경하여 사용할 수 있다.

- 텍스트 박스는 넓이와 높이를 변경할 수 없기 때문에 텍스트 크기를 변경해야 하지만 필드는 넓이와 높이를 변경할 수 있기 때문에 텍스트 자체에 크기를 변경하지 않아도 된다. (보통 필드를 많이 사용한다)

- 좌측 하단에 블럭 아이콘을 눌러 플러그인을 탐색하고 설치할 수 있다.

- 플러그인을 사용하여 임의의 텍스트들을 생성하고 우측 텍스트 설정 패널에서 다양한 옵션을 지정할 수 있다.

< 관련 플러그인 >

- ContentGenerator: 텍스트를 랜덤하게 생성해주는 플러그인

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

[ 아트보드의 활용 ]

- Ctrl 1, 0을 눌러 100% 비율로 볼 것인지, 화면에 가득차게 볼 것인지 볼 수 있다.

- 아트보드의 이름은 더블클릭 후 변경 가능하고, 이름을 클릭하여 특정 아트보드를 선택할 수 있다.

- 좌측 툴바에서 돋보기 아이콘을 눌러 화면을 확대하거나, Alt 키를 눌러 축소할 수 있다.

Ctrl +, - 를 단축키를 눌러 확대나 축소하는 것도 가능하다.

- 스페이스바를 눌러 드래그 하여 손바닥 모양으로 화면을 움직일 수 있다.

- 좌측 툴바에서 아트보드 아이콘을 누르면 어도비XD 초기 화면에서 볼 수 없던 기타 아트보드들(겔럭시 화면, 탭 화면 등)도 볼 수 있다.

[ 레이어 이해하기 ]

- 좌측 하단에 레이어 아이콘을 누르면 아트보드 정보가 보여지고, 아트보드 왼쪽에 메모지 아이콘을 더블클릭하면 해당 하트보드에 생성되어 있는 레이어들이 보여진다.

- 레이어 위에 마우스를 올려놓으면 우측에 아이콘들이 보인다. 그리고 첫번째 아이콘을 누르면 '내보내기에 대해 표시' 옵션이 적용되는데, 이 옵션이 적용되지 않으면 나중에 외부에 공유했을 때 인터페이스의 구성요소는 보이지만 정보는 볼 수 없게 된다. 그렇기 때문에 습관적으로 클릭을 해주는 것이 좋다.

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

세상이 궁금한 사람들과
세상을 연결하는 지식 플랫폼, 헤이버니

: 헤이버니는 사용자가 온라인에서 찾은 뉴스레터나 정보를 저장하고 정리할 수 있는 북마크 및 콘텐츠 관리 플랫폼으로, 웹페이지, 기사, 이미지, 동영상 등을 한곳에 모아 체계적으로 보관할 수 있도록 돕는 서비스다. 태그, 폴더, 하이라이트 기능을 활용해 쉽게 정리할 수 있으며, 디바이스 간 동기화로 언제 어디서든 저장한 정보를 확인할 수 있다는 점이 특징이다. 이번 UX 분석에서는 사용자가 콘텐츠를 저장하고 관리하는 과정의 직관성과 효율성을 중심으로 살펴보려고 한다.

1. 아티클

- 상단 달력 버튼을 선택하면 내가 원하는 날짜에 업로드된 뉴스레터들을 볼 수 있다. '오늘'의 아티클이라는 문구를 보고 사용자에게 '오늘'의 의미를 잘 전달했을지 걱정했지만 오히려 아주 적절하게 사용된 문구라고 생각된다.

- '이주의 트렌드'는 어떤 아티클들이 모여있는 카테고리인지 알기 어려웠다. (개선점)추측했을 때 만약 이날의 모든 카테고리 중 핫한 아티클을 보여주고 있는 것이라면 명칭을 '이날의 트렌트'로 수정하면 좋을 것 같다.

- 상단 날짜를 누르면 원하는 날짜를 선택할 때에, '오늘' 날짜로 돌아올 수 있는 버튼이 없어서 불편했다. (개선점) 우측에 작은 버튼으로 '오늘' 버튼을 배치하여 사용자가 다시 오늘의 날짜를 찾아 선택하지 않아도 한 번에 돌아올 수 있게 한다.

혹시나 하는 마음에 컨텐츠를 누른 채로 아래로 끌어내려서 새로고침 하면 '오늘'의 아티클로 돌아올 줄 알았는데 그럴 듯 한 모션만 있었고 아무런 반응 없었다.

- 특정 아티클을 눌러 내용을 보던 중에 본인이 인상 깊은 문장을 발견하면, 그 문장을 꾹 눌러 저장할 수 있는 기능이 있다. 뉴스레터를 읽다보면 내가 원하는 문단이나 문장만 기억하고 싶을 때가 있었는데 그때마다 캡쳐를 하거나 메모를 하지 않아도 기억하고 싶은 문장만 저장할 수 있다는 점이 좋았다. (긍정적인 사용자 경험)

하지만 하이라이트 기능을 한 번 적용하면 수정할 수 없다는 점이 불편했다. (개선점) 이미 하이라이트가 적용되어 있는 문장의 경우, 취소하고 다시 적용할 수 있도록 수정하면 좋을 것 같다.

- 아티클 하단에 목록 아이콘을 누르면 섞어읽기 탭과 모아읽기 탭을 나누어 본인이 보고 싶은 회사의 아티클만 볼 것인지, 구분 없이 모든 아티클을 볼 것인지 선택할 수 있게 하여 편의성을 제공했다.

1-1. 상단 아이콘

- 알림: 상단에 관련 설정 아이콘이 있어, 사용자가 설정 화면까지 화면 이동을 하지 않아도 원하는 옵션을 변경할 수 있도록 했다.

- 카테고리: 안 읽은 아티클만 보기 기능을 통해 사용자가 스스로 읽은 아티클인지 아닌지 생각하지 않아도 되게끔 편의성을 제공했고, 상단에 카테고리도 다중으로 선택 가능할 수 있어 편리했다.

- 아카이브: 아카이브와 하이라이트를 모두 모아볼 수 있었다. (하이라이트는 날짜와 제목, 관련 회사, 색상, 텍스트 강조 효과를  주어 가독성이 좋아 잘 읽혔다) 하지만 스크랩과 하이라이트의 경계가 모호하여 구분이 잘 되지 않았다. (개선점) 카테고리 제목의 텍스트를 키우고, 뒷 배경 색상을 넣어 확실하게 구분될 수 있도록 변경한다.

2. 피드

- 탭마다 화면 전환의 방식이 '새로고침' 방식이 아니라서, 사용자가 피드를 보다가 다른 탭으로 이동을 해도 이전에 읽고 있던 피드를 이어서 볼 수 있는 장점이 있다.

 하지만 어느정도 스크롤이 하단으로 내려왔을 때, 다시 상단으로 올라가려면 여러번의 스크롤을 하며 위로 올라가야 하는 불편함이 있다. (개선점) 우측 하단에 위로 가기 버튼을 생성하여 한 번에 상단으로 올라갈 수 있도록 한다.

3. 프리미엄

- 다른 플랫폼들과는 달리, '프리미엄 아티클 맛보기' 기능이 있다는 점이 새로웠다. 그리고 결제를 하지 않아도 미리 사용해볼 수 있다는 것 자체가 긍정적인 사용자 경험을 제공하고 있다.

- 소개글에 보여주고 있는 크리에이터들의 아티클을 맛보기 할 수 있어서 신뢰도를 높이고, 프리미엄 아티클에는 어떤 크리에이터들이 정보를 제공하고 있는지 일부 알 수 있다.

4. 검색

- 상단에 인기 검색어 영역을 두어, 많은 사람들이 흥미로워 하는 키워드가 뭔지 알 수 있고, 특정 검색 키워드가 없던 사용자들도 검색 탭에 대한 부담 없이 눌러볼 수 있게 하면서 해당 탭의 활성도도 높일 수 있겠다는 생각을 했다.

- 하단에는 내일 발행되는 뉴스레터를 두어 사용자에게 또 다른 뉴스레터들을 경험할 기회를 제공하고 있다.

5. 프로필

- 출석부: 하단 툴팁을 활용하여 해당 기능이 어떤 것을 제공하는지 사용자들이 알 수 있게 했다.

하지만 팝콘의 용도를 모르면 출석부에 대한 의미 전달이 희미해질 수 있으므로 팝콘의 용도를 알 수 있는 툴팁도 제공하면 좋을 것 같다.

- 스티커: 다양한 이모티콘 스티커들과 이에 해당하는 관련 스티커들을 사용하여 앞으로의 활발한 활동을 유도하고 있다.

조금 더 나아가자면 하단에 어떤 이모티콘들이 어떤 조건을 만족하면 얻을 수 있는지 미리 볼 수 있다면 활발한 활동에 더욱 좋은 시너지를 낼 것 같다.

- 행운 쿠폰: 실제로 외부에서도 사용할 수 있는 쿠폰을 제공하여 어플 사용을 유발하고 있다.(캐쉬워크와 비슷함)

쿠폰을 얻으려면 특정 조건을 만족해야 하는데, 바로 마케팅 동의를 하는 것이다. 본인의 경우, 다른 플랫폼이었다면 마케팅 동의를 하지 않았을텐데 행운 쿠폰 서비스에 흥미가 생겼고 마케팅 동의도 하게 되었다. 사용자에게 혜택을 제공하기도 하면서 자연스럽게 마케팅 동의도 얻을 수 있게 유도하는 서비스로 기발한 아이디어라고 생각했다.

- 도움말: 플랫폼 사용이 처음인 사용자와 플랫폼을 조금 더 효율적으로 사용하고 싶은 사용자들의 도움말을 나누어 각종 팁들을 제공하고 있다. 눈에 띄는 색상과 큰 텍스트를 사용하여 한 눈에 보인다는 장점이 있지만, 버튼 하나의 크기가 이미 한 화면의 대부분 영역을 차지하고 있어서, 불필요한 스크롤을 유도하고 있다는 불편함이 있었다. (개선점) 두개 버튼의 크기를 줄여, 한 화면안에 들어올 수 있게 수정하여 불필요한 스크롤을 제거한다.

> 느낀점

: 헤이버니 플랫폼을 사용하면서, 전체적으로 UX적 요소들이 기발하다는 생각을 많이 했다. 프리미엄 구독 서비스를 유도하기 위해 미리 보기 기능을 제공한다거나, 외부에서도 사용할 수 있는 쿠폰을 제공할 때에 마케팅 동의를 해야 하는 조건을 걸었다던지, 이런 서비스들이 긍정적인 사용자 경험을 제공한다고 생각했다. 그리고 아티클들을 읽으며 불편함을 느낄 수 있는 화면의 이동들을 최소한으로 했고, 부분 부분 설명이 필요한 기능은 툴팁을 사용하여 사용자가 알아서 해소할 수 있게 했다는 점이 인상 깊었다.