카페24 쇼핑몰 팝업 설정, 코드 수정 없이 이미지 바꾸는 방법

안녕하세요, 오너플로우입니다.

쇼핑몰을 운영하다 보면 배송 지연 공지, 휴무 안내, 시즌 할인과 신상품 이벤트처럼 고객에게 알려야 할 소식이 많으시죠?

그럴 때마다 팝업 이미지 한 장을 바꾸기 위해 디자인 코드를 열거나 별도의 수정 작업을 요청하고 계시지는 않나요?

직접 만든 HTML 팝업은 이미지 주소나 크기를 바꾸려면 디자인 코드를 수정해야 할 수 있습니다. 코드를 잘못 건드렸을 때 팝업뿐 아니라 쇼핑몰 화면까지 어긋날까 걱정되어, 간단한 이미지 교체도 부담스럽게 느껴질 수 있습니다.

카페24에는 기본 팝업 기능도 있지만, 이번 글에서는 최초 설치 후 운영을 노코드로 바꾸는 방법에 집중하겠습니다. 오너플로우 팝업 & 배너 매니저에 공통 설치 코드와 팝업 코드를 한 번 연결한 뒤, 이후에는 앱에서 이미지/링크/노출 기간을 변경하는 흐름입니다. 🙂

처음 한 번은 설치가 필요하지만

매번 팝업 이미지를 바꿀 때까지 코드를 수정할 필요는 없습니다.

먼저 '노코드 팝업'의 범위를 정확히 알아볼까요?

이 글에서 말하는 노코드는 처음부터 코드가 전혀 필요 없다는 뜻이 아닙니다. 운영 중인 카페24 스킨에 공통 설치 코드와 해당 팝업 코드를 최초 한 번 적용하는 작업은 필요합니다.

설치가 끝난 뒤 같은 스킨과 같은 팝업을 계속 사용한다면, 일상적인 운영은 앱에서 처리합니다.

대표 스킨을 교체했거나 설치 코드가 삭제된 경우, 다른 팝업 코드를 사용하려는 경우에는 다시 확인해야 합니다. 따라서 평생 아무 조건 없이 코드 수정이 없다기보다 같은 설치 구조를 유지하는 동안 반복 변경에 코드 수정이 필요 없는 방식으로 이해하면 정확합니다.

시작 전에 준비할 것

• [ ] 팝업의 목적 : 공지, 휴무 안내, 이벤트 또는 기획전
• [ ] PC와 모바일에서 사용할 팝업 이미지
• [ ] 팝업을 눌렀을 때 이동할 상품/기획전/게시글 URL
• [ ] 노출 시작일/종료일과 필요한 시간대
• [ ] 오너플로우 팝업 & 배너 매니저가 설치된 카페24 쇼핑몰
• [ ] 적용할 대표 스킨과 디자인 편집 권한
• [ ] 수정 전 디자인 백업본

공지와 이벤트 내용을 한 팝업에 모두 넣기보다, 고객이 보자마자 이해해야 할 메시지 하나를 먼저 정하는 편이 좋습니다. 이미지 안의 글자가 너무 작으면 모바일에서 읽기 어렵기 때문에 PC 화면만 보고 제작하지 마세요.

1단계. 앱을 설치하고 적용 스킨을 확인합니다

카페24 스토어에서 오너플로우 팝업 & 배너 매니저를 설치합니다.

앱을 열었다면 왼쪽 위의 적용 스킨에서 현재 쇼핑몰에 실제로 사용 중인 스킨을 선택합니다. 앱에서 선택한 스킨과 대표 스킨이 다르면 설치한 팝업이 고객 화면에 나타나지 않을 수 있습니다.

카페24 스토어 > 오너플로우 팝업 & 배너 매니저 > 설치하기

2단계. 새 팝업에서 기본 레이아웃을 선택합니다

왼쪽 메뉴에서 팝업을 선택하고 + 버튼을 누릅니다. 새 팝업 만들기 화면에는 여러 레이아웃이 표시됩니다.

이번 글은 쇼핑몰 공지와 일반 이벤트에 많이 활용할 수 있는 센터 모달을 기준으로 설명합니다. 센터 모달은 쇼핑몰 화면 가운데에 팝업을 표시하는 형태입니다.

풀스크린, 바텀 시트, 상단 바와 사이드 슬라이드처럼 목적이 다른 레이아웃은 추후에 업로드하도록 하겠습니다.

3단계. 콘텐츠에서 이미지를 등록합니다

기본 팝업 편집은 콘텐츠 → 디자인 → 노출 순서로 진행합니다. 먼저 콘텐츠에서 제공되는 테마를 선택하거나 준비한 팝업 이미지를 등록합니다.

