# Thumbtack Thumbprint 디자인 시스템

## Thumbtack Thumbprint 디자인 시스템 인터페이스 미리보기

가상의 정원 서비스 업체를 필터링하고, 제공업체를 저장한 뒤 로컬 후보 목록을 검토하세요.

## Thumbtack Thumbprint 디자인 시스템 디자인 참고 자료

Thumbprint 공개 v2 JavaScript 토큰 참고 자료입니다. 값은 2026년 10월에 확인했습니다. 예시에서는 숫자로 표현된 치수를 CSS 픽셀 단위로 변환했습니다.

### 색상 기본 요소 및 적용 역할

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| tpV2ColorGray50 | #f5f6f6 | 절제된 후보 목록 표면입니다. |
| tpV2ColorGray200 | #dddee1 | 카드 테두리 및 구분선입니다. |
| tpV2ColorGray600 | #595c61 | 흰색 배경에 표시하는 보조 정보입니다. |
| tpV2ColorGray900 | #2b2d2f | 기본 텍스트. |
| tpV2ColorBlue50 | #f0faff | 선택된 컨트롤 표면입니다. |
| tpV2ColorBlue100 | #e0f4fe | 독창적인 주택 일러스트의 채우기 색상입니다. |
| tpV2ColorBlue600 | #009fd9 | 참고용 기본 색상입니다. 작은 흰색 텍스트에는 사용하지 않습니다. |
| tpV2ColorBlue700 | #0175A3 | 흰색 텍스트를 사용하는 인터페이스 동작 색상입니다. |
| tpV2ColorBlue800 | #066286 | 포커스 윤곽선 및 일러스트의 획 색상입니다. |
| tpV2ColorGreen50 | #eefbf4 | 이용 가능 여부 레이블의 표면 색상입니다. |
| tpV2ColorGreen200 | #b0eacb | 장식용 정원 일러스트입니다. |
| tpV2ColorGreen700 | #126a4b | 이용 가능 여부 텍스트입니다. |
### 간격 및 모서리

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| tpV2SpaceXxsmall | 4 | 숫자로 지정된 픽셀 값입니다. 구성 요소 사이의 간격에 사용하세요. |
| tpV2SpaceXsmall | 8 | 숫자로 지정된 픽셀 값입니다. 구성 요소 사이의 간격에 사용하세요. |
| tpV2SpaceSmall | 12 | 숫자로 지정된 픽셀 값입니다. 구성 요소 사이의 간격에 사용하세요. |
| tpV2SpaceMedium | 16 | 숫자로 지정된 픽셀 값입니다. 구성 요소 사이의 간격에 사용하세요. |
| tpV2SpaceLarge | 20 | 숫자로 지정된 픽셀 값입니다. 구성 요소 사이의 간격에 사용하세요. |
| tpV2SpaceXlarge | 24 | 숫자로 지정된 픽셀 값입니다. 구성 요소 사이의 간격에 사용하세요. |
| tpV2SpaceXxlarge | 32 | 숫자로 지정된 픽셀 값입니다. 구성 요소 사이의 간격에 사용하세요. |
| tpV2CornerRadiusXsmall | 4 | 숫자로 지정된 픽셀 값입니다. 예시에서는 컨트롤에 Medium, 카드에 Large를 사용합니다. |
| tpV2CornerRadiusSmall | 6 | 숫자로 지정된 픽셀 값입니다. 예시에서는 컨트롤에 Medium, 카드에 Large를 사용합니다. |
| tpV2CornerRadiusMedium | 8 | 숫자로 지정된 픽셀 값입니다. 예시에서는 컨트롤에 Medium, 카드에 Large를 사용합니다. |
| tpV2CornerRadiusLarge | 12 | 숫자로 지정된 픽셀 값입니다. 예시에서는 컨트롤에 Medium, 카드에 Large를 사용합니다. |
| tpV2CornerRadiusXlarge | 16 | 숫자로 지정된 픽셀 값입니다. 예시에서는 컨트롤에 Medium, 카드에 Large를 사용합니다. |
| tpV2CornerRadiusSides | 9999 | 숫자로 지정된 픽셀 값입니다. 예시에서는 컨트롤에 Medium, 카드에 Large를 사용합니다. |
### 반응형 타이포그래피 및 레이아웃

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| tpV2BreakpointSmall | 481px | 작은 레이아웃의 기준 너비입니다. |
| tpV2BreakpointMedium | 700px | 이 기준 너비부터 예시가 2열로 바뀝니다. |
| tpV2BreakpointLarge | 1025px | 큰 레이아웃의 기준 너비입니다. |
| tpV2BreakpointSplitViewSmall | 769px | 분할 보기 전용 기준 너비이며 Medium과 같은 의미가 아닙니다. |
| tpV2BreakpointSplitViewMedium | 1060px | 더 넓은 분할 보기의 기준 너비입니다. |
| tpV2FontTitle2Size | 28 | 작은 화면에서 사용하는 제목 크기(픽셀)입니다. |
| tpV2FontTitle2ResponsiveSize | 36 | 큰 화면에서 사용하는 제목 크기(픽셀)입니다. |
| tpV2FontTitle2LineHeight | 1.1 | 단위 없는 제목 행간입니다. 시맨틱 제목 수준과는 별개입니다. |
| tpV2FontText1Size | 16 | 본문 텍스트 크기입니다. |
| tpV2FontText1LineHeight | 1.4 | 본문 행간 배율입니다. |
| tpV2FontWeightRegular | 400 | 일반 본문 텍스트입니다. |
| tpV2FontWeightBold | 700 | 대체 글꼴을 사용할 때 강조하는 텍스트입니다. |
## Thumbtack Thumbprint 디자인 시스템 전체 가이드

