AI가 만든 화면, 매번 색이 달라진다면 — DESIGN.md 규칙 파일 하나로 안내문·자료 목록 맞추기
▶ 실습 영상: 이 글의 순서대로 DESIGN.md를 만들고 화면을 맞춰 보는 과정
AI에게 학교 안내문 화면을 부탁하면 그럴듯한 결과가 나옵니다. 문제는 다음 날 자료 목록 화면을 부탁할 때 생깁니다. 어제는 남색이던 제목이 오늘은 파란색이 되고, 본문 글자는 14px로 작아지고, 카드에는 없던 그림자와 그라데이션이 붙습니다. 같은 기관의 화면인데 서로 다른 사이트처럼 보이게 됩니다.
이번에는 이 문제를 디자인 규칙 문서 하나로 줄이는 방법을 알려드리겠습니다. 가상의 '우리학교 자료실'(교사·학부모 대상, 남색과 청록)을 예로 들어 ① 규칙 파일 DESIGN.md를 만들고 ② 그 규칙으로 안내 카드 화면과 자료 목록 화면을 만든 뒤 ③ 두 화면이 규칙을 지켰는지 점검·수정하는 데까지 갑니다. 규칙 파일 전문과 프롬프트 3개는 모두 복사해 쓸 수 있습니다.
DESIGN.md — 화면의 색·글자·간격·버튼 모양 같은 규칙을 적어 둔 글 문서입니다. .md는 마크다운(#, - 같은 기호로 제목과 목록을 표시하는 간단한 글 형식)이라는 뜻입니다.
디자인 토큰 — "남색 = #1F3A68", "본문 = 17px"처럼 디자인 값에 이름을 붙여 둔 것. 이름으로 부르면 매번 같은 값이 쓰입니다.
HEX 값 — #1F3A68처럼 # 뒤 여섯 자리로 색을 적는 방법입니다.
색 대비 — 글자색과 바탕색의 밝기 차이를 숫자로 나타낸 것. 웹 접근성 기준(WCAG)은 일반 본문에 4.5:1 이상을 권장합니다.
| 필요한 것 | ChatGPT·클로드·제미나이 등 글과 코드를 쓸 수 있는 AI 채팅 하나, 결과를 열어 볼 웹 브라우저 |
| 입력 자료 | 독자, 기관 색, 화면 용도, 접근성 요구 + 화면에 들어갈 안내 문구와 자료 목록(글로 붙여 넣기) |
| 만드는 것 | 규칙 파일 DESIGN.md 1개, 안내 카드 화면·자료 목록 화면 HTML 2개 |
| 걸리는 시간 | 규칙 작성 20분, 두 화면 제작 20분, 점검·수정 15분 안팎(첫 회 기준 예상) |
한눈에 보기 — 규칙 문서를 가운데 두고 세 번 묻기
1. 원문 살펴보기 — DESIGN.md에는 무엇을 적나
DESIGN.md는 구글의 화면 디자인 도구 Stitch가 소개한 형식으로, Stitch 문서는 이를 "AI 에이전트가 읽고 일관된 화면을 만들도록 돕는 디자인 시스템 문서"라고 설명합니다. 여기서 중요한 단어는 '읽는다'입니다. 어느 도구에서나 자동으로 적용되는 설정 파일이 아니라, 사람이 AI에게 건네는 규칙 설명서에 가깝습니다. 도구에 따라 프로젝트 폴더의 파일을 스스로 열어 보는 경우도 있지만, 일반 AI 채팅에서는 내용을 직접 붙여 넣거나 첨부해야 합니다.
VoltAgent의 Awesome DESIGN.md 저장소에는 여러 유명 웹사이트의 화면에서 뽑아낸 DESIGN.md가 모여 있습니다. 2026년 10월 11일 확인 기준 저장소 안내의 개수 표시는 73개였고, 사이트마다 DESIGN.md와 색·글자·버튼을 모아 보여 주는 미리보기 HTML(preview.html, preview-dark.html)이 함께 있다고 안내합니다. 저는 그중 Linear 항목의 DESIGN.md(design-md/linear.app/DESIGN.md)를 직접 열어 어떤 항목을 적는지 살펴봤습니다.
Linear 파일은 크게 두 부분이었습니다. 앞부분에는 이름 붙인 값 목록이 있습니다. 예를 들어 primary 색은 #5e6ad2, 가장 큰 제목은 80px·굵기 600, 구역 사이 간격은 96px처럼 적혀 있고, 버튼은 "바탕은 primary 색, 모서리는 md" 식으로 앞의 이름을 다시 불러 씁니다. 뒷부분에는 그 값을 언제 쓰고 언제 쓰지 말지가 문장으로 적혀 있습니다. "강조색을 섹션 바탕에 쓰지 말 것", "두 번째 강조색을 더하지 말 것" 같은 금지 목록(Do's and Don'ts)과, 화면 폭별로 카드가 몇 줄로 바뀌는지(Responsive Behavior)가 대표적입니다. 파일 끝에는 확인하지 못한 부분(Known Gaps)도 따로 적어 두었습니다.
한 가지 참고할 점이 있습니다. 저장소 첫 화면에서는 각 파일이 9개 항목(분위기, 색, 글자, 컴포넌트, 배치, 깊이, 금지 목록, 반응형, 에이전트 프롬프트 안내)을 담는다고 소개하는데, 제가 연 Linear 파일의 제목 구성은 위 그림처럼 조금 달랐습니다. 파일마다 세부 구성이 다를 수 있으니 항목 이름보다 "값 + 쓰는 곳 + 금지"를 함께 적는 방식을 가져오면 됩니다.
저장소는 MIT 라이선스로 표기되어 있고, 공개 웹사이트에서 보이는 CSS 값을 정리한 것이며 각 사이트의 시각적 정체성에 대한 소유권을 주장하지 않는다고 밝힙니다. 그래서 이 글에서는 유명 브랜드 화면을 따라 하지 않고, 구조만 참고해 우리 기관의 색과 규칙을 새로 정하는 쪽으로 실습합니다.
2. 왜 "깔끔하게"로는 안 맞춰질까
"깔끔하게", "세련되게"는 사람마다, 요청할 때마다 다르게 해석될 수 있습니다. 그래서 규칙 문서에는 형용사 대신 값을 적습니다. 숫자로 적어 두면 두 번째 장점이 생깁니다. 결과물이 규칙을 지켰는지 확인할 수 있게 됩니다. "16px 미만 글자가 있는가?"는 예·아니오로 답할 수 있지만, "읽기 편한가?"는 그렇지 않습니다.
3. 실습 — 우리학교 자료실 규칙 파일 만들기
실습 입력은 다음과 같습니다. 실제 기관의 공식 디자인 규정이 아니라 연습용 가상 설정입니다.
| 입력칸 | 실습 예시 |
|---|---|
| 독자 | 교사와 학부모. 휴대폰으로 급히 확인하는 경우가 많음 |
| 기관 색 | 남색과 청록 (정확한 색 값은 정해지지 않음 → AI에게 제안받기) |
| 용도 | 행사 안내 카드 화면, 가정통신문·양식 자료 목록 화면 |
| 접근성 요구 | 본문 16px 이상, 명확한 제목 위계(큰 제목 → 중간 제목 → 작은 제목), 키보드 초점 표시 |
| 피할 것 | 과한 그림자, 움직이는 효과 |
아래 프롬프트 A에 이 입력을 넣어 규칙 파일을 만들고, 제가 다듬은 결과가 바로 다음 상자의 DESIGN.md입니다. 그대로 복사해 기관 이름과 색 값만 바꿔 쓰셔도 됩니다.
우리학교 자료실 DESIGN.md 전문 (실습용 규칙 파일)
정해 둔 색 조합의 대비는 WCAG 공식(두 색의 상대 밝기로 (밝은 쪽+0.05)÷(어두운 쪽+0.05)를 계산)으로 직접 계산했습니다.
| 글자 / 바탕 | 대비 | 기준 |
|---|---|---|
| 본문 #1F2937 / 흰색 | 14.68 : 1 | 본문 4.5:1 이상 충족 |
| 흰 글자 / 남색 버튼 #1F3A68 | 11.27 : 1 | 충족 |
| 보조 글자 #4B5563 / 페이지 바탕 #F4F6F9 | 6.98 : 1 | 충족 (두 화면 중 가장 낮은 글자 대비) |
| 진청록 글자 #0B4F49 / 연청록 꼬리표 #E3F3F1 | 8.24 : 1 | 충족 |
| 남색 글자 / 연남색 꼬리표 #E8EDF5 | 9.59 : 1 | 충족 |
| 검색창 테두리 #6B7686 / 흰색 | 4.60 : 1 | 입력칸 테두리 3:1 이상 충족 |
| 카드 테두리 #C9D2DE / 흰색 | 1.53 : 1 | 글자가 아닌 장식 선이라 위 기준 대상 아님. 구분이 필요한 입력칸에는 쓰지 않음 |
4. 실제 결과 — 같은 규칙으로 만든 두 화면
규칙 파일을 붙여 넣고 프롬프트 B와 같은 조건(같은 공통 CSS, 외부 라이브러리 없음, 모바일 규칙 포함)으로 클로드에게 맡겨 만든 HTML 두 개입니다. 아래는 블로그에서 볼 수 있게 항목 일부만 남긴 축소판이며, 색·글자 크기·간격 값은 원본 파일과 같습니다. 같은 프롬프트라도 AI 도구와 시점에 따라 결과는 달라질 수 있습니다.
담임 선생님과 15분씩 대면 또는 전화로 상담할 수 있습니다. 원하는 날짜와 방식을 신청서에 적어 주세요.
가정통신문, 신청서, 수업 자료를 한곳에서 찾을 수 있습니다.
두 화면이 같은 규칙을 공유하는지는 눈으로만 보지 않고, 브라우저가 실제로 계산한 값을 읽어 오는 작은 점검 스크립트로 확인했습니다. 폭 1000px(PC)과 390px(휴대폰) 두 가지로 열었습니다.
| 디자인 항목 | 규칙 | 안내 카드 화면 | 자료 목록 화면 |
|---|---|---|---|
| 색 | 2절 표의 12가지만 | 표 밖의 색 0개 | 표 밖의 색 0개 |
| 글자 크기 | 모든 글자 16px 이상 | 가장 작은 글자 16px | 가장 작은 글자 16px |
| 제목 단계 | h1 → h2 → h3, 건너뛰지 않기 | 1차 h1 → h3 건너뜀 → 고친 뒤 h1·h2·h3·h2·h3 | h1 · h2 · h3×5 |
| 간격 | 4·8·12·16·24·32·48px만 | 1차 20px 발견 → 고친 뒤 0건 | 1차 20px 발견 → 고친 뒤 0건 |
| 카드 | 흰 바탕, 1px 선, 모서리 12px, 그림자 없음 | 적용 (중요 카드만 청록 왼쪽 선) | 적용 (자료 1건 = 카드 1개) |
| 버튼 | 높이 48px, 남색 바탕, 동사로 끝나는 이름 | 신청서 내려받기 / 안내문 전체 보기 | 찾기 / 내려받기 |
| 모바일 | 600px 이하 카드 한 줄, 버튼 폭 100% | 390px에서 가로 스크롤 없음 | 390px에서 가로 스크롤 없음 |
| 가장 낮은 글자 대비 | 본문 4.5:1 이상 | 6.98 : 1 | 6.98 : 1 |
점검에서 실제로 걸린 것이 두 가지 있었습니다. 첫째, 안내 화면에서 큰 제목(h1) 바로 아래에 카드 제목(h3)이 와서 제목 단계를 건너뛰었습니다. 카드 위에 "학부모 안내"라는 중간 제목(h2)을 넣어 고쳤습니다. 둘째, 버튼 좌우 여백 20px이 "간격은 4·8·12·16·24·32·48px만"이라는 규칙과 충돌했습니다. 화면이 틀린 게 아니라 규칙 문서 안에서 두 항목이 서로 어긋난 것이었습니다. 규칙의 버튼 여백을 24px로 바꾸고 화면도 맞췄습니다. 위 전문은 고친 뒤의 규칙입니다.
참고로 이번에는 규칙 없이 만든 화면과의 비교 실험은 하지 않았습니다. 그래서 "규칙을 쓰면 몇 % 더 일관된다" 같은 효과는 말씀드릴 수 없고, 규칙이 있으면 지켰는지 확인하고 고칠 수 있다는 점까지만 보여 드립니다.
5. 규칙 파일을 AI에게 건네는 방법
특히 두 화면을 서로 다른 대화에서 만들 때 주의하세요. 이전 대화의 규칙을 AI가 기억한다고 가정하지 말고, 새 대화마다 규칙 전문을 다시 넣습니다. 이미 만든 첫 화면의 CSS도 함께 붙여 넣으면 두 화면의 class 이름과 공통 스타일을 맞추기 쉽습니다.
6. 바로 쓰는 프롬프트 3개
아래 세 프롬프트는 이 글을 위해 직접 설계한 AI오토마타 응용 프롬프트입니다. 문서 구조는 Awesome DESIGN.md의 예시 파일을 참고했고, 원문 문장을 옮기지 않고 새로 썼습니다. 세 프롬프트는 모두 같은 결과물(규칙 파일 1개 + 화면 2개)을 다룹니다.
언제 쓰나: 기관이나 수업용 화면의 규칙 파일이 아직 없을 때 처음 한 번 씁니다.
첫 제작 — 디자인 규칙 파일(DESIGN.md) 만들기
입력 예시: [독자] 교사와 학부모, 휴대폰으로 급히 확인하는 경우가 많음 / [기관 색] 남색과 청록, 정확한 값은 제안해 줘 / [용도] 행사 안내 카드 화면, 가정통신문·양식 자료 목록 화면 / [접근성 요구] 본문 16px 이상, 명확한 제목 위계, 키보드 초점 표시 / [피하고 싶은 것] 과한 그림자와 움직이는 효과
확인할 결과: 색 표에 HEX 값이 있는지, 글자 표에 px 숫자가 있는지, 간격 값 목록이 있는지 봅니다. "적당한", "부드러운" 같은 말만 남은 칸이 있으면 그 칸만 숫자로 다시 써 달라고 하세요.
언제 쓰나: 규칙 파일이 완성된 뒤, 실제 화면을 만들 때 씁니다. 새 대화에서 쓴다면 규칙 전문을 반드시 다시 넣습니다.
결과 만들기 — 규칙을 적용한 안내 카드·자료 목록 화면
입력 예시: [규칙 전문] 위 DESIGN.md 전문 / [안내 내용] "2학기 학부모 상담 주간 안내. 신청은 10월 20일(화)까지, 상담은 10월 26일~30일 오후 3~6시, 대면 또는 전화, 문의 교무실" / [자료 목록] "2학기 학부모 상담 주간 신청서 / 학부모 / 가정통신문 / HWP·48KB / 2026.10.12" 같은 줄을 5개
확인할 결과: 두 파일을 각각 브라우저로 열어 보고, 휴대폰 폭으로 줄였을 때 버튼이 한 줄을 다 차지하는지 봅니다. 두 파일의 <style> 부분이 같은지도 비교하세요.
언제 쓰나: 두 화면이 나온 뒤, 규칙을 지켰는지 확인하고 어긋난 곳만 고칠 때 씁니다.
문제 수정 — 규칙 위반 항목만 찾아 고치기
입력 예시: [규칙 전문] 위 DESIGN.md 전문 / [notice.html 코드]와 [list.html 코드] 프롬프트 B로 받은 두 파일 전문을 그대로
확인할 결과: 위반 표가 "어디에서 / 무엇이 / 몇에서 몇으로" 바뀌었는지 보여 주는지 확인합니다. 제가 실습에서 실제로 걸린 두 가지(제목 단계 건너뜀, 규칙끼리 어긋난 버튼 여백)가 이런 형태로 나와야 합니다. 대비 숫자를 계산식 없이 "충분합니다"라고만 하면 근거를 다시 요청하세요.
7. 결과 확인 기준과 흔한 실패 3가지
| 확인할 것 | 통과 기준 |
|---|---|
| 규칙 파일을 복사해 쓸 수 있나 | 색·글자·간격·카드·버튼·모바일·피할 표현이 모두 수치나 예시로 적혀 있음 |
| 두 화면이 같은 규칙을 공유하나 | 두 파일의 공통 CSS가 같고, 표 밖의 색과 16px 미만 글자가 없음 |
| 제목 위계가 분명한가 | h1 → h2 → h3 순서, 한 화면에 h1 하나 |
| 휴대폰에서 읽히나 | 폭 390px 안팎에서 가로 스크롤 없음, 버튼 높이 44px 이상 |
| 대비 주장에 근거가 있나 | 계산한 숫자 또는 "점검 필요" 표시 |
① 파일 이름만 주고 "DESIGN.md대로 만들어 줘"라고 하기. 일반 AI 채팅은 내 컴퓨터의 파일을 볼 수 없습니다. 내용을 모르니 그럴듯하게 짐작해서 만듭니다. → 전문을 붙여 넣거나 첨부하고, 만들기 전에 색과 글자 크기를 다시 적게 해서 읽었는지 확인합니다.
② 규칙 문서 안에서 수치가 서로 어긋나기. 이번 실습에서 실제로 겪은 일입니다. "간격은 8px 단위"라고 해 놓고 버튼 여백은 20px로 적으면, AI는 둘 중 하나를 어기게 됩니다. → 프롬프트 C의 8번처럼 규칙끼리의 모순도 점검 대상에 넣고, 화면보다 규칙을 먼저 고칩니다.
③ "대비가 충분합니다"를 그대로 믿기. AI가 숫자 없이 접근성을 장담하는 경우가 있습니다. → 계산식과 숫자를 요구하고, 없으면 "점검 필요"로 남겨 둔 뒤 대비 계산 도구로 직접 확인합니다.
- 이 글의 '우리학교 자료실' 규칙은 실습용 가상 설정입니다. 실제 학교·기관 화면에 쓸 때는 기관의 공식 상징색·디자인 지침이 있는지 먼저 확인하세요.
- 저장소의 DESIGN.md들은 실제 웹사이트에서 뽑은 값입니다. 다른 회사의 화면처럼 보이게 만드는 데 쓰지 말고 구조를 배우는 용도로 보세요.
- 화면에 넣는 연락처·학생 정보는 실제 값 대신 예시 값으로 먼저 만들고, 게시 직전에 바꾸세요.
- 색 대비 수치는 이 글의 색 값 기준입니다. 색을 바꾸면 다시 계산해야 합니다.
가정통신문, 준비물 안내, 시간표 화면을 같은 규칙 하나로. 담임이 바뀌어도 화면 모양은 그대로입니다.
교사신청 기간·대상·방법을 담는 안내 카드를 매번 같은 순서와 크기로. 어르신 대상이면 최소 글자 크기를 더 키우세요.
기관학생에게 규칙 파일을 주고 화면을 만들게 한 뒤, 프롬프트 C로 서로 점검하는 활동으로.
수업함께 보면 좋은 글
출처
- VoltAgent / awesome-design-md (GitHub) — 저장소 구성, 개수 표시, MIT 라이선스, 소유권 고지 (2026-10-11 확인)
- design-md/linear.app/DESIGN.md — 예시 파일의 항목 구성 (2026-10-11 확인)
- Google Stitch — DESIGN.md 개요 — DESIGN.md의 정의 (2026-10-11 확인)
댓글
댓글 쓰기