AI 디자인 용어 사전 — 24개 항목으로 배우기

읽은 개념을 직접 써봐요

브리프 판단하기 · 무드보드 구분하기 · 시각적 위계 조작하기 · 디자인 토큰 바꿔보기

선택의 이유를 확인하고 내 업무 예시를 적을 수 있어요. 경험을 공유하려면 마지막에 직접 제출해 주세요.

AI에게 “예쁘게 만들어줘”라고 하기 전에, 결과물이 무엇을 전달하고 어디에서 쓰일지 정해야 한다. 아래 용어는 무드보드 이후의 대화를 위한 공통 언어다. 웹 UI에만 해당하지 않으며 문서, 발표자료, 포스터, 소셜 이미지에도 적용할 수 있다.

각 항목의 ‘프롬프트 문구’는 그대로 복사하기보다 프로젝트의 내용과 매체에 맞게 바꿔 쓰는 시작점이다.

1. 방향과 참고 자료

근거 읽기: Style Tiles는 무드보드와 완성 목업 사이에서 글꼴·색·인터페이스 요소로 시각 언어를 논의하는 방식을 설명하고, Adobe의 디자인 원리 자료는 강조·초점·위계를 구분한다. 아래 설명은 이를 여러 매체와 AI 요청에 맞게 각색했다.

디자인 브리프 (design brief)

• 뜻: 목적, 대상, 핵심 메시지, 매체·크기, 마감, 제약, 성공 기준을 한 장으로 합의한 작업 지시서.
• 언제 유용한가: 생성 전에 범위를 고정하거나, 여러 시안을 같은 기준으로 비교할 때.
• 프롬프트 문구: “대상은 바쁜 시민이고, A4 세로 안내문으로 5초 안에 신청 방법을 이해하게 하는 브리프를 먼저 요약해줘.”
• 흔한 실수: 색·폰트 취향만 적고 독자가 무엇을 이해하거나 하길 바라는지는 비워 둔다.

무드보드 (moodboard)

• 뜻: 사진, 색, 질감, 장면을 모아 원하는 정서와 분위기를 보여 주는 시각 자료.
• 언제 유용한가: 말로 설명하기 어려운 감정·세계관의 방향을 빠르게 맞출 때.
• 프롬프트 문구: “차분하고 신뢰감 있는 분위기의 참고 이미지 8개를 색·빛·질감별로 묶고, 각 묶음의 공통점을 설명해줘.”
• 흔한 실수: 좋아 보이는 이미지를 모으기만 하고 실제 레이아웃, 정보 우선순위, 사용 조건을 결정했다고 생각한다.

스타일 타일 (style tile)

• 뜻: 실제 적용을 가늠하도록 색상, 글꼴, 버튼·선·사진 처리, 질감 같은 시각 규칙을 작은 샘플로 묶은 판.
• 언제 유용한가: 무드보드의 분위기를 재현 가능한 스타일 선택으로 좁힐 때.
• 프롬프트 문구: “이 무드보드를 바탕으로 제목·본문 글꼴, 5색 팔레트, 테두리, 사진 보정, 버튼 샘플이 있는 스타일 타일을 만들어줘.”
• 흔한 실수: 완성 화면을 여러 장 만드는 데 치우쳐 규칙과 사용 범위를 남기지 않는다.

아트 디렉션 (art direction)

• 뜻: 여러 결과물에서 사진의 피사체·구도·빛, 일러스트의 선과 표정, 그래픽의 태도처럼 시각적 선택을 일관되게 이끄는 판단.
• 언제 유용한가: 서로 다른 이미지와 페이지가 한 캠페인처럼 느껴져야 할 때.
• 프롬프트 문구: “청년 활동가 캠페인의 아트 디렉션을 정해줘: 인물 시선, 카메라 거리, 자연광, 배경의 여백, 피해야 할 연출까지.”
• 흔한 실수: ‘세련되게’처럼 추상적인 형용사만 반복하고 촬영·편집·배치에서 관찰할 기준을 쓰지 않는다.

