☕ 스타벅스에서 모바일 상품권을 한 번에 등록하는 방법!

안녕하세요. 구독자님, 오늘도 팁스터 뉴스레터와 함께 해주셔서 감사합니다. 이번 업데이트 소식에서는 열나요, 폴센트, 스타벅스 서비스의 업데이트 사례를 살펴보실 수 있어요. 또 유사한 서비스의 기능 그리고 최근 서비스 소식을 함께 제공할 예정입니다. 그럼 이번 뉴스레터도 재미있게 읽어주세요! 

👀 오늘 소개할 서비스와 기능

열나요 : 피드
폴센트 : 상세화면
스타벅스 : 모바일 상품권

1. 열나요 : 피드(타임라인)

열나요는 제가 아이들이 생긴 후 가장 먼저 설치한 앱 중 하나예요. 접종할 것이 많다 보니 접종열 등이 생길 수밖에 없고 이런 경우 열이 얼마나 오르고 내리며 주기는 어떤지, 해열제 복용은 어떻게 했는지 등을 기록하고 확인할 방법이 필요하기 때문인데요. 얼마 전, 열나요가 기록한 내용을 확인할 수 있는 ‘타임라인’ 화면을 개선해 오늘 자세히 살펴볼게요.

열나요의 기존 타임라인은 (1) 화면 상단에 기록한 내용을 일정한 구분에 따라 확인할 수 있는 필터를 먼저 확인할 수 있었어요. (2) 필터 아래로 날짜와 시간에 따라 최근에 등록한 기록을 볼 수 있었죠. 기록을 확인하는데 큰 어려움은 없었지만, 아쉬운 점이 있다면 필터가 아이콘으로만 구분되어 있고 종류가 많아 각각이 무엇을 의미하는지 어렵다는 점이었어요. 타임라인의 기록에도 시간 옆에 아이콘이 적용되어 있지만, 크기가 작아 처음엔 구분이 어려워 필터를 선택한 뒤에 각 필터가 의미하는 바를 확인할 수 있었어요.

(1) 업데이트 후 필터는 아이콘과 함께 텍스트를 적용했고, 아이콘 크기와 구성도 변경되었어요. 또 이전에는 화면 안에서 모든 필터를 볼 수 있는 구성이었는데, 이제는 스와이프를 통해 전체 내용을 확인할 수 있게 되었고 체온, 복약, 증상 등 기록에서도 자주 확인하는 내용에 따라 순서가 적용된 모습이네요. 이런 변화는 각 필터가 의미하는 바를 조금 더 빠르게 이해하는데 도움이 된다고 생각해요. 이전에는 현재 선택한 필터가 무엇인지 명확히 알 수 없었는데, 이제 선택한 필터도 시각적으로 확실히 구분됩니다.

(2) 기록한 내용에도 변화가 있었는데, 기존에는 입력한 내용의 본문만 보여줬다면 개선 후에는 각 기록이 어떤 구분에 해당되는지 타이틀을 함께 제공하고 있어요. 예를 들어 업데이트 전에는 체온 아이콘과 38.3도라는 내용만 알 수 있었는데 지금은 아이콘, 38.3도라는 기록 내용, 체온이라는 기록의 구분까지 확인할 수 있어요. 기록한 내용을 확인하는 영역의 너비도 넓어져 내용 간 구분과 확인도 상대적으로 편리해진 느낌이 드네요.

(덧붙임 🐳) 필터는 정보를 원하는 조건에 따라 빠르게 확인할 수 있도록 도와주는 역할을 하지만, 그에 앞서 생각해봐야 할 내용은 빠르게 조건을 확인하고 선택할 수 있는지? 가 아닐까 싶어요. 어떤 방법이 사용성을 높이는지는 여러 가지를 고려해야겠지만, 이번 열나요의 업데이트를 보며 동일 서비스 내에서는 분명 사용성이 좋아졌다는 생각이 들었는데요. 제 기준으로 가장 중요한 변화는 텍스트를 함께 제공하는 것이었어요. 아무래도 필터 종류가 많고, 자주 보지 않았던 아이콘으로 구성되어 있었기 때문이 아닐까 싶네요! 

1-1. 똑닥 : 체온관리

똑닥 서비스에서도 체온관리를 할 수 있어요. 건강피드 - 체온관리 탭을 선택하면 체온 또는 해열제 복용 등의 기록을 남길 수 있는데요. 기록할 수 있는 범위는 좁지만, 해열제 복용과 체온 기록을 좌/우로 구분해 보여주는 것과 정상, 미열, 고열 등의 구분을 배경 컬러로 구분해 주는 것은 빠른 확인에 많은 도움이 되었어요. 또 입력하는 과정에서도 직접 숫자를 입력하는 것이 아니라 체온계를 바탕으로 입력할 수 있어 편리했어요. 해열제 선택 시, 해열제 이름만 있으면 어떤 제품인지 헷갈리기 쉬운데, 이미지를 함께 보여주고 자주 복용하는 제품은 즐겨찾기가 가능해 두 번째, 세 번째 입력 시에는 더 빠른 등록이 가능한 점이 좋았어요.

