Rivet는 인디애나 대학교 인터페이스를 위한 CSS, JavaScript, 유틸리티 클래스 및 페이지 레이아웃을 제공합니다. 실제 예제는 브라우저 번들 2.9.1을 직접 사용하므로 React이나 컴포넌트 컴파일러가 필요하지 않습니다. 이 예제는 대시보드처럼 꾸민 입학 지원서가 아니라, 방문 관련 부가 정보를 담은 간단한 워크숍 상세 페이지를 보여줍니다.
기관 정체성과 예시 콘텐츠는 서로 분리되어 있습니다. 이 페이지는 IU 시그니처를 재현하거나, 방문자를 등록한다고 주장하거나, 실제 시설을 확정하지 않습니다. 대학 서비스의 프로덕션 환경에서는 해당 대학의 승인된 브랜드 및 콘텐츠 소유권 절차를 따르세요. 코드 라이선스가 가상의 행사 정보를 공식 정보로 바꾸지는 않습니다.
Rivet의 산세리프 글꼴 계열은 BentonSans로 시작하고, 세리프 글꼴 계열은 GeorgiaPro로 시작합니다. 로컬 견본은 의도적으로 Arial과 Georgia를 대체 글꼴로 사용하며 원격 글꼴을 요청하지 않습니다. 프로덕션 구현에서는 이 미리보기에서 글꼴 파일을 복사하는 대신 기관 글꼴의 사용 권한과 제공 방식을 확인해야 합니다.
숫자 스케일은 반올림된 장2도 진행 방식입니다. 예제 제목에는 rvt-ts-32를, 패널 제목에는 rvt-ts-23을 사용하며, 컴파일된 크기는 각각 2rem과 1.4375rem입니다. 기본 텍스트 크기는 1rem입니다. 행간 1.5에는 rvt-lh-base, 1.2에는 rvt-lh-tight, 1.65에는 rvt-lh-loose를 사용하세요. 컨테이너에 중첩된 컨트롤이 의도하지 않은 디스플레이 크기를 상속하지 않도록 이 클래스를 텍스트 요소에 적용하세요.
참고 팔레트는 crimson-500 (#990000)과 blue-500 (#006298)을 구분합니다. 견본에서는 크림슨을 절제된 상단 선에 사용하고, 상호작용 스타일은 네이티브 Rivet 컨트롤을 사용합니다. 텍스트에는 black-500 (#243142)을, 보조 정보 표면에는 black-000 (#f8f9fa)을, 구분선에는 black-100 (#e2e7e9)을 사용합니다. 이 색상은 스크린샷에서 추출한 값이 아니라 실제 팔레트 항목입니다.
색상 이름만으로 모든 조합의 대비가 기준을 충족한다고 보장할 수는 없습니다. 네이티브 탭 포커스 스타일과 선택 상태를 표시되는 콘텐츠 및 aria-selected 값과 함께 유지하세요. 레이블을 크림슨으로 바꾸는 것만으로 활성 패널을 나타내지 마세요. 예제의 가상 행사 안내는 전환 컨트롤 위에 일반적인 읽기 텍스트로 표시됩니다.
Rivet 간격은 4픽셀씩 연속 증가하는 목록이 아닙니다. 루트 크기 16px 기준으로 xxs 4px, xs 8px, sm 16px, md 24px, lg 32px, xl 40px, xxl 64px, 3-xl 128px, 4-xl 192px 순으로 증가합니다. 예제에서는 모바일 페이지 안쪽 여백에 sm, 패널 주변의 간격 구성에 md, 주요 세로 간격에 lg를 사용합니다.
이 예시에서 최대 읽기 영역을 64rem으로 설정한 것은 애플리케이션의 선택 사항이며, Rivet 컨테이너 토큰을 의미하지 않습니다. 이 영역에서 4-xl 너비 토큰은 48rem/768px이고, spacing-4-xl은 12rem/192px입니다. 접미사가 같아도 치수 값이 같다는 뜻은 아닙니다. Radius-sm은 .125rem, md는 .25rem, lg는 .5rem입니다. 모든 구성 요소를 하나의 크고 둥근 카드 스타일로 바꾸지 마세요.
탭 집합은 rvt-tabs 래퍼 하나, 의미 있는 aria-label이 있는 rvt-tabs__tablist, 버튼 트리거, 그리고 이에 대응하는 rvt-tabs__panel로 구성됩니다. 각 쌍의 data-rvt-tab 값과 data-rvt-tab-panel 값은 서로 일치해야 합니다. 초기 선택을 표시하는 data-rvt-tab-init은 버튼이 아니라 패널에 지정합니다. Rivet로 식별자를 생성할 수도 있지만, 명시적으로 짝을 지정하면 이 예시를 더 쉽게 살펴볼 수 있습니다.
Rivet.init()은 탭 역할, 선택 상태, 패널 관계, 키보드 동작을 추가합니다. 숨김 상태를 별도로 전환하는 클릭 핸들러를 구현하지 마세요. 상태를 관리하는 로직이 둘이면 선택된 탭과 표시되는 패널이 서로 맞지 않을 수 있습니다. 아래의 전체 마크업에는 짧은 예시 콘텐츠가 포함되어 있으며, 설정의 스타일시트 태그와 스크립트 태그 사이에 넣을 수 있습니다.
html
<div class="rvt-tabs" data-rvt-tabs="visit">
<div class="rvt-tabs__tablist" aria-label="Plan your workshop visit" data-rvt-tablist>
<button class="rvt-tabs__tab" data-rvt-tab="overview">Overview</button>
<button class="rvt-tabs__tab" data-rvt-tab="arrival">Arrival</button>
<button class="rvt-tabs__tab" data-rvt-tab="access">Access</button>
</div>
<div class="rvt-tabs__panel" data-rvt-tab-panel="overview" data-rvt-tab-init>
<h2 class="rvt-ts-23 rvt-text-bold">A practical introduction to archives</h2>
<p>Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.</p>
</div>
<div class="rvt-tabs__panel" data-rvt-tab-panel="arrival">
<h2 class="rvt-ts-23 rvt-text-bold">Arrive at the learning studio</h2>
<p>In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.</p>
</div>
<div class="rvt-tabs__panel" data-rvt-tab-panel="access">
<h2 class="rvt-ts-23 rvt-text-bold">Choose a comfortable way to participate</h2>
<p>The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.</p>
</div>
</div>
행사 제목, 날짜, 소요 시간, 가상 예시임을 알리는 안내는 탭 바깥에 둡니다. 실제 예약 정보인지 확인하려고 방문자가 숨겨진 패널을 열어야 해서는 안 됩니다. 각 패널에는 짧은 제목과 단락 하나를 넣습니다. 세 탭의 이름은 짧아서 화면이 좁아도 한 줄로 표시할 수 있습니다.
서로 관련된 내용을 따로 읽을 수 있다면 탭이 적합합니다. 여러 프로그램의 요금을 비교하거나 두 가지 학습 계획을 비교할 때는 탭이 적절하지 않습니다. 탭을 전환하면 한쪽 정보가 숨겨지기 때문입니다. 이런 경우에는 표나 펼쳐진 목록이 더 적합합니다.
Rivet의 중단점은 30em, 46.25em, 67.5em, 78.75em, 87.5em입니다. 일반적인 초기 글꼴 크기인 16px을 기준으로 각각 480, 740, 1080, 1260, 1400px에 해당합니다. 중간 중단점은 흔히 쓰는 768px이 아니라 740px입니다. 반응형 유틸리티에는 중단점과 -up을 붙입니다. 예를 들어 rvt-ts-32-md-up과 같이 사용합니다.
탭 표시줄은 여러 줄로 쌓이면 안 됩니다. 이름을 짧게 유지하고 좁은 화면에서 실제 텍스트를 확인하세요. 글자를 줄여 맞추는 것은 적절한 탐색 구성 요소를 선택하는 일을 대신할 수 없습니다. 기본 탭 동작에서는 왼쪽 및 오른쪽 화살표 키로 탭 사이에 초점을 이동하며, 양 끝에서는 처음이나 마지막 탭으로 순환합니다. Enter 또는 Space를 누르면 초점이 있는 탭이 활성화됩니다. 닫힌 패널 안의 대화형 요소는 탭 순서에 남아 있으면 안 됩니다.
제공된 설치 방법은 2.9.1로 버전을 고정하고, 배포된 CSS와 브라우저용 압축 JavaScript를 사이트의 정적 파일 디렉터리에 복사합니다. Rivet.init()을 호출하기 전에 해당 에셋을 제공하세요. 프레임워크가 나중에 HTML를 마운트한다면, 초기 페이지 검색에서 새 노드를 찾았으리라 가정하지 말고 문서화된 JavaScript 통합 수명 주기를 사용하세요.
독립 실행형 미리보기는 공식 CSS 및 JavaScript 에셋을 로컬에서 실행합니다. 글꼴 대체 설정과 래퍼 너비는 명시적으로 지정한 애플리케이션 재정의입니다. 네트워크를 통한 예약 요청, 데이터 저장, 분석, 생성된 확인 메시지는 없습니다. 이 예시에서 보여 주는 상호작용은 기본 탭 기능뿐입니다.
로컬 스타일시트를 불러온 다음 초기화 전에 탭 트리거와 패널이 각각 세 개씩 있는지 확인하세요.
Rivet를 초기화하고 각 탭을 포인터로 전환한 다음, 화살표 키와 Enter 또는 Space를 사용해 다시 확인하세요.
데스크톱과 좁은 모바일 화면에서 선택된 트리거, 표시되는 패널, 초점 표시 윤곽선, 문서 너비를 확인하세요.
일치하는 데이터 속성과 초기 패널을 명시합니다. 초점과 표시 상태는 기본 Rivet가 관리합니다.
html
<div class="rvt-tabs" data-rvt-tabs="visit">
<div class="rvt-tabs__tablist" aria-label="Plan your workshop visit" data-rvt-tablist>
<button class="rvt-tabs__tab" data-rvt-tab="overview">Overview</button>
<button class="rvt-tabs__tab" data-rvt-tab="arrival">Arrival</button>
<button class="rvt-tabs__tab" data-rvt-tab="access">Access</button>
</div>
<div class="rvt-tabs__panel" data-rvt-tab-panel="overview" data-rvt-tab-init>
<h2 class="rvt-ts-23 rvt-text-bold">A practical introduction to archives</h2>
<p>Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.</p>
</div>
<div class="rvt-tabs__panel" data-rvt-tab-panel="arrival">
<h2 class="rvt-ts-23 rvt-text-bold">Arrive at the learning studio</h2>
<p>In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.</p>
</div>
<div class="rvt-tabs__panel" data-rvt-tab-panel="access">
<h2 class="rvt-ts-23 rvt-text-bold">Choose a comfortable way to participate</h2>
<p>The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.</p>
</div>
</div>
배포된 CSS와 JavaScript를 포함하고 Rivet.init()을 한 번 호출하세요.
화살표 키로 초점을 이동하고 Enter 또는 Space를 눌러 초점이 있는 탭을 활성화하세요.
완전한 독립 실행형 예시
전체 문서에 레이아웃, 컨트롤 및 초기화가 포함되어 있습니다. 링크된 예시 아카이브의 압축을 풀면 정확한 상대 경로의 벤더 에셋을 얻을 수 있습니다. 그런 다음 HTTP로 제공하세요.
html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Workshop visit — Rivet specimen</title><link rel="stylesheet" href="vendor/rivet-2.9.1/rivet.min.css"><style>:root{--rvt-font-sans:Arial,sans-serif;--rvt-font-serif:Georgia,serif}body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}body{border-top:8px solid #990000;margin:0;background:#fff;color:#243142}.shell{max-width:64rem;margin:auto;padding:2rem 1rem 3rem}.eyebrow{font-size:.875rem;letter-spacing:.06em;color:#4c5a69}.intro{max-width:48rem}.facts{display:flex;gap:1.5rem;flex-wrap:wrap;padding:1.5rem;margin:2rem 0;background:#f8f9fa;border:1px solid #e2e7e9}.facts p{margin:0}.facts strong{display:block;font-size:.875rem}.rvt-tabs__panel{min-height:13rem}footer{margin-top:2rem;padding-top:1rem;border-top:1px solid #e2e7e9;font-size:.875rem;color:#4c5a69}h1{margin:.5rem 0 1rem}@media(min-width:46.25em){.shell{padding:3rem 2rem}.rvt-tabs__panel{min-height:12rem}}</style></head><body><main class="shell"><p class="eyebrow">LEARNING STUDIO · RIVET COMPONENT EXAMPLE</p><h1 class="rvt-ts-32 rvt-text-bold rvt-lh-tight">Reading the archive</h1><p class="intro rvt-ts-18">A hands-on introduction to working with historical sources. Explore the visit information below.</p><div class="facts"><p><strong>Session</strong>Saturday · 10:00–11:30</p><p><strong>Format</strong>Small-group workshop</p><p><strong>Location</strong>Learning studio · Room 204</p></div><p class="rvt-ts-14 rvt-m-bottom-lg">Fictional event for interface demonstration. No reservation is made.</p><div class="rvt-tabs" data-rvt-tabs="visit">
<div class="rvt-tabs__tablist" aria-label="Plan your workshop visit" data-rvt-tablist>
<button class="rvt-tabs__tab" data-rvt-tab="overview">Overview</button>
<button class="rvt-tabs__tab" data-rvt-tab="arrival">Arrival</button>
<button class="rvt-tabs__tab" data-rvt-tab="access">Access</button>
</div>
<div class="rvt-tabs__panel" data-rvt-tab-panel="overview" data-rvt-tab-init>
<h2 class="rvt-ts-23 rvt-text-bold">A practical introduction to archives</h2>
<p>Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.</p>
</div>
<div class="rvt-tabs__panel" data-rvt-tab-panel="arrival">
<h2 class="rvt-ts-23 rvt-text-bold">Arrive at the learning studio</h2>
<p>In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.</p>
</div>
<div class="rvt-tabs__panel" data-rvt-tab-panel="access">
<h2 class="rvt-ts-23 rvt-text-bold">Choose a comfortable way to participate</h2>
<p>The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.</p>
</div>
</div><footer>Native Rivet 2.9.1 tabs · Arial font fallback · Original example content<br>Keyboard: use Left and Right to move between tabs, then Enter or Space to activate.</footer></main><script src="vendor/rivet-2.9.1/rivet.min.js"></script><script>Rivet.init();</script></body></html>
Sources에서 완전한 예시를 다운로드하세요. README에 정확한 로컬 실행 명령이 안내되어 있습니다.
벤더 경로는 이 문서에 대한 상대 경로로 유지하세요. 아카이브에는 이 미리보기에 사용된 에셋이 모두 포함되어 있습니다.
04
Rivet 디자인 시스템 에이전트 설정
구현 시작점
공식 시작 안내를 기준으로 rivet-core 2.9.1 브라우저 에셋 경로를 확인했습니다. 서버에 맞게 공개 디렉터리를 조정하세요. 미리보기에는 로컬 사본과 대체 글꼴을 사용합니다. Sources에 포함된 완성된 실행 예제 ZIP에는 미리보기에 필요한 정확한 의존성과 전체 문서도 들어 있습니다. ZIP의 압축을 푼 뒤 해당 디렉터리에서 python3 -m http.server 8080을 실행하고 http://localhost:8080/indiana-rivet.html을 여세요. 모듈 기반 예제는 file://로 열지 마세요.
bash
npm install [email protected]
mkdir -p public/vendor/rivet
cp node_modules/rivet-core/css/rivet.min.css public/vendor/rivet/
cp node_modules/rivet-core/js/rivet.min.js public/vendor/rivet/
# Add these tags to the HTML served from public/:
# <link rel="stylesheet" href="/vendor/rivet/rivet.min.css">
# ...component markup...
# <script src="/vendor/rivet/rivet.min.js"></script>
# <script>Rivet.init();</script>
프로젝트를 위한 프롬프트
에이전트 프롬프트
기본 HTML 탭을 사용하는 Rivet 2.9.1 대학 워크숍 상세 페이지를 만드세요. rivet.min.css와 rivet.min.js를 불러오고 Rivet.init()을 호출하세요. 일치하는 data-rvt-tab/data-rvt-tab-panel 값, 의미 있는 탭 목록 레이블, 첫 번째 패널의 data-rvt-tab-init을 사용하세요. 제목, 날짜, 필수 안내는 탭 바깥에 두세요. 본문은 16px, 패널 제목은 23px, 페이지 제목은 32px로 설정하고 Rivet 간격 토큰을 사용하세요. 480/740/1080/1260/1400px 중단점을 따르세요. 패널은 짧게 유지하고 키보드 초점 및 선택 동작을 유지하세요. 만들어 낸 행사 정보는 모두 시연용 콘텐츠라고 표시하세요. 허가 없이 IU 식별 표장을 사용하지 마세요.
05
Rivet 디자인 시스템 자료 및 범위
기술적 Rivet 참고 자료이자 가상의 워크숍 시연입니다. 기관 표장 사용과 글꼴 사용 권한은 Indiana University 규정을 따릅니다. 실제 방문이나 예약은 제공하지 않습니다.
