WordPress 사이트에
아름다운 플립북을

플러그인이 사이트에 추가하는 것과 추가하지 않는 것

플러그인은 내 설치 환경에 들이는 것이니, 무엇을 함께 가져오는지 궁금한 것이 당연해요. 이 플러그인은 의도적으로 작게 만들었어요. 프런트엔드에는 <div> 하나와 그 안의 <iframe> 하나만 출력하며, 여기에 loading="lazy"가 지정되어 있어서 긴 페이지 아래쪽에 있는 플립북은 독자가 그 위치에 도달했을 때만 불러와요.

프런트엔드에 스타일시트나 JavaScript를 추가하지 않아요. 데이터베이스 테이블을 만들지 않고 관리자 메뉴도 추가하지 않아요. 외부로 정보를 보내거나, 무언가를 집계하거나, API 키를 요구하지도 않아요. 플립북이 작동하는 데 필요한 모든 것은 우리 쪽 iframe 안에서 실행돼요. 그래서 플립북을 추가해도 페이지 속도 점수가 변하지 않아요.

비활성화하는 것도 간단해요. shortcode가 인식되지 않게 되므로 [toombler id="…"]를 삭제하기 전까지 글에 일반 텍스트로 표시돼요. 데이터베이스에 저장한 것이 없으므로 남는 것도 없어요.

텍스트 버전과 켜 두면 좋은 이유

플립북은 페이지를 찍은 그림이에요. 눈이 잘 보이고 마우스를 쓰는 독자에게는 괜찮지만, 프레임만 발견할 뿐 읽을 것이 없는 스크린 리더에게는 쓸모가 없어요. shortcode에 text="1"을 추가하면 책 아래에 PDF의 실제 텍스트 레이어로 채워진 접이식 텍스트 버전 보기 패널이 생겨요.

텍스트는 방문자의 브라우저가 아니라 서버에서 가져오며, 결과는 WordPress transient에 저장돼요. 텍스트를 찾았을 때는 12시간, 찾지 못했을 때는 1시간 동안 보관하므로 텍스트를 아직 추출하는 중인 플립북도 하루가 지난 뒤가 아니라 곧 반영돼요. 최대 60,000자까지 저장되는데, 이는 일반적인 브로슈어보다 많은 양이면서 400페이지짜리 매뉴얼이 옵션 테이블을 가득 채우는 일은 막아 줘요.

이 기능을 쓸 두 번째 이유도 있어요. 덜 거창하지만 현실적인 이유로, 그 텍스트가 내 페이지의 HTML 안에, 내 도메인 아래에 있다는 점이에요. 검색 엔진이 글을 읽을 때 들어갈 수 없는 프레임 대신 문서가 실제로 말하는 내용을 보게 돼요. 카탈로그나 뉴스레터를 게시하고 검색에 노출되길 원한다면, 이 속성 하나가 이 페이지의 다른 어떤 것보다 효과가 커요.

실제 텍스트가 들어 있는 PDF에서만 작동해요. OCR을 거치지 않은 스캔본에는 텍스트 레이어가 없으므로 빈 상자를 보여 주는 대신 패널이 표시되지 않아요.

요구 사항, 버전 및 라이선스

플러그인은 WordPress 5.8 이상과 PHP 7.4 이상이 필요하며, 최신 WordPress 버전에서 테스트되었어요. 일부러 낮은 기준으로 잡았어요. 특별한 기능을 쓰지 않아서 몇 년 지난 호스팅에서도 계속 작동해요.

이 shortcode는 일반적인 shortcode라서 블록 편집기, 클래식 편집기, 텍스트 위젯, 그리고 Elementor, Divi, Beaver Builder, Bricks 같은 페이지 빌더 등 shortcode를 처리하는 모든 곳에서 작동해요. Gutenberg 블록은 그 위에 얹은 편의 기능일 뿐 필수는 아니에요.

이 플러그인은 WordPress와 같은 라이선스인 GPL 버전 2 이상에 따른 무료 소프트웨어예요. 코드를 읽고, 수정하고, 직접 포크해서 자신의 사이트에서 실행할 수 있어요.

입력한 값은 이렇게 처리돼요

페이지의 HTML에 들어가는 모든 것은 의심해 볼 필요가 있으므로, 속성이 어떻게 처리되는지 알려 드릴게요. 파일 ID는 [A-Za-z0-9_-]와 일치해야 하고 10자에서 60자 사이여야 해요. 그렇지 않으면 URL에 그대로 붙이지 않고 눈에 보이는 메시지와 함께 거부돼요. 너비와 높이는 absint()를 거치므로 잘못된 문자가 있으면 레이아웃이 깨지는 대신 기본값이 적용돼요. 완성된 URL은 src에 들어가기 전에 이스케이프 처리돼요.

사람들이 자주 놀라는 점이 하나 있어요. WordPress는 인식하지 못하는 shortcode 속성을 조용히 버려요. hight="600"이라고 써도 오류가 나지 않고, 경고 없이 기본 높이가 적용될 뿐이에요. 옵션이 아무 효과가 없는 것 같다면 다른 곳을 살펴보기 전에 위 표와 철자를 먼저 비교해 보세요.

플러그인은 서버에서 우리 서버로 딱 한 번 요청을 보내며, 이는 text="1"이 설정된 경우에만 해당해요. 해당 플립북 하나의 텍스트를 요청하는 것이에요. 플러그인은 방문자에 대해 아는 것이 없으므로 방문자에 관한 정보는 전혀 전송되지 않아요.

블록과 shortcode 중 무엇을 쓸까요?

두 방식 모두 같은 HTML을 출력하므로 작업 스타일에 따라 고르면 돼요. 블록은 편집기에서 실시간 미리보기를 제공하고 옵션을 사이드바의 실제 컨트롤로 조작할 수 있어서 크기를 이것저것 시험해 볼 때 편해요. shortcode는 텍스트라서 글 사이에 복사하거나 페이지 빌더에 붙여 넣기 쉽고, 나중에 사이트의 모든 플립북을 찾고 싶을 때 검색하기도 좋아요.

다른 사람을 위해 사이트를 관리한다면 shortcode에는 실용적인 장점이 하나 더 있어요. 테마를 바꾸거나 편집기를 전환하거나 페이지 빌더를 이전해도 다시 만들 필요 없이 그대로 유지돼요. 이 플러그인을 다른 세 가지 삽입 방식(일반 iframe, JavaScript 스니펫, oEmbed)과 비교한 내용은 WordPress에 PDF 삽입하기 가이드를 참고하세요.