알림 화면의 변화, 참고해야 할 4가지 유형

알림 화면을 더 적극적으로 활용하는 방법!

2022.01.20 | 조회 29.8K |
0
|
팁스터의 프로필 이미지

팁스터

프로덕트와 관련된 다양한 주제의 콘텐츠를 발행합니다. 구독하기를 클릭하시면 발행 내용을 더 자세히 확인하실 수 있어요.😉 (팁스터란 정보 제공자라는 의미를 갖고 있으며, 앞으로 더 다양하고 알찬 정보를 전하고자 하는 마음과 의지가 담겨있어요.) 📮 광고 및 제휴 문의 : https://tally.so/r/mYoG6v

첨부 이미지
안녕하세요. 구독자님, 오늘도 팁스터 뉴스레터와 함께 해주셔서 감사합니다. 이번 뉴스레터 주제는 '알림 화면'입니다. 최근 '알림 화면'은 어떤 변화의 과정에 있는지 네 가지 유형을 사례와 에디터 코멘트에 따라 살펴봤어요. 이번 뉴스레터도 재밌고, 유용한 시간으로 이어지길 바랍니다. 그럼, 지금부터 시작할게요!

 

 

알림 화면의 중요성!


 알림 화면은 사용자가 서비스를 사용하는데 있어 놓쳐서는 안될 정보를 제공하는 역할을 합니다. 이전에는 사용자의 행동과 연결되는 내용이 많았다면, 최근에는 알림 화면에도 많은 변화가 일어나고 있어요. 행동과 관련이 없어도 중요한 정보로 받아들일 수 있는 내용이 포함되기도 하고, 알림의 ‘성격'에 따라 화면에 탭 등을 적용해 구분하기도 합니다. 오늘은 4가지 알림 화면 구성 유형에 따라 우리가 무엇을, 어떻게 참고하면 좋을지 정리하고자 합니다.

 

 

유형 소개


  • 이벤트 및 기타 서비스 관련 정보를 함께 제공하는 경우
  • 사용자의 행동을 이끌어 내거나 더 많은 정보를 확인할 수 있는 기회를 제공하는 경우
  • 알림의 ‘성격’에 따라 탭을 구분하는 경우
  • 알림 화면 내 알림 설정 기능 세분화해 제공하는 경우

 

 

👻 유형 1. 이벤트 및 서비스 관련 정보를 함께 제공


1-1. 스타일쉐어

첨부 이미지

스타일쉐어 앱에는 하단 탭 바에 알림 아이콘이 있습니다. 알림 아이콘을 클릭하면, 웰컴 선물을 확인할 수 있고, 하단에 다양한 이벤트를 볼 수 있어요. 알림인 듯 광고인 듯 내용이 뛰어난 콘텐츠가 많더라고요. 알림 화면에 이벤트를 표시한 이유는 무엇일까요? 대부분의 서비스가 알림을 켜둘 시, 유저에게 혜택을 제공하는 형식을 따르고 있습니다. 스타일쉐어는 커머스 앱이기 때문에 알림 화면에 이벤트를 표시하고, 해당 이벤트를 통해 다양한 상품을 간접 경험할 수 있도록 구성한 것 같아요.

특히 이벤트에 굉장히 많은 콘텐츠가 들어있어 흥미로웠습니다. 그중 ‘2022 뷰티 리포트'를 살펴봤는데요. 스쉐에서 구매할 수 있는 뷰티 아이템을 초특가템/신상템/베스트템으로 나눠 상품을 보여주고 있어요. 또, 핵심 뷰티 카테고리에서 메이크업/스킨케어/셀프케어로 나눠 기능별 뷰티템도 추천하고 있습니다. 하단에는 스쉐러의 리뷰를 통해 서비스 이용에 참고할 만한 정보가 함께 제공되고 있습니다. 하나의 이벤트 콘텐츠에서 최대한 많은 상품을 노출하기에 좋은 전략이라고 생각합니다.

 

1-2. 오늘의 집

첨부 이미지

오늘의 집 알림 화면은 [마이페이지] 탭 안에 있는 스크랩북과 좋아요 버튼 옆에 위치해있어요. 알림과 이벤트 기능을 같은 화면에 넣어둔 것이 앞서 살펴본 스쉐와 비슷하죠? 오늘의 집 역시 알림과 혜택을 동시에 보여주고자 하는 의미로 해석할 수 있을 것 같아요. 좋은 혜택을 담은 이벤트로 구성돼 있거든요. 알림 화면은 현재 비어있는 상태인데요. 이 경우 이벤트 창을 먼저 보여주도록 해 최근 알림 소식이 없더라도 다양한 이벤트를 먼저 만나게 하거나, 빈 화면을 활용해 사용자가 받아볼 수 있는 알림 내용을 제공하는 것도 좋은 방법이 되지 않을까 싶습니다.

