디자인 꿀팁 기법 10가지로 웹디자인을 멋지게 – 2탄

디자인 꿀팁 – 이글은 Medium에 올라온 Lorenzo Doremi님의 글을 원작자의 허락을 직접 받고 번역한 것입니다. 원작자의 Medium원문에 가셔서 추천과 댓글을 남겨주세요~!

디자인 꿀팁 10가지로 웹디자인을 멋지게 – 1탄 보기

제가 Medium에 연재했던 “디자인 꿀팁 10가지로 웹디자인을 멋지게 1탄”이 좋은 반향을 받아서 그 두번째 파트를 쓰기로 했습니다. 이 글을 통해 새내기 디자이너들이 새로운 아이디어를 얻고 또 왜 그 아이디어들을 쓰는지를 이해할 수 있기를 바랍니다.

자, 여러분의 시간은 소중하니 이제 곧바로 여러분의 웹디자인을 개선할 수 있는 10가지 디자인 꿀팁을 알아보도록 합시다.

디자인 꿀팁 10. 모노크롬(Monochrome) 이미지 백그라운드

모노크롬 이미지를 사용하면 단조로운 색조의 이미지를 사용하는 것보다 아주 뛰어난 효과를 낼 수가 있습니다. 이 테크닉을 사용하면 이미지의 텍스쳐도 살리고 의미전달에도 효율적일 뿐만아니라 화면 전체에 숨쉴 공간도 많이 남길 수가 있지요.

피그마나 포토샵같은 이미지 툴에서 쉽게 이 효과를 낼 수가 있습니다. 이미지를 회색조로 만든 뒤 투명도를 바꿔보면서 효과를 조절해 보세요.

디자인 꿀팁 10가지로 웹디자인을 멋지게 By Lorenzo Doremi
피그마에서 모노크롬 이미지를 만들기 아쥐 쉽죠.
모노크롬 이미지가 사용된 예시 (아래)

위의 예시에서 보실 수 있듯이 모노크롬 이미지를 사용해 “우주항공”과 “테크놀로지”라는 주제를 살리면서도 유저들을 맛있는 햄버거로 꼬실 수가 있었습니다.

디자인 꿀팁 9. 숨겨진 비밀의 팔레트!

웹디자인을 막시작하신 디자이너 분들이 이 비밀의 팔레트를 잘 모르시는 분들이 많은것 같습니다. 매일 디자인을 하시면서도 한번쯤은 꼭 써야 하는 이 비밀의 팔레트가 바로 눈앞에 있는데 말이죠.

이 숨겨진 비밀의 팔레트란 뭘까요?

바로 여러분들이 사용하시고 계신 이미지입니다! 이미지 안에 여러분들이 사용할 수 있는 모든 색깔이 들어있어요.

뭐 아주 흔한 이야기지만 저는 인터넷에서 이미지와 색조가 어긋나는 최악의 경우를 아주 많이 봤습니다. 밝고 행복한 여름이나 바닷가의 이미지에 어둡고 짙은 와인색의 배경색을 입히는 이해할 수 없는 경우가 많습니다.

이미지 속에서 이미지에 어울리는 색깔 팔레트를 찾게 되면 새로운 아이디어들이 모락모락 생기게됩니다. 이미지와 어울리는 팔레트는 위화감을 줄여주고 디자인의 흐름을 살릴 수가 있습니다.

이미지의 색조에 어울리는 배경색

디자인 꿀팁 8. 3가지의 색!

웹디자인 꿀팁 1편에서 검정과 하얀색으로만 디자인하기를 소개해드렸는데요. 장기적으로 봤을 때엔 검정과 하양으로만 디자인하기엔 역부족이죠

거의 모든 디자이너들이 사실상 알고 있고 또 많이 쓰기도 하지만 가끔씩 까먹는 디자인 기법이 있습니다. 바로 딱 3가지 색으로만 디자인을 하는 겁니다.

물론 무작위적으로 이 3가지색을 정하는 것이 아닙니다. 색마다 각기의 기능과 역할이 있지요.

  1. 바탕색: 화면의 60퍼센트를 차지
  2. 내용색: 화면의 30퍼센트 차지
  3. 부각하는 색: 화면의 10퍼샌트 차지

이 기법은 만국 공통의 기법이라 웹디자인 하시는 분들 뿐만 아니라 인테리어 디자이너들도 즐겨씁니다.

travel website design
3가지 색 기법의 좋은 예

보시다시피 이 3인조의 색들이 하나의 팀처럼 각자의 임무를 완성죠.

  1. 메인 바탕색인 네이비 블루가 전체적으로 화면의 테마를 정해주고
  2. 하얀색이 내용색의 역할을 하면서 네이비 블루와의 대조를 통해 내용을 부각하고
  3. 붉은색(red tint)이 콜투액션과 bold텍스등에 사용되어 주의를 끄는 역할을 제대로 하고 있습니다.

디자인 꿀팁 7: 숫자에는 다른 글꼴을 사용해보자

