팝업 화면 어떻게 구성할까?

10분

2021.01.08.

3.7K

WHY : 팝업 화면, 왜 중요할까요?

(에디터, 재그마스터의 덧붙임) 좋은 의미로는 사용자가 잘 알지 못하는 내용을 시의 적절하게 제공해주는 역할을 하지만, 때로는 스팸처럼 귀찮게 느껴지는 서비스 구성 요소가 바로 '팝업'인데요. 서비스 입장에서 생각해보면 '강제로' 1회 이상 보게 할 수 있는, 중요한 메시지를 전달하는데 있어 꼭 필요한 장치입니다. 오늘은, 모바일 앱을 기준으로 서비스들이 팝업을 어떻게 활용하는지 몇 가지 구분에 따라 사례를 정리하려고 합니다. (에디터, 동동의 덧붙임) 담당했던 프로덕트 중 팝업이 메인 홈 화면인 것처럼 정보를 제공하던 사례가 있어요. 서비스가 사용자에게 표현하는 방식과 정보에 따라 팝업은 스팸이기도, 중요 정보를 제공해주는 화면이 될 수도 있습니다. 실제 제가 담당했던 서비스 팝업을 쉽게 끌 수 있는 구조로 변경한 뒤 사용자들의 재방문율이 뚝 떨어진 경험이..! 이 경험을 토대로 팝업 사례들을 하나씩 뜯어볼게요!

사례 : 팝업 구성에 꼭 알아야 할 4가지 사례

1. 앱 실행 시, 정중앙에 배치되는 팝업 메가박스, 카카오헤어샵, 야놀자, 텐바이텐, 라이프플러스, 인터파크 투어, 브랜디 2. 앱 실행 시, 바텀시트 형태로 노출되는 팝업 CGV, 데일리호텔, 트리플 3. 앱 실행 시, 전면으로 노출되는 팝업 오늘의 집, 리멤버, 망고플레이트, 아이디어스, 네이버 웹툰, 티몬 4. 앱 실행 후, 특정 시점에 등장하는 팝업 잡플래닛, 요기요, 카카오T

1. 앱 실행 시, 정중앙에 배치되는 팝업

메가박스, 카카오 헤어샵, 야놀자

가장 기본적인 노출 시점, 위치인 것 같아요. 앱을 실행, 스플래시를 지나 각 서비스 메인 화면에 진입하는 순간! 시선이 쏠리는 가운데 영역에 배치하는 방법입니다. 팝업에 더 집중할 수 있도록 화면은 상대적으로 어둡게 처리 합니다. 최근엔 바텀 시트 형태로 팝업을 변형해 활용하는 경우도 많지만, 아직은 위와 같은 방법을 더 자주 볼 수 있기도 하죠. 그럼, 세 서비스의 최근 팝업을 조금 더 자세히 들여다 볼까요? 메가박스 : 국내 최초 돌비 시네마 개관 기념 기획전 안내 카카오헤어샵 : 4주년 기념 헤스널리티(?) 찾기 야놀자 : 경상남도 국내 여행 초특가 안내 내용이 조금씩 다를 뿐, 역시 팝업에는 '이벤트' 성격이 담긴 내용을 활용하는 경우가 많네요. 돌비 시네마! 참 좋은 내용인데 팝업의 전반적인 분위기와 기존 화면이 잘 구분 되지 않아 오히려 '하루동안 보지 않기'가 더 눈에 띄는 모습입니다. 학습이 되어 있다고 판단했을 수 있지만, 팝업 내 별도 행동을 이끌어 내는 장치가 없는 점도 아쉬운 부분. 반면 야놀자는 여행하면 가장 먼저 연상되는 이미지 중 하나인 '지도'를 팝업 내 활용했을 뿐만 아니라 파란색 계열과 붉은색 계열의 대비 되는 컬러를 활용해 강조하고자 하는 부분이 눈에 잘 들어오네요. 왼쪽 상단의 타이틀과 오른쪽 중앙의 깃발 내 포함된 혜택 그리고 하단 중앙에 있는 예약하러 가기 라는 행동 유도까지! (에디터, 재그마스터의 덧붙임) 이 정도면, 사용자들이 알지 않을까? 팝업을 탭 하면 관련 화면으로 넘어 간다는 사실을 모르겠어? 모르진 않아요. 문제는 순식간에 팝업을 닫아 버릴 수 있다는 점이죠. 이번 주말 어디로 놀러가지? 라는 생각으로 야놀자 앱을 실행했는데 팝업에 경상남도 - 3만원 선착순 할인! 이라는 정보를 보고 예약하러 가기 버튼까지 이어진다면 충분히 눌러봐야지! 라는 생각을 하게 되지 않을까요? 특정 행동을 유도하는 버튼과 문구는 사용자에게 다음 행동을 유도할 수 있는 중요한 '트리거'가 될 수 있어요.