오늘의 집 이벤트 화면은 특이하게도 다채로운 컬러와 디자인이 돋보이는 배너 형식인데요. 가독성도 좋고 하나하나 클릭하고 싶게 만드는 UI가 인상적입니다. 오늘의 집은 유저들이 활발하게 올리는 콘텐츠가 활발한 서비스인만큼, 이벤트 공간 내에서도 참여를 유도하는 내용이 많아 흥미로웠습니다. 참여형 이벤트에 관심 많은 분들은 오늘의 집 알림 화면 페이지를 통해 많은 아이디어를 얻어 가실 수 있을 것 같아요!

 

1-3. 카카오뱅크 & 토스

첨부 이미지

카카오뱅크와 토스의 알림 화면은 매우 심플합니다. 먼저 카카오뱅크는 컬러, 이모지를 배제한 UI로, 주로 사용자의 활동에 기반한 ‘알림’들로 이뤄져 있어요. 최근 대출을 받은 사용자라면 대출 서류제출 완료부터 심사 완료, 약정내역 안내 등 사용자가 신청한 하나의 서비스를 A부터 Z까지 친절히 안내하는 모습입니다. (카카오뱅크 알림은 아래에서 더 자세히 보실 수 있어요!)

토스는 메인 컬러만 사용, 이모지는 최대한 배제한 모습입니다. 사용자의 활동(이미지에서는 비상금 기능 안내) 외 토스뱅크 대출 소식과 토스뱅크카드 혜택 변경 안내 등 토스에서 진행하는 다양한 서비스의 소식 전달을 주로 볼 수 있습니다. 서비스와 관련된 알림을 사용자가 찾지 않아도 친절히 알려주기 때문에 앱을 이용하기 더 편한 것 같아요.

(덧붙임 👻) 알림 화면에 이벤트 및 기타 서비스 정보를 알려주는 앱들을 살펴봤습니다! 주로 커머스 앱이 이벤트 기능과 상품 추천 기능을 활발하게 사용하는 것을 볼 수 있었고, 뱅킹 앱은 사용자의 활동 기반 알림은 물론 함께 보면 좋은 혜택, 서비스를 안내하는 모습을 볼 수 있었어요. 알림 화면에 이벤트를 함께 구성하면 확인 빈도에 따라 자주 들여다볼 수 있겠다는 생각이 들었습니다. (공지 영역 보다는 더더욱!) 앱의 특성에 따라 알림 화면을 어떻게 사용하는지 볼 수 있었던 좋은 시간이었습니다.

 

 

🐱 유형 2. 알림 화면에서 사용자의 행동을 이끌어 내거나 더 많은 정보를 확인할 수 있는 기회를 제공하는 경우


오늘은 두 가지 형태의 알림 화면을 소개하려 합니다. 하나는 알림 내 다음 행동을 유도하는 형태, 또 하나는 아코디언 UI를 활용해 상세 내용을 리스트에서 바로 볼 수 있는 형태입니다. 구성요소를 정리하다 보니 단순히 history 성의 알림뿐 아니라 서비스를 더 활발하게 사용할 수 있는 요소로 알림을 구성하고 있었어요.

 

2-1. 베베메모

첨부 이미지

베베메모는 아이 사진 아카이빙 서비스입니다. 가족, 친지들과 사진첩을 공유하며 아이의 사진을 타임라인 형태로 볼 수 있습니다. 사진을 공유하고 해당 사진에 반응하는 등 사용자 행동이 주된 기능이다 보니 알림 화면에서도 같은 활동 로그를 타임라인으로 제공하는 것이 눈에 띕니다.

(1) 내가 업로드한 사진을 하나의 묶음으로 인식해 전체 사진에 대해 좋아요 하거나 댓글을 달 수 있습니다. 물론 개별 사진에 대한 반응도 할 수 있지만 여러 장을 한 번에 올렸을 때 알림에서 바로 반응을 할 수 있어요. 재밌는 건 이렇게 한 번에 올린 사진에 좋아요를 해도 앨범에 대한 좋아요가 아니라 한 번에 업로드한 내역에 대한 좋아요로 표기 된다는 점입니다. 반면 댓글은 전체 사진첩에 등록됩니다. (2) 다른 사람이 올린 사진이 있을 땐 알림 하단에 [자세히 보기] 버튼이 생깁니다. 이 외엔 앞선 댓글과 모두 같아요. (3) 개별 영상을 탭 하더라도 다른 사람이 올린 같은 날 타임라인이 뜨며 댓글을 달 수 있습니다. 여기서 특정 영상에 댓글을 달고 72일차라는 큰 카테고리 앨범에 가면 댓글이 등록된 것을 알 수 있어요.

게시글 히스토리에서 반응을 바로 할 수 있는 점이 재밌기도 하고, 올라간 사진을 한 번씩 훑을 수 있어 좋았습니다. 무엇보다 최근에 등록된 콘텐츠가 무엇인지 확인함과 동시에 반응을 할 수 있다는 점이 좋았어요. 메인 타임라인은 큰 카테고리로 묶여있다 보니 상세로 진입하지 않으면 대표 3개 이미지만 보여주는데요. 알림에선 업로드한 이미지를 타임라인 순으로 보여줘 확인이 더 쉽게 느껴집니다.