실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드.

완전한 안내와 구현 시작점, 소스 링크.

## Thumbtack Thumbprint 디자인 시스템: 토큰 생성 방식 선택

### v1과 v2를 구분하세요

> Thumbprint는 두 가지 토큰 세대를 제공합니다. v2 내보내기 항목의 이름은 tpV2로 시작하며 새로운 회색 계열, 반응형 제목 값, 중간 굵기의 글꼴을 포함합니다. v1 경로에 문서화된 기본 컴포넌트가 v2 값을 사용한다는 근거는 되지 않습니다. 공유 스타일을 교체하기 전에 제품이 사용하는 패키지와 토큰 세대를 확인하세요.

### 이 예시를 구성 방식 참고 자료로 활용하세요

이 예제는 공개 기본 요소를 독창적인 HTML에 직접 적용합니다. ServiceCard를 감싸거나 Thumbtack 애플리케이션과 기능이 동등하다고 주장하지 않습니다. 기본 구현은 문서화된 패키지 API에서 시작해야 합니다. 로딩, 오류, 권한 규약을 정의한 뒤 실제 서비스 데이터를 적용하세요.

## Thumbtack Thumbprint 디자인 시스템 색상 역할 및 선택 상태

### 동작, 선택 상태, 이용 가능 여부를 구분하세요

기본 로컬 동작에는 Blue700을, 저장된 컨트롤에는 Blue50을, 이용 가능 여부 텍스트에는 Green50 배경의 Green700을 사용합니다. 제공업체 이름에는 Gray900을, 보조 정보에는 Gray600을 적용합니다. 이는 문서화된 기본 요소를 바탕으로 한 애플리케이션 수준의 선택이며, 새로 만든 시맨틱 토큰 이름이 아닙니다.

### 색상만으로 후보 목록 상태를 표현하지 마세요

제공업체를 저장하면 버튼 레이블과 aria-pressed 상태가 바뀌고 색조도 달라집니다. 이용 가능 여부는 시간 표현으로 계속 표시됩니다. 필터링으로 저장된 제공업체가 숨겨져도 후보 목록에서 삭제되지는 않습니다. 이 차이를 사용자가 알 수 있도록 목록은 계속 표시됩니다.

## Thumbtack Thumbprint 디자인 시스템 타이포그래피 및 콘텐츠

### 타이포그래피 버전 차이를 고려하세요

공개 타이포그래피 가이드에는 400 및 700 굵기의 Rise와 이전 반응형 제목 크기 체계가 나와 있습니다. v2 토큰 페이지에는 다른 크기와 소수점으로 표시된 굵기가 포함됩니다. 이 둘을 합쳐 하나의 기본값으로 간주하지 마세요. 이 미리보기는 시스템 글꼴 대체 글꼴을 사용하고 v2 크기 체계를 참고해 크기를 명시하며, Rise를 재배포하지 않습니다.

