이 글은 Refactoring UI의 포스트 『7 Practical Tips for Cheating at Design』를 번역 및 의역한 것임을 밝힙니다.
대부분의 웹 개발자들은 그들이 좋든 싫든 필연적으로 디자인적인 결정을 내려야 할 상황에 마주치곤 합니다. 아마도 여러분이 일하고 있는 회사에서는 전문적인 디자이너가 없어서, 여러분이 직접 새로운 기능을 위한 UI를 만들어내야 할 수도 있습니다. 또는 여러분의 개인 프로젝트를 부트스트랩을 이용해 만든 평범한 사이트보다 더 근사하게 만들고 싶을 수도 있습니다.
이러한 디자인 작업에 익숙하지 않은 웹 개발자들은 “이것보다 더 근사하게 만들지는 못하겠어요. 전 예술가가 아니에요!” 라고 쉽게 말하곤 합니다. 하지만 디자인에 대한 배경지식 필요 없이 여러분의 결과물을 근사하게 만들어 줄 수 있는 수 많은 팁들이 있답니다.
여기에 여러분의 디자인 실력을 향상시켜 줄 7가지의 간단한 팁들을 소개합니다.
폰트 사이즈보다 컬러과 두께를 이용해 강조하기
UI에서 텍스트를 꾸밀 때 흔히 저지르는 실수는 강조가 필요한 부분을 폰트 사이즈에 의존하는 것입니다.
- “중요한 내용이야? 그럼 크게 만들자.”
- “덜 중요한 내용이야? 그럼 작게 만들자.”
폰트 사이즈로만 중요도를 나타내는 것보다, 컬러와 두께를 이용하세요.
- “중요한 내용이야? 그럼 굵게 만들자.”
- “덜 중요한 내용이야? 그럼 연한 컬러를 쓰자.”
이 경우에는 두 개에서 세 개 정도의 색깔을 고려할 수 있습니다.
- 포스트의 제목처럼 중요한 내용에 사용할 어두운 느낌의, 하지만 검은색은 아닌 색
- 포스트의 발행 시간처럼 덜 중요한 내용에 사용할 회색
- 카피라이트처럼 보조적인 내용에 사용할 밝은 회색
유사하게, 폰트 두께 역시 UI를 위한 작업에 적합합니다.
- 일반적인 내용을 위한 보통 두께*(폰트에 따라 일반적으로 400 또는 500)*
- 강조하고 싶은 내용을 위한 두꺼운 두께*(600 또는 700)*
이 때 400보다 작은 폰트 두께는 고려하지 않습니다. 포스트 제목처럼 큰 텍스트에서는 어울릴 수 있지만, 작은 폰트 사이즈에서는 읽기 힘듭니다. 만약 여러분이 텍스트를 덜 강조하고 싶다면, 얇은 두께를 쓰는 것보다는 연한 색 또는 폰트 사이즈를 조절하는 것이 좋습니다.
색깔이 있는 배경에서 회색 텍스트 피하기
흰 배경에 있는 텍스트를 회색으로 만드는 것은 텍스트를 덜 강조하는 좋은 방법입니다만, 색깔이 있는 배경에서는 권장하지 않습니다.
우리가 흰색 위의 회색 텍스트를 덜 강조된 것처럼 생각하게 되는 이유는 색상 간 줄어든 대비(Contrast) 이기 때문입니다.
따라서 글자를 덜 강조하고 싶다면, 글자를 밝은 회색으로 만들기보다는 배경색에 가깝게 만드는 것이 효과적입니다.
색깔이 있는 배경과 텍스트 사이의 대비를 줄일 수 있는 효과적인 방법 중 하나는 흰색 텍스트의 투명도를 높이는 것입니다.
이 방법은 흰색 텍스트를 사용하되, 글자의 투명도를 높이는 방법입니다. 이 방법은 배경색이 글자에 투과되어 나타나게 함으로써, 자연스럽게 대비를 낮출 수 있습니다.
또 다른 방법으로는 배경색과 유사한 색을 직접 선택하여 사용할 수 있습니다.
이 방법은 배경이 이미지이거나 패턴이어서 투명도를 높이는 것이 오히려 글자의 가독성을 해칠 때 적합합니다.
이 경우에는 배경과 유사한 색상을 직접 선택하고, 채도와 밝기를 필요에 맞게 조정합니다.
자연스러운 그림자 효과 주기
전체적으로 퍼진 듯한 그림자 효과보다는 수직으로만 그림자 효과를 추가하는 것이 좋습니다. 이것은 실제 세계에서 빛이 내려쬐는 방향과 일치하기 때문에 더 자연스러운 그림자 효과를 나타낼 수 있습니다.
이는 사용자 입력 폼에 자주 사용되는 내부 그림자(inset shadow) 효과에서도 동일하게 적용됩니다.
만약 여러분이 그림자 효과에 관심이 있다면, Material Design Guidelines을 참고하세요.
테두리는 최소한만 사용
여러분이 요소의 구분을 확실하게 하고 싶더라도, 곧바로 테두리를 사용하는 것은 지양해야 합니다.
테두리는 여러 요소를 구분짓는 좋은 방법이긴 합니다만, 그것이 요소를 구분하는 유일한 방법은 아닙니다. 또한 테두리가 지나치게 많다면 전체적인 디자인을 복잡하게 만들 수 있습니다.
만약 여러분이 테두리를 사용할 필요성을 느낄 때, 대신 써볼 만한 몇 가지 방법들이 있습니다.
첫 번째 방법은 그림자 효과(box shadow) 를 사용하는 것입니다. 그림자 효과는 테두리 효과처럼 요소 간 구별을 나타내는 데 적합하면서도 덜 복잡해 보이는 효과를 줄 수 있습니다.
두 번째 방법은 배경색에 차이를 주는 것입니다. 인접한 요소 사이에 살짝 다른 배경색을 주는 방법 역시 구분을 위해 쓸만한 방법입니다. 만약 이미 다른 배경색과 함께 테두리를 쓰고 있었다면, 테두리를 없애보세요.
마지막 방법은 추가적인 여백을 주는 것입니다. 두 요소를 구분짓는 방법들 중 여백을 늘리는 것보다 더 간단하고 괜찮은 방법이 있을까요? 요소들을 떨어트리는 것은 새로운 UI에 대한 고민없이도 요소를 구분짓는 데 괜찮은 방법입니다.
아이콘들을 확대하여 쓰지 않기
만약 여러분이 랜딩 페이지에서 특징 및 기능을 나타내는 데 쓸만한 큰 아이콘들을 디자인하고 있다면, 자기도 모르게 Font Awsome이나 Zondicons과 같은 무료 아이콘들을 골라 필요에 맞게 크기를 키워 사용하고 있을지도 모릅니다.
그러면서 여러분은 벡터 이미지니까 크기를 키워 사용하는 것은 화질에 문제가 없다고 생각합니다.
물론 벡터 이미지는 크기를 키우더라도 화질은 문제되지 않지만, 원본 이미지를 3~4배 키워 사용하는 아이콘들은 전문적이지 않은 느낌을 주며 엉성해보입니다. 이것은 디테일이 부족해보이고, 축 퍼진듯한 느낌을 줍니다.
만약 아이콘들의 크기를 키울 필요가 있다면, 아이콘들을 배경색이 있는 다른 도형 안에 넣어보세요.
이렇게 하면, 아이콘을 불필요하게 늘리지 않고도 원하는 크기에 가깝게 유지할 수 있습니다.
만약 여러분이 아이콘에 투자할 예산이 있다면, Heroicons나 Iconic같은 유료 아이콘을 쓰는 것도 나쁘지 않습니다.
색깔있는 테두리로 강조하기
여러분은 그래픽 디자이너가 아닌데, 어떻게 아름다운 사진이나 다채로운 일러스트에서 얻은 시각적 감각을 UI에 반영할 수 있을까요?
간단하면서도 큰 변화를 낼 수 있는 방법은 바로 밋밋하게 느껴지는 인터페이스에 색깔있는 테두리를 추가하는 것입니다.
예를 들어, 알림 메시지는 이렇게 바꿀 수 있습니다.
아니면 활성화된 메뉴를 이렇게 강조할 수도 있습니다.
또는 전체 레이아웃을 가로지르는 테두리를 추가할 수도 있습니다.
이런 방법은 그래픽 디자인에 관한 특별한 능력이 필요하지 않으면서도, 전체적인 느낌을 더욱 전문적으로 만들 수 있습니다.
색깔을 고르기 힘들다면, Dribbble’s color search와 같은 사이트에서 사전에 정의된 색상을 고를 수도 있습니다.
버튼의 불필요한 배경색 지우기
한 페이지에서 사용자가 수행할 수 있는 작업이 다양하다면, 순전히 버튼의 역할에 기반한 디자인을 하는 실수에 빠지기 쉽습니다.
예를 들어, 부트스트랩과 같은 프레임워크는 버튼의 역할에 따라 여러가지 타입의 스타일을 제공하고 있습니다.
긍정적인 효과를 유발하나? 그럼 초록색으로 만들자.
데이터를 지우는 버튼이지? 그럼 빨간색으로 만들자.
디자인에서 버튼의 역할을 고려해 색깔을 지정하지만, 이 때문에 오히려 중요한 기능이 강조되지 않을 수 있습니다.
페이지에서 사용자가 클릭할 수 있는 모든 버튼들은 그 우선순위가 있습니다. 일반적으로 대부분의 페이지에는 한 개 정도의 가장 중요한 버튼, 두 개 정도의 보조적인 버튼, 그리고 거의 사용되지 않는 버튼들이 있습니다.
따라서 이러한 작업들의 우선순위를 확실하게 나타내기 위해서는 확실한 계층 관계(hierarchy)를 바탕으로 디자인 해야 합니다.
- 중요한 버튼은 그 시각적인 의미가 명확해야 합니다. 단색이면서 대비가 높은 배경색이 효과적입니다.
- 보조적인 버튼 역시 명확해야 하지만, 돋보여서는 안 됩니다. 테두리만 있거나 대비가 낮은 배경색이 효과적입니다.
- 거의 사용되지 않는 버튼은 찾을 수 있어야 하지만, 눈에 띄어서는 안 됩니다. 일반적인 링크와 같은 스타일이 가장 좋은 방법입니다.
”뭔가 삭제하는 버튼들은 부정적인 행동을 의미하니까 빨간색이 적합하지 않나요?”
꼭 그럴 필요는 없습니다. 만약 뭔가 삭제하는 버튼이 해당 페이지에서 가장 중요한 행동 이 아니라면, 보조적인 버튼으로 만드는 것이 좋습니다.
부정적인 행동이 페이지에서 가장 중요한 행동인 경우는 아래와 같은 확인 대화 상자입니다. 이 경우에는 크고 굵은 빨간색 버튼이 적합합니다.