(덧붙임 🐱) 베베메모는 육아 사진 공유에 최적화된 서비스입니다. 개별 사진에 대한 피드백, 한 번에 업로드한 이미지 묶음에 대한 피드백, 해당 일자의 이미지에 대한 피드백 등을 손쉽게 주고받을 수 있게 되어있습니다. 다만 알림에서 리스트 내에 반응을 하는 방법을 명확하게 안내하지 않는 점은 아쉬웠습니다. 저는 해당 앱에서 업로더 역할만 주로 하다 보니 알림 내 내가 올린 게시물에 대한 반응을 꼭 유도해야 하나?라는 의문도 들었습니다. 업로더에게는 상대방의 반응을, 사진을 보는 사람에게는 적극적인 피드백을 유도하는 방법이 더 좋지 않을까 싶네요.

 

2-2. 인스타그램

첨부 이미지

인스타그램은 알림에서 다양한 액션을 취할 수 있는 기능을 제공하고 있습니다. 알림이 하단 탭에 있진 않지만 메인 상단에서 알림 내역에 접근할 수 있어요. (1) 제공하는 기능은 크게 팔로우/ 댓글 하트/ 답글 달기(달고 나면 답글 보기)/ 메시지로 다양한 반응을 즉각적으로 할 수 있습니다. 팔로우 버튼을 탭 하면 상태가 [팔로잉]으로 변하며, 리스트 내 텍스트 영역을 탭하면 반응을 한 계정으로, 게시글 썸네일을 탭 하면 해당 게시 글로도 이동할 수 있습니다.

(2) 댓글에 대한 반응도 해당 영역에서 바로 소화 가능합니다. (3) 댓글에서 바로 답글 달기를 탭 하면 키보드와 함께 텍스트 입력창이 나옵니다. 답글을 달고 알림을 보면 [답글 달기]가 아닌 [답글 보기]로 변경됩니다. [답글 보기]를 탭 하면 해당 게시글 내 해당 답글 영역으로 이동합니다. 단순한 히스토리 성격의 리스트가 아닌 여러 액션을 즉각적으로 취할 수 있어 소통의 장벽을 더 줄여주는 포인트라고 생각됩니다.

(덧붙임 🐱) 인스타그램은 알림 영역에서 정말 많은 행동을 할 수 있어 편리하지만 한편으론 좁은 화면에 많은 기능이 있어 탭 할 때 다소 긴장하게 됩니다. 또 알림은 전체 활동 알림이 뜨는 것이 아니라 일정 영역을 넘으면 계정 추천 영역이 떠서 이전 내역은 더 이상 볼 수 없게 됩니다. 그래서 전체 활동 보다 최근 알림에 대한 반응을 하기에 적합하다는 생각이 듭니다.

이번엔 알림 상세 내역을 아코디언 UI로 제공해 화면페이지 이동을 최소화하는 알림 형태를 소개하겠습니다. 주로 알림 세부 내역이 많지 않을 때, 즉각적으로 알림 상태 변경을 확인할 경우 이와 같은 UI를 사용했습니다.

 

2-3. 배달의 민족

첨부 이미지

배달의 민족은 주문, 접수, 조리 중, 픽업, 배달 완료와 같이 주문 과정에서 알림을 보내고 확인해야 할 일이 많습니다. 물론 이런 상황에 따른 시각적인 알림은 다른 영역에서 실시간으로 볼 수 있어요. 알림 센터는 기본적으로 사용자 행동을 유도하는 알림을 최신순으로 보여주고 일정 시간이 지나거나 사용자가 행동을 하면 더 이상 보여주지 않습니다. 그래서 배달 후 리뷰를 바로 쓰면 알림 탭이 비어있는 경우가 종종 있어요. 그리고 그 아래 이전 알림 보기를 탭해 이전 내역을 확인할 수 있습니다.

(1)은 이전 알림 리스트를 보여주고 있어요. 알림은 배달 완료, 리뷰 요청으로 단순하게 나와있는데요. 사용자가 알아야 할 중요한 알림만 보여주는 모습입니다. 리스트에서 화살표를 눌러보겠습니다. (2)는 화살표를 눌렀을 때 열리는 내용입니다. 주문 접수시간이 나와있어요. 위에서 말한 주요 알림 내역이 시간과 함께 보입니다.

(덧붙임 🐱) 배달 서비스에서 가장 중요한 건 배달이 완료됐다는 내용이고, 매장 입장에서는 리뷰입니다. 그래서 두 리스트를 중요하게 보여주고 있으며 이 외 정보는 리스트 내 상세 내역으로 보여주고 있습니다. 만약 배달의 민족 알림에서 모든 스텝마다 알림이 동일한 UI로 보였다면 한번 주문할 때 5~6줄 이상의 정보가 보일 수밖에 없는데요. 이로 인해 이전 배달 리스트로 접근하려면 스크롤을 한참 내리고 그 주문에 해당하는 알림을 보기까지 꽤 많은 시간이 필요합니다. 사용자에게 중요한 알림을 선별해서 보여주는 것, 이 외에 정보는 축약해서 보여주는 등 정보 위계를 항상 고민하는 과정이 필요하다는 것을 잘 보여주는 사례라고 생각합니다.

 