### 비교에 도움이 되는 세부 정보를 작성하세요

각 제공업체에는 서비스 분류, 간단한 설명, 쉽게 이해할 수 있는 이용 가능 여부 레이블이 있습니다. 디렉터리에는 실제로 확인되지 않은 리뷰 수, 평점, 가격을 의도적으로 넣지 않았습니다. 실제 마켓플레이스에서는 이러한 값의 출처와 단위를 신뢰할 수 있어야 합니다. 장식용 별점은 유용한 정보를 제공하기보다 근거 없는 신뢰를 줄 수 있습니다.

## Thumbtack Thumbprint 디자인 시스템 카드, 간격 및 반응형 레이아웃

### 비교 정보를 한데 모으기

제공업체 카드에는 24px 패딩, 내부 간격 16px, 모서리 반경 12px를 적용합니다. 이니셜은 장식 요소이며, 옆에 있는 제목이 접근성 이름입니다. 카드 전체를 중첩 링크로 만들지 않습니다. 저장 기능은 별도의 버튼으로 제공해, 나중에 프로필 링크를 추가하더라도 선택 동작이 가로막히지 않도록 합니다.

### 좁은 화면에서는 후보 목록을 아래에 배치하기

700px에서 레이아웃을 변경해 후보 목록을 결과 아래에 배치합니다. 화면 폭이 좁으면 저장 동작을 텍스트 아래로 옮기고 장식용 집 일러스트를 숨깁니다. 헤더에는 여전히 필요한 의미가 모두 담겨 있습니다. 고정 높이 패널로 제공업체 설명이 잘리거나, 미리보기가 뷰포트 높이만 차지한 채 비어 있는 상황은 없습니다.

## Thumbtack Thumbprint 디자인 시스템 필터링 및 후보 목록 상태

### 필터와 저장 상태를 독립적으로 유지하기

분류 선택 상자와 이용 가능 여부 체크박스로 작성된 세 개의 항목을 필터링합니다. 정원 관리와 이번 주 이용 가능을 선택하면 결과가 없고 초기화 동작이 표시됩니다. 필터링은 삭제가 아니므로 이전에 저장한 항목은 후보 목록에 그대로 남습니다. 이 규칙은 소스에서 확인할 수 있으며 백엔드 없이 검증할 수 있습니다.

### 검토 동작에 실제 동작에 맞는 결과 제공하기

후보 목록이 비어 있을 때 검토하면 다음에 할 일을 안내합니다. 항목이 있으면 개수를 알리고, 처리가 현재 기기에서만 이루어진다고 명시합니다. 저장 항목이 바뀌면 해당 결과를 지워, 오래된 확인 메시지가 달라진 후보 목록을 설명하지 않도록 합니다. 이 예제는 전문가에게 연락한다고 주장하지 않습니다.

## Thumbtack Thumbprint 디자인 시스템 키보드 및 접근 가능한 선택

### 컨트롤에 기본 시맨틱 사용하기

레이블이 있는 선택 상자로 분류를 선택하고, 레이블이 있는 체크박스로 불리언 조건을 설정합니다. 각 저장 버튼에는 제공업체별 접근성 이름과 aria-pressed가 있습니다. 결과 개수는 공손한 라이브 영역을 사용하고, 검토 피드백에는 상태 시맨틱을 적용합니다. 키보드 포커스는 호버와 별도로 표시됩니다.

### 실제 제목 요소와 유연한 높이 사용하기

이 스펙먼트에서 제공업체 이름은 굵은 텍스트 범위가 아니라 h2 요소입니다. 이니셜과 원본 장식용 SVG는 접근성 트리에서 제외됩니다. 이름과 설명이 길어져도 줄바꿈되며 동작 버튼이 화면 밖으로 밀려나지 않아야 합니다. 텍스트 확대를 지원하려면 텍스트를 자르는 대신 행 높이를 유연하게 조정해야 합니다.

## Thumbtack Thumbprint 디자인 시스템 전체 구현

