1
평생 1회전역 규칙 심기
내 PC의 모든 프로젝트에 적용되는 기본 원칙입니다. 한 번만 하면 됩니다.
- 우측 Customizations 패널에서 + Global 클릭 →
GEMINI.md가 열립니다 - 아래 내용을 전부 복사해 붙여넣기
- Ctrl + S 로 저장 — 저장하지 않으면 적용되지 않습니다 (가장 흔한 실수)
- 패널 새로고침(🔄)을 눌러 규칙이 목록에 뜨는지 확인
info
왜 이것만 넣었나 — 규칙 파일은 길수록 좋은 게 아닙니다. AI가 규칙 없이도 잘하는 내용은 빼고, 틀리면 사고가 나는 것만 넣었습니다. (파일 1개당 12,000자 제한)
warning
전역 규칙은 제니트리와 무관한 개인 프로젝트에도 적용됩니다. 첫 줄의 "제니트리 사내 웹/앱 프로젝트 전체에 적용" 문장을 지우지 마세요 — AI가 그 문장을 보고 무관한 프로젝트에서는 완화해 적용합니다.
GEMINI.md
# 제니트리(Janytree) 전역 규칙 — Antigravity Global Rules
## 0. 적용 범위
제니트리 사내 웹/앱 프로젝트 전체에 적용한다.
프로젝트 폴더에 `.agents/rules/`가 있으면 그 규칙이 더 구체적이며 우선한다.
## 1. 대화 방식
- 한국어로 답한다. 전문 용어를 쓸 때는 한 줄 쉬운 설명을 붙인다.
- 요청자는 **코딩 초보자**다. 바꾼 파일 경로와 "무엇을 왜 바꿨는지"를 항상 함께 알려준다.
- 화면·기능은 **한 번에 하나씩** 만든다. 하나가 끝나면 멈추고 확인을 받은 뒤 다음으로 넘어간다.
- 확신이 없으면 추측해서 진행하지 말고 **먼저 질문한다.**
## 2. 디자인 — 절대 규칙
1. 색·크기·간격 값을 코드에 직접 쓰지 않는다. `#hex`·`rgb()`·임의 px 금지. 반드시 CSS 변수 `var(--...)`로 참조한다.
2. `--color-primary`(먹색 #1F2328)는 주버튼·헤더·본문에, `--color-accent`(파랑)는 링크·포커스·활성 상태에만 쓴다. **주버튼을 파랑으로 만들지 않는다.**
3. 경고(warning)는 **노란 배경 + 어두운 글자**로 표시한다. 노란 배경에 흰 글자 금지.
4. 본문 글자 **12px 미만 금지**(캡션은 11px까지 허용).
5. 간격은 **4px의 배수**만 쓴다. 13px·17px 같은 값 금지.
6. 버튼·입력창·셀렉트 높이는 `--control-height`로 통일한다.
7. 아이콘은 **Google Material Symbols Rounded**만 쓴다. 이모지·타 아이콘 라이브러리·자체 제작 SVG 금지.
8. 로고는 `brand/` 폴더의 원본 파일을 그대로 쓴다. 색·비율 변경, 그림자 추가 금지. **헤더 로고 높이는 28px.**
9. 토큰에 없는 값이 필요하면 임의로 만들지 말고 **먼저 질문한다.**
10. 모바일·태블릿·데스크탑 모든 폭에서 **가로 스크롤이 없어야 한다.**
## 3. 토큰 파일
- `jt-tokens.css`는 **읽기 전용**이다. 편집·삭제·값 변경 금지.
- 디자인 시스템이 개정되면 이 파일을 **통째로 교체**한다. 파일 안 `--jt-ds-version` 값이 현재 적용 버전이다.
- 값이 문서와 다르면 **`jt-tokens.css`가 이긴다.**
## 4. 코드 안전
- 이미 동작하는 기능·화면 구조·데이터 처리 로직을 요청 없이 바꾸지 않는다.
- "더 예뻐 보인다"는 이유로 레이아웃을 바꾸지 않는다.
- 파일 삭제, 여러 파일 일괄 변경, 새 라이브러리 추가 전에는 먼저 알리고 확인받는다.
- API 키·비밀번호·접속 토큰을 코드에 직접 쓰지 않는다. 환경변수(`.env`)를 쓰고 `.env`는 `.gitignore`에 넣는다.
- Supabase를 쓰는 경우 새로 만드는 테이블에는 **RLS(행 단위 접근 제어)를 반드시 켠다.**
## 5. 작업 마무리 보고
작업이 끝나면 항상 3줄로 보고한다.
1. 바꾼 파일 목록
2. 무엇을 왜 바꿨는지
3. 내가 눈으로 확인하는 방법
세팅 확인 항목
2
프로젝트마다폴더와 파일 준비
이 준비 없이 프롬프트부터 넣으면 AI가 값을 스스로 추정해 다른 앱과 색이 어긋납니다.
내프로젝트/ ├── .agents/rules/ │ └── jt-core.md ← 3단계에서 만듦 ├── docs/ │ ├── jt-tokens.css ← 세팅키트에서 복사 │ └── JT_디자인시스템_v4.0.md ├── public/ │ └── brand/ ← 로고 폴더 통째로 │ ├── logo/ │ └── README.md └── (앱 소스 파일들)
warning
Git 초기화는 필수입니다. 되돌릴 수단이 없으면 시작하지 마세요.
세팅 확인 항목
3
프로젝트마다작업공간 규칙 심기
이 앱의 정보를 적어두면, 이후 모든 화면에 자동으로 적용됩니다.
- Customizations 패널에서 + Workspace 클릭
- 파일 이름을
jt-core로 입력 →.agents/rules/jt-core.md생성 - 아래 내용을 붙여넣고 Ctrl + S
- `[ ]` 대괄호를 이 앱에 맞게 채우기 — 비워두면 AI가 추측합니다
- 활성화 모드가 Always On 인지 확인 (파일 맨 위
trigger: always_on)
jt-core.md
---
trigger: always_on
description: 제니트리 디자인 시스템 v4.0 — 이 프로젝트의 화면 제작 규칙
---
# JT 디자인 시스템 — 이 프로젝트 적용 규칙
## 1. 앱 정보 (프로젝트 시작 시 채울 것)
- 앱 이름: [예: JT_디자인 시스템]
- 분야: [교육]
- 기술 스택: [Next.js]
- 디자인 시스템 버전: **v4.0**
- 채택 레벨: [L1 색만 / **L2 색+폰트+컴포넌트(권장)** / L3 +간격·크기]
## 2. 토큰 원본
이 프로젝트의 디자인 값 정본은 **@jt-tokens.css 하나**다.
- 모든 색·글자·간격은 이 파일의 CSS 변수로만 참조한다.
- **이 파일은 편집하지 않는다.** 값을 바꿔야 하면 디렉터에게 요청한다.
- 값의 배경 설명이 필요하면 `JT_디자인시스템_v4.0.md`를 참조하되, **값은 `jt-tokens.css`가 우선**한다.
## 3. 화면을 만들 때
1. **Alias 변수만 쓴다** — `--color-text`, `--color-bg-container`, `--color-border` 등. 팔레트 원시값(`--blue-500`, `--gray-300`)을 컴포넌트에서 직접 참조하지 않는다. 그래야 다크모드·밀도 전환이 자동으로 된다.
2. 컴포넌트 생김새는 디자인시스템 §12를 따른다. 다만 **화면 구조(무엇을 넣을지)는 강제하지 않는다** — 앱 사정에 맞게 구성한다.
3. 표의 숫자열은 우측 정렬 + `--font-num` + `font-variant-numeric: tabular-nums`.
4. 포커스 링은 `:focus-visible`에 `--color-focus`로 반드시 남긴다(키보드 접근성).
5. 다크모드를 지원하는 앱이면 `[data-theme="dark"]` 상태에서도 확인한다.
6. 표는 `overflow-x:auto` 컨테이너로 감싼다. 터치 대상은 최소 44×44px.
## 4. 화면 완성 시 자가 점검 (매번 실행)
아래를 스스로 점검하고, 위반이 있으면 고친 뒤 **무엇을 고쳤는지 보고**한다.
- [ ] `#hex`·`rgb()` 직접 사용 0건 (`jt-tokens.css` 제외)
- [ ] 주버튼이 먹색 `--color-primary`인가 (파랑 아님)
- [ ] `--color-accent`(파랑)가 링크·포커스·활성에만 쓰였는가
- [ ] warning이 노란 배경 + 어두운 글자인가 (흰 글자 아님)
- [ ] 12px 미만 글자 없음 (캡션 11px 예외)
- [ ] 간격 값이 모두 4px 배수
- [ ] 모바일 폭(≤639px)에서 가로 스크롤·글자 잘림 없음
- [ ] 아이콘이 모두 Material Symbols Rounded
- [ ] 토큰에 없는 값을 임의로 만든 곳 없음
## 5. 멈춤 신호
다음 상황에서는 진행하지 말고 **즉시 멈추고 질문**한다.
- 필요한 색·크기가 토큰에 없을 때
- 토큰 파일을 수정해야 할 것 같을 때
- 요청받지 않은 파일을 고쳐야 할 것 같을 때
세팅 확인 항목
4
프로젝트마다첫 프롬프트 실행
규칙은 이미 벽에 붙어 있으니, 이 한 번만 길고 이후는 짧아집니다.
warning
위
body{...} 블록은 신규 앱 전용입니다. 기존 앱에 넣으면 글자 기준이 16px→14px로 바뀌면서 화면 전체가 뒤틀립니다.prompt-new-first.txt
docs/jt-tokens.css를 이 프로젝트의 전역 스타일에 연결해줘.
값을 복사하지 말고 파일을 그대로 import 해서 쓰고, 파일은 수정하지 마.
이어서 아래 기본 스타일을 전역에 추가해줘:
body{
font-family:var(--font-base);
font-size:var(--fs-base);
line-height:var(--lh-normal);
color:var(--color-text);
background:var(--color-bg-layout);
word-break:keep-all;
-webkit-font-smoothing:antialiased;
}
.num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; }
:focus-visible{ outline:2px solid var(--color-focus); outline-offset:2px; }
그리고 <head>에 폰트와 아이콘을 연결해줘:
- Pretendard: https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css
- Figtree + Noto Sans SC/TC: https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;900&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Sans+TC:wght@400;500;700&display=swap
- Material Symbols Rounded: https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..24,400,0..1,0
- viewport 메타: width=device-width, initial-scale=1, viewport-fit=cover
마지막으로 public/brand/logo/logo-h.svg를 높이 28px로 넣은 헤더가 보이는
시작 화면을 만들어줘. 파비콘은 favicon.svg.
세팅 확인 항목
5
확인세팅 검증
규칙이 실제로 작동하는지 확인합니다. 여기서 걸러내면 나중에 고생하지 않습니다.
check_circle
정상이면 — "주버튼은
--color-primary(먹색), 로고 높이 28px, hex 직접 사용 금지…" 같은 답이 나옵니다.error
규칙 이야기를 못 하면 셋 중 하나입니다.
① GEMINI.md를 저장(Ctrl+S)하지 않았다 → 저장 후 패널 새로고침
② 워크스페이스 규칙이 Always On이 아니다 → 패널에서 모드 변경
③ Antigravity가 이 폴더를 워크스페이스로 열지 않았다 → 폴더를 직접 열어서 작업
prompt-verify-new.txt
지금 너에게 적용 중인 규칙을 항목별로 요약해줘.
그리고 이 프로젝트의 주버튼 색상 변수 이름과, 헤더 로고 높이를 말해줘.
세팅 확인 항목
6
이후이제부터는 한 줄이면 됩니다
세팅이 끝났습니다. 화면을 추가할 때마다 이렇게만 요청하세요.
자동 적용
색·글자·간격이 토큰에서 자동으로 나옵니다
자동 점검
AI가 화면 완성 시 스스로 9개 항목을 검사합니다
자동 정지
토큰에 없는 값이 필요하면 임의로 만들지 않고 질문합니다
prompt-next.txt
[화면 이름] 화면을 만들어줘.