2-4. 스타벅스

첨부 이미지

스타벅스는 알림 리스트에 주문 내역, 상태 표시, 선물 내역 등 앱에서 발생한 히스토리가 모두 등장합니다. (1) 알림 상단에 [전체]를 눌러 상세 내역을 볼 수 있게 설계한 것도 다양한 알림이 한 번에 나오기 때문입니다. 알림 리스트를 보면 어떤 건 화살표가 옆을 향하고 있고 어떤 건 아래를 향하고 있습니다. 옆을 보는 화살표는 페이지 이동, 아래를 향하는 화살표는 아코디언 UI 속 펼침 역할을 한다는 걸 알 수 있습니다. 아코디언 UI를 사용하는 부분은 앞서 설명한 배달의 민족처럼 주문 후 실제 제품을 수령하기까지의 상세 알림이 포함됩니다.

(2) 주문 접수, 접수 순서, 메뉴 픽업 요청 등이 상세 내역에 뜹니다. 물론 상세 내역이 뜬 리스트에 이미 사용자 행동을 유도하는 내용이 뜨기에 상세 내역에 있는 내용에 중복이 있어 굳이 있어야 하나 싶지만 주문 대기 중에 대기 순서를 알려주는 내역은 사용자 편의를 위해 보여주는 편이 좋다고 생각됩니다.

(덧붙임 🐱) 의아했던 점은 들었던 아코디언 UI를 열 순 있지만 닫을 수는 없다는 점이었습니다. 상세내역을 여는 순간 리스트 내 화살표 방향이 옆을 향하게 변해 주문 상세내역 페이지로 이동하게 됩니다. 그간 사용했던 아코디언 UI의 사용성과는 다소 달라 학습이 필요한 부분이었어요. 물론 한 두 번 사용하며 익숙해지면 편하지만 제가 경험한 모바일 사용과 달라 처음엔 헤맸던 기억이 납니다.

 

2-5. 카카오뱅크

첨부 이미지

카카오 뱅크의 알림은 아주 직관적으로 구성되어 있어요. (1) 리스트를 보면 통장이란 내역에 입금 금액과 입금 처가 뜨고 하단에 [더보기] 버튼이 있습니다. (2) 버튼을 탭 하면 리스트 하단에 상세 입금 내역이 뜹니다. 위에선 합계를 보여줬다면 상세내역에선 합계가 나온 부분 금액을 보여주고 있어요.

입금 관련 알림에서 좋은 점은 [접기] 버튼을 제공해 상세 내역을 사용자가 언제든 닫을 수 있다는 것을 안내하고 있다는 점입니다. 또 해당 리스트를 통장 내역에서 볼 수 있게 유도하는 것도 잊지 않고 있어요. 입금과 다르게 대출과 관련된 내역은 [대출]이라는 큰 상위 개념을 잡고 상세 내역으로 나오는 게 아닌 별도의 알림으로 제공됩니다.

대출 진행 결과 그 자체로 중요성이 높아 대출 심사 내 하단에 배치하지 않은 걸로 보여요. 서류 접수, 심사 완료, 약정 안내 등 모두 대출의 프로세스 중 일부이지만 그 프로세스 별로 사용자가 해야 하는 행동, 할 수 있는 행동이 다르기에 이와 같이 배열한 것으로 보입니다. 반면 통장 입금 내역에서 가장 중요한 정보는 총 입금 금액이지 상세 입금내역이 아니기에 더 중요한 정보에 집중, 궁금하면 상세내역을 바로 볼 수 있게 배치한 것이 아닐까 싶습니다.

(덧붙임 🐱) 주문 혹은 신청을 하고 그 과정을 알림으로 받는 세 서비스를 살펴봤는데 어떠셨나요? 각 서비스에서 사용자에게 알림을 보낼 때, 알림 구성이 다르고 주문에 따른 사용자 액션이 필요한 부분의 알림을 강조하는 걸 볼 수 있어요. 알림을 구성할 때 각 알림 별 위계를 설정하고 이를 보여줄 수 있는 고민이 필요하다고 생각됩니다.

 

 

🐥 유형 3. 알림의 ‘성격’에 따라 탭을 구분하는 경우


최근 알림의 종류에 따라 탭으로 구분, 알림을 제공하는 경우가 많이 보이고 있어요. 화면을 살펴보기 전 알림 설계 과정에서의 종류를 먼저 살펴볼게요.

  1. 액션에 따른 알림 Ex. 팔로우, 좋아요, 주문 상태, 상품문의 답변 등등
  2. 시스템에 대한 알림 Ex. 쿠폰 알림, 이벤트 알림, 앱 진입 유도 알림 등등

크게는 사용자의 행동에 따라 발송되는 알림이 있고, 다른 알림은 운영자가 의도적으로 사용자의 리텐션을 올리거나 구매율을 올리기 위한 운영상의 알림으로 구분할 수 있어요. 우리 모두 의미 없는 푸시 알림에 앱을 삭제해본 경험이 있잖아요? 때문에 필요한 사용자에게 이 알림이 왜 필요한지, 과연 이 알림을 받는 것이 타당한지 충분한 고민이 필요합니다. 최근에는 2가지 종류의 알림을 사용자의 필요에 따라 살펴볼 수 있도록 탭으로 구분해서 제공되는 형태가 많아지고 있는데요. 서비스별 알림의 종류를 어떻게 구분하고 포인트를 주고 있는지 살펴보도록 할게요.

 

