AI로 멋진 화면을 만들기 위한 디자인 시스템을 배우자!

웹사이트 디자인을 AI나 디자이너에게 "멋지게 해주세요", "느낌 있게 해주세요"라고만 의뢰하면 완성된 이미지와 큰 차이가 발생합니다.

왜냐하면, 웹 디자인에는 "어떤 정보를・어떤 순서로・어떤 레이아웃으로・어떤 분위기로・어떤 색으로・어떤 글자로・어떤 부품으로・스마트폰에서는 어떻게"라는 여러 가지 관점이 있기 때문입니다.

이 기사에서는 AI로 멋진 화면을 만들기 위해 알아두어야 할 **디자인 시스템 (Design System)**과, AI·디자이너에게 지시하는 사고방식을 디자인 초보자도 알 수 있도록 정리합니다. 그대로 사용할 수 있는 "지정 예시(프롬프트)"도 각 장에 실려 있습니다.

본 기사는 사내 캐치업 회(AI 디자인 툴 「Claude Design」 검증)에서 작성한 자료를 바탕으로 하고 있습니다. 스크래치 개발에서는 디자인 시스템이 없는 만큼, AI에 대한 지시에서 "무엇을 정의해야 하는가"를 알고 있는 것이 품질과 직결됩니다.

웹사이트 디자인 의뢰 시에는 주로 다음과 같은 분류를 정리해서 전달하는 것이 좋습니다.

• 목적・타겟
  정보 설계 (Information Architecture)
  페이지 구성 (Page Structure)
  레이아웃 (Layout)
  비주얼 스타일 (Visual Style)
  톤 앤 매너 (Tone & Manner)
• 컬러 설계 (Color Design)
  타이포그래피 (Typography)
• 컴포넌트 설계 (Component Design)
• UI 상태 (UI State)
• 여백・라운드(Corner Radius)・그림자(Shadow)
• 반응형 설계 (Responsive Design)
  액세서빌리티 (Accessibility)
  디자인 시스템화 (Design Systematization)

각각을 순서대로 설명하겠습니다.

웹사이트를 만드는 이유입니다. 같은 "서비스 소개 사이트"라도 목적에 따라 디자인은 크게 달라집니다.

목적	디자인의 방향성
서비스 등록을 늘리고 싶다	CTA를 눈에 띄게 한다
...

누구를 대상으로 하는 웹사이트인가 하는 점입니다.

• 20대 후반 여성
• 중소기업 경영자
• IT에 익숙하지 않은 개인 사업자
• 채용 응모를 검토 중인 학생
• 육아 중인 30대 부부
• SaaS 도입을 검토 중인 법인 담당자

타겟에 따라 선호되는 디자인이 달라지기 때문입니다. 같은 "건강 관리 앱"이라도,

• 고령자 대상이라면, 글자를 크게 하고 조작을 알기 쉽게 한다
• 젊은 여성 대상이라면, 부드러운 색상이나 친근함을 중시한다
• 기업 대상이라면, 신뢰감이나 데이터의 가독성을 중시한다

와 같이 달라집니다.

이 웹사이트의 목적은 서비스 내용을 알기 쉽게 전달하여 무료 등록으로 연결하는 것입니다.
타겟은 20대 후반~30대 초반 여성으로, 일상이나 업무에 조금 지쳐 있으며
새로운 취미나 기분 전환을 찾고 있는 사람입니다.
...

"무엇을, 어떤 순서로, 어떻게 보여줄 것인가"를 결정하는 것입니다. 웹사이트는 단순히 정보를 나열하기만 해서는 안 되며, 사용자가 자연스럽게 이해할 수 있는 순서로 보여줄 필요가 있습니다.

• 처음에 무엇을 전달할 것인가
• 사용자의 불안을 어디에서 해소할 것인가
• 서비스의 매력을 어떤 순서로 전달할 것인가
• 등록・구매・문의 등의 행동을 어디에서 촉구할 것인가
• 상세 정보는 어디까지 실을 것인가 / FAQ를 어디에 둘 것인가

