경로 요약에는 수하물 옵션 앞에 두 공항 코드와 도시 이름, 가상의 소요 시간이 표시됩니다. 이를 통해 사용자가 추가 옵션을 비교하는 동안에도 구매 맥락을 확인할 수 있습니다. 점선 연결선은 CSS의 독창적인 일러스트이며, 항공사의 경로 그래픽이나 실제 서비스에 대한 약속이 아닙니다.
선택 항목과 총액을 구분하세요
한쪽에는 여행객과 수하물 선택 항목을, 옆에는 금액 내역을 배치합니다. 선택 상태에 따라 선택 컨트롤과 금액이 함께 결정됩니다. 휴대전화에서는 문서 순서에 따라 선택 항목 다음에 요약이 표시되므로, 어떤 입력값이 총액에 반영됐는지 명확하게 알 수 있습니다.
Kiwi Orbit 디자인 시스템 제품 색상 및 피드백
주요 동작에는 제품 색상군을 사용하세요
토큰 패키지는 hover와 active 상태에 서로 다른 색조를 적용한 녹색 제품 동작 색상을 제공합니다. 임의로 브랜드 녹색을 추측하지 말고 참조에 정확한 버튼 역할별 값을 명시하세요. 중립적인 구름색 표면으로 선택 가능한 추가 옵션을 감싸 검토 동작과 패널이 서로 경쟁하지 않도록 합니다.
결과에 맞는 구체적인 피드백을 제공하세요
네이티브 성공 알림에는 ‘선택 항목을 로컬에서 검토했습니다’라고 표시하고 여행객 수와 총액을 안내합니다. 선택을 변경할 때마다 알림이 지워집니다. 따라서 이전의 녹색 확인 메시지가 새로 수정한 추가 옵션까지 검증한 것처럼 계속 표시되지 않습니다.
Kiwi Orbit 디자인 시스템 타이포그래피 및 가격 위계
설명 문구에는 네이티브 텍스트 역할을 사용하세요
Orbit는 13px 작은 본문과 15px 일반 본문 역할 외에도 더 큰 크기 옵션을 제공합니다. 이 예제에서는 네이티브 Text 및 Heading 구성 요소를 사용하며, 경로 코드와 총액은 독창적으로 강조했습니다. 브라우저는 여기에 문서화된 대체 글꼴 스택을 사용하며, Kiwi.com 브랜드 글꼴을 몰래 불러오지 않습니다.
금액 옆에 단위를 표시하세요
각 수하물 가격에는 여행객 1인 기준임을 표시합니다. 금액 내역에서는 선택한 추가 옵션별 가격에 여행객 수를 곱하며, 총액은 각 항목보다 시각적으로 강조됩니다. 범위가 표시되지 않은 큰 숫자는 오해하기 쉬우므로 모바일에서도 단위를 생략하지 마세요.
Kiwi Orbit 디자인 시스템 모서리 반경 및 간격 척도
컨트롤과 넓은 표면을 구분하세요
현재 반경 척도에는 2, 4, 6, 8, 12, 16px 단계와 none 및 full이 포함됩니다. 직접 작성한 경로 및 요약 패널에는 12px 모서리를 사용하고, 네이티브 컨트롤은 자체 테마 규칙을 따릅니다. 중첩된 모든 요소에 가장 큰 반경을 적용하면 양식의 위계가 흐려집니다.
줄바꿈이 발생해도 옵션 행의 구조를 유지하세요
Kiwi Orbit 디자인 시스템 제어형 체크박스 및 선택 메뉴
컴포넌트 라벨과 정보 필드 사용
Checkbox에는 공개 props를 통해 표시 라벨과 보조 정보를 전달합니다. Select에는 라벨과 여행객 1~4명을 위한 명시적 옵션을 전달합니다. 이러한 네이티브 구성은 상호작용과 라벨 지정 동작을 그대로 유지하며, 수하물 제어 요소인 것처럼 꾸민 클릭 가능한 div를 사용하지 않습니다.
추가 항목을 각각 독립적으로 모델링
기내 수하물과 위탁 수하물은 별개의 불리언 값입니다. 하나를 선택해도 다른 하나가 자동으로 선택 해제된다고 가정하지 않습니다. 이는 의도적으로 단순화한 예시 정책입니다. 실제 항공사에서는 서로 배타적인 번들이나 승객별 허용량을 적용할 수 있으며, 이 경우 다른 모델이 필요합니다.
Kiwi Orbit 디자인 시스템 선택 요금 계산 및 확인
하나의 공식으로 총액 계산
이 예시에서는 기본 요금에 선택한 1인당 추가 요금을 더한 뒤 여행객 수를 곱합니다. 화면에 표시된 옵션과 달라질 수 있는 별도의 편집 가능한 총액은 저장하지 않습니다. 모든 가격과 허용량은 명시적으로 허구이며, 현재 Kiwi.com에서 제공하는 상품이 아닙니다.
확인용 스냅샷 저장
확인 단계에서는 인원수, 수하물 선택 항목, 총액을 함께 저장합니다. 컨트롤을 변경하면 스냅샷이 삭제됩니다. 이 예시는 상태 일관성을 보여 주며, 로컬에서 클릭한 동작을 예약, 결제, 실시간 잔여석 확인 또는 최종 견적으로 표현하지 않습니다.
Kiwi Orbit 디자인 시스템 접근성 있는 선택 피드백
라벨과 재계산을 함께 확인
키보드나 포인터를 사용하는 사람은 네이티브 컨트롤로 여행객 수를 선택하고 수하물 항목을 켜고 끌 수 있습니다. 확인 결과는 상태 안내 영역에 표시됩니다. 선택 사항인 수하물에 대해 허위 검증을 하지 않습니다. 두 추가 항목을 모두 선택하지 않는 것도 이 가상의 요금에서 유효한 상태입니다.
여행객 2명을 선택하고 기내 수하물을 추가하세요.
위탁 수하물을 추가하고 세 가지 요금 내역을 모두 확인하세요.
로컬에서 선택 내용을 확인하고 항목을 변경한 뒤, 이전 성공 메시지가 사라지는지 확인하세요.
숨겨진 결과 방지
양식 위와 총액 옆에 허구의 예시임을 설명합니다. 동작 이름은 구매나 예약이 아닌 ‘로컬 선택 내용 확인’입니다. 모든 변경 사항은 페이지 안에서만 처리되며, 필요하지 않은 승객 개인 정보는 데모용으로 요청하지 않습니다.
Kiwi Orbit 디자인 시스템 Provider 및 컴파일된 스타일
호환되는 안정 버전 사용
이 예시에서는 React components 27.7.0과 token references 11.0.0을 고정해 사용합니다. OrbitProvider, 패키지의 defaultTheme, 컴파일된 lib/tailwind.css를 가져옵니다. 이 스타일시트를 생략하면 React 트리가 렌더링되더라도 유틸리티 기반 컴포넌트 스타일이 불완전해집니다.
OrbitProvider 및 패키지 defaultTheme.
components 27.7.0의 컴파일된 lib/tailwind.css.
패키지 빌드 환경에는 Node.js 22 이상이 필요합니다.
배포 요구 사항을 명확하게 표시
Kiwi Orbit 디자인 시스템 컴포넌트 예제
main.jsx — 완전히 작동하는 예제
수하물을 선택하고 예시 총액을 확인하세요. 아래 소스는 모든 상태와 검증 로직을 포함한 전체 React 진입점입니다.
jsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import {
OrbitProvider,
Button,
Checkbox,
Select,
Alert,
Heading,
Text,
} from "@kiwicom/orbit-components";
import defaultTheme from "@kiwicom/orbit-components/lib/defaultTheme";
import "@kiwicom/orbit-components/lib/tailwind.css";
import "./orbit.css";
function App() {
const [travellers, setTravellers] = useState("1"),
[cabin, setCabin] = useState(false),
[checked, setChecked] = useState(false),
[saved, setSaved] = useState(null);
const count = Number(travellers),
extras = (cabin ? 18 : 0) + (checked ? 32 : 0),
total = count * (96 + extras);
function update(fn) {
fn();
setSaved(null);
}
return (
<OrbitProvider theme={defaultTheme}>
<main className="trip">
<header>
<Text size="small">ORIGINAL TRAVEL SPECIMEN</Text>
<Heading as="h1" type="title1">Choose what travels with you</Heading>
<Text>
Fictional one-way fare. Prices illustrate the interface, not a
bookable flight.
</Text>
</header>
<div className="trip-grid">
<section>
<div className="route">
<div>
<strong>PRG</strong>
<span>Prague</span>
</div>
<div className="route-line">
<span>1h 45m · direct</span>
<i></i>
</div>
<div>
<strong>AMS</strong>
<span>Amsterdam</span>
</div>
</div>
<div className="options">
<Heading as="h2" type="title3">Travellers and baggage</Heading>
<Select
label="Travellers"
ariaLabel="Travellers"
value={travellers}
options={[1, 2, 3, 4].map((n) => ({
value: String(n),
label: n + " adult" + (n === 1 ? "" : "s"),
}))}
onChange={(e) => update(() => setTravellers(e.target.value))}
/>
<div className="bag-option">
<div>
<Heading as="h3" type="title4">Personal item</Heading>
<Text size="small">
Fits under the seat · included in this example fare
</Text>
</div>
<strong>Included</strong>
</div>
<div className="bag-option">
<Checkbox
label="Add cabin baggage"
info="One 10 kg bag per traveller · fictional allowance"
checked={cabin}
onChange={(e) => update(() => setCabin(e.target.checked))}
/>
<strong>
€18<span>/ traveller</span>
</strong>
</div>
<div className="bag-option">
<Checkbox
label="Add checked baggage"
info="One 20 kg bag per traveller · fictional allowance"
checked={checked}
onChange={(e) => update(() => setChecked(e.target.checked))}
/>
<strong>
€32<span>/ traveller</span>
</strong>
</div>
</div>
</section>
<aside>
<Heading as="h2" type="title3">Your example selection</Heading>
<dl>
<dt>Base fare × {count}</dt>
<dd>€{96 * count}</dd>
{cabin && (
<>
<dt>Cabin baggage × {count}</dt>
<dd>€{18 * count}</dd>
</>
)}
{checked && (
<>
<dt>Checked baggage × {count}</dt>
<dd>€{32 * count}</dd>
</>
)}
</dl>
<div className="trip-total">
<span>Total</span>
<strong>€{total}</strong>
</div>
<Text size="small">
All amounts are illustrative. No payment or reservation will be
created.
</Text>
<Button
fullWidth
onClick={() => setSaved({ count, cabin, checked, total })}
>
Review local selection
</Button>
{saved && (
<div role="status" className="trip-confirm">
<Alert type="success" title="Selection reviewed locally">
{saved.count} traveller{saved.count === 1 ? "" : "s"} · €
{saved.total}. No booking created.
</Alert>
</div>
)}
</aside>
</div>
<footer>
Native Orbit 27.7.0 components and compiled package styles. Original
layout and fictional pricing logic by OpenDesign.
</footer>
</main>
</OrbitProvider>
);
}
createRoot(document.getElementById("root")).render(<App />);
main.jsx와 같은 위치에 저장하세요. 이 사용자 지정 레이아웃 규칙은 라이브러리 토큰 참조와 구분됩니다.
04
Kiwi Orbit 디자인 시스템 에이전트 설정
구현 시작점
고정된 기본 예제를 번들링한 뒤 로컬 브라우저에서 확인했습니다. 이 예제는 로컬 애플리케이션 상태만 사용합니다.
sh
npm create vite@latest orbit-trip -- --template react
cd orbit-trip
npm install
npm install [email protected][email protected] @kiwicom/[email protected]
# Use Node.js >=22. Replace src/main.jsx and add src/orbit.css.
npm run dev
프로젝트를 위한 프롬프트
에이전트 프롬프트
Orbit 네이티브 컴포넌트와 컴파일된 스타일을 사용해 여행 추가 항목 선택기를 만드세요. 경로 정보, 1인당 가격, 선택한 추가 항목, 총액의 일관성을 유지하세요. 허구의 가격과 로컬 확인임을 명확히 표시하고, 편집 시 이전 확인 내용을 삭제하며, 예약이나 결제 기능이 있는 것처럼 표현하지 마세요.