2. 정체성과 재사용 규칙

근거 읽기: Figma의 디자인 시스템 수업과 Microsoft Fluent의 토큰 안내는 재사용 컴포넌트·값·의미를 연결해 설명한다.

레퍼런스 (reference)

• 뜻: 특정 결과의 구조·기능·분위기를 이해하기 위해 제시하는 참고물. 복제 대상이나 소유권 이전을 뜻하지 않는다.
• 언제 유용한가: AI에게 원하는 수준과 맥락을 보여 주되, 새 콘텐츠와 구별해야 할 때.
• 프롬프트 문구: “첨부 레퍼런스의 여백과 정보 흐름만 참고하고, 색·문구·사진은 새로 만들어 저작물을 복제하지 않게 해줘.”
• 흔한 실수: 레퍼런스의 로고, 문구, 인물, 독특한 조합까지 그대로 따라 하게 지시한다.

브랜드 키트 (brand kit)

• 뜻: 로고 파일과 기본 색·글꼴·이미지 톤·아이콘·말투처럼 한 브랜드를 식별하게 하는 핵심 자산과 기본 설정 묶음. 상세 적용 규칙과 금지 사례는 별도의 브랜드 가이드라인에 둔다.
• 언제 유용한가: 포스터·슬라이드·문서·게시물을 빠르게 만들면서 인지 일관성을 유지할 때.
• 프롬프트 문구: “제공한 브랜드 키트의 로고, 주색·보조색, 제목·본문 글꼴과 사진 톤을 우선 적용해줘. 상세 사용 규칙이 없으면 추측하지 말고 표시해줘.”
• 흔한 실수: 키트에 없는 안전 여백·금지 규칙까지 이미 합의된 규칙처럼 단정한다.

디자인 시스템 (design system)

• 뜻: 시각 원칙, 토큰, 재사용 컴포넌트, 패턴, 문서와 운영 규칙을 함께 갖춘 지속 가능한 설계 체계.
• 언제 유용한가: 한 번의 이미지보다 여러 화면·페이지·팀이 같은 품질로 확장되어야 할 때.
• 프롬프트 문구: “행사 안내물과 웹 페이지에 함께 쓸 디자인 시스템의 원칙, 컴포넌트, 예외 처리, 점검 절차를 제안해줘.”
• 흔한 실수: 색·버튼 몇 개를 모아 놓고 언제, 왜, 누가 바꿀지에 대한 규칙과 문서화를 생략한다.

디자인 토큰 (design token)

• 뜻: 색·간격·글꼴·모서리·그림자 같은 값을 이름 붙여 저장한 재사용 가능한 최소 단위. 원시 값과 의미(예: surface-warning)를 분리할 수 있다.
• 언제 유용한가: 여러 산출물의 값을 한 번에 바꾸거나 라이트·다크, 인쇄·화면 변형을 관리할 때.
• 프롬프트 문구: “8px 간격 단위와 의미 있는 색 이름을 토큰으로 정의하고, 각 토큰의 적용 위치와 예외를 표로 만들어줘.”
• 흔한 실수: blue-500 같은 원시 값만 직접 곳곳에 쓰고 의미와 사용 맥락을 이름에 담지 않는다.

3. 내용을 구조로 바꾸기

근거 읽기: Carbon 2x Grid는 기준선·열·반복 단위를, Canva의 디자인 원리 안내는 위계·구성·여백을 설명한다.

와이어프레임 (wireframe)

• 뜻: 색과 장식보다 정보 영역, 순서, 크기, 탐색·읽기 흐름을 선과 상자로 표현한 구조 초안.
• 언제 유용한가: 문서·슬라이드·페이지에서 무엇을 어디에 둘지 스타일 선택 전에 검증할 때.
• 프롬프트 문구: “16:9 발표 슬라이드 6장의 와이어프레임을 만들어 제목·근거·도표·출처·다음 행동의 위치만 표시해줘.”
• 흔한 실수: 회색 상자에 실제 글의 길이와 이미지 비율을 반영하지 않아 나중에 구조가 무너진다.

레이아웃·컴포지션 (layout / composition)

• 뜻: 페이지나 캔버스 안에서 텍스트, 이미지, 도형, 빈 공간의 위치·크기·관계를 조직하는 방식.
• 언제 유용한가: 같은 재료도 읽히는 순서와 인상이 달라지는 이유를 설명하고 시안을 조정할 때.
• 프롬프트 문구: “포스터의 제목·주제 이미지·일시·장소·QR을 한 시선 흐름으로 배치하고, 각 요소의 역할과 상대 크기를 설명해줘.”
• 흔한 실수: 요소를 각각 예쁘게 만든 뒤 전체 캔버스의 흐름과 가장자리 여백을 나중에 맞추려 한다.

시각적 위계 (visual hierarchy)

• 뜻: 무엇을 먼저, 다음에, 마지막에 보게 할지 크기·무게·색·위치·공간으로 정한 우선순위.
• 언제 유용한가: 정보가 많은 안내물이나 슬라이드에서 핵심 메시지를 빠르게 전달할 때.
• 프롬프트 문구: “독자가 1초에 제목, 3초에 핵심 수치, 그다음 세부 설명을 보도록 세 단계 위계를 설계해줘.”
• 흔한 실수: 모든 문구를 굵고 큰 색으로 강조해 결과적으로 첫 번째 정보가 사라진다.

그리드 (grid)

• 뜻: 열·행·여백·기준선으로 캔버스를 나누어 요소를 정렬하고 반복 가능한 구조를 만드는 보이지 않는 골격.
• 언제 유용한가: 여러 페이지의 정렬을 맞추거나, 인쇄·화면 크기가 달라도 질서를 유지할 때.
• 프롬프트 문구: “A4 세로 인쇄물의 시작안으로 12열 그리드와 바깥 여백 20mm를 제안하고, 본문은 6열을 넘지 않게 해줘. 실제 글자 크기·출력 환경에 따라 조정할 지점도 표시해줘.”
• 흔한 실수: 그리드를 장식적 규칙으로 고정해 내용의 길이와 매체 특성에 맞는 변형을 허용하지 않는다.

4. 글자와 읽기

근거 읽기: Carbon의 최신 타이포그래피 개요는 타입 토큰·스케일·위계를, Adobe의 타이포그래피 팁은 판독성과 줄 간격을 실무 관점에서 다룬다.

타이포그래피 (typography)

• 뜻: 글꼴 선택뿐 아니라 크기, 굵기, 행간, 자간, 정렬, 줄 길이와 글의 배치를 설계하는 일.
• 언제 유용한가: 글이 핵심인 문서·슬라이드·포스터에서 의미와 분위기를 동시에 전달할 때.
• 프롬프트 문구: “한글 본문이 편하게 읽히는 산세리프를 고르고, 제목·소제목·본문·캡션의 크기·굵기·행간 규칙을 제시해줘.”
• 흔한 실수: 글꼴 이름만 지정하고 실제 문장 길이, 한글 지원, 화면·인쇄의 읽기 조건을 시험하지 않는다.

타입 스케일 (type scale)

• 뜻: 제목·소제목·본문·캡션의 크기와 굵기를 단계적으로 묶은 체계.
• 언제 유용한가: 페이지가 늘어나도 위계와 일관성을 유지하고 AI의 임의 크기 선택을 막을 때.
• 프롬프트 문구: “화면용 본문 16px을 하나의 시작점으로 삼아 제목 40, 소제목 24, 본문 16, 캡션 13px의 스케일을 제안하고, 매체·한글 글꼴에 맞춰 조정할 지점을 표시해줘. 이 수치는 보편 기본값이 아니야.”
• 흔한 실수: 단계마다 크기만 바꾸고 행간·굵기·언어별 글자 폭을 함께 조정하지 않는다.

행간·줄 길이 (leading / measure)

