일하는 ai

55. AI로 만든 제품이 안 팔리는

14 min read

-

이 영상은 왜 어떤 AI 제품은 오, 이거 괜찮다는 반응을 얻고, 어떤 건 바로 AI 슬롭처럼 보이는지를 디자인 관점에서 설명합니다. 메이커 에반의 결론은 명확해요. 코드 생성 속도보다 더 중요한 건 화면의 느낌이고, 그 느낌을 일관되게 만드는 핵심 자산이 바로 디자인 시스템과 design.md라는 겁니다.

flowchart LR
A[AI가 비슷한 화면을 대량 생성] --> B[AI 슬롭 문제 발생]
B --> C[design.md로 디자인 규칙 고정]
C --> D[일관된 제품 경험과 차별화 확보]

핵심 요약

  • AI가 화면을 빨리 만들어 주는 시대가 됐지만, 결과물이 다 비슷비슷해지고 매력 없는 AI 슬롭처럼 보이는 문제가 커졌다고 말한다
  • 이 차이를 만드는 건 코드가 아니라 느낌이며, 색상·간격·폰트·컴포넌트 규칙을 일관되게 적용하는 디자인 시스템이 핵심이라고 설명한다
  • 구글 랩스가 제안한 design.md는 AI에게 주는 디자인 시방서 역할을 하며, 디자인 규칙을 마크다운 한 장에 표준화해 넣는 방식으로 소개된다
  • 실전 출발점으로는 원티드 몽타주 디자인 시스템, 쿨리콘즈 아이콘, 프리텐다드 폰트와 자간·행간 조정을 추천한다
  • 처음부터 디자인 시스템을 맨땅에서 짜기보다, 마음에 드는 랜딩 페이지를 클론한 뒤 거기서 디자인 규칙을 추출해 design.md로 정리하는 워크플로를 제안한다

왜 지금 중요한가

코드는 이제 누구나 빨리 만들 수 있지만, 제품이 주는 인상은 여전히 쉽게 복제되지 않습니다. 특히 AI를 많이 쓸수록 평균적인 결과물은 더 쉽게 나오고, 오히려 일관된 디자인 시스템을 가진 팀만 결과물의 밀도와 인상을 지켜 낼 수 있다는 게 이 영상의 핵심 메시지예요.

주요 내용

AI 슬롭은 AI가 못해서가 아니라 평균으로 회귀해서 생긴다

메이커 에반은 먼저 요즘 AI 코딩 도구를 쓰는 사람들이 공통으로 겪는 장면을 꺼냅니다. 코드 한 줄은 10초도 안 걸리고, 한 시간 안에 앱 하나가 나오는 시대인데도, 결과물은 자꾸 어디서 본 듯하고 비슷비슷하다는 거죠.

이런 결과를 영상에서는 AI 슬롭이라고 부릅니다. 대충 그럴싸하긴 한데 손에 잡히는 매력이 없고, 바이브 코딩 티가 나는 결과물이라는 뜻이에요. 이유는 단순합니다. AI는 평균적인 답을 내놓는 데 강하니까요. 그래서 코드 작성 능력 자체는 더 이상 차별점이 아니고, 차별점은 결국 느낌으로 넘어갔다고 설명합니다.

느낌은 디자인 시스템에서 나온다

여기서 메이커 에반은 색깔이 딱 떨어지는 느낌, 간격이 시원시원한 느낌 같은 표현을 씁니다. 사용자는 코드를 보지 않지만 화면은 보니까, 이 느낌을 0.5초 안에 알아챈다는 거죠.

그리고 그 느낌을 만드는 핵심이 디자인 시스템이라고 말합니다. 색상, 폰트, 간격, 컴포넌트를 미리 정해 두고 일관되게 적용하는 것. 이게 안 되면 아무리 좋은 서비스도 싸구려처럼 보인다는 설명입니다. 재밌는 건 AI가 디자인을 더 많이 만들어 줄수록, 오히려 디자인 시스템의 중요성이 더 커진다는 역설을 강조한다는 점입니다.

비유도 직관적이에요. 일을 빨리하는 신입 직원이 있어도 매뉴얼이 없으면 매번 다른 답을 내놓듯이, AI도 가이드라인이 없으면 파란 버튼, 보라 버튼, 둥근 버튼, 각진 버튼을 제멋대로 만들어 낸다는 겁니다.

design.md는 AI에게 주는 디자인 시방서다

이 문제를 해결하려고 구글 랩스가 design.md 포맷을 내놨다고 설명합니다. 원리는 단순해요. 마크다운 파일 하나에 모든 디자인 규칙을 넣어 두는 겁니다.

위쪽에는 색상과 폰트 같은 정해진 값을 컴퓨터가 읽기 좋은 형식으로 적고, 아래쪽에는 왜 그렇게 정했는지 사람이 읽을 수 있는 설명을 붙입니다. AI가 코드를 짤 때 이 파일을 같이 읽으면 매번 색깔을 다시 물어보지 않아도 통일된 디자인을 뽑아낼 수 있다는 거죠. 인테리어 업자에게 도면을 넘겨 주는 것과 비슷하다고 설명합니다.

영상에서 이걸 AI한테 줄 매뉴얼, 디자인 시방서로 반복해서 비유하는 이유도 분명합니다. 결과물의 품질은 AI의 창의성보다, 얼마나 명확한 디자인 규칙을 먼저 넘겨줬는가에 더 크게 좌우된다는 거예요.

