개발자 친구도 못 알아들어서, 제일 쉽게 다시 씁니다 — 스타일시드가 하는 일

어제 개발자 친구한테 카톡이 왔습니다.

"그 design md 잖아? 토스나 글로벌웹 토큰 추출한 거 샘플로 들어있고. 그럼 스타일시드를 쓰면 어떤 측면에서 일반 개발자들이 도움을 받음?"

10년 넘게 개발한 친구인데도 "디자인 룰 엔진"이라는 설명으로는 감이 안 온다는 겁니다. 제 잘못이죠. 그래서 그때 카톡으로 했던 설명을 그대로, 제일 쉬운 버전으로 다시 씁니다.

한 줄 요약

UI/UX 디자이너가 화면 만들 때 머릿속에서 자동으로 돌리는 판단들을, 룰 파일로 박아서, AI가 코딩할 때 강제로 지키게 하는 겁니다.

토큰 샘플 모음이 아니라 판단 모음입니다. 차이가 뭐냐면 —

"판단"이 뭔데?

디자이너는 화면을 만들 때 이런 걸 생각도 안 하고 지킵니다. 몸에 박혀 있어서요:

1. 검은색은 검은색을 안 쓴다.
#000 순수 검정은 촌스럽습니다. 세련된 제품들은 전부 살짝 흐린 검정을 씁니다. 말로만 하면 안 믿으실 테니 실측 — 방금 toss.im의 CSS에서 색상값을 전부 뽑아봤습니다:

#333d4b (18회) ← 본문
#191f28 (14회) ← 제일 어두운 텍스트
#4e5968 (10회)
#3182f6 (8회)  ← 토스 블루, 유일한 강조색
...
#000000 (0회)  ← 순검정은 단 한 번도 안 나옴

토스에서 제일 어두운 글자가 #191F28입니다. 순검정이 아니라 살짝 푸른 기가 도는 짙은 회색이에요.

2. 강조색은 딱 하나.
파란 버튼 옆에 보라색 링크, 그 옆에 초록 배지 — 개발자가 만들면 이렇게 됩니다. 디자이너는 강조색 하나만 정하고 나머지는 전부 회색조로 깝니다. 색이 하나여야 "그 색 = 눌러야 하는 것"이 되니까요.

3. 폰트 크기는 아무 숫자나 쓰는 게 아니다.
15px, 17px, 19px... 필요할 때마다 즉흥으로 정하는 게 아니라, 정해진 표(예: 12·14·18·24·36·48)에서만 꺼내 씁니다. 그리고 크기마다 쓰임새가 정해져 있어요 — 48은 히어로 숫자, 18은 섹션 제목, 13은 날짜·캡션.

4. 모서리를 각지게 했으면 끝까지 각지게.
각진 카드 안에 알약 버튼이 들어가는 순간 "두 제품 붙여놓은 느낌"이 납니다.

5. 회색이 기본값, 색은 예외에만.
목록에서 정상 항목은 회색, 문제 있는 항목에만 색. 전부 색칠하면 아무것도 강조가 안 됩니다.

이런 게 74개 있습니다. 하나하나는 사소해 보이는데, 이걸 다 지킨 화면과 아닌 화면은 "전문가가 만든 것 vs AI가 뽑은 것"으로 갈립니다. 커버 이미지가 그 차이예요 — 같은 제품, 같은 프롬프트, 룰만 다릅니다.

그런데 왜 "파일로 박아야" 하는가

여기가 핵심입니다. 그냥 클로드로 코딩하면, 컨텍스트가 끊기는 순간 통일성이 사라집니다.

오늘 채팅에서 "강조색은 파랑 하나로 해줘"라고 말하면 그 화면은 그렇게 나옵니다. 그런데 다음 주에 페이지 하나 추가해달라고 하면? 그 대화 기억은 없으니 이번엔 보라색으로 뽑아옵니다. 폰트 크기도 저번엔 15px, 이번엔 16px. 페이지를 추가할 때마다 조금씩 다른 앱이 됩니다.

그래서 룰을 채팅이 아니라 프로젝트 안의 파일(CLAUDE.md, AGENTS.md, .cursorrules)로 박습니다. AI 코딩 도구들은 이 파일을 매번 읽고 시작하거든요. 프로젝트별 결정(우리 키컬러는 #3182F6, 모서리는 부드럽게)은 별도 락 파일에 저장돼서, 다음 달에 페이지를 추가해도 같은 앱으로 나옵니다.

일반 개발자가 받는 도움이 정확히 이겁니다: 디자이너를 고용하지 않고도, 디자이너가 옆에서 코드리뷰해주는 상태로 AI를 돌리는 것.

이미 만든 사이트에도 씁니다

새 화면을 만들 때만 쓰는 게 아닙니다. 지금 있는 내 웹에 돌리면 — 얼마나 통일성 있게, 룰을 갖추고 디자인됐는지 점수로 뽑고, 고칠 곳을 고쳐주고, 거기서 나온 결정들을 그 프로젝트의 룰로 만들어줍니다. 한번 룰이 되면 이후 모든 수정이 그 룰을 따르고요.

하나 더: 룰만 주면 안 지킵니다

몇 달 운영하면서 배운 건데, AI한테 룰 문서를 줘도 읽고, 끄덕이고, 첫 초안을 그대로 보여줍니다. 사람이랑 똑같아요.

그래서 채점기를 붙였습니다. 화면을 보여주기 전에 74개 룰 기준으로 0~100점을 매기고, 80점 미만이면 스스로 고친 다음에야 보여주게요. 참고로 이 채점기로 제 사이트를 채점했더니 58점이 나왔습니다. 고치는 과정까지 전부 공개해뒀어요: styleseed-demo.vercel.app/scorecard

30초 자가진단

내 사이트가 "AI 티" 나는지 지금 확인할 수 있습니다. F12(개발자도구) 열고:

1. CSS에서 #000 검색 — 나오면 감점
2. 화면의 강조색 개수 세기 — 2개 이상이면 감점
3. font-size 값 종류 세기 — 8종류 넘으면 감점
4. border-radius 값 종류 세기 — 제각각이면 감점
5. 목록/카드에서 색칠된 항목 비율 — 절반 넘게 색이 있으면 감점

3개 이상 걸리면 지금 "생성된 티"가 나고 있는 겁니다. (제 랜딩은 5개 중 4개 걸려서 58점이었습니다.)

써보기

무료고 MIT 오픈소스입니다. Claude Code / Cursor / Codex에서:

npx skills add bitjaru/styleseed

한 줄이면 붙습니다. 그다음 화면 만들 때 /ss-build 대시보드 처럼 쓰면 위의 전 과정(락 → 빌드 → 채점 → 수정)이 자동으로 돕니다.

→ github.com/bitjaru/styleseed

친구야, 이제 이해했냐?