레퍼런스와 디자인 시스템으로 AI 디자인 품질 높이기

출처: https://www.youtube.com/watch?v=feqjgsQFJ5k · 노디의 바이브코딩 · 6:38 · 2026-08-14

요지

AI로 디자인할 때는 프롬프트를 입력하기 전에 서비스의 목적과 상황에 맞는 레퍼런스를 찾는다.
좋은 레퍼런스의 색상·글꼴·간격 같은 반복 규칙을 디자인 토큰으로 추출하고, 이를 재사용할 수 있는 디자인 시스템으로 정리한다.
UI를 생성할 때 디자인 시스템을 기준으로 삼으면 AI가 매번 새로 결정해야 하는 선택지가 줄어들어 결과의 일관성을 높일 수 있다.
화면을 완성한 뒤에는 디자인을 유지하면서 한글 문구를 따로 검수해 어색하고 추상적인 표현을 다듬는다.
레퍼런스 선정 → 디자인 시스템 기반 생성 → 한글 검수라는 순서가 영상이 제안하는 핵심 작업 흐름이다.

개요

이 영상은 같은 AI 도구를 사용해도 결과물의 인상이 달라지는 이유를 디자인 작업의 순서에서 찾는다. 발표자는 막연한 요청으로 화면을 생성한 뒤 “더 고급스럽게”, “더 미니멀하게” 같은 지시를 반복해도 기본적인 인상이 크게 바뀌지 않았다고 설명한다. 대신 생성 전에 디자인의 기준을 마련하고, 생성 후에는 문구를 별도로 다듬는 방식을 제안한다.

핵심은 AI가 참고할 구체적인 판단 기준을 제공하는 것이다. 서비스에 맞는 레퍼런스가 방향을 정하고, 디자인 시스템이 화면의 일관성을 유지하며, 한글 검수가 실제 서비스다운 표현을 완성한다. 이는 발표자의 사례에 기반한 작업 방법이며, 모든 결과물에서 동일한 품질 향상을 보장하는 정량적 검증으로 제시되지는 않는다.

배경 / 사전 지식

레퍼런스는 디자인 방향을 정할 때 참고하는 기존 웹사이트나 화면이다. 단순히 보기 좋은 화면을 고르기보다 사용자의 기대, 서비스의 용도, 전달해야 할 인상이 비슷한 대상을 찾는 것이 중요하다. 예를 들어 기업용 AI SaaS는 화려한 연출보다 정보의 명확함과 신뢰감을 우선해야 할 수 있다.

UI는 사용자가 보고 조작하는 화면의 요소다. 제목, 본문, 버튼, 입력창, 카드 등이 여기에 해당한다. 각각이 잘 만들어져 있어도 화면마다 글자 크기나 간격의 기준이 달라지면 전체 서비스의 인상이 흐트러진다.

디자인 토큰은 반복해서 사용할 시각적 값을 이름으로 정의한 것이다. 대표적으로 기본 글자색, 본문 크기, 여백 단위, 버튼의 모서리 반경 등이 있다. 디자인 시스템은 이 값들에 사용 목적과 적용 규칙을 더해 여러 화면에서 재사용하도록 정리한 기준이다. 토큰 목록만으로는 어떤 상황에서 어떤 값을 써야 하는지 충분히 설명되지 않는다.

핵심 개념

1. 목적에 맞는 레퍼런스

레퍼런스는 이후 작업의 출발점이다. 영상은 멋있다는 이유만으로 사이트를 고르면 뒤의 작업을 아무리 정교하게 해도 서비스에 맞지 않는 방향으로 진행될 수 있다고 지적한다.

선정할 때는 “이 디자인이 내가 만들 서비스의 목적과 인상에 맞는가?”를 확인한다. 사용자에게 신뢰를 주어야 하는 서비스인지, 강한 시각적 인상을 남겨야 하는 브랜드 사이트인지에 따라 적합한 기준이 달라진다.

2. 디자인 토큰에서 디자인 시스템으로

영상은 레퍼런스를 이미지로 캡처해 전달하는 데서 더 나아가, 실제 사이트에서 반복되는 디자인 값을 추출하는 방법을 소개한다. 색상, 글자 크기, 간격, 버튼 스타일 등을 확보한 다음 AI에게 이를 분석해 디자인 시스템으로 정리하도록 요청한다.

학습용으로 구체화하면, 16px라는 값은 토큰의 재료이고 “본문 기본 크기는 16px로 사용한다”는 설명은 적용 규칙이다. 버튼의 배경색과 모서리 값을 정한 뒤 “주요 행동에는 이 버튼 스타일을 사용한다”는 기준을 더하면 화면 생성에 활용하기 쉬워진다.

3. AI의 디자인 선택지 줄이기

“감성적인 디자인” 같은 지시는 해석의 범위가 넓다. 글꼴, 색상, 여백, 버튼 스타일을 AI가 각각 결정해야 하므로 결과가 흔들릴 수 있다. 디자인 시스템은 이 결정의 일부를 미리 고정한다.

