WordPress에 실시간 금 시세 위젯 추가하기

금융 블로그, 딜러 사이트, 또는 WordPress로 만든 포트폴리오 페이지를 운영하고 있다면, 플러그인이나 API 키, PHP 코드 없이도 실시간 금 시세를 추가할 수 있다. 금 시세 위젯 설정 도구가 iframe 하나를 만들어 준다. Custom HTML 블록이나 Elementor의 HTML 위젯에 붙여넣기만 하면 바로 작동한다.

위젯 설정하기

goldprice.dev/widgets/gold-price로 이동한다. 가입도 API 키도 필요 없다. 통화, 단위(트로이온스 또는 그램), 캐럿, 테마, 언어를 선택하면 페이지가 그에 맞는 iframe을 만들어 준다. 이 스니펫을 복사해서 아래 설치 방법 중 어느 것에든 사용한다.

설정 도구를 건너뛰고 기본값만 원한다면, USD, 트로이온스, 24캐럿, auto 테마, 영어 기준으로 생성되는 iframe은 다음과 같다:

<iframe src="https://goldprice.dev/embed/xau?currency=USD&unit=oz&karat=24&theme=auto&locale=en" title="Live gold price" width="360" height="190" loading="lazy" style="border:0;width:100%;max-width:360px" referrerpolicy="strict-origin-when-cross-origin"></iframe>

위젯은 60초마다 자동으로 갱신된다. goldprice.dev에서 호스팅되므로 API 키가 페이지 소스에 노출되는 일이 없다.

Gutenberg의 Custom HTML 블록으로 설치하기

1. 블록 에디터에서 글이나 페이지를 연다.
2. Custom HTML 블록을 추가한다(블록 삽입기에서 "Custom HTML"을 검색).
3. iframe 스니펫을 블록에 붙여넣는다.
4. 미리보기로 전환해 카드가 렌더링되는지 확인한 다음 발행한다.

셀프 호스팅 WordPress에서는 관리자 권한이라면 보통 이 내용이 정상적으로 저장된다. unfiltered_html 권한이 없는 편집자나 기고자로 로그인한 경우, WordPress는 저장 시 <iframe> 태그를 제거하고 블록은 빈 채로 남는다. 이 권한이 어떻게 부여되는지는 WordPress의 Custom HTML 블록 문서를 참고하라. 해결 방법은 관리자가 직접 블록을 붙여넣거나, 해당 역할에 unfiltered_html 권한을 부여하는 것이다.

사이드바나 템플릿 영역에 추가하기

동일한 Custom HTML 블록은 글 본문 바깥에서도 작동한다. 모양 → 위젯에서 사이드바나 푸터 영역에 Custom HTML 위젯을 추가하고 iframe 스니펫을 붙여넣는다. 블록 테마라면 사이트 편집기를 통해 사이드바나 페이지 템플릿 같은 템플릿 파츠에 Custom HTML 블록을 추가한다. 어느 쪽이든 위젯은 블록이 놓인 위치에서 렌더링되며 스스로 갱신된다.

Elementor로 설치하기

1. Elementor로 페이지를 편집한다.
2. HTML 위젯을 페이지로 드래그한다.
3. iframe 스니펫을 HTML 위젯의 코드 패널에 붙여넣는다.
4. 페이지를 업데이트한다.

Elementor의 HTML 위젯은 iframe을 포함한 원본 마크업을 아무것도 제거하지 않고 그대로 렌더링한다. 다른 임베드 방식과 비교해 어떤 위치에 적합한지는 Elementor의 HTML 위젯 가이드를 참고하라.

위젯 옵션

설정 도구는 이 값들을 iframe의 src에 쿼리 파라미터로 설정한다. 인식되지 않는 값은 그냥 기본값으로 대체되므로, 오타가 임베드를 깨뜨리지 않는다.

이 URL을 직접 만들어야 하는 경우는 거의 없다. 설정 도구에서 옵션을 설정하고 생성된 iframe을 복사하면 된다.

위젯이 나타나지 않는다면

iframe이 있어야 할 자리가 비어 있음, 셀프 호스팅 WordPress. 거의 항상 위에서 언급한 unfiltered_html 권한 문제다. 블록 에디터가 저장 시 태그를 조용히 제거한 것이다. 관리자 권한으로 블록을 다시 추가하거나, 에디터의 코드 보기에서 저장된 글 콘텐츠를 확인해 iframe이 제거되었는지 확인하라.

WordPress.com에서 아무것도 렌더링되지 않음. WordPress.com의 무료 및 하위 요금제는 Custom HTML 블록에서 커스텀 iframe 임베드를 허용하지 않는다. 호스팅 기능이 활성화된 요금제가 필요하다. 어떤 요금제가 해당하는지는 WordPress.com의 Custom HTML 블록 지원 페이지를 참고하라.

위젯은 로드되지만 잘려 보임. 카드에는 최소 320px의 너비와 190px의 높이가 필요하다. 테마의 사이드바나 콘텐츠 열이 그보다 좁다면, 위젯을 줄이는 대신 전체 너비 영역에 배치하라.

API가 더 나은 선택인 경우

이 iframe은 통화, 단위, 캐럿, 테마, 언어를 다루지만, 그래도 고정된 레이아웃 안의 고정된 카드다. iframe이 아니라 자체 컴포넌트 안에 가격을 넣고 싶거나, 테마 옵션이 다루지 않는 디자인이 필요하거나, 자체 차트를 위한 과거 데이터가 필요하다면 원시 API를 사용해 직접 화면을 구성하라. 금 시세 변환기는 통화 및 단위 변환에서 이런 방식이 어떤 모습이 되는지 보여주는 실제 예시다.

라이선스와 출처 표시

공식 iframe은 수정 없이 그대로 사용하고 화면에 보이는 출처 표시를 유지하는 한, 개인 및 상업 사이트 모두에서 무료로 임베드할 수 있다. 화이트라벨링하거나 자체 피드인 것처럼 표시하려면 별도의 Enterprise 계약이 필요하다. 자체 제품에서 사용하는 원시 API 데이터는 Pro 요금제부터 시작하는 일반 상업 라이선스를 따른다. 전체 약관은 이용약관과 출처 표시 가이드에 있다.