[번역] 디자인할때 실용적인 일곱가지 팁

감이 아닌 전략을 기반으로 좋은 디자인하기

Dan Kim
Oct 19, 2018 · 10 min read

이 글은 7 Practical Tips for Cheating at Design을 번역한 글입니다.


모든 개발자들은 좋든 싫든 스스로 디자인적인 결정을 내려야하는 순간을 반드시 마주하게 됩니다. 예를 들어, 회사에 풀타임 디자이너가 없거나 혹은 여력이 없어 새로운 기능을 위한 디자인을 직접 해야할 수 있습니다. 혹은, 사이드 프로젝트나 간단한 웹사이트를 개발하는 상황에서도 직접 디자인을 해야하는 상황에 마주합니다.

이런 상황에서 대부분 사람들은 디자인 개선을 조금 시도하다 “이게 내가 할 수 있는 최선이야. 나는 미술전공자가 아니잖아!” 라며 포기하곤 합니다.

하지만, 꼭 디자인 전공자가 아니라도 스스로 더 좋은 디자인을 만들 수 있는 다양한 전략 혹은 트릭이 존재합니다. 이 글은 오늘 바로 디자인에 적용할 수 있는 일곱가지 전략을 담고 있습니다.


1. 글자 크기 대신 색상과 두께로 계층관계를 표현하세요

글자를 스타일링 할 때 가장 일반적으로 하는 실수는 계층관계를 위해 글자 크기만 의존한다는 것입니다.

“여기가 중요하지? 그러면 글자 크기를 늘려야지”
“여기는 좀 덜 중요한 부분이니까 글자 크기를 작게하자”

하지만, 글자 크기를 조정하는 것만으로는 계층구조를 충분히 표현하기 어렵습니다. 글자의 색상과 두께를 함께 사용해보세요.

“이 부분이 중요하네? 글자를 두껍게 만들자
“이 부분은 조금 덜 중요하네? 글자에 옅은 색상을 적용하자

이때 두가지 혹은 세가지 정도의 색상만 사용하도록 노력하세요.

  • 검정색은 주요한 내용에 사용 (예: 뉴스 기사의 헤드라인)
  • 회색은 조금 덜 중요한 내용에 사용 (예: 뉴스 기사의 출판일)
  • 옅은 회색은 부가적인 내용에 사용 (예: 저작권 표시)

글자 두께의 경우 두가지만을 사용해도 충분합니다. 400 이하의 글자 두께는 가급적 피하는게 좋습니다. 글자 크기가 아주 크다면 400 이하의 두께를 사용할 수 도 있습니다. 하지만, 대부분의 글자 크기는 400이하로 글자 두께를 주면 읽기 매우 어려워집니다. 만약, 어떤 콘텐츠를 덜 강조하고 싶다면, 글자 두께를 얇게하는것 보다는 옅은 색상을 사용하거나 글자 크기를 작게 만드는 것을 추천합니다.

  • 대부분의 콘텐츠에는 일반적인 두께 사용 (400 또는 500)
  • 강조하고 싶은 콘텐츠에는 두꺼운 두께 사용 (600 또는 700)

2. 색상이 있는 배경에 회색 글자를 사용하지 마세요

흰색 배경에서 텍스트를 덜 강조하기 위해서 밝은 회색을 사용하는 것은 좋은 방법입니다. 하지만, 색상이 있는 배경에서는 좋은 방법이 아닙니다. 흰색 배경에서 회색이 좋은 이유는 회색과 흰색이 조화를 이루는 색이기 때문입니다. 배경색과 조화를 이루는 유사한 글자 색을 사용하는 것이 훨씬 보기에 좋습니다.

흰색이 아닌 배경에서 조화로운 글자 색상을 선택하는 두가지 방법이 있습니다.

흰색 글자에서 불투명함(opacity) 감소시키기

한가지 방법은 흰색 글자를 선택하고 불투명도를 낮게 주는 방법입니다. 이렇게 하면 배경색이 흰색 글자에 자연스럽게 비치면서, 배경색과 조화를 이루는 색을 사용할 수 있게 됩니다.

