디자인 시스템 모음 사이트 GetDesign (https://getdesign.md)
디자인 시스템 모음 사이트 getdesign.md 소개 및 이용 안내입니다. 최근 웹사이트 제작과 UI 설계 방식이 빠르게 바뀌고 있습니다. 예전에는 디자이너가 피그마로 화면을 만들고, 개발자가 그걸 보고 코드를 옮기는 흐름이 일반적이었습니다. 그런데 요즘은 AI 코딩 에이전트가 직접 UI를 생성하는 시대가 오면서, “디자인을 어떻게 전달할 것인가”가 새로운 과제가 되고 있습니다. 이런 흐름 속에서 등장한 흥미로운 사이트가 바로 getdesign.md입니다.
Table of Contents
디자인 시스템 모음 사이트 GetDesign.md
getdesign.md는 유명 서비스들의 디자인 시스템을 DESIGN.md 형태로 정리해 모아둔 사이트입니다.
단순히 예쁜 웹사이트를 보여주는 갤러리와 다르게, AI가 읽고 따라 할 수 있도록 정리된 텍스트형 디자인 명세를 제공한다는 점이 핵심입니다. 즉, 사람이 보기 위한 참고 자료를 넘어 AI 에이전트가 UI를 만들 때 참고하는 설계도에 가깝습니다.
DESIGN.md 개념
DESIGN.md 개념은 Google Stitch에서 도입되었습니다. Stitch는 일반 마크다운 파일을 사용하여 디자인 패턴, 색상, 타이포그래피, 간격, 구성 요소를 설명하고, 이를 AI 에이전트에 전달하여 일관된 UI를 생성합니다. Figma 플러그인이나 JSON 스키마 없이, 에이전트가 코드를 작성하기 전에 읽는 마크다운 파일만 있으면 됩니다.
getdesign.md 사이트 차별점
보통 디자인 참고 사이트는 스크린샷 모음이나 UI 레퍼런스 갤러리 중심입니다.
하지만 getdesign.md는 유명 브랜드의 디자인 철학을 텍스트 문서로 구조화해 둡니다. 이 문서는 색상, 타이포그래피, 버튼 스타일, 여백, 그림자, 컴포넌트 상태 같은 요소를 정리해 AI가 그대로 읽고 UI를 재현할 수 있도록 돕습니다.
이 점이 중요한 이유는 AI 코딩 에이전트가 “애플처럼 만들어줘” 같은 막연한 말만으로는 정확한 결과를 내기 어렵기 때문입니다.
반면 DESIGN.md처럼 잘 정리된 명세가 있으면, AI는 훨씬 일관성 있게 스타일을 반영할 수 있습니다. getdesign.md는 바로 이 문제를 해결하려는 시도로 볼 수 있습니다.
디자인 시스템 사이트 GetDesign의 특징
getdesign.md의 특징은 브랜드별 디자인 시스템을 한곳에 모아둔 것입니다. 공개된 소개 자료에 따르면 Vercel, Stripe, Figma, Notion, Linear, Framer 같은 개발·생산성 서비스부터 Apple, Nike, Spotify, Starbucks, Tesla 같은 소비자 브랜드, 그리고 Coinbase, Binance, Wise, Revolut 같은 금융 서비스까지 폭넓게 포함하고 있습니다.
이렇게 다양한 브랜드를 모아두면 무엇이 좋을까요?
- 첫째, 한 산업 안에서 어떤 디자인 언어가 쓰이는지 비교하기 쉽습니다.
- 둘째, 같은 카드형 UI라도 브랜드마다 어떤 식으로 무드를 조절하는지 볼 수 있습니다.
- 셋째, AI에게 “이 스타일을 따라 만들어 달라”는 요구를 더 구체적으로 전달할 수 있습니다.
특히 getdesign.md는 단순한 시각 참고가 아니라, AI가 읽을 수 있는 디자인 문서라는 점에서 실무 활용도가 높습니다. 블로그나 랜딩페이지를 만들 때도 “이런 무드로 가자”는 감각적인 요청보다, 색상·폰트·컴포넌트 규칙이 적힌 텍스트가 훨씬 정확합니다
디자인 시스템 모음 사이트 getdesign.md 소개 및 안내
출처 : getdesign.md
문제점: AI는 “멋진” 결과물을 만들어내지만, “당신의 것”은 만들어내지 못한다.
AI 에이전트에게 “랜딩 페이지를 만들어 줘”라고 말하면 어떤 결과물이 나올지 뻔히 알 겁니다.
둥근 카드, 보라색과 파란색이 그라데이션으로 이어지는 배경, 중앙에 배치된 메인 이미지, “시작하기” 버튼. 효과는 있지만, 다른 모든 랜딩 페이지와 똑같아 보입니다.
이유는 간단합니다. 에이전트가 생각하는 “좋은 디자인”은 평균적인 것들의 평균일 뿐입니다.
Vercel이 그림자 대신 테두리를 사용하는 이유, Linear가 자간을 좁게 유지하는 이유, Stripe가 그라데이션을 적게 사용하는 이유 등을 에이전트는 전혀 이해하지 못합니다. 설령 안다고 해도, 그 모든 것을 하나의 프롬프트에 담는 것은 거의 불가능합니다.
결국 두 가지 좋지 않은 선택지만 남게 됩니다.
- 매번 40줄짜리 프롬프트(“링크에는 #0070f3 색상 사용, 제목 자간 -0.02em, 테두리 반경 8px, 그림자 없음, 테두리 두께 1px…”)를 작성해도 절반은 틀립니다.
- 웹사이트를 스크린샷으로 찍어서 붙여넣고 “이렇게 보이게 해줘”라고 말하면, 에이전트가 픽셀만 복사하고 그 뒤에 있는 시스템 구조는 복사하지 못합니다.
저울도 아니고.
해결 방법: DESIGN.md
DESIGN.md 파일은 디자인 시스템을 의미론적으로 설명하는 파일입니다. 단순히 토큰 목록이나 Figma 내보내기 파일, 컴포넌트 라이브러리가 아닙니다.
마치 경험 많은 디자이너가 브랜드의 시각적 언어를 처음 접하는 개발자에게 설명하는 문서와 같습니다. DESIGN.md 파일은 바로 그런 문서입니다.
구성품은 다음과 같습니다.
- 시각적 테마와 분위기는 에이전트에게 브랜드가 어떤 모습인지, 그리고 더 중요하게는 왜 그렇게 보이는지를 알려줍니다 . 미학에 담긴 철학을 전달하는 것이죠. “미니멀리즘은 엔지니어링 원칙이다”와 같은 문장처럼 말입니다. 에이전트는 단순한 지시가 아닌 의도를 파악해야 합니다.
- 색상 팔레트와 역할은 각 색상에 16진수 값 과 기능을 부여합니다. 예를 들어
#ff5b4f, “배송용 빨간색은 배송이 긴급하게 느껴져야 하므로 프로덕션 배포 흐름에 사용됩니다.” 색상 이름은 해당 색상이 어떤 역할을 하는지 알려줍니다. - 타이포그래피 규칙은 글꼴, 크기, 굵기, 줄 간격, 자간 등을 다룹니다. 하지만 진정한 가치는 맥락에 있습니다. 어떤 스타일이 어디에 적용되고, 왜 적용되는지가 중요합니다. “제목은 마치 압축된 코드처럼 보여야 하므로 디스플레이 크기에는 -2.4px의 자간이 적용됩니다.”
- 간격, 그림자, 움직임, 구성 요소들이 시스템의 나머지 부분을 채웁니다. 가능한 모든 규칙에는 이유가 부여됩니다.
DESIGN.md 파일에는 토큰, 규칙, 그리고 근거가 같은 파일에 저장됩니다. 토큰은 무엇을 사용해야 하는지 알려주지만 어디에 사용해야 하는지는 알려주지 않습니다.
규칙은 어디에 적용해야 하는지는 알려주지만 언제 규칙을 변경해야 하는지는 알려주지 않습니다. 근거는 파일에 명시되지 않은 상황에 직면했을 때 상담원이 올바른 판단을 내릴 수 있도록 해주는 역할을 합니다.
디자인 시스템 모음 사이트가 마크다운을 사용하는 이유?
마크다운은 AI 에이전트가 가장 잘 구사하는 언어이기 때문입니다. AI 에이전트는 JSON 토큰을 읽을 수는 있지만 해석할 수는 없습니다.
Figma 파일도 볼 수 없습니다. 스크린샷을 흉내낼 수는 있지만 체계화할 수는 없습니다. 마크다운은 그 중간에 있습니다. 사람이 읽기 쉽고, 기계가 파싱할 수 있으며, 버전 관리와 차이점 비교가 간편하고, 저장소 루트에 바로 넣을 수 있습니다.
프로젝트 루트에 DESIGN.md 파일을 넣고 에이전트에게 “UI를 작성하기 전에 DESIGN.md를 참조하세요.”라고 알려주세요.
그러면 Claude Code, Cursor, Windsurf 등 어떤 UI 도구를 사용하든 에이전트가 어떤 글꼴, 색상, 간격을 사용해야 하는지 자동으로 인식합니다. 매번 프롬프트에서 같은 내용을 반복해서 입력할 필요가 없습니다.
왜 컬렉션인가요?
대부분의 팀은 DESIGN.md 파일을 처음부터 직접 작성하지 않습니다. 대부분의 팀은 “Linear처럼 보이게 해줘”, “Stripe 느낌을 줘”, 또는 “애플 스타일로 해줘”라고 말합니다. 이러한 언급들은 실제로 흔히 나오는 말입니다.
getdesign.md는 그러한 시작점을 모아놓았습니다.
Vercel, Stripe, Linear, Apple, Tesla, Notion, Figma, Supabase 등 수십 개의 디자인을 기반으로 한 영감 파일들을 모두 동일한 형식으로 제공하여 비교할 수 있도록 했습니다.
마음에 드는 파일을 골라 프로젝트에 추가하고 에이전트에게 “이 파일을 참고 자료로 사용하세요”라고 알려주세요. 그 위에 자신만의 콘텐츠와 구성 요소를 더하는 것은 여러분의 몫입니다.
목표는 “베르셀을 모방하는 것”이 아닙니다. 에이전트에게 출발점을 제공하는 것입니다.
일반적인 평균에서 벗어나 특정한 미적 감각에 도달할 수 있도록 충분한 맥락을 제공하는 것이죠. 거기서부터 탐색하고, 자신만의 것으로 만들고, 발전시켜 나가는 겁니다.
DESIGN.md가 아닌 것
이름이 오해를 불러일으킬 수 있으므로 이 점이 중요합니다.
그냥 넣어두고 테마 완성이라고 할 수 있는 게 아닙니다. 이건 딕셔너리일 뿐입니다.
구현 부분은 아직 작성해야 합니다. 코드는 없고 규칙만 있습니다. 버튼의 모양을 설명하는 것일 뿐, 버튼 제작은 사용자나 담당자가 직접 해야 합니다.
이건 브랜드 가이드라인 PDF 파일도 아닙니다. 브랜드 가이드라인은 사람이 이해하기 쉽게 작성되어 있어서 담당자가 바로 실행에 옮기기에는 너무 모호합니다(“우리 브랜드는 친근하면서도 고급스러운 느낌을 줍니다”). DESIGN.md 파일은 담당자가 다음 결정을 내릴 수 있도록 충분히 구체적이어야 합니다.
Figma 토큰 내보내기가 아닙니다. Figma 토큰 내보내기는 “무엇을” 보여줄지는 알려주지만 “왜” 보여주는지는 생략합니다. DESIGN.md 파일에 그 이유가 담겨 있습니다.
그리고 그것은 고정되어 있지 않습니다. 브랜드가 진화함에 따라 파일도 진화합니다. 버전이 지정되고, PR이 제출되고, 논의됩니다. 코드처럼 동작합니다.
정신 모델
예전에는 디자이너를 고용하면서 “리니어(Linear) 방식 아시죠? 그런 느낌을 내주세요.”라고 말하곤 했습니다.
디자이너가 이미 머릿속에 그 레퍼런스를 가지고 있었기 때문에 효과가 있었죠. 그 공통된 맥락이 디자이너와의 모든 대화에 깔려 있었던 겁니다.
AI 에이전트는 그러한 공유 컨텍스트를 가지고 있지 않습니다.
DESIGN.md는 해당 컨텍스트를 파일에 기록하고 에이전트의 “머릿속”에 저장합니다. 수년간 디자이너와 함께 구축해 온 참조 풀을, 에이전트를 통해 단 2분 만에 설정할 수 있습니다.
getdesign.md는 단순한 “에셋 사이트”가 아닙니다. 디자이너가 기계일 때 디자인 언어가 어떻게 공유되는지에 대한 실험에 더 가깝습니다. DESIGN.md 파일들이 바로 그 형식이고, 이 사이트는 그 형식을 구체화한 파일들을 모아놓은 곳입니다.
DESIGN.md 파일의 구조
Google alpha사양의 DESIGN.md 파일은 두 부분으로 구성됩니다. 하나는 구조화된 토큰을 담는 YAML 형식의 프런트 매터 블록 이고, 다른 하나는 이러한 토큰을 에이전트가 처리할 수 있는 언어로 변환하는 정규 섹션으로 이루어진 본문입니다. 파일에 나타나는 순서대로 아래에 설명할 9개의 표준 구성 요소가 있습니다. 각 구성 요소는 에이전트가 특정 디자인 결정을 내릴 때 참조하는 계층입니다.
1. YAML 프런트 매터
파일의 맨 위에는 `<YAML>` 블록이 있습니다 ---.
이 블록에는 사양 버전, 브랜드 이름, 그리고 description브랜드 분위기를 요약하는 한 단락의 글이 포함되어 있습니다. 이 글은 슬로건이 아니라, 담당자가 본문을 읽기 전에 확인할 수 있는 간결한 요약입니다.
---
version: alpha
name: Lumenpath
description: A bright, citrus-warmed product canvas where every primary
moment runs in a single Tangerine accent. Display type stays large and
confident at modest weights; cards float on a pale-cream surface
separated by hairline borders rather than shadows.
---
이 version: alpha줄은 린터나 하위 도구에 어떤 사양 규칙을 적용해야 하는지 알려주는 역할을 합니다. 이는 description브랜드의 목소리로 읽히며, 이후의 모든 것을 설정하는 기준이 됩니다.
2. 색상 토큰
YAML 내부에서 colors:블록은 각 색상의 역할을 16진수 값으로 지정합니다. 이름에는 의도가 담겨 있습니다.
예를 들어 primary, ` <color> ink` body, muted`<color>` canvas, `<color> surface-card`, `<color>`와 같은 이름은 의도를 나타내지만 , `<color>` hairline, on-primary`<color>`와 같은 이름은 의도를 나타내지 않습니다 . 에이전트는 값뿐만 아니라 키를 통해서도 색상의 역할을 학습합니다.blue1gray-100accent-2
colors:
primary: "#F76B1C"
ink: "#1B1A17"
body: "#3D3A33"
muted: "#7A7568"
canvas: "#FFFAF1"
surface-card: "#FFFFFF"
hairline: "#E8E1D2"
on-primary: "#FFFFFF"
본문에서는 나중에 이것들을 {colors.primary}, {colors.canvas}, 등으로 참조하므로, 토큰은 한 번 정의되면 모든 곳에서 참조됩니다.
3. 타이포그래피 토큰
이 typography:블록은 명명된 텍스트 스타일을 정의하며, 각 스타일은 고유한 글꼴 패밀리, 크기, 굵기, 줄 높이 및 자간을 가집니다. 레벨은 의미론적 HTML 요소( , ) 가 아니라 역할( display-lg, body-md, button, )로 읽힙니다 .captionh1h2
typography:
display-lg:
fontFamily: "'Söhne', Inter, sans-serif"
fontSize: 56px
fontWeight: 500
lineHeight: 1.05
letterSpacing: -1.8px
body-md:
fontFamily: "Inter, sans-serif"
fontSize: 16px
fontWeight: 400
lineHeight: 1.55
letterSpacing: 0
button:
fontFamily: "Inter, sans-serif"
fontSize: 14px
fontWeight: 500
lineHeight: 1
letterSpacing: 0
타이포그래피 토큰은 구성 요소 정의의 참조가 되며 {typography.display-lg}, {typography.button}전체 스타일이 하나의 심볼에 적용됩니다.
4. 모양 및 간격 토큰
rounded:모서리 반지름과 간격 크기를 위한 두 개의 YAML 블록이 추가되어 기본 구조를 완성합니다 spacing:. 두 블록 모두 티셔츠 크기 어휘와 의미론적 이름( pill, full, section)을 사용합니다.
rounded:
none: 0px
sm: 6px
md: 10px
lg: 16px
full: 9999px
spacing:
xs: 4px
sm: 8px
md: 12px
base: 16px
lg: 24px
xl: 32px
section: 80px
{rounded.md}그런 {spacing.section}다음 구성 요소 정의와 본문 모두에 나타납니다. 모서리 높이를 8px에서 12px로 높이려는 웹사이트는 YAML 값 하나만 변경하면 참조된 모든 구성 요소가 {rounded.md}자동으로 다시 해석됩니다.
5. 구성 요소 토큰
이 components:블록은 토큰들이 조합되어 이름이 지정된 UI 기본 요소들을 생성하는 곳입니다. 각 구성 요소는 전적으로 코드로 정의되며, {token.refs}16진수나 픽셀 값을 직접 입력하는 경우는 절대 없습니다. 따라서 버튼의 색상은 시스템의 나머지 부분과 일관되게 유지됩니다.
components:
button-primary:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
typography: "{typography.button}"
rounded: "{rounded.md}"
padding: 10px 18px
card:
backgroundColor: "{colors.surface-card}"
textColor: "{colors.ink}"
rounded: "{rounded.lg}"
padding: 20px
이것은 파일의 구조적 페이로드입니다. 변형( button-primary-active, button-primary-disabled)은 중첩된 상태 객체가 아니라 자체 항목으로 존재합니다.
6. 개요 산문
YAML 파일의 마지막 부분 다음에 ---본문이 나옵니다 ## Overview. 이 부분은 여러 단락으로 구성된 분위기 설명문으로, 브랜드의 목소리를 쉬운 영어로 풀어쓴 것입니다. 즉, 어떤 요소가 핵심인지, 타이포그래피는 어떤 역할을 하는지, 페이지의 흐름은 어떤지 등을 설명합니다. 본문은 Key Characteristics가장 많이 인용되는 사실들을 요약한 글머리 기호 목록으로 마무리됩니다.
## Overview
Lumenpath reads like a product brand that wants to feel both warm and
deliberate. The base canvas is a pale cream {colors.canvas} (#FFFAF1)
holding deep ink type, with a single voltage of Tangerine {colors.primary}
(#F76B1C) carrying every primary CTA and inline brand link. There is no
secondary brand color — the orange does all the brand work, used scarcely
so it never dilutes.
**Key Characteristics:**
- Single accent color: {colors.primary} carries every primary CTA, the
active sidebar row, and the brand wordmark.
- Modest display weights — display-lg sits at weight 500, not 700+. The
brand trusts size and the cream canvas to set hierarchy, not heavy ink.
- Hairline-only depth. Cards separate from canvas via {colors.hairline}
1px borders, never drop shadows.
이 부분은 “왜 이렇게 생겼을까?”라는 질문에 대한 답을 제시합니다. 다른 설명 부분들은 “무엇”에 대한 답을 제공하고 , 이 부분은 ” 왜”에 대한 답을 제공합니다 .
7. 색상, 타이포그래피, 레이아웃, 입면도 설명
네 개의 정형화된 산문 섹션은 YAML 토큰에 대한 설명과 그룹화를 제공합니다.
## Colors— 의 모든 명명된 역할이colors:하위 제목(### Brand & Accent,### Surface,### Hairlines,### Text, ) 아래에 그룹화되어 있으며, 각 색상이 시스템에서 어떤 역할을 하는지### Semantic한 문장으로 설명합니다 .## Typography— 글꼴 패밀리, 전체 계층 구조표,### Principles크기 조정 방식에 대한 설명 단락, 그리고### Note on Font Substitutes라이선스 글꼴 목록이 포함됩니다.## Layout— 간격 시스템, 그리드 및 컨테이너 너비, 그리고 공백에 대한 철학적 문단. 토큰은{spacing.section}, 로 표시됩니다{spacing.lg}.## Elevation— 표면 계층 및 섀도우 계층 정의. 많은 시스템에서 하나의 섀도우 계층만 사용하며, 해당되는 경우 이 섹션에서 명시적으로 설명합니다.
## Colors
### Brand & Accent
- **Tangerine** ({colors.primary} — #F76B1C): The single brand color.
Used on every primary CTA, the active sidebar row, the brand wordmark,
and inline brand links. Used scarcely — most pages render 90% cream
canvas plus ink type, with one Tangerine moment.
### Surface
- **Canvas** ({colors.canvas} — #FFFAF1): The default page floor. A pale
cream rather than pure white — warmer, calmer, lower-glare.
- **Surface Card** ({colors.surface-card} — #FFFFFF): Pure white card
plates that float a half-step above the cream canvas.
이 패턴은 네 가지 모두에서 일관적입니다. YAML은 값을 제공하고, 설명은 이유 를 제공합니다 .
8. 산문의 구성 요소
## ComponentsYAML에 명시된 각 구성 요소별로 하나의 서술형 항목이 포함됩니다. 각 항목은 구성 요소의 키를 굵은 글씨로 표시한 후, 표면, 타이포그래피, 패딩, 모서리 반경을 설명합니다. 이러한 속성들은 모두 {token.refs}인라인 값이 아닌 참조 방식으로 표현됩니다.
## Components
**`button-primary`** — The signature primary CTA. Background
`{colors.primary}`, text `{colors.on-primary}`, type
`{typography.button}`, padding 10px × 18px, rounded `{rounded.md}`
(10px). Press state: shifts background to `{colors.primary-active}`.
No hover state is documented.
**`card`** — The default content card. Background
`{colors.surface-card}`, text `{colors.ink}`, rounded `{rounded.lg}`
(16px), padding 20px, separated from the canvas by a 1px
`{colors.hairline}` border. No drop shadow.
YAML components:블록과 본문 ## Components섹션은 1:1로 일치해야 합니다. 즉, 모든 YAML 키에는 본문 항목이 있어야 하고, 모든 본문 항목에는 YAML 키가 있어야 합니다. 코드 커버리지 린터가 이를 자동으로 검사합니다.
9. 반응적 행동 및 알려진 격차
이 파일은 브레이크포인트와 한계에 대한 솔직함을 다루는 두 개의 산문 섹션으로 마무리됩니다.
## Responsive Behavior— 화면 너비별 최적화 표,### Touch Targets블록(WCAG-AAA 평가 포함), 그리고### Collapsing Strategy네비게이션, 그리드, 간격 및 폼이 각 너비에 따라 어떻게 조정되는지를 설명하는 글머리 기호 목록.## Known Gaps— 파일에 포함되지 않는 내용의 명확한 목록 . 애니메이션 타이밍, 오류/성공 상태 시각화, 서로 다른 하위 도메인에서 추출된 하위 브랜드 등. 계약의 불명확성을 위해 사전에 누락된 부분을 명시해야 합니다.
## Responsive Behavior
| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 720px | Hamburger nav; hero h1 56→32px; cards stack 1-up. |
| Tablet | 720–1024px | Top nav narrows; cards 2-up; sidebar collapses. |
| Desktop | 1024–1440px | Full top nav; 3-up card grid; sticky sidebar. |
| Wide | > 1440px | Content caps at 1440px; gutters absorb the rest. |
### Touch Targets
- Primary CTAs ≥ 44 × 44px (WCAG AAA).
- Form inputs at 48px height.
### Collapsing Strategy
- Top nav switches to hamburger below 720px.
- Card grid drops column count cleanly — never reflows rows.
## Known Gaps
- Animation and transition timings are out of scope.
- Form error/success states are not extracted on the captured surfaces.
- Dark mode is not a documented variant — the brand renders one canvas mode.
왜 이 9개인가요?
구조는 무작위적인 것이 아닙니다. 이는 에이전트가 UI 결정을 내릴 때 거치는 단계를 반영합니다. YAML 토큰(1~5)은 “정확히 어떤 값인가?”에 대한 답을 제공하고, 개요(6)는 “왜 이렇게 보이는가?”에 대한 답을 제공합니다. 색상/타이포그래피/레이아웃/입체도(7)는 “각 토큰이 어디에 적용되며, 그 이유는 무엇인가?”에 대한 답을 제공하고, 구성 요소(8)는 “이 토큰들로 구성된 이 요소는 어떻게 보이는가?”에 대한 답을 제공합니다. 반응형 및 알려진 격차(9)는 “작은 화면에서 무엇이 변경되고, 무엇이 누락되었는가?”에 대한 답을 제시합니다.
각 섹션은 이전 섹션을 기반으로 구성됩니다. 구성 요소는 색상과 타이포그래피의 조합입니다. 본문은 YAML 코드를 사람이 읽기 쉽게 만든 것입니다. 파일을 위에서 아래로 읽으면 마치 이야기처럼 자연스럽게 이어지며, 린터는 본문을 읽지 않고도 코드를 분석할 수 있습니다.
이상입니다.
[다른글]
