블로그나 웹사이트에 모공 막힘 체커 넣기 (무료 위젯)

스킨케어에 대해 글을 쓴다면 - 블로그, 뉴스레터, 클리닉 사이트, 클라이언트 스토어 - 독자들은 언젠가 같은 질문을 합니다. "그런데 이 모이스처라이저, 모공을 막나요?" 이제 여러분의 페이지 안에서 독자가 직접 답을 찾을 수 있게, Pore Clogging Checker의 무료 임베드 버전을 제공합니다.

위젯이 하는 일

위젯은 컴팩트한 프레임에 담긴 전체 분석기입니다. 방문자가 성분 목록을 붙여넣으면 일치하는 모든 성분에 대해 색상으로 구분된 0-5 코메도제닉 등급을 보여주고, 방법론 노트도 펼쳐 볼 수 있습니다. 전적으로 방문자의 브라우저에서 실행됩니다 - 계정도, 업로드도, 붙여넣은 내용 추적도 없습니다.

추가하는 방법

페이지 어디든 HTML 두 줄이면 됩니다:

<div data-pore-clogging-checker></div>
<script src="https://porecloggingchecker.app/widget.js" defer></script>

연동은 이게 전부입니다. 로더 스크립트는:

• data-pore-clogging-checker 속성이 붙은 모든 요소를 찾습니다(선호한다면 data-pcc-widget도 가능),
• 호스팅된 체커를 가리키는 iframe을 삽입하고,
• 분석이 실행된 후를 포함해 콘텐츠에 맞게 프레임 크기를 자동으로 조절합니다.

<script> 태그는 페이지당 한 번만 넣으면 됩니다 - 임베드 지점이 몇 개든 모두 마운트합니다.

설정 옵션

컨테이너 div에 데이터 속성으로 설정을 전달합니다. 모두 선택 사항입니다:

• data-locale - 위젯 언어를 강제 지정: en, zh, ja, ko. 기본값은 방문자의 브라우저를 따릅니다.
• data-theme - 스타일 지정을 위한 light, dark, system(기본값).
• data-prefill - 성분 입력란을 미리 채웁니다. 글에서 특정 제품을 리뷰할 때 유용합니다:

<div
  data-pore-clogging-checker
  data-locale="en"
  data-theme="light"
  data-prefill="Aqua, Glycerin, Cocos Nucifera Oil, Isopropyl Myristate"
></div>

전체 임베드 가이드에는 WordPress, Shopify, Squarespace, Wix, Ghost용 단계별 설명과 라이브 미리보기가 있는 인터랙티브 설정 도구가 준비되어 있습니다.

스타일링과 배치 팁

위젯은 페이지 너비를 상속하므로 글 본문과 같은 컨테이너로 감싸세요. 제품 리뷰와 결론 사이나, 성분 심층 분석 글의 보조 자료로 넣으면 가장 잘 어울립니다:

<div style="max-width: 720px; margin: 2rem auto;" data-pore-clogging-checker></div>
<script src="https://porecloggingchecker.app/widget.js" defer></script>

프레임은 사이트 자체의 라이트/다크 테마를 사용하며 방문자의 시스템 설정에 맞춰집니다.

무료인 이유

이 체커는 공공의 이익을 위한 도구입니다. 클라이언트 사이드에서 실행되고, 성분 데이터를 수집하지 않으며, 여드름성 피부를 가진 사람들이 더 나은 선택을 하도록 돕기 위해 존재합니다. 임베드에 드는 비용도, API 키도 없고 속도 제한도 걱정할 필요가 없습니다 - 방문자의 브라우저가 모든 일을 합니다.

개발자와 커스터마이징을 원하는 분들을 위해

로더는 의존성 없는 약 80줄의 바닐라 JavaScript입니다. 자체 호스팅하거나 감사하고 싶다면 소스를 직접 읽어보세요. iframe은 pcc:resize 메시지를 보내므로, 직접 높이를 관리하고 싶다면 이 메시지를 리슨할 수 있습니다.

임베드해 주신다면 어떤 것을 만드셨는지 알고 싶습니다 - hello@porecloggingchecker.app으로 연락 주세요. 그리고 독자들이 등급이 어떻게 산출되는지 묻는다면 궁극 가이드로 안내해 주세요.