배경색을 기반으로 수동으로 선택하기

두번째 방법은 배경이 이미지거나 패턴일때 사용하면 좋습니다. 배경색과 동일한 색조를 가지는 색상을 선택한 다음, 여러분 눈에 괜찮다 싶을때까지 선명도와 밝기를 조정해보세요.


3. 그림자 오프셋

보통 박스 혹은 카드를 더 눈에 띄게 만들기 위해서 그림자에 흐림값(blur)과 퍼지는 정도(spread)를 늘리곤 합니다. 이렇게 그림자가 전체적으로 퍼지는것처럼 만들지 말고, 아래 쪽 그림자 오프셋을 크게 주는 방법을 사용하세요. 이 방법은 우리가 실제 세상에서 물체를 위에서 볼때처럼 그림자를 만들어주기 때문에 훨씬 더 자연스럽게 보입니다.

이 방법은 입력값을 받는 디자인에도 동일하게 적용 가능합니다. 그림자 디자인에 대해서 더 많은 부분에 관심이 있다면, Material 디자인 가이드를 참고하세요.


4. 경계선은 최소화 하세요

두 가지 아이템을 분리하고 싶을때, 곧바로 경계선을 사용하지는 마세요. 물론, 경계선은 두가지 아이템을 분리하는데 좋은 방법입니다. 하지만, 너무 경계선을 많이 사용하게되면 여러분이 한 디자인이 정신없어 보이게 됩니다. 만약 디자인을 하는 중에 경계선이 머릿속에 떠오른다면, 대신 다음 아이디어들을 고려해보세요.

박스 그림자 사용하기

박스 그림자는 경계선처럼 하나의 아이템의 윤곽을 표현하는데 좋은 방법입니다. 경계선보다 훨씬 더 작은 디자인이지만, 디자인을 산만하게 하지 않으면서 경계선과 동일한 효과를 얻을 수 있습니다.

다른 배경색을 사용하기

보통 붙어있는 두 가지 아이템에 약간 다른 배경색을 적용하는 것만으로도 두 가지 아이템을 분리하는데 충분합니다. 만약 여러분이 두가지 다른 배경색을 사용하고 있으면서도 경계선도 사용하고 있다면, 경계선은 지워도 됩니다.

추가 여백주기

분리하고 싶은 두 가지 아이템 사이에 간단하게 여백을 추가하는것 보다 좋은 방법이 있을까요? 추가로 여백을 주는것은 어떠한 새로운 디자인 아이템을 추가하지 않아도 아이템들의 그룹을 구분하는데 효과적인 방법입니다.


5. 작게 디자인된 아이콘을 너무 키우지 마세요

큰 아이콘이 필요한 화면을 디자인하고 있다고 가정해봅시다. 예를 들어, 랜딩 페이지에서 기능을 소개하는 디자인이 있을 수 있습니다. 아마도 우리는 본능적으로 Font Awesome이나 Zondicons 같은 사이트에서 무료 아이콘 셋을 받은 후에 여러분의 디자인에 맞도록 아이콘을 키울 것 입니다.

그 아이콘들은 모두 벡터 이미지이기 때문에 아이콘을 키워도 품질에 영향이 없지 않냐구요? 물론, 벡터 이미지는 사이즈를 키운다고 해서 품질이 떨어지는 것은 아닙니다. 하지만, 16–24px로 디자인된 아이콘들은 3배 혹은 4배로 커졌을때 전문적으로 보이지 않습니다. 보통 작은 아이콘들은 디테일을 그리지 않기 때문에, 커지면 커질수록 하나의 덩어리처럼 보일 뿐 입니다.

만일 가지고 있는 재료가 조그마한 아이콘들 뿐이라면 사이즈를 키우는 대신 모양이 있는 배경색을 뒤에 붙여 보세요. 이 방법은 실제로 디자인된 사이즈와 비슷하게 아이콘을 유지 할 수 있을 뿐 아니라, 큰 화면을 채우는데 유용합니다. 만약, 돈이 있다면 Heroicons 혹은 Iconic과 같은 큰 화면을 위해 디자인된 아이콘을 사용하는것도 가능할 것 입니다.