1-2. 함께 읽어볼만한 글

🏷 모바일 앱에 적합한 정렬과 필터는?

항공권 예약, 커머스, 금융 서비스 내 필터와 정렬 기능 분석

maily.so

모바일 앱에서 필터를 어떻게 활용하면 좋을지에 대한 내용을 확인하실 수 있어요!

2. 폴센트 : 상세화면

폴센트는 온라인 쇼핑 최저가를 알려주는 서비스예요. 관심상품을 등록하고, 원하는 가격을 등록하면 해당 가격에 도달했을 때 알림으로 확인하고 구매할 수 있죠. 또, 가격 그래프를 제공해 지금 가격이 저렴하거나 적당한지 기준으로 삼을 수 있는 환경을 제공하고 있어요. 저는 전자제품을 구매할 때 폴센트를 활용하고 있는데, 얼마 전 관심 상품의 상세 화면이 업데이트되어 자세히 살펴볼게요.

폴센트에서는 관심 상품으로 등록한 상품을 모아볼 수 있고, 상품별 가격 알림을 설정할 수 있어요. 폴센트는 저렴하게 구매할 수 있다는 것을 알려주기 위해 여러 장치를 활용하고 있는데요. (1) 먼저, 현재 가격과 하락폭 그리고 쿠팡의 로켓 배송 등 상품별 특징을 안내해요. 업데이트 전에는 이런 안내를 텍스트로 보여줬는데, 쿠팡에서 사용하는 로켓배송의 컬러도 아니고, 상세 화면 내 텍스트 정보가 워낙 많아 눈에 잘 띄지 않는다는 단점이 있었어요. 그래서 폴센트는 쿠팡에서 사용하는 아이콘과 컬러를 그대로 활용해 로켓배송, 쿠팡 인증 상품 등의 정보를 보여주는 방법으로 변화를 줬어요. 확실히 이전보다 특징이 눈에 더 잘 띄는 모습이죠?

(1) 또 동일한 제품이지만 옵션(사양)이 다른 제품을 보여주는 방법에도 변화가 있었는데요. 기존에는 사용자가 선택해 리스트를 확인하는 방법을 활용했지만, 이제는 4개의 리스트를 먼저 보여주고 더보기를 통해 전체 리스트를 확인할 수 있어요. 일부를 미리 제공하는 방법은 아무래도 사용자가 보지 못하고 지나칠 가능성을 줄여줄 수 있고, 화면을 이동하거나 추가 행동을 하지 않고도 정보의 하나로 확인할 기회를 제공할 수 있어요.

(덧붙임 🐳) 다른 옵션 보기에 포함된 리스트를 보면 제품명, 현재가격, 가격 추이(%)를 확인할 수 있고 + 버튼을 통해 관심 상품으로 추가할 수 있어요. 리스트는 서비스 입장에서 보여주고 싶은, 포함하고 싶은 정보가 많을 수 있는데 폴센트는 상세 화면 진입 시 먼저 볼 수 있는 주요 정보와 서비스의 주요 특징 중 하나인 가격 변화만 포함했어요. 어떤 정보에 집중하면 좋을지 일관성을 유지함과 동시에 서비스가 제공하고 싶은 가치가 무엇인지 보여줄 수 있다는 점에서 더 눈에 띄는 사례가 아닐까 싶네요. 관심 상품으로 등록하기 버튼도 마찬가지!

2-1. 노써치 : 상세 화면

노써치는 다양한 제품 카테고리에 포함된 제품을 비교, 분석할 수 있는 서비스예요. 서비스명에서 알 수 있는 것처럼 제품에 대한 정보를 하나씩 다 검색하지 않고도 구매에 필요한 내용들을 손쉽게 확인할 수 있는데요. 상세화면에서도 서비스의 특징을 하나, 둘 확인할 수 있는데 대표적인 내용이 바로 (1) 제품에 대한 노써치의 종합 평가 점수예요. (2) 또 제휴몰의 정보를 바탕으로 최저가 히스토리를 확인할 수 있으며, 구매 링크를 제공해 바로 구매 가능한 화면으로 이동하는 것도 가능하죠. 상세 화면을 통해 다른 제품과 비교를 하거나 연관 콘텐츠를 확인할 수 있어 구매 여정에서 정보를 계속 확인할 수 있다는 점이 눈에 띄네요.

