디자인 4대 원칙, 디자이너의 미감을 빌려 쓰는 법

‍

‍

디자이너의 미감은 타고난 감각보다 매번 지키는 습관에 더 가까워요.

‍

‍

‍

‍

‍

‍

밤 열한 시, 내일 올릴 신메뉴 안내를 직접 만들고 있어요. 사진을 넣고 메뉴 이름을 넣고, 가격과 이벤트 기간까지 하나도 빠뜨리지 않았어요. 그런데 완성하고 나니 어딘가 아쉬워요. 무엇이 문제인지는 딱 짚어지지 않고요.

‍

그래서 글씨를 조금 키우고, 색을 바꿔보고, 비어 보이는 곳에 장식을 하나 올려봐요. 이상하게도 손을 댈수록 화면은 더 어수선해지죠.

‍

디자이너 없이 브랜드를 꾸려가는 대표님들께 유난히 자주 듣는 말이 있어요.

‍

‍

"디자이너가 만든 건 확실히 다른데, 뭐가 다른지는 모르겠어요."

‍

‍

우리는 그 차이를 흔히 미감이라고 불러요. 그리고 미감은 타고나는 거라 여기고 일찌감치 내려놓죠. 하지만 디자이너의 미감은 생각보다 많은 부분이 감각이 아니라 습관이에요. 몇 가지 원칙을 매번 빠짐없이 지키는 습관이요. 그리고 그 원칙은 얼마든지 빌려 쓸 수 있어요.

‍

미감과 닮은 말인 감도가 궁금하다면 감도가 무엇인지 설명할 수 있나요?도 함께 읽어보세요.

‍

오늘은 디자이너들이 작업할 때 늘 머릿속에 두는 디자인 4대 원칙을 꺼내 드릴게요. 원칙마다 바로 써볼 수 있는 팁, 고치기 전과 후를 비교한 예시, 그리고 올리기 전 10초면 끝나는 점검법까지 준비했어요. 다음에 직접 무언가를 만들 때 이 글을 옆에 띄워두고 하나씩 대보세요.

‍

‍

‍

‍

‍

‍

Chapter 1. 디자인 4대 원칙, 이름을 알면 보이기 시작해요

‍

‍

어색함에 이름을 붙이는 순간 고칠 곳이 보이고, 그 이름이 바로 디자인 4대 원칙이에요.

‍

‍

‍

‍

‍

‍

‍

‍

기준으로 삼을 책이 한 권 있어요. 로빈 윌리엄스의 《디자이너가 아닌 사람들을 위한 디자인북》이에요. 제목 그대로 디자인을 배워본 적 없는 사람을 위해 쓰인 책이죠. 1994년 처음 출간돼 4판까지 개정됐고, 국내에도 번역본이 나와 있어요. 책 곳곳에서 어색한 레이아웃과 고친 레이아웃을 나란히 보여주는데, 오늘 글도 그 방식을 그대로 따라가 볼게요. 이 책의 시작은 조금 엉뚱해요. 저자가 크리스마스 선물로 나무 도감 한 권을 받았대요. 도감 첫 장에 실린 나무는 조슈아 나무였는데, 단서 두 개만 알면 알아볼 수 있는 나무였다고 해요.

‍

그런데 도감을 덮고 밖으로 나가 보니, 부모님 집이 있는 동네 마당마다 조슈아 나무가 서 있었대요. 오래 살던 동네인데도 그전까지는 한 번도 눈에 띈 적이 없었던 거죠. 이름을 알고 나서야 비로소 보이기 시작한 거예요. 저자는 이 일을 겪으며 이름을 붙일 수 있다는 게 얼마나 중요한지 깨달았다고 말해요. 원칙에 이름을 붙이는 것이 곧 그 원칙을 다룰 수 있게 되는 열쇠라는 거예요.

‍

대표님의 결과물도 똑같아요. "어딘가 어색하다"는 아직 이름이 없는 상태예요. 이름이 없으니 어디를 고칠지 모르고, 그래서 글씨를 키우거나 장식을 얹는 쪽으로 손이 가죠. 그런데 "정렬이 흐트러졌네", "대비가 약하네"처럼 이름이 붙는 순간 고칠 자리가 보이기 시작해요.

‍

책은 잘 된 디자인 거의 모두에 쓰이는 원칙을 네 가지로 추려요. 흔히 디자인 4대 원칙이라고 부르는 근접, 정렬, 반복, 대비예요.

‍

‍

‍

‍

‍

‍

이름을 알았으니, 이제 하나씩 실제 결과물에 대보면서 어떻게 쓰는지 살펴볼까요?

‍

‍

‍

‍

