🤷🏻‍♀️ 모달이 모다? 헷갈리는 팝업, 모달 200% 활용법

2023. 07. 25


주목받고 싶다면, 띄워주세요


웹사이트를 방문했을 때 가장 먼저 눈에 띄는 영역은 어디일까요? 상단 배너, 메인 이미지 등 여러 가지가 있겠지만, 그중에서도 ‘팝업💥’을 빼놓을 수 없죠. 팝업은 방문자에게 보여주고 싶은 내용을 강조하기 위해 웹사이트에 작은 창을 띄우는 기능을 말합니다.


그런데 새 창을 띄우기 위해 팝업 대신 ‘모달'이라는 기능을 활용할 수도 있어요. 아임웹에서도 팝업과 모달 두 가지를 모두 적용할 수 있는데요. 비슷해 보이는 두 기능, 많이 헷갈리셨죠? 오늘은 아임웹의 팝업과 모달 기능, 그리고 각 기능을 200% 활용할 수 있는 팁을 알려드릴게요.


📌 이런 분이라면 특히 주목해 주세요!


  • 우리 사이트 방문자에게 꼭 전달하고 싶은 내용, 어떻게 보여주면 좋을까요?
  • 팝업과 모달, 비슷해 보이는데 무슨 차이인지 잘 모르겠어요!
  • 다른 웹사이트는 팝업과 모달 기능을 어떻게 활용하고 있는지 궁금해요.




팝업과 모달, 뭐가 다른가요?


일반적인 UX/UI 디자인 용어에서 팝업은 현재 열려있는 브라우저 페이지 위에 또 다른 브라우저 페이지를 하나 더 띄우는 것을 말합니다.

반면 모달은 현재 열려있는 페이지에 포함된 창으로, 페이지 위에 일종의 ‘레이어’를 까는 것을 말해요. 기존 페이지를 ‘부모’, 모달을 ‘자식’이라고 생각하면 좀 더 이해가 쉬울 거예요.



아임웹에서의 팝업과 모달은 UX/UI 개념을 잘 몰라도 사용하기 쉽도록, 조금 더 간소화되어 있는 기능입니다.


  • 팝업은 방문자가 특정 페이지에 접속할 때 바로 뜨는 창으로, 홈 화면, 메뉴, 상품 페이지 등 원하는 페이지에서 팝업창이 뜨도록 지정할 수 있어요.
  • 모달은 방문자가 특정 버튼 또는 링크를 클릭했을 때 뜨는 창으로, 페이지 내에서 추가적인 정보를 보여주고 싶을 때 활용해요.


헷갈리기 쉬운 기능이기 때문에 주요 차이점을 표로 정리했어요.



그렇다면 우리 브랜드는 팝업과 모달 중 무엇을 사용해야 할까요?

먼저 우리 사이트 방문자, 또는 고객에게 전달하고 싶은 메시지 또는 정보가 무엇인지 생각해 보세요. 메시지가 정리되었다면, 아래 내용을 참고하여 브랜드의 상황에 맞게 적용해 보시기 바랍니다.




팝업, 이럴 때 활용하세요


1️⃣ 지금 가장 집중하고 있는 프로모션 또는 이벤트를 안내할 때


  • 가장 흔한 활용법 중 하나로, 방문자 수나 매출과 같은 성과에 기여할 수 있습니다.
  • 노출이 잘 되는 만큼 방문자에게 피로감을 줄 수 있다는 단점이 있습니다. 요즘은 너무 많은 팝업창을 띄우는 것은 지양하는 추세예요.
  • 습관적으로 ‘닫기’를 누르지 않도록 할인과 같은 분명한 혜택이 눈에 띄도록 해주세요.



 

청년 네트워크 멤버십 미트볼(Meetbowl)은 팝업에서 잠재 고객에게 매력적인 ‘10,000원 할인’ 혜택을 강조했어요. 카피 뿐 아니라 쿠폰 형태의 디자인으로 주목도를 높였습니다. 우연히 처음 방문한 고객이라도 시선이 가지 않을 수 없겠죠?


