내 사이트도 애플처럼 만드는 법 | DESIGN.md로 AI 디자인 고정하기

AI로 홈페이지를 만들어 보셨다면 이런 경험 있으실 거예요. “애플처럼 깔끔하게 만들어줘”라고 했는데, 한 번은 둥근 검정 버튼이 나오고 다시 시키면 각진 주황 버튼이 나옵니다. 세 번째엔 또 다른 게 나오고요.

답부터 드릴게요. AI한테 필요한 건 더 좋은 형용사가 아니라 숫자로 적힌 디자인 규칙 파일입니다. 이 파일을 DESIGN.md라고 부르는데, 애플·테슬라·스트라이프 같은 브랜드 사이트에서 뽑아낸 파일이 이미 2,000개 넘게 공개돼 있어요. 받아서 프로젝트 폴더에 넣고 “이 규칙대로 만들어줘”라고 하면 됩니다.

AI한테 ‘애플처럼’이라고 하면 왜 매번 다르게 나올까?

AI는 애플을 ‘느낌’으로만 알고 있어서 그래요. 흰 배경, 큰 글씨, 여백이 많다는 정도는 압니다. 하지만 버튼 색이 정확히 몇 번인지, 제목은 몇 px인지, 모서리를 얼마나 둥글게 깎는지는 모릅니다. 모르는 칸은 매번 새로 추측하죠.

그러니 결과가 흔들리는 건 프롬프트를 못 써서가 아닙니다. “예쁘게”, “고급스럽게”, “깔끔하게”에는 숫자가 없어요. 사람 디자이너한테도 이렇게만 말하면 매번 다른 시안이 올라옵니다. 그래서 실제 디자인 팀은 말 대신 색상표와 글자 크기 표를 주고받죠.

지시 방식	말로 할 때	DESIGN.md를 줄 때
AI가 받는 정보	"애플처럼 깔끔하게"	버튼 #0071e3, 본문 17px, 버튼 모서리 완전 둥글게
같은 요청 세 번	결과 세 개가 다 다름	같은 기준으로 나옴
수정할 때	"좀 더 고급스럽게"를 반복	파일의 값 하나만 고침

DESIGN.md가 뭔데, 누가 만든 형식일까?

DESIGN.md는 사이트의 디자인 규칙을 AI가 읽기 좋게 적은 텍스트 파일입니다. 구글의 AI 디자인 도구 Stitch¹가 2026년 3월 18일 처음 선보였고, 4월 21일에는 형식 자체를 오픈소스로 풀었어요. 어느 도구에서 만든 디자인 규칙이든 파일 하나로 옮겨 다닐 수 있게 하자는 취지입니다.

구조는 단순해요. 파일 윗부분엔 색·글자·간격·모서리 같은 디자인 토큰²을 숫자로 적고, 아래엔 그 값을 왜 쓰는지 사람 말로 적습니다. 구글 공식 스펙의 설명도 같아요. 토큰은 AI에게 정확한 값을 주고 설명은 그 값이 왜 있고 어떻게 써야 하는지 알려준다고요.

실제로 어떤 값이 들어 있는지 테슬라 파일을 열어봤습니다. 이런 숫자들이 적혀 있어요.

#3E6AE1

테슬라 블루. 주요 버튼에만 쓴다

4px

모든 여백·간격의 기본 단위

40px

큰 제목 크기, 굵기는 500

8px

모서리 둥글기 상한. 버튼은 4px

출처: Refero Styles 테슬라 페이지. 공식 가이드가 아니라 공개 사이트에서 추출·해석한 값입니다.

재밌는 건 숫자만큼 금지 규칙도 적혀 있다는 점이에요. 테슬라 파일엔 “테슬라 블루를 글자·제목·장식에 쓰지 말 것”, “다른 채도 높은 색을 들이지 말 것”이 들어 있습니다. AI가 제일 자주 망치는 게 바로 이런 부분이거든요. 포인트 색을 여기저기 뿌리는 것 말이죠.