서비스 소개 사이트라면 다음과 같은 흐름이 자주 사용됩니다.

퍼스트 뷰 (First View)… 서비스의 가장 큰 가치를 전달 -
과제 제기 (Problem Statement)… 사용자가 겪고 있는 고민에 공감함 -
해결책 (Solution)… 이 서비스로 무엇을 할 수 있는지 전달 -
특징 (Features)… 타 서비스와의 차이점이나 강점을 설명함 -
이용 단계 (Usage Steps)… 사용법을 간단히 설명함 -
실적・후기 (Social Proof)… 신뢰감을 높임 -
요금 (Pricing)… 판단 재료를 제시함 -
FAQ… 불안을 해소함 -
CTA… 등록・문의 등의 행동을 촉구함

• 처음부터 세세한 기능 설명이 너무 많다
• 어떤 서비스인지 알기도 전에 요금이 나온다
• CTA가 어디에 있는지 모르겠다
• 비슷한 정보가 몇 번이나 반복된다
• 사용자의 고민을 언급하지 않고, 제공 측이 하고 싶은 말만 나열하고 있다

정보 설계는 다음과 같은 흐름으로 해주세요.
1. 퍼스트 뷰에서 서비스의 가치를 한마디로 전달한다
2. 사용자가 겪고 있는 고민에 공감한다
...

웹 페이지를 어떤 섹션으로 구성할 것인가 하는 점입니다. 정보 설계가 "정보의 흐름"이라면, 페이지 구성은 "그 흐름을 실제 화면 블록으로 나누는 것"입니다.

섹션명	역할
Header	로고나 메뉴를 표시한다
...

웹사이트를 열었을 때 가장 먼저 눈에 들어오는 큰 영역입니다. 여기서 "어떤 사이트인지", "무엇을 할 수 있는지"가 전달되지 않으면 사용자는 이탈하기 쉽습니다.

자주 포함되는 요소: 캐치카피 (Catchphrase) / 서브카피 (Sub-copy) / 메인 비주얼 (Main Visual) / CTA 버튼 / 보충 텍스트 / 실적 및 신뢰 정보

캐치카피: 매일에 조금 즐거운 취미를 찾아보세요.
서브카피: 기분이나 성격, 현재 있는 장소에 맞춰 당신에게 딱 맞는 취미나 나들이를 제안합니다.
CTA: 무료로 시작하기

CTA는 Call To Action의 약자입니다. 사용자에게 취해 주길 바라는 행동을 촉구하는 버튼이나 링크를 말합니다.

예: 무료로 시작하기 / 자료 요청하기 / 문의하기 / 앱 다운로드 / 상담 예약하기 / 자세히 보기

페이지 구성은 다음과 같이 해주세요.
- Header / Hero / Problem / Solution / Feature / Step / Testimonial / FAQ / CTA / Footer
Hero Section에서는 캐치카피, 서브카피, CTA 버튼,
...

화면 내의 요소를 어떻게 배치할 것인가를 의미합니다. 같은 정보라도 레이아웃에 따라 가독성과 인상이 크게 달라집니다.

용어	의미
컬럼 (Column)	세로 방향의 열
...

1컬럼… 정보를 세로로 나열하는 심플한 형식. 스마트폰과 궁합이 좋으며, LP(Landing Page)·블로그·서비스 소개·채용 페이지에 적합합니다. -
2컬럼… 요소를 좌우로 나누는 형식 (왼쪽 텍스트 + 오른쪽 이미지 등). 정보와 비주얼을 세트로 보여주기 쉬워 비교나 설명에 적합합니다. -
카드 레이아웃 (Card Layout)… 정보를 상자(Card)에 담아 나열하는 형식. 기능 소개·요금·후기·목록 표시 등에 적합합니다. -
Bento UI… 크고 작은 다양한 카드를 그리드(Grid) 형태로 나열하는 레이아웃. 도시락(Bento)처럼 여러 정보를 정리합니다. 모던하며 SaaS·AI 서비스에서 자주 사용되고, 정보에 강약을 조절하기 쉽습니다. -

