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

디자인 꿀팁 – 이글은 Medium에 올라온 Lorenzo Doremi님의 글을 원작자의 허락을 직접 받고 번역한 것입니다. 원작자 Medium 링크

쿨하게 허락함

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

디자이너가 되기 위한 여정을 떠날때엔 누구나 초보로 시작하지요. 그 과정에 있어서 미적감각을 눈으로 익히는 것은 빼놓을 수가 없습니다. 그래서 매일 Dribbble에서 디자인을 찾아 보는 것은 매우 도움이 됩니다. 하지만 그런 디자인들에 감탄하는 것은 쉽지만 그 뒤에 담겨진 “왜”를 알기란 흔치가 않은 일이죠.

“아이디어가 떠오르지 않아…” “받은 디자인 에셋이 너무 부족해…” “뭐부터 어떻게 시작할지 모르겠어” 이러한 고민들은 디자인을 지루하고 힘든 작업으로 만들곤 합니다. 그래서 그런 고민을 하시는 분들을 위해서 10가지 디자인 트릭을 보여드리고자 합니다. 어떤한 특별한 기술이 필요없이 여러분들이 망했다고 생각하는 디자인을 개선시켜드릴 트릭들입니다.

제가 보여드리고자 하는 것들은 어디까지나 막힘을 뚫는 “기교”들일 뿐 지켜야할 “룰”이 아님을 먼저 말씀드립니다.

디자인 꿀팁 10. Black & White으로 과감하게

아이디어가 없으신가요? 좋은 이미지도 없나요? 그럼 블랙 앤 화이트로 한번 과감하게 디자인의 운을 떼어 보세요. 이러한 막무가내 디자인(Brutalist Design)으로 하다보면 좋은 결과를 이끌어낼 때가 많아요. 발란스와 구도, 여백은 물론 글꼴과 기하학적인 구도를 이해하는데 있어서 흑백의 간결함이 크게 도움이 됩니다.

당신의 웹디자인을 멋지게 만들 10가지 디자인 꿀팁
색이 정해지지 않았고 이미지도 없고 와이어 프레임도 밋밋하다면 흑백 디자인으로 디자인의 운을 먼저 떼보자. 화면에 어떤것이 있고 공백도 한눈에 들어온다.

디자인 꿀팁 9. 대칭을 계획해보자

제가 만들고 이름을 붙인 대칭 계획(Balance Scheme)이라는 트릭입니다. 먼저 아래에 나온 예제처럼 화면상의 내용을 간단한 도형으로 바꿔 넣고 화면을 상하 혹은 좌우 반으로 나눈 뒤 화면 왼쪽 파트의 도형의 면적의 총합이 오른쪽과 같게 혹은 위쪽 파트의 면적이 아래와 같게 만드는 겁니다.

빨간색 선이 좌우 파트를 가르고 왼쪽에 있는 박스들의 전체 면적이 오른쪽에 있는 박스들의 전체 면적과 같게 배치를 해보자.

눈으로 대강해도 얼추 맞을 때도 있지만 결벽증이 있으신 분은 계산을 해보는 것도 추천? 드립니다.

왼쪽에 있는 검은색 박스들의 면적을 픽셀단위로 모두 더해보면
(236 * 138 ) + (934 * 132 ) + ( 313 * 69 ) + (674 * 44) = 207109 pixels

그리고 오른쪽에 있는 검은색 박스의 면적도 구하면
446 x 446 = 198916 pixels.

대략 3.9558%의 차이밖에 안나는 군요. 아주 좋습니다. [2]

제가 이 박스들을 그리전에 미리 계산을 한게 아니에요. 다년간의 디자인으로 이젠 눈대중으로 발란스가 맞게 박스를 그릴 수가 있게 되었죠. 눈은 자동적으로 깨진 발란스를 느낄 수가 있습니다.

[2] 역자 주: 이글을 쓴 Lorenzo Doremi는 엔지니어 출신입니다.

디자인 꿀팁 8. 페이지 디자인 뒤에 배경화면을 넣어보자

웹페이지 디자인 뒤에 단색 바탕을 넣어도 괜찮지만 이렇게 색다르게 배경화면을 넣는 것도 좋습니다. 커피에 관련된 웹페이지 디자인 뒤에 커피 원두 그림을 넣었습니다. 이렇게 하면 밋밋할 수도 있는 디자인에 깊이와 맥락을 제공할 수 있습니다.

주의: 어디까지나 고객에게 웹페이지 디자인을 보여줄 때 쓰는 트릭입니다.

디자인 꿀팁 7. 나만의 글꼴 크기 가이드라인을 만들자

글꼴 크기를 가지고 씨름하면 하루가 가버리죠. 그렇게 시간낭비를 하지 말고 자신만의 폰트 사이즈 가이드라인을 만들면 좋습니다. 아무리 사이즈를 만져도 결국엔 문장 폰트는 14-18pts사이, 부제목 타이틀은 살짝 큰 24-36사이 그리고 큰 제목 사이즈는 96에서 144pt 사이 이거든요. Figma에서 제공하는 기본 사이즈만으로도 충분히 멋진 효과를 낼 수 있습니다.

주의: 어떤 글꼴들은 그 태생이 다른 글꼴들보다 아주 크거나 작을 수가 있습니다. 그렇기 때문에 항상 Roboto같은 표준 글꼴을 옆에다가 두고 그걸 기준으로 크기를 정하셔야 합니다. 예를 들어 사용하는 글꼴 크기가 14-18pt 크기의 Roboto와 비슷하다면 문단 글꼴로는 적합합니다.

문장 글꼴 크기: 18, 메뉴바: 24, 제목: 96

디자인 꿀팁 6. Z-index를 활용하자