실전 추천 조합은 원티드 몽타주, 쿨리콘즈, 프리텐다드다

디자인 시스템을 잘 모르는 사람이 어디서부터 시작하면 좋으냐는 질문에는 세 가지를 추천합니다.

첫 번째는 원티드 몽타주 디자인 시스템입니다. 메이커 에반은 이걸 한국인이 좋아하는 디자인이고, 한국어로 디자인할 때 생기는 자잘한 문제들까지 고려돼 있다고 설명합니다. 행간이나 긴 버튼 텍스트 같은 현실적인 문제를 포함해서요. 피그마에서 export해서 쓰거나, 여기서 design.md를 추출해 활용해도 된다고 말합니다.

두 번째는 쿨리콘즈 아이콘입니다. 라인, 듀오톤, 듀오컬러 세 가지 스타일이 있고, 두께도 얇은 것부터 굵은 것까지 조절되며, 코너 라운딩도 잘 맞아 있다고 설명합니다. 왜 추천하냐면, 무료 아이콘을 마구 섞으면 두께와 각이 제각각이라 화면이 어수선해지고, 반대로 너무 흔한 아이콘 세트는 AI 슬롭 티를 더 강하게 만들 수 있기 때문이죠.

세 번째는 프리텐다드 폰트입니다. 그런데 단순히 폰트만 까는 걸로 끝나지 않는다고 강조합니다. 진짜 느낌은 자간과 행간에서 나온다고 말해요. 특히 후반부에서 자간 1픽셀 차이만으로도 화면 인상이 갈릴 수 있다고 느꼈고, 한국어 타이포그래피를 더 공부하고 싶어졌다고까지 말합니다.

처음 design.md를 만들 때는 복제해서 배우는 편이 빠르다

이 영상에서 제일 실용적인 부분은 여기예요. 처음부터 빈 파일에 디자인 시스템을 창조하려 하지 말고, 먼저 마음에 드는 랜딩 페이지 하나를 고르라고 합니다. 토스, 리니어, 버셀, 스트라이프처럼 이 느낌 좋다 싶은 페이지면 충분하다고 해요.

그다음 클로드 코드나 안티그래비티 같은 도구에 이 페이지 한번 똑같이 만들어 봐라고 시킵니다. 스크린샷이나 URL만 줘도 클론이 가능하고, 메이커 에반은 이때 안티그래비티의 제미니 프로 3.1 하이를 가장 추천한다고 말합니다. 다른 모델들은 클론 퀄리티가 만족스럽지 않은 경우가 많다고도 덧붙입니다.

클론이 만들어지면 그 안에 이미 색상, 폰트, 간격, 컴포넌트 구조가 다 들어가 있으니, 그걸 기준으로 이 프로젝트에서 쓰인 디자인 규칙을 design.md 형식으로 추출해 줘라고 요청하면 된다는 거예요. 그렇게 추출한 파일에서 색상만 브랜드에 맞게 바꾸거나 폰트만 교체하면, 처음부터 머리 싸매고 짜는 것보다 훨씬 빠르고 결과물 수준도 높다는 게 이 워크플로의 장점입니다.

원문 발화 하이라이트

  • [00:16] “오늘 영상에서는 그 차이를 만드는게 뭔지 그리고 왜 디자인 시스템이 지금 시대에 가장 중요한 자산인지 같이 풀어 볼게요.”
  • [00:44] “이런 AI 티 나는 결과물들을 저희는 AI 슬롭이라고 불러요.”
  • [02:13] “구글 랩스에서는 이러한 문제점을 해결하기 위해서 디자인 MD라는 포맷을 내놨어요.”
  • [03:10] “첫 번째는 원티드 몽타주식 디자인 시스템을 이용해 보세요.”
  • [04:21] “세 번째 추천이다. 어떻게 보면 가장 중요한 부분은 바로 폰트입니다.”
  • [07:54] “이 파일 먼저 읽고 시작해. 이렇게 명시적으로요.”

바로 실행해 보기

  • 지금 만드는 제품이 있다면 먼저 원티드 몽타주, 쿨리콘즈, 프리텐다드 중 최소 한 세트씩 골라서 디자인 기본 토대를 깔아 보세요. 이것만 해도 AI가 내놓는 화면의 통일감이 꽤 달라집니다
  • 마음에 드는 랜딩 페이지 하나를 골라 AI로 클론해 보고, 거기서 색상·폰트·간격 규칙을 뽑아 design.md 초안으로 정리해 보세요. 처음부터 직접 설계하는 것보다 훨씬 덜 막막합니다
  • AI에게 화면 작업을 시킬 때는 프롬프트만 던지지 말고 이 파일 먼저 읽고 시작해라고 하면서 design.md를 같이 넘겨 보세요. 그리고 결과물에 정해 둔 색, 사이즈, 아이콘 규칙 밖의 요소가 들어갔는지 한 번 더 확인하는 습관을 붙이면 좋습니다

참고

영상 메타

수집 품질

  • 자막 세그먼트: 378개
  • 자막 문자수: 6855자
  • 챕터 추출: 8개
  • 콘텐츠 생성: Subagent 기반

AI 생성 도구를 활용해 초안을 구성했고, 원영상 발화와 공개 자료를 교차 확인해 정리했습니다.

그래프 뷰

백링크