(번역) 디자인에서 쓸만한 일곱 가지 실용적인 편법들

원문 : https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886

디자인에서 쓸만한 일곱 가지 실용적인 편법들

재능 대신 전략으로 디자인 향상시키기

 모든 웹 개발자들은 싫든 좋든간에 필연적으로 시각적인 디자인 결정을 내릴 필요가 있는 상황에 처하게 됩니다. 

  아마 당신이 일하고 있는 회사는 정규직 디자이너가 없을 수 있고 스스로 새로운 기능을 위한 UI를 구현할 필요가 있을 것입니다. 또는 사이드   프로젝트에 참여하고 있고 다른 부트스트랩 사이트들보다 좋아보이게 만들고 싶을 것입니다.

  "나는 이렇게 좋아보이는 디자인을 절대 만들 수 없을 것입니다. 나는 예술가가 아니니까!" 라고 손들어 말하기 쉬우나, 그래픽 디자인에 대한 배경지식을 요구하지 않으면서 작업물의 수준을 높이는데 사용 가능한 여러가지 속임수들이 있다고 알려져 있습니다.

  여기에 당신의 디자인을 향상시키는데 사용 가능한 일곱 가지 간단한 아이디어들이 있습니다.

1. 계층 구조를 만드는 데에 크기 대신 색과 굵기를 사용하라.

  UI 텍스트를 꾸밀 때의 흔한 실수는 계층 구조를 조정하는 데에 폰트 크기에 너무 많이 의존한다는 것입니다.

  "이 텍스트는 중요한가? 더 크게 만들자."

  "이 텍스트는 부차적인가? 더 작게 만들자."

  폰트 크기만으로 모든 것을 처리하는 대신, 색이나 폰트 굵기를 활용해 보세요.

  "이 텍스트는 중요한가? 굵기를 더 굵게 하자."

  "이 텍스트는 부차적인가? 더 옅은 색을 사용하자."

  두 가지 또는 세 가지 색상을 사용하는 것을 고수하세요.

   - 어두운(검정색이 아님) 색은 주요한 컨텐츠(기사의 헤드라인 같은)에 사용

   - 부차적인 컨텐츠(기사가 발행된 날짜 같은)에는 회색을 사용

   - 보조적인 컨텐츠(아래쪽의 저작권 표시 같은)에는 더 옅은 회색을 사용

  비슷하게, 보통 두 가지의 폰트 굵기는 UI를 작업하는데 충분합니다.

   - 대부분의 텍스트에는 보통 굵기 (폰트에 따라 400이나 500)

   - 강조하고 싶은 텍스트에는 더 두꺼운 굵기 (600이나 700)

  UI 작업에 400 미만의 굵기를 사용하는 것은 지양하세요. 그것들은 큰 제목에 사용될수도 있겠으나 작은 크기일 때 읽기 너무 힘듭니다. 몇몇 텍스트의 강조 정도를 낮추기 위해 더 가는 굵기를 사용하고 싶다면, 대신에 더 옅은 색이나 더 작은 폰트 크기를 사용하세요.

"""

 계층 구조를 폰트 크기를 통해 직접적으로 표현하려 하지 말고, 색의 대비(짙은 색과 회색)와 굵기를 통해 표현해 보자.

 '짙은 색'은 검정(#000000)이 아니다.

 두세가지의 색상과 두가지의 굵기면 계층 구조를 디자인하는 데 충분하다!

"""

2. 색칠된 배경에 회색 텍스트를 사용하지 마라.

 텍스트를 더 옅은 회색으로 만드는 것은 흰색 배경에서 강조 정도를 낮추기 위한 훌륭한 방법이지만, 색이 있는 배경에서는 그렇게 좋은 방법은 아닙니다. 

  이는 우리가 실제로 흰색에서 회색을 보는 것은 '감소된 대조'의 효과를 갖기 때문입니다.

  텍스트를 옅은 회색이 아닌 배경색과 가깝게 만드는 것은 정말로 계층 구조를 만드는 데 도움을 줍니다.

  배경색이 있는 배경에서 작업할 때 대조를 줄일 수 있는 두 가지 방법이 있습니다.

1. 흰색 텍스트의 불투명도를 낮추어라.

  흰색 텍스트를 사용하고 불투명도를 낮추세요. 이렇게 하면 배경색이 약한 흐려지면서 배경색과 충돌하지 않는 방식으로 텍스트의 강조 정도를 낮출 수 있습니다.

2. 배경색을 기반으로 한 색상을 직접 선택하라.

 이는 배경에 이미지나 패턴이 있거나, 불투명도를 줄이는 것이 텍스트를 어지럽게 하거나 씻겨 나간 것처럼 만들 때 불투명도를 낮추는 것보다 좋은 효과를 가져옵니다.

  배경과 동일한 색조의 색상을 선택하고 당신이 보기 좋을 때까지 채도와 밝기를 조정하세요.

