디자인 시스템이란

1. 클로드 디자인의 가장 큰 장점

클로드 코드로 충분히 실행 가능한 프로토타입을 만들 수 있습니다. Skills과 Agents를 결합하여 화면을 만들고, 슬라이드를 만들고, 프로토타입을 만드는 일은 이미 익숙한 모습이 되었습니다.

그렇다면 클로드 디자인이 가지는 가장 큰 장점은 무엇일까요? 다양한 장점이 있겠지만 하나만 꼽으라 한다면 디자인 시스템을 입힐 수 있다는 점입니다. 디자인 시스템이란, 한 서비스의 모든 화면이 함께 따르는 약속의 모음입니다. 색상, 타이포그래피, 간격, 컴포넌트 등 디자인의 기본 요소들이 미리 정해져 있습니다.

회사 내에는 보통 이미 잘 정리된 디자인 시스템이 있습니다. 이것을 클로드 코드에 Skill, Agents, 하네스 엔지니어링 등을 세팅해놓고 일관된 디자인을 생산해왔습니다. 다만, 이러한 세팅은 허들이 높고 사용자 입장에서는 어렵게 느껴질 수 있습니다. 또한 무엇하나 고치는 것이 코드를 알지 못하면 쉽지 않은 경우가 많았습니다. 클로드 디자인에서는 디자인 시스템을 쉽게 입힐 수 있도록 지원하여, 누구나 일관된 디자인을 생산할 수 있도록 도와줍니다.

물론 우리가 만족할만한 결과물을 얻으려면 사람의 손을 거쳐야 하는 부분이 아직 있습니다. 다만 클로드 디자인은 사람의 손을 거쳐야 하는 부분에 UI를 제공하여, 보면서 수정이 가능한 시스템을 제공합니다.

2. 가장 큰 장점부터

디자인 시스템 없이 하나씩 사용해볼 수 있지만 우리는 클로드 디자인의 가장 큰 장점인 디자인 시스템을 입히는 것부터 시작해보도록 하겠습니다. 사내에 디자인 시스템이 있다면 해당 디자인 시스템을, 만약 사내에 디자인 시스템이 없다면 Google에서 제공하는 Material Design과 같은 공개된 디자인 시스템을 활용해보도록 하겠습니다.

영상 강의를 보시는 분들은 위니브의 디자인 시스템이 제공됩니다. 회사 내에서 일관되게 사용하는 디자인으로 어느정도 비슷하게 만들 수 있는지 비교해보기 위해 먼저 아래 서비스에 들어가서 위니브의 디자인을 살펴보도록 하겠습니다.

2. 디자인 시스템이란 무엇인가

디자인 시스템(Design System)은 한 서비스의 모든 화면이 함께 따르는 약속의 모음입니다.

색상: 메인, 보조, 배경, 강조색이 미리 정해져 있습니다.
타이포그래피: 제목, 본문, 캡션의 크기와 굵기가 일정합니다.
간격: 여백이 8px, 16px, 24px처럼 일정한 단위를 따릅니다.
컴포넌트: 버튼, 카드, 입력칸의 모양이 어디서나 같습니다.

옷으로 비유하면, 매번 아무 옷이나 새로 사 입는 대신 미리 맞춰둔 코디 세트를 입는 것과 같습니다. 한 번 정해두면 화면이 백 개로 늘어도 한 사람이 만든 듯한 통일감이 유지됩니다.

실무 팀들은 이 약속을 대부분 Figma 같은 디자인 도구 안에 정리해 둡니다. 위니브도 마찬가지로, 실제 업무에서 쓰는 디자인 시스템을 Figma로 관리하고 있습니다.

왼쪽에 보면 Grid, Color, Text Styles, Icon, Logo, component, Print 등이 카테고리로 나뉘어 정리되어 있는 것을 볼 수 있습니다.

Grid는 PC화면, 모바일 화면, 태블릿 화면 등 화면의 크기에 따른 레이아웃 가이드입니다. Color는 위니브에서 사용하는 색상들이 정리되어 있습니다. Text Styles는 제목, 본문, 캡션 등 글자 스타일이 정리되어 있습니다. Icon과 Logo는 위니브에서 사용하는 아이콘과 로고가 정리되어 있습니다. Component는 버튼, 카드, 입력칸 등 자주 쓰이는 컴포넌트가 정리되어 있습니다. Print은 인쇄물에 쓰이는 디자인 요소가 정리되어 있습니다.

이런식으로 회사에서는 일관된 디자인을 위해 디자인 시스템을 관리합니다. 클로드 디자인에서는 이런 디자인 시스템을 쉽게 입힐 수 있도록 지원하여, 누구나 일관된 디자인을 생산할 수 있도록 도와줍니다.

위니브 디자인 시스템 파일은 영상강의에서 함께 제공합니다. 영상강의 없이 책만 보고 따라오는 분도 막힘이 없도록, 무료로 받을 수 있는 다른 디자인 시스템도 함께 안내합니다. 어느 쪽을 쓰든 다음 절부터의 실습은 똑같이 진행할 수 있습니다.

3. 왜 처음부터 추가하고 시작할까

디자인 시스템 없이 시작해도 화면은 나옵니다. 그런데도 굳이 처음부터 추가하는 데는 이유가 있습니다. "사용할 수 있는 화면"을 만들려면 이러한 디자인 시스템이 필요하기 때문입니다. "디자인 시스템을 입히지 않고도 잘 나오는데요?"라고 얘기할 수 있지만 실제 업무에서 사용할 수 있는 화면을 만드려면 많은 공수가 들게 됩니다.

디자인 시스템 없이	디자인 시스템을 추가하고
매번 "색은 ~, 폰트는 ~"를 적어야 함	적지 않아도 자동으로 입혀짐
화면마다 톤이 미묘하게 달라짐	모든 화면이 같은 톤으로 통일됨
어디서 본 듯한 데모 같은 결과	실제 제품에 바로 어울리는 결과

정리하면 이점은 세 가지입니다.

완성도: 첫 화면부터 진짜 제품처럼 보입니다.
속도: 색과 폰트를 매번 설명하지 않아도 되니 프롬프트가 짧아집니다.
일관성: 화면이 늘어나도 흐트러지지 않습니다.