텐바이텐, 라이프 플러스, 인터파크 투어

텐바이텐 : BC 카드 할인 혜택, 최대 5,000원 즉시 할인! 확인하러 가기 라이프 플러스 : 홈캉스 대 바캉스 이벤트 인터파크 투어 : 무더위를 피해 떠나는 쿨캉스 위~크 자세히 보기 라이프 플러스는 메가박스와 같은 맥락의 오류가 있어요. 파도 이미지에 태그를 넣었는데, 해당 태그 컬러가 묻혀 잘 보이지 않습니다. 또 홈캉스 대 바캉스 이벤트가 어떤 이벤트인지 팝업을 통해 정확히 알 수 없다는 점도 아쉬운 점. 조건을 다 따져보면 결국 그만큼 할인 받을 수 없다는 걸 알지만 오히려 텐바이텐의 팝업 배경 컬러와 텍스트 컬러가 눈에 훨씬 잘 들어옵니다. (에디터, 재그마스터의 덧붙임) 팝업을 구성할 때 가장 먼저 고민했던 건 '문구'였어요. 1안만 준비해서 이렇게 해보죠! 라고 제안하지 않고 1-3안을 만들어 공유, 팀원들의 피드백을 받아 선정하고 반영했었는데요. 팝업의 디자인도 물론 중요하지만, 그 안에 담긴 메시지가 사용자로 하여금 충분히 이해할 수 있고, 혜택이라고 받아들일 수 있는지를 결정하기 때문입니다.

브랜디

브랜디 사례도 함께 살펴볼게요! 두 팝업은 담은 내용과 노출 시기가 모두 다릅니다. 왼쪽은 쿠폰 이벤트 안내로 사용자들의 구매를 유도하는 팝업이고요. 오른쪽은 알림 수신 상태를 변경하는 내용으로 팝업을 닫으면 7일 동안 비활성화 상태가 됩니다. 그런데 2개의 팝업이 연달아 나타납니다. 쿠폰 안내 팝업을 닫고 바로 알림 수신설정 팝업이 뜨는데요. 사용자는 각기 다른 팝업을 두 번 닫는 피로감을 느끼죠. 최초 설정 시에 노출된다 하더라도 이런 타이밍도 매우 중요합니다! 사용자는 그런 상황을 고려하지 않기 때문이죠. 사용자의 팝업에 대한 피로도는 다음 팝업에 대한 신뢰도와 직결하게 됩니다. 그러니 팝업이 떠있는 시기동안 다른 요소의 피로도가 없는지 꼭 체크하고, 겹치는 내용이 없는지 다시 한번 체크하는걸 추천드려요! (에디터, 동동의 덧붙임) 팝업과 유사하게 알림과 푸시 또한 사용자의 피로도를 꼭 체크해주세요. 시스템 설정이 연달아 표기되지 않는지 혹은 푸시를 통해 앱에 진입했는데, 푸시에서 알려준 내용이 아닌 메인 화면으로 랜딩되어 사용자가 푸시 + 팝업을 봐야하는 상황은 아닌지! 이런 설정이 사용자 친화적인 서비스로의 시작이라고 할 수 있죠

2. 앱 실행 시, 바텀시트 형태로 노출되는 팝업

CGV, 데일리호텔, 트리플

