디자인 시스템 실무! 컬러 팔레트 설계하기

안녕하세요, 게으른 사부작이입니다!

 

오늘은 디자인 시스템의 실무적인 첫걸음, 바로 컬러 팔레트 설계에 대해 이야기해보려고 해요. 색상은 디자인에서 가장 먼저 눈에 띄는 요소라 정말 중요하죠. 저도 처음 디자인을 배울 때 색깔 때문에 고생한 적이 많아서, 오늘 주제가 더 와닿네요. 그럼 저와 함께 컬러 팔레트를 설계하는 법을 알아볼까요?

ChatGPT 생성 이미지

색깔 하나 잘못 골랐다가 상사한테 혼난 적이 있어요. 여러분은요?

제가 디자인 공부를 시작하고 처음 팀 프로젝트를 했을 때의 일이에요. 앱 UI를 만들면서 "이 버튼은 빨간색으로 하면 눈에 띄겠지!" 하고 자신 있게 제안했는데, 상사한테 혼났어요. 이유는 빨간색이 "경고"나 "삭제" 같은 부정적인 느낌을 주는데, 저는 "확인" 버튼에 썼던 거예요. 사용자 입장에서는 "이 버튼 누르면 뭔가 잘못되나?" 하고 혼란스러울 수 있었죠. 그때 깨달았어요. 색깔은 단순히 예쁘기만 해선 안 되고, 의미와 맥락을 고려해야 한다는 걸요. 여러분도 색깔 때문에 고민하거나 실수한 적 있나요? 저는 그 이후로 컬러 팔레트를 체계적으로 설계하는 법을 배우게 됐어요.

기본 색상 이론: 보색과 유사색 이해하기

컬러 팔레트를 설계하려면 먼저 기본 색상 이론을 이해하는 게 중요해요. 색상 이론은 색깔이 서로 어떻게 어울리는지, 어떤 느낌을 주는지 알려주는 가이드예요. 초보자도 쉽게 이해할 수 있는 두 가지 개념을 소개할게요: 보색과 유사색이에요.

• 보색: 색상환에서 서로 반대쪽에 있는 색깔이에요. 예를 들어, 빨강과 초록, 파랑과 주황이 보색 관계예요. 보색은 대비가 강해서 눈에 띄는 조합을 만들 때 좋아요. 예를 들어, 크리스마스 테마 디자인을 할 때 빨강과 초록을 쓰면 확실히 시선이 가죠. 하지만 너무 강한 대비는 피로감을 줄 수 있으니 조심해야 해요.
• 유사색: 색상환에서 가까이 있는 색깔이에요. 예를 들어, 파랑, 청록, 초록은 유사색이에요. 유사색은 조화롭고 부드러운 느낌을 주기 때문에, 차분한 디자인을 원할 때 유용해요. 제가 좋아하는 카페 앱 UI는 파랑과 청록을 써서 편안한 느낌을 주더라고요.

이런 색상 이론을 바탕으로 컬러 팔레트를 설계하면, 색깔이 서로 어울리지 않아 어지러운 결과를 피할 수 있어요. 저는 처음엔 색상환을 보면서 "이 조합이 예쁘겠다!" 하고 골랐는데, 연습하다 보니 점점 감각이 생기더라고요.

Primary, Secondary, Accent 색상 설정법

이제 본격적으로 컬러 팔레트를 설계해 볼게요. 디자인 시스템에서는 보통 Primary(주요 색상), Secondary(보조 색상), **Accent(강조 색상)**으로 나눠서 색상을 정해요. 이 세 가지를 잘 설정하면 일관성 있는 디자인을 만들 수 있어요.

• Primary 색상: 브랜드를 대표하는 메인 색상이에요. 가장 자주 쓰이고, 브랜드의 느낌을 결정짓죠. 예를 들어, 넷플릭스는 검정과 빨강을 주요 색상으로 써서 강렬한 느낌을 주고, 스포티파이는 초록을 써서 활기찬 느낌을 줘요. 저는 개인 프로젝트에서 파랑을 주요 색상으로 정했는데, 신뢰감과 안정감을 주더라고요.
• Secondary 색상: 주요 색상을 보완하는 색상이에요. Primary 색상과 조화를 이루면서, 약간의 변화를 주고 싶을 때 쓰죠. 예를 들어, 파랑이 주요 색상이라면 청록이나 회색을 보조 색상으로 설정할 수 있어요. 이 색상은 배경이나 덜 중요한 버튼에 자주 쓰여요.
• Accent 색상: 특정 요소를 강조할 때 쓰는 색상이에요. 주로 "눌러주세요!" 같은 행동을 유도하는 버튼이나 경고 메시지에 사용돼요. 예를 들어, 빨강은 "삭제"나 "경고" 같은 상황에, 노랑은 "주의"를 나타낼 때 좋아요. 제가 본 쇼핑 앱에서는 "장바구니 담기" 버튼에 주황색을 써서 눈에 확 띄더라고요.

예시: "초록은 긍정, 빨강은 경고"

색상을 정할 때는 사용자가 직관적으로 이해할 수 있는 의미를 부여하는 게 중요해요. 예를 들어, 초록은 긍정적인 느낌을 주기 때문에 "확인", "저장" 같은 버튼에 자주 쓰여요. 반면 빨강은 경고나 "위험"을 나타내기 때문에 "삭제", "취소" 같은 버튼에 적합하죠. 이런 규칙을 정해놓으면 사용자가 "이 버튼 누르면 뭐가 될까?" 고민하지 않아도 돼요.

저는 개인 프로젝트에서 "초록 = 긍정", "빨강 = 경고", "파랑 = 기본 행동"으로 설정해 봤어요. 예를 들어, "구매하기" 버튼은 초록으로, "삭제하기" 버튼은 빨강으로, "다음으로" 버튼은 파랑으로 했죠. 이렇게 하니 UI가 훨씬 직관적이 됐어요. 여러분도 이런 식으로 의미를 부여하면서 컬러 팔레트를 설계해 보세요!

실무 팁: 무료 툴 활용하기

컬러 팔레트를 설계할 때 무료 툴을 활용하면 훨씬 쉬워요. 저는 Coolors라는 사이트를 추천드려요. 색상 조합을 자동으로 만들어주고, 마음에 드는 팔레트를 저장할 수 있어요. 또, Adobe Color도 색상환을 기반으로 보색, 유사색 조합을 쉽게 찾을 수 있어서 좋아요. 이런 툴을 활용하면 초보자도 예쁜 컬러 팔레트를 금방 만들 수 있답니다.

컬러를 정했으니, 이제 글씨에도 신경 써볼까요?

컬러 팔레트를 설계하는 법을 알아보니, 색상이 단순히 예쁘기만 해선 안 되고, 의미와 맥락을 담아야 한다는 걸 알게 됐어요. Primary, Secondary, Accent 색상을 정하고, 각 색상에 직관적인 역할을 부여하면 디자인 시스템의 첫걸음이 완성되죠. 다음 포스트에서는 디자인 시스템의 또 다른 핵심 요소인 타이포그래피, 즉 글씨체를 어떻게 설정하는지 알아볼게요. 여러분은 컬러 팔레트를 설계하면서 어떤 색상을 골랐나요? 저는 파랑과 초록 조합이 제일 마음에 들더라고요. 댓글로 여러분의 팔레트도 공유해 주세요!