우리가 디자인을 할 때 하는 아주 흔한 실수 중 하나가 바로 문장과 숫자에 같은 글꼴을 쓰는 것입니다. 많은 폰트들이 문장에는 알맞지만 숫자에는 별로 맞지 않거든요. 폰트를 디자인 할 때 아예 숫자를 고려하지 않은 경우도 많습니다.

숫자를 위해 과감히 제3의 폰트를 가져다 쓰세요. 예를 들어 역사가 깊은 100년도 더 된 이탈리아 회사의 년도를 나타낼 때 따분한 현대식 폰트가 맞지 않을 수가 있겠지요.

제가 기억나는 좋은 예는 바로 Montserrat 폰트. 문장에 쓰기에는 적합하지만 숫자에 쓰기에는 노땡큐입니다.

다음 디자인은 제가 3가지 폰트를 사용한 예입니다. 숫자에 다른 폰트를 썼지요.

디자인 꿀팁 6: 노란색을 조심하라! 피할 수 있으면 피하자.

노란색에 대한 투정을 하는건 아닙니다. 노란색은 아름다운 색이지만 막상 쓰려고 하면 여러가지 문제가 생기기 일쑤입니다.

아니 Lorenzo. 넌 이 저 위에 꿀팁1의 예시에서 노란색을 썼잖아.

네, 썼긴 썼지만 정말 고생 많이 했습니다. 한번 알아보죠.

한마디로 말하자면 노란색은 눈이 가장 민감하게 반응하는 색이라는 겁니다. 그래서 노란색은 대체적으로 우리에게는 굉장히 밝은 색으로 다가오게 되는 거지요. 유저들의 눈을 멀게 하고 싶지 않다면 아마도 우리 모두 부각시키고자 하는 부분에 엑센트를 주는 색으로 노란색을 부분적으로 쓰고 있을 계실겁니다.

그리고 모던 웹디자인에서는 문자색은 주로 흰색을 사용하는데, 여기서 특히 버튼의 경우 노란색은 하얀색과의 색대비가 굉장히 낮아서 둘을 같이 쓰게 되면 문자가 잘 보이지가 않는 경우가 많아요.

이러한 색대비의 문제를 피하기 위해 주로 쓰는 방법은 노란색을 어두운 색과 함께 쓰거나 흰색을 쓸 경우 문자를 크고 두껍게 만드는 겁니다. (위의 예시처럼)

노란색의 다른 한가지 문제점은 파스텔톤 버젼의 노란색은 갈색이거나 황금색이라는 겁니다. 이런색들은 럭셔리한 특유의 느낌을 아주 강하게 담고 있기 때문에 모든 상황에 사용하기엔 무리가 있습니다.

디자인 꿀팁 5: 그리드를 디자인에 쓴다!

화면의 넓이를 잡아주는 960-Grid System이나 Bootstrap같은 그리드 시스템을 많이들 써보셨을 겁니다. 웹디자인을 해보신 분이라면 한번이라도 12컬럼의 그리드를 써봤을탠데요.

하지만 이 그리드를 화면에 나타내 보신적 있나요?

이러한 그리드를 페이지 화면에 나타내는 것은 공식적이고 정확하고 프로페셔널한 느낌을 가져다 줍니다.

다음은 Shashank | @holy_architect. 라는 디자이너가 그리드를 과감하게 디자인에 적용한 예입니다.

한가지 주의하셔야 할 점이 있다면 바로 그리드 선의 색대비입니다. 선이 화면에 너무 드러나게 되면 너무 산만해져서 유저들이 봐야할 중요한 부분을 못보게 하는 경우가 생길 수가 있으니 유념해두세요.

디자인 꿀팁 4: 비대칭의 아름다움

룰을 깨달았으면 그 룰을 깨보자! 라는 말이 있죠. 현대 미술과 디자인에서 많이 사용하는 기법 중 하나가 바로 비대칭입니다. 화면에 있는 것들을 이리저리 옮겨보시고 레이아웃도 바꿔보세요. 물론 이렇게 마구잡이로 움직여서 조화를 깨트리는 것은 쉽지요. 그래서 비대칭으로 좋은 효과를 내는 것은 아주 어려운 기법입니다.

다음 2 디자인은 제가 몇분 동안 시도해 본것들입니다.

비대칭을 하더라도 잘 정렬시키는 것이 매우 중요합니다. 물론 그러면서도 비대칭의 효과가 분명하게 보이는 것이 포인트죠. 비대칭을 하면서도 상하좌우의 발란스를 맞춰주는 것이 중요합니다. 반대편에 상응하는 내용이나 시선을 끌만한 것을 넣어줘서 화면의 무게를 맞춰줍니다.

제가 1편에 소개했던 대칭 계획(Balance Scheme)으로 위에 있는 디자인을 해부 해봅시다.

저는 유저로 하여금 오른쪽 상단에 있는 메뉴에 시선을 돌리게 하고 싶었습니다. 그래서 다음과 방식을 사용했습니다.

  1. 이미지와 문자들의 배치를 통해 유저의 시선을 왼쪽에서 오른쪽으로 흐르게 하는 상상속의 화살표를 만들어봤습니다.
  2. 메뉴를 포커스가 쉽게 되도록 디자인했습니다.

