디자이너를 위한
비주얼 감각 단련법
비율이나 조형미에 대한 기초 지식이 부족하다고 생각 될 때
듀오톤은 매년 2회 살몬(멤버)들의 성장을 위해 인터널 세미나 진행하는데요.
2021에도 상반기와 하반기에 세미나가 열렸고 조금 늦었지만 그 소식을 전달드리고자 합니다.
2021년 2월 상반기에는 6일에 걸쳐 기본을 다질 수 있는 주제를 가지고 진행했습니다.
Day1. Brand of Duotone (오금희책임, 정다영CD)
Day2. Visual Design & Keynote Design (오금희책임, 김의진책임)
Day3. Leadership & Communication (이석율대표)
Day4. Figma Crash Course (김성준선임 & 조영광선임)
Day5. UX Data-Driven Analysis : Beusable (박태준대표, 뷰저블)
Day6. Interaction Design : Protopie (이승윤책임)
2021년 12월 하반기에는 듣고 싶은 주제들을 모아서 4일 동안 진행했습니다.
Day1. Design Fundamental
영상속 스토리텔링이란? (정원도책임)
비주얼 감각, 황금비율과 조형미 (송병용CD)
충무로, 편집 프로세스 (김수인책임)
Day2. Web Publishing 1
Markup 기본기, HTML, DOM 부터 CSS, UI Structure (이은주책임)
Day3. Web Publishing 2
주니어를 위한 아이콘 안내서, SVG (이양희선임)
웹 기본기 - 반응형, 적응형이란? (신주영이사)
웹 접근성 (이은주책임)
Icon system, CSS + Font (송명근, 정한나, 이세빈)
Day4. Skill up
디자이너를 위한 글쓰기, 보고서 (박창선대표, 애프터모멘트)
정량, 정성 리서치 & 데이터 기반의 UX 리서치 (김은희, 요기요)
이 중 2021 하반기 송병용 CD님께서 진행하신 세미나 이야기를 전해드립니다. 해당 세미나는 2021년 12월 6일 월요일, Duotone 2층 강연장에서 진행되었어요.
한 살몬의 질문을 했어요. 디자이너라면 누구나 고민하고 궁금해하는 주제였습니다.
Visual Design 스킬을 향상시키는 방법이 있을까요?
비율이나 조형미에 대한 기초 지식이 부족합니다.
디자인할 때 밸런스를 잘 맞출 수 있는 방법이 있다면 배우고 싶습니다.
How to?
디자인은 감과 센스로 저절로 생기는 것이 아니라
반복적인 연습을 통해 생긴다.
꾸준한 연습만이 정답이라는 건 모두가 다 아는 뻔한 소리라고요?
그럼 지금부터 어떤 기준과 방법을 통해 연습해야 하는지 요약해서 전달드릴게요.
송CD님께서는 주니어 시절부터 지금까지 취미처럼 매달 그래픽 캘린더를 제작해 오시고 있다고 합니다. 본인이 직접 찍은 사진이나 그 달의 주제를 나타내는 타이포그래피를 활용한 작품을 만들어 보신대요.
그래픽을 연출할 때는 기준점과 상대적 존재, 비례감, 리듬감 등의 요소를 항상 생각해 표현하고자 노력한데요. 사용된 요소들을 잘 관찰하고 적절하게 배치될 수 있도록 균형감을 신경 쓰며 디자인을 완성해 나갑니다.
디자인 작업 이외에도 한가지 팁을 더 주셨어요. 항상 주의를 관찰하고 직접 사진 찍으면서 연습하는 것도 좋은 방법이라고 생각하신대요. 카메라 프레임 안에서 요소 간의 비율과 위치를 고려해 구도를 잡고 사진을 찍으신다고 합니다. 이런 취미를 통해 그래픽 비율을 보는 시각을 길러오셨다고 해요.
Chapter 01. 조형-미
| 의미있는 의도된 아름다움
우리가 디자인을 보면서 흔히 말하는 조형미에 대해서 알아보죠.
조형과 미는 다른 것입니다. '조형'은 그 자체로는 아름다움을 가질 수 없는 Element(점, 선, 면)로 구성되어 있고 그 요소들이 어떻게 섞이고 나뉘는지에 따라 '미'가 발생됩니다.
'미'는 요소들이 리듬, 비례, 균형, 대비와 같은 것을 통해 발생됩니다. '미'를 가진 디자인을 하기 위해서는 상대적 개념으로 비교점, 기준점을 가져야 합니다. 상대적인 것이 없으면 '미'라는 것이 형성될 수 없죠. ‘미’라는 것은 어떠한 의도가 들어가고 '왜'라는 의미를 가진 아름다움이 됩니다.
그럼 조형미를 가진 디자인은 어떻게 할 수 있을까요?
몇 가지 기준과 방법을 이야기해 보자면,
첫째. 눈보다 숫자를 믿어라
처음에 시각적 비율을 찾는 게 어렵다면 수치적으로 접근해 보세요.
황금비율처럼 아름다운 비율이 이미 세상에 많이 공개되어 있습니다.
둘째. 아껴 쓰고, 적게 써라
화면을 구성할 때는 적은 요소를 사용하여 복잡하지 않게 구성합니다.
셋째. 컨텍스트를 명확하게 구분하라
똑같은 방식을 반복하면 내용 구분이 어렵겠죠.
하고 싶은 말을 강조하고 복잡하지 않게 구분해서 구성하는 것이 중요합니다.
넷째. 안정감을 유지하라
사람은 경험을 통해 본능적으로 중력을 인식해요. 그래서 시각적으로도 불안정한 것을 불편해합니다.
다섯째. 변화는 규칙 속에 빛난다
변화를 극적으로 보여주는 방법은 규칙 속에서 보여주는 것입니다.
Chapter 02. Ratio
| 황금비율, Golden Ratio
우리가 주로 사용하는 데스크톱의 비율은 16:9입니다. 데스크톱 디바이스는 점점 가로로 넓어지고 있죠? 이건 사람의 눈의 구조 때문이에요. 눈의 좌우 구조는 화면이 가로로 넓어졌을 때 콘텐츠에 대한 몰입감을 높일 수 있었습니다. 그래서 21:9 비율의 파노라마 뷰가 나왔고 영화에서 많이 쓰이고 있습니다.
최근에는 모바일의 보편화로 인해 다양한 세로 비율이 발전하고 있는데요. 모바일 디바이스는 휴대성을 위해 기기의 크기가 커질 수 있는 한계가 있습니다. 그렇기 때문에 콘텐츠 몰입감을 위해서 디바이스 자체의 크기가 커지기 보다 베젤 얇게 만들어 스크린의 크기를 키우고 있죠.
실생활에서 사용되는 여러 제품들이 가진 비율은 대부분 황금비 1.618:1 에서 기준이 시작되는 걸 발견할 수 있어요. 주변에서 흔히 사용되는 신용 카드와 애플 아이팟은 황금 비율을 사용해 만들어져 시간이 지나도 안정적이고 아름답게 보이죠.
사실 황금비율은 전통적으로 편집에서 많이 사용되었는데요. 디자이너들이 논리를 설득하기 위해 사용될 수 있는 좋은 무기이기 때문에 적재적소에 잘 사용해야 합니다. 무엇보다 목적과 의도에 따른 디자인을 하는 것이 가장 중요하겠죠.
그럼 황금비율 이외에도 방법론적인 비율 방식이 있을까요? 사실 너무 많아서 모든 걸 알려드리기 어렵습니다. 각자가 학습을 통해 연습하여 사용하고 스스로의 기준으로 만들 수 있도록 지속적인 연습을 하는 것이 가장 중요합니다. 디자인에 비율을 활용하는 게 어렵다면 감보다는 숫자를 믿고 황금비율의 수치를 사용해서 비율을 먼저 잡아 보세요.
Chapter 03. Gird
| 설명이 들어간 선
초등학교 때 칸에 맞춰 맞춰 글씨를 또박또박 쓰기 위해 연습하던걸 기억 하시나요? 그 덕분에 점점 빈 공간에서도 줄을 맞춰 글씨를 쓸 수 있게 되었을 텐데요. 연습을 통해 그리드가 없어도 규칙을 지키고 정렬을 맞춰 공간을 사용할 수 있도록 연습하는 시간을 가져온 거예요.
그리드는 '설명이 들어간 선'입니다.
핵심을 전달하기 위한 그리드는 비례감, 조형감에 대한 논리를 설계하여 접근해야 합니다.
의미 없이 그리드를 쓰게 된다면 담긴 내용을 이해하는데 방해가 되기 때문에 그리드를 사용할 때는 의도를 가지고 활용해야 합니다. 그리드를 잘 활용할 수 있다면 말하고 싶은 것을 잘 정리하여 전달할 수 있게 되고 이는 곧 핵심을 전달하는 잘 만든 디자인으로 보이게 되겠죠.
그럼 어떻게 그리드가 활용되는지 예시를 통해 좀 더 살펴보죠.
Text Grid, Line Height
문단을 보면 같은 조형 Element 들은 비슷한 요소끼리 뭉치려는 힘이 있다는 게슈탈트 이론에 따라서 글자끼리 뭉쳐 보입니다. 그리고 글자와 빈 공간 사이의 비율을 계산한 것을 Line height라고 하는데요. 이 비율 차이에 따라 각각의 요소가 묶일 수 있게 간격을 설정해야 좋은 가독성을 만들 수 있습니다.
일반적으로 글자의 높이와 공간의 비율을 계산했을 때 Line height 1.3 정도가 가독성이 좋습니다. 만약 Line height 1.6 으로 설졍 했다면 글자 간의 간격이 글자 자체의 높이만큼 크기 때문에 그룹핑이 잘 이루어지지 않습니다.
한 가지 더 팁을 드리자면 디지털 서체에서 Display라는 폰트가 있는데요. 이 폰트는 읽기 위해서가 아니라 선언을 하고자 제작되었습니다. 그래서 Display 폰트를 쓰면 Line height가 줄어들기 때문에 실제 디자인하실 때는 본문체와 Display체를 섞어 쓰는 것은 추천하지 않습니다.
Graphic Grid
비주얼에도 그리드의 비율이 적용됩니다. 의도를 통해 각도를 만들어 오브젝트를 배치하고 비율을 만들어낼 줄 알아야 좋은 그래픽 결과물을 만들 수 있죠.
그리드를 잘 활용한 디자이너를 한 명 소개해 드릴게요.
요세프 뮐러 브로크만(Josef Muller-Brockmann, 1914~1996)입니다.
그는 스위스 그래픽 디자이너로 그리드 시스템을 통해 세계 어디서나 통용될 수 있는 규칙과 질서를 부여하는 것에 앞장섰고 객관적이고 기능적인 디자인을 추구하였습니다. 비율과 수치를 중시하여 작업을 하는 집요한 디자이너였지요.
하라켄야는 “백은 채워진 색인가, 비워진 색일까, 허공일까 공간일까”라는 질문을 던져 디자인할 때 무엇보다 여백을 중시해야 한다는 말을 남겼습니다. 비어 있는 것도 의도를 담을 수 있고, 디자이너가 여백을 다룰 수 있어야 콘텐츠를 의도대로 잘 전달할 수 있다고 말한 거죠.
그럼 디자인 무드(컨셉)를 표현하기 위해 어떤 것을 활용해야 할까요?
정답은 바로 프레임입니다. 프레임은 주변의 요소들을 활용할 수 있도록 도와주고 콘텐츠(내용)를 보이게 도와줍니다.
명품과 일반 상품을 오프라인에 전시할 때 무엇이 다를까요? 왜 명품은 명품으로 보일까요?
명품관에 가보면 주변을 깨끗하게 비워서 제품 하나만 돋보이게 배치합니다. 하나의 제품에 집중해서 빛을 쏘고 제품 간의 간격을 멀리 두죠. 하지만 일반 상품은 좁은 간격에 여러 가지 옵션을 한번에 보여줍니다.
이렇게 디자인에서 의도대로 콘텐츠를 보이게 하기 위해서는 그 주변을 잘 설계해야 합니다. 목적과 상황에 따른 콘텍스트를 고려해 그 주변, 프레임을 잘 설계해 주면 의도대로 무드를 전달할 수 있습니다.
지금까지 소개해 드린 다양한 방법들은 디자인에 도움을 주지만 디자인의 모든 것이 될 수 없습니다.
자신만의 디자인 감각을 찾는 것이 더욱 중요하죠. 그러기 위해서는 의도를 잘 담기 위한 꾸준한 연습이 중요하다는 것을 다시 한번 강조하면서 마무리 짓겠습니다.
Review
김경은, IX Senior designer
비주얼의 가장 기본인 조형과 미. 요소의 기준을 세우고 변화를 만들어 내는 것이 그림 외에도 통용된다는 것을 잠시 잊어왔던 것 같습니다. 이 강의를 통해 단순히 감각적인 디자인이 아니라 계산과 설계로 인한 아름다움이 얼마나 중요한지 배울 수 있었습니다. 또한 일상에서 아름답다고 느낀 디자인이 결국 이유를 가지고 의도를 통해 제작된 디자인이었음을 다시 한번 되새길 수 있었습니다. 감사합니다.
이선화, OP Senior designer
조형미를 통해 아름다운 디자인이 무엇인지, 미를 왜 느낄 수 있는지 원칙적인 부분을 정리해 주셔서 쉽게 이해할 수 있었습니다. 역시 기본에 충실한 게 가장 좋은 디자인이라는 것을 다시 깨닫게 되었습니다. 앞으로 사각형 하나를 그리더라도 설계하고 비율을 고려하여 좀 더 생각하고 그릴 것 같습니다. 많은 이야기를 해주셨지만 송CD님의 성실함과 디자인을 사랑하는 진지한 마음이 느껴지는 강의였습니다.
이세빈, UI designer
이론적인 원칙들이 미술뿐만 아니라 실제 영화나 텍스트, 장표, 디자인과 같이 다양한 곳에서도 활용이 되는 것이 흥미로웠습니다. 디자이너가 비주얼 작업물을 볼 때에 날카롭게 분석하고 이를 토대로 연습하여 의도된 디자인을 해야 한다는 것을 한 번 더 마음속 깊이 새기게 되어 유익한 시간이었습니다.
