다른 서비스
위시켓 잡스
디자인
3.5K본 콘텐츠는 위시켓이 선정해 번역한 해외 콘텐츠입니다. 디지털 매체 미디엄(Medium)을 통해 UX Collective에서 발표한 글입니다. 작가인 Yuan Qing Lim은 디자인 툴, UI 엔지니어링, JavaScript, Figma에 대한 글을 쓰고 있으며, Shopify의 디자인을 맡고 있습니다. 본문은 UI 디자인에 여백을 활용하는 8가지 팁을 소개하고 있습니다. 괜찮은 팁은 바로 적용해보아도 좋겠죠?
훌륭한 UI 디자인이라는 것은 수많은 디자인 요소들부터 페이지 전체에 이르기까지, 그리고 아주 작은 부분에서부터 커다란 부분에 이르기까지 인터페이스의 모든 부분에서 여백을 신중하게 잘 활용하는 것입니다. 여백을 잘 활용하면 조화롭고 읽기 쉬우며, 무엇보다도 사용하기 쉽고 편리한 인터페이스가 만들어지게 됩니다.
UI에서는 각 구성요소들이 서로 얼마나 여백을 두고 있는지에 따라서, 각각의 요소들이 서로 어떤 관계에 있는지 나타납니다. 이를 근접성의 법칙이라고 하는데, 이는 다음과 같이 요약할 수 있습니다.
이런 기본적인 원칙들을 잘 따른다면, 사용자들이 UI의 전체적인 구조와 체계를 쉽게 받아들일 수 있습니다.
디자인이 숨을 쉴 수 있게 해야 합니다. 인터페이스를 사용하기 쉽게 만드는 가장 좋은 방법은 각각의 요소들 사이에 충분한 여백을 주는 것입니다.
물론 예외도 있기는 합니다. (이에 대해서는 마지막 팁을 보시기 바랍니다.) 하지만 대부분의 UI에서는 일반적으로 여백을 충분하게 주는 것이 너무 적은 것보다는 훨씬 더 좋습니다.
페이지 내에 정보의 양을 줄이고 디자인적인 요소들도 적게 사용하면 명확성과 집중력을 높이는데 도움이 됩니다. 따라서 해당 페이지의 정보와 디자인적인 요소들에 대해서 더욱 집중하게 만들 수 있습니다.
여백은 또한 텍스트를 강조하기 위한 효과적인 방법이 될 수도 있습니다. 즉, 여백은 텍스트와 조합해서 사용될 수 있는데, 텍스트의 크기를 키우거나, 텍스트의 색상, 대/소문자, 두께 등을 변경할 때 여백을 함께 활용하면 좋습니다. 그리고 때로는 텍스트를 대체할 수도 있습니다.
·
·
·
실제 예를 들어 보자면, 여백으로 둘러싸인 이 문장에 시선이 쏠린다는 것을 알 수 있습니다.
·
·
·
사람들의 시선을 끌 수 있는 방법은 구성요소의 크기를 키우거나 밝게 만드는 것만 있는 것이 아닙니다. 모든 것들이 크고 밝아서 전부 중요하게 보인다면, 실제로는 아무것도 중요해 보이지 않을 것입니다.
서로 인접한 요소들 사이의 거리를 측정하는 방법은 다음과 같은 두 가지 중 하나입니다.
“테두리 상자(bounding box)” 사이의 거리를 측정한다.
이 방식은 웹페이지에 대한 문서 객체모델(Document Object Model)과 같은 대부분의 UI 렌더링 엔진(rendering engine, 웹 페이지의 정보를 시각적인 표현으로 변환해주는 기능)에서 거리를 측정하는 방법입니다. 하지만 이 방법으로 측정된 수치는 정확한 값은 아닌데, 각각의 테두리 상자의 위쪽과 아래쪽에 “계산에 포함되지 않은” 여분의 공간이 존재하기 때문입니다.
대문자의 높낮이로 거리를 측정한다.
이 방법이 좀 더 정확하기는 하지만, 실제 구현하기는 상당히 어려울 수 있습니다.
두 가지 방식 모두 나름의 장점이 있기는 하지만, 각자 절충해야 하는 부분들도 있습니다. 여기에서 중요한 것은 각 요소들 사이의 거리를 설정할 때는 디자인 단계와 구현 단계에서 모두 동일한 기준을 사용해야 한다는 것입니다. 그렇게 해야만 여러분이 디자인 한 것이 정확하게 코드로 변환될 수 있습니다.
띄어쓰기 시스템이란 디자인에서 사용할 수 있는 다양한 간격을 지정해 두고, 상황에 맞게 활용하는 것을 말합니다. 이러한 띄어쓰기 시스템을 잘 활용하면, UI를 일관성 있고 조화롭게 보이게 만드는 데 도움이 됩니다.
컬러 팔레트(color palette, 색상표)에서 색상을 선택하는 것처럼, 띄어쓰기 시스템으로 여백을 지정하게 됩니다. 컬러 팔레트를 이용하는 것과 마찬가지로, 띄어쓰기 시스템을 활용하면 일정한 규칙을 가진 범위 내에서만 선택을 하게 됩니다. 이러한 띄어쓰기 시스템을 갖추어 놓으면, UI 디자인을 하는 과정에서 몇 가지의 선택권 내에서만 결정을 내리면 됩니다. 이렇게 함으로써 반복적인 작업들을 좀 더 빠르고 체계적으로 수행할 수 있습니다.
숫자로는 다르지만 눈으로 보기에는 별 차이가 없는 값을 사용하면, 사용자가 그런 요소들 사이의 논리적 체계를 파악하기가 어려워질 수 있습니다. 서로 다른 것은 차이가 나타나야 합니다. 만약 두 개의 간격이 서로 다른 것을 의미한다면, 그 둘 사이에 서로 충분히 차이가 나는 값을 설정해서 실제로 눈에 확실하게 구분되도록 해야 합니다.
띄어쓰기 시스템을 만들 때는 여러 간격 수치들이 서로 분명하게 시각적으로 구분될 수 있도록 충분히 “넓은” 차이를 갖고 있어야 합니다.
위의 이미지는 간격의 값이 작은 것에서부터 커질수록 그 차이가 확연히 넓어지게 만든 하나의 예시입니다.
라인 높이를 일정한 비율로 유지하면서 텍스트의 크기를 늘리면 각각의 텍스트 라인 사이의 여백이 너무 커지지 않게 만들 수 있습니다. 텍스트의 크기에 따라서 다르긴 하지만, 일반적으로 제목의 라인 높이는 본문 텍스트의 라인 높이보다는 더 적게 설정해야 합니다.
인터페이스에 정보의 양이 많아지면, 사용성의 측면에서는 효과가 더욱 좋을 수도 있습니다. 정보의 양이 많다고 해서 그런 인터페이스가 반드시 어수선하거나 산만하다고 느낄 필요는 없습니다.
마지막으로 여백을 효과적으로 배울 수 있는 방법은 “걸작을 모방하는 것”입니다. (사실, 이것은 UI 디자인에서 일반적으로 활용할 수 있는 방법입니다.) 여러분이 아주 마음에 드는 인터페이스를 가진 앱이나 웹사이트를 발견했다면, 그중 한 두 개를 골라서 그것을 아예 처음부터 똑같이 따라서 만들어 보세요. 그 과정에서 여러분은 그 작품의 디자인과 관련하여 작지만 수많은 결정들이 내려져 있다는 것을 알게 될 것입니다. 그리고 흥미로운 패턴도 발견하게 될 것이며, 위에서 설명한 팁들이 실제로 그런 뛰어난 UI에 어떻게 적용되어 있는지도 파악할 수 있을 것입니다.
어떤 인터페이스가 “좋아 보이는” 데에는 몇 가지 이유들이 있습니다. 수많은 경험과 훈련을 통해서, 여러분은 자신의 디자인에서 여백을 어떻게 활용하는지에 대해 자신만의 시각적인 감각과 직관을 기를 수 있습니다. 그러면 사용자들도 여러분에게 고마움을 느끼게 될 것입니다.
같은 분야를 다룬 글들을 권해드려요.
요즘 인기있는 이야기들을 권해드려요.
만일 여러분이 디자인 업무를 협업할 때 다른 사전 준비를 제치고 디자인 툴에 곧바로 뛰어든다면 이는 결국 여러분의 창의성을 빼앗아 갈 것입니다. 그 대표적인 예로 피그마와 스케치가 있습니다. 그들은 제품에 라이브러리를 탑재했고, 덕분에 디자이너는 복사/붙여 넣기를 할 필요가 없어졌으며, 각종 컴포넌트를 최신 버전으로 확보할 수 있게 됐습니다. 기업의 디자인 팀은 하나의 파일에서 작업하면서 많은 파일의 일관성을 유지할 수 있게 되었습니다. 통합되거나 내장된 기능으로 프로토타입 작업은 더 쉬워졌습니다. 그러나 이러한 강력한 기능들은 디자이너들을 중력과도 같이 끌어당겨 그들을 이러한 도구에서만 작업하도록 만들었었습니다. 이는 큰 문제입니다.
개발자로 살다 보면 한 번쯤 ‘페어 프로그래밍’을 하게 된다. 페어 프로그래밍은 두 사람이 파트너가 되어 함께 의논하면서 코드를 작성하는 활동이다. 계속 대화하는 것도 쉽지 않은 일인데 말하면서 코드 작성까지 해야 하는 건 분명 체력적, 정신적으로 에너지가 많이 쓰이는 일이다. 그런데 페어 프로그래밍에 대해 검색하면 장점을 얘기하는 사람들이 정말 많다. 실제로 만나본 개발자 중에서도 페어 프로그래밍을 싫다고 하는 사람을 보지 못했다. 오히려, 어렵지만 꼭 해야 하는 일이라고 다들 말했다. 도대체 페어 프로그래밍이 무엇이길래, 그리고 어떤 장점이 있기에 좋아하는 걸까?
일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.