배경이 투명한 이미지들을 겹겹이 쌓으면 화면에 레이어를 만들 수가 있지요. 이미지의 배경을 없앨 땐 인터넷에 있는 Remove.bg같은 툴들을 사용하시면 편리합니다.

그렇 CSS에서 Z-index를 활용하시면 이미지를 앞으로 혹은 뒤로 보내서 입체감의 착시현상을 만들어 낼 수가 있습니다. 굉장히 효과적입니다.

이건 제가 이 테크닉을 사용해만든 간단한 디자인입니다.

디자인 꿀팁 5. 파스텔톤의 색

밝은 혹은 원색계열의 색도 좋지만 공격적인 느낌을 주거나 색의 조화가 깨지기 쉬울 때가 많습니다. 파스텔톤의 색감은 최근(2021년)에 많이 유행하고 있습니다. 색을 고르실 때 평소에 고르지 않은 파스텔 톤의 색을 한번 탐험해보시는 것도 좋습니다.

저 빨간색 네모에 흥미로운 색이 많습니다.
당신의 웹디자인을 멋지게 만들 10가지 트릭 - 파스텔톤의 색 - 1
이 사진과 아래의 사진은 구조적으로 같고 모두 괜찮습니다. 취향의 차이일 뿐이지요. 뭔가 색다른 것을 해보실려면 파스텔톤의 색을 한번 사용해보시길 추천드립니다.

디자인 꿀팁 4. 디자인에게 숨쉴 공간을 주자

개인적으로 빈공간은 적은 것보다는 많은 것이 좋다고 생각합니다. 숨이 꽉꽉막히게 페이지를 가득 채우는 것은 별로라고 생각합니다. 디자인에게 숨쉴 공간을 주는 방법으로는:

  1. 배경을 최대한 남긴다.
  2. 글이 꽉꽉차서 벽이 되지 않게 줄마다 아니면 문단 사이에 공간을 부여하자.
  3. 중요하지 않거나 주의를 끌지 못하는 이미지는 아예 넣지 말자.
  4. 글을 장황하게 써서 화면을 채우지말고 짧은 캐치 프레이즈를 활용하자
빈공간(검은 배경)의 도움을 많이 받은 디자인

디자인 꿀팁 3. 노이즈의 힘

우리가 흔히 디자인을 생각할 때에는 깨끗함이나 스무스함 혹은 투명함같은 개념을 떠오르기 쉽지만 “완벽함은 결함안에 있다“라는 말이 있습니다.

자신의 디자인에 세련되고 예술적인 느낌을 넣어주는 노이즈 기법을 한번 써보세요. 아주 세밀한 노이즈를 사용하시면 배경화면에 영화적인 느낌도 줄 수가 있어서 비디오나 애니메이션이 많은 다이나믹한 웹사이트에 아주 잘 먹힙니다.

노이즈는 포토샵으로 쉽게 만들 수 있는데 투명한 바탕에 2k-4k Gaussian noise를 만드셔서 화면이나 사진에 적용하시면 됩니다.

잘 안보이지만 배경화면에 까칠까칠한 노이즈 효과를 줘서 종이와 같은 배경화면을 만들었습니다. by Jessica Felicio.

디자인 꿀팁 2. 영문 글꼴에 관한 작은 꿀팁

시중엔 정말 별로인 폰트들이 많습니다. 특히 우리 컴퓨터에 기본으로 깔린 폰트들 중에 그런게 많죠. 좋은 글꼴들을 고를려면 인터넷을 샅샅이 뒤져야 합니다. 이런 유튜브 비디오를 보셔도 좋죠. 유튜브: 66개의 아름다운 폰트

하지만 모든 글꼴들은 공짜가 아니죠. 라이센스를 따지 않고 사용하시면 문제가 될 수도 있습니다. 그래서 이런 툴이 있습니다. 유료폰트를 대신할 수 있는 비슷하게 생긴 공짜 폰트 찾아주는 웹사이트

정말 많은 스타일과 종류의 폰트 패밀리들이 있는데 저는 보통 이들을 3가지로 분류해 놓습니다.

  1. 엘레강스한 글꼴
  2. 모던한 글꼴
  3. 문장에 사용되는 읽기 쉬운 글꼴

보통 1번에 해당되는 글꼴들은 영어로 “display typefaces”라고 하는데 아주 화려한 글꼴들이라 큰 제목에 주로 사용됩니다. Abril Fatface, Playfair Display, Volux, Chalga같은 영문 글꼴들을 한번 찾아보세요.

모던한 영문 폰트로는 Metropolis, ITC Avant Garde, Redwing, Takota, Gotham같은 것들이 있습니다.

디자인 꿀팁 1. 기하학적인 요소를 활용하기

기하학을 활용하는 것은 가장 어려운 테크닉 중에 하나지만 잘만 활용하면 아주 잘 먹히는 효과가 나올 수가 있습니다.

기하학적인 요소는 복잡한 이미지를 사용할 필요 없이도 레이아웃을 잘 정리해주고 전하고자 하는 컨셉을 돋보이게 할 수가 있습니다. 기하학적 도형을 찾아내기란 아주 어렵고 저도 아직 마스터하지 못했습니다.

가장 흔히 쓰는 트릭은 글자나 숫자 그리고 타이틀에서 발견되는 기하학적 요소를 쓰는 것입니다. 예를 들어 타이틀을 아주 크게 은근하게 확대시키거나 타이틀 중에 있는 글자하나를 아주 크게 만드는 거죠. 크게 확대시킨 영문자 A가 아주 좋은 예죠.

제가 디자인한 앱 Abmeister의 디자인 컨셉에 사용한 문자 A

이상

답글 남기기