무엇을 하나요
비용은 여행 전 의사결정을 좌우하는 가장 큰 요인입니다. 대부분의 여행 콘텐츠는 이를 제대로 다루지 못합니다 — "동남아치고는 저렴한 편"이라는 모호한 문단이거나, 환율이 움직이는 순간 낡아버리는 정적 표가 전부입니다. Orizn 예산 계산기 위젯은 둘 다 실시간 인터랙티브 답변으로 대체합니다.
방문자가 국가, 여행 스타일(배낭여행/중급/컴포트), 여행 기간을 선택하면, 위젯이 숙박·식비·교통·액티비티로 분해된 일일 총액과 전체 여행 총액을 방문자의 통화로 반환합니다. 모든 레인은 Numbeo, BackpackerIndex, 그리고 Orizn이 매일 밤 집계하는 사용자 제출 가격을 조합해 산출됩니다.
위젯은 완전히 자체 마운트됩니다 — HTML 어디에든 두 줄 스니펫을 붙여넣으면 렌더링됩니다. 모든 주요 CMS에서 작동하고, gzip 기준 15 KB 미만이며, 재방문 시 미리 채우기를 위한 퍼스트파티 쿠키 하나만 설정하고, 50/50 제휴 배분으로 수익화할 수 있는 가이드 구매 CTA가 기본 탑재되어 있습니다.
위젯 빌더
아래 위젯은 실제 사이트에 붙여넣게 될 프로덕션 스크립트와 정확히 동일하게 실행됩니다. 언어, 테마, 색상, 화이트라벨 — 모든 옵션이 미리보기와 스니펫을 즉시 갱신합니다. 완성되면 두 줄 스니펫을 복사하세요.
Live preview · updates as you type
The widget above runs the exact production script you would paste on your own site — async, zero dependencies, scoped CSS. Every option on the left maps to a data-* attribute in the snippet.
기능
구체적이고 출처가 명확한 기능들입니다 — 형식적인 체크박스가 아닙니다. 아래 모든 항목은 지금 이 순간 프로덕션 위젯에 들어 있습니다.
각 국가는 숙박, 식비, 교통, 액티비티의 네 가지 비용 레인을 갖습니다. Numbeo, BackpackerIndex, 그리고 매일 밤 집계되는 자체 사용자 제출 데이터를 기반으로 하며, 각 레인은 저가/중간/프리미엄 티어를 표시합니다.
방문자가 세그먼트 컨트롤 하나로 총액을 다시 계산합니다. 2주 휴가 여행자와 1년 거점을 계산하는 풀타임 디지털 노마드 모두에게 유용합니다.
가격은 내부적으로 USD로 관리되며, 매일 갱신되는 환율을 통해 50개 이상 통화로 표시됩니다. 방문자의 로케일에서 자동 감지합니다.
1일부터 365일까지 슬라이더를 드래그하세요. 페이지 이동 없이 총액이 실시간으로 갱신됩니다.
한 번의 탭으로 배낭여행, 중급, 컴포트 프리셋을 전환합니다. 각 프리셋은 네 가지 비용 레인을 비례적으로 조정합니다.
목적지에 비자가 필요한 경우 예산 옆에 작은 칩이 표시되어, 독자가 비용과 입국 규정을 한눈에 확인합니다.
결과 아래에 "베트남 예산 전체 가이드 보기" CTA가 표시됩니다. data-affiliate가 설정되면 모든 판매의 50%가 귀하에게 배분됩니다.
바닐라 JS, 비동기 로딩, 스코프 CSS. Tailwind, Bootstrap, 기존 분석 스크립트와 충돌하지 않습니다.
빛을 발하는 곳
위젯은 범용이지만, 특히 네 부류의 사용자가 가장 자주 도입합니다. 아래에서 자신의 모습을 발견했다면 스니펫을 붙여넣은 지 몇 분 안에 가치를 얻게 될 것입니다.
모든 국가 가이드의 "비용이 얼마나 드나요?" H2 아래에 위젯을 배치하세요. 독자는 모호한 문단이 아닌 구체적인 숫자를 얻어 갑니다.
홈페이지에 위젯을 고정하세요. 발리와 리스본을 비교하는 신규 구독자가 몇 초 만에 나란히 놓인 비용 답변을 얻고, 그 전환은 귀하의 제휴 코드에 귀속됩니다.
/resources/cost-of-travel에 임베드하세요. 다음 여행을 계산하는 멤버들의 가이드 구매가 호스팅 비용을 충당해 줍니다.
여행사 패키지 옆에 임베드하세요. 예산 위젯이 기대치를 잡아 주고, 여행사 상품이 다음 질문에 답합니다.
데이터 출처
각 국가의 네 가지 비용 레인은 Numbeo(생활비 지수, 약 120개국), BackpackerIndex(배낭여행 일일 비용, 약 80개국), 그리고 이상치 제거를 적용한 자체 사용자 제출 집계기로부터 매일 밤 계산됩니다. 통화 환산은 매일 갱신되는 ECB 및 OXR 중간 시장 환율을 사용합니다. 편집 투명성을 위해 각 레인의 출처 구성은 호버 시 확인할 수 있습니다.
레퍼런스
모든 옵션은 컨테이너 div의 data-* 속성입니다. JavaScript 설정은 필요 없습니다 — 붙여넣고, 원하는 속성을 지정하고, 배포하세요.
| 파라미터 | 타입 | 기본값 | 설명 |
|---|---|---|---|
data-destination | ISO3 | "" | 목적지 국가를 미리 지정합니다(예: VNM, THA, MEX). 방문자가 변경할 수 있습니다. |
data-lang | string | "auto" | 자동 감지된 브라우저 언어를 재정의합니다. 16개 로케일 지원: en, fr, es, de, it, pt, ja, ko, zh, ru, ar, hi, th, vi, tl, tr (아랍어는 RTL로 렌더링). |
data-theme | string | "auto" | 테마 강제 지정: "auto"(OS 설정 따름), "light", "dark". |
data-affiliate | string | "" | 가이드 판매의 50/50 수익 배분을 위한 ORIZN-XXXXX 또는 aff_… 코드(두 형식 모두 지원). |
data-color | hex | #2563EB | 버튼, 포커스 링, 슬라이더, CTA에 사용되는 강조 색상. hex 값만 허용됩니다(자동 정제). |
data-branding | string | "on" | "off"로 설정하면 화이트라벨 모드: "Powered by Orizn" 푸터, JSON-LD 스키마, 공유 텍스트의 orizn.app 언급이 숨겨집니다. |
data-radius | int | 16 | 위젯 카드와 입력 요소의 모서리 반경(px). |
data-font | string | "system-ui" | 위젯 전체에 사용되는 font-family. 모든 CSS 폰트 스택을 사용할 수 있습니다. |
data-currency | string | "USD" | 표시 통화. ISO 4217 코드(USD, EUR, GBP, JPY, VND, THB, …)를 지원하며 50개 이상의 통화를 사용할 수 있습니다. |
연동
같은 두 줄 스니펫이지만 스택에 따라 붙여넣는 경로가 조금씩 다릅니다. CMS별 단계별 상세 가이드:
수익화
컨테이너 div에 data-affiliate="ORIZN-XXXXX" 를 추가하세요 — ORIZN-…과 aff_… 두 코드 형식 모두 지원됩니다. 독자가 위젯을 통해 구매한 모든 가이드는 30일간 귀하에게 귀속되며, 정산은 매월 Stripe로 처리됩니다. 최소 금액 없음, 환수 없음, 제휴 대시보드에서 모든 내역을 투명하게 확인할 수 있습니다.
FAQ
위젯을 연동하는 개발자, 블로거, 제휴 마케터들이 실제로 묻는 질문입니다. 여기에 없다면 /embed/getting-started 문서가 롱테일을 다룹니다.
관련 위젯
다섯 개 위젯 모두 동일한 런타임을 공유하므로, 페이지에 두 번째 위젯을 추가해도 추가 비용이 전혀 없습니다. 스위트는 조합해 쓰도록 설계되었습니다.