디자인 4대 원칙, 디자이너의 미감이 탐날 때 꺼내보세요

웹에서 보기 | 홈페이지 바로가기 | 지난 소식보기

안녕하세요, 디블러입니다!

'직접 만든 결과물, 어딘가 아쉬운데 이유를 모르겠다면?'

늦은 밤, 다음 날 올릴 신메뉴 안내를 직접 만들어본 적 있으시죠. 필요한 정보는 다 넣었는데 완성본이 왠지 아쉬워요. 글씨를 키우고 색을 바꾸고 장식을 하나 더 얹어봐도, 오히려 점점 어수선해지고요.

디자이너가 만든 것과 무엇이 다른지 콕 집기 어려운 그 차이를 우리는 미감이라고 불러요. 그리고 타고나는 거라 여기고 쉽게 내려놓죠.

"디자이너의 미감은 생각보다 많은 부분이 감각이 아니라, 원칙을 지키는 습관이에요."

오늘은 디자이너들이 머릿속에 두고 쓰는 네 가지 원칙과, 올리기 전에 10초면 하는 점검법을 나눠볼게요. 다음에 뭔가를 만들 때 옆에 띄워두고 꺼내 보세요.

Chapter 1. 미감은 이름을 아는 데서 시작돼요

📍 비디자이너를 위한 디자인 책 한 권

오늘의 기준은 로빈 윌리엄스의 《디자이너가 아닌 사람들을 위한 디자인북》이에요. 디자인을 배운 적 없는 사람을 위해 쓴 책으로, 1994년 초판 이후 4판까지 개정됐고 국내에도 번역돼 있어요.

이 책은 나무 도감 이야기로 시작해요. 저자가 선물받은 도감에서 조슈아 나무를 알아보는 법을 익히고 밖에 나가 보니, 늘 다니던 동네 곳곳에 그 나무가 서 있었대요. 오래 살던 동네였는데도 그전엔 한 번도 눈에 띈 적이 없었대요. 이름을 알고 나서야 비로소 보이기 시작한 거죠.

💡 이름이 붙으면 고칠 곳이 보여요

저자가 이 일화로 하고 싶은 말은 하나예요. 이름을 붙일 수 있어야 그것을 다룰 수 있다는 것.

"어딘가 어색하다"는 아직 이름이 없는 상태예요. 그래서 손이 자꾸 무언가를 더하는 쪽으로 가죠. 반대로 "정렬이 흐트러졌네", "대비가 약하네"처럼 이름이 붙으면 어디를 손봐야 할지 보이기 시작해요.

책은 잘 만든 디자인 대부분에 들어 있는 원칙을 근접, 정렬, 반복, 대비 네 가지로 정리해요.

🎯 미감을 키우는 첫걸음은 어색함에 이름을 붙이는 거예요.

Chapter 2. 네 가지 원칙, 이렇게 써보세요

📍 근접: 관련 있는 것끼리 붙이세요

이벤트 이름, 기간, 장소, 혜택, 참여 방법, 문의처가 똑같은 간격으로 늘어선 안내문을 떠올려보세요. 빠진 정보는 없는데 어디까지가 한 덩어리인지 알 수 없어서, 처음부터 끝까지 다 읽어야 해요.

사람은 가까이 놓인 것을 한 묶음으로 읽어요. 그래서 간격 자체가 정보예요. 묶음 안은 좁게, 묶음끼리는 넓게 두세요. 기간과 장소는 "언제·어디서"로, 혜택과 참여 방법은 "무엇을·어떻게"로 붙이는 식이에요. 묶었는데도 덩어리가 다섯 개를 넘는다면 정보를 덜어낼 때라는 신호예요. 허전하다고 빈자리를 장식으로 채우는 것도 피해주세요. 여백은 덩어리를 나눠주는 일을 하고 있거든요.

흩어져 있던 내용이 자기 소제목 아래로 모이면, 같은 요소가 "세 가지 이야기"로 읽혀요.

📐 정렬: 모든 요소에 기준을 주세요

책의 정렬 원칙은 이래요. 어떤 것도 아무 데나 놓지 말고, 모든 요소를 페이지 위의 다른 무언가와 시각적으로 이어지게 할 것.

직접 만든 메뉴판을 떠올려보세요. 메뉴 이름을 하나씩 마우스로 끌어다 눈대중으로 놓다 보면, 줄마다 시작점이 제각각이 돼요. 하나씩 보면 괜찮은데 모아 놓으면 어설퍼 보여요. 눈이 따라갈 선이 없으니까요. 정렬 기능과 안내선을 쓰고, 요소를 놓을 때마다 "이건 무엇에 맞춰져 있지?"라고 물어보세요. 왼쪽이든 가운데든 오른쪽이든, 고른 기준에 정확히 맞추는 게 핵심이에요.

