※ 「7 Practical Tips for Cheating at Design」을 번역한 글입니다.
여러분이 일하는 회사에 정직원으로 근무하는 웹 디자이너가 없다면, 새로운 기능에 대해서는 직접 UI를 구현해야 할 수도 있습니다. 이때 무료 제작 서비스에서 뚝딱 만들어낸 것보다는 그럴듯하게 보여야 소비자의 눈길을 사로잡을 수 있을 텐데요. 아마 전문가가 아니라면 직접 웹디자인을 고민해보고 구현해내는 것이 어렵게 느껴질 수 있습니다.
사실 웹디자인을 전문적으로 배우지 않았다고 하더라도, 여러분이 만든 결과물의 퀄리티를 높일 수 있는 방법들은 엄청나게 많이 있습니다. 이번 시간 IT 아웃소싱 플랫폼, 위시켓은 전문가가 아니더라도 누구나 해볼 수 있는 유용한 웹디자인 팁을 소개해드리겠습니다.
1. 우선순위를 표현하려면 사이즈가 아니라 색깔과 굵기를 활용한다.
UI의 텍스트를 작업할 때는 흔히 저지르는 실수로는, 우선순위를 표현하기 위해서 지나치게 많은 사이즈의 폰트를 사용한다는 것입니다. 모든 작업을 폰트 사이즈로만 해결할 것이 아니라, 색깔이나 폰트의 굵기를 활용하면 똑같은 효과를 얻을 수 있습니다. 2~3가지의 컬러만 사용하려고 노력해보세요.
글의 제목과 같은 중요한 텍스트에 대해서는 검은색 말고, 짙은 색 컬러를 사용하는 것도 좋습니다. 작성한 날짜와 같은 부차적인 텍스트에 대해서는 회색을, 페이지 아랫부분에 있는 저작권 정보와 같은 덜 중요한 내용에 대해서는 옅은 회색을 사용해보세요.
UI 작업에서는 폰트 굵기를 두 가지만 사용해도 충분합니다. 대부분의 텍스트에는 폰트에 따라서 400이나 500 정도의 일반적인 굵기를 사용해보세요.. 여러분이 강조하고 싶은 텍스트에 대해서는 600이나 700 정도의 보다 굵은 폰트가 잘 어울립니다.
단, UI를 작업할 때에는 400 이하의 가는 굵기는 사용하지 마세요. 가는 굵기의 폰트는 제목과 같은 커다란 텍스트에서는 사용할 수도 있겠지만, 크기가 작은 텍스트는 읽기가 힘들어집니다. 강조하고 싶지 않은 텍스트를 가볍게 처리하고 싶다면, 굵기를 조절하는 것이 아니라, 가벼운 색상이나 더 작은 폰트를 사용하길 추천합니다.
2. 컬러가 있는 배경에서는 회색 텍스트를 사용하지 않는다.
배경이 흰색일 때는 덜 강조해도 되는 텍스트에 옅은 회색을 사용하는 것이 아주 좋은 방법이지만, 배경에 컬러가 있을 때는 별로 멋지게 보이지 않습니다. 그 이유는 우리가 흰색 배경에서 회색을 보게 되면, 그 대비가 줄어든 것으로 보이는 효과가 있기 때문입니다. 텍스트의 우선순위를 줄이고자 한다면, 옅은 회색을 사용하는 것이 아니라, 텍스트에 배경 컬러에 더 가까운 색을 사용해야 합니다.
배경에 색상이 있는 상황에서 대비를 줄일 수 있는 방법에는 두 가지가 있습니다.
▷흰색 텍스트의 불투명도를 줄인다.
흰색 텍스트의 불투명도를 낮춰서 사용하세요. 이렇게 하면 배경 색상이 조금 비쳐 보이기 때문에 텍스트가 덜 강조되면서도 배경과 부딪히지 않게 됩니다.
▷ 배경 색상을 기반으로 컬러를 직접 설정한다.
배경이 이미지나 패턴이라면 텍스트의 불투명도를 줄이는 것보다는 이 방법이 더 좋습니다. 그러지 않고 불투명도를 줄이면 텍스트의 색상이 낡아서 바랜 것처럼 보이게 됩니다.
3. 음영의 오프셋(OFFSET)을 조절한다.
상자의 그림자를 더 눈에 띄게 만들기 위해서 주위에 블러 처리를 하거나 스프레드 크기를 늘리지 말고, 아래쪽의 오프셋을 조절해보세요. 이렇게 하면 훨씬 더 자연스럽게 보이는데, 오프셋은 우리가 현실에서 익숙하게 볼 수 있듯이 위에서 빛이 비치는 것과 비슷한 효과를 냅니다. 이러한 효과를 인셋(inset)에 적용하면, 푹 들어간 효과나 입력 칸 모양을 만들 수도 있습니다.
4. 경계선을 적게 사용한다.
두 개의 요소를 구분하기 위해서, 둘 사이에 무작정 경계선부터 넣지는 말아 주세요. 두 가지의 요소를 서로 구분하기 위해서 경계선을 사용하는 것이 좋은 방법이기는 하지만, 그 방법이 경계선만 있는 것도 아니고, 경계선을 지나치게 많이 사용하게 되면 번잡하고 어수선하게 보일 수도 있습니다.
다음번에 작업하는 과정에서 경계선을 사용해야 하는 경우가 생긴다면, 다음과 같은 방법을 한번 고려해보시기 바랍니다.
▷ 상자의 음영을 사용한다.
상자에 있는 그림자 효과를 사용하게 되면, 경계선처럼 서로 구분하는 효과도 얼마든지 줄 수 있으며, 시선을 분산시키지도 않으면서 좀 더 은근한 분위기로 원하는 효과를 얻을 수 있습니다.
▷ 배경색을 서로 다르게 한다.
가까이 붙어있는 요소들의 배경에 서로 다른 색깔을 사용하게 되면, 여러분이 필요로 하는 둘 사이의 구분 효과를 얻을 수 있습니다. 이미 배경 색깔이 다른데도 경계선을 사용하고 있다면, 그건 없애도 좋습니다. 오히려 경계선이 꼭 필요하지는 않다는 것을 알게 될 것입니다.
▷ 좀 더 여유 공간을 둔다.
두 개 사이의 간격을 더 늘려도 된다면, 굳이 둘 사이에 경계선을 그을 필요가 있을까요? 두 가지의 그룹 사이에 충분한 여유 공간을 주게 되면, 추가적인 아이템을 사용하지 않고서도 둘 사이를 구분하는 효과를 줄 수 있습니다.
5. 작은 사이즈로 만들어진 아이콘을 지나치게 부풀리지 않는다.
랜딩 페이지의 ‘특집’ 섹션처럼 커다란 아이콘을 사용해도 되는 페이지를 디자인할 때면, 여러분은 이런 유혹에 휩싸이기 쉽습니다. 폰트 어썸(Font Awesome)이나 존디콘(Zondicons)과 같은 사이트에 가서 무료 아이콘들을 찾은 다음에, 필요에 맞게 크기를 늘리면 된다고 말입니다. 그런 사이트에 있는 아이콘들은 벡터 이미지라서 크기를 늘려도 이미지가 깨지는 일이 없으니 괜찮은 거 아니냐고요?
물론 벡터 이미지들은 사이즈를 늘려도 퀄리티 문제가 발생하는 것은 아니지만, 16-24 포트에 최적화되어 만들어진 이미지를 3~4배 늘리게 되면, 그다지 전문가적인 느낌이 들지는 않습니다. 오히려 세밀한 느낌이 사라지기 때문에, 그저 ‘큰 덩어리’처럼 보이게 되죠.
만약 여러분이 가진 게 작은 이모티콘들 밖에 없다면, 그 아이콘을 다른 형태 안에 넣은 다음에 그 배경에 색깔을 넣어 보세요. 이렇게 하면 원래 그 아이콘이 만들어진 사이즈를 유지하면서, 보다 커다란 공간을 차지하게 만들 수 있습니다.
6. 웹디자인이 밋밋하다면, 컬러가 있는 경계선을 사용해서 강조한다.
여러분이 웹디자인 전문가가 아니라면, 화려한 사진이나 다채로운 일러스트를 통해서 얻을 수 있는 다양한 시각적인 효과를 어떻게 추가할 수 있을까요? 미묘하지만 커다란 차이를 만들어낼 수 있는 한 가지 비법은 바로, 자칫 밋밋할 수도 있는 인터페이스에 색깔이 있는 경계선을 사용하는 것입니다.
예를 들면, 경고 메시지의 옆면을 이렇게 강조만 해도 훨씬 더 멋진 모습이 됩니다.
아니면 내비게이션 메뉴에 활성화된 부분을 강조할 수도 있습니다.
또, 레이아웃의 맨 윗부분 전체를 강조할 수도 있죠.
UI의 직사각형 테두리에 색깔을 넣는 일에 그리 대단하고 천재적인 디자인적 재능이 필요한 것이 아닙니다. 이런 간단한 트릭만으로도 좀 더 ‘디자인 작업을 한 것처럼’ 보이게 만들어 줍니다.
7. 모든 버튼이 컬러를 가지고 있지 않아도 된다.
한 페이지에서 여러 가지의 행위가 일어날 수 있는 경우, 그 행위의 사전적인 의미에만 의존해서 디자인을 하고 싶을 수도 있습니다. 무료 디자인 서비스에서는 여러분이 새로운 버튼을 추가할 때마다, 그 기능의 의미에 맞는 스타일을 추천해서 이런 경향을 더욱 부채질합니다.
의미라는 것은 버튼 디자인에 있어서 아주 중요한 부분이기는 하지만, 우리는 종종 더 중요한 것을 쉽게 잊어버리곤 합니다. 우선순위라는 것 말입니다. 하나의 페이지 안에 있는 모든 행위들은, 모두 그 중요도를 따져서 피라미드 형태로 각각의 행위들이 가진 중요한 정도를 매길 수 있습니다. 대부분의 페이지에는 제일 중요하게 부각되어야 하는 행위가 한 가지가 있고, 그다음으로 중요한 행위들이 몇 가지가 있으며, 그 외에 별로 중요하지 않은 행위들도 있습니다.
이러한 행위들을 디자인할 때, 그 행위 요소들이 가진 우선순위들을 살펴보는 것이 중요합니다. 제일 중요한 행위는 물론 가장 뚜렷하게 두드러져 보여야 합니다. 여기에서는 뚜렷하면서도 대비가 높은 배경 컬러가 아주 효과적입니다.
그다음으로 중요한 행위들은 뚜렷하게 보여야 하지만, 두드러져서는 안 됩니다. 윤곽선이나 대비가 낮은 배경 색상을 사용하는 것이 좋습니다. 중요도가 가장 낮은 행위들은 찾아볼 수는 있지만 눈에 잘 띄지는 않도록 해야 합니다. 링크를 표시해야 하는 경우에 이런 방법을 사용하면 아주 좋습니다.
삭제하는 행위의 경우에는, 언제나 빨간색이어야 할까?
꼭 그렇지는 않습니다. 그 페이지에서 삭제하는 행위가 가장 중요한 것이 아니라면, 덜 중요한 단계의 디자인으로 분류해서 처리하는 것이 좋습니다.
크고 빨갛고 굵은 스타일은 아껴 두어야 합니다. 이런 요소들은 확인 대화 상자에서와 같이 인터페이스 안에서 가장 중요한 행동이 필요한 곳에서 사용되어야 하기 때문입니다.
이번 시간, 위시켓과 함께 디자인을 잘 몰라도 쉽게 따라 해 볼 수 있는 웹디자인 팁 몇 가지를 알아보았습니다. 어렵게만 느껴졌던 UI에 대해 재미를 느껴볼 수 있는 기회였길 바라며, 다음에도 유익한 디자인 꿀팁으로 찾아뵙겠습니다.
사용자 경험을 높이기 위해 더 수준 높은 전문가를 만나보고 싶지는 않으신가요? 그렇다면 7만 이상, 국내 최다 IT인력을 보유한 위시켓을 방문해보세요! 여러분이 어려워하고, 고민하고 있는 디자인 요소들을 멋지게 해결해줄 디자인 전문가들을 찾을 수 있습니다:)
원문: 위시켓 블로그
