시작하기

코딩을 몰라도 됩니다. 이 사이트의 시작하기는 코드를 읽는 곳이 아니라, 문장을 복사해서 AI에게 붙여넣는 곳입니다.

세 줄 요약

내가 새로 만드는지 / 이미 있는 앱에 입히는지 고릅니다 (아래 표).
고른 페이지를 위에서부터 한 단계씩 따라갑니다. 각 단계에 파란 [복사] 박스가 있습니다.
초록 박스(✅ 이렇게 나오면 성공)를 확인한 뒤에 다음으로 넘어갑니다.

어느 쪽인가요

지금 상황	갈 곳
아직 코드가 없다 / 새로 만든다	트랙 A
코드는 있지만 화면을 처음부터 다시 만든다	트랙 A
이미 돌아가는 앱의 색·글꼴만 맞추고 싶다	트랙 B
바이브코딩으로 만든 앱이 이미 돌아가고 있다	트랙 B
일부 화면만 새로 만들어 붙인다	트랙 B로 시작해서 새 화면만 트랙 A

스타터 킷 받기부터 배포까지. 붙여넣는 문장 11개로 끝납니다

트랙 A — 새 앱을 처음부터 만들기

되돌릴 수 있게 준비하고, 화면 하나씩. 색만 바꿔도(L1) 목적의 80%

트랙 B — 이미 쓰고 있는 앱에 입히기

붙여넣는 문장 11장을 한곳에. 두 번째부터는 여기만 보면 됩니다

프롬프트 지갑

⚠️

어느 쪽이든 30초만 안전 적용 규칙을 훑고 가세요. “디자인 시스템을 적용했더니 화면이 뒤틀린다”는 문제는 거의 전부 값이 아니라 적용 방식 때문입니다.

자주 나오는 질문

Q. 개발자가 아닌데 할 수 있나요? 네. 트랙 A·B는 코드를 쓰는 페이지가 아니라 AI에게 시키는 문장을 복사하는 페이지입니다. 직접 손으로 코드를 고치는 단계는 없습니다.

Q. 얼마나 걸리나요? 새 앱 화면 1개 기준 처음이면 약 2시간. 기존 앱에 색만 입히는 것(L1)은 화면당 10~20분입니다.

Q. 사내 PDF 가이드와 사이트 내용이 다른데요? 사이트가 정본입니다. PDF의 Tailwind 방식은 스택별 설치의 “Tailwind v4 앱 전용” 절로 옮겨져 있습니다.

Q. 잘못하면 앱이 망가지나요? 트랙 B는 첫 단계가 되돌릴 수 있게 만들기입니다. 그 단계를 하면 1분 안에 원상복구됩니다.

참고 페이지

설치 (5분) — 링크 두 줄이 하는 일
잘 됐는지 확인하기 — 성공·실패 화면 비교
안전 적용 규칙 — 화면이 뒤틀리지 않게

용어 사전

처음 보는 말이 나오면 여기를 보세요. 본문 안에서는 점선 밑줄에 마우스를 올리면 바로 뜹니다.

사이트 용어	쉬운 말
토큰	회사가 정한 색·크기·간격의 값 이름표. #305CDE 대신 --color-link 라고 부르는 것.
컴포넌트	미리 만들어 둔 부품. 버튼, 입력칸, 표, 배지 같은 것.
하드코딩	값을 코드에 직접 박아 넣는 것. 나중에 한꺼번에 못 바꿔서 문제가 됩니다.
노브	부품에 달린 조절 손잡이(--jt-* 값). 부품을 뜯어고치지 말고 이것만 돌립니다.
스코프	시스템이 적용되는 울타리 범위(.jt-scope). 좁게 시작해 넓혀갑니다.
채택 레벨	어디까지 입혔는지 나타내는 단계. L1 색 → L2 글꼴 → L3 부품 → L4 간격.
Productive	업무형 조판. 일을 처리하는 앱에 씁니다. (기본값)
Expressive	홍보형 조판. 읽고 구경하는 페이지에 씁니다.
컨테이너	본문이 차지하는 최대 가로 폭. 720 / 1200 / 1440 중에 고릅니다.
텍스트 팽창	번역하면 글자가 길어지는 현상. 한글 3자가 영어 12자가 됩니다.
뷰포트 메타	휴대폰에서 화면이 축소돼 보이지 않게 하는 <head> 안의 한 줄 설정.
전역 리셋	브라우저가 기본으로 넣는 여백을 0으로 초기화해 두는 것.
MCP	AI가 다른 프로그램(스티치 등)을 직접 읽어오게 해주는 연결 통로.
스타터 킷	세팅이 이미 끝난 빈 프로젝트. 받아서 열기만 하면 됩니다.
컴포넌트 계약	부품을 쓸 때 앱이 지켜야 할 4가지 약속. 이것만 지키면 버전이 올라가도 안 깨집니다.
AGENTS.md	프로젝트 루트에 두는 AI용 규칙 파일. AI가 대화 시작 때 읽습니다.

⭐ 트랙 A — 새 앱을 만든다