카페24 상세페이지 동영상 업로드부터 노출 확인까지

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

상품의 움직임이나 사용 방법은 여러 장 보다 짧은 영상 한 편이 더 이해하기 쉬울 때가 있습니다.

그런데 준비한 MP4 파일을 카페24 상세페이지에 바로 올리려다가 업로드 위치를 찾지 못해 막히는 경우가 많습니다. 카페24 공식 도움말에 따르면 카페24 쇼핑몰 FTP에는 MP4 파일을 올릴 수 없고, 스트리밍을 지원하는 외부 서비스에 영상을 업로드한 뒤 상세 설명에 코드를 넣는 방식을 사용해야 합니다.

직접 Vimeo 임베드 코드를 복사하고 크기를 수정하는 방법도 있지만, 초보 운영자에게는 HTML 코드가 부담스러울 수 있습니다. 오늘은 오너플로우 팝업 & 배너 매니저에 Vimeo 영상 주소를 입력하고, 자동으로 생성되는 코드를 이용해 카페24 상품 상세페이지에 영상을 노출하는 방법을 알아보겠습니다. 🙂

Vimeo는 영상을 재생할 주소를 준비하고

표시 방식과 설치 코드는 오너플로우 앱에서 관리합니다.

직접 임베드 하는 방법과 무엇이 다른가요?

앱을 사용해도 Vimeo 영상 자체가 카페24에 업로드되는 것은 아닙니다. Vimeo 영상 URL은 필요하지만 Vimeo 임베드 코드를 직접 만들거나 편집할 필요가 없는 방식입니다.

시작 전에 준비할 것

• [ ] 재생 가능한 YouTube/Vimeo 영상 URL
• [ ] 오너플로우 팝업 & 배너 매니저가 연결된 카페24 쇼핑몰
• [ ] 영상을 적용할 스킨과 상품
• [ ] 카페24 상품/디자인을 수정할 수 있는 관리자 권한
• [ ] 기존 상품 상세 설명 HTML의 백업본
• [ ] 영상, 배경음악, 인물과 상표를 게시할 수 있는 권리

1단계. Vimeo에 영상을 업로드하고 처리 상태를 확인합니다

Vimeo에 로그인한 뒤 새 영상을 업로드하고, 재생할 수 있도록 영상 처리가 완료됐는지 확인합니다. 상세페이지에 영상을 넣기 위해 꼭 필요한 것은 업로드가 정상적으로 끝난 영상이며, 제목과 썸네일을 별도로 꾸미는 것은 필수가 아닙니다.

Vimeo는 업로드한 영상의 한 장면을 자동으로 썸네일로 지정합니다.

자동으로 선택된 첫 화면이 어색하거나 상품이 잘 보이지 않을 때만 영상 속 다른 장면을 선택하거나 별도의 이미지를 등록하세요. 제목도 여러 영상을 구분하기 쉬운 관리용 이름이 필요할 때 정리하면 됩니다.

2단계. 공개 범위를 확인하고 Vimeo URL을 준비합니다

영상의 공유 URL을 복사하기 전에 일반 고객이 재생할 수 있는 공개 범위인지 확인합니다. Private 영상은 외부 고객이 볼 수 없으므로 상세페이지용으로 적합하지 않습니다.

공개 범위와 외부 재생 허용 여부를 확인한 뒤 오너플로우 앱에 입력할 Vimeo 영상 URL을 복사합니다.

3단계. 오너플로우 앱에서 적용 스킨과 배너 그룹을 선택합니다

오너플로우 팝업 & 배너 매니저를 열고 왼쪽 위의 적용 스킨에서 영상을 노출할 카페24 스킨을 선택합니다. 운영 중인 대표 스킨과 앱에서 선택한 스킨이 다르면 설정한 배너가 실제 쇼핑몰에 보이지 않을 수 있습니다.

왼쪽 메뉴에서 배너를 선택한 뒤 기존 배너 그룹을 열거나 새 그룹을 만듭니다. 다른 배너와 구분하기 쉽도록 상품 상세 영상처럼 용도를 알 수 있는 이름을 사용하는 편이 좋습니다.

4단계. 동영상 추가에서 Vimeo URL을 입력합니다

배너 그룹 상단의 동영상 추가를 누릅니다. 생성된 동영상 배너의 PC 동영상 영역에 준비한 Vimeo URL을 입력하고 영상 비율을 선택합니다.

모바일에서 다른 영상을 보여주고 싶다면 모바일 동영상에 별도의 URL과 비율을 입력할 수 있습니다. 첨부된 앱 화면 안내처럼 모바일 URL을 비워 두면 PC 영상이 모바일에서도 사용됩니다.

오너플로우 팝업 & 배너 매니저 > 배너 > 동영상 추가 > PC 동영상 URL (필요시 모바일 동영상 URL도 입력)

5단계. 노출 방식과 필요한 옵션을 정하고 저장합니다

영상을 계속 보여주려면 기본 선택인 항상 노출을 유지합니다. 특정 행사 기간에만 사용할 영상은 기간 노출. 일정 간격으로 다시 보여줄 목적이라면 반복 노출을 검토할 수 있습니다.