3-1. 에이블리

첨부 이미지

에이블리는 커머스의 정석답게 총 3개의 탭으로 알림을 구분합니다.

  • 주문/문의 : 개별 사용자가 직접 주문한 내역과 문의에 대한 후속 알림
  • 혜택 : 개별 사용자에 따른 쿠폰 혹은 혜택 정보와 만료에 대한 알림
  • 이벤트 : 전체 사용자를 대상으로 운영되는 이벤트 안내

각각의 알림은 사용자에게 바라는 기대치가 조금씩 다른데요. 우선 (1) 주문/문의 내용은 사용자에게 배송 과정을 알려주는 편의를 제공하는데 집중 되어 있습니다. 잠시 후 살펴볼 쿠팡은 주문/배송 탭이 뒤에 있어 아쉬웠던 반면, 에이블리는 가장 필요한 정보가 무엇인지 파악, 주문/문의 내용을 먼저 확인할 수 있도록 제공합니다. 주문 완료는 주문/문의 내역에서 보이지 않는데요. 종종 다른 서비스에서는 주문 완료도 알림으로 제공하지만, 사실 주문 직후는 상태를 알려주지 않아도 충분히 인지될 수 있기 때문에 주문 완료를 제외하고 그 외 배송 시작과 배송 완료 등의 알림만 안내해주는 것이 적당하다는 생각이 듭니다.

(2) 쿠폰 만료 시간 안내를 통해 구매를 유도하는 두 번째 혜택 탭은 “[쿠폰명(가변)] 쿠폰이 24시간 내로 만료됩니다” 라는 공통 포맷을 기준으로 알림을 발송하고 있어요. 쿠폰 만료 시간으로부터 24시간 전에 자동으로 발송되도록 설계가 되어있는데, 개인적으로 대부분의 쿠폰명에 이모지를 활용하는 쇼핑몰이 많아서 24시간 내로 만료된다는 중요한 텍스트가 눈에 띄지 않는 점이 아쉬웠어요. 하지만 이벤트와 혜택을 명확하게 구분해서 내가 놓치는 혜택을 별도로 모아 볼 수 있는 점은 좋았습니다.

(3) 이벤트 탭에서는 직전의 혜택 탭과 달리 ‘쿠폰’이란 구분값 없이 타이틀과 설명으로 운영되고 있어요. 이 화면에서 주목할 포인트는 읽지 않은 알림에 대한 백그라운드 컬러를 다르게 보여줘서 새로운 알림을 강조하는 걸 확인할 수 있는데요. 더불어 읽지 않은 알림이 있을 경우에는 탭에 * 표시를 통해 사용자가 접근할 수 있도록 디자인 포인트를 주는 점이 참고하기 좋은 기준이었습니다.

 

3-2. 쿠팡

첨부 이미지

쿠팡은 총 6개의 탭으로 알림이 구분되어 있어요. 정확히는 1개의 전체 탭과 세부적인 항목 5개로 구성되어 있는데, 첫인상은 ‘복잡하다’였습니다. 특히 (1)알림 내용이 간략하지 않고 긴 텍스트와 각각의 버튼이 강조되어 알림 내용 간 구분이 어려웠습니다. 알림의 타이틀을 강조하는 만큼 본문 내용을 간소화한다면 전달력이 더 좋아지지 않을까 싶습니다. 특히 본문을 간소화하면, 타이틀 옆에 표기되는 시간을 하단으로 내리고, 타이틀 영역을 가로로 길게 활용할 수 있을 것 같아요.

이 복잡한 알림 종류들을 쿠팡은 (2)아이콘 혹은 썸네일로 구분을 두고 있어요. 원형 아이콘을 통해 직관적으로 할인인지, 어떤 상품인지 한눈에 살펴볼 수 있는 건 좋았습니다. 다만 (1)번에서 살펴본 내용과 동일하게, 알림 구분을 위한 썸네일이 다양하게 들어가는 만큼 가독성을 위해서는 리스트의 다른 포인트 디자인은 조금 줄어야 할 것 같다는 공통적인 아쉬움이 있습니다.

 

3-3. 크로켓, 샵백

첨부 이미지

크로켓과 샵백도 쿠팡과 유사하게 알림의 다양한 종류를 함께 살펴볼 수 있는 전체 리스트가 존재합니다. 두 알림 화면의 구성 차이를 보면, 크로켓은 알림마다 (1) 하나의 카드, 상하좌우에 마진이 있는 형태로 클릭하면 상세 화면으로 넘어갈 것 같은 경험을 주고 있어요. 타이틀이 길어 말줄임이 적용되어도 상세 내용이 있다는 것을 쉽게 알 수 있습니다. 카드 UI를 자주 경험했기 때문인데요.