‍

‍

‍

Chapter 2. 디자인 4대 원칙, 이렇게 써보세요

‍

‍

근접은 묶고, 정렬은 맞추고, 반복은 지키고, 대비는 확실히 구분하는 습관이에요.

‍

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

‍

매장 이벤트 안내문을 하나 떠올려볼게요. 이벤트 이름, 기간, 장소, 혜택, 참여 방법, 문의처가 같은 간격으로 한 줄씩 나란히 놓여 있어요. 빠진 정보는 없지만, 보는 사람은 어디까지가 한 덩어리인지 알 수 없어요. 결국 처음부터 끝까지 한 줄씩 전부 읽어야 하죠.

‍

사람은 가까이 놓인 것을 한 묶음으로 읽어요. 디자인에서는 간격이 색이나 모양보다도 더 강하게 "이것들은 한편"이라고 알려준다고 봐요. 그래서 간격 그 자체가 정보예요. 관련 있는 정보가 떨어져 있으면 따로 노는 조각처럼 보이고, 가까이 묶여 있으면 하나의 이야기처럼 읽혀요.

‍

팁을 드리면, 줄 간격을 모두 똑같이 두지 마세요. 묶음 안쪽은 좁게, 묶음과 묶음 사이는 넓게요. 기간과 장소는 "언제, 어디서"로 붙이고, 혜택과 참여 방법은 "무엇을, 어떻게"로 붙이는 식이에요. 이렇게 묶었는데 덩어리가 다섯 개를 넘는다면, 정보를 덜어낼 때가 됐다는 신호이기도 해요.

‍

그리고 허전해 보인다고 빈 곳을 아이콘이나 장식으로 메우지 마세요. 책에서도 구석구석을 채우려 한 전단지가 고쳐야 할 사례로 등장해요. 여백은 비어 있는 공간이 아니라 덩어리를 나눠주는 일을 하고 있거든요.

‍

‍

‍

‍

‍

‍

‍

‍

큰 도형은 소제목, 그 옆의 작은 도형과 줄은 소제목에 딸린 내용이라고 생각해보세요. 왼쪽은 내용이 자기 소제목과 멀찍이 흩어져 있어서, 어떤 내용이 어느 소제목에 속하는지 일일이 짝을 맞춰봐야 해요. 오른쪽은 요소를 하나도 더하거나 빼지 않고 각 내용을 자기 소제목 바로 아래로 옮겨 붙이기만 했어요. 그것만으로 흩어진 조각들이 "세 가지 이야기"로 읽혀요.

‍

‍

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

‍

책이 말하는 정렬 원칙은 한 문장으로 정리돼요. 페이지 위의 어떤 것도 아무 곳에나 놓여서는 안 되고, 모든 요소는 페이지 위 다른 무언가와 시각적으로 연결돼 있어야 한다는 거예요.

‍

직접 만든 메뉴판을 떠올려볼게요. 메뉴 이름을 하나씩 마우스로 끌어다 놓다 보니 줄마다 시작점이 다 달라요. 왼쪽 정렬도, 가운데 정렬도 아니고 그때그때 눈대중으로 놓은 거죠. 한 줄씩 보면 문제없어 보이는데, 모아 놓으면 어쩐지 어설퍼 보여요. 눈이 따라갈 선이 없기 때문이에요. 그리고 이런 어긋남은 크든 작든 만든 사람보다 보는 사람이 먼저 알아채요.

‍

그럼 어떻게 하면 될까요? 눈대중 대신 디자인 툴의 정렬 기능과 안내선을 쓰세요. 그리고 요소를 하나 놓을 때마다 "이건 무엇에 맞춰져 있지?" 하고 스스로 물어보세요. 책에서도 서로 멀리 떨어진 요소라도 늘 맞출 대상을 찾으라고 해요.

왼쪽, 가운데, 오른쪽 중 어떤 정렬을 쓸지는 결과물에 따라 고르면 돼요. 중요한 건 어떤 기준을 고르든 그 기준에 정확히 맞추는 거예요.

‍

‍

‍

‍

‍

‍

막대 하나가 메뉴판의 한 줄이에요. 왼쪽은 여섯 줄의 시작점이 제각각이라 어느 쪽에도 맞춰져 있지 않아요. 오른쪽은 막대 길이도 순서도 그대로 두고 왼쪽 끝만 한 선에 맞췄어요. 바꾼 건 그것 하나뿐인데, 같은 여섯 줄이 훨씬 정돈돼 보이죠.

‍

‍

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

‍

책은 반복을 이렇게 설명해요. 디자인의 어떤 요소를 결과물 전체에 걸쳐 되풀이하라고요.

