방 정리좀 해! → 디자인 정리좀 해! 
어릴 때 어머니께 방 정리하라는 말 많이 듣지 않았었나요? 물론 저 동글이도 마찬가지로 많이 듣고 자랐었답니다. 정리라는 단어를 커서도 많이 듣게 될 줄은 몰랐지만요.
이 이야기도 동글의 응애 디자이너 시절의 얘기에요. 초창기 야심차게 웹포스터 디자인을 맡게 되었던 저는 주말을 투자해 그 시절 만족할 만한 시안을 뽑아내었고 당당하게 사수에게 보여드렸답니다.
이 이야기도 동글의 응애 디자이너 시절의 얘기에요. 초창기 야심차게 웹포스터 디자인을 맡게 되었던 저는 주말을 투자해 그 시절 만족할 만한 시안을 뽑아내었고 당당하게 사수에게 보여드렸답니다.내심 칭찬을 기대하며 기다렸던 저에게 들렸던 첫마디는 “정리만 하면 되겠네요” 였어요. 처음에는 그게 어떤 말인지 이해를 못하였고 나름 열심히 작업했기에 작업물이 미완성이라는 의미에 피드백에 상처를 받기도 하였답니다.
“무엇을 더 정리하면 될까요?” 라고 물어봤고 장장 1시간의 피드백을 꼼짝없이 들어야했답니다. 그 긴 시간에도 정리라는 말에 대해 이해를 못하여서, 재작업 후 정리 멘트를 몇번 정도 더듣고 포스터를 마무리했던거 같아요.
왜 자꾸 정리하라는 말을 들을까?
그 이후에도 정리하면 되겠네요 라는 말을 듣곤했답니다. 제 눈엔 완벽한거 같은 제 작업물이 정리가 안되어 있다니… 뭘더 어떻게 해야할지 몰라서 헤매었던 시간이 생각나네요 하지만 이제 다른 작업물을 보면 가끔 요것만 정리하면 되겠다라는 말을 저도 습관처럼 말하곤 한답니다.
하지만 이제 다른 작업물을 보면 가끔 요것만 정리하면 되겠다라는 말을 저도 습관처럼 말하곤 한답니다.왜 그런 말을 들었을까 되새겨 보면 이유는 간단했어요 정보의 우선순위와 시각 흐름이 명확하지 않기 때문이에요 디자인은 단순히 요소를 예쁘게 배치하는 것이 아니라
‘무엇을 먼저 보여줄지’, ‘어디에 눈이 머물러야 할지’를 설계하는 일이기도 하거든요. 정리가 안 됐다는 말은, 그 흐름이 어지럽거나 중심이 잡히지 않았다는 뜻이에요.
예를 들어, 텍스트가 많지만 강조가 없거나 비주얼과 텍스트가 시선을 두고 다투고 있거나 여백이 엉켜서 답답하게 느껴진다면 받는 사람 입장에선 ‘이게 어디부터 봐야 하지?’라는 혼란이 생기게 돼요. 그래서 “정리만 하면 되겠네요”라는 말은 결국 “좋은 요소는 다 있는데, 흐름만 다시 다듬으면 훨씬 좋아질 것 같아요”
라는 뜻이기도 해요.
1. 배치의 논리와 질서
한눈에 봤을 땐 “예쁘다” 싶은 디자인도, 차분히 뜯어보면 어딘가 답답하거나 산만하게 느껴질 때가 있어요.디자인을 보고 나서 "뭔가 어수선해 보인다"는 인상을 받을 때가 있어요. 각각의 요소는 다 멀쩡해 보이는데도, 전체적으로는 왜 이렇게 복잡하게 느껴질까
그 이유는 대부분 배치에 질서가 없기 때문 이에요. 특히 같은 주제를 다룬 다른 작업물과 나란히 놓고 비교해 보면 그 차이는 더 확실하게 드러나죠.
예를 들어보면, 어떤 포스터는 정보가 차곡차곡 쌓여 있어서 읽는 사람 입장에서 ‘제목 → 핵심 메시지 → 서브정보’ 흐름이 자연스럽게 이어져요. 반대로 어떤 디자인은 이미지와 텍스트가 제각각 위치해 있어서 “어디부터 봐야 하지?” 하는 혼란이 먼저 들기도 하고요. 이 차이를 만들어내는 게 바로 배치의 논리와 질서예요.
디자인 안의 모든 요소는 “왜 거기 있는가?”에 대한 이유를 가져야 해요. 텍스트든, 버튼이든, 이미지든, 단순히 비어 있는 공간에 끼워넣는 게 아니라 시선이 자연스럽게 움직일 수 있도록 구성되어야 하죠. 사람의 눈은 화면을 볼 때 자연스러운 ‘읽는 순서’가 있어요. 왼쪽에서 오른쪽, 위에서 아래로, 시각적으로 강한 요소에서 약한 요소로 그 흐름을 이해하고 배치한 디자인은, 아무 설명 없이도 내용을 이해할 수 있게 해줘요.“뭔가 꽉 차 보이면 잘 한 거 아닌가?” 싶었거든요.
디자인에서 정리는 보기 좋게 만드는 게 아니라, 보는 사람의 길을 만들어주는 일이에요. 요소들의 배치에는 보는 사람이 쉽게 읽고 이해할 수 있도록 ‘의도’가 담겨 있어야 하고, 그 의도는 질서 있게 이어져야 해요. 그래서 완성도 높은 디자인을 보면 늘 느껴요. “정리가 잘 된 작업물은, 말 없이도 길을 안내해준다”는 걸요.
2. 여백과 간격, 정렬의 중요성
디자인에서 ‘정리’가 잘 되어 있다는 말은, 결국 보는 사람의 눈이 편하다 는 말과 같아요. 그 차이를 만들어내는 핵심은 바로 여백, 간격, 정렬이 얼마나 명확하게 설계되어 있느냐 에 달려 있어요. 이 세 가지는 시각적 정보를 질서 있게 구성하는, 디자인의 가장 기본적인 구조 도구들이죠.
지금부터 각 개념에 대해 간단히 설명해줄게요.
여백: 정보를 구분하는 틈
여백은 요소와 요소 사이에 생기는 공간이자, 정보를 분리하는 시각적 경계선이에요. 정보 덩어리 사이에 충분한 여백이 있으면, 사용자는 그걸 다른 그룹으로 인식하고 자연스럽게 시선을 멈췄다가 다시 이동하게 돼요. 이게 바로 여백이 흐름을 조절하는 방식이에요. 여백은 “비워놓기”가 아니라, 읽기 쉽게 만들기 위한 전략적인 ‘설계’입니다.
사람은 화면을 볼 때 한 번에 모든 정보를 받아들이지 않아요. 먼저 눈에 들어오는 부분을 보고, 다음으로 넘어가며 전체를 ‘이해’해나가요. 이때 여백은 시각적 단서를 제공하는 신호 역할을 해요.
•
서로 간격이 멀리 떨어져 있는 요소는 ‘다른 덩어리’로 인식되고,
•
가까이 붙어 있는 요소는 ‘같은 그룹’으로 묶이게 되죠.
이걸 게슈탈트 이론의 ‘근접의 법칙’이라고도 해요. 즉, 여백은 단순히 비워 놓는 게 아니라 정보 간의 관계를 구분하고, 정보의 구조를 시각적으로 전달하는 장치예요. 예를 들어 제목과 본문 사이에 충분한 여백이 없다면, 사용자는 그 두 정보가 각각 다른 성격이라는 걸 인지하지 못할 수도 있어요.
반대로 여백이 잘 설정되어 있으면, 무엇이 더 중요한지, 어디부터 읽어야 하는지 의도하지 않아도 자연스럽게 전달돼요. 또 하나 중요한 건 ‘시선의 흐름 조절’이에요.
모든 공간을 꽉 채우면 사용자는 쉬지 못하고, 시선이 머물 공간도 없어져요. 여백은 정보를 나눠주고, 머무르게 하고, 다음 흐름으로 자연스럽게 이어주는 완충지대 역할을 해요. 디자인에서 말하는 ‘호흡’이라는 개념도 결국 여백에서 시작되는 거죠.
간격: 일관성을 만드는 거리
디자인에서 간격은 단순히 요소 사이의 거리 값이 아니에요. 오히려 간격은 디자인의 리듬과 규칙을 만드는 구조적인 언어예요. 사람은 반복되는 패턴에서 안정감을 느끼고, 일관된 간격 속에서 질서를 읽어요.
그래서 간격이 일정하면 디자인은 정돈되어 보이고, 간격이 들쑥날쑥하면 그만큼 디자인 전체가 어수선하게 느껴지게 돼요. 예를 들어 리스트 항목 사이의 간격이 어떤 건 좁고, 어떤 건 넓다면 사용자는 그 내용이 연결된 것인지, 다른 그룹인지 헷갈릴 수 있어요.
버튼, 이미지, 텍스트 등 반복적으로 나오는 요소들 사이의 간격은 정보의 흐름과 그룹화를 직관적으로 전달하는 기능을 하거든요. 간격은 또한 디자인의 리듬을 만드는 역할도 해요.
일정한 간격으로 나열된 정보는 읽는 사람의 눈에 ‘패턴’으로 인식되고, 그 안에서 시선은 덜 피로하게 움직일 수 있어요. 그 반대로, 간격이 매번 바뀌면 시선이 리듬을 잃고, 매번 멈춰서 다시 생각해야 하죠.
이런 시각적 피로는 디자인의 완성도와 신뢰감을 떨어뜨릴 수 있어요. 작은 차이처럼 보여도, 1~2픽셀의 간격 불균형이 작업물 전체를 어설프게 보이게 만드는 이유예요.
디자인을 잘 정리한다는 건, 간격을 감으로 맞추는 게 아니라 명확한 기준과 반복 가능한 규칙을 갖고 배치하는 것이에요. 정리하자면, 간격은 요소 간의 거리이자, 디자인에 질서감을 부여하는 눈에 보이지 않는 그리드에요. 간격이 정돈되면 전체가 정돈돼 보이고, 디자인은 그 자체로 ‘체계 있는 설계물’처럼 느껴지게 됩니다.
동글’s 실무 tip
동글도 사실 간격을 잘 못 맞추던 디자이너 중 한 사람이었답니다. (지금도 그렇지만요 ) 그러던 어느 날, 사수분께서 알려주신 ’박스를 활용한 간격 정리법’을 쓰기 시작했어요. UI 디자인에서 자주 쓰이는 간격 시스템 개념에서 가져온 방법인데요, 툴의 정렬 기능만으로는 부족할 때 특히 유용하답니다.
) 그러던 어느 날, 사수분께서 알려주신 ’박스를 활용한 간격 정리법’을 쓰기 시작했어요. UI 디자인에서 자주 쓰이는 간격 시스템 개념에서 가져온 방법인데요, 툴의 정렬 기능만으로는 부족할 때 특히 유용하답니다.
방법은 간단해요.정해진 간격만큼 박스를 만들어 놓고, 그 박스를 기준으로 요소들을 배치하는 거예요.눈대중 대신 박스라는 기준이 생기니까 훨씬 정밀하게 맞출 수 있어요. 만약 디자인 작업 중 “뭔가 간격이 애매하다” 싶을 때, 이 방법을 한 번 적용해보시는 걸 추천드려요.
세밀한 간격 조절이 필요할 땐 생각보다 큰 차이를 만들어주거든요!
정렬: 시선을 유도하는 기준선
디자인에서 정렬은 단순히 ‘형태을 맞추는 행위’가 아니에요. 정렬은 정보가 어디서부터 시작되는지 알려주는 기준선이에요. 사람은 무언가를 읽을 때, 먼저 시작점을 찾는 습관이 있어요.
그런데 정렬이 들쑥날쑥하면 매번 “어디부터 봐야 하지?” 하고 시선을 다시 정리해야 해서 생각보다 피로가 쌓여요. 예를 들어, 텍스트가 다 왼쪽 정렬인 줄 알았는데 하나만 살짝 안쪽으로 들어가 있다든가, 버튼과 텍스트가 기준선이 다르면 그 작은 차이도 보는 사람은 무의식적으로 ‘어색하다’고 느끼게 돼요.
반대로 정렬이 잘 되어 있으면, 시선이 부드럽게 흐르고, 정보 인지가 잘 되어요. 텍스트, 이미지, 버튼이 한 기준에 맞춰 정돈되어 있을 때사람은 별생각 없이도 자연스럽게 “이걸 먼저 보고, 다음엔 이걸 봐야겠구나” 하고 따라가게 돼요.
정렬은 또 정보끼리의 관계를 묶어주는 역할도 해요. 같은 선상에 놓인 것들은 서로 관련 있는 정보처럼 보이고, 기준선이 어긋나면 그 관계도 끊어진 것처럼 느껴지죠. 결국 정렬은 디자인을 정돈된 구조로 보여주고, 보는 사람에게 길을 안내해주는 도구예요. 기준이 딱 잡혀 있을수록 디자인은 더 깔끔하고 설득력 있게 느껴집니다.
동글’s 실무 tip
우리에겐 언제나 이격몬이 함께하고 있어요.디자인 작업을 오래 하다 보면 작업물이 눈에 익숙해져서,정렬이 살짝 틀어졌다는 걸 눈치채지 못하고 지나치는 경우가 많아요. 그럴 땐 꼭 Ctrl + R을 눌러 격자(눈금자) 기능을 켜두는 습관을 들이는게 좋아요.
정렬 오류를 예방하는 데 정말 도움이 돼요!
예시 이미지를 만들면서도 항상 동글은 격자를 켜놓는다…★
3. 정보의 계층 구조를 드러내는 법
디자인에서 정보를 잘 정리한다는 건, 단순히 나열하는 것이 아니라 어떤 게 먼저 보이고, 어떤 게 덜 보이게 할지를 정하는 일이에요. 이걸 흔히 ‘정보의 계층 구조’라고 불러요. 사람은 디자인을 볼 때 무의식적으로 중요도 순서에 따라 시선을 움직여요. 그래서 아무리 좋은 내용이라도 전부 같은 크기, 같은 색, 같은 위치에 있으면 무엇이 핵심이고, 어디부터 봐야 할지 헷갈리게 돼요.
예를 들어 제목, 부제, 본문, 버튼이 전부 비슷하게 보이면 시선이 흐르지 않고, 정보가 한 번에 들어오지 않아요. 반대로 제목은 크고 굵게, 부제는 중간 톤, 본문은 가볍게, 버튼은 또렷하게 구분되어 있다면 사용자는 자연스럽게 정보의 우선순위를 읽어내게 되죠.
이 계층 구조는 단지 폰트 크기만으로 만드는 게 아니에요. 색상, 굵기, 위치, 여백, 간격, 정렬까지 모두 다 계층 구조에 영향을 줘요. 각각의 요소가 맡은 역할과 중요도에 따라 시각적인 무게를 조절해줘야 해요. 정보의 계층이 잘 잡힌 디자인은 보는 사람에게 정보를 하나씩 ‘풀어주는’ 친절함이 있어요.
그리고 그 친절함이 결국, ‘정리 잘된 디자인’이라는 인상을 만들어줘요.
동글’s 실무 tip
계층 구조를 처음부터 잘 잡는 건 생각보다 어렵지만 몇 가지 기준만 미리 세워두면 훨씬 수월하게 정리할 수 있어요. 동글도 아래 방법들을 실무에서 자주 쓰고 있답니다!
① 텍스트 스타일을 3단계로 나눈다
제목 / 설명 / 세부 정보처럼 텍스트를 3단계로 구분해요. 각 단계에 맞는 폰트 크기, 굵기, 색상을 미리 정해두면 그때그때 감으로 조절하지 않아도 되고, 시안도 훨씬 정돈돼 보여요.
예)
•
제목: 24pt, Bold, 진한 컬러
•
설명: 16pt, Medium, 중간 톤
•
세부 정보: 12pt, Regular, 옅은 톤
② 계층 간 여백과 간격을 다르게 준다
단순히 텍스트 크기만 달라지는 게 아니라 여백과 간격에서도 구분이 필요해요. 상위 정보는 주변에 여유 있게 공간을 주고, 하위 정보일수록 더 가까이 붙여주는 방식이에요.
마무리하며
디자인에서 ‘정리한다’는 건, 보기 좋게 예쁘게 만든다는 말이 아니에요. 정보를 더 잘 읽히게 만들고, 더 쉽게 이해되도록 구성하는 과정이죠. 그 속엔 디자이너의 관점과 동시에 사용자를 향한 배려가 담겨 있어요.
작업이 미묘하게 어수선해 보인다면, 정보의 흐름이나 우선순위가 모호하게 느껴진다면 어쩌면 지금 필요한 건 새로운 그래픽 요소가 아니라 여백을 조금 더 비우고, 간격을 다듬고, 정렬을 한 번 더 확인해보는 일일지도 몰라요.
처음엔 어렵고 익숙하지 않더라도 이런 ‘정리의 눈’을 키우다 보면 어느새 여러분도 누군가에게 “요건 정리만 하면 되겠네요”라고 말할 날이 올 거예요.
그 말이 주는 의미, 이제는 알겠죠?
정리는 곧 디자인에서 기본기가 아닐까..?
정리의 개념이나 왜 중요한지는 수도 없이 듣고, 머리로는 정말 잘 알고 있지만 꼼꼼하지 못한 성격 때문인지 자꾸만 놓치는 경우가 많아요.
그게 잘 안 지켜졌을 때, 시안의 완성도가 눈에 띄게 떨어지는 걸 느낄 때마다 스스로 스트레스를 받고, 그래서 더더욱 의식적으로 지키려고 애쓰는 중이랍니다.
생각해보면 야구에서는 ‘스탭’, 그림에서는 ‘선 긋기’처럼 스포츠든 예술이든 어떤 분야든 간에 기본기가 제일 중요하다는 건 똑같더라고요.
디자인도 마찬가지예요. 변수가 많을수록, 흔들리지 않는 기준이 필요하니까요. 그 기준 중에서도 가장 기본 중의 기본은 바로 ‘정리’인 것 같아요. 타이포와 사진만으로 구성된 레퍼런스를 보면 화려한 그래픽이 없어도 보기만 해도 정갈하고 멋진 디자인이 완성되어 있는 경우가 많죠. 바로 이럴 때 느껴요. ‘정리’라는 기본기가 이렇게나 강력하구나.
이처럼 복잡한 디자인 스킬을 쓰지 않아도 정렬만 잘 맞추고, 간격을 정리하고, 글자 크기를 조절하는 것만으로도 시안이 ‘반쯤 완성돼 보이는 마법’이 생겨요. 물론, 가끔은 정렬 버튼 한 번 더 누르는 것도 귀찮고 가이드라인 긋는 것도 손이 잘 안 갈 때가 있어요.
그럴 때는 이렇게 생각해보는 건 어때요? “이 작은 부지런함이 더 완성도 높은 시안을 만들어줄 거야.”
오늘도 정리의 힘을 믿고, 한 번 더 딱! 정렬 버튼 눌러봐요.
우리, 분명 더 좋아질 거예요.