스마트폰에서 읽기 편하도록 기본은 1컬럼 구성으로 해주세요.
PC에서는 일부 섹션만 2컬럼으로 구성하여 완급 조절을 해주세요.
특징 소개는 카드 레이아웃(아이콘·타이틀·설명문 / PC 3컬럼·스마트폰 1컬럼)으로 하고,
...

UI의 외관적인 유파나 표현 방법을 말합니다. 톤앤매너 (Tone & Manner)가 '어떤 인상을 주고 싶은가'를 나타낸다면, 비주얼 스타일 (Visual Style)은 '어떠한 모습으로 만들 것인가'를 나타냅니다.

같은 '친근한 사이트'라도 플랫 (Flat, 평면적) / 머티리얼 (Material, 그림자나 계층) / 글래스모피즘 (Glassmorphism, 반투명) / Bento UI (크고 작은 카드) / 에디토리얼 (Editorial, 잡지 스타일)에 따라 방향성이 달라집니다.

스타일명	개요	주요 특징	적합한 용도	주의점
플랫 디자인 (Flat Design)	그림자나 입체감을 억제한 평면적이고 심플한 디자인	장식이 적음, 단색 채우기, 정보가 정리되어 보임	LP, SaaS, 앱 소개, 관리 화면	너무 심플하면 인상에 남기 어려움. CTA는 색상이나 여백으로 명확히 구분
...

비주얼 스타일은 하나만 선택할 필요는 없습니다. 실제로는 여러 가지를 조합하여 지정하는 경우가 많습니다.

조합	인상	적합한 용도
미니멀 (Minimal) × Bento UI	세련되고 정리된 인상	AI 서비스, SaaS, 앱 LP
...

비주얼 스타일은 미니멀 × Bento UI × 카드형 UI를 베이스로 해주세요.
여백을 넉넉히 두고, 정보를 크고 작은 카드로 정리해주세요.
장식은 절제하고, 색상·타이포그래피(Typography)·여백을 통해 고급스럽게 보여주세요.
...

사이트 전체의 분위기나 인상의 규칙입니다 (줄여서 '톤앤매너'). 같은 핑크 계열의 사이트라도 '귀여운 / 고급스러운 / 팝(Pop)한 / 어른스러운 / 다정한 / 고급감 있는' 등에 따라 인상이 완전히 달라집니다.

톤 (Tone)	인상
모던 (Modern)	요즘 스타일의 세련된 인상
...

톤은 여러 개를 조합하면 구체적이 됩니다 (예: 내추럴 × 고급스러움 × 친근함, 모던 × 클린 × 신뢰감).

원하는 인상뿐만 아니라, 피하고 싶은 인상도 전달하면 차이를 줄일 수 있습니다.

톤앤매너는 내추럴하고 고급스러우면서도 친근한 인상으로 해주세요.
여성 타겟이지만, 너무 달콤하거나 아이 같은 디자인은 피해주세요.
여백을 넉넉히 사용하고, 차분한 배색으로 안심할 수 있는 사이트로 만들어주세요.

사이트 내에서 사용할 색상의 역할을 결정하는 것입니다. 색상은 '그냥 좋아하는 색'이 아니라, 역할별로 정하면 디자인이 안정됩니다.

색상의 종류	역할
Primary Color	사이트 전체의 메인 컬러
...	...

Primary Color: #E8856A 살몬 핑크. 따뜻함과 친근함.
Secondary Color: #FAF5EE 아이보리. 부드럽고 차분한 배경색.
Accent Color: #A8C5A0 뮤트 그린. 자연스러움과 안심감을 주는 액센트.
...

컬러 팔레트는 따뜻한 느낌의 살몬 핑크, 아이보리, 뮤트 그린을 중심으로 구성해 주세요.
검은색이나 순백색의 대비가 너무 강한 배색은 피하고, 본문은 진한 브라운 계열로 해주세요.
CTA 버튼은 Primary Color를 사용하고, 배경은 아이보리 계열로 하여 부드러운 인상을 주세요.

