임베디드(Embedded) 뷰어
전체 내비게이션 컨트롤을 포함한 상태로, 페이지 안에서 PDF를 바로 표시합니다.
이 문서는 아래 두 가지를 모두 다룹니다.
- PDF Embedded Viewer (연결된 PDF)
- PDF Embedded Manual (테마 설정의 매뉴얼 URL)
임베디드 뷰어의 동작
임베디드 뷰어는 PDF를 페이지 안에 직접 표시합니다. 고객은 스토어를 벗어나지 않고도 문서를 읽고, 스크롤하고, 확대/축소하고, 페이지를 이동할 수 있습니다.
PDF 뷰어 설정
연결(Linked) 블록(PDF Embedded Viewer)을 사용한다면, 앱의 PDF 상세 페이지에서 Viewer Configuration 섹션에서 뷰어 유형을 선택합니다.
매뉴얼(Manual) 블록(PDF Embedded Manual)을 사용한다면, 테마 편집기의 블록 설정에서 뷰어 유형을 선택합니다.
사용 가능한 뷰어 유형:
Custom Viewer (Full Featured)
- 모든 내비게이션 컨트롤이 포함된 “풀 기능” PDF 뷰어
- 검색, 확대/축소 도구, 다양한 표시 옵션 제공
- 모바일 최적화
- 설정 가능: 시작 페이지, 줌 레벨, 페이지 레이아웃, 스크롤 방향
- 켜기/끄기: 다운로드, 툴바, 이미지 스탬프, 형광펜, 드로잉 도구, 텍스트 선택
Light Viewer (Fast & Simple)
- 단순하고 빠르게 로딩되는 최소 UI 뷰어
- 문서를 빠르게 미리보기 할 때 적합
- 모바일 최적화
- 별도 설정 없이 바로 동작
Flipbook Viewer (Interactive Pages)
- 페이지 넘김 애니메이션이 있는 인터랙티브 뷰어
- 실제 책/잡지를 넘기는 경험을 재현
- 카탈로그, 브로셔, 마케팅 자료에 적합
- 모바일 최적화가 되어 있지 않습니다.
- 설정 가능: 애니메이션 스타일, 페이지 그림자, 배경색
Native Browser Viewer (Standard)
- 브라우저 내장 PDF 렌더링을 사용
- 추가 뷰어 스크립트가 필요 없음
- 가장 가벼운 옵션
- 브라우저에 따라 동작이 약간 다를 수 있음
연결(Linked) PDF는 선택한 뷰어가 해당 PDF가 표시되는 모든 위치에 적용됩니다.
매뉴얼(Manual) 블록은 선택한 뷰어가 그 블록에 입력한 모든 URL에 적용됩니다.
표시 형태
임베디드 뷰어는 선택한 뷰어 구성(Viewer configuration)으로 PDF를 페이지 안에 직접 표시합니다.
Custom Viewer에서 제공되는 것:
- 내비게이션 툴바가 포함된 전체 PDF 콘텐츠
- 페이지 컨트롤(이전/다음, 줌)
- 검색 기능
- 다운로드/인쇄 버튼(허용한 경우)
- 설정에 따라 커스터마이징 가능한 기능
Light Viewer에서 제공되는 것:
- 단순한 PDF 표시
- 기본 내비게이션
- 빠른 로딩을 위한 최소 UI
Flipbook Viewer에서 제공되는 것:
- 페이지 넘김 애니메이션
- 책처럼 읽는 경험
- 인터랙티브 페이지 넘김
임베디드 뷰어를 추천하는 경우
추천 대상:
- 고객이 사이트에서 충분히 읽어야 하는 긴 문서
- 확대/축소가 필요한 기술 사양서
- 훑어보기가 중요한 카탈로그
- 뷰어를 배치할 공간이 있는 페이지
- 데스크톱 중심 콘텐츠
비추천 대상:
- 짧은 PDF(이 경우 버튼 표시를 추천)
- 모바일 중심 스토어(화면이 답답해질 수 있음)
- 공간이 제한적인 페이지
- 한 페이지에 PDF가 많은 경우
테마에 임베디드 뷰어 추가하기
- Shopify 관리자에서 Online Store > Themes로 이동합니다.
- 사용 중인 테마에서 Customize를 클릭합니 다.
- PDF를 표시할 페이지 유형(상품/컬렉션 등)으로 이동합니다.
- Add section 또는 Add block을 클릭합니다.
- Apps 영역에서 PDF Connect를 찾습니다.
- PDF Embedded Viewer를 선택합니다.
- Save를 클릭합니다.
매뉴얼 모드를 사용하려면 PDF Embedded Manual을 추가하고, 블록 설정에 URL을 1개 또는 여러 개 붙여넣으세요.
임베디드 확장(Extension) 커스터마이징
테마 편집기에서 임베디드 뷰어가 페이지에 표시되는 방식을 커스터마이징할 수 있습니다.
Show heading - 섹션 제목 표시/숨김
Heading text - 섹션 제목 문구 변경(예: “PDF 문서”)
Viewer height - 뷰어 높이를 화면(뷰포트) 대비 비율로 설정(데스크톱 전용, 모바일은 전체 화면 사용)
Show container border - 뷰어 영역에 테두리 표시
이 설정은 확장(Extension)의 레이아웃/스타일에만 적용됩니다. 실제 PDF 뷰어 기능(확대/축소, 다운로드, 툴바, 내비게이션 등)은 각 PDF의 앱 Viewer Configuration 섹션에서 설정합니다.
PDF Embedded Manual의 경우, 뷰어 기능은 블록 설정에서 구성합니다(연결된 PDF가 없어도 됨).
임베디드 뷰어에서 여러 PDF 표시
한 페이지에 여러 PDF를 연결하면, 임베디드 뷰어가 아래로 세로로 쌓아서 표시합니다.
- 첫 번째 PDF는 첫 번째 뷰어에 표시됩니다.
- 두 번째 PDF는 두 번째 뷰어에 표시됩니다.
- 고객은 아래로 스크롤하며 각 PDF를 확인합니다.
이 방식은 페이지가 매우 길어질 수 있습니다. 여러 PDF를 제공해야 한다면 버튼 표시 스타일을 고려해 보세요.
모바일에서의 임베디드 뷰어
뷰어는 모바일 화면에 맞게 반응형으로 동작하지만, 다음 점을 고려하세요.
- 세로 공간을 많이 차지할 수 있습니다.
- 확대/축소 컨트롤이 작게 느껴질 수 있습니다.
- 뷰어 내부 스크롤이 다소 불편할 수 있습니다.
- 모바일 중심 스토어라면 버튼 표시 스타일을 고려해 보세요.
뷰어 기능
Zoom(확대/축소) - 고객이 확대/축소할 수 있습니다.
Page navigation(페이지 이동) - 특정 페이지로 이동할 수 있습니다.
Search(검색) - PDF 안의 텍스트를 찾을 수 있습니다(일부 뷰어에서 지원).
Download(다운로드) - 허용한 경우 PDF를 기기에 저장할 수 있습니다.
Print(인쇄) - 허용한 경우 뷰어에서 바로 인쇄할 수 있습니다.
성능 팁
PDF 용량 최적화 - 5MB 이하 파일이 가장 빠르게 로드됩니다.
레이지 로딩(Lazy loading) - 페이지에서 보일 때만 뷰어가 로드됩니다.
썸네일/초기 로딩 - 전체 PDF보다 먼저 1페이지가 로드됩니다.
모바일 유의사항 - 큰 파일은 모바일 데이터 환경에서 느리게 로드될 수 있습니다.