"""

 흰색 배경에서는 짙은 색과 회색의 조합으로도 괜찮은 디자인을 만들 수 있지만, 색이 들어간 배경에서는 흰색에 불투명도를 조정해보자.

 iOS에서는 alpha값이나, IB에서의 Color 선택 대화상자에서 Opacity를 직접 선택하여 변경할 수 있다.

 배경에 단색이 아닌 이미지나 패턴이 있다면 배경색을 기반으로 적절한 색을 선택하자.

"""

3. 그림자를 상쇄하라.

  박스 그림자를 더 주목하기 쉽게 하기 위해 커다란 흐림 효과 및 퍼짐 값을 사용하는 대신에, 수직 오프셋을 추가하세요.

  이는 실제 세계에서 보는 것처럼 위에서 비추어 내리는 빛인 것 같은 효과를 내기 대문에 더 자연스럽게 보입니다.

  이것은 입력 폼 같은 부분에서 그림자를 삽입할 때 적용됩니다.

  그림자 디자인에 대해 더 많은 것을 배우고 싶다면, 머터리얼 디자인 가이드라인은 훌륭한 입문서가 될 것입니다.

"""

 상하좌우에 그림자를 넣기보다는 햇빛에 의해 그림자가 지는 것과 비슷하게 디자인하자.

"""

4. 경계선을 최소화하라.

 두 요소 사이의 분리를 만들고 싶다면, 즉시 경계선을 만드는 데 접근하는 것에 지양하려고 하세요.

  경계선이 두 요소 간 구별을 위한 훌륭한 방법인 반면에, 유일한 방법도 아니며, 그것들을 너무 많이 사용하는 것은 디자인을 어수선하게 느끼게 할 수 있습니다.

  다음에 경계선을 사용하려는 당신을 보게 된다면, 이들 중 하나의 아이디어를 대신 사용해 보세요.

1. 박스 그림자를 사용하라.

  박스 그림자는 경계선과 같은 요소의 윤곽을 그리는 데 큰 역할을 하지만, 더 교묘하며, 주의를 산만하게 하지 않으면서 같은 목표를 달성할 수 있습니다.

2. 두 가지 다른 배경색을 사용하라.

 인접한 요소에 약간 다른 배경색을 적용하는 것은 종종 그것들 사이의 차이를 만드는데 필요한 모든 것이 됩니다. 이미 경계선에 더하여 다른 배경색을 사용하고 있다면, 경계선을 없애보세요. 그렇게 할 필요가 없을 것입니다.

3. 여분의 공간을 삽입하라.

 단순히 격차를 늘리는 것보다 요소들 사이에 분리를 만들어 내는 더 좋은 방법은 무엇인가요? 더 많은 간격을 두는 것은 새로운 UI를 도입할 필요가 없이 요소 그룹 사이의 차이를 만드는 훌륭한 방법입니다.

"""

 요소의 분리를 나타낼 때 선과 같은 명시적인 UI를 사용하기보다는 다른 처리를 사용해보자.

 요소의 윤곽에 그림자를 넣어 자연스럽게 요소 간 분리를 만들 수 있다.

 약간 다른 배경색을 사용하는 것도 좋은 방법이다.

 요소의 집합 간 분리를 만들 때는 집합 간 공간을 조금 크게 두는 것으로 자연스럽게 분리시킬 수 있다.

"""

5. 작다고 여겨지는 아이콘을 날려버리지 마라.

 큰 아이콘을 사용할 수 있는 무언가(랜딩 페이지의 '특징' 섹션 같은)를 디자인한다면, 본능적으로 Font Awesome과 Zondicons와 같은 무료 아이콘 집합을 선택하고 당신의 필요에 맞을 때까지 크기를 늘려갈 것입니다.

  그것들은 벡터 이미지일 뿐이고, 그러므로 크기를 늘렸을 때 그 품질에 문제가 생기진 않습니다. 맞나요?

  벡터 이미지가 크기를 늘렸을 때 품질에서 다운그레이드가 일어나지 않는 것은 사실인 반면에, 16~24 픽셀로 그려진 아이콘들은 세 배, 네 배로 그 사이즈를 늘렸을 때 절대 프로답지 않아 보일 것입니다.

  당신이 가지고 있는 것이 작은 아이콘이 전부라면, 안에 또 다른 모양을 넣고 배경색에 모양을 주는 것을 시도해 보세요.

  이는 실제 아이콘을 의도하는 사이즈에 가깝게 하면서 더 커진 공간을 채우게 할 것입니다.

  예산이 있다면, 물론 Heroicons나 Iconic과 같은 더 큰 사이즈에서 사용하기 위해 디자인된 프리미엄 아이콘 집합을 사용할 수 있을 것입니다.

