2. ⚠️ 안전 적용 규칙 (필독)

이 장은 “디자인 시스템을 적용했더니 화면이 뒤틀린다” 는 문제를 막기 위한 것입니다. 원인은 대부분 토큰 값이 아니라 적용 방식입니다.

2-1. 토큰만 가져오고, 리셋·구조는 가져오지 않는다

jt-utilities.css는 [class^="jt-"]로 범위를 스스로 좁혀 box-sizing을 겁니다. 즉 기존 앱의 요소에는 손대지 않습니다.

2-2. 기준 글자 크기 — 16px (웹 표준 일치) 〔v5.0 개정〕

이 시스템의 본문 기준은 16px로, 브라우저·프레임워크 기본값과 같습니다.

• 신규 앱: body{font-size:var(--fs-base)}를 그대로 써도 안전합니다.
• 기존 앱: 대부분 이미 16px 기준이므로 크기 충돌이 발생하지 않습니다. v4.0에서 이 항목이 “뒤틀림의 가장 흔한 원인”이었던 문제가 v5.0에서 사라졌습니다.
• 데이터 밀집 화면(대량 표·에디터)은 전역 크기를 줄이지 말고 [data-density="compact"](14px)를 해당 영역에만 적용하세요.

크기는 rem이 아니라 px로 정의되어 있습니다. rem은 앱마다 다른 루트 크기에 영향을 받아 예측이 어렵기 때문입니다. 브라우저 확대 대응이 중요한 대외 서비스는 앱 단위로 rem 환산을 선택할 수 있습니다(§17-3).

2-3. 변수명 충돌을 피한다

기존 앱이 이미 --color-text·--space-4 같은 이름을 쓰고 있으면 값이 덮어써집니다. 충돌이 우려되면 앱 쪽에서 스코프를 좁혀 불러오거나(@scope, 또는 별도 래퍼 클래스), 기존 변수를 먼저 정리한 뒤 채택하세요. 한 앱 안에서는 한 가지 방식으로 통일합니다.

2-4. 범위를 좁혀서 적용한다 (기존 앱)

전체가 아니라 새로 만드는 화면·컴포넌트부터 적용합니다.

<div class="jt-scope">
  <button class="jt-btn">저장</button>
</div>

.jt-scope{ font-family:var(--font-base); font-size:var(--fs-base); color:var(--color-text); }

화면 하나가 안정적으로 도는 걸 확인한 뒤 다음 화면으로 넓힙니다.

2-5. 구조를 강제하지 않는다

§12 컴포넌트 카탈로그와 §13 페이지 템플릿은 “이렇게 생기면 된다”는 참조이지, “이 구조여야 한다”는 강제가 아닙니다.

• 사이더+헤더 구조가 안 맞는 앱(랜딩·단일 화면 도구·모바일 전용)은 그 구조를 쓰지 않아도 됩니다.
• 지켜야 하는 건 버튼이 charcoal이고, 링크가 blue이고, 간격이 4의 배수라는 값 규칙입니다.

2-6. 한 번에 다 바꾸지 않는다

기존 앱은 색 → 글꼴 → 컴포넌트 → 간격·크기 순으로, 화면 하나씩. 간격·크기는 레이아웃을 가장 크게 흔들므로 맨 마지막에. 채택 레벨은 §17-3 참조.