어느 순간부터 자주 보이기 시작한 팝업 형태 중 하나에요. 바텀 시트 형태로 팝업을 띄우는 방법입니다. 팝업 뿐만 아니라 화면 전환 없이 별도 화면 역할로 최근 많이 사용 되는 방법입니다. 카카오페이는 바텀 시트를 적극 활용한 앱이기도 하죠. CGV : 도전 N차 챌린지 : 관람관 성격에 따라 3가지 이상 관람 시 최대 2천만 포인트 증정 데일리호텔 : 롯데 시티호텔 특가, 특가 확인하기 트리플 : 떠나요 강릉, 속초 여름 호캉스 보내드려요 이벤트 자세히 보기 데일리 호텔은 '특가 확인하기' 라는 버튼을 서비스 메인 컬러를 활용해 눈에 띄게 배치한 점이 좋았습니다. 예약하기 등이 아니라 문구 내 '특가'라는 표현이 들어간 점도! 트리플은 이벤트용 이미지를 참 잘 만든다는 생각이 듭니다. 파라솔 옆에 이벤트를 붙여 놓으니 룰렛 처럼 보이기도! 문구를 많이 사용하지 않고도 어떤 이벤트가 진행 중인지 확인 할 수 있습니다. 자세히 보기 라는 버튼도 빼놓지 않았네요. CGV는 영화의 성격을 살리기 위해 레드 계열의 컬러를 쓴 것 같은데..역시 눈에 잘 들어 오지 않네요. 어디에 강조를 하고 있는지도 잘 모르겠습니다. (에디터, 재그마스터의 덧붙임) 데일리 호텔 사례를 보면 롯데 시티호텔 - 이미지 - 가격 - 특가 확인이라는 흐름이 눈에 잘 들어와요. 트리플 역시 강릉,속초 - 호캉스 보내줌 - 자세히 보기로 잘 이어집니다. 카드 UI를 구성할 때를 생각해 보면, 우리는 일반적으로 대표 이미지 하나와 상세 화면 내 포함된 정보들 중 우선 순위를 매겨 하나의 카드 단위를 구성하게 됩니다. 커머스 라면 제품 대표 이미지와 가격, 제품명, 세일 중 등 현재 상태 등으로 말이죠. 팝업도 동일하다고 생각해요. 어떤 정보를 전달하고자 만들어졌으며, 강조해야 하는 부분이 무엇인지, 나열된 정보들이 하나의 흐름으로 잘 이어지는지 꼭 확인해봐야 합니다.

3. 앱 실행 시, 전면으로 노출되는 팝업

오늘의 집, 리멤버, 망고 플레이트

예전 만큼 맛집 업데이트가 잘 되지 않아 안타까운 망고 플레이트. 여전히 집안 곳곳을 채우기 위해 사용 중인 오늘의 집. 명함 관리 보다 이직을 준비하며 더 자주 들어갔던 리멤버까지. 이들은 모두 화면 일부를 활용하지 않고 화면 전체를 덧씌우는 '전면 팝업'을 활용하고 있습니다. 오늘의 집 : 오늘만 이 가격, 오늘의 딜 ~92%, 최저가 구매하기 리멤버 : "회원명" 님께 추천하는 게시글, 게시글 요약, 게시글 보러가기 망고 플레이트 : EAT딜 쓰기 좋은 날, 최대70프로할인, 맛집 할인받기 전면 팝업의 경우 더 강한 '강제성'을 띄고 있어요. 아무래도 전체 화면에 이벤트 등의 내용을 꾹꾹 눌러 담았으니 (잘 구성했다는 전제하에) 화면 하단에 배치된 '닫기'를 누르기 위해서는 내용을 쓱- 훑을 수 밖에 없기 때문. 오늘의 집과 망고 플레이트는 모두 최대 할인폭을 내용에 포함시키고 있는데요. 오늘의 집은 ~92%와 최저가 구매하기를 같은 강조값으로 지정해 눈에 잘 들어오는데 비해 망고플레이는 타이틀과 동일한 컬러에 태그처럼 배치해 눈에 잘 들어오지 않습니다. 게다가 이미지가 꽤 밝은데, 덧씌워진 폰트 컬러 역시 비슷한 밝기라는 점도 아쉬운 점. (에디터, 재그마스터의 덧붙임) 꼭 팝업에만 해당 되는 내용은 아니지만, 사용자 개개인의 이름 또는 닉네임을 덧붙여 너만을 위한거야! 라는 느낌을 주는 건 여전히 유효하다고 생각해요. zagmaster님에게 도움이 되는 정보! 회원님에게 도움이 되는 정보! 어느 쪽이 더 친근하게 다가오는지 우린 금방 판단할 수 있지 않을까요? 특히 '추천'이라는 이름으로 보여지는 내용이라면 더더욱! 제가 리멤버에 들어갈 때마다 팝업을 닫지 않고 게시글을 자주 보러가는 것도 같은 이유입니다. (물론 추천이 잘 되고 있어서 더 그렇겠지만!)

