실용적인 디자인 꼼수, 7개
7 Practical Tips for Cheating at Design
*다음은 아래 글에 대한 번역입니다.
https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886
실용적인 디자인 꼼수, 7개
재능이 아닌 전략으로 디자인을 개선하기.
모든 웹 개발자들은 그들이 원하던 원하지 않든 간에, 비주얼 디자인에 관련된 결정을 내려야 하는 순간을 반드시 맞이하게 됩니다.
당신이 일하고 있는 회사에는 풀타임 디자이너가 없고, 동시에 서비스의 새로운 기능에 당장 UI를 적용해야 하는 상황일 수 있습니다. 또는 당신이 개인적으로 진행하고 있는 프로젝트를, 그저 Bootstrap을 사용한 사이트가 아닌 좀 더 근사한 모습으로 꾸미고 싶은 상황일 수도 있습니다.
두 손을 든 채로 "난 이걸 절대로 예쁘게 못 만들어, 왜냐면 난 예술가가 아니니까"라고 말하는 건 쉽습니다. 하지만 그래픽 디자인에 일가견이 없어도 충분히 결과물을 보기 좋게 만들 수 있는 꼼수들은 수없이 많습니다. 지금부터는 당장 디자인을 향상할 수 있는 7가지 꼼수를 소개합니다.
1. 글자 크기가 아닌 색과 굵기 활용하기
UI 속 텍스트를 꾸밀 때 자주 범하는 실수가 있습니다. 바로 글자 크기에 지나치게 의존하여 위계관계를 만드는 것입니다.
"이건 중요한 내용이지? 크게 쓰자"
"이건 덜 중요한 내용이네? 작게 쓰자"
오직 크기만으로 중요도를 구분 짓지 마세요.
색깔과 글자의 굵기만 잘 사용해도 충분히 좋은 결과를 만들 수 있습니다.
"이건 중요한 내용이지? 굵게 쓰자"
"이건 덜 중요한 내용이지? 좀 연한 색을 쓰자"
두 개에서 세 가지 색상을 사용하도록 노력해보세요.
어두운(그렇다고 검은색은 아닌) 색
제목과 같이 가장 주요한 내용에 쓰입니다.
회색
글이 발행된 날짜와 같이 덜 중요한 내용에 쓰입니다.
옅은 회색
맨 아래 쓰이는 카피라이트처럼 보조하는 성격이 강한 내용에 쓰입니다.
비슷한 맥락에서, 두 가지의 글자 굵기로 충분히 UI를 해결할 수 있습니다.
일반 글자
대부분의 텍스트에 사용합니다. (폰트에 따라 400-500 정도의 굵기)
굵은 글자
강조하고 싶은 텍스트에 사용합니다. (폰트에 따라 600-700 정도의 굵기)
굵기가 400 아래인 글자는 사용하지 않는 게 좋습니다.
큰 제목에서야 괜찮겠지만, 작은 텍스트에서는 읽기가 힘들어집니다. 만약 텍스트를 상대적으로 약하게 표현하고 싶다면, 얇은 글자를 쓰는 대신 연한 색 또는 작은 글자를 사용하는 게 좋습니다.
2. 색깔 배경에 회색 글자 사용하지 않기
흰색 배경에서 회색 글자를 사용하여 텍스트를 시각적으로 약화시키는 것은 좋은 방법입니다. 하지만 색깔이 있는 배경에서는 얘기가 좀 다릅니다.
왜냐하면, 우리가 흰색 배경에서 본 회색 글자는 사실 배경에 비교했을 때, 글자의 대비(Contrast)가 줄어든 모습이기 때문입니다.
즉, 단순히 회색 글자를 사용하는 것이 다가 아닙니다. 배경색과 비슷한 색을 글자에 사용하는 것이 위계질서를 만드는 데 있어 핵심이라고 할 수 있습니다.
다양한 색깔의 배경에서 글자의 대비를 줄이는 두 가지 방법을 소개합니다.
첫 번째, 흰색 글자의 투명도를 낮추기
흰색 글자를 사용하고, 그 투명도를 낮추세요. 이렇게 하면 배경은 글자에 자연스럽게 녹아들어, 배경과 동떨어지는 일 없이, 텍스트의 중요도를 자연스럽게 낮춰줄 것입니다.
두 번째, 배경색에서 색을 뽑아 사용하기
이 방법은 배경이 이미지 또는 패턴일 때 더욱 효과적입니다. 또는 첫 번째 방법을 사용했을 때, 좀 어색하거나 뿌옇게 보인다고 생각될 때 효과적이기도 합니다. 배경과 동일한 색조의 색을 고르시오. 그다음, 보기 괜찮은 상태를 찾을 때까지 채도와 밝기를 조절하세요.
3. 그림자 자연스럽게 사용하기
널찍하고 뿌옇고, 그리고 퍼짐(Spread) 효과로 인해 그림자가 박스 형태로 보이게 하지 마세요. 대신에 하단 부분에 일직선으로 된 그림자를 사용하세요.
이런 그림자는 우리가 현실에서 볼 수 있는, 그러니까 빛이 위에서 내려오고 아래에 그림자가 생기는, 그런 그림자의 모습을 하고 있기에 더욱 자연스럽습니다.
이는 안쪽으로 생기는 그림자에도 동일하게 적용할 수 있습니다. 그리고 이런 그림자를 입력 필드에 사용해본 적이 있으실 겁니다. 그림자에 대해 궁금하시다면, Material Design 가이드가 좋은 길잡이가 될 겁니다.
4. 구분선은 최소한으로 사용하기
두 요소 사이에 구분이 필요한 경우가 있습니다. 이때, 곧바로 구분선을 사용하지 마세요.
물론 구분선은 요소와 요소 사이를 구분 짓는 훌륭한 수단입니다. 하지만 그것만이 유일한 방법은 아닙니다. 뿐만 아니라 구분선이 너무 많으면 전체적으로 복잡하고 난잡해 보일 수 있습니다.
이제 구분선이 필요하다고 느낄 때, 구분선 대신 다음과 같은 방법을 사용해보세요.
첫 번째, 박스 그림자를 사용하기
박스 그림자는 구분선이 그러하듯, 요소의 경계를 잘 표현해냅니다. 즉, 박스 그림자는 구분선과 동일한 목표를 수행해낼 뿐만 아니라, 구분 선보다 더 은은하고 시각적으로도 거슬림이 없습니다.
두 번째, 두 가지 다른 색의 배경 사용하기
서로 인접한 요소들 간에 미묘하게 다른 배경색을 사용함으로써 구분선을 대신할 수 있습니다. 이미 다른 색의 배경을 사용 중이라면, 그 위에 사용된 구분선들을 없애보세요. 아마 필요 없을 겁니다.
세 번째, 여분의 여백 사용하기
요소 사이에 분리된 공간을 늘리는 것만큼 요소 사이의 구분을 확실히 하는 방법이 또 있을까요? 요소와 요소 사이의 공간을 더욱 벌어지게 하면, 새로운 UI의 추가 없이도 충분히 요소와 요소 사이를 구분 지을 수 있습니다.
5. 사소한 아이콘을 지나치게 부풀리지 않기
커다란 아이콘을 사용해 디자인할 일이 있을 때 (예를 들어, 랜딩페이지에 들어가는 “특징 및 기능”부분), 우리는 Font Awesome이나 Zondicons와 같은 사이트에서 구한 무료 아이콘 세트를 곧바로 만족스러운 크기가 될 때까지 크기를 키워 사용하곤 합니다. 어차피 벡터 이미지이기 때문에 이렇게 크기를 키워서 사용하는 건 문제가 없습니다, 그렇죠?
네, 벡터 이미지는 크기를 키워도 그 퀄리티를 잃지 않는다는 건 사실입니다.
하지만 본래 사이즈보다 3배 또는 4배가량 크게 확대되어 16~24px 크기로 사용된 아이콘은 프로페셔널해 보이지 않습니다. 디테일은 부족해 보이며, 비율이 엉망인 상태로 퍼져 보입니다.
가진 것이 작은 아이콘뿐이라면, 아이콘 안에 다른 모양과 색을 추가하여 꾸며보세요.
이렇게 하면 원래 아이콘이 가지고 있는 사이즈에 충실할 수 있으며, 동시에 보다 넓은 영역을 채울 수 있습니다. 여유가 된다면, Heroicons 또는 Iconic처럼, 프리미엄 아이콘 세트를 사용하는 것도 방법입니다.
6. 밋밋한 디자인의 경계에 색깔 불어넣기
당신은 그래픽 디자이너가 아닙니다. 그런데 디자이너들이 아름다운 사진과 형형색색의 일러스트를 사용하여 만들어낸 매력적인 UI 요소들을 과연 무슨 수로 만들어낼 수 있을까요?
한 가지 큰 변화를 만들어 낼 수 있는 꼼수가 있습니다.
밋밋해 보이는 디자인의 경계면에 눈에 잘 띄는 색을 사용해보세요.
예를 들어, 주의 메시지 옆에 사용할 수 있습니다.
아니면, 활성화된 내비게이션 메뉴를 강조할 수도 있습니다.
또는, 레이아웃의 위쪽을 전부 사용할 수도 있습니다.
UI에 색깔이 채워진 사각형을 추가하는 것은 아무런 디자인 재능을 필요로 하지 않습니다. 뿐만 아니라 이 방법은 디자인을 좀 더 “디자인된”상태로 보이게끔 하는데 큰 도움이 됩니다.
색깔을 고르기 어려우신가요? Dribble의 색 검색처럼, 정해진 색 조합에서 골라보세요. 일반적인 방법을 통해 색을 고르는데서 발생할 수 있는 색의 범람을 피하는데 도움이 될 것입니다.
7. 모든 버튼에 색이 필요한 건 아니다
화면에서 사용자가 취할 수 있는 액션이 여러 개일 때, 오로지 정석대로 틀에 박힌 방법으로 이 액션들을 디자인하는 실수에 빠지기 쉽습니다.
Bootstrap과 같은 프레임워크는 여러분에게 틀에 박힌 스타일을 제공하면서, 새로운 버튼을 추가할 때마다 이 스타일 안에서 버튼을 만들도록 부추깁니다.
“긍정적인 액션? 그렇다면 초록색이지”
“삭제? 당연히 빨간색이지”
이런 정석은 버튼 디자인에 정말 중요한 부분입니다.
하지만 더 중요한 내용이 종종 잊히고 있습니다.
바로 우선순위입니다.
페이지에 있는 모든 액션들은, 중요도에 따라 나뉜 피라미드의 특정 부분을 차지하고 있습니다. 대부분의 페이지는 한 가지 가장 중요한 액션, 두 가지 정도의 두 번째로 중요한 액션, 그리고 좀처럼 보기 힘든 세 번째로 중요한 액션으로 구성되어 있습니다.
이러한 액션들을 디자인할 때, 우선순위의 어떤 부분에 액션들을 배치할지 결정하는 것은 매우 중요합니다.
1순위 액션들은 명확해야 합니다
단색이며 대비가 큰 색이 효과적입니다.
2순위 액션들은 명확하지만 돋보여서는 안 됩니다
선으로 돼있거나 대비가 적은 색이 좋은 선택지입니다.
3순위 액션들은 찾을 수 있지만, 거슬려서는 안 됩니다
마치 링크처럼 만드는 것이 좋은 접근법입니다.
“삭제처럼 파괴를 담당하는 액션들은 전부 다 빨간색으로 해야 하지 않나요?”
꼭 그럴 필요는 없습니다. 파괴를 담당하는 액션들이 페이지에서 1순위 액션이 아니라면, 2순위 또는 3순위에 해당하는 버튼 스타일을 적용하는 것이 좋습니다.
크고, 빨갛고, 굵은 네거티브 액션 버튼을 저장해 두세요. 그리고 그 버튼이 실제로 1순위 액션으로 자리 잡은 인터페이스에 사용하세요. 아래 비활성화 확인 페이지처럼요.