샵백은 (2) 행의 형태로 좌우가 꽉 차있는 리스트로 구성되어 있고 읽지 않은 알림에 컬러 배경을 둬 탭이 된다는 것을 강조하고 있어요. 반면 ‘받은 메시지를 확인해보세요’ 알림은 상세로 이동하지 않는 알림인 만큼 ‘확인’이라는 텍스트 버튼을 배치해서 그 위치에서 쉽게 닫을 수 있는 편의를 제공합니다.

(덧붙임 🐥) 이처럼 디자인의 사소한 차이가 사용자의 다음 액션을 유도하는 힌트가 되기도 합니다. 특히 카드 UI는 팝업과 일반적인 피드에서 상세 페이지로 진입하는 경험을 많이 하기 때문에, 연결성을 강조하기 좋은데요. 리스트 형태로 제공할 때는 배경색 구분을 둬서 클릭이나 읽은 상태를 시각적으로 강조하거나 ’자세히 보러 가기’, ‘확인’, ‘'’ 등의 텍스트를 함께 배치해서 다음 액션까지 연결하는 것이 좋습니다.

 

 

🐳 유형 4. 알림 화면 내 알림 설정 기능을 제공하는 경우


알림 화면은 기본적으로 사용자가 활동한 내용이나, 서비스에서 제공하는 다양한 정보(광고 포함)가 모이는 공간이에요. 앞서 살펴본 것처럼 알림 화면이 제공되는 정보에 따라 탭으로 구분되는 것 역시 이전 대비 더 다채로운 내용이 제공되어 구분이 필요해졌기 때문입니다. 이와 더불어 최근 눈에 띄는 변화가 있다면, 알림 설정을 서비스 설정 메뉴가 아닌, 알림 화면에서 제공하는 경우입니다. 서비스는 왜 알림 화면에서 사용자가 알림에 대한 ‘설정'을 할 수 있는 편의를 제공하는지 블라인드, 마이리얼트립, 네이버 포스트, 레딧 그리고 기타 참고 사례를 통해 살펴볼게요.

 

4-1. 블라인드

첨부 이미지

블라인드 알림의 많은 부분을 차지하는 건, 개인이 작성한 게시글이나 댓글 등에 대한 반응 그리고 관심 토픽에 대한 베스트 글 안내입니다. 저도 주로 이 내용을 알림으로 받아보고 있어요. 각 알림은 게시글 제목은 물론, 어떤 토픽에 포함된 내용인지와 발행 시기를 함께 안내해줍니다. 다른 이야기지만, 알림 화면에는 성격이 다른 여러 유형의 메시지가 쌓이기 때문에 사용자가 각 내용을 어려움 없이 구분할 수 있는 환경을 제공할 수 있어야 합니다. 알림을 보는 것도 중요하지만, 특정 알림을 선택해 해당 화면으로 이동하는 흐름 역시 중요하기 때문입니다. 이런 연결이 계속 이어질 경우, 사용자는 그 서비스의 알림을 스팸이라 생각하지 않고 필요한 정보로 받아들일 수 있어요.

(1) 블라인드 알림 화면에서 눈에 띄는 건, 오른쪽 위에 위치하고 있는 ‘설정' 아이콘입니다. 모두 읽기, 삭제 등은 오래전부터 봐온 기능이지만 ‘설정’은 요즘들어 자주 보이는 기능입니다. (2) 알림과 관련된 설정을 바로 진행할 수 있도록 설정 아이콘을 선택하면 관련 화면으로 이동할 수 있습니다. 재밌는 건, 이 화면이 (3) 서비스 설정 화면에서도 만나볼 수 있는 화면이라는 점입니다. 설정 화면에서도 만나볼 수 있는 화면을, 알림 화면에서도 바로 이동할 수 있는 역할로 활용하는 모습입니다.

블라인드 알림 설정은 전체 알림을 온, 오프 할 수 있는 것으로 시작해 4가지 세부 항목을 각각 설정할 수 있게끔 구성되어 있습니다. 전체 알림에 대한 설정과 전체 알림이 켜 있는 경우 선택 가능한 세분화된 알림을 나눠 설정 과정이 어렵지 않게 느껴집니다. 세분화된 알림의 수 역시 많지 않아 어떤 기능에 따라 알림을 받을 수 있는지 쉽게 파악할 수 있다는 점도 좋습니다. 알림 화면 내 설정 화면을 제공할 경우, 알림을 쉽게 끌 수 있다는 단점도 있지만 알림 화면을 처음 접하는 상황(빈 화면)과 엮을 경우 사용자가 받아볼 수 있는 주요 알림에 대해 충분히 설명할 수 있다는 점에서 좋은 기회가 될 수도 있다는 생각이 듭니다.