아이디어스, 네이버 웹툰, 티몬

전면 팝업 중 애니메이션이 들어간 형태도 만나볼 수 있어요. 텀블벅을 인수해 화제가 된 아이디어스, 글로벌 확장에 집중하는 네이버 웹툰 그리고 타임 어택 컨셉의 티몬. 모두 전면 팝업을 변형한 사례입니다. 아이디어스 : 할인 종료 시간까지 남은 시간을 실시간으로 표기 네이버 웹툰 : 상하 스크롤로 하단 여백에 더 많은 내용 표기 가능 티몬 : 좌우 스크롤로 더 많은 지면을 확보해서 더 많은 정보를 제공 전면 팝업은 큰 영역에 내용을 담을 수 있지만, 너무 많은 디자인 요소와 내용이 들어가면 전달력이 많이 떨어집니다. 그래서 많은 내용을 담고 싶을 때는 스크롤로 페이지를 분할하는 방법을 추천합니다.

4. 앱 실행 후, 특정 시점에 등장하는 팝업

잡플래닛, 요기요, 카카오T

이 통계를 낼 수 있을까 싶긴 하지만, 팝업은 아무래도 앱 실행 시 가장 많이 노출 될 거라 생각해요. 아무래도 앱을 열심히 쓰고 있는 순간에 귀찮은 팝업을 만나는 것 보다 첫 실행 시 노출 시키는 것이 심리적으로 덜 부담스럽기 때문인데요. 팝업의 역할이 꼭 이벤트 등에 쏠려 있는 것은 아니기에 위와 같이 특정 '시점'을 공략하는 사례도 있습니다. 잡플래닛 : 채용 탭 진입 시 노출 되는 팝업이에요. 구직 의향 등을 설정할 수 있도록 유도합니다. 요기요 : 주문 내역 탭 진입 시 노출됩니다. 특정 결제 수단 활용 시 할인 받을 수 있는 쿠폰을 제공합니다. 카카오T : 코로나로 인해 해외여행이 거의 불가능. 국내가 아닌 해외여행 - 택시 호출 탭 진입 시 안내를 제공합니다. 재밌는 건 요기요의 사례입니다. 왜 주문 시점이 아니라 주문 내역 탭이었을까? 라는 질문이 생겼기 때문인데요. 우리가 주문 내역 탭을 들어가는 건 크게 2가지 상황에서 시작되는 것 같아요. 첫째, 주문 완료 후 주문 현황을 보기 위해. 둘째, 지난 주문 내역을 통해 맛있었던 메뉴를 재주문 하기 위해(배달의 민족은 재주문 기능 없음). 전자의 경우 주문 완료 직후의 설렘, 기대가 막 생겨난 시점이라 쿠폰까지 받게 된다면? 다음에 다시 배달 음식을 떠올릴 때 요기요를 선택하게 만들 수 있습니다. 후자의 경우 재주문 시 바로 쿠폰을 사용할 수 있으니 가장 직접적인 혜택으로 받아들일 가능성이 높아지고요. 이처럼 특정 시점에 팝업을 노출할 땐 단순 이벤트라기 보다 사용자가 바라는 점을 명확히 파악한 후 적용할 수 있어야 합니다.

결론 : 팝업 화면을 구성할 때 체크해보세요 1. 팝업의 노출 타이밍 잘 고려하기 (특히 연관성!) 2. 많은 정보를 담기 보단, 핵심적인 내용만 표현하기 3. 팝업 내 주요 내용을 문구로 잘 정리하기 4. 팝업 내 혜택 또는 내용을 바로 확인 할 수 있는 ‘버튼’ 활용하기

로그인하고 자유롭게 의견을 남겨주세요.