인스타그램 피드를 한번 쭉 내려보세요. 이번 주 게시물은 손글씨 느낌 폰트에 분홍색, 지난주는 굵은 고딕에 남색, 그 전 주는 또 다른 폰트에 초록색이에요. 하나씩 보면 다 괜찮은데, 피드 전체로 보면 서로 다른 가게 세 곳이 뒤섞인 것 같죠.

‍

반복은 한 장을 예쁘게 만드는 원칙이 아니라, 여러 장을 한 브랜드로 보이게 만드는 원칙이에요. 고객이 로고를 확인하기도 전에 "아, 거기 거네" 하고 알아보는 건 이 반복이 쌓였기 때문이에요. 반복이 어떻게 브랜드를 하나로 묶는지는 브랜드 일관성, 다른 얼굴로 같은 브랜드가 되는 법에서 더 자세히 다뤘어요.

‍

현장에서 디자이너들이 흔히 쓰는 기준이 있어요. 폰트는 제목용 하나, 본문용 하나, 두 개면 충분해요. 색은 주로 쓰는 색 하나, 받쳐주는 색 하나, 강조할 때만 쓰는 색 하나 정도로 정해두고요. 그리고 자주 만드는 게시물은 템플릿을 하나 만들어 두세요. 매번 새로 고민하지 않아도 되니 시간이 줄고, 누가 만들어도 같은 얼굴이 나와요.

‍

‍

‍

‍

‍

‍

여섯 장의 카드를 게시물 여섯 개라고 생각해보세요. 왼쪽은 사진 자리, 제목, 설명이라는 같은 요소를 쓰는데도 카드마다 배치가 달라요. 사진이 왼쪽 위에 있다가 오른쪽으로 가고, 제목도 들쭉날쭉하죠. 폰트나 색은 손대지 않았는데도 한 브랜드로 묶여 보이지 않아요. 오른쪽은 여섯 장 모두 같은 배치를 따라요. 내용은 달라도 틀이 반복되니 한눈에 한 브랜드로 보여요.

‍

‍

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

‍

대비에 관한 책의 문장은 유난히 단호해요. 두 요소가 완전히 같은 게 아니라면 다르게 만들라고 해요. 그것도 "정말 다르게"요. 상세페이지 첫 화면을 예로 들어볼게요. 제목은 18pt, 본문은 16pt예요. 제목을 키우긴 했는데 차이가 애매하죠. 보는 사람은 이게 의도한 차이인지 실수인지 헷갈리고, 결국 어디부터 읽어야 할지 몰라요. 반대로 강조하고 싶은 게 많아서 가격도 빨간색, 혜택도 빨간색, 배송 안내도 굵게 처리하면 모든 게 강조되는 순간 아무것도 강조되지 않아요.

‍

대비는 "무엇을 먼저 보게 할지" 정하는 일이에요. 그러니 먼저 이 화면에서 가장 중요한 한 가지를 고르세요. 그다음 그 하나만 확실히 다르게 만들어요. 크기라면 눈으로 바로 차이가 보일 만큼 크게, 굵기라면 분명하게 굵게, 색이라면 강조색은 그 한 곳에만이요. 어설프게 조금 다른 것보다 확실히 다른 것 하나가 훨씬 정돈돼 보여요.

‍

‍

‍

‍

‍

‍

‍

원 하나가 화면 속 요소 하나예요. 왼쪽은 아홉 개가 모두 같은 크기라 어디서부터 봐야 할지 알 수 없어요. 18pt와 16pt 같은 애매한 차이도, 모든 걸 강조한 화면도 보는 사람에게는 결국 이렇게 보여요. 오른쪽은 가장 중요한 하나만 나머지보다 세 배 넘게 키웠어요. 다른 건 그대로인데, 눈이 어디서 출발해야 하는지 바로 알 수 있죠.

‍

‍

‍

‍

‍

‍

Chapter 3. 올리기 전, 10초 블러 테스트

‍

‍

흐릿하게 봐도 구조가 보인다면 잘 정리된 결과물이에요.

‍

‍

‍

‍

‍

‍

원칙을 알아도 막상 내가 만든 결과물에서는 문제가 잘 보이지 않아요. 만드는 동안 너무 오래 들여다봐서 눈이 익숙해졌기 때문이에요. 그래서 디자이너들은 작업을 마무리할 때 일부러 "처음 보는 사람의 눈"을 빌려요. 그중 가장 간단한 방법이 블러 테스트예요. 방법은 정말 간단해요. 완성한 화면을 띄워두고 눈을 가늘게 떠서 글자가 읽히지 않을 만큼 흐릿하게 보는 거예요. 휴대폰이라면 팔을 쭉 뻗어 멀리 두고 봐도 되고요. 디테일이 지워지면 남는 건 구조예요. 흐릿하게 봐도 구조가 보인다면 잘 정리된 결과물이에요.