2-2. 함께 읽어볼만한 글

정보를 List / Card UI로 정리하는 방법

정보를 시각적으로 그루핑하고, 일반적인 UI로 표현하는 과정 | 정보정리를 UI 단위로 하는 방법은 없는걸까? 그리고 그 정보정리는 어떤 UI 단위로 처리해야 옳바른 방식인걸까? 사실 이 부분은 '무조건 이게 정답이다' 라고는 말할 수 없는 지점...

brunch.co.kr

리스트에 필요한 정보를 어떻게 구성하면 좋을지에 대한 내용을 확인할 수 있어요!

3. 스타벅스 : 모바일 상품권

최근 스타벅스 앱 내에선 모바일 상품권을 한 번에 등록해 사용할 수 있는 기능이 추가되었는데요. 어떤 기능이 업데이트된 건지 함께 살펴볼게요.

(1) 모바일 상품권 등록은 앱 내 order > pay > 모바일 상품권 등록에서 할 수 있는데요. 스타벅스 쿠폰이나 모바일 상품권을 등록할 수 있어요. 모바일 쿠폰의 경우 유효기간 내로 사용 가능하기 때문에 기간에 맞춰 사용하는 게 중요한데요. 디데이 형식으로 남은 기간을 알려주는 방식이 개인적으로 인상 깊었어요.

정렬의 경우 유효기간 임박순, 등록순 또는 가격순 등으로 사용자 편의에 따라 확인할 수 있도록 해둔 점도 눈에 띄었는데요. 등록한 쿠폰을 확인하는 부분에 있어서 좋았던 점은 등록한 이미지대로 바코드를 보여주는 방식이 아닌 바코드를 새로 생성해 보여준다는 점이에요. 사용자가 등록한 이미지를 그대로 보여줄 경우 화질에 따라 쿠폰 사용 현장에서 인식되지 않는 경우가 발생할 수 있는데요. 그런 경우를 대비해 바코드를 새로 보여주는 부분이 인상 깊었어요.

(2) 다음은 모바일 상품권 등록 과정입니다. 스타벅스 앱 내에서 등록 가능한 중개사 쿠폰명을 미리 보여주고 있어요. 등록 방식은 크게 3가지로 앨범에서 등록하거나 바코드로 인식하거나 직접 번호를 입력하도록 되어 있어요. 테스트하면서 느낀 점은 아무래도 중개사를 통해 미리 바코드 정보를 갖고 있기 때문에 모바일 쿠폰거래 앱에서 쿠폰을 이미지로 인식하는 경우보다 등록 과정이 수월하게 느껴졌다는 점인데요.

(3) 간혹 쿠폰 이미지 인식에 실패하는 경우도 있었는데요. 인식 실패 플로우에서 아쉽게 느껴졌던 점은 인식에 실패할 경우 다시 등록 방법을 선택해야 한다는 점이었어요. 실패한 등록 방식 외 다른 방식으로의 안내나 등록 화면으로의 이동이 있었다면 더 수월하지 않았을까 싶어요.

(덧붙임 💎) 또 하나 인상 깊었던 부분은 기존에 사용했던 쿠폰일 경우 쿠폰 사용 일시와 사용 지점을 함께 보여주고 있다는 점이에요. 아무래도 브랜드사에서 직접 쿠폰 관리 기능을 추가한 사례이기 때문에 그만큼 활용할 수 있는 쿠폰 정보도 다양할 것 같은데요. 사용 쿠폰에 대한 자세한 정보를 담아 안내하고 있는 점이 눈에 띄었어요. 

3-1. 010pay 쿠폰 모아보기

다음은 010Pay의 사례입니다. 최근 사용자 기기 내 모든 쿠폰을 등록해 모아볼 수 있는 기능을 출시했는데요.

(1) 등록 방법은 앨범 자동 스캔, 직접 등록으로 크게 2가지입니다. 직접 등록 방식은 타 쿠폰 관리 또는 판매 앱에서 자주 사용하고 있는 방식인데요. 010Pay의 사례에서 눈에 띄었던 기능은 앨범 내 모든 쿠폰을 한 번에 등록할 수 있는 앨범 자동 스캔 기능이었어요. 이미 앱 내에서 쿠폰 판매를 제공하고 있지만 관리 기능까지 제공해 트리거로 활용하고 있는 건데요. (2) 이렇게 스캔 된 바코드 이미지들은 사용자가 한번 더 필터링해서 관리할 수 있도록 제공하고 있어요. (3) 이후 필터링된 쿠폰 정보를 확인하는 플로우로 진행되는데요. OCR 인식에 실패된 항목들은 사용자가 추가로 정보를 기입해 입력할 수 있도록 제공하고 있습니다.