JT 개발자센터
제니트리의 모든 웹·앱이 같은 얼굴을 갖게 하는 디자인 시스템 v5.0입니다. 디자이너·노코드 개발자·AI 코딩 도구를 쓰는 개발자 모두 여기 하나만 보면 됩니다.
값의 정본은 언제나 jt-tokens.css 하나입니다. 이 사이트의 모든 설명은 그 파일을 따라갑니다.
문서와 파일의 값이 다르면 파일이 맞습니다.
나는 어디로 가야 하나
이 사이트의 시작하기는 코드를 읽는 곳이 아닙니다. 파란 박스를 복사해서 쓰고 계신 AI 도구에게 붙여넣는 것이 전부입니다. 아래 두 카드 중 하나만 고르고, 위에서부터 한 단계씩 따라가세요.
스타터 킷 받기부터 배포까지. 붙여넣는 문장 11개로 끝납니다
🆕 새 앱을 만든다 — 트랙 A되돌릴 수 있게 준비하고 화면 하나씩. 색만 바꿔도(L1) 목적의 80%
🔧 기존 앱에 입힌다 — 트랙 B붙여넣는 문장 11장을 한곳에. 두 번째부터는 여기만 보면 됩니다
💬 프롬프트 지갑색·글자·간격·아이콘·로고. 값과 규칙을 눈으로 확인합니다
🎨 디자인만 본다코드로 직접 붙일 때는 두 줄
<head>에 두 줄. 웹폰트(Pretendard·Figtree)까지 함께 따라옵니다.
<link rel="stylesheet" href="https://ds.janytree.app/v5/jt-tokens.css">
<link rel="stylesheet" href="https://ds.janytree.app/v5/jt-utilities.css">→ 설치 자세히 · 잘 됐는지 눈으로 확인하기
지금 버전
| 버전 | v5.0 (MAJOR · 2026-08) |
| 컴포넌트 | 47종 — Tier 1 (12) · Tier 2 (13) · Tier 3 (22) |
| 아이콘 | Material Symbols Rounded 7,798종 + 핵심 29종 SVG |
| 최근 변경 | 본문 기준 14 → 16px · 타입 세트 2벌 · 컨테이너 4종 · 웹폰트 자동 로드 |
우리 앱 적용 현황
버전업이 끝나지 않는 가장 흔한 이유는 어떤 앱이 어디에 멈춰 있는지 아무도 모르기 때문입니다. 앱을 올릴 때마다 이 표를 갱신하세요.
| 앱 | 채택 레벨 | DS 버전 | 마지막 갱신 |
|---|---|---|---|
| 개발자센터 (이 사이트) | L4 | v5.0 | 2026-08 |
| 자주측정 기록 | 미적용 | — | — |
| 적재 최적화 | 미적용 | — | — |
| 품목 등록 | 미적용 | — | — |
이 사이트가 지금 보고 있는 색·글꼴·간격·테두리는 전부 jt-tokens.css에서 나옵니다.
다크 모드도 같은 토큰의 다크 블록을 그대로 씁니다 — 문서에 끼워 넣은 미리보기까지 함께 전환됩니다.
디자인 시스템 사이트가 자기 시스템을 안 쓰면 설득력이 없기 때문입니다.
채택 레벨이 무엇인지는 채택 레벨 L1~L4를 보세요.
이 사이트의 구성
| 메뉴 | 무엇이 있나 | 누가 보나 |
|---|---|---|
| 시작하기 | 트랙 A·B · 프롬프트 지갑 · 설치 · 안전 규칙 | 전체 (코딩 몰라도 됨) |
| 디자인 | 색·글자·간격·레이어·모션·아이콘·로고·접근성 | 디자이너·기획자 |
| 개발 | 컴포넌트 계약 · 패턴 5종 · 템플릿 · 스택별 적용 · 툴체인 | 개발자 |
| 입히기 | 채택 레벨 · 변경 대조표 · 자주 깨지는 곳 | 기존 앱 담당 |
| 컴포넌트 | 47종 그림 색인 + 복붙 코드 | 개발자 |
| 리소스 | 다운로드 · AI 규칙 · llms.txt · 프롬프트 | 바이브코딩 |
| 토큰 뷰어 | 정본 CSS를 그대로 불러와 그린 실물 | 전체 |