이게 바로 제가 의도한 유저의 시선흐름입니다:

물론 이건 저의 의도이고 이론적인 것에 불과합니다. 현실은 이것과 많이 동떨어져 있을 수 있습니다. 그래서 유저 테스트가 존재하는 것이겠지요!

디자인 꿀팁 3: 편리한 기능을 넣자!

보기좋은 떡이 더 맛있지만 쓸모가 있는 떡은 더더욱 맛있는 법입니다. 웹사이트도 마찬가지로 편리한 기능이 있다면 유저들은 더 좋아하겠지요. 유저에게 필요한 기능을 넣어서 웹사이트를 더욱 편리하게 만들어 봅시다.

만약에 디자인하시는 웹사이트가 유저들이 자주 방문하는 웹사이트라면 잠시 멋지고 이쁜 미관적인 분은 제쳐두고 더 쓸모가 있는 컴퍼넌트에 집중해볼 필요가 있습니다. 다음은 제가 만든 웹사이트에서 뽑아낸 두가지의 예입니다.

이 웹사이트는 아주 멋지거나 이쁘진 않지만 굉장히 쓸모가 있습니다.

오른쪽 상단을 보시면 알파벳으로 검색하는 기능을 넣은 것을 보실 수 있습니다. 왜냐하면 이 페이지는 300개의 나비 종을 정리한 아주 아주 긴 페이지였거든요. 알파벳 별로 정리된 나비 종류를 쉽게 볼 수 있도록 했습니다.

이 기능이 있었다면 페이지는 굉장히 길고 스크롤 하느라 유저들이 굉장히 불편해했을 것입니다.

자 다음 스크린 샷을 보도록 하죠.

나비에 대한 자세한 설명과 더 많은 이미지를 볼 수 있게 한 이 기능도 매우 호응이 좋았습니다. 아주 편리하고 실용적인 기능이기 때문이죠.

디자인 꿀팁 2: 데스크탑과 모바일 디자인을 함께 그려서 고객에게 보여주자.

테스크탑과 모바일 버젼의 디자인은 둘다 모두 중요하지만 우리는 자주 한가지에 몰입하다 다른 하나를 빠뜨리는 경우가 많습니다.

그래서 모바일과 데스크탑 버젼을 같은 화면에 함께 그려서 그것을 고객님에게 보여주는 것은 굉장히 도움이 됩니다. 그 중에 3가지 장점을 나열해보자면:

  1. 고객에게 반응형 디자인도 했다는 것을 보여줄 수 있고
  2. 더 프로답고 똑똑해 보일 수 있고
  3. 프레젠테이션에 레이어 효과를 내볼 수가 있습니다.

다음의 예시를 함께 보죠.

제가 기존 디자인 위에 아쭈 빨리 끄적여본 그저그렇고 미완성의 모바일 앱 버젼의 디자인입니다. 하지만 이거 하나로 전체적인 디자인에 더욱 전문성과 완성감을 불어 넣을 수가 있었습니다.

디자인 꿀팁 1: 3D로 만들어보자!

3D는 제가 가장 좋아하는 예술적 기법입니다. 몇년동안 Maya나 Blender를 사용해오면서 부터 말이죠.

여러분들도 Blender의 SVG import기능을 사용하시면 아주 쉽고 빠르게 2D이미지를 3D로 만드실 수 있습니다.

물론 개발자에게는 이 3D 디자인 이미지를 보낼 필요가 없지만 마케팅 단계에서 고객분들에게 프레젠테이션 할 때 아주 좋은 인상을 줄 수가 있습니다.

저는 이글을 쓰고 있는 지금 피트니스 앱을 하나 개발하고 있는데요. 여유가 있을 때 그 디자인에 3D효과를 넣고 폰에 넣어봤습니다. (여러분들의 웹사이트도 이렇게 꾸며보세요.)

당신의 웹디자인을 멋지게 만들 10가지 트릭 - 3D 효과 1.jpeg
멋진 튀어나옴

만약 Blender를 배우고 싶지 않으시다면 디자인에 3D효과를 입히는 Vectary or Threed.io같은 툴을 사용하셔도 됩니다.

Vactary로 디자인에 3D효과를 넣다
Vactary를 사용하시면 이런 효과는 식은 죽 먹기입니다.

호응이 좋으면 Blender로 3D효과를 내는 글도 써보도록 하겠습니다.

끝맺으며

쓰다보니 저의 꿀팁과 기법들이 거의 동이 나기 시작했습니다. 하지만 제가 소개한 이 20개의 꿀팁을 한번 실험해보시고 여러분들의 디자인을 좀더 시각적으로 향상 시킬 수 있길 바랍니다.

이 기법들을 마스터하시게 되면 다음 단계인 애니메이션, 정보 아키텍쳐 그리고 행동심리학이 여러분을 기다리고 있습니다!

이글은 Medium에 올라온 Lorenzo Doremi님의 글을 원작자의 허락을 직접 받고 번역한 것입니다. 원작자의 Medium원문에 가셔서 추천과 댓글을 남겨주세요~!

답글 남기기