원리로 보면 클로드 스킬(SKILL.md)과 같습니다. AI에게 새 능력을 글자 파일로 가르치는 게 스킬이라면, DESIGN.md는 디자인 감각을 글자 파일로 건네는 셈이에요.

애플·테슬라 디자인 파일은 어디서 받을까?

가장 많이 모여 있는 곳은 Refero Styles³(styles.refero.design)입니다. “2,000개 이상의 AI가 읽을 수 있는 디자인 시스템”을 내세우고 매주 새 스타일이 추가된다고 밝히고 있어요. 애플, 테슬라, 페라리, 스트라이프, 에어비앤비, 리니어, 버셀 같은 사이트가 들어 있습니다.

쓰는 법은 검색이 전부예요. 브랜드 이름을 검색해서 스타일 페이지를 열면 색·글자·간격·컴포넌트가 정리돼 있고, 복사 버튼과 DESIGN.md 다운로드 버튼이 있습니다. 저희가 확인했을 때 스타일 페이지 내용은 가격 표시나 로그인 벽 없이 공개돼 있었어요. 다만 클로드 같은 AI에 바로 연결하는 MCP⁴ 기능은 유료 요금제에서만 됩니다. 파일만 받아 쓸 거면 유료 기능은 필요 없어요.

개발자들 사이에선 깃허브의 awesome-design-md 저장소도 많이 쓰입니다. 개수는 Refero보다 훨씬 적어도 파일을 폴더째로 받아볼 수 있어요.

받은 파일, 클로드 코드에는 어떻게 넣을까?

생각보다 간단합니다. 파일을 프로젝트 폴더 맨 위에 두고 클로드 코드가 매번 그 파일을 읽게 연결하면 끝이에요.

분위기 맞는 브랜드 고르기

같은 업종보다 원하는 느낌이 비슷한 사이트로

DESIGN.md 받아서 폴더에 두기

프로젝트 폴더 맨 위, 파일 이름은 그대로

CLAUDE.md에 한 줄 연결

화면을 고칠 때마다 규칙을 먼저 읽게

연결은 CLAUDE.md⁵에서 합니다. 클로드 코드는 시작할 때 이 파일을 읽는데, 안에 @파일이름을 적으면 그 파일도 같이 불러와요. Refero가 권하는 문장을 우리말로 옮기면 이렇습니다.

화면을 바꾸기 전에 @DESIGN.md 를 먼저 읽어.
색·글자·간격은 이 파일을 기준으로 쓰고,
입력 항목·문구·동작은 이 프로젝트에 맞게 정해.

그다음부터는 평소처럼 시키면 됩니다. “DESIGN.md 규칙대로 랜딩페이지 만들어줘”라고요. 여러 역할을 나눠 쓰는 분이라면 클로드 코드 AI 팀의 디자인 담당 자리에 이 파일을 쥐여주는 것도 방법이에요.

그대로 베끼면 우리 사이트가 되는 걸까?

여기서부터는 저희 생각입니다. 소개 글들은 보통 “넣기만 하면 AI가 바로 이해한다”에서 끝나는데, 저희는 그게 절반만 맞다고 봐요.

우선 이 파일은 브랜드가 직접 낸 가이드가 아닙니다. Refero도 스스로 밝히듯 공개된 사이트에서 값을 뽑아내고 역할은 해석해서 채운 거예요. 그리고 Refero는 이미 자기 색이 있는 제품에 남의 색을 통째로 붙이지 말고, 색의 역할을 정하는 방식을 배우라고 권합니다. 테슬라 색을 그대로 가져다 쓰면 결과물은 우리 브랜드가 아니라 테슬라 흉내가 되거든요.

