EDITORCLASSBLOGLOGIN표현한다는 것의무한한 가능성,새로운 형태로
담아내다.새로운 형태의 콘텐츠Opkle은 코드 없이 웹을 마음껏 만들고, 누구나 자기 화면을 그릴 수 있도록 에디터를 만들고, 그 결과물을 어디서나 즐길 수 있게 돕는 팀입니다.텍스트와 화면과의 조화를 통해, 웹을 짓는다는 것이 그저 단순한 코딩이 아닌, 상상을 펼치고 감각을 깨우는 과정이 될 수 있도록 좋은 도구를 만들어 냅니다.디자인 색 조합, 어떻게 고를까 — 배색의 기본과 색 스타일design11디자인 폰트 고르기와 글자 배치 — 타이포그래피의 기본design12디자인 레이아웃의 기본 — 정렬·여백·그룹·그리드design13인스타그램 카드뉴스 디자인, 처음부터 끝까지design14상세페이지 디자인, 팔리는 흐름으로 짜는 법design1512345...11 디자인 색 조합, 어떻게 고를까 — 배색의 기본과 색 스타일디자인을 처음 시작하면 가장 오래 고민하게 되는 것이 색입니다. 마음에 드는 색을 하나씩 골라 얹었는데 전체를 보면 어딘가 산만하고, 남의 작업을 보면 몇 가지 색만으로도 정돈되어 보입니다. 같은 도형과 같은 글자를 써도 색 조합 하나로 디자인의 인상이 완전히 달라지기 때문에, 배색은 감각의 문제처럼 느껴지기 쉽습니다.하지만 잘 정돈된 배색에는 대부분 반복되는 원리가 있습니다. 색의 개수를 줄이고, 색마다 맡은 역할을 나누고, 밝기 차이로 읽히는 순서를 만드는 것입니다. 이 원리를 알고 나면 «예쁜 색»을 찾아 헤매는 대신 «이 자리에 맞는 색»을 고를 수 있게 됩니다. 그리고 한 번 정한 색을 디자인 전체에 흔들림 없이 쓰는 방법까지 갖추면, 작업이 커져도 통일감이 무너지지 않습니다.이 글에서는 배색을 정하는 기본 원리와, 정한 색을 디자인 툴에서 관리하는 방법을 함께 살펴봅니다.1.색의 세 가지 성질 — 색상·명도·채도가 각각 무엇을 바꾸는지 봅니다.2.역할로 나누는 배색 — 주조색·보조색·강조색과 60:30:10 비율을 봅니다.3.명도 대비 — 색이 예뻐도 읽히지 않는 이유를 봅니다.4.색을 고르는 실제 순서 — 브랜드 색 하나에서 팔레트를 넓히는 법을 봅니다.5.색 스타일과 색 변수 — 정한 색을 디자인 전체에 일관되게 쓰는 법을 봅니다.색은 세 가지 성질로 이루어져 있습니다색을 고를 때 막막한 이유는 색을 하나의 덩어리로 보기 때문입니다. 색은 세 가지 성질로 나누어 생각할 수 있습니다. 색상(Hue)은 빨강·파랑·초록처럼 색의 종류이고, 명도(Lightness)는 얼마나 밝은지, 채도(Saturation)는 얼마나 선명한지입니다.이 세 가지를 나누어 보면 배색 문제가 훨씬 구체적으로 바뀝니다. «색이 촌스러워 보인다»는 고민은 대개 채도가 너무 높은 색이 여럿 섞여 있다는 뜻이고, «글자가 잘 안 읽힌다»는 고민은 대개 글자와 배경의 명도가 비슷하다는 뜻입니다. «분위기가 차갑다»는 느낌은 색상이 파랑 쪽에 몰려 있기 때문인 경우가 많습니다. 무엇이 문제인지 성질별로 짚을 수 있으면, 색을 통째로 바꾸지 않고 그 성질 하나만 조절해서 고칠 수 있습니다.실제로 정돈된 디자인을 살펴보면 색상은 두세 가지로 좁히고, 대신 같은 색상의 명도를 여러 단계로 나누어 쓰는 경우가 많습니다. 진한 남색 제목, 중간 밝기의 파랑 단추, 아주 옅은 하늘색 배경처럼 한 색상 안에서 명도만 바꾸면, 색이 여러 개 쓰였는데도 하나의 분위기로 묶여 보입니다.색에 역할을 나눠 줍니다 — 60:30:10배색이 산만해지는 가장 흔한 이유는 모든 색이 같은 비중으로 경쟁하기 때문입니다. 이를 피하는 오래된 방법이 색에 역할을 나누는 것입니다.색의 세 가지 역할 주조색은 화면의 대부분을 차지하는 바탕의 색입니다. 흰색이나 옅은 회색, 아주 옅은 브랜드 색이 주로 쓰이며 약 60%를 차지합니다. 보조색은 제목과 큰 덩어리, 사진 위 띠처럼 디자인의 성격을 드러내는 색으로 약 30%를 차지합니다. 강조색은 «여기를 보라»는 신호입니다. 단추, 가격, 중요한 숫자에만 쓰고 약 10%로 아껴 둡니다.60:30:10은 정확히 지켜야 하는 공식이라기보다, 색마다 비중을 다르게 두라는 안내에 가깝습니다. 핵심은 강조색을 아끼는 것입니다. 강조색이 여기저기 쓰이면 더 이상 강조가 되지 않고, 화면 전체가 소리 지르는 것처럼 보입니다. 반대로 강조색이 단추 하나에만 쓰이면, 보는 사람의 눈은 자연스럽게 그 단추로 향합니다.예뻐도 읽히지 않으면 실패입니다 — 명도 대비색 조합이 마음에 들어도 글자가 잘 읽히지 않는다면 그 배색은 실패입니다. 읽히는지를 가르는 것은 색상이 아니라 명도 차이입니다. 빨강 바탕에 초록 글자처럼 색상은 완전히 달라도 명도가 비슷하면 글자가 흐릿하게 번져 보이고, 흑백으로 바꿔 보면 글자가 거의 사라집니다.간단한 확인 방법이 있습니다. 디자인을 흑백으로 바꿔 보는 것입니다. 옵클 에디터에서는 요소를 고르고 오른쪽 필터 칸에서 채도를 끝까지 내려 보거나, 사진이라면 흑백 단추를 눌러 보면 됩니다. 흑백에서도 제목과 본문, 단추가 또렷하게 구분된다면 명도 대비가 충분한 것입니다. 확인이 끝나면 ⌘Z로 되돌리면 됩니다.웹 접근성 지침(WCAG)은 일반 글자에 4.5:1 이상의 명도 대비를 권합니다. 모든 디자인에 숫자를 재 볼 필요는 없지만, 옅은 회색 글자를 흰 바탕에 쓰고 싶어질 때만큼은 한 번 더 의심해 보는 편이 좋습니다. 작은 글자일수록, 휴대폰 화면처럼 밝은 곳에서 볼수록 대비가 더 많이 필요합니다.브랜드 색 하나에서 팔레트를 넓힙니다색을 처음부터 여러 개 고르려 하면 막막합니다. 대신 기준이 되는 색 하나를 먼저 정하고, 거기서 넓혀 가는 편이 쉽습니다. 로고나 브랜드에 이미 쓰는 색이 있다면 그 색이 출발점입니다.팔레트를 넓히는 순서 기준 색의 명도를 바꿔 진한 색 두 단계, 옅은 색 두세 단계를 만듭니다. 진한 색은 제목과 글자에, 옅은 색은 배경과 카드에 씁니다. 회색을 따로 고르는 대신, 기준 색을 아주 조금 섞은 회색을 씁니다. 순수한 회색보다 전체 분위기에 훨씬 자연스럽게 섞입니다. 강조색은 기준 색의 반대편 색상이나, 같은 계열에서 채도를 높인 색으로 하나만 정합니다. 성공·경고·오류처럼 의미가 정해진 색이 필요하다면 초록·주황·빨강을 기준 색과 같은 채도 수준으로 맞춥니다.마음에 드는 사진이나 포스터에서 색을 빌려 오는 것도 좋은 방법입니다. 옵클 에디터의 피커(I)로 화면 어디든 누르면 그 색이 고른 요소의 칠이 되므로, 참고 이미지를 캔버스 한쪽에 놓고 색을 하나씩 뽑아 팔레트를 만들 수 있습니다. 이때도 그대로 쓰기보다, 뽑은 색들의 채도를 비슷한 수준으로 맞춰 주면 훨씬 정돈되어 보입니다.정한 색은 스타일로 담아 둡니다색을 잘 골랐어도, 작업이 길어지면 비슷하지만 조금씩 다른 파랑이 여기저기 섞이기 쉽습니다. 이를 막는 방법은 정한 색을 스타일로 담아 두고 거기서만 꺼내 쓰는 것입니다.옵클 에디터에서는 칠 칸 제목 줄의 ⁘ 단추를 누르면 칠 스타일 판이 열립니다. 빈 칸을 누르면 지금 색이 새 스타일로 담기고, 다른 요소를 고른 뒤 칩을 누르면 그 색이 적용됩니다. 칩의 색을 바꾸면 그 칩을 적용한 모든 요소의 색이 함께 바뀌므로, 브랜드 색을 조금 조정하고 싶을 때 디자인 전체를 한 번에 고칠 수 있습니다. 인스펙터의 스타일 설정 칸에 있는 컬러칩은 72칸짜리 색 스타일 판이라, 팔레트 전체를 한곳에 모아 두기에 알맞습니다.다크 모드가 필요한 앱 화면이라면 색 변수를 써 보십시오. 칩을 색 변수에 이으면 라이트와 다크 두 값을 가지게 되고, 대지마다 라이트·다크를 골라 같은 디자인의 밝은 판과 어두운 판을 나란히 볼 수 있습니다. 이미 여기저기 칠해 둔 색을 정리하고 싶다면 빠른 실행(⌘/)에서 «선택 — 같은 칠»을 찾아 같은 색을 쓴 요소를 한꺼번에 고른 뒤 스타일 칩을 눌러 바꾸면 됩니다.자주 보는 배색 실수와 고치는 법배색이 어색할 때 원인은 대개 몇 가지로 좁혀집니다. 내 디자인이 어딘가 불편해 보인다면 아래 목록부터 하나씩 대조해 보십시오.자주 보는 실수 원색을 그대로 쓴다 — 빨강·파랑·초록을 채도 100%로 쓰면 눈이 피로하고 값싸 보이기 쉽습니다. 채도를 조금 낮추거나 명도를 살짝 내리면 같은 색상이 훨씬 차분해집니다. 순수한 검정 글자 — 흰 바탕에 완전한 검정 글자는 대비가 너무 강해 딱딱해 보입니다. 아주 진한 회색이나 브랜드 색이 살짝 섞인 진한 색을 쓰면 부드러워집니다. 강조색이 여러 개 — 빨간 단추, 노란 배지, 초록 아이콘이 함께 있으면 무엇이 중요한지 알 수 없습니다. 강조색은 하나로 정하고, 나머지는 보조색이나 회색으로 내립니다. 사진과 싸우는 배경색 — 색이 많은 사진 옆에 채도 높은 배경을 두면 둘 다 묻힙니다. 사진이 주인공이면 배경은 흰색이나 옅은 회색으로 물러나게 합니다.사진 위에 글자를 얹어야 하는데 사진 색 때문에 글자가 읽히지 않을 때는, 사진 위에 반투명한 어두운 색 막을 한 겹 얹어 보십시오. 옵클 에디터에서는 도형 하나에 칠을 여러 겹 쌓을 수 있고 투명도 칸에서 막의 진하기를 정할 수 있어서, 레이어를 따로 만들지 않고도 사진의 분위기는 살리면서 글자를 또렷하게 만들 수 있습니다.배색은 줄이는 데서 시작합니다좋은 배색은 색을 더하는 일보다 덜어 내는 일에 가깝습니다. 색상은 두세 가지로 좁히고, 명도로 단계를 만들고, 강조색은 정말 중요한 한 곳에만 씁니다. 그리고 흑백으로 바꿔 보아도 읽히는지 확인합니다. 이 네 가지만 지켜도 대부분의 디자인은 훨씬 차분하고 분명해집니다.색 감각은 타고나는 것이 아니라 쌓이는 것입니다. 마음에 드는 디자인을 볼 때마다 색이 몇 개 쓰였는지, 어떤 색이 가장 넓게 쓰였는지, 강조색은 어디에 있는지 세어 보는 습관을 들이면, 머지않아 내 디자인에서도 같은 질서를 만들 수 있게 됩니다.이 글의 핵심 색은 색상·명도·채도로 나누어 보면, 무엇을 고쳐야 할지 구체적으로 보입니다. 주조색·보조색·강조색으로 역할을 나누고, 강조색은 약 10%로 아껴 씁니다. 읽히는지는 명도 차이가 가릅니다. 흑백으로 바꿔 보아도 구분되는지 확인합니다. 기준 색 하나에서 명도 단계를 만들고, 기준 색이 섞인 회색과 강조색 하나로 팔레트를 넓힙니다. 정한 색은 칠 스타일·컬러칩·색 변수로 담아 두면, 고칠 때도 디자인 전체가 함께 바뀝니다.이전글목록으로다음글저작권 고시Copyright Notice본 웹사이트의 모든 디자인 결과물 및 영상에 대한 저작권은 Abstract Cloud에 있으며, 저작권법 및 관련 법령에 의해 보호받습니다. 웹, 영상, 본문, 표지, 내지 디자인을 포함한 모든 콘텐츠는 저작권자의 자산으로, 사전 동의 없이 무단 복제, 배포, 2차 저작물 제작, 온라인 공유 등을 금지합니다. 이를 위반할 시, 저작권법에 따라 민형사상 책임을 질 수 있습니다. 정당한 구매와 저작권 보호는 창작자의 권리를 지키며, 더 나은 작품으로 보답할 힘이 됩니다.저작권자: Abstract Cloud | 대표자: 배창규(uragen)
© Abstract Cloud. All Rights Reserved.HOMEFAQ이용 약관개인정보 이용방침help@opkle.app
010-2747-3403상호 :추상적 형상 디자인(Abstract cloud)  |  대표자 :배창규사업자등록번호 :249-74-00533통신판매업 신고번호 :2025-의정부송산-0634주소 :경기도 의정부시 부용로 49, 108동 402호웹의 모든 콘텐츠, 디자인, 소스 코드에 대한
저작권은 Opkle에게 있습니다.