이미지를 보면, 길이와 순서는 그대로, 왼쪽 끝만 한 선에 맞췄을 뿐인데 훨씬 정돈돼 보여요.

🔁 반복: 정한 규칙을 끝까지 쓰세요

게시물마다 폰트도 색도 다른 피드는, 한 장씩 보면 괜찮아도 전체로 보면 여러 가게가 섞인 것처럼 보여요. 반복은 한 장이 아니라 여러 장을 한 브랜드로 보이게 하는 원칙이에요. 고객이 로고를 확인하기도 전에 "아, 거기 거네" 하고 알아보는 건 이 반복이 쌓인 덕분이에요.

디자이너들이 흔히 쓰는 기준은 이래요. 폰트는 제목용과 본문용 두 개면 충분하고, 색은 주색·보조색·강조색 정도로 정해두기. 자주 만드는 게시물은 템플릿을 하나 만들어두면 누가 만들어도 같은 얼굴이 나와요.

이미지를 보면 같은 요소라도 배치가 카드마다 다르면 한 브랜드로 묶이지 않아요. 틀이 반복되면 한눈에 묶여 보이죠.

🎯 대비: 다를 거면 확실히 다르게

책은 대비를 이렇게 말해요. 두 요소가 같지 않다면 다르게, 그것도 "정말 다르게" 만들라고요.

제목 18pt, 본문 16pt처럼 애매한 차이는 의도인지 실수인지 헷갈리게 해요. 가격도 혜택도 배송 안내도 다 강조하면 결국 아무것도 강조되지 않고요. 대비는 결국 "무엇을 먼저 보게 할지" 정하는 일이에요. 화면에서 가장 중요한 하나를 고르고, 그것만 확실히 다르게 만드세요. 크기라면 한눈에 차이 날 만큼, 굵기라면 분명하게, 색이라면 강조색은 그 한 곳에만요.

모두 같은 크기면 어디서부터 볼지 모르지만, 하나만 확실히 키우면 시선이 바로 그곳으로 가요.

🎯 묶고, 맞추고, 반복하고, 하나만 확실히 다르게.

이 네 가지가 디자이너가 습관처럼 지키는 기본이에요.

Chapter 3. 올리기 전, 10초 점검법

🔍 흐릿하게 보면 구조가 보여요

오래 들여다본 내 결과물은 문제가 잘 안 보여요. 그래서 디자이너들은 마무리할 때 블러 테스트로 "처음 보는 사람의 눈"을 빌려요.

화면을 띄워두고 눈을 가늘게 떠서 글자가 안 읽힐 만큼 흐릿하게 보세요. 휴대폰이라면 팔을 쭉 뻗어 멀리 두고 봐도 돼요. 가장 먼저 보이는 게 내가 제일 보여주고 싶은 것인지, 정보가 몇 덩어리로 나뉘어 보이는지만 확인하면 돼요. 고객은 우리 결과물을 꼼꼼히 읽지 않아요. 피드를 스치듯 넘기는 고객에게는 그 흐릿한 첫인상이 거의 전부거든요.

💡 어색함에 이름을 붙여보세요

덩어리가 안 나뉘면 근접, 들쭉날쭉하면 정렬, 먼저 보이는 게 없으면 대비를 다시 보세요. 반복은 지난 게시물 옆에 나란히 놓고 흐릿하게 보면 알 수 있어요.

아쉬울 때 우리 손은 대부분 무언가를 더하는 쪽으로 가요. 글씨를 키우고, 색을 늘리고, 장식을 얹죠. 그런데 다 키우면 대비가 사라지고, 빈자리를 채우면 간격이 사라져요. 디자이너의 미감은 더하기보다 정리에 가까워요.

🌟 원칙 다음에 필요한 것

오늘 이야기를 짧게 모으면 이래요. 미감은 상당 부분 원칙을 지키는 습관에서 오고, 올리기 전 흐릿하게 한 번 보는 것만으로도 어색함의 이름을 찾을 수 있어요.

다만 네 가지 원칙은 어색함을 걷어내 줄 뿐, 보자마자 "그 브랜드"로 기억되게 만드는 것까지 해주지는 않아요. 어떤 폰트와 색을 반복할지, 무엇을 확실히 다르게 보여줄지는 결국 우리 브랜드가 어떻게 보여야 하는지에 대한 기준에서 나오니까요. 그 기준이 필요해지는 순간이 오면, 디블러가 함께 고민할게요.

오늘은 가장 최근에 만든 결과물 하나를 꺼내 네 가지 원칙에 대보세요. 생각보다 많은 게 보이실 거예요.

한 장 한 장 선명해지는 대표님의 브랜드, 디블러가 응원할게요.