‍

이때 확인할 건 두 가지예요. 가장 먼저 눈에 들어오는 게 내가 제일 보여주고 싶은 것인지, 그리고 정보가 몇 개의 덩어리로 나뉘어 보이는지요. 고객은 우리 결과물을 꼼꼼히 읽지 않아요. 피드를 넘기다 스치듯 보죠. 흐릿하게 본 그 첫인상이 사실상 고객이 보는 전부에 가까워요.

‍

흐릿하게 봤는데 어딘가 어색하다면, 이제 그 어색함에 이름을 붙일 차례예요. 덩어리가 나뉘지 않고 한 덩어리로 뭉쳐 보이면 근접을, 들쭉날쭉 산만해 보이면 정렬을, 먼저 보이는 게 없거나 엉뚱한 게 먼저 보이면 대비를 다시 살펴보세요. 반복은 한 장만으로는 알 수 없으니, 지난 게시물 몇 개 옆에 나란히 놓고 흐릿하게 봐요. 한 가게처럼 보이는지, 여러 가게가 섞여 보이는지요.

‍

이 점검이 중요한 이유가 하나 더 있어요. 결과물이 아쉬울 때 우리 손은 대개 무언가를 더하는 쪽으로 가요. 글씨를 키우고, 색을 늘리고, 장식을 얹죠. 그런데 모두가 커지면 대비가 사라지고, 빈자리를 채우면 덩어리 사이 간격이 사라져요. 디자이너의 미감은 더하기보다 정리에 가까워요. 그래서 아쉬울 때 먼저 던질 질문은 "뭘 더 넣지?"가 아니라 "네 가지 중 무엇이 무너졌지?"예요. 업로드 버튼을 누르기 전, 10초면 충분해요.

‍

‍

‍

‍

‍

‍

‍

Outro. 디자인 4대 원칙 다음에 필요한 것

‍

‍

네 가지 원칙은 어색함을 지워주지만, 브랜드다움은 브랜드의 기준에서 나와요.

‍

‍

‍

‍

‍

‍

오늘 이야기를 한 문단으로 정리하면 이래요.

디자이너의 미감은 많은 부분이 원칙을 지키는 습관에서 나와요. 관련 있는 것끼리 붙이고(근접), 모든 요소를 무언가에 맞추고(정렬), 정한 규칙을 끝까지 쓰고(반복), 다를 거면 확실히 다르게(대비). 그리고 올리기 전에는 흐릿하게 한 번 보고, 어색한 곳에 이름을 붙여 고치면 돼요.

‍

다만 꼭 드리고 싶은 말이 하나 있어요. 디자인 4대 원칙은 어색함을 없애주지만, 우리 브랜드다움까지 만들어주지는 않아요. 정돈된 결과물은 많아도, 보자마자 "그 브랜드"로 기억되는 결과물은 드물죠. 어떤 폰트와 색을 반복할지, 무엇을 확실히 다르게 보여줄지는 결국 우리 브랜드가 어떻게 보여야 하는지에 대한 기준에서 나와요. 그 기준을 세우는 방법은 비주얼 전략, 디자인보다 먼저 정해야 할 브랜드의 기준에서 이어서 볼 수 있어요. 그 기준이 필요한 순간이 오면, 그때는 디블러가 함께 고민할게요.

‍

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

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

‍

‍

‍

‍

‍

‍

FAQ

‍

‍

Q. 디자인 4대 원칙은 무엇인가요?

‍

‍

근접, 정렬, 반복, 대비예요. 로빈 윌리엄스가 《디자이너가 아닌 사람들을 위한 디자인북》에서 잘 된 디자인 대부분에 쓰이는 원칙으로 정리한 네 가지예요.

‍

Q. 디자인을 배운 적 없어도 4대 원칙을 적용할 수 있나요?

‍

네, 감각보다 점검의 문제에 가까워요. 요소를 놓을 때마다 무엇과 묶이는지, 무엇에 맞춰져 있는지 확인하는 습관부터 들이면 돼요.

‍

Q. 내 결과물이 왜 어색한지 빠르게 확인하는 방법이 있나요?

‍

블러 테스트를 해보세요. 화면을 흐릿하게 봤을 때 가장 먼저 보이는 것과 정보 덩어리가 의도대로인지 확인하면, 네 가지 원칙 중 무엇이 무너졌는지 찾기 쉬워요.

‍

‍

‍