(덧붙임 🐳) 우리가 ‘알림이 스팸이 되지 않는 방법’에서 살펴봤던 것처럼 알림을 세분화하고, 각각에 대한 구체적인 정보를 제공해주는 것은 좋지만 너무 잘게 나눌 경우 모두 확인하는데 어려움을 겪을 수 있습니다. 어떤 앱은 개별 설정 가능한 알림이 총 12개나 되어 중간 정도까지 확인 후, 모든 알림을 끌까?라는 생각까지 한 적이 있는데요. 때문에 행동에 따른 알림을 일부 그룹화하거나 여러 곳에서 사용되는 ‘공통 기능'으로 묶어 알림 설정을 제공하는 것이 좋습니다. 예를 들어 게시글 등록은 여러 화면에서 가능하지만, 각 화면 단위로 알림을 설정하게 하는 것이 아닌, 게시글 작성이라는 행동 자체에 초점을 맞춰 설정 가능하게 하는 방법입니다. 블라인드는 설정 화면으로 바로 이어지는 것도 좋지만, 서비스 내 주요 행동에 따라 4개로 세분화된 알림이 적당하다는 생각이 들었습니다.

 

첨부 이미지

레딧 역시 설정 화면을 통해 ‘알림 설정'화면으로 진입할 수 있지만, 알림이 지나치게 세분화 되어 있어 각 내용을 파악하기 어렵다는 단점을 갖고 있습니다. 오늘의 집 역시 초기에는 많은 알림을 레딧과 같이 설정하게 되어 있었는데요. 유사한 알림끼리 묶거나 통합하는 과정을 통해 현재는 간소화 된 모습을 보여주고 있습니다. (💡 오늘의집은 왜 알림 설정 화면을 개선했을까?)

 

4-2. 마이리얼트립

첨부 이미지

(1) 마이리얼트립 역시 알림 화면 내 ‘설정 기능'을 제공합니다. ‘알림 설정'이라는 텍스트가 버튼 형태로 적용되어 있어 선택 시 알림 설정 화면으로 바로 이동할 수 있습니다. (3) 이들 역시 설정 화면에 ‘알림 설정' 메뉴를 제공하고 있지만, 편의를 위해 알림 화면에서도 바로 이동할 수 있는 기회를 제공합니다. 마이리얼트립의 알림은 예약 관련 내용에 초점이 맞춰져 있는데요. ‘예약' 등 알림의 성격을 먼저 확인한 뒤, 알림 상세 내용과 발행일을 볼 수 있습니다.

알림이 일정 기능에 쏠려 있어, (2) 설정 화면 역시 간단히 구성된 모습입니다. 알림 = 예약 관련 정보로 대표되어 알림을 끈다는 것은 예약 관련 정보를 받지 않는 의미가 됩니다. 대신, 마케팅 정보를 어떤 채널로 받을 것인지를 세부적으로 설정할 수 있습니다. 현재 이메일/SMS/앱 푸시 등으로 나뉘어 있으며, 마케팅 수신 동의에 대한 수정 시점도 함께 제공합니다.

 

 

4-3. 네이버 포스트

첨부 이미지

(1) 네이버 포스트도 알림 화면 내 ‘설정 기능'을 제공합니다. 알림을 삭제할 수 있는 휴지통 버튼과 공식 채널 소식을 접할 수 있는 (이동할 수 있는) ‘포스트 소식'버튼도 포함된 모습입니다. ‘알림'의 의미를 어디까지 포함시킬 수 있는지 확인할 수 있는 사례이기도 한데, 사용자 개개인의 활동에 대한 안내는 물론 서비스에서 제공하는 주요 정보 역시 알림의 범위에 포함시키고 있기 때문입니다. 다만, 공지 등의 내용을 알림에 포함할 경우 내용이 섞일 수 있어 공식 채널로 이동 가능한 버튼으로 타협한 결과가 현재의 모습이 된 것 같습니다.

(2) 알림 설정은 블라인드와 유사합니다. 알림 전체를 끄거나 켤 수 있는 내용이 가장 먼저 보이며, 알림을 끌 경우 세부 항목은 모두 비활성화 되어 볼 수 없습니다. 포스트는 꽤 따양한 세부 알림을 제공하는데 재밌는 건, 토글이 아닌 체크박스 형태로 적용되어 있다는 점입니다. 아쉬운 점은 각 세부 알림에 대한 설명이 없어 일부는 제공되는 내용으로 충분히 파악하기 어렵다는 점입니다. 한줄 정도로 해당 알림이 어떤 역할을 하는지 설명해준다면 설정 화면을 통해 알림에 대해 더 구체적인 내용을 알고 설정에 참여할 수 있지 않을까 싶습니다.

 

첨부 이미지

당근마켓과 요기요, 리멤버 등은 알림 설정 화면 내, 각 알림에 대해 간략한 설명을 함께 제공합니다. 이미 서비스에 익숙한 사용자라면 모든 내용을 쉽게 이해할 수 있지만, 초기 사용자의 경우 아직 기능에 익숙하지 않은 상태라, 기능과 밀접하게 연결된 알림의 경우 간략한 설명을 통해 이해를 도울 수 있다고 생각합니다.

