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

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

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

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

팝업, 이럴 때 활용하세요

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

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

 

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

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

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

모달, 이럴 때 활용하세요

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

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

 

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

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

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

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

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

• 모달 메뉴란 무엇인가요?
• 팝업 추가하기
• 모달창 띄우기

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

by 마케팅 다운