### 전체 예제를 실행하고 살펴보기

HTML 예제를 index.html로 저장하고 해당 폴더를 로컬 서버로 제공하세요. 예제에는 인라인 CSS와 JavaScript가 있으며, 패키지 설치나 네트워크 연결이 필요하지 않습니다. 세 개의 레코드와 선택 상태를 관리하는 Set을 명시적으로 작성해, 생성된 번들을 역분석하지 않고도 동작을 수정할 수 있습니다.

1. 완성된 HTML 파일을 저장하세요.

2. 로컬에서 서버를 실행하고 브라우저에서 여세요.

3. 결과가 없는 상태로 필터링한 다음 초기화하세요.

4. 제공업체 두 곳을 저장하고 검토한 뒤, 한 곳을 삭제하세요.

### 기본 컴포넌트로 의도적으로 전환하기

React 라이브러리로 전환할 때는 사용 중인 정확한 버전에 맞는 ServiceCard, Button 및 타이포그래피 문서를 확인하세요. 제품에 적합하다면 이 예제의 상태 모델을 유지하되, 원본 마크업은 검증된 API로 교체하세요. 시각적 회귀 테스트와 키보드 회귀 테스트 없이 v1 컴포넌트에 v2 값을 그대로 적용하지 마세요.

## Thumbtack Thumbprint 디자인 시스템 에이전트 전달 및 검토

### 에이전트에 범위가 명확한 작업 지정하기

선택한 Thumbprint 버전을 사용하고, 출처 URL과 로컬에서만 사용하는 가상 레코드를 명시한 홈 서비스 비교 화면을 요청하세요. 필터링과 선택 상태를 서로 구분해야 합니다. 동작 참고용으로 완성된 예제를 제공하고, 기본 React 컴포넌트와 독립적인 HTML 중 무엇을 사용해야 하는지 지정하세요.

### 실패 상황 검토하기

결과 없음, 후보 목록 비어 있음, 제공업체 여러 곳 저장, 검토 후 삭제, 긴 이름, 좁은 화면을 확인하세요. 카드 세 개가 보기 좋게 담긴 스크린샷만으로는 이러한 상호작용을 검증할 수 없습니다. 공유 테마를 변경해 배포하기 전에 토큰 표를 버전이 고정된 소스와 대조하세요.

- 필터링해도 저장 상태가 유지됩니다.

- 후보 목록을 변경하면 이전 확인 메시지가 지워집니다.

- 평점이나 연락 결과를 지어내지 않습니다.

## Thumbtack Thumbprint 디자인 시스템 컴포넌트 예제

### 홈 프로젝트 후보 목록 전체 예제

