웹사이트에 디지털 카탈로그를 직접 삽입하면 방문자는 도메인을 벗어나지 않고도 제품을 둘러보고, 페이지를 넘겨보고, 구매할 수 있습니다. 다운로드가 필요한 정적 PDF와 달리, 삽입형 카탈로그는 즉시 로드되고 모든 기기에서 작동하며, 쇼핑객의 참여도를 훨씬 더 오래 유지합니다. 이 가이드에서는 검증된 5가지 삽입 방법과 복사하여 사용할 수 있는 실제 코드 예제, 그리고 일반적인 카탈로그와 전환율이 높은 카탈로그를 구분하는 최적화 비법을 알려드립니다.
Why Embed a Digital Catalog Instead of Linking to a PDF?
방법을 알아보기 전에 먼저 이유부터 살펴보겠습니다. 다운로드 가능한 PDF 카탈로그에서 임베디드 디지털 카탈로그로 전환하는 기업은 다음과 같은 세 가지 영역에서 꾸준히 개선 효과를 봅니다.
- 더 긴 세션 시간 — 인터랙티브 플립북은 PDF 다운로드 링크보다 방문자가 페이지에 머무르는 시간을 3~5배 더 길게 만듭니다.
- 낮은 이탈률 — 페이지 내 콘텐츠가 로드되면 방문자는 다운로드 메시지가 나타난 후 페이지를 떠나지 않고 계속 탐색합니다.
- 더 나은 분석 — 내장형 카탈로그를 사용하면 페이지 조회수, 제품 링크 클릭률, 페이지당 체류 시간 등을 추적할 수 있습니다.
임베디드 카탈로그는 SEO에도 도움이 됩니다. 검색 엔진은 iframe 및 JavaScript 위젯 내에 렌더링된 콘텐츠를 색인화할 수 있으므로 제품 페이지의 키워드 노출 범위를 넓힐 수 있습니다. 다음과 같은 도구들을 활용할 수 있습니다. 플립HTML5 텍스트 레이어를 포함하는 카탈로그를 생성하여 임베딩 후에도 크롤링이 가능하도록 합니다.
Step 1: Create Your Digital Catalog
임베드하려면 먼저 디지털 카탈로그가 필요합니다. 아직 카탈로그를 만들지 않았다면, 가장 빠른 방법은 다음과 같습니다.
- PDF 파일을 준비하세요 — InDesign, Canva 또는 기타 디자인 도구에서 카탈로그 레이아웃을 고해상도 PDF로 내보내세요.
- 플립북 플랫폼에 업로드하세요 — 다음과 같은 서비스 FlipBuilder 그리고 플립HTML5 PDF 파일을 실제 페이지 넘김 효과가 있는 인터랙티브 플립북으로 변환합니다.
- 대화형 요소 추가 — 클릭 가능한 제품 링크, 임베디드 비디오, 이미지 팝업 및 쇼핑 버튼을 카탈로그 페이지에 직접 삽입하세요.
- 게시하고 임베드 코드를 받으세요 — 게시가 완료되면 플랫폼에서 웹사이트에 붙여넣을 수 있는 임베드 코드를 생성합니다.
카탈로그 생성에 대한 더 자세한 안내는 전체 가이드를 참조하세요. 디지털 카탈로그를 만드는 방법.
Step 2: Choose Your Embedding Method
웹사이트에 디지털 카탈로그를 삽입하는 주요 방법은 다섯 가지입니다. 가장 적합한 방법은 사용 플랫폼, 기술 수준, 디자인 요구 사항에 따라 다릅니다.
Method 1: iFrame Embed (Most Common)
iframe 방식은 WordPress, Shopify, Wix, Squarespace 및 사용자 지정 HTML 사이트를 포함한 거의 모든 웹사이트 플랫폼에서 작동합니다. FlipHTML5 또는 FlipBuilder에 카탈로그를 게시하면 다음과 같은 iframe 코드 조각을 받게 됩니다.
카탈로그를 표시하려는 페이지의 HTML 블록에 이 코드를 붙여넣으세요. 너비="100%" 속성은 컨테이너를 채우도록 보장하는 반면 높이="600" 세로 공간을 조절합니다. 레이아웃에 따라 높이를 조정하세요. 대부분의 디자인에는 500~800px가 적합합니다.
Method 2: JavaScript Widget Embed
일부 플랫폼은 iframe 대신 가벼운 JavaScript 코드 조각을 제공합니다. 장점은 무엇일까요? 위젯이 콘텐츠 높이에 자동으로 맞춰지고, 별도의 브라우징 컨텍스트를 생성하지 않기 때문에 로딩 속도가 더 빠른 경우가 많습니다.
<div id="catalog-container"></div>
<script src="https://online.fliphtml5.com/widget.js"></script>
<script>
FlipHTML5.init({ container: '#catalog-container', bookId: 'your-id' });
</script>이 방법은 단일 페이지 애플리케이션이나 iframe 사용에 제한이 있는 사이트에 적합합니다.
Method 3: WordPress Plugin or Shortcode
워드프레스 사이트를 운영하는 경우, 많은 플립북 플랫폼에서 전용 플러그인을 제공합니다. 플러그인을 설치한 후에는 다음과 같은 숏코드를 사용하기만 하면 됩니다. [플립북 id="123"] 게시물 또는 페이지 편집기에서 사용하세요. 이 플러그인은 반응형 크기 조정, 지연 로딩 및 캐싱을 자동으로 처리합니다.
Method 4: Direct Link with Lightbox Pop-up
방문자가 페이지를 벗어나지 않고 전체 화면 오버레이로 카탈로그를 볼 수 있도록 하려면 라이트박스 방식을 사용하세요.
<a href="https://online.fliphtml5.com/your-catalog/"
class="lightbox-trigger" data-type="iframe">
제품 카탈로그를 확인하세요
</a>이 기능을 라이트박스 라이브러리(Fancybox, Magnific Popup 또는 Lightbox2)와 함께 사용하면 카탈로그를 방해 요소 없이 오버레이 형태로 열 수 있습니다. 특히 탐색 메뉴가 복잡해지지 않도록 해야 하는 랜딩 페이지에 효과적입니다.
Method 5: API-Based Custom Integration
고급 사용자는 최대 제어 권한을 확보하기 위해 플랫폼 API를 활용하여 카탈로그 데이터를 가져오고 사용자 지정 인터페이스 내에서 페이지를 렌더링할 수 있습니다. 이 접근 방식은 제품 데이터베이스, CRM 시스템 또는 사용자 지정 분석 대시보드와의 긴밀한 통합이 필요한 기업 사이트에 적합합니다.
Step 3: Optimize for Mobile and Speed
웹 트래픽의 60% 이상이 모바일 기기에서 발생하므로, 내장형 카탈로그는 작은 화면에서도 보기 좋고 성능이 뛰어나야 합니다.
Responsive Sizing
화면 크기에 관계없이 올바른 가로세로 비율을 유지하려면 iframe을 반응형 컨테이너로 감싸세요.
<div style="position:relative; padding-bottom:75%; height:0; overflow:hidden;">
<iframe src="https://online.fliphtml5.com/your-catalog/"
style="position:absolute; top:0; left:0; width:100%; height:100%;"
frameborder="0" allowfullscreen></iframe>
</div>이 CSS 트릭을 사용하면 카탈로그가 휴대폰, 태블릿, 데스크톱에서 어색한 스크롤바나 페이지 잘림 없이 4:3 비율을 유지할 수 있습니다.
Lazy Loading
추가하세요 로딩="지연" iframe에 속성을 추가하여 브라우저가 카탈로그가 화면에 나타날 때까지 로딩을 지연시키도록 하세요. 이렇게 하면 특히 여러 개의 임베디드 요소가 있는 페이지에서 초기 페이지 로딩 속도가 크게 향상됩니다.
Image Optimization
카탈로그 이미지는 업로드 전에 최적화해야 합니다. WebP 또는 압축된 JPEG 형식을 사용하고, 개별 페이지 이미지 크기는 300KB 미만으로 유지하며, 나머지는 플랫폼의 내장 압축 기능을 활용하세요. FlipHTML5의 게시 엔진 각 페이지에 대해 여러 해상도 계층을 자동으로 생성하여 모바일 방문자에게는 작은 이미지를, 데스크톱 사용자에게는 고해상도 버전을 제공합니다.
Step 4: Add Tracking and Analytics
카탈로그를 삽입하는 것은 절반의 성공일 뿐입니다. 방문자가 카탈로그와 어떻게 상호작용하는지, 어떤 제품에 가장 많은 관심을 보이는지 파악하려면 데이터가 필요합니다.
Google Analytics Integration
대부분의 플립북 플랫폼은 Google Analytics 또는 Google Tag Manager 연동을 지원합니다. 분석 계정을 연결하면 다음과 같은 항목을 추적할 수 있습니다.
- 방문객들이 가장 많이 보는 카탈로그 페이지는 무엇인가요?
- 페이지 펼침당 평균 소요 시간
- 제품 링크 클릭률
- 방문객이 카탈로그를 두고 가는 반납 장소
UTM Parameters for Internal Campaigns
카탈로그 페이지에서 제품 페이지 또는 결제 페이지로 연결할 때 전환 기여도를 추적하려면 UTM 매개변수를 추가하세요.
https://yourstore.com/product?utm_source=catalog&utm_medium=embed&utm_campaign=spring2026이를 통해 분석 플랫폼은 임베디드 카탈로그에서 발생한 판매와 다른 트래픽 소스에서 발생한 판매를 정확하게 파악할 수 있습니다.
Step 5: Best Practices for Higher Engagement
다양한 산업 분야에 걸쳐 수백 개의 카탈로그를 분석한 결과, 몇 가지 공통적인 패턴이 더 나은 결과를 가져오는 것으로 나타났습니다.
Position the Catalog Above the Fold
방문자가 바로 볼 수 있는 위치, 이상적으로는 첫 화면 콘텐츠 내에 임베디드 카탈로그를 배치하세요. 긴 텍스트 블록 아래에 숨겨진 카탈로그는 방문자의 상호 작용이 40~501회 감소합니다.
Add a Clear Call-to-Action Around the Embed
단순히 카탈로그를 페이지에 놓는 것만으로는 부족합니다. 카탈로그 주변에 맥락을 제공하세요. 카탈로그 내용을 설명하는 제목, 방문자가 무엇을 찾을 수 있는지에 대한 간략한 설명, 그리고 제품 컬렉션이나 문의 양식으로 연결되는 CTA 버튼을 아래에 배치하세요.
Keep Catalog Length Manageable
웹 임베딩의 경우, 짧은 카탈로그(10~30페이지)가 긴 카탈로그보다 효과적입니다. 전체 카탈로그가 50페이지를 넘는다면, 시즌별 컬렉션, 제품 카테고리, 신상품 등 테마별 섹션으로 나누어 각 섹션의 관련 페이지에 임베드하는 것을 고려해 보세요. 이때 와 같은 도구가 유용합니다. FlipHTML5 AI 카탈로그 제작 도구 제품 데이터를 기반으로 핵심적인 카탈로그 섹션을 자동으로 생성하여 시간을 절약해 줍니다.
Use Clickable Hotspots and Buy Buttons
디지털 카탈로그의 가장 큰 장점은 인쇄 카탈로그와 달리 상호작용이 가능하다는 점입니다. 제품 페이지, 장바구니, 문의 양식으로 바로 연결되는 클릭 가능한 핫스팟을 추가하세요. 카탈로그 페이지에 "지금 구매" 또는 "장바구니에 추가" 버튼을 바로 넣을 수도 있습니다. 다음과 같은 도구를 활용하세요. Flip PDF Pro 코딩 없이도 이러한 인터랙티브 요소를 간편하게 추가할 수 있습니다.
Platform-Specific Embedding Guides
각 웹사이트 제작 도구는 임베디드 콘텐츠를 처리하는 방식이 약간씩 다릅니다. 다음은 가장 인기 있는 플랫폼에 대한 간단한 설명입니다.
WordPress
"코드 편집기"로 전환하거나 구텐베르크에서 "사용자 지정 HTML" 블록을 추가하세요. iframe 코드를 붙여넣으세요. 클래식 편집기에서는 붙여넣기 전에 "텍스트" 탭으로 전환하세요. FlipBuilder를 포함한 많은 카탈로그 플랫폼은 이 과정을 더욱 간소화하는 WordPress 플러그인을 제공합니다.
Shopify
온라인 스토어 → 페이지 → 편집으로 이동합니다. 서식 있는 텍스트 편집기에서 HTML 버튼을 클릭합니다.) 그리고 iframe 코드를 붙여넣으세요. 제품 페이지의 경우, 제품 설명 HTML에 임베드 코드를 추가하세요.
Wix
"추가" 메뉴에서 "삽입 코드" 위젯을 사용하세요. "위젯 삽입" → "코드 입력"을 선택하고 iframe 스니펫을 붙여넣으세요. Wix는 위젯을 드래그하여 페이지 너비를 채우도록 하면 전체 너비 삽입도 지원합니다.
Squarespace
페이지 섹션에 "코드" 블록을 추가하세요. iframe 삽입 코드를 붙여넣고 저장합니다. Squarespace는 보안을 위해 iframe을 자동으로 샌드박스 처리하므로, 카탈로그 호스팅에서 다른 출처의 콘텐츠 삽입을 허용하는지 확인하세요.
디자인 영감을 찾고 있다면, 둘러보세요. FlipHTML5 카탈로그 템플릿 삽입하기 전에 사용자 지정할 수 있는 미리 만들어진 레이아웃을 위한 갤러리입니다.
Troubleshooting Common Embedding Issues
간단한 임베드조차도 문제가 발생할 수 있습니다. 다음은 가장 일반적인 문제와 해결 방법입니다.
Catalog Shows a Blank White Box
이는 일반적으로 호스팅 플랫폼에서 iframe 삽입을 차단했음을 의미합니다. 카탈로그의 X-Frame-Options 헤더를 확인하십시오. FlipHTML5와 같은 플랫폼은 기본적으로 삽입을 허용하지만, 자체 호스팅을 하는 경우 설정을 변경해야 할 수 있습니다. X-프레임 옵션: https://yoursite.com에서 허용 또는 사용 콘텐츠 보안 정책 헤더 대신에.
Catalog Loads Slowly
대용량 카탈로그 파일은 로딩 속도를 저하시킬 수 있습니다. 업로드하기 전에 원본 PDF 파일을 압축하고, 웹 보기 시에는 이미지 해상도를 150 DPI로 낮추고, iframe에서 지연 로딩을 활성화하세요. 또한 카탈로그 호스팅 업체가 CDN을 사용하는지 확인하십시오. FlipBuilder와 FlipHTML5는 모두 전 세계 어디에서든 빠른 로딩을 위해 글로벌 CDN 네트워크를 통해 콘텐츠를 제공합니다.
Scrolling Conflicts on Mobile
스크롤 가능한 페이지 내에 전체 높이의 iframe이 있는 경우, 사용자가 iframe 내부에서 스크롤하는 데 "갇히는" 문제가 발생할 수 있습니다. 이 문제를 해결하려면 높이를 고정하고 overflow:hidden 속성을 가진 래퍼를 추가하거나, 모바일 기기에서 카탈로그를 새 탭에서 열 수 있는 "탭하여 열기" 버튼을 사용하세요.
Catalog Doesn’t Display on Certain Browsers
일부 구형 브라우저 또는 개인정보 보호에 중점을 둔 브라우저는 타사 쿠키 및 스크립트를 차단할 수 있습니다. 카탈로그의 임베드 URL이 HTTPS를 사용하는지 확인하십시오. 문제가 지속되면 카탈로그를 새 탭에서 열 수 있는 대체 링크를 제공하십시오.
효과적인 카탈로그 제작에 대한 자세한 내용은 저희 가이드를 참조하세요. 판매량 증대를 위한 인터랙티브 디지털 카탈로그 제작.
Real-World Examples of Embedded Catalogs
내장형 카탈로그가 실제로 어떻게 작동하는지 살펴보면 어떤 방식이 효과적인지 명확히 알 수 있습니다. 효과적인 내장 전략을 보여주는 세 가지 사용 사례를 소개합니다.
E-commerce Product Catalog
패션 및 생활용품 브랜드는 홈페이지 메인 섹션에 시즌별 카탈로그를 삽입합니다. 방문자는 엄선된 컬렉션을 둘러보고, 제품 이미지를 클릭하여 개별 제품 페이지로 이동하고, 내장된 소셜 공유 버튼을 통해 마음에 드는 페이지를 공유할 수 있습니다. 영감을 주는 사례들을 모아 소개한 글을 확인해 보세요. 디지털 카탈로그 예.
B2B Wholesale Catalog
제조업체는 접근이 제한된 랜딩 페이지에 도매 카탈로그를 삽입합니다. 구매자가 로그인하거나 문의 양식을 제출하면 가격, 최소 주문 수량, 각 페이지의 "견적 요청" 버튼이 포함된 전체 카탈로그에 액세스할 수 있습니다. 이 접근 방식은 특히 도매 유통망 구축을 모색하는 기업에 효과적입니다. 온라인 제품 카탈로그를 만드세요.
Marketing Brochure on a Landing Page
서비스 업체는 회사 개요, 고객 후기, 가격표, 문의 양식 등을 모두 포함한 여러 페이지 브로셔를 방문자가 스크롤하며 볼 수 있는 인터랙티브 플립북 위젯에 삽입할 수 있습니다. 저희 제품을 확인해 보세요. 디지털 카탈로그 디자인 팁 이 접근 방식을 통해 전환율을 극대화하기 위해서입니다.
SEO Benefits of Embedded Catalogs
카탈로그를 웹사이트에 삽입하면 사용자 경험이 향상될 뿐만 아니라 검색 엔진 최적화 전략에도 직접적인 도움이 됩니다.
- 체류 시간 증가 — 상호작용형 콘텐츠는 방문자가 페이지에 더 오래 머물도록 하여, 해당 페이지가 가치 있는 정보를 제공한다는 것을 구글에 알려줍니다.
- 풍부한 미디어 신호 — 상호작용 콘텐츠가 포함된 페이지는 텍스트만 있는 페이지보다 더 풍부한 경험을 제공하기 때문에 경쟁이 치열한 분야에서 더 높은 순위를 차지합니다.
- 내부 연결 기회 — 각 카탈로그 페이지는 사이트 내 관련 블로그 게시물, 제품 페이지 또는 카테고리 페이지로 연결될 수 있어 내부 링크 구조를 강화할 수 있습니다.
- 이탈률 감소 — 방문객이 매력적인 카탈로그를 바로 찾을 수 있다면, 뒤로 가기 버튼을 누를 가능성이 줄어듭니다.
검색 엔진 최적화에 대한 자세한 내용은 다음을 참조하세요. FlipHTML5 학습 센터이는 상호작용이 가능하고 SEO 친화적인 카탈로그를 게시하는 방법에 대한 튜토리얼을 제공합니다.
더욱 다양한 디자인 옵션을 원하시면 다음을 살펴보세요. 무료 제품 카탈로그 템플릿 또는 카탈로그 레이아웃 아이디어 바로 사용할 수 있는 레이아웃을 제공합니다.
Start Embedding Your First Catalog Today
웹사이트에 디지털 카탈로그를 삽입하면 수동적인 탐색이 능동적인 제품 탐색으로 바뀝니다. 간단한 iframe, JavaScript 위젯 또는 플랫폼별 플러그인 중 어떤 것을 선택하든, 카탈로그 준비만 완료되면 몇 분이면 웹사이트에 제품을 소개할 수 있습니다.
해야 할 일을 간단히 정리해 드리겠습니다.
- 다음과 같은 도구를 사용하여 카탈로그를 만드세요. FlipBuilder 또는 플립HTML5.
- 웹사이트 플랫폼에 맞는 임베딩 방법을 선택하세요.
- 반응형 컨테이너와 지연 로딩을 사용하여 모바일 환경에 최적화하세요.
- 참여도와 전환율을 측정하기 위해 추적 기능을 추가하세요.
- 모범 사례를 따르세요: 페이지 상단에 배치하고, 명확한 행동 유도 버튼(CTA)을 사용하며, 카탈로그 길이를 적절하게 유지하세요.
웹사이트에 바로 삽입할 수 있는 디지털 카탈로그를 만들 준비가 되셨나요? FlipHTML5에 무료로 가입하세요 PDF 파일을 몇 분 만에 인터랙티브하고 웹사이트에 삽입 가능한 카탈로그로 변환해 보세요. 디자인 경험은 필요 없습니다. 파일을 업로드하고, 맞춤 설정한 후, 삽입 코드를 웹사이트에 붙여넣기만 하면 됩니다.