글자의 외형이나 가독성을 설계하는 것입니다. 아무리 아름다운 디자인이라도 글자가 읽기 어려우면 사용하기 불편한 사이트가 됩니다.

고려 항목: Font Family (폰트) / Font Size (글자 크기) / Font Weight (굵기) / Line Height (행간) / Letter Spacing (자간) / Heading (제목) / Body (본문) / Caption (캡션) / Display (대형 제목)

일본어는 영어보다 글자량이 많아 빽빽해 보이기 쉬우므로,

• 본문 크기는 너무 작지 않게 한다
• 행간을 넓게 설정한다 / 글자 굵기를 구분하여 사용한다
• 긴 문장은 가로 폭을 너무 넓게 잡지 않는다 / 제목과 본문의 차이를 명확히 한다

H1: 40px / Bold / line-height 1.3
H2: 28px / Bold / line-height 1.4
H3: 22px / Bold / line-height 1.5
...

일본어에서 자주 사용하는 폰트: Noto Sans JP / Hiragino Sans / Yu Gothic / Zen Kaku Gothic New / M PLUS Rounded 1c / Noto Serif JP

폰트 계열	인상
고딕체 (Gothic)	읽기 쉽다, 현대적이다, 범용적이다
...	...

타이포그래피(Typography)는 일본어의 가독성을 중시해 주세요.
제목은 약간 굵게 하여 인상적으로 만들고, 본문은 16px 이상, 행간은 1.7~1.8 정도로 설정해 주세요.
폰트는 Noto Sans JP 또는 Hiragino Sans를 전제로 하여, 부드럽고 친근한 인상을 주세요.

웹사이트를 구성하는 부품을 말합니다 (버튼, 카드, 입력 폼, 헤더, 푸터, 탭, 아코디언 등). 웹사이트는 이러한 부품들의 조합으로 만들어집니다.

미리 정의해 두면 사이트 전체에 통일감이 생깁니다. 버튼 디자인이 페이지마다 제각각이면 사용자는 어떤 것이 중요한 버튼인지 혼란을 느끼게 됩니다.

컴포넌트 (Component)	역할
Button	사용자의 행동을 유도함
...	...

Primary Button: 가장 중요한 행동 (무료로 시작하기, 구매하기, 문의하기)
Secondary Button: 보조적인 행동 (자세히 보기, 자료 보기)
Text Button: 가벼운 유도 (더 보기, 건너뛰기)
...

다음 컴포넌트들을 설계해 주세요.
- Primary Button / Secondary Button / Feature Card / Testimonial Card
- FAQ Accordion / Header Navigation / Footer / Form Input / Badge
...

버튼이나 입력창 등이 사용자의 조작이나 상황에 따라 변화하는 모습입니다. UI 상태(State)가 정의되어 있지 않으면 사용자는 조작에 어려움을 겪습니다.

상태 (State)	의미
Default	일반 상태
...	...

[Button]
Default: 일반 표시 / Hover: 색상을 진하게 / 그림자를 강하게 / Active: 눌린 듯한 느낌
Disabled: 색상을 흐리게 하여 클릭 불가임을 표시 / Loading: 스피너(Spinner)를 표시하여 중복 전송 방지
...

버튼, 폼, 카드에는 Default, Hover, Active, Focus, Disabled, Loading, Error 상태를 정의하세요.
사용자가 조작할 수 있는 요소는 조작 가능하다는 점이 명확하게 드러나도록 해야 합니다.

요소 간의 간격을 의미합니다. 적절하면 정보를 보기 편하고, 너무 적으면 어지러워 보입니다.

용어	의미
Padding	요소의 내부 여백
...
角丸 (Corner Radius)	인상
---	---
0px	딱딱함, 샤프함, 투박함
...
그림자 강도	인상
---	---
그림자 없음	플랫함, 심플함
...

