Transcript
00:00:00AI 코딩 도구들이 무서울 정도로 좋아지고 있습니다. Cursor, Claude Code, V0까지 말이죠. 아이디어만 있으면
00:00:06몇 분 만에 작동하는 앱을 만들 수 있지만, UI를 열어보면 어딘가 어색합니다. 코드는 돌아가지만 UI는
00:00:12여전히 저렴해 보이죠. 이제 Stripe, Linear, Vercel 같은 대형 플랫폼들과 비교해 보세요.
00:00:17그들은 무엇을 다르게 하고 있을까요? 바로 단순한 파일 하나입니다. 이름은 'DesignMD'이고,
00:00:22구글이 방금 오픈 소스로 공개했습니다. 단 몇 분 만에 이 파일을 코드에 주입하는 방법을 보여드릴게요.
00:00:30DesignMD는 제품이 어떻게 보이고 느껴져야 하는지 AI 에이전트에게 알려주는
00:00:38일반 마크다운 파일입니다. 색상, 글꼴, 간격, 버튼, 레이아웃 규칙, 접근성 참고 사항 등 모든 것을 담고 있죠.
00:00:45따라서 AI는 브랜드를 추측하는 대신 이 파일을 읽고 따릅니다. Figma 익스포트나 복잡한 JSON도 필요 없죠.
00:00:52완벽한 결과물을 얻기 위해 매번 10단락짜리 프롬프트를 쓸 필요도 없습니다. 구글은 이를
00:00:574월 21일에 오픈 소스로 공개했고, 불과 몇 주 만에 GitHub에서 7만 개 이상의
00:01:02별을 받으며 폭발적인 반응을 얻고 있습니다. 워크플로우를 앞당기는 코딩 도구와 팁을 좋아하신다면 구독해 주세요.
00:01:08항상 새로운 영상이 준비되어 있습니다. 자, 정말 멋진 도구입니다. 왜 이것이
00:01:12실제로 중요한지 보여드릴게요. 자, 같은 프롬프트를 사용해 보겠습니다. "현대적인 대시보드를 만들어줘."
00:01:18먼저, DesignMD 파일이 없는 경우입니다. 생성된 결과를 보면, 네, 전형적인 AI 대시보드네요.
00:01:24기술적으로는 작동하죠? 하지만 전형적인 Tailwind 느낌이 납니다. 딱 그렇게 생겼어요. 무작위로 배치된
00:01:30버튼들, 일반적인 카드 형태들까지. 실제로 만들고자 하는 것에 대한 정체성이 전혀 느껴지지 않습니다.
00:01:35이제 같은 프롬프트를 다시 실행하되, 이번에는 Stripe 스타일의 DesignMD 파일을 추가해 보겠습니다.
00:01:42혹은 원하는 다른 브랜드의 파일을 넣어도 좋습니다. 차이를 보세요. 색상이 정렬되고
00:01:48간격이 더 깔끔해졌습니다. 버튼들도 실제로 서로 어울리는 것처럼 보이죠. 화면 전체에
00:01:54관점이 생겼습니다. 같은 AI, 같은 프롬프트지만 이제 다른 컨텍스트가 주어졌습니다. DesignMD가 없으면 AI는
00:02:02추측을 합니다. 사이트가 어떻게 보여야 할까 하고 말이죠. 하지만 DesignMD가 있으면 AI는 이미 검증된
00:02:08멋진 플랫폼들에 기반한 규칙을 갖게 됩니다. 그렇다면 이 파일 안에는 실제로 무엇이 들어있을까요?
00:02:14AI가 읽을 수 있는 디자인 시스템이라고 생각하세요. 상단에는 보통 구조화된 토큰이 있습니다.
00:02:21정확한 헥사 색상 코드, 폰트 패밀리, 테두리 반경, 간격 같은 것들이죠. 이것들은 엄격한 규칙이지만,
00:02:27더 중요한 부분은 그 뒤에 오는 마크다운입니다. 여기서 의도를 설명합니다. 단순히 "이 파란색을 써라"가 아니라,
00:02:34"이 파란색은 기본 강조색이며 명확하고 신뢰할 수 있는 느낌을 주어야 한다"라고 말이죠. 이것이 중요한 이유는
00:02:40AI에게 숫자뿐만 아니라 판단력이 필요하기 때문입니다. 좋은 DesignMD는 보통 색상 팔레트,
00:02:47타이포그래피, 컴포넌트, 레이아웃, 접근성을 다룹니다. 그래서 AI는 두 가지를 동시에 얻게 되죠.
00:02:54정확한 값과 그 뒤에 숨겨진 이유입니다. 그것이 바로 결과물이 우리가
00:03:00실제로 목표로 하는 방향에서 벗어나지 않게 해주는 이유입니다. 이제 당연한 질문이 생기죠. "또 다른 디자인 시스템 형식이 필요한가?"
00:03:05우리에게는 이미 Figma가 있고, JSON 토큰도 있으며, Cursor rules와 ClaudeMD도 있습니다.
00:03:11하지만 이것들은 각각 다른 문제를 해결합니다. Figma는 UI입니다. 사람에게는 좋지만,
00:03:18보통 저장소 외부에 존재하죠. JSON 토큰은 기계에게는 좋지만, 웹사이트에 대한
00:03:25우리의 취향이나 의도를 설명해주지 못합니다. Cursor rules와 ClaudeMD는 에이전트가
00:03:31어떻게 행동할지 알려주지만, 진정한 디자인 시스템은 아닙니다. DesignMD는 이 모든 것의 중심에 있습니다.
00:03:38사람이 읽을 수 있고, 동시에 기계도 읽을 수 있습니다. 버전 관리가 가능하며 에이전트
00:03:44친화적입니다. 이것이 큰 변화입니다. 여러분의 디자인 시스템은 더 이상 디자인 도구에 갇혀 있지 않습니다.
00:03:49코드 바로 옆, 이 마크다운 파일 안에 존재하죠. 이것이 단 2주 만에 큰 화제가 되고
00:03:54개발자들이 주목하는 이유입니다. 커뮤니티 저장소는 벌써 별이 7만 개를 넘었습니다. 정말 빠르죠?
00:03:59사람들은 Linear, Stripe, Notion, Vercel용 DesignMD 파일을 공유하고 있습니다.
00:04:04이유는 간단합니다. 그 누구도 "깔끔하게 만들어줘", "현대적으로 해줘",
00:04:09"간격을 더 잘 써줘", "이 사이트처럼 만들어줘"라고 계속 타이핑하고 싶어 하지 않기 때문입니다. 정말 지겹잖아요.
00:04:16DesignMD를 사용하면 반복을 멈출 수 있습니다. AI에게 디자인 규칙을 한 번만 주면, 모든 화면이
00:04:23동일한 기초 위에서 시작됩니다. 그것이 진정한 승리입니다. 모든 화면에 걸친 디자인 속도죠.
00:04:29재작업이 줄어듭니다. 똑같이 못생긴 버튼을 10번씩 수정할 필요가 없죠.
00:04:34솔직히 말씀드리면, 완벽하지는 않습니다. 훌륭한 시작이지만 파일 하나일 뿐이죠.
00:04:39하지만 저장소에 보관되고, 여러 도구에서 작동합니다. 접근성 가이드도 포함되어 있고
00:04:44설정 과정도 거의 제로에 가까워 훌륭합니다. 적용하기 정말 쉽죠. 또한, 파일의 결과물은
00:04:51여러분이 무엇을 넣느냐에 달려 있습니다. 부실한 DesignMD는 당연히 부실한 결과물을 주겠지만, 1인 개발자나
00:04:57프로토타입, AI 중심의 워크플로우를 사용하는 분들에게는 정말 실용적인 업그레이드입니다. 사용해야 할까요? 네,
00:05:02아마도요. 특히 이미 Cursor, Claude Code, V0로 작업하고 있다면 더욱 그렇습니다. 'Awesome' 저장소에 있는
00:05:08템플릿으로 시작해 보세요. 설명란에 링크가 있습니다. 프로젝트에 넣고, 여러분의 사이트와
00:05:13브랜드에 맞춰 커스텀하세요. 목표는 AI를 창의적으로 만드는 것이 아닙니다. AI가 추측하게 만드는 것을
00:05:20멈추는 것입니다. 규칙이 명확해지면 UI는 일관성을 갖게 되고, 여러분의 앱은
00:05:25단순한 AI 데모가 아니라 진짜 제품처럼 느껴지기 시작할 것입니다. 이런 코딩 도구와 팁이
00:05:31마음에 드셨다면, Better Stack 채널을 구독해 주세요. 다음 영상에서 뵙겠습니다.