–
1.와비파커가 리스트와 옵션 선택을 활용하는 방법
와비파커는 D2C 비즈니스의 대표적 성공 사례 중 하나입니다. 와비파커 홈페이지에서 최대 5개의 안경테를 골라 집으로 배송받을 수 있으며 닷새간 안경테를 체험해본 뒤 마음에 드는 것을 선택해 구매할 수 있습니다. (배송료는 무료) 미국에서는 안경을 구매하기까지 (국내 대비) 많은 비용이 필요한데, 상대적으로 훨씬 저렴한 가격에 품질 좋은 안경테를 구매할 수 있다는 것이 가장 큰 장점입니다. 앱에서는 AR을 활용해 안경테를 착용한 모습을 미리 살펴볼 수 있어요.
와비파커 앱을 사용하면서 가장 눈에 띈 점은 리스트를 활용하는 방법입니다. 카테고리 중 안경을 선택하면 와비파커에서 판매하는 안경테를 리스트로 확인할 수 있는데, 상세화면으로 이동하지 않고도 안경테 별 컬러를 큼직하게 넘겨볼 수 있도록 구성되어 있습니다. 리스트를 둘러보는 것만으로 충분한 탐색이 가능하며, 제품 디자인을 상세하게 볼 수 있어 많은 도움을 받을 수 있습니다.
특정 안경테를 선택하면 필요한 옵션을 단계별 확인, 고를 수 있는데 이 과정 역시 눈에 띕니다. 사이즈를 선택하는 화면에서는 너비가 어떻게 측정되는지 확인할 수 있으며, 렌즈 타입을 선택하는 화면에서는 안경테 각도를 변경해 보여줍니다. 렌즈 재질을 선택할 때는 옆모습을 통해 안경테 중 렌즈 부분을 더 강조해서 확인할 수 있어요.
어떤 옵션을 선택하는 단계냐에 따라 같은 안경테여도 각기 다른 모습을 보여주기 때문에 무엇을 선택하는 과정인지 명확하게 인지할 수 있습니다. 또 각 선택지에는 자세한 설명과 추가되는 비용을 함께 확인할 수 있어요. 추가되는 비용에 따른 총 결제 비용은 하단을 통해 확인할 수 있습니다. 덕분에 4-5단계에 해당하는 옵션 선택 화면 내 무엇을 선택하더라도 결제해야 하는 비용을 언제든 확인할 수 있습니다.
–
1-1.함께 읽어보세요! #리스트 #옵션
–
2.Honey가 알림 요청 및 빈 화면 안내를 제공하는 방법
Honey는 특정 제품의 가격 변화를 추적하거나(5달러 이상 하락 시 안내 등) 좋아하는 브랜드가 ‘세일’을 시작할 때 등 사용자가 원하는 조건이 되었을 때 안내를 받을 수 있는 서비스입니다. 서비스 내 제품 구매도 가능하고요.
그래서 이들에게 가장 중요한 건 ‘알림 허용’입니다. 좋아하는 브랜드를 설정하고, 가격이 떨어졌으면 하는 제품을 선택한 사용자가 정작 알림 허용을 하지 않으면 이런 정보를 제대로 전달받지 못하는 상황이 되기 때문입니다. 제품 구매 등도 가능하지만, 앱에서 제공하는 핵심 가치가 ‘사용자가 원하는 조건에 대한 정보 전달’이기에 알림 허용이 꽤 중요한 출발점이 될 수밖에 없어요. 앱을 설치한 뒤, 알림 허용 요청을 어떻게 할까 가장 먼저 들여다본 이유이기도 합니다.
알림 허용 화면은 ‘실제 알림’이 어떤 내용으로 구성되는지 ‘이미지’로 보여주는 것으로 시작됩니다. 팔로우하고 있는 매장에서 세일이 시작되었으니, 앱에서 확인해봐!라는 내용이 담긴 알림으로, 실제 알림과 동일하게 구성되어 있어요. 그리고 앱에서 볼 수 있는 중요한 세일 정보 리스트를 함께 보여줍니다. 알림을 허용하면 이런 알림을 받을 수 있고, 앱에서 구체적으로 이렇게 확인할 수 있다는 점을 보여주기 위한 목적으로 보여요.
알림 이미지 아래로는 매장 세일, 쿠폰 사용, 보너스 딜 등 알림으로 받아보게 될 주요 내용을 키워드 형태로 작성하는 것도 잊지 않았습니다. 이런 종류의 앱은 이미 어떤 앱인지 추천이나 정보를 얻고 들어온 상태일 가능성이 높지만, 그럼에도 불구하고 앱의 주요 기능을 활용해 알림 요청 화면을 구성한 모습입니다. 덕분에 이 앱을 통해 어떤 정보를, 어떻게 받을 수 있을지 다시 한번 확인할 수 있습니다.
빈 화면에도 ‘이미지’는 빠지지 않습니다. 특정 제품을 북마크 형태로 저장할 수 있는데, 처음에는 이 공간이 비어있을 가능성이 높습니다. 이들은 실제 알림이 어떻게 구성되는지 이미지로 제공한 것처럼 북마크 기능을 어디에서, 어떻게 활용할 수 있는지 실제 화면을 이미지로 제작해 보여줍니다. 북마크 아이콘이 강조되어 있어, 탐색 과정에서 해당 아이콘을 다시 만난다면 앞서 살펴본 내용을 상대적으로 더 또렷하게 기억할 수 있다는 장점이 있습니다.
빈 화면의 역할이 무엇인지 다시 생각해볼 수 있는 사례라고 생각해요. 현재 상황에 대한 안내는 물론(아직 추가한 제품이 없다) 다음 행동에 필요한 정보를 제공(매장 화면에서 북마크 아이콘을 통해 추가할 수 있다)할 수 있어야 하기 때문입니다. 한 가지 추가될 내용이 있다면, 담았을 때 사용자가 얻는 이득이 무엇인지에 대한 내용입니다. 가격 변화를 한 곳에서 확인할 수 있다, 와 같은 메시지가 추가된다면 현재 상태 – 다음 행동 – 행동에 따른 혜택을 빈 화면에서 보여줄 수 있지 않을까 싶네요.
–
2-1.함께 읽업보세요! #알림 #빈화면
- 호텔투나잇이 빈 화면과 기능 안내를 활용하는 방법
- 드롭박스가 빈화면을 대하는 방법
- 텔레그램이 빈화면을 활용하는 방법
- 쿼츠의 깨알같은 디테일 살펴보기 : 알림 설정과 카테고리 안내
- 종류와 상황 별 다양한 푸시 사례, 분석 내용을 확인 할 수 있는 : Really Good Push Notifications
–
3.Mealime이 선택한 메뉴를 보여주는 방법
Mealime은 선택한 식단에 따라 요리법은 물론 필요한 재료를 쉽게 구매할 수 있도록 도와주는 서비스입니다. 단순 레시피보다는 ‘건강한 메뉴’에 초점이 맞춰져 있고, 원하는 재료나 스타일에 따라 메뉴를 선택할 수 있는데요. 하나의 메뉴에 대한 레시피를 제공하는 것이 아니라, 원하는 식단을 직접 조합할 수 있다는 점이 가장 큰 특징입니다. 그에 따라 필요한 재료를 배송해준다는 점도 매력적!
아내의 레시피와 같은 서비스는 ‘특정 메뉴’를 중심으로 해당 메뉴를 어떻게 조리하면 좋을지에 대한 정보 제공이 중요하지만, 식단을 중심으로 하는 ‘Mealime’은 ‘선택한 메뉴’를 보여주는 것이 중요합니다. 여러 개의 메뉴를 동시에 선택할 수 있기 때문입니다. 마켓 컬리나 오아시스에서 장을 볼 땐 보통 일반 커머스와 같이 ‘장바구니’에 상품을 담는 방법을 활용하는데요. ‘Mealime’은 탐색과 메뉴(식단) 선택이 별도로 진행되지 않도록 화면 하단에 담은 메뉴를 언제든 확인할 수 있도록 도와줍니다.
장바구니와 같은 방법을 활용했다면, 식단에 포함되는 메뉴가 무엇인지 양쪽 화면을 오가며 확인해야 하는 불편이 생길 수밖에 없는데요. ‘Mealime’에서는 선택한 메뉴의 썸네일이 하단에 순서대로 고정되어 있어 계속 확인하며 다음 메뉴를 선택할 수 있습니다. 게다가 이미 담은 메뉴를 다시 담지 않도록 리스트에 별도 상태 (+ 담기 -> v 완료) 안내를 제공합니다. 덕분에 메뉴를 일정한 순서에 따라 구성하려는 과정에 많은 도움을 받을 수 있습니다. 앞서 담은 메뉴는 무엇인지, 이를 바탕으로 다음엔 어떤 메뉴를 담아야 하는지 쉽게 파악할 수 있기 때문입니다.
게다가 메뉴가 담긴 영역을 끌어올리면 식단 계획(플랜)에 대한 상세 정보와 설정을 곧바로 할 수 있도록 구성되어 있어요. 화면 전환을 최소로 하면서, 언제든 다시 탐색 과정으로 돌아갈 수 있는 기회가 제공됩니다.
–
3-1.함께 읽어보세요!
–
4.Redbubble이 사이즈 안내를 제공하는 방법
Redbubble은 아티스트의 작품을 여러 상품으로 만나볼 수 있는 서비스입니다. 예를 들어 한 작가가 제작한 일러스트를 액자, 스마트폰 케이스 등으로 제공하며 원하는 작품과 상품 유형에 따라 확인하고 구매할 수 있습니다. 크리에이터의 작품을 어떻게 상품화하는지 살펴보기 위해 설치했는데, 이 과정보다 상품의 ‘사이즈’를 구체적으로 안내하는 방법이 눈에 띄어 오늘 소개하고자 합니다.
우리에게 가장 익숙한 사이즈 안내는 숫자로 가로와 세로 또는 높이 등을 보여주는 방법입니다. 센티미터 등으로 표기해주면 국가별 측정 기준에 따라 나름 익숙하게 느껴지기 때문인데요. 다만, 익숙한 수치라 하더라도 집의 어느 공간에 어떻게 배치할 수 있을지 바로 판단하기 어려운 경우가 있습니다. 이를 해결하기 위해 서비스는 증강현실을 사용해 실제 공간에 작품을 배치할 수 있게 하나의 기능으로 제공하는 경우도 있는데요.
‘Redbubble’은 우리에게 ‘익숙한 공간’을 제공, 해당 공간에 사이즈 별 상품이 어느 정도 크기로 위치하게 되는지 안내해줍니다. 예를 들어 침대 위 공간에 사진이나 일러스트 등의 작품을 걸어두는 경우가 많다는 점을 고려, 침대 일부와 침대 뒤 벽을 이미지로 제공한 뒤 사이즈를 선택하면 어느 정도 크기가 되는지 사용자가 확인할 수 있도록 도와주는 방법입니다.
공간의 크기 등을 모두 고려할 순 없지만, 12 x 17 cm, in 등으로 보는 것보다 훨씬 빠르게 크기를 가늠할 수 있을 뿐만 아니라 어떤 느낌일지 더 구체적으로 확인할 수 있다는 장점이 있는 방법이기도 합니다. 또 거실 공간에 화분이나 간이 테이블이 있는 이미지를 보여준 뒤 그곳에 액자를 사이즈별 확인할 수 있는 상황도 제공해줍니다.
조금 더 발전시켜 본다면 집의 생활공간을 대표할 수 있는 이미지를 여럿 촬영한 뒤 구매한 상품을 어디에 배치할 것인지 선택하면 해당 이미지 속 크기 별 상품을 확인할 수 있도록 하는 것도 괜찮을 것 같다는 생각이 듭니다. 이미 제공하고 있는 이미지를 묶어 선택할 수 있는 자유도를 부여하면 가능하니 말이죠.
–
5.리디북스가 웹툰과 웹소설에 회차별 썸네일을 적용한 이유
리디북스가 얼마 전 업데이트를 통해 웹툰과 웹소설 내 회차별 썸네일을 적용했어요. 기존에는 회차별 동일한 썸네일을 사용하고 있었습니다. 보통 웹툰이나 웹소설은 단편으로 끝나지 않기 때문에 신작이 아닌 이상 꽤 많은 회차가 존재할 수밖에 없어요. 주 1-2회씩 제공되다 보니 금방 회차가 늘어나게 되는데요. 제목과 읽었던 회차를 통해 구분 가능하지만, 동일한 썸네일이 적용되어 있는 경우 회차별 내용을 구분하기가 애매한 경우가 있습니다. 이미지에 먼저 시선이 가기 때문인데요.
이런 불편을 해결하기 위해 기존 웹툰 서비스는 대부분 회차별 썸네일을 적용하고 있습니다. 레진코믹스, 네이버 웹툰, 만화경, 카카오 웹툰 등은 모두 각 회차에 해당하는 장면을 리스트 내 썸네일로 활용하고 있어요. 리디북스는 이번에 업데이트되었고요. 제 기준에서 회차별 썸네일은 회차를 구분하는데 중요한 역할을 해줍니다. 앞서 말씀드렸던 것처럼 작은 화면 내 여러 리스트가 섞여 있는 경우 회차 간 구분이 중요한데 ‘다르다는’ 것을 쉽게 구분할 수 있는 것이 썸네일이기 때문입니다. 또 하나는 미리보기의 역할입니다. 물론 길고 긴 웹툰 한 회의 아주 작은 부분이지만 계속 보던 웹툰의 최신 회차라면 어떤 내용이 이어질지 미리 살펴볼 수 있는 단서가 될 수 있습니다. 실제 회차 별 썸네일은 제목과 잘 부합하거나, 중요한 내용을 활용하는 경우가 많아요.
익숙하지 않은 경험에 기반한다는 점도 중요하다고 생각해요. 우리가 특정 리스트를 확인할 때, 썸네일이 모두 같은 경우는 거의 없었기 때문입니다. 썸네일은 리스트에 포함된 내용을 구분하는데 중요한 역할을 한다는 경험을 계속해왔기에, 모두 동일한 썸네일이 적용되었을 때 더 낯설게 느껴질 수밖에 없어요. 이런 점들을 고려해 리디 역시 썸네일을 회차 별 다르게 적용하지 않았을까 싶습니다.
–
5-1.함께 읽어보세요! #웹툰 #콘텐츠
–
팁스터 뉴스레터 안내
1월 20일 목요일 오전 8시 발행될 팁스터 뉴스레터 이번 주제는 ‘알림 화면’입니다. 4가지 유형에 따라 알림 화면 사례를 살폅보고, 구성 시 참고해야 할 에디터 코멘트를 확인하실 수 있어요. 구독 후, 서비스 구성요소에 대한 여러 사례와 정보를 편리하게 받아보세요!
–