6. 브랜드 디자인에 색상을 추가하기 위해 색으로 강조된 경계선을 사용하세요

여러분이 그래픽 디자이너가 아닌데도 디자인에 시각적인 감각을 어떻게 넣을 수 있을까요? 다른 디자인들은 아름다운 사진이나 칼라풀한 일러스트레이션으로 구성되어있는 상태에서 말이죠. 다른 디자인 아이템과 큰 차이를 낼 수 있는 간단한 트릭은 색상으로 강조된 경계선을 조금 단조롭게 느껴지는 아이템에 추가하는 것입니다.

예를 들어, 아래의 경고 메세지 옆…

… 또는 활성화된 네비게이션 아이템 밑

… 또는 레이아웃 상단 전체에 색상이 있는 경계선을 넣을 수 있을 것 입니다.

UI에 색상이 있는 사각형을 넣는 것은 어떠한 그래픽 디자인적 재능을 필요로 하지 않습니다. 그러면서도 여러분의 사이트를 보다 “디자인된” 사이트로 보일 수 있게 만들어 줍니다. 색을 고르는게 혹시 어렵나요? Dribble Color Search와 같은 이미 파레트 형태로 제공하고 있는 색상표에서 색을 선택해보세요. 이런 도구들은 끝도없는 색의 세계에서 색을 선택해야하는 부담을 덜어 줍니다.


7. 모든 버튼이 배경색을 가져야하는 것은 아닙니다

사용자가 하나의 페이지에서 여러개의 동작을 선택할 수 있을 때, 순수하게 각 버튼이 가지는 의미만을 기반으로 각 동작을 디자인하는 함정에 빠지기 쉽습니다. Bootstrap과 같은 프레임워크들은 아래와 같이 의미에 따라서 다른 버튼 색상을 제공함으로써, 대부분의 사람들이 위와 같은 실수를 하는것을 부추깁니다.

“긍정적인 동작이네? 버튼을 초록색으로 만들자.”
“삭제 버튼이잖아? 빨간색으로 만들어야지.”

버튼 디자인에 있어서 버튼이 가지는 의미는 매우 중요합니다. 하지만, 이보다 훨씬 더 중요한 요소를 우리는 흔히들 잊어버립니다. 바로, 계층구조(hierarchy) 입니다.

하나의 페이지에 존재하는 모든 동작들은 중요도 기반의 피라미드 어딘가에 위치합니다. 대부분의 페이지는 단 하나의 가장 우선되는 동작을 가지고 있고, 조금 덜 중요한 동작들이 몇 가지 있으며, 몇개 안되는 중요하지 않은 동작들이 존재합니다.

이러한 동작들을 디자인할 때에는 이 계층구조안에서 그들이 어떤 위치에 있는지를 생각하는것이 굉장히 중요합니다.

  • 가장 중요한 동작은 반드시 명백해야합니다. 단색이며 배경색과 대조를 이루는 색상이 여기에서 잘 동작합니다.
  • 두번째로 중요한 동작들은 명확해야하지만 너무 눈에 띄면 안됩니다. 경계선만 주거나 배경색과 비슷한 색상을 사용하는것이 좋은 선택지입니다.
  • 가장 덜 중요한 동작들은 찾을 수는 있되 시선을 뺏어서는 안됩니다. 링크처럼 디자인하는것이 가장 좋은 접근입니다.

“부정적인 의미를 담고 있는 동작들은 항상 빨간색일 필요는 없나요?”

반드시 그럴 필요는 없습니다. 만약 부정적인 동작들이 해당 페이지에서 가장 중요한 동작이 아니라면, 두번째 혹은 세번째로 중요한 동작들로 취급하는것이 더 좋은 방법입니다.

부정적인 의미를 담고 있는 동작이 실제로 해당 페이지의 가장 주요한 동작이라면, 크고, 빨갛고, 두꺼운 글자를 사용해서 디자인 하세요. 아래 확인 다이얼로그처럼 말이죠.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade