모든 요소를 강조하지 말고 제목·핵심 값·행동 버튼 중 하나만 가장 강하게 만드세요.
창작·생활
디자인 시작 가이드
목적과 독자를 먼저 정한 뒤 그리드·정렬·서체·색·여백으로 포스터와 화면의 정보 순서를 바로잡습니다.
실전 방법5가지 상황별 설명
바로 확인할 기준글꼴 두 개 이하와 색 세 개 이하로 한 장짜리 안내물 완성하기
우선 확인할 항목
예쁜 색 조합을 모으는 데서 끝나지 않고 목적·정보 우선순위·정렬·간격·대비를 실제 결과물에 적용하는 가이드입니다. 포스터, 카드뉴스, 웹 화면 모두 ‘누가 무엇을 가장 먼저 보고 어떤 행동을 해야 하는가’를 한 문장으로 정한 뒤 작업하세요. 장식은 그 문장을 돕는 경우에만 남깁니다.
간격을 눈대중으로 매번 바꾸지 말고 4 또는 8의 배수처럼 작은 간격 체계를 정해 반복하세요.
색을 뺀 흑백 화면에서도 정보 순서가 읽혀야 합니다. 색만으로 상태를 구분하지 말고 글자·아이콘·형태를 함께 사용하세요.
필요한 준비물 확인
- 1정렬과 여백을 조절할 수 있는 편집 도구
- 2전달할 핵심 문장과 행동 한 가지
- 3본문과 제목에 쓸 읽기 쉬운 글꼴
- 4실제 표시 크기를 확인할 휴대폰 또는 출력 환경
디자인 시작 가이드 용어 사전
기본 동작과 도구 이름부터 경험자가 자주 쓰는 전문 표현까지, 뜻과 실제 사용하는 상황을 함께 정리했습니다.
- 01시각적 위계
-
무엇을 먼저 보고 다음에 무엇을 읽게 할지 중요도를 눈에 보이게 나누는 구조입니다.
실제로는크기만 키우지 말고 위치·굵기·색·여백을 함께 사용합니다.
- 02정렬
-
요소들의 시작선·중심선·끝선을 같은 기준에 맞추는 원칙입니다.
실제로는의도 없는 몇 픽셀 차이를 줄이면 화면이 훨씬 안정적으로 보입니다.
- 03대비
-
크기·색·굵기·형태 차이로 요소를 구분하고 강조하는 방법입니다.
실제로는비슷해서 애매한 차이보다 역할이 분명할 만큼 충분한 차이를 줍니다.
- 04여백
-
내용이 없는 빈 곳도 요소를 묶고 호흡을 만드는 설계 공간입니다.
실제로는빈칸을 낭비로 보지 말고 관련 항목끼리는 가깝게, 다른 묶음은 멀게 둡니다.
- 05그리드
-
열과 간격을 정해 여러 요소의 위치와 폭을 일관되게 만드는 기준선 체계입니다.
실제로는모든 요소를 칸에 가두기보다 반복되는 정렬 기준으로 사용합니다.
- 06타이포그래피
-
글꼴, 크기, 행간, 자간과 문단 폭으로 글을 읽고 느끼게 만드는 설계입니다.
실제로는장식보다 본문 가독성을 먼저 보고 한 화면의 글꼴 수를 제한합니다.
- 07게슈탈트
-
사람이 요소를 개별 조각보다 관계와 전체 패턴으로 묶어 인식하는 원리들입니다.
실제로는근접·유사·연속·폐쇄 같은 원리를 정보 그룹과 탐색 흐름에 적용합니다.
- 08근접성
-
가까이 놓인 요소를 같은 그룹으로 인식하는 경향입니다.
실제로는관련 라벨과 입력은 붙이고 다른 섹션 사이 간격은 더 크게 두어 구조를 보입니다.
- 09반복
-
색·형태·간격·타입 스타일을 되풀이해 일관성과 패턴을 만드는 방법입니다.
실제로는같은 역할은 같은 표현을 쓰되 모든 요소를 똑같이 만들어 위계를 없애지 않습니다.
- 10균형
-
화면의 시각적 무게가 의도한 방식으로 안정되게 분포한 상태입니다.
실제로는대칭뿐 아니라 크기·색·여백을 조절한 비대칭 균형도 활용합니다.
- 11리듬
-
반복과 간격 변화가 사용자의 시선을 일정한 순서로 이동시키는 흐름입니다.
실제로는카드·제목·이미지의 간격 패턴을 만들어 긴 페이지의 읽는 속도를 조절합니다.
- 12스케일
-
요소가 주변이나 기준 크기에 비해 얼마나 크고 작은지 나타내는 관계입니다.
실제로는중요한 정보를 크게 만들되 작은 화면에서 내용과 조작 영역이 잘리지 않는지 확인합니다.
- 13베이스라인 그리드
-
여러 텍스트 줄의 기준선을 일정한 수직 리듬에 맞추는 격자입니다.
실제로는본문 행간을 기준 단위로 삼아 제목·문단·캡션 간격을 배수로 조정합니다.
- 14모듈러 그리드
-
열과 행을 함께 나눠 반복 가능한 직사각형 모듈을 만든 격자입니다.
실제로는대시보드나 편집 디자인에서 서로 다른 크기의 콘텐츠를 공통 구조에 맞춥니다.
- 15반응형 브레이크포인트
-
화면 너비나 기능 조건에 따라 레이아웃 규칙을 바꾸는 기준점입니다.
실제로는특정 기기 이름보다 콘텐츠가 실제로 답답해지거나 깨지는 지점에서 정합니다.
- 16디자인 토큰
-
색·간격·글자 크기 같은 디자인 결정을 이름 있는 값으로 저장한 단위입니다.
실제로는의미 기반 이름을 써 여러 화면과 코드에서 일관되게 변경할 수 있게 합니다.
- 17컴포넌트
-
버튼·카드·입력창처럼 반복 사용하도록 정의한 UI 구성 단위입니다.
실제로는겉모양만 복제하지 말고 상태·동작·접근성 규칙까지 함께 정의합니다.
- 18어포던스
-
대상과 사용자 사이에서 가능한 행동 자체 또는 그 가능성을 뜻하는 개념입니다.
실제로는버튼처럼 보여야 한다는 표현 단서인 시그니파이어와 구분해 설계합니다.
- 19시그니파이어
-
눌러짐·드래그·입력 가능 같은 행동 방법을 사용자에게 알려 주는 단서입니다.
실제로는색 하나만 의존하지 말고 모양·라벨·상태 변화로 조작 가능성을 드러냅니다.
- 20명도 대비비
-
앞경과 배경 색의 상대 밝기 차이를 수치로 나타낸 값입니다.
실제로는텍스트와 핵심 조작 요소가 접근성 기준을 충족하는지 도구로 측정합니다.
- 21커닝
-
특정 두 글자 조합 사이의 간격을 개별적으로 조정하는 작업입니다.
실제로는큰 제목과 로고에서 어색한 글자 쌍을 눈으로 확인해 미세 조정합니다.
- 22트래킹
-
선택한 단어나 문장 전체의 글자 사이 간격을 일괄 조정하는 값입니다.
실제로는작은 본문을 과도하게 좁히지 말고 대문자 라벨에는 약간 넓혀 가독성을 봅니다.
- 23행간·리딩
-
텍스트 한 줄의 기준선에서 다음 줄 기준선까지의 수직 간격입니다.
실제로는글자 크기·줄 길이·언어에 맞춰 문단이 붙거나 흩어져 보이지 않게 조절합니다.
- 24옵티컬 정렬
-
수학적 좌표보다 사람이 보기에 맞아 보이도록 모양의 경계를 미세 조정하는 정렬입니다.
실제로는둥근 아이콘·따옴표·삼각형처럼 실제 경계가 달라 보이는 요소에 작은 보정을 줍니다.
맞는 용어를 찾지 못했습니다
검색어를 짧게 줄이거나 도구·동작·상황 이름으로 다시 찾아보세요.
상황별 선택 기준
무조건 한 방법을 쓰지 말고 원하는 결과와 현재 조건에 맞춰 고르세요.
정보가 많은 화면 정리하기
- 이렇게 선택
- 관련 항목을 가까이 묶고 그룹 사이 간격을 그룹 내부 간격의 약 2배로 설정
- 선택 이유
- 테두리를 계속 추가하지 않아도 근접성과 여백만으로 정보 관계가 보입니다.
- 피하거나 바꿀 때
- 카드 안에 카드를 반복해서 넣기, 모든 줄에 구분선 사용하기
전문적으로 보이는 정렬 만들기
- 이렇게 선택
- 주요 왼쪽 기준선 1개와 보조 기준선 1개를 정하고 도구의 정렬·균등 분배 기능 사용
- 선택 이유
- 1~2px씩 다른 위치와 제각각인 간격을 눈대중보다 정확하게 제거합니다.
- 피하거나 바꿀 때
- 각 요소를 화면 중앙에 개별 정렬하기, 위치를 화살표 키로만 맞추기
색상을 세련되고 읽기 쉽게 사용하기
- 이렇게 선택
- 배경·본문 중립색, 브랜드색, 상태색을 분리하고 실제 대비 검사 도구로 확인
- 선택 이유
- 취향만으로 색을 고르는 실수를 줄이고 햇빛·저시력·색각 차이에서도 핵심 내용을 읽게 합니다.
- 피하거나 바꿀 때
- 연한 파스텔 위에 흰 글자 사용, 성공·오류를 초록·빨강만으로 표시하기
모바일과 큰 화면을 함께 설계하기
- 이렇게 선택
- 내용 우선순위를 유지한 채 좁은 화면에서 열 수와 내비게이션 표현만 바꾸는 반응형 구조
- 선택 이유
- 모바일을 축소판으로 만들지 않고 실제 읽기 순서와 터치 공간을 지킬 수 있습니다.
- 피하거나 바꿀 때
- 고정 폭 화면, 모바일에서 가로 스크롤로 전체 레이아웃 유지하기
상황별 실행 방법
각 항목에 필요한 설정, 실행 순서, 확인 기준과 문제 해결 방법을 정리했습니다.
01 한 화면 정보 위계 다시 잡기제목·설명·버튼이 모두 비슷하게 보여 어디부터 봐야 할지 모를 때
먼저 맞출 설정·조건
- 사용자가 3초 안에 알아야 할 것 하나와 다음 행동 하나를 문장으로 적습니다.
- 글자 크기는 본문 1배, 소제목 1.25~1.5배, 핵심 제목 1.8~2.5배 범위에서 시작합니다.
실행 순서
- 1화면의 모든 요소를 핵심·보조·참고 세 단계로 분류하고 참고 요소는 우선 숨깁니다.
- 2핵심 요소 하나만 크기·굵기·대비 중 두 가지를 높이고 나머지는 한 단계 낮춥니다.
- 3핵심에서 행동 버튼까지 눈이 이동하도록 왼쪽 기준선이나 명확한 세로 흐름으로 배치합니다.
- 4화면을 25% 크기로 줄여 가장 먼저 보이는 요소를 적고 의도와 다르면 크기보다 대비부터 조정합니다.
잘됐는지 확인
- 처음 보는 사람이 3초 안에 화면 목적과 다음 행동을 말할 수 있습니다.
- 흑백으로 보아도 핵심·보조·참고의 순서가 유지됩니다.
이럴 때는 이렇게
강조색을 한 요소에만 남기고 보조 설명의 굵기와 대비를 낮추며 참고 요소를 접습니다.
제목 크기를 한 단계 줄이고 제목 아래 여백을 늘려 본문 그룹과 관계를 명확히 합니다.
02 8단위 간격과 정렬 정리요소별 여백이 조금씩 달라 완성도가 낮아 보일 때
먼저 맞출 설정·조건
- 기본 간격을 8로 두고 작은 내부 간격은 4, 일반 간격은 8·16, 큰 구역 간격은 24·32를 사용합니다.
- 정렬 기준은 선택 영역, 핵심 객체, 전체 작업 영역 중 하나를 명시적으로 선택합니다.
실행 순서
- 1모든 요소의 현재 x·y 위치와 간격을 보조선으로 확인하고 주요 왼쪽 기준선을 하나 정합니다.
- 2같은 역할의 버튼·카드·입력 높이를 통일하고 텍스트 때문에 높이가 달라지면 내부 줄바꿈 규칙을 먼저 고칩니다.
- 3정렬 도구로 기준 객체에 맞춘 뒤 균등 분배 기능으로 반복 항목의 간격을 맞춥니다.
- 4그룹 내부 8, 그룹 사이 16처럼 관계가 멀수록 간격이 커지는지 확인하고 불필요한 테두리를 제거합니다.
잘됐는지 확인
- 반복 요소의 시작선·높이·간격이 확대하지 않아도 안정적으로 보입니다.
- 테두리를 가려도 어떤 요소끼리 같은 그룹인지 알 수 있습니다.
이럴 때는 이렇게
그림자의 투명 영역이나 비대칭 아이콘 외곽을 제외한 실제 시각 중심을 기준으로 1~2단위 보정합니다.
모든 간격을 늘리지 말고 큰 구역 사이만 24에서 32로 올려 관계 차이를 강화합니다.
03 읽히는 색상 체계 만들기파스텔 색상은 예쁘지만 글자와 버튼이 흐리거나 상태 구분이 어려울 때
먼저 맞출 설정·조건
- 배경 2개, 본문·보조 글자 2개, 브랜드색 1개, 성공·주의·오류 상태색을 각각 정의합니다.
- 일반 크기 텍스트는 WCAG 대비 4.5:1 이상을 기본 목표로 하고 실제 대비 검사기로 확인합니다.
실행 순서
- 1가장 밝은 배경과 가장 어두운 본문색부터 정하고 본문 대비를 통과시킨 뒤 브랜드색을 고릅니다.
- 2브랜드색을 큰 배경에 쓸 때와 작은 버튼·링크에 쓸 때의 더 어두운 변형을 따로 만듭니다.
- 3성공·주의·오류에는 색뿐 아니라 체크·느낌표·오류 문구를 함께 넣습니다.
- 4흑백, 밝은 야외 화면, 화면 밝기 30%에서 핵심 글자와 버튼이 남는지 확인합니다.
잘됐는지 확인
- 본문·링크·버튼이 배경과 충분히 구분되고 연한 색은 장식 영역에만 사용됩니다.
- 색을 구분하지 못해도 아이콘과 문구로 상태를 알 수 있습니다.
이럴 때는 이렇게
글자 그림자를 추가하지 말고 버튼 배경을 더 어둡게 하거나 어두운 글자와 더 밝은 배경 조합으로 바꿉니다.
상태색은 작은 아이콘·왼쪽 선·핵심 단어에만 쓰고 카드 전체 배경은 아주 옅은 중립색으로 통일합니다.
04 제목부터 캡션까지 글자 체계 만들기화면마다 글자 크기와 굵기가 달라 일관성이 없거나 긴 문장이 읽히지 않을 때
먼저 맞출 설정·조건
- 본문, 보조문, 소제목, 제목, 숫자 강조의 최대 5개 역할만 정의합니다.
- 모바일 본문은 대체로 16px 전후에서 시작하고 줄높이는 글자 크기의 약 1.45~1.65배로 테스트합니다.
실행 순서
- 1실제 가장 긴 한국어·영어 제목과 버튼 문구를 넣어 줄바꿈이 발생하는 조건부터 확인합니다.
- 2본문을 기준으로 소제목과 제목 크기를 정하고 굵기는 Regular·Medium·Bold 세 단계 이내로 제한합니다.
- 3한 줄 길이가 너무 길면 글자를 키우지 말고 본문 컨테이너 폭을 줄여 약 45~75자 범위에서 읽어봅니다.
- 4200% 확대와 320px 폭에서 글자가 겹치거나 버튼 밖으로 나가지 않는지 확인합니다.
잘됐는지 확인
- 색을 빼도 크기·굵기·간격만으로 제목과 본문 관계가 보입니다.
- 한글과 영어 전환 시 핵심 버튼의 높이와 주변 레이아웃이 갑자기 바뀌지 않습니다.
이럴 때는 이렇게
명령형 핵심 단어로 문구를 줄이고 최소 높이를 두 줄 기준으로 통일하거나 넓은 화면에서만 가로 배치합니다.
글자 굵기보다 먼저 본문색을 더 어둡게 해 대비를 높이고 보조문만 한 단계 연하게 둡니다.
05 모바일 검토와 최종 내보내기큰 화면에서는 괜찮지만 휴대폰에서 잘리거나 공유 이미지가 흐릴 때
먼저 맞출 설정·조건
- 320px, 375px, 430px, 넓은 화면 네 조건과 200% 확대를 검사합니다.
- 웹 이미지는 실제 표시 크기의 1~2배 래스터 또는 SVG, 인쇄물은 인쇄소 규격·도련·색상 모드를 먼저 확인합니다.
실행 순서
- 1콘텐츠 우선순위를 유지한 채 모바일에서 3열은 1열, 보조 내비게이션은 접기처럼 구조를 바꿉니다.
- 2고정 폭·긴 URL·표·버튼 그룹이 화면 밖으로 나가는지 가로 스크롤 없이 확인합니다.
- 3터치 요소 사이 간격과 하단 안전 영역을 확인하고 중요한 버튼이 브라우저 UI나 홈 인디케이터에 가리지 않게 합니다.
- 4최종 크기로 내보낸 뒤 실제 휴대폰과 공유 앱에서 열어 글자 선명도·색·잘림을 확인하고 원본 파일과 버전을 보관합니다.
잘됐는지 확인
- 320px와 200% 확대에서도 핵심 정보가 겹치거나 잘리지 않고 읽는 순서가 유지됩니다.
- 최종 파일을 실제 사용 위치에 올렸을 때 흐림·예상 밖 여백·색상 변화가 없습니다.
이럴 때는 이렇게
중요도가 낮은 설명은 접기 영역으로 옮기고 반복 라벨을 줄이며 핵심 값과 행동을 먼저 배치합니다.
표시 크기보다 작은 래스터를 늘리지 말고 2배 해상도로 다시 내보내거나 텍스트·도형은 SVG로 제공합니다.
단계별 연습
4번의 핵심 연습
주차보다 순서가 중요합니다. 한 단계가 익숙해지면 다음 단계로 진행하세요.
1단계
환경과 기본 동작
내용을 제목, 설명, 행동 순서로 줄이고 중요도를 표시합니다.
2단계
같은 기준으로 반복
하나의 기준선에 맞춰 정렬하고 여백 단위를 반복합니다.
3단계
작은 변화 적용
크기, 굵기, 색 중 하나씩만 바꿔 대비를 만듭니다.
4단계
혼자서 완성하고 기록
작은 화면과 흑백 상태에서 읽히는지 확인하고 요소를 덜어냅니다.
완료한 단계는 다음 방문에도 이어서 볼 수 있으며, 진행 초기화 버튼으로 다시 시작할 수 있습니다.
시간과 컨디션에 맞춘 연습
시간과 컨디션을 선택하면 준비, 핵심 동작과 확인 시간을 나눠 표시합니다.
결과 점검·실수·안전
대상 사용자, 가장 먼저 보여야 할 정보, 다음 행동을 한 문장으로 적었습니다.
핵심·보조·참고의 세 단계 위계를 정하고 강조 요소는 하나로 제한했습니다.
반복 요소는 같은 기준선과 간격 체계를 사용합니다.
본문과 버튼의 색 대비를 도구로 검사하고 색만으로 상태를 전달하지 않습니다.
가장 긴 한글·영문 문구, 320px 폭, 200% 확대에서 레이아웃을 확인했습니다.
실제 게시 위치에서 최종 파일의 선명도·잘림·안전 영역을 확인하고 편집 원본을 보관했습니다.
처음에 줄이면 좋은 실수
- 빈 공간을 불안해해 장식을 계속 추가하기
- 강조할 요소가 너무 많아 모두 같은 힘으로 보이기
- 작업 화면에서만 보고 실제 크기를 확인하지 않기
안전하게 즐기는 기준
- 상업 작업에는 글꼴·사진·아이콘의 이용허락 범위를 확인하세요.
- 색만으로 상태를 구분하지 말고 글자나 형태를 함께 사용하세요.
참고한 공식·전문 자료
기기·앱·안전 기준은 바뀔 수 있습니다. 지원 기능과 최신 주의사항은 링크된 원문에서 다시 확인하세요.
컬러 팔레트 생성기
이미지 용량·크기 변환기
QR 코드 생성기