"""

 무료 아이콘은 아마 작은 크기에 적합하게 디자인되어 있을 것이고, 이를 우리의 필요에 맞게 단순히 크게 만드는 것은 좋지 않다.

 작은 크기의 아이콘에서의 디자인과 큰 크기의 아이콘에서의 디자인은 서로 다를 수 있고, 이는 단순히 크기를 크게 하는 것으로는 충족되지 않기 때문이다.

 차라리 작은 아이콘은 그대로 두고, 큰 동그라미 안에 아이콘을 넣는 등의 시도를 하는 것이 좋다.

"""

6. 부드러운 디자인에 색상을 추가하기 위해 액센트 경계선을 사용하라.

 당신이 그래픽 디자이너가 아니라면, 아름다운 사진이나 화려한 삽화에서 얻은 시각적 감각을 UI에 어떻게 더할 수 있을까요?

  큰 차이를 만들 수 있는 한 가지 간단한 속임수는 약간 단조로운 느낌을 주는 당신의 인터페이스의 부분에 화려한 액센트 경계선을 더하는 것입니다.

  예를 들어, 알림 메세지의 사이드나, 활성화된 내비게이션 아이템에 하이라이트 효과를 주거나, 심지어 전체 레이아웃의 위쪽에 이 효과를 주는 것을 생각해볼 수 있습니다.

  당신의 UI에 색칠된 직사각형을 더하는 것은 어떠한 그래픽 디자인 재능을 요구하지 않으며, 당신의 사이트를 좀 더 디자인된 것으로 느끼게 하는 데 큰 도움을 줄 수 있습니다.

"""

 심심해 보이는 디자인에 강렬한 인상을 주기 위한 직사각형을 추가할 수 있다.

"""

7. 모든 버튼이 배경색을 필요로 하는 것은 아니다.

 한 페이지에서 사용자가 행할 수 있는 여러 가지 액션이 있을 때, 순수하게 의미론에 기초하여 그러한 액션을 디자인하는 덫에 빠지기 쉽습니다.

  부트스트랩과 같은 프레임워크는 새로운 버튼을 추가할 때마다 선택할 수 있는 의미적 스타일 메뉴를 제공하여 이와 같은 것을 장려합니다.

  "긍정적 액션인가? 초록색으로 만들자."

  "이것은 데이터를 삭제하는 것인가? 붉게 만들자."

  의미론은 버튼 디자인에서 중요한 부분이지만, 흔히 잊어버릴 수 있는 더 중요한 측면이 있는데, 그것은 계층 구조이다.

  페이지의 모든 액션은 중요도의 피라미드에 있다고 할 수 있다. 대부분의 페이지들은 하나의 진실된 주요 액션, 몇몇 덜 중요한 부차적인 액션, 그리고 좀처럼 사용되지 않은 몇 개의 보조적인 액션을 가지고 있다.

  이러한 액션들을 디자인할 때, 그것들의 위치를 계층 구조에서 상호작용하게 하는 것이 중요하다.

   - 주요한 액션은 명백해야 합니다. 견고하고, 높은 대조의 배경색을 사용하는 것이 좋습니다.

   - 부차적인 액션들은 명백하되 주요하진 않아야 합니다. 윤곽선 스타일이나 더 낮은 대조의 배경색을 사용하는 것이 좋습니다..

   - 보조적인 액션들은 발견 가능하지만 눈에 잘 띄지 않아야 합니다. 일반적으로 링크처럼 이러한 액션들 꾸미는 것이 최선의 접근법입니다.

  "파괴적인 액션에는 어떻게? 그것들은 항상 붉은색이어야 하지 않나?"

  꼭 그렇지는 않습니다! 파괴적인 액션이 해당 페이지의 주요 액션이 아니라면, 부차적 또는 보조적 버튼 처리를 하는 것이 좋아 보입니다.

  부정적인 액션이 확인 대화 상자와 같은 곳에서 인터페이스의 주요한 액션일 때는 크고, 붉고, 볼드체의 스타일로 꾸미세요.

"""

 페이지의 주요한 기능일수록 뚜렷하게 보이고 많은 꾸밈 효과가 들어갈 수 있으며, 부차적인 기능일수록 수수한 디자인을 취해야 한다.

 예를 들어 1차적인 기능에는 윤곽선, 배경색, 볼드체 등이 들어갈 수 있겠으며, 2차적인 기능에는 윤곽선만 들어갈 수 있겠고, 3차적인 기능에는 단순히 밑줄 효과만 있을 수 있겠다.

 취소, 삭제와 같은 액션이 항상 붉은 색으로 표시될 필요는 없다. 이것도 위와 같은 맥락을 취하며, 페이지의 주요 기능이 취소, 삭제라면 여러 효과가 들어갈 수 있겠으나 그렇지 않다면 반드시 붉은 색으로 표시될 필요는 없다.

"""