1
설계서(DESIGN.md)란
설계서가 무엇이고 왜 쓰는지부터 짚어보겠습니다!
색·글꼴·모양을 적어 둔 설계서 한 장
AI가 이 파일을 읽고 그대로 옷을 입힙니다. 기능은 건드리지 않습니다.
DESIGN.md는 한 회사 웹사이트의 색, 글꼴 크기, 간격, 버튼 모양, 해야 할 것과 하지 말 것을 글로 적어 둔 파일입니다. 코딩 도우미에게 "이 설계서대로 만들어 줘"라고 하면 디자인을 따로 설명하지 않아도 그 느낌으로 만들어 줍니다.
저는 연수 자료와 수업 페이지를 만들 때 이 서랍의 apple.md를 자주 씁니다. 흰 바탕에 파란색 하나만 쓰는 규칙이라 과학 그래프와 시뮬레이션이 눈에 잘 들어오기 때문입니다. 지금 보고 계신 이 페이지도 같은 규칙으로 만들었습니다.
이럴 때 설계서가 도움이 됩니다
말로 설명하기 어려운 느낌을 숫자로 건네고, 부탁할 때마다 달라지는 결과를 한 방향으로 모읍니다.
첫 번째 부탁
두 번째 부탁
세 번째 부탁
단원 페이지
퀴즈
타이머
"예쁘게"는 부탁할 때마다 다르게 읽혀서, 색과 단추 모양이 매번 바뀝니다.
설계서에 적힌 색 값과 모서리 둥글기를 따라서, 여러 앱이 한 벌처럼 맞춰집니다.
원하는 느낌을 말로 설명하기 어려울 때
"깔끔하게", "고급스럽게" 같은 말은 AI마다, 그리고 부탁할 때마다 다르게 읽힙니다. 설계서에는 색 값과 글씨 크기, 모서리 둥글기가 숫자로 적혀 있어서 뜻이 어긋나지 않는 지침을 줄 수 있습니다.
같은 부탁인데 결과가 들쑥날쑥할 때
어제는 파란 버튼이었는데 오늘은 초록 버튼이 되거나 페이지마다 버튼 모양이 다를 때, 설계서를 하나 골라 계속 쓰면 여러 번 만들어도 한 벌처럼 맞춰집니다.
앱을 여러 개 만들어 한 세트로 쓸 때
단원 페이지와 학습지, 퀴즈를 같은 설계서로 입히면 학생이 어느 화면을 열어도 같은 도구라고 느낍니다.
안 써도 되는 때
기능만 확인하는 일회용 앱이거나 AI가 처음 만든 모양이 이미 마음에 들면, 설계서 없이 가도 됩니다.
설계서를 줘도 AI가 적힌 줄을 전부 지키는 것은 아니어서 결과가 완전히 똑같아지지는 않습니다. 다만 부탁마다 흔들리던 부분이 줄어들고, 마음에 안 들 때는 서랍에서 다른 설계서로 바꿔 다시 부탁하면 됩니다.
옷만 바꿔 달라고 해도 AI가 슬라이더 범위나 숫자를 건드리는 일이 있어서, 입힌 뒤에는 ① 기초의 30초 점검을 한 번 더 하는 편이 안전합니다.
어디서 온 설계서인가
VoltAgent 팀이 공개한 모음(MIT 라이선스)을 그대로 옮기고 한국어 설명을 붙였습니다.
설계서는 모두 VoltAgent 팀이 GitHub에 공개한 awesome-design-md 저장소의 것입니다. MIT 라이선스라 누구나 쓰고 나눌 수 있고, 조건은 출처와 라이선스 문구를 함께 두는 것입니다. 그래서 받으시는 DESIGN.md 파일 맨 끝에 출처와 라이선스를 주석으로 붙여 두었습니다. 설계서 본문은 한 글자도 바꾸지 않았습니다.
2
이 설계서로 만든 제 페이지
apple 설계서를 입혀 실제로 만든 제 페이지를 먼저 둘러보겠습니다!
같은 설계서 한 장으로 종류가 다른 페이지를 만들었습니다
강의 화면, 안내 페이지, 보관함, 포트폴리오. 모두 흰 면과 짙은 면, 파란 강조색 하나, 둥근 카드로 같은 집안처럼 보입니다.
저는 이 페이지들을 만들 때마다 apple 설계서를 AI에게 주고, 로고와 브랜드 이름은 넣지 말고 한글은 Pretendard 글꼴로 해 달라고 덧붙입니다. 설계서에 적힌 색 값과 모서리 둥글기를 그대로 따르기 때문에, 페이지마다 디자인을 따로 부탁하지 않아도 모양이 맞춰집니다.
학생이 쓰는 앱과 선생님이 쓰는 앱을 같은 설계서로 만들면 한 세트처럼 보이는 것도 이 때문입니다. 지금 보고 계신 이 페이지도 같은 설계서로 만들었습니다.
3
교실 앱에 잘 맞는 추천 서랍 8
수업용 앱에 입혔을 때 읽기 편한 설계서 여덟 개를 먼저 골라보겠습니다!
카드 위쪽 그림은 그 설계서의 바탕색·글자색·버튼색으로 그린 미리보기입니다.
불러오는 중입니다…
밝은 바탕 여섯 개와 어두운 바탕 하나, 옛날 게임기 느낌 하나를 골랐습니다. 과학 시뮬레이션은 밝은 바탕에서 그래프와 입자가 가장 잘 보여서, 처음이시면 apple이나 notion부터 입혀 보시길 권합니다.
4
한글 글꼴로 만든 서랍 8
한글 글꼴까지 정해 둔 설계서로, 같은 내용이 디자인만 바뀌면 얼마나 달라지는지 보겠습니다!
여덟 설계서로 같은 홈페이지(주제: 행복한 교사로 살아간다는 것)를 만들었습니다. 그림을 누르면 예시 홈페이지가 열립니다.
불러오는 중입니다…
위의 서랍은 외국 회사 누리집을 본뜬 설계서라 한글 글꼴이 없습니다. 그래서 한글은 늘 Pretendard로 대신했습니다. 이 여덟 개는 처음부터 한글 글꼴(명조·손글씨·픽셀 글꼴 등)을 정해 두고 제가 새로 썼습니다.
설계서 앞부분은 선생님이 읽을 안내이고, 뒷부분은 AI가 읽을 규칙입니다. 규칙에는 만들기 전에 화면 구성안을 먼저 보여 줄 것, 사실을 지어내지 말 것, 코드를 생략하지 말 것, 내보내기 전에 스스로 점검할 것이 적혀 있어서, 파일 하나만 첨부해도 AI가 같은 순서로 일합니다.
설계서를 「사람이 읽을 곳」과 「AI가 읽을 곳」 둘로 나누는 생각은 한글 글꼴 슬라이드 갤러리 k-slide에서 배웠습니다. 여덟 설계서의 색·글꼴·모양과 글은 웹 페이지와 수업 앱에 맞게 제가 따로 정했습니다.
이렇게 부탁해 보세요
첨부한 DESIGN.md를 끝까지 읽고, 그 규칙대로 우리 학급 소개 홈페이지를 만들어 줘. 먼저 화면 구성안을 보여 주고, 내가 좋다고 하면 index.html 파일 하나로 만들어 줘.
5
쓰는 법은 도구마다 다릅니다
폴더에서 일하는 도구는 파일을 두고 읽게 하고, 웹 채팅은 짧은 판을 붙여넣거나 원본을 첨부해보겠습니다!
앱폴더에 DESIGN.md로 두고 읽게 합니다
원본을 받아 index.html 옆에 두면, AI가 폴더에서 직접 읽습니다.
- 서랍에서 고르고 DESIGN.md 받기카드의 [DESIGN.md 받기] → 다운로드 폴더에 DESIGN.md 이름으로 저장됩니다
- 받은 파일을 수업도구 폴더로 옮기기다운로드 폴더의 DESIGN.md → 수업도구 폴더(index.html 옆)로 끌기
- 아래 빌더에서 만든 부탁문 보내기새로 만들 때는 ① 기초 부탁문 끝에 붙이고, 이미 만든 앱이면 그대로 보내기
- index.html을 새로고침해서 보기마음에 안 들면 "방금 고치기 전으로 되돌려 줘" → 다른 서랍으로
설계서 원본은 영어로 2~3만 자쯤 됩니다. 폴더에서 일하는 도구는 필요한 부분만 골라 읽기 때문에 원본을 그대로 두는 편이 결과가 가장 좋습니다.
같은 설계서를 계속 쓰실 거라면 규칙 파일을 하나 만들어 두는 편이 좋습니다. Claude 앱은 폴더의 CLAUDE.md를, Codex는 AGENTS.md를 대화를 시작할 때마다 저절로 읽습니다. 그래서 "이 폴더에 CLAUDE.md(Codex는 AGENTS.md)를 만들고 '이 폴더의 페이지는 모두 DESIGN.md 설계서를 따른다'라고 적어 줘"라고 하면, 새 대화를 열 때마다 설계서를 다시 말하지 않아도 됩니다.
웹 채팅짧은 판을 붙여넣거나 원본 파일을 첨부합니다
붙여넣기가 기본이고, 파일 첨부가 되는 도구라면 원본을 올려도 됩니다.
방법 ① 짧은 판 붙여넣기 (기본)
서랍 카드의 [짧은 판 복사]나 아래 빌더가 만든 부탁문을 채팅 입력칸에 붙여넣습니다. 무료 계정에서도 가장 안정적입니다.
방법 ② 원본 파일 첨부
[DESIGN.md 받기]로 받은 파일을 입력칸의 첨부 버튼(+ 모양이나 클립 모양)으로 올리고, 부탁문에서는 첨부한 DESIGN.md를 읽게 합니다.
- 아래 빌더에서 서랍과 할 일, 전달 방법을 고르기방법 ①이면 짧은 판이 부탁문 안에 저절로 들어갑니다
- 방법 ②라면 먼저 DESIGN.md를 받아 채팅에 첨부하기카드의 [DESIGN.md 받기] → 채팅 입력칸의 첨부 버튼 → 다운로드 폴더의 DESIGN.md
- 만든 부탁문을 복사해 채팅에 보내기앱을 만든 그 대화에 이어서 보내면 코드를 다시 붙이지 않아도 됩니다. 새 대화면 부탁문의 [지금 코드] 자리에 index.html 코드를 붙이기
- 받은 코드 전체를 코드 도우미로 저장하기① 기초 3단계의 코드 도우미 → [index.html로 저장]
붙여넣기와 첨부 중 무엇이 나은지는 도구와 계정에 따라 달라서 하나로 정해 드리기 어렵습니다. 무료 계정에서는 짧은 판을 붙여넣는 쪽을 먼저 권합니다. 첨부는 손이 덜 가지만, 무료 계정은 하루에 올릴 수 있는 파일 수나 크기에 제한이 있는 경우가 많고, AI가 원본 전체를 읽는 만큼 사용량도 붙여넣는 것과 같이 씁니다.
원본을 웹 채팅에 그대로 붙이면 영어 2~3만 자가 한꺼번에 들어가서 사용량을 많이 쓰고, 뒤에 받는 긴 코드와 겹쳐 답이 중간에 끊기기 쉽습니다. 그래서 색, 글꼴 크기, 모서리 모양, 해야 할 것과 하지 말 것만 3천 자 안팎으로 추린 짧은 판을 따로 만들었습니다.
새 대화에서 지금 코드를 붙이려면, 수업도구 폴더의 index.html을 오른쪽 클릭해 [연결 프로그램]에서 [메모장]을 골라 열고 Ctrl+A, Ctrl+C로 복사합니다.
빌더디자인 부탁문 만들기
서랍과 할 일을 고르면 쓰시는 도구에 맞는 부탁문이 완성됩니다.
위쪽에서 도구를 고르시면 도구에 맞는 부탁문이 나옵니다. 지금은 ChatGPT·Claude 앱 기준입니다.
디자인 부탁문
입힌 뒤에는 기능이 그대로인지 봅니다
디자인만 바꿔 달라고 했어도 숫자나 범위가 바뀌는 일이 있습니다.
- 새로고침해서 새 옷 확인하기앱을 쓰시면 index.html을 다시 열고, 웹 채팅이면 받은 코드를 코드 도우미로 저장해서 열기
- 슬라이더를 양 끝까지 밀고 숫자에 단위가 그대로 있는지 보기① 기초 4단계의 30초 점검과 같습니다
- 마음에 안 들면 되돌리거나 다른 서랍으로 바꾸기"방금 고치기 전으로 되돌려 줘" → 서랍에서 다른 설계서를 골라 다시 부탁
6
전체 서랍
분류와 바탕 밝기로 거르면서 마음에 드는 설계서를 찾아보겠습니다!
7
입힐 때 지킬 것
학생들에게 나눠 줄 앱이라 몇 가지만 지켜보겠습니다!
로고와 브랜드 이름은 넣지 않습니다
빌려 오는 것은 색과 모양이지, 그 회사의 이름이 아닙니다.
설계서에는 로고가 없지만, AI가 가끔 제목이나 버튼에 브랜드 이름을 넣습니다. 학생들에게 나눠 주는 앱이 그 회사에서 만든 것처럼 보이면 안 되기 때문에, 빌더가 만드는 부탁문에는 "로고와 브랜드 이름은 넣지 마"가 늘 들어갑니다.
한글은 Pretendard 글꼴로
브랜드 전용 글꼴은 쓸 수 없고 한글도 없어서, 한글은 Pretendard로 대신합니다.
프로젝터로 띄울 앱은 밝은 바탕으로
프로젝터는 검은색을 빛으로 만들지 못해서, 불을 켠 교실에서는 어두운 바탕이 회색으로 떠 보입니다.
어두운 설계서는 멋있지만 프로젝터 화면에서는 글자와 바탕의 대비가 떨어집니다. 교실 전자칠판이나 학생 태블릿처럼 스스로 빛을 내는 화면에서는 괜찮습니다. 전체 서랍의 [밝은 바탕]으로 거르면 수업용으로 고르기 쉽습니다.
출처와 라이선스
설계서 원본은 VoltAgent/awesome-design-md(MIT License, Copyright (c) 2026 VoltAgent)의 것을 받은 날에 옮겼습니다. 라이선스 전문은 LICENSE.txt에 있습니다. 설계서가 다루는 브랜드들과 이 서랍은 아무 관계가 없습니다.
getdesign.md 사이트에는 있지만 공개 저장소에 없는 설계서(discord, mobbin)는 서랍에 넣지 않았습니다. 필요하시면 getdesign.md에서 직접 받으실 수 있습니다.