전체적으로 여백을 넉넉하게 가져가서 압박감이 없는 레이아웃으로 만드세요.
카드에는 24px의 padding, 16px의 角丸 (Corner Radius), 옅은 그림자를 설정하세요.
섹션 간의 여백은 PC에서 80px, 스마트폰에서 48px, 카드 간의 gap은 24px로 설정하세요.
...

PC, 태블릿, 스마트폰 등 화면 크기에 따라 보이는 모습을 바꾸는 설계입니다. 스마트폰으로 보는 경우가 매우 많기 때문에 반응형 (Responsive) 대응은 필수입니다.

고려할 점: PC에서는 가로 배열 · 스마트폰에서는 세로 쌓기 / 스마트폰에서는 글자 크기를 조금 작게 / 버튼을 손가락으로 누르기 쉬운 크기로 / 메뉴를 햄버거 메뉴로 / 이미지가 넘치지 않게 / 가로 스크롤이 생기지 않게

Mobile: 〜767px
Tablet: 768px〜1023px
Desktop: 1024px 이상
...

반응형 (Responsive) 대응을 전제로 하세요.
PC에서는 최대 폭 1200px의 중앙 정렬 레이아웃으로 하고, 2컬럼 또는 3컬럼으로 정보를 정리하세요.
스마트폰에서는 1컬럼으로 구성하고, 버튼은 손가락으로 누르기 쉬운 높이로 만드세요.
...

누구에게나 사용하기 쉬운 웹사이트를 만드는 사고방식입니다 (특히 BtoC 사이트는 중요). 시력이 약한 사람, 색상 차이를 구분하기 어려운 사람, 키보드만으로 조작하는 사람, 고령자, 읽어주기 기능을 사용하는 사람 등도 대상에 포함됩니다.

고려할 점: 글자와 배경의 대비 (Contrast)를 충분히 할 것 / 글자 크기를 너무 작게 하지 말 것 / 버튼을 누르기 쉬운 크기로 할 것 / 색상만으로 정보를 전달하지 말 것 / 폼 에러를 알기 쉽게 할 것 / 키보드 조작으로도 사용할 수 있게 할 것 / 이미지에 대체 텍스트 (Alt text) 제공

[나쁜 예] 에러를 빨간색 테두리로만 표현함
→ 색상 차이를 구분하기 어려운 사람에게 전달되지 않음 / 무엇이 에러인지 알 수 없음
[개선 예] 빨간색 테두리에 더해, 구체적인 에러 메시지를 표시함
...

접근성 (Accessibility)을 고려하세요.
글자와 배경의 대비 (Contrast)를 충분히 확보하고, 본문은 16px 이상으로 하세요.
에러 표시는 색상에만 의존하지 말고, 구체적인 메시지도 표시하세요.
...

웹사이트나 앱 전체에서 사용하는 디자인 규칙을 정리한 것입니다 (색상, 폰트, 여백, 角丸 (Corner Radius), 그림자, 버튼, 카드, 폼, 상태, 레이아웃 규칙 등).

장점:

• 디자인이 흔들리지 않음
• 구현하기 쉬움 / 수정하기 쉬움
• 팀 내에서 공유하기 쉬움
  AI에게 추가 화면을 만들게 할 때도 재현성이 높음

색상, 여백, 폰트 크기 등의 디자인 값을 변수 (Variable)로 정의한 것입니다.

--color-primary: #E8856A;
--color-background: #FAF5EE;
--color-text: #2E2420;
...

색상, 여백, 角丸 (Corner Radius), 그림자, 폰트 크기는 디자인 토큰 (Design Token)으로 정의하세요.
버튼, 카드, 폼 등의 주요 컴포넌트 (Component)는 재사용 가능한 디자인 규칙으로 정리하세요.

웹사이트 디자인을 제안해 주세요.
## 대상 서비스
서비스명:
...

SaaS · 업무 시스템 계열

BtoB SaaS용 웹사이트로서 신뢰감, 효율성, 이해하기 쉬움을 중시해 주세요.
비주얼 스타일은 Corporate × 플랫 디자인 (Flat Design) × Bento UI를 베이스로.
흰색 배경, 네이비, 블루 계열의 액센트로 정보가 정리된 인상을 주도록.
...

