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

시선을 집중시키는 팝업, 모달 BEST 사례 ✨

2023. 7. 19.

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

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

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

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

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

🙋‍♀️ 잠깐! 사용하시는 메일 서비스에 따라 전체 내용이 보이지 않을 수 있으니, [웹에서 보기]를 권장합니다.

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

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

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

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

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

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

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

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

팝업, 이럴 때 활용하세요

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

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

출처 : 미트볼(Meetbowl)

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

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

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

출처 : 모로모로오브제

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

*현재는 노출 일정이 지나 웹사이트에서 해당 팝업창이 보이지 않는 점 참고 부탁드립니다.

모달, 이럴 때 활용하세요

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

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

💁‍♀️ 페이지를 이동하는 대신 모달창을 띄우는 이유는?

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

출처 : 노플라스틱선데이

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

출처 : 그리너(Greener)

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

출처 : 머쉬룸페이퍼팜

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

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

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