동영상을 눌렀을 때 이동할 페이지가 없다면 링크를 억지로 추가하지 않아도 됩니다. 필요한 경우에만 연결할 URL과 새 창/현재 창 여부를 정합니다. 설정을 마쳤다면 오른쪽 위의 저장하기를 누릅니다.

6단계. 공통 설치코드가 적용됐는지 확인합니다

오너플로우 앱의 배너를 쇼핑몰에서 불러오려면 공통 설치코드가 먼저 적용되어 있어야 합니다. 앱 화면 안내상 공통 설치코드는 1회 설치하는 항목이므로, 이미 설치했다면 배너마다 반복해서 넣을 필요가 없습니다.

처음 사용하는 스킨이라면 화면 상단의 공통 설치코드와 사용 가이드를 확인해 안내된 위치에 설치합니다. 스킨을 변경하거나 PC/모바일 디자인을 따로 운영한다면 적용 대상이 맞는지 다시 확인하세요.

7단계. 자동으로 생성된 배너 코드를 복사합니다

저장한 배너 그룹 오른쪽의 코드를 누르면 배너 코드창이 열립니다. 이번 글처럼 기본 배너 그룹을 원하는 위치에 표시할 때는 현재 목적에 맞는 코드 탭을 확인하고 복사를 누릅니다.

이 코드는 Vimeo에서 제공하는 임베드 코드가 아니라, 오너플로우 앱에서 설정한 영상 배너를 불러오는 코드입니다. 그룹마다 식별값이 다르므로 다른 배너 그룹의 코드를 복사하지 않았는지 확인하세요.

Vimeo 임베드 코드를 직접 수정하지 않고

오너플로우 앱에서 생성한 배너 코드를 사용합니다.

8단계. 카페24 상품 상세설명에 배너 코드를 넣습니다

[카페24 관리자] 상품 > 상품 목록 > 대상 상품 선택 > 상품 상세설명

상품 수정 화면에서 상세설명을 직접 작성으로 선택하고, 에디터 오른쪽 끝의 <> 버튼을 눌러 HTML 소스 화면을 엽니다.

현재 상세설명에 이미지와 텍스트가 이미 있다면 먼저 HTML 전체를 복사해 별도 문서에 보관합니다. 영상이 들어갈 위치에 찾은 뒤 오너플로우 앱에서 복사한 배너 코드를 붙여 넣고 저장합니다.

9단계. PC와 모바일 상세페이지에서 확인합니다

관리자 미리보기만 보고 끝내지 말고, 저장한 상품의 실제 상세페이지를 엽니다. 로그인 상태에서만 보이는 문제를 피하려면 시크릿 팡이나 로그아웃 상태에서도 확인하세요.

• [ ] PC와 모바일에서 영상이 상세 영역이 벗어나지 않는다.
• [ ] 재생 버튼을 눌렀을 때 오류 없이 시작된다.
• [ ] 자동 생성된 첫 화면, 영상 비율과 화질이 상품 설명에 어울린다.
• [ ] 소리 켜기와 끄기, 전체화면이 의도대로 작동한다.
• [ ] 영상 앞뒤의 이미지와 문장 배치가 깨지지 않았다.
• [ ] 비로그인 방문자도 영상을 볼 수 있다.
• [ ] 모바일 상세설명을 별도로 사용하는 경우에도 영상이 노출된다.

Vimeo의 플레이어 디자인이나 공개 설정을 나중에 바꾸면 이미 삽입한 영상에도 영향을 줄 수 있습니다. 설정 변경 후에는 상세페이지를 다시 열어 확인하는 습관이 필요합니다.

영상이 보이지 않을 때 확인할 것

문제가 생겼을 때 코드를 여러 번 덧붙이기보다 백업본으로 되돌린 뒤 Vimeo URL → 앱 저장 상태 → 공통 설치코드 → 배너 코드 → 카페24 삽입 위치 순서로 확인하는 편이 원인을 찾기 쉽습니다.

핵심만 정리하면?

1. Vimeo에는 영상을 업로드하고 고객이 재생할 수 있는 URL만 준비합니다.
2. 오너플로우 앱의 동영상 추가에서 PC, 모바일 URL과 비율을 설정합니다.
3. 노출 방식을 정하고 저장한 뒤 공통 설치코드가 적용됐는지 확인합니다.
4. Vimeo 임베드 코드 대신 앱이 생성한 배너 코드를 복사합니다.
5. 카페24 상품 상세설명 HTML의 원하는 위치에 배너 코드를 넣습니다.
6. 실제 PC,모바일,비회원 화면에서 노출과 재생을 확인합니다.

좋은 상품 영상을 만들었다면 SNS에만 올려두지 말고

구매를 고민하는 고객이 보는 상세페이지에서도 활용해 보세요.

오늘은 Vimeo 임베드 코드를 직접 편집하지 않고, 오너플로우 팝업 & 배너 매니저를 이용해 카페24 상품 상세페이지에 영상을 노출하는 방법을 알아봤습니다.

직접 적용하면서 가장 막히는 부분은 무엇인가요? Vimeo URL, 공통 설치코드, 배너 코드, 모바일 화면 중 궁금한 내용을 댓글로 남겨주세요.

다음 편에서는 같은 앱으로 카페24 쇼핑몰 팝업을 설정하는 방법을 초보자 기준으로 알아보겠습니다.

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

감사합니다.