(덧붙임 🐳) 보통 알림을 세분화해 제공하는 경우 두 가지 방법을 활용하게 됩니다. 하나는 세분화된 알림과 별개로 전체를 끄거나 켤 수 있는 옵션을 제공하는 경우이며, 또 하나는 세분화된 알림을 하나씩 끄거나 켤 수 있는 방법입니다. 블라인드와 네이버는 모두 전자의 방법을 제공하고 있는데, 이 방법은 사용자에겐 한 번에 알림을 해제할 수 있다는 점에서 좋은 편의를 제공하지만, 서비스 입장에서는 어떤 알림이 제공되는지 알림을 켜기 전에는 다시 안내할 수 없다는 점에서 단점으로 느껴지기도 합니다. 이럴 땐, 전체 알림을 끈 경우라도 세분화된 알림을 오프 된 상태로 확인할 수 있는 방법을 고려해볼 수 있습니다. (아래의 잡플래닛 이미지를 참고해주세요.) 설정 화면으로 진입 시, 어떤 알림을 받아볼 수 있는지 다시 확인할 수 있는 기회로 활용할 수 있기 때문입니다.

 

첨부 이미지

 

 

👀 알림 기능 관련 함께 읽어보면 좋은 내용


 

 

🐳 눈에 띄는 서비스


이번 뉴스레터부터 팁스터 에디터가 한 번씩 눈에 띄는 서비스를 소개할 예정입니다. 첫 주자는 에디터 🐳 입니다.  

 

첨부 이미지

제가 소개할 서비스는 'Pachino'입니다. 화면을 통해 이미 눈치채신 분도 있겠지만, 이 서비스는 뽀모도로 타이머를 제공합니다. 참고로 뽀모도로는 이탈리아어로 토마토를 뜻하기도 해요. 프란체스코 시릴로가 제안한 시간 관리 방법 중 하나인 뽀모도로는 25분 작업 후 5분 휴식시간을 활용하게 됩니다. 무엇을 할 것인지 정리하고, 타이머를 25분으로 설정해 일을 시작한 뒤 타이머가 울리면 5분간 휴식을 취한 뒤 다시 같은 시간을 반복하게 되는데요.

'Pachino'는 일일 목표 및 해야 할 일을 관리하는 것으로 시작, 각 할 일을 뽀모도로 타이머로 활용할 수 있는 기능을 제공합니다. 몇 개의 뽀모도로를 진행해 목표에 얼마나 가까워졌는지 단순하지만 직관적인 디자인으로 확인할 수 있어요. 게다가 배경 음악을 제공해 더 집중할 수 있는 환경을 제공해줍니다. (구독 시, 더 다양한 배경 소리를 들을 수 있어요) 뽀모도로 타이머는 꽤 많이 나와있지만, 가장 핵심에 가까운 서비스라 더 좋았어요! iOS15 버전 이상이어야 다운로드 가능합니다 ☺️

 

Pachino iOS 앱 다운로드

 

 

📮 팁스터 다음 주제는?


구독자님, 이번 내용, 흥미롭게 읽으셨나요? 아래 피드백 링크를 통해 어떻게 보셨는지, 의견도 남겨주세요! 팁스터 다음 주제는 '쿠폰 화면'입니다. 쿠폰 화면에서 중요하게 살펴봐야 할 내용은 무엇인지 화면 구성 방법(유형)에 따라 자세히 살펴볼 예정입니다. 다음 뉴스레터는 2월 3일 목요일 오전 8시 발행 예정입니다.

다음주 목요일에는 불편함이 낳은 UX - 리스트 편(이 내용은 무료로 제공됩니다!)이 발행될 예정이며, 2월 8월에는 서비스를 만드는 사람들 - 플레이오 PO 편이 발행될 예정입니다 😀

 

첨부 이미지

 


팁스터 뉴스레터의 공식 오픈채팅방에 참여해보세요!

 

팁스터 뉴스레터에서는 프로덕트와 관련된 다양한 주제의 콘텐츠를 발행하고 있어요!

 

멤버십 콘텐츠 중 '캠핑'편은 무료로 체험하실 수 있어요!

 

첨부 이미지

다가올 뉴스레터가 궁금하신가요?

지금 구독해서 새로운 레터를 받아보세요

이번 뉴스레터 어떠셨나요?

팁스터 님에게 ☕️ 커피와 ✉️ 쪽지를 보내보세요!

댓글

의견을 남겨주세요

확인
의견이 있으신가요? 제일 먼저 댓글을 달아보세요 !
© 2024 팁스터

프로덕트와 관련된 다양한 주제의 콘텐츠를 발행합니다. 구독하기를 클릭하시면 발행 내용을 더 자세히 확인하실 수 있어요.😉 (팁스터란 정보 제공자라는 의미를 갖고 있으며, 앞으로 더 다양하고 알찬 정보를 전하고자 하는 마음과 의지가 담겨있어요.) 📮 광고 및 제휴 문의 : https://tally.so/r/mYoG6v

뉴스레터 문의tipsternewsletter.ad@gmail.com

메일리 로고

자주 묻는 질문 서비스 소개서 오류 및 기능 관련 제보

서비스 이용 문의admin@team.maily.so

메일리 사업자 정보

메일리 (대표자: 이한결) | 사업자번호: 717-47-00705 | 서울 서초구 강남대로53길 8, 8층 11-7호

이용약관 | 개인정보처리방침 | 정기결제 이용약관 | 라이선스