• 뜻: 줄과 줄 사이의 세로 간격, 한 줄에 들어가는 글자 수를 조절해 읽는 리듬을 만드는 것.
• 언제 유용한가: 긴 문서, 발표자 노트, 안내문처럼 독자가 연속해서 읽는 결과물.
• 프롬프트 문구: “본문은 한 줄이 너무 길지 않게 폭을 제한하고, 한글 본문 행간은 글자 크기의 약 1.5배에서 읽기 좋은 값으로 조정해줘.”
• 흔한 실수: 빈 공간을 줄이려고 문단 폭을 화면 끝까지 늘리거나 행간을 지나치게 좁힌다.

가독성·판독성 (readability / legibility)

• 뜻: 가독성은 문장·문단을 편하게 읽는 정도, 판독성은 개별 글자와 숫자를 구별하는 정도.
• 언제 유용한가: 작은 캡션, 숫자, 명찰, 표지판처럼 오독 비용이 큰 정보.
• 프롬프트 문구: “멀리서 보는 포스터라는 조건으로 숫자 0/O와 한글 획이 잘 구별되는 글꼴·크기·대비를 점검해줘.”
• 흔한 실수: 멋진 글꼴을 우선하고 축소 화면, 저조도, 인쇄 번짐에서 읽히는지는 확인하지 않는다.

5. 눈을 이끄는 시각 원리

근거 읽기: Canva의 여백 안내는 빈 공간의 그룹화·강조 역할을, Carbon의 색상 접근성 안내는 대비와 색에만 의존하지 않는 전달을 다룬다.

여백·네거티브 스페이스 (white / negative space)

• 뜻: 텍스트나 이미지가 차지하지 않은 공간. 흰색일 필요가 없으며 그룹을 나누고 핵심을 돋보이게 한다.
• 언제 유용한가: 복잡한 내용을 숨 쉴 틈 있게 만들거나, 한 요소에 집중시키고 싶을 때.
• 프롬프트 문구: “제목 주변과 섹션 사이의 여백을 늘려 그룹을 분리하고, 장식 요소를 20% 덜어 핵심 이미지가 돋보이게 해줘.”
• 흔한 실수: 빈 공간을 낭비로 보고 내용을 가장자리까지 채운다.

대비 (contrast)

• 뜻: 밝기·색·크기·굵기·모양·질감 등의 차이로 구분과 주목도를 만드는 것.
• 언제 유용한가: 위계를 선명하게 하거나 텍스트와 배경을 읽기 쉽게 할 때.
• 프롬프트 문구: “본문과 배경의 명도 대비를 높이고, CTA만 색·크기 대비를 사용해 제목과 경쟁하지 않게 해줘.”
• 흔한 실수: 모든 요소에 강한 대비를 주거나, 사진 위에 낮은 대비의 글자를 얹는다.

정렬·근접성 (alignment / proximity)

• 뜻: 정렬은 공통 기준선에 요소를 맞추는 것, 근접성은 관련 있는 요소를 가깝게 두고 무관한 요소를 띄우는 것.
• 언제 유용한가: 표, 슬라이드, 카드, 편집물의 그룹과 읽는 순서를 빠르게 이해시키고 싶을 때.
• 프롬프트 문구: “제목·설명·출처를 같은 왼쪽 기준선에 정렬하고, 설명과 출처 사이는 가깝게, 다음 섹션과는 넉넉히 띄워줘.”
• 흔한 실수: 가운데 정렬을 모든 텍스트에 적용하거나, 간격을 균등하게만 두어 관련성의 차이를 없앤다.

초점 (focal point)

• 뜻: 시선이 처음 머물도록 의도적으로 만든 한 곳 또는 한 메시지.
• 언제 유용한가: 포스터나 소셜 이미지처럼 짧은 노출 시간에 한 가지를 기억시켜야 할 때.
• 프롬프트 문구: “이 포스터의 초점을 ‘무료 강연’ 제목 하나로 정하고, 사진·날짜·QR은 초점을 지원하는 크기와 위치로 배치해줘.”
• 흔한 실수: 로고, 제목, 사진, 버튼을 모두 초점으로 키운다.