필터, 선택 상태, 결과 없음 복구 및 로컬 검토 기능을 포함한 독립 실행형 HTML/CSS/JavaScript 예제입니다.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Home project shortlist</title><style>
:root{--ink:#2b2d2f;--muted:#595c61;--line:#dddee1;--soft:#f5f6f6;--action:#0175a3;--selected:#f0faff}*{box-sizing:border-box}body{margin:0;padding:32px;font:400 16px/1.4 system-ui,sans-serif;color:var(--ink);background:white}h1{font-size:36px;line-height:1.05;letter-spacing:-.02em;margin:12px 0}h2{font-size:22px;margin:0 0 8px}p{margin:8px 0 20px}.eyebrow,.meta{font-size:14px;color:var(--muted)}header{display:grid;grid-template-columns:1fr 180px;gap:32px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:24px}svg{width:180px;height:120px}.filters{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:24px 0}select,button{font:inherit;border:1px solid var(--line);border-radius:8px;min-height:44px;padding:10px 16px;background:white;color:var(--ink)}label{display:flex;align-items:center;gap:8px}input{accent-color:var(--action);width:18px;height:18px}main{display:grid;grid-template-columns:2fr 1fr;gap:24px}.cards{display:grid;gap:16px}.card{padding:24px;border:1px solid var(--line);border-radius:12px;display:grid;grid-template-columns:48px 1fr auto;gap:16px;align-items:start}.avatar{display:grid;place-items:center;border-radius:50%;height:48px;background:var(--selected);color:var(--action);font-weight:700}.card p{margin:4px 0 12px}.card button[aria-pressed=true]{background:var(--selected);border-color:var(--action);color:var(--action)}.badge{display:inline-block;background:#eefbf4;color:#126a4b;padding:4px 8px;border-radius:6px;font-size:14px}aside{align-self:start;border:1px solid var(--line);border-radius:12px;padding:24px;background:var(--soft)}aside ul{padding-left:20px}aside li{margin:12px 0}.primary{background:var(--action);color:white;border-color:var(--action)}button{cursor:pointer}button:hover{border-color:var(--action)}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #066286;outline-offset:3px}#notice{font-size:14px;color:#126a4b}footer{font-size:12px;color:var(--muted);margin-top:24px}#empty{padding:24px;border:1px dashed var(--line);border-radius:12px}[hidden]{display:none!important}@media(max-width:699px){body{padding:20px}header{grid-template-columns:1fr}header svg{display:none}h1{font-size:28px}main{grid-template-columns:1fr}.card{grid-template-columns:40px 1fr;padding:16px}.avatar{height:40px}.card button{grid-column:2;justify-self:start}}
</style><body><header><div><span class="eyebrow">HOME PROJECT / FICTIONAL DIRECTORY</span><h1>Find the right help for home</h1><p>Compare the details, then build a shortlist for a garden project.</p></div><svg viewBox="0 0 180 120" aria-hidden="true"><path d="M20 66 84 16l64 50v45H20z" fill="#e0f4fe"/><path d="m9 68 75-58 75 58" fill="none" stroke="#0175a3" stroke-width="5"/><path d="M65 110V70h38v40" fill="#fff" stroke="#066286" stroke-width="3"/><circle cx="146" cy="80" r="24" fill="#b0eacb"/><path d="M146 80v35" stroke="#126a4b" stroke-width="4"/></svg></header><div class="filters"><label>Project type <select id="category"><option value="all">All garden services</option><option value="design">Garden design</option><option value="care">Garden care</option></select></label><label><input id="available" type="checkbox">Available this week</label><span id="count" class="meta" aria-live="polite"></span></div><main><section aria-label="Service providers"><div id="cards" class="cards"></div><div id="empty" hidden><h2>No matching services</h2><p>Try a different project type or include later availability.</p><button id="reset">Reset filters</button></div></section><aside><h2>Project shortlist</h2><p class="meta">Saved only while this preview is open.</p><ul id="saved"></ul><p id="savedEmpty">Save a provider to compare your options.</p><button class="primary" id="review">Review shortlist</button><p id="notice" role="status"></p></aside></main><footer>Original HTML study using documented Thumbprint v2 primitives. System font fallback; no Thumbtack service, ratings or contact request.</footer><script>
const providers=[{id:'fern',name:'Fern & Field',type:'design',description:'Planting plans for small outdoor spaces.',timing:'This week',available:true,initials:'FF'},{id:'grove',name:'Grove Garden Care',type:'care',description:'Seasonal pruning, planting and routine care.',timing:'Next week',available:false,initials:'GG'},{id:'yard',name:'Yard Workshop',type:'design',description:'Practical layouts for shared courtyards.',timing:'This week',available:true,initials:'YW'}];const chosen=new Set();const $=id=>document.getElementById(id);
function render(){const shown=providers.filter(p=>($('category').value==='all'||p.type===$('category').value)&&(!$('available').checked||p.available));$('cards').replaceChildren(...shown.map(p=>{const card=document.createElement('article');card.className='card';card.innerHTML=`<span class="avatar" aria-hidden="true">${p.initials}</span><div><h2>${p.name}</h2><p>${p.description}</p><span class="badge">${p.timing}</span></div><button aria-pressed="${chosen.has(p.id)}" aria-label="${chosen.has(p.id)?'Remove':'Save'} ${p.name}">${chosen.has(p.id)?'Saved':'Save'}</button>`;card.querySelector('button').onclick=()=>{chosen.has(p.id)?chosen.delete(p.id):chosen.add(p.id);$('notice').textContent='';render()};return card}));$('count').textContent=`${shown.length} of ${providers.length} sample providers`;$('empty').hidden=shown.length>0;$('saved').replaceChildren(...providers.filter(p=>chosen.has(p.id)).map(p=>{const li=document.createElement('li');li.textContent=p.name;return li}));$('savedEmpty').hidden=chosen.size>0;}
$('category').onchange=render;$('available').onchange=render;$('reset').onclick=()=>{$('category').value='all';$('available').checked=false;render()};$('review').onclick=()=>{$('notice').textContent=chosen.size?`Shortlist ready: ${chosen.size} provider${chosen.size===1?'':'s'}. No contact request has been sent.`:'Save at least one provider first.'};render();
</script></body></html>
```

코드 참조

- index.html로 저장하세요. 기본 Thumbprint 컴포넌트 런타임은 사용하지 않습니다.

## Thumbtack Thumbprint 디자인 시스템 에이전트 설정

### 구현 시작점

패키지나 API 인증 정보가 필요하지 않습니다. 이 예제는 로컬 애플리케이션 연구용입니다.

```
# Save the complete HTML example as index.html
python3 -m http.server 8080
# Open http://localhost:8080
```

### 프로젝트를 위한 프롬프트

```
이 가이드에 있는 Thumbprint v2 값을 사용해 서비스 비교 화면을 만드세요. 필터를 적용해도 로컬 후보 목록을 유지하고, 결과가 없을 때 복구할 수 있는 상태를 포함하며, 검토 피드백이 선택 상태와 일치하도록 하세요. 가상 레코드와 기본 시맨틱 HTML를 사용하세요. 검증된 Thumbprint React 패키지를 명시적으로 선택한 경우는 예외입니다. v1 컴포넌트에 대한 가정과 v2 토큰 이름을 혼용하지 마세요.
```

## Thumbtack Thumbprint 디자인 시스템 출처 및 범위

Thumbprint를 위한 OpenDesign 애플리케이션 가이드입니다. 실제 예제는 선택한 v2 값을 사용해 독립적으로 작성한 HTML이며, 기본 Thumbtack React 라이브러리를 사용하지 않습니다. 공개 타이포그래피 가이드에는 이전 스케일이 설명되어 있으므로, 이 페이지에서는 v2 토큰 참조와 구분해 다룹니다. 제공업체는 모두 가상입니다.

- v2 토큰 참조 구체적인 값과 버전별 내보내기 이름입니다.

- 타이포그래피 가이드 Rise와 별도로 문서화된 이전 타이포그래피 스케일.

- Service Card 문서 기본 컴포넌트 참조입니다. v1 경로가 v2 호환성을 의미하지는 않습니다.

## Thumbtack Thumbprint 디자인 시스템 관련 자료

### Twilio Paste

Paste의 테마 및 버튼 규칙과 검증된 간격 체계를 적용해 알림 초안을 작성하고, 메시지 편집·검토·실제 전송을 명확히 구분하세요.

### Visa Product 디자인 시스템

Visa의 Nova CSS를 사용해 명세서 형식 선택 화면을 명확하게 구성하세요. 기본 라디오 컨트롤, 대비되는 헤더 색상, 검토 요약을 적용합니다. 정확한 1.6.5 테마 값, 확장 가능한 간격, 전체 스타일시트 통합 방식을 확인하세요.

### Volvo Cars Web 디자인 시스템

완성된 짐 꾸리기 계획 예제를 통해 Volvo Cars의 HTML 우선 웹 기반, 실제 라이트 모드 토큰, 기본 선택형 카드 스타일을 살펴보세요. 각 선택 항목은 서로 독립적으로 설정할 수 있으며 테마 전환과 초기화도 지원합니다.


- [구현 레퍼런스](https://thumbprint.design/tokens/v2/javascript)
- [출처](https://thumbprint.design/tokens/v2/javascript)
- [코드 참조](https://thumbprint.design/tokens/v2/javascript)
- [v2 토큰 참조 구체적인 값과 버전별 내보내기 이름입니다.](https://thumbprint.design/tokens/v2/javascript)
- [타이포그래피 가이드 Rise와 별도로 문서화된 이전 타이포그래피 스케일.](https://thumbprint.design/guidelines/typography)
- [Service Card 문서 기본 컴포넌트 참조입니다. v1 경로가 v2 호환성을 의미하지는 않습니다.](https://thumbprint.design/components/service-card/v1/usage)