위젯 문서
웹사이트에 Currency.Wiki 환율 변환기 위젯을 임베드하고 맞춤 설정하는 완벽 가이드.
목차
1 시작하기
웹사이트에 환율 변환기 위젯을 추가하는 것은 매우 쉽습니다. 아래 간단한 단계를 따라주세요:
- 위젯 빌더 페이지로 이동하여 위젯 외관을 맞춤 설정하세요
- 선호하는 위젯 스타일, 통화, 테마를 선택하세요
- 생성된 임베드 코드(스크립트 또는 Iframe)를 복사하세요
- 위젯이 표시될 위치에 코드를 웹사이트 HTML에 붙여넣으세요
팁: 위젯 빌더의 빠른 시작 프리셋을 사용하면 미리 구성된 위젯으로 빠르게 시작할 수 있습니다.
2 임베드 방법
스크립트 임베드(추천)
스크립트 임베드 방식은 위젯을 페이지에 직접 삽입합니다. 통화 드롭다운 메뉴가 주변 콘텐츠 위에 표시되어 쉽게 선택할 수 있습니다.
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- 드롭다운이 위젯 컨테이너 밖에 표시됨
- 상호작용 통화 선택에 최적
- 페이지와 완벽하게 통합
Iframe 임베드
Iframe 임베드 방식은 위젯을 위한 격리된 컨테이너를 생성합니다. 이 방식은 안전하며 엄격한 콘텐츠 정책 환경에서도 작동합니다.
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- 페이지 스타일과 완전히 격리됨
- 엄격한 콘텐츠 보안 정책과 호환
- 간단하고 안전한 구현
참고: 전체 상호작용(드롭다운이 콘텐츠 위에 표시)이 필요하면 스크립트 임베드를, 격리 또는 CSP 제한이 필요하면 Iframe 임베드를 사용하세요.
3 위젯 스타일
웹사이트 디자인에 맞는 11가지 다양한 위젯 스타일 중에서 선택하세요. 각 스타일은 다양한 용도와 표시 크기에 최적화되어 있습니다.
mini
250x140px
콤팩트한 단일 라인 변환기. 헤더나 좁은 공간에 적합.
square
250x250px
1:1 비율 위젯과 교환 버튼. 사이드바에 적합.
compact
300x180px
필수 기능만 갖춘 소형 변환기.
inline
480x56px
수평 레이아웃. 콘텐츠나 내비게이션 내 임베드에 이상적.
tall
200x280px
클래식 라벨이 있는 세로 사이드바 레이아웃.
mini-chart
250x260px
환율 변동 이력을 보여주는 스파크라인 차트 포함 콤팩트 변환기.
multi-expandable
300x320px
다중 통화 변환기. 사용자가 통화 추가/삭제 가능.
multi-fixed
300x300px
고정 환율 목록. 특정 환율 표시용으로 적합.
rates-compact
250x320px
최종 업데이트 시간 포함 압축 환율 목록.
rates-viewer
300x500px
상세 환율 정보가 포함된 전체 차트 뷰.
rates-viewer-compact
300x400px
차트가 포함된 압축 버전 환율 뷰어.
4 URL 파라미터
URL 파라미터로 위젯을 맞춤 설정하세요. 이 파라미터는 스크립트와 Iframe 임베드 방식 모두에서 작동합니다.
| 파라미터 | 기본값 | 설명 |
|---|---|---|
| style | compact | 위젯 스타일(mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact) |
| theme | light | 색상 테마(light, dark, auto) |
| from | USD | 원본 통화 코드(예: USD, EUR, GBP) |
| to | EUR | 대상 통화 코드(예: EUR, USD, JPY) |
| amount | 1000 | 기본 변환 금액 |
| accent | #2563eb | 포인트 색상(16진수, # 제외) |
| lang | en | 위젯 언어 코드(예: en, es, fr, de) |
| flags | 1 | 국기 표시(1=표시, 0=숨김) |
| display | iso | 통화 표시 형식(iso=USD, symbol=$) |
| lock | 0 | 통화 잠금(1=잠금, 0=해제) |
| currencies | EUR,GBP,JPY | 다중 통화 위젯용 쉼표 구분 통화 목록 |
| dropdown | all | 드롭다운 내 통화(all, top10, top20, 또는 쉼표 구분 목록) |
| branding | 1 | 브랜딩 표시(1=표시, 0=숨김) |
| brandinglink | 1 | 브랜딩 클릭 가능(1=링크, 0=텍스트만) |
| format | auto | 숫자 형식(auto, us, eu, french, indian) |
| decimals | 2 | 소수점 자리수(0-6) |
| chart | 0 | 차트 활성화(1=활성, 0=비활성) |
| chartperiod | 7d | 차트 기간(7d, 14d, 30d, 90d) |
예시
다크 테마 콤팩트 변환기:
?style=compact&theme=dark&from=USD&to=EUR
다중 통화 환율:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
30일 차트가 포함된 미니 변환기:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
통화 코드를 대신해 심볼 표시:
?style=compact&display=symbol&from=USD&to=EUR
맞춤 금액과 잠금된 통화:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 맞춤 설정 옵션
테마 옵션
- light - 밝은 배경에 어두운 텍스트
- dark - 어두운 배경에 밝은 텍스트
- auto - 사용자 시스템 환경설정 자동 적용
통화 표시 형식
- iso - USD, EUR, GBP 등 ISO 코드 표시
- symbol - $, €, £ 등 통화 심볼 표시
숫자 형식
- auto - 방문자 브라우저 설정 자동 감지
- us - 미국식: 1,234.56
- eu - 유럽식: 1.234,56
- french - 프랑스식: 1 234,56
- indian - 인도식: 1,23,456.78
드롭다운 통화 옵션
- all - 지원되는 전체 170개+ 통화
- top10 - 가장 인기 있는 상위 10개 통화
- top20 - 거래량 기준 상위 20개 통화
- USD,EUR,GBP,... - 특정 통화의 사용자 지정 목록
팁: 위젯 빌더를 사용하면 모든 옵션을 시각적으로 설정하고 임베드 코드를 자동 생성할 수 있습니다.
6 문제 해결
위젯이 표시되지 않음
임베드 코드가 HTML에 올바르게 삽입되었는지 확인하세요. 스크립트 임베드의 경우, 올바른 ID의 컨테이너 div가 있는지 확인하세요. 브라우저 콘솔에서 JavaScript 오류도 확인해 보세요.
드롭다운이 작동하지 않음
iframe 임베드 사용 시 드롭다운이 위젯 영역 내에서 스크롤됩니다. 오버레이와 함께 전체 드롭다운 기능을 원하면 스크립트 임베드 방식을 사용하세요.
스타일 충돌
웹사이트의 CSS가 위젯 외관에 영향을 준다면, 위젯 스타일이 페이지와 격리되는 iframe 임베드 방식을 사용해 보세요.
콘텐츠 보안 정책(CSP) 문제
엄격한 CSP를 사용하는 경우, currency.wiki를 script-src 및 frame-src 허용 목록에 추가해야 할 수 있습니다. 예시: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