2️⃣ 서비스 이용에 큰 영향을 끼치는 공지사항을 안내하고 싶을 때


  • 배송 지연, 서비스 점검, 오류 등 고객이 반드시 알아야 할 중요한 내용을 안내합니다.
  • 특히 홈 화면에 노출되는 팝업은 여러 번 클릭해야만 볼 수 있는 메뉴나 게시판보다 전달력이 높기 때문에 공지사항에 가장 적합해요.
  • 이 경우 화려한 디자인보다는 가독성이 높고 심플한 디자인이 좀 더 신뢰감을 줍니다.


 

마음에 닿는 오브제를 소개하는 소품샵 모로모로오브제는 팝업을 통해 배송 및 CS 일정을 공지했어요. 심플한 구성으로 가독성을 높이고, 이미지 위주의 홈 화면과 확실하게 구분되도록 했습니다. 배송은 고객과의 신뢰가 달린 사항이기 때문에 지연 일정을 미리 안내하는 것이 좋아요.




모달, 이럴 때 활용하세요


☑️ 한 페이지 안의 많은 정보를 체계적으로 보여주고 싶을 때


전체 정보를 나열하지 않고, 각 항목을 클릭했을 때 모달창을 띄워 추가 정보를 보여주면 조금 더 짜임새 있는 페이지를 구성할 수 있답니다. 페이지 전환 없이 그대로 모달창이 뜨고, 창을 닫으면 빠르게 기존 페이지로 돌아올 수 있어요.


📌 페이지를 이동하는 대신 모달창을 띄우는 이유는?


  • 페이지 전체가 바뀌는 것보다 모달창만 뜨는 것이 더 빠르고 편리하게 느껴져요.
  • 페이지 안의 내용이 각각 별개가 아니라 연결된 정보라는 사실을 직관적으로 이해할 수 있어요.


 

재활용 플라스틱 제조 브랜드 노플라스틱선데이는 제공 중인 서비스의 각 단계를 자세히 설명하기 위해 모달 창을 활용했어요. 만약 이 모든 내용이 기존 페이지에 들어갔다면 지나치게 복잡해 보였을 거예요. 모달 덕분에 고객이 피로감 없이 페이지를 탐색할 수 있습니다.



샐러드/포케 전문점 그리너(Greener)는 샐러드에 제공되는 채소, 토핑, 드레싱 옵션을 설명하기 위해 모달창을 활용했어요. 페이지를 이탈하지 않아도 단계별로 어떤 옵션이 있는지 확인할 수 있습니다. 모달창 안에서도 마우스를 올리면 텍스트가 보이는 롤오버 효과를 활용했네요.



문구 브랜드 머쉬룸페이퍼팜은 나에게 맞는 속지를 선택하여 바꿔 끼울 수 있다는 제품의 특징을 보여주기 위해 모달 창을 활용했어요. 상품 클릭 시 개별 상세 페이지로 이동하는 것이 아니라 모달을 띄움으로써 노트를 꾸미는 다양한 옵션이 있다는 것을 인지할 수 있습니다.




웹사이트에 팝업과 모달 적용하기


팝업과 모달, 이제 확실하게 이해되셨죠? 드디어 우리 웹사이트에 직접 적용할 일만 남았습니다. 🥳 팝업은 아임웹 웹사이트 관리자 페이지, 모달은 디자인 모드에서 적용하실 수 있는데요. 무척 간단하니 겁먹지 않으셔도 돼요! 자세한 방법은 아래 아임웹 가이드를 참고해 주세요.



📌 세 줄 핵심 요약


  • 아임웹의 팝업은 지정한 페이지에 방문자가 접속할 때 뜨는 창, 모달은 특정 버튼 또는 링크를 클릭했을 때 뜨는 창을 말합니다.
  • 팝업은 강조하고 싶은 프로모션이나 이벤트를 안내할 때, 혹은 고객이 반드시 알아야 할 중요한 공지사항을 전달하고 싶을 때 주로 활용합니다.
  • 모달은 한 페이지 안의 많은 정보를 체계적으로 보여주고 싶을 때 활용합니다.


※ 사례로 소개한 미트볼, 모로모로오브제, 노플라스틱선데이, 그리너, 머쉬룸페이퍼팜은 모두 아임웹과 함께 성장하는 브랜드입니다.



by 마케팅 다운