6. 작동·변형·검증

근거 읽기: W3C WCAG 2.2 Reflow는 확대 시 비예외 콘텐츠가 한 방향으로 읽히도록 재배치하는 원칙을, W3C Contrast (Minimum)는 텍스트 대비의 의미와 예외를 설명한다. 이는 웹 표준 설명 자료이며 모든 인쇄물의 인증 판정은 아니다.

브랜드 가이드라인 (brand guideline)

• 뜻: 브랜드 키트를 실제 상황에 적용하는 상세 규칙과 금지 사례. 키트가 ‘무엇을 갖고 있는가’라면 가이드라인은 ‘어떻게 쓰는가’다.
• 언제 유용한가: 다른 사람이 제작하거나 AI로 대량 변형할 때 품질의 기준을 공유하려면.
• 프롬프트 문구: “브랜드 키트를 바탕으로 로고 최소 크기, 배경별 색, 글꼴 대체, 사진 크롭, 금지 예시를 가이드라인으로 써줘.”
• 흔한 실수: 파일 목록만 제공하고 매체별 예시와 실패 사례를 남기지 않는다.

프로토타입 (prototype)

• 뜻: 최종 산출물 전에 구조·상태·전환·사용 흐름을 시험하는 작동 모형. 화면뿐 아니라 슬라이드 순서나 문서 탐색도 시험할 수 있다.
• 언제 유용한가: 제작 비용이 커지기 전에 메시지 흐름과 상호작용을 실제 사용 조건에서 확인할 때.
• 프롬프트 문구: “신청 버튼을 누른 뒤 확인·오류 상태까지 포함한 저해상도 프로토타입의 사용자 흐름과 점검 질문을 만들어줘.”
• 흔한 실수: 색과 장식을 완성하는 데 시간을 쓰고, 사용자가 다음에 무엇을 해야 하는지는 검증하지 않는다.

반응형·매체 적응 (responsive adaptation)

• 뜻: 같은 내용과 정체성을 화면 크기, 종이 크기, 거리, 가로·세로 비율, 출력 환경에 맞게 재배치하는 것.
• 언제 유용한가: 모바일·데스크톱·인쇄물·슬라이드처럼 한 원본이 여러 조건으로 나갈 때.
• 프롬프트 문구: “같은 핵심 메시지를 모바일 세로, 16:9 슬라이드, A3 포스터로 재구성하고 각 매체에서 숨기거나 우선할 정보를 표시해줘.”
• 흔한 실수: 원본을 비율만 늘리거나 줄여 글자가 작아지고 여백·초점·줄바꿈이 망가진다.

접근성·품질 점검 (accessibility check)

• 뜻: 시각·청각·운동·인지 특성이 다른 사람도 정보를 인식하고 사용할 수 있는지 확인하는 절차.
• 언제 유용한가: 공개 문서·이미지·슬라이드·UI의 도달 범위를 넓히고 오독을 줄일 때.
• 프롬프트 문구: “색만으로 상태를 구분하지 말고, 텍스트 대비, 제목 구조, 대체 텍스트, 키보드 순서, 확대 시 리플로우를 점검하는 체크리스트를 만들어줘. 포스터·슬라이드는 실제 인쇄·발표 조건도 따로 확인해줘.”
• 흔한 실수: 마지막에 색 대비 숫자 하나만 확인하고, 이미지 설명·읽기 순서·확대 시 잘림은 확인하지 않는다.

참고 자료를 읽는 법

아래 공식 자료에서 원칙과 용어를 확인했지만, 이 글의 정의·프롬프트·실수 사례는 sociai의 일반 독자를 위해 새로 구성했다. 각 시스템의 수치와 규칙은 해당 제품이나 매체의 기본값이지 모든 디자인의 법칙은 아니다.

이 사전은 함께 쓰는 개념을 묶어 24개 항목으로 설명해요. 예를 들어 정렬과 근접성은 한 항목에서 차이를 비교해요.

30분 따라 하기 · 2·3시간 워크숍과 활동지 · 배경 기사