미용 · 고급 서비스 계열

미용 계열 서비스를 위해 품격 있고 고급스러운 웹사이트로 만들어 주세요.
비주얼 스타일은 Minimal × Luxury × 사진 중시로 구성.
여백을 넓게 잡고, 색상 수는 억제하며, 가는 선과 품격 있는 타이포그래피 (Typography)로 고급스러움을 표현.
...

채용 사이트 계열

채용 사이트 계열

채용 사이트로서 회사의 분위기, 일하는 사람의 매력, 안심감이 전달되는 디자인으로.
비주얼 스타일은 기업 (Corporate) × 에디토리얼 (Editorial) × 사진 중시를 베이스로.
직원 사진이나 인터뷰를 크게 보여주고, 업무 내용·컬처·복리후생·모집 직종으로의 동선을 정리.

이벤트·캠페인 계열

이벤트 랜딩 페이지 (LP)로서 밝고 즐거운 인상을 중시해 주세요.
비주얼 스타일은 팝 (Pop) × 카드형 UI × 일러스트 중시로.
개최 일시·장소·참가 혜택·신청 CTA (Call to Action)를 즉시 알 수 있는 구성으로.
...

❌ 모호한 의뢰

느낌 있게 해주세요. / 멋지게 해주세요. / 요즘 스타일로 해주세요.
여성스러운 느낌으로 해주세요. / 보기 편하게 해주세요.

✅ 개선된 의뢰

20대 후반 여성을 대상으로, 내추럴하고 품격 있으며 친근한 인상으로 해주세요.
너무 귀엽거나 아이 같은 표현은 피하고, 여백을 넓게 잡고,
살몬 핑크 (Salmon Pink)와 아이보리 (Ivory)를 중심으로 한 부드러운 배색으로 해주세요.
...```

웹사이트 디자인을 의뢰할 때는 단순히 "멋지게 해줘"라고 말하는 것이 아니라, 다음과 같은 분류로 정리하면 정밀도가 높아집니다. AI에게 의뢰할 때도 마찬가지로, **"무엇을 정의해야 하는가"를 알고 있는 것 자체가 디자인 시스템 (Design System)**입니다.

-
**목적·타겟 (Target)**… 누구에게, 무엇을 전달하고, 무엇을 하길 원하는가 -
**정보 설계 (Information Architecture)**… 무엇을, 어떤 순서로 보여줄 것인가 -
**페이지 구성**… 어떤 섹션으로 페이지를 만들 것인가 -
**레이아웃 (Layout)**… 요소를 어떻게 배치할 것인가 -
**비주얼 스타일 (Visual Style)**… 플랫 (Flat), 머티리얼 (Material), 미니멀 (Minimal), 벤토 UI (Bento UI) 등 외형의 유파 -
**톤 앤 매너 (Tone & Manner)**… 내추럴, 품격 있음, 친근함 등 전체적인 인상 -
**컬러 설계 (Color Design)**… 메인·배경·텍스트·액센트 색상 -
**타이포그래피 (Typography)**… 폰트, 글자 크기, 굵기, 행간 -
**컴포넌트 설계 (Component Design)**… 버튼, 카드, 폼 (Form), FAQ 등의 UI 부품 -
**UI 상태 (UI State)**… Hover, Disabled, Loading, Error 등의 상태 -
**여백·곡률(Corner Radius)·그림자**… 여유로움, 부드러움, 입체감의 조정 -
**반응형 설계 (Responsive Design)**… PC·스마트폰에서의 모습 -
**접근성 (Accessibility)**… 누구에게나 사용하기 쉬운 설계 -
**디자인 시스템 (Design System)**… 색상이나 부품을 규칙화하여 재사용하기 쉽게 만드는 것

이것들을 템플릿으로서 전달하면, AI라도 "멋진 화면"을 높은 재현성으로 만들 수 있게 됩니다.