이후의 요청은 “더 세련되게 만들어 줘”보다 “정의한 제목 체계, 여백 규칙, 버튼 스타일을 적용해 화면을 만들어 줘”처럼 구체화된다. 영상이 강조하는 지점은 토큰 추출 자체보다 AI가 새로 판단해야 할 항목을 줄이는 데 있다.

4. 디자인과 한글 문구의 별도 검수

시각적으로 완성도가 높아도 문구가 추상적이거나 어색하면 실제 서비스처럼 느껴지지 않을 수 있다. 영상에서는 완성한 화면의 한글을 검토할 수 있도록 내보내고, GPT로 수정안을 만든 다음 클로드 디자인에 반영하는 과정을 보여 준다.

검수의 목표는 문장을 장식하는 것이 아니라 사용자가 서비스의 제공 가치와 행동을 쉽게 이해하도록 만드는 것이다. 문구를 고칠 때 제공하지 않는 기능이나 확인되지 않은 성과를 새로 덧붙이지 않도록 한다. 이 검수 기준은 영상의 작업 흐름을 확장한 학습용 보충 설명이다.

작동 원리

서비스의 목적을 정리한다. 무엇을 만들고 누구에게 어떤 인상을 전달할지 간단히 적는다. 이는 영상의 ‘상황과 목적에 맞는 레퍼런스’를 실제로 고르기 위한 준비 단계다.
레퍼런스를 찾는다. 영상에서 소개한 웹 UI 레퍼런스 사이트 등을 살펴보고 서비스에 맞는 대상을 선택한다. 눈에 띄는 효과보다 용도와 전달 방식의 적합성을 확인한다.
반복되는 시각적 값을 추출한다. 영상에서는 별도 도구에 레퍼런스 URL을 입력해 디자인 토큰을 추출한다. 자막만으로 도구의 정확한 철자와 설치 명령을 확정할 수 없으므로 여기서는 명령어를 재현하지 않는다.
디자인 시스템으로 정리한다. 추출 결과를 클로드 디자인에 제공하고 “이 레퍼런스에서 추출한 디자인 토큰을 분석해 재사용할 수 있는 디자인 시스템으로 만들어 줘”라고 요청한다. 색상, 글자 체계, 간격, 컴포넌트의 적용 기준을 마련한다.
시스템을 기준으로 UI를 생성한다. 필요한 화면과 콘텐츠를 요청하면서 앞서 만든 기준을 적용하도록 한다. 수정할 때도 기준을 유지해야 여러 화면의 일관성을 확보하기 쉽다.
한글 문구를 검수한다. 화면의 문구를 내보내 별도로 읽고, 어색한 표현과 불명확한 설명을 수정한다. 영상에서는 GPT를 이용해 수정안을 만든다.
수정안을 반영하고 화면을 확인한다. 기존 디자인을 유지하면서 문구 변경을 요청한다. 보충 실무 단계로, 문장 길이가 달라져 줄바꿈이나 버튼 너비에 문제가 생기지 않았는지도 확인한다.

각 단계는 다음 단계의 전제가 된다. 레퍼런스가 방향을 결정하고, 시스템이 생성 기준을 고정하며, 문구 검수가 마지막 표현을 다듬는다.

코드 예시

아래는 영상에 나온 코드가 아니라, ‘토큰을 정의하고 여러 UI 요소에 같은 규칙을 적용한다’는 원리를 보여 주는 학습용 예제다. 다음 내용을 index.html로 저장하고 브라우저에서 열면 실행할 수 있다. 수치와 색상은 설명을 위해 임의로 정했다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>디자인 시스템 적용 예제</title>
  <style>
    :root {
      --color-background: #f5f7fa;
      --color-surface: #ffffff;
      --color-text: #172033;
      --color-primary: #2458c6;
      --space-small: 8px;
      --space-medium: 16px;
      --space-large: 32px;
      --radius-card: 12px;
      --radius-button: 8px;
      --font-body: 16px;
      --font-heading: 28px;
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: var(--space-large);
      background: var(--color-background);
      color: var(--color-text);
      font-family: system-ui, sans-serif;
      font-size: var(--font-body);
      line-height: 1.6;
    }
    main { max-width: 640px; margin: 0 auto; }
    .card {
      padding: var(--space-large);
      margin-bottom: var(--space-medium);
      border-radius: var(--radius-card);
      background: var(--color-surface);
    }
    h1, h2 {
      margin: 0 0 var(--space-medium);
      font-size: var(--font-heading);
      line-height: 1.3;
    }
    p { margin: 0 0 var(--space-medium); }
    .button {
      display: inline-block;
      padding: var(--space-small) var(--space-medium);
      border-radius: var(--radius-button);
      background: var(--color-primary);
      color: white;
      text-decoration: none;
    }
    .button:focus-visible {
      outline: 3px solid var(--color-text);
      outline-offset: 3px;
    }
  </style>