PC와 모바일에 맞는 콘텐츠를 각각 관리할 수 있으므로, 모바일에서는 글자가 작아지지 않도록 세로 비율의 별도 이미지를 준비하는 방법을 검토하세요. 팝업을 눌렀을 때 이동해야 한다면 상품, 기획전 또는 게시글 링크도 함께 설정합니다.

버튼이 필요하지 않은 단순 공지라면 불필요한 이동 링크를 억지로 넣지 않습니다.

반대로 할인/기획전 팝업이라면 이미지의 문구와 실제 연결 페이지의 혜택/기간이 일치하는지 확인하세요.

4단계. 미리보기 후 저장합니다

오른쪽 미리보기에서 이미지, 문구와 연결 링크를 확인한 뒤 저장을 누릅니다. 저장 후에는 팝업 목록에서 사용 상태가 켜져 있는지도 확인하세요.

• [ ] 공지 제목과 날짜가 정확하다.
• [ ] 이벤트 혜택과 연결 페이지 내용이 일치한다.
• [ ] PC/모바일에서 이미지 글자를 읽을 수 있다.

5단계. 공통 설치 코드와 팝업 코드를 최초 1회 적용합니다

팝업은 실제 쇼핑몰에 표시하려면 앱 상단의 공통 설치 코드와 해당 팝업의 코드를 앱 사용 가이드에 따라 운영 스킨에 적용합니다.

카페24 디자인 코드를 수정하기 전에는 사용 중인 디자인을 복사하거나 원본 소스를 별도로 보관하세요.

공통 설치 코드와 팝업 코드의 정확한 설치 파일과 위치는 앱의 현재 사용 가이드를 기준으로 확인해야 합니다.

6단계. 실제 쇼핑몰에서 팝업을 테스트합니다

앱의 미리보기만 확인하지 말고 쇼핑몰을 새 창과 모바일 기기에서 직접 엽니다. 캐시나 기존 닫기 기록의 영향을 줄이려면 시크릿 창 또는 다른 브라우저에서도 확인하세요.

• [ ] PC와 모바일에서 팝업 이미지가 정상적으로 표시된다.
• [ ] 이미지와 버튼을 누르면 정확한 페이지로 이동한다.
• [ ] 닫기 버튼이 정상적으로 작동한다.
• [ ] 팝업을 닫은 뒤 상품 탐색과 구매 기능을 사용할 수 있다.
• [ ] 비로그인 고객 화면에서도 의도대로 표시된다.

다음 팝업부터는 이미지와 링크만 변경합니다

최초 설치와 검수가 끝났다면 다음 이벤트부터는 같은 팝업을 앱에서 열어 이미지와 링크를 변경하고 저장합니다. 같은 팝업 코드를 유지하는 단순 운영 변경이라면 카페24 디자인 편집창을 다시 열 필요가 없습니다.

다만 아래 상황에서는 설치 상태를 다시 점검하세요.

• 대표 스킨을 교체하거나 새 스킨으로 전환한 경우
• 공통 설치 코드 또는 팝업 코드를 사용하는 경우
• 기존 팝업이 아닌 새로운 팝업 코드를 사용하는 경우
• 앱을 삭제/재설치하거나 이용 상태가 변경된 경우
• 앱 사용 가이드에서 설치 방식 변경을 안내한 경우

팝업을 바꾼다는 이유로 매번 코드를 수정하는 것이 아니라

앱에서 운영 값을 바꾸고 실제 화면만 검수하는 흐름으로 전환합니다.

핵심만 정리하면

1. 공지/이벤트 목적과 PC/모바일 이미지를 먼저 준비합니다.
2. 오너플로우 팝업 & 배너 매니저에서 센터 모달 팝업을 만듭니다.
3. 이미지와 연결 링크를 설정하고 미리보기로 확인합니다.
4. 공통 설치 코드와 해당 팝업 코드는 운영 스킨에 최초 1회 적용합니다.
5. 이후 같은 팝업은 앱에서 이미지와 링크를 변경하고 저장합니다.
6. 변경할 때마다 PC/모바일/비로그인 화면에서 최종 검수합니다.

오늘은 카페24 쇼핑몰에서 공지와 이벤트 팝업을 만들고, 최초 설치 후에는 코드를 다시 수정하지 않고 운영하는 방법을 알아봤습니다.

팝업을 직접 운영할 때 가장 불편했던 부분은 무엇인가요? 이미지 교체, 링크 설정, 최초 코드 설치 중 궁금한 내용을 댓글로 남겨주세요. 다음 콘텐츠를 준비할 때 참고하겠습니다. 🙂

다음 편에서는 디자인과 노출 기간을 정하고, 시간 경과 또는 스크롤 도달 시점에 맞춰 보여주는 조건부 팝업 설정 방법을 알아보겠습니다.

도움이 되셨다면 공감과 댓글로 알려주세요.

감사합니다.