글꼴도 조심해야 해요. 테슬라의 Universal Sans, 애플의 SF Pro, 스트라이프의 Söhne는 모두 마음대로 가져다 쓸 수 있는 글꼴이 아닙니다. 다행히 파일마다 대체 글꼴⁶이 적혀 있으니, 우리 사이트에선 그쪽을 쓰면 돼요.

그래서 저희가 권하는 순서는 이렇습니다. 테슬라 파일로 규칙을 적는 방법을 익히고 값은 우리 브랜드 색과 로고에 맞게 바꿔 우리만의 DESIGN.md를 만드는 거예요. 특히 “포인트 색은 주요 버튼에만”이라는 한 줄은 어느 브랜드에든 그대로 가져가도 좋은 규칙입니다. 버튼 색이 서너 개씩 섞여 어디를 눌러야 할지 헷갈리는 홈페이지가 생각보다 많거든요.

테슬라 파일의 규칙	우리 사이트에 가져갈 때
블루는 주요 버튼에만	우리 브랜드 색 하나를 주요 버튼 전용으로
다른 채도 높은 색 금지	포인트 색 외에는 무채색으로 정리
모서리는 8px까지	우리 브랜드 인상에 맞는 둥글기 하나로 통일
전용 글꼴 + 대체 글꼴 명시	무료 글꼴(예: 프리텐다드)로 확정해 적기

오늘 30분이면 해볼 수 있는 것

Refero Styles에서 우리가 닮고 싶은 사이트 2-3곳의 파일을 열어보세요. 받지 않아도, 읽는 것만으로 “잘된 사이트는 규칙이 이렇게 적혀 있구나”가 보입니다.
하나를 골라 프로젝트에 넣되, 색과 글꼴만큼은 우리 브랜드 값으로 바꿔 두세요.
CLAUDE.md에 @DESIGN.md 한 줄을 넣은 뒤 같은 요청을 두 번 시켜서 결과가 같은지 확인해 보세요. 달라진다면 파일에 빈칸이 있다는 뜻이에요.

직접 하기 어렵다면

디자인을 AI로 맞추는 것과 그 사이트가 검색과 AI 답변에 잡히는 건 별개의 문제입니다. 보기 좋게 만든 페이지도 구조가 엉키면 구글과 네이버에서 보이지 않거든요. 저희가 개발사와 연락이 끊긴 홈페이지를 검색 유입을 잃지 않고 새로 지은 사례도 결국 새 디자인과 검색 노출을 같이 맞추는 작업이었습니다.

검색에 보이는 사이트까지 한 번에 챙기고 싶다면 SEO 홈페이지 제작을 살펴보시거나 마켓피디아에 문의해 주세요.

용어 설명

Google Stitch: 구글 랩스가 만든 AI 화면 디자인 도구입니다. 말이나 이미지로 설명하면 앱·웹 화면 시안을 만들어 줍니다. ↩
디자인 토큰: 색상 코드, 글자 크기, 간격처럼 디자인을 이루는 값에 이름을 붙여 정리한 것입니다. “주요 버튼 색 = #3E6AE1” 같은 식이에요. ↩
Refero Styles: 디자인 레퍼런스 서비스 Refero가 운영하는 사이트로, 여러 브랜드 사이트의 디자인 규칙을 DESIGN.md 형식으로 정리해 보여줍니다. 현재 베타입니다. ↩
MCP: AI가 외부 서비스의 데이터를 직접 불러다 쓸 수 있게 이어주는 연결 방식입니다. 클로드 코드, 커서 같은 도구가 지원합니다. ↩
CLAUDE.md: 클로드 코드가 작업을 시작할 때 자동으로 읽는 설명서 파일입니다. 프로젝트 규칙이나 자주 쓰는 지시를 적어 둡니다. ↩
대체 글꼴: 원래 글꼴을 쓸 수 없을 때 대신 보여줄 글꼴입니다. 테슬라 파일은 Inter 같은 무료 글꼴을 대체 글꼴로 적어 두었습니다. ↩