</head>
<body>
  <main>
    <section class="card">
      <h1>팀 문서를 한곳에서 검색하세요</h1>
      <p>흩어진 업무 문서를 모아 필요한 정보를 찾을 수 있습니다.</p>
      <a class="button" href="#guide">사용 방법 보기</a>
    </section>
    <section class="card" id="guide">
      <h2>문서를 등록하고 검색하세요</h2>
      <p>문서를 등록한 뒤 검색어를 입력하면 관련 내용을 찾을 수 있습니다.</p>
    </section>
  </main>
</body>
</html>

:root의 변수는 디자인 토큰 역할을 한다. .card와 .button의 CSS는 토큰을 어떤 요소에 어떻게 적용할지 정하는 규칙이다. 두 카드가 같은 여백과 모서리 값을 공유하므로 기준을 바꾸려면 해당 토큰을 한 번 수정하면 된다. 이처럼 값을 이름으로 관리하고 적용 규칙을 공유하는 구조를 AI에게 제공하면 화면마다 스타일을 따로 결정할 필요가 줄어든다.

함정·실수

화려함만 보고 레퍼런스를 고른다. 서비스가 전달해야 할 인상과 맞지 않을 수 있다. 선택 전에 사용자와 서비스 목적을 적고 적합성을 확인한다.
막연한 형용사로 수정 요청을 반복한다. ‘고급스럽게’나 ‘감성적으로’만으로는 원하는 변화가 명확하지 않다. 제목 체계, 간격, 버튼 규칙처럼 바꿀 기준을 구체적으로 지정한다.
토큰을 추출한 뒤 곧바로 화면을 생성한다. 값만 있고 사용 규칙이 없으면 적용이 흔들릴 수 있다. 먼저 디자인 시스템으로 정리하는 단계를 둔다.
디자인이 완성되면 문구도 완성됐다고 생각한다. 추상적이거나 부자연스러운 문장이 남을 수 있다. 한글만 따로 읽는 검수 단계를 마련한다.
문구 수정 후 화면을 확인하지 않는다. 글자 수가 바뀌면 줄바꿈과 배치가 달라질 수 있다. 수정 반영 후 화면도 다시 살펴본다. 이는 영상의 흐름에 덧붙인 실무 보충 사항이다.

베스트 프랙티스

영상의 권장 패턴은 ‘목적에 맞는 레퍼런스 선정 → 토큰 추출과 디자인 시스템 정리 → 시스템 기반 UI 생성 → 한글 검수’다. 생성 전에 기준을 마련하고, 완성 후에는 문구까지 확인하는 흐름을 반복해서 사용할 수 있다.

다음은 이 패턴을 적용하기 위한 보충 팁이다.

레퍼런스를 선택한 이유를 짧게 남긴다. ‘정보 구조가 명확하다’, ‘차분한 색상으로 신뢰감을 준다’처럼 적으면 이후 수정에서도 방향을 유지하기 쉽다.
토큰은 값뿐 아니라 역할이 드러나는 이름으로 정리한다. blue보다 color-primary처럼 사용 목적을 표현하면 적용 기준을 설명하기 쉽다.
생성 요청에는 적용할 디자인 시스템과 필요한 콘텐츠를 함께 제공한다. 디자인 기준만으로 서비스의 기능이나 문구까지 결정되지는 않는다.
자동 추출 도구를 사용할 수 없다면 색상, 글자 체계, 간격, 버튼처럼 주요 반복 규칙부터 수동으로 정리한다. 중요한 것은 생성에 사용할 기준을 확보하는 것이다.
한글 검수에서는 ‘누구에게 무엇을 제공하는가’, ‘버튼을 누르면 무엇을 하는가’를 분명하게 표현한다. 수정 요청에는 기존 의미와 사실을 유지한다는 조건을 붙인다.
문구 검수 요청 예시: “다음은 서비스 화면의 한글 문구입니다. 의미와 사실을 유지하면서 어색하거나 추상적인 표현을 고쳐 주세요. 원문, 수정안, 수정 이유를 함께 작성하고 새로운 기능이나 성과는 추가하지 마세요.”

참고

원본 영상: 클로드로 디자인할 때 프롬프트부터 넣지 마세요 — 노디의 바이브코딩.
어워즈(Awwwards): 영상에서 웹 UI 레퍼런스를 찾는 사이트로 소개한다.
클로드 디자인: 디자인 시스템을 정리하고 이를 기준으로 UI를 생성하는 도구로 언급한다.
디자인 토큰 추출 도구: 자막에 ‘엠블란트’, ‘댐브란트’, ‘덴브란트’ 등으로 혼재해 표기되어 있다. 정확한 제품명과 설치 명령은 제공된 자막만으로 확정할 수 없다.
GPT: 완성된 화면의 한글 문구를 검수하고 수정안을 만드는 데 사용한다.