같은 점에 대한 의문
디자인을 접하고 지난 20년 동안 많은 경험과 영광스러운 프로젝트를 만나면서 조금씩 디자인을 이해하기 시작했지만 마음속에서는 또 다른 의문이 자라고 있었다. 디자인을 진행하면서 대부분 초기에는 미션에 부합하는 독창적 컨셉을 창조하는데 많은 시간을 할애하지만 이후 프로토타입이나 가이드 작업을 하며 매번 반복되는 이 과정에서 무엇인가 공통점이 있는 것은 아닐까 하는 의문이다.
다양한 디자인을 한다는 것에 다른 점과 같은 점이 보이기 시작한 것일까?
나는 얼마 전부터 이 같은 점에 주목을 하기 시작했다. 각자 다른 성격의 프로젝트를 진행하면서 같은 점을 보다 쉽고 명확하면서도 빠르게 완성할 수 있다면 다른 점에 더욱 많은 시간을 들여 훨씬 뛰어난 크리에이티브를 완성할 수 있지 않을까?
이 글과 내용은 같은 점에 대한 고민과 의문에 대한 이야기이다.
글보다는 역시 말이 편하지만 나의 짧은 경험과 서투른 지식이라도 누군가에게 도움이 될 수 있다면 하는 마음으로 나름 발견의 희열을 공유하고자 한다.
이성과 감성
우리는 이성과 감성을 가지고 있지만 디자인은 아직 꽤 감성적인 느낌이다.
디자이너는 구조, 정보, 설계, 가이드, 법칙, 정책, 손익 등 이성적 영역과 브랜드의 가치와 감성적인 경험, 시각적 완성도를 아우르는 감성적 영역을 넘나들며 결국 철저히 계산된 룰에 의해 최대한의 효과를 거두는 경험을 만드는 사람들이다.
"모두를 깜짝 놀라게 하는 독창적인 크리에이티브!"
"감각적인 레이아웃과 심미성 높은 타이포!"
"이제껏 세상에 없던 새로운 기능!"
디자이너라면 누구나 1순위로 생각해봄직한 이슈지만 지금의 시대는 '보기 좋은 디자인'과 '쓰기 좋은 디자인'이 공존하는 세상이라 그래도 정말 1순위인지 의심할 시기라고 생각한다. 오히려 지금의 디자이너들에게 더욱 요구되는 능력은 이해되는 디자인이며 쓰여 지는 디자인이 아닌가...
기획자, 마케터, 디렉터, 퍼블리셔, 개발자 등 디자인과 관련하는 사람들과의 대화는 여전히 대부분 감성적으로 이루어지고 있다. 아직도 많은 커뮤니케이션은 感에서 感으로 이루어지고 있지만, 시대의 흐름은 이제 감이 아닌 명확성, 계획성에 바탕을 둔 시스템 디자인을 지향하고 있다.
과거 웹 초기에 브랜딩에 바탕으로 둔 그래픽 인터페이스 기반의 디자인에서 서비스를 주로 하기 위한 컨텐츠와 레이아웃 기반의 디자인으로 바뀌어 가는 것이다.
디자이너에게도 시각적 요소의 구현 능력보다 비즈니스 레벨의 이해와 그 판을 직관적으로 시각화하는 능력이 절실한 현실이다.
심지어 Oliver Reichenstein은 웹디자인의 95%가 타이포그래피와 레이아웃으로 이루어진다고 말한다. 특히 반응형 웹은 타이포와 레이아웃의 계산법이지 않은가...
% 디자인
사용자의 터치 포인트가 시간이나 상황에 따라 다양해지면서 이런 서비스 기반의 디자인들이 셀 수 없이 많은 디바이스에 일관성 있게 적용되어야 하는 부분도 중요한데 이제 단순히 화면에 반응하는 1차원적 방법론을 뛰어넘어 하나의 시스템에서 일관성을 유지하며 각 상황에 맞는 사용성을 가지고 적합한 정보를 노출하여 최적화된 경험의 밸런스를 맞추어야 한다.
다양한 디바이스의 존재 및 고려 사항은 모니터 화면 기준의 고정적 픽셀 기반의 디자인에서 % 기반의 능동적 디자인으로 전환해야 하는 가장 큰 이유이기도 하다.
어디에서 어디까지 무엇을 어떻게 보여줄 것인가를 고민하며 화면을 디자인해야 하는 상황에서는 특히 디자이너만의 계획과 룰이 필요하다.
빅데이터
또한 수많은 사용자들에게서 실시간으로 생성되고 연결되는 정보, 빅데이터에 대한 부분도 간과할 수 없다. 이제 고정적 정보를 가공하는 느낌이 아닌 지속적으로 변해가는 정보를 담을 그릇을 디자인해야 한다. 이것도 역시 고정이 아닌 유동적인 디자인에 해당된다.
O2O
이제 각 분야의 디자인도 각자의 영역을 허물고 있다.
이미 디지털 매거진, 북, 3D, 애니메이션, 제품 디자인까지도 디지털로 전환되거나 협업관계를 이루고 있으며 사용자 경험 또한 익숙한 디지털 경험을 선호하게 된 것 같다. 오프라인과 온라인 비즈니스의 서비스 융합도 가속되고 있으며 디지털과 아날로그를 구분하는 것 자체가 이젠 구시대적 발상으로 여기게 되었다. 디자이너의 구분도 전문적인 영역에서는 여전히 필요하겠지만 더욱 절실한 것은 이 모두를 아우르는 경험을 디자인하는 사람이다.
시스템&모듈
이러한 시스템 디자인, 정보 디자인을 하기 위한 방법으로 모듈 디자인을 적용하고 있는데 약간의 차이는 있지만 카드 디자인이라고도 불리는 이 방식은 다양한 내용을 가장 보기 쉽게 담으면서도 여러 형태로 변화 가능하여 효율적인 디자인 방식이며 커머스, 큐레이션, 소셜 네트워크에서 기본적 방법이라고 생각되고 거의 모든 디지털 디자인에서도 적용할 수 있는 유용한 시스템 디자인의 한 부분이다.
타임라인
앞서 언급한 빅데이터와 같이 일반 정보를 아우르는 화면 디자인 또한 시간의 흐름을 고려해야 한다. 고정된 배치와 변화 없는 내용이 아닌 흐르는 시간과 사용자의 반응에 따라 유기적으로 변화하는 내용을 담는 인터페이스 디자인이다. 한마디로 살아 있는 디자인을 해야 하는데 정보가 살아 있으려면 시간의 개념이 필수적이라는 것이다. 우리가 살아서 움직이고 무언가를 한다는 것은 시간 없이는 불가능하다. 서비스 역시 시간과 함께 움직이지 않게 되면 그 흐름과 함께 무용지물이 된다.
많은 스타트업에서는 이제 아이디어 위주의 서비스 런칭을 배제하며 철저히 데이터 기반의 타임라인 비즈니스를 계획하고 있다. 시간의 흐름과 사용자 수 및 반응에 따라 기능을 조절하고 서비스의 방향을 잡는 것이다.
살아 있는 텍스트
여기에 해외에서 먼저 활성화된 시스템 폰트의 적극적 사용은 다양한 디바이스 대응과 모바일 최적화, 검색 용이성, 데이터수집 및 공유를 위해 필수적인 부분이다.
심미성과 가독성 등 고려해야 할 요소가 있겠지만 PC나 모바일 디바이스의 기본 시스템에서 제공하는 폰트로 디자인하는 것이 가장 바람직하다고 생각한다.
다만 한글의 경우는 일부 시스템 폰트의 제약을 고려하여 범용성 있는 웹폰트를 사용하는 것도 고려해 볼만하다. 핵심은 디바이스의 발전과 함께 과거 그래픽 폰트의 사용이 현저히 줄고 있다는 것이다. 이미 전통적 그래픽 폰트들도 웹폰트로 재개발되는 현상도 가속화되고 있다. 이 역시 죽은 텍스트가 아닌 살아있는 텍스트를 위해서 스스로의 몸부림 같은 느낌이다.
몇 년 전까지만 하더라도 낮은 해상도에서 궁여지책으로 이미지 텍스트를 더욱 선명하게 보이기 위해 한 픽셀까지 조정하는 작업을 했던 기억을 생각하면 놀라진 기술의 발전에 격세지감이다.
컴포넌트
시스템디자인의 필수적 요소인 재사용 가능한 디자인 에셋이나 인터랙티브 요소, 모듈 디자인 등을 확장성과 완성도 있게 미리 만들어서 실 작업 시간을 줄일 필요가 있다. 부트스트랩 등 디자인과 함께 코딩과 개발까지 완성된 컴포넌트들도 오픈소스로 제공되고 있으며 매번 반복하는 어쩌면 아까운 이 시간들은 아끼고 모아서 사용자 조사나 시스템 연구에 할애하는 편을 추천한다.
디자인은 건축
몇 가지 언급한 이슈들을 종합하면 디지털 미디어 디자인의 큰 흐름은 시스템 디자인의 방향성으로 전진하고 있고 이를 만족시키기 위해서는 감성이 아닌 이성적 디자인이 중요해지고 있다는 것이다. 특히 건축에서의 치밀한 설계 과정과 유사한 디자인 설계 과정은 이제 선택이 아닌 필수로 다가오고 있다.
또한 다양한 디바이스의 존재와 계속되는 새로운 출현에서 효율성과 일관성을 높이기 위해 비율을 고려한 디자인을 해야 하는데, 초기에는 다양한 사이즈를 미리 모두 만들어서 검토하였지만 적응기에 들어선 지금은 정확한 배율을 알고 디바이스 사이즈에 따라서 정보의 선별을 하는 등 치밀한 전략이 필요하다.
채움과 비움, 이성과 감성, 안정과 혁신, 디지털과 아날로그, 시각과 기능, 전통과 현대가 공존하고 있다. 점점 복잡성과 다양성이 우리를 괴롭혀 오는 시기에 '기본'은 철학적으로 심리적으로 매우 중요한 키워드라고 생각한다. 조화, 비례, 리듬, 강약 등 디자인의 기본이라는 개념도 포함되지만 누구나 어떤 디자인을 할 때 어머, 이건 이렇게 해야 해!라는 방식의 기본일 수도 있다. 그래서 가장 이해가 빠르고 기본을 적용하기에 정확할 수 있는 '수'를 선택했다. '수'는 분명하고 치밀한 성격이며 타협을 모르고 끝까지 정답을 찾아가는 끈기와 노력의 소유자이다.
수많은 디자인을 하며 '수'를 떠난 적은 없었던 것 같다.
하지만 나 자신도 '수'에 대해서 이전에는 한 번도 깊게 생각해 본 적이 없었다.
브로슈어 디자인 수정을 위해 필름을 긁고 패키지 모형을 손맛 좋게 다듬었던 아날로그의 기억과 함께 디지털 디자이너라는 제한된 틀이 은연중에 싫었던 것인지 숫자에 대해 무지하다고 스스로 인정해버린 결과인지는 모르겠다.
이 세상의 모든 것은 정수로 표현할 수 있다는 피타고라스의 말을 수학이 아닌 디지털에 대입하여 생각해 보면 왜 이제까지 디지털의 근본을 생각하지 않았나 후회가 든다. 우리는 디지털 세상을 살고 있으며 심지어 디지털로 디자인을 하고 있으니 디지털에서 어떤 원리로 무엇이 표현되는가 하는 것은 실무에 바로 응용할 수 없더라도 직간접적으로 무척이나 중요한 부분이다.
"e를 π와 i를 곱한 수로 거듭제곱하여 1을 더하면 0이 된다… 어디에도 원은 없는데 하늘에서 π가 e 곁으로 내려와 수줍음 많은 i와 악수를 한다. 그들은 서로 몸을 마주 기대고 숨죽이고 있는데, 한 인간이 1을 더하는 순간 세계가 전환된다. 모든 것이 0으로 규합된다."
영화 박사가 사랑한 수식에 보면 오일러의 공식이 등장하는데 박사는 이 수식에서 철학적이면서도 감성적인 해석으로 세상을 바라본다.
어쩌면 지금까지 또 앞으로 할 이야기들은 박사의 시선과 방향을 같이 하는 것 같다.
논리적 디자인을 바탕으로 나만의 감성을 부여하여 세상을 바라보는 것...
수와 수학은 가장 기본적인 논리이며 이 세상을 이루고 있는 모든 것을 증명하려고 한다. 디지털 디자인 또한 디자이너의 감성이 수를 바탕으로 논리적으로 표현되고 있다. 그래서 이제 그 '수'를 찾아보고 디자인에 어떻게 적용하는지를 살펴본다.
나에게 수란?
나를 이루고 있는 숫자는 무었일까?
내가 좋아하는 컬러, 전화번호, 비밀번호, 우편번호, 디지털 이름, 발 사이즈, 오늘의 날짜, 무엇이든 목표로 하는 수치, 선호하는 숫자와 나이,
지금은 몇 시고 나는 무엇을 하고 있는가? 지금 좀 추운데 몇 도지? 청담에서 종로로 가는 버스 노선은? 오늘 술이 잘 받는데 이거 도수가 좀 약한거 같아~
이처럼 현실 생활에서 나와 숫자의 관계만 보더라도 꽤 중요한 사실들을 말해주고 있다는 것을 알 수 있다. 어떤 표현의 '수'뿐만 아니라 '수'가 말해주고 있는 것을 들여다 볼 필요가 있다. '수'가 표현하는 본질 말이다.
내 고등학교 시절 수학 선생님은 왜 이렇게 흥미로운 과목을 그렇게 재미없게 가르치셨을까... 마흔이 넘은 나이에 다시 수학을 즐겁게 공부하며 인생과 디자인에 밀접한 관계가 있다는 것을 이제야 알게 된 것은 그나마 다행일 수도...
수학은 '수'와 '수의 법칙'에 대한 그림이라고 생각할 수 있기 때문에 모든 구축에서 설계의 기본적 수단이 될 수 있다. 사칙연산을 벗어나 중고등학교 시절 공부했던 내용들만이라도 잠깐 떠올려보면 수학은 우리 주변을 이루고 있는 모든 것에 녹아들어 있다는 것을 알 수 있다. 디자인에서도 가장 중요한 대비와 리듬, 강조, 조화들도 수학적 접근을 통해 조금이라도 논리적으로 대응할 수 있을 것이다.
기하학
점은 쪼갤 수 없는 것이다.
선은 폭이 없는 길이이다.
선의 끝은 점이다.
점으로부터 점으로 직선을 그릴 수 있다.
점과 점을 연결하는 직선은 하나뿐이다.
점을 중심으로 임의의 길이를 반지름으로 하는 원을 그릴 수 있다.
유클리드 기하학의 점, 선, 면에 대한 정의는 디자인에서도 예외 없이 가장 기본적이면서도 중요한 요소들이다. 우리는 점, 선, 면을 어떻게 알고 있을까?
점이 이어지면 선이고 선이 겹치면 면이 되는 것인가?
원은 무엇인지 정의할 수 있고 정사각형, 정삼각형, 정오각형은 어떻게 정확히 그릴 수 있는지 아는 디자이너는 그리 많지 않다. 아니 적어도 내가 물어본 디자이너에게서는 만족할만한 답을 듣지 못했다. 어떻게 된 것일까? 점, 선, 면은 물론이고 이것들이 다양하고 복잡하게 얽혀있는 고도의 레이아웃과 멋진 그래픽을 다루는 디자이너들이 어떻게 점, 선, 면을 제대로 말할 수 없는 것일까?
기본은 기본일 뿐일 수도 있지만 이런 기본을 제대로 이해하면서 디자인을 한다면 그 깊이와 성숙도가 높아지는 것은 물론이고 그렇게 힘들다는 확신에 찬 디자인을 할 수 있을 것이다.
유클리의 정의와 공리를 바탕으로 일러스트레이터에서 정삼각형을 그려보았다.
먼저 길이 100px 선을 만들고 이를 반지름으로 하는 200px 원을 두 개 만들어서 선의 양 끝점을 원의 중점에 위치시면 원끼리 교차하는 지점이 생기는데 양끝점과 교차점을 이어주게 되면 정삼각형이 만들어진다.
물론 일러스트레이터나 기타 그래픽 프로그램은 이런 기본적 도형을 쉽게 만들 수 있는 기능을 제공하고 있지만 도형이 만들어지는 방법이나 원리들을 알고 있다면 숨겨진 공간을 발견하거나 면을 논리적으로 분할하거나 계산을 굳이 하지 않고 비례를 만드는데 활용하기가 쉬워진다.
10010101100110
디지털은 쿨하게 0과 1만을 사용하여 모든 것을 표현한다. 이를 이진법이라 하는데 각 자릿수에 맞게 2의 거듭제곱을 이용하여 더하면 십진법의 수가 된다.
즉 1부터 10을 이진법으로 표현하면 0, 1, 10, 11, 100, 101, 110, 111, 1000, 1001. 1010이다. 우리가 PC나 모바일 디바이스에 보는 이미지, 음악, 동영상, 텍스트 등은 모두 이진법을 사용하여 보이기 때문에 적어도 계산법 정도는 알고 있는 것이 좋겠다.
디지털에서의 정보 단위에 대해서도 기본을 살펴볼 필요가 있다.
디지털 최소의 정보 단위인 비트, 하나의 비트는 0이나 1의 값을 가질 수 있다. 8비트는 1바이트인데 여기서 기억해야 할 부분은 모두 짝수이며 단위는 배수의 개념이라는 것이다. 디자인에서 색상 값이나 폰트 사이즈, 여백 단위, 그리드 설계 등에서도 홀수보다는 짝수나 배수를 사용한다면 계산의 용이성과 단위의 일관성을 살릴 수 있다. 즉 예를 들어 폰트 사이즈는 16, 20, 24, 28...등으로 색상 값은 R48, G192, B16, 여백 단위는 8px나 16px로 정하는 것이다.
디스플레이 해상도의 종류와 그 수치들을 살펴보면 모두 짝수와 배수로 이루어져 있다는 사실을 알 수 있다. 하지만 앞으로 기술의 발전에 힘입어 변칙적인 해상도의 등장도 있을 것이기 때문에 필수보다는 선택적으로 적용하기를 바란다.
피보나치수열
물음표의 숫자는 무엇일까? 정말 어릴 때부터 많이 들었던 피보나치수열은 앞자리 두 개의 숫자를 더한 결과를 다음 자리의 수로 정하는 것인데 계속 수열이 진행되면 1:1.62의 비율로 수렴되며 이는 황금비율에 속한다. 의외로 디자인에 적용해보면 조화롭게 표현되어 명료하게 법칙의 의도가 드러나는 것을 알 수 있다.
실제 폰트 사이즈를 수열과 같이 적용하여 크기와 면적의 비례를 살펴보면 전체가 모두 비례로 조화된다고 할 수 있다.
이 수열의 수를 이용하여 그대로 폰트 사이즈를 적용해서 아이폰 소개 페이지를 5분 만에 화면을 만들었는데 미세한 조정까지 필요 없을 정도로 완성도 있는 모습이다. 대규모 프로젝트에서 수열의 비례를 활용한다면 5단계 6단계처럼 요소의 계층이 필요한 경우 유용하게 활용할 수 있다. 물론 심지어 예제처럼 하나의 독립된 화면에서도 응용하기 좋다.
피타고라스의 정리
피보나치와 함께 자주 거론되는 피타고라스의 정리는 직각삼각형에서 직각을 끼고 있는 두 변의 제곱의 합은 빗변의 길이의 제곱과 같다는 것이다. 예제의 1번 답은 10이며 2번은 2√13이다.
피타고라스는 비례를 이용하여 현대음악에서 기본적 체계인 옥타브, 즉 음계를 만들었다. 대장간에서 다른 날보다 유난히 좋게 들렸다는 망치 소리를 들으며 소리를 내는 것의 길이와 소리의 높낮이와의 수학적 연관성을 발견한 피타고라스.
EBS의 영상을 보면 기본적 비례 체계를 응용하여 조화로운 음을 만드는데 수학을 디지털 디자인에 응용할 경우에도 참고할 수 있을 것이다.
피타고라스의 정의가 필요한 경우를 생각해보면, 요즘 끊임없이 나오는 모바일 디바이스가 가장 적당할 것이다. 디바이스 정보를 찾아보지 않아도 가로 세로 높이 값과 디스플레이의 인치 정보만 알면 해상도를 구할 수 있다. 인치당 픽셀수를 뜻하는 PPI는 아이폰6의 경우 대각선 픽셀수는 1530이므로 4.7인치로 나누게 되면 326 정도의 PPI를 갖는다. 공식을 대입하면 다른 디바이스에서도 쉽게 해상도를 구할 수 있다.
방정식
또 하나 수학에서 중요한 부분은 방정식이다.
디자인을 진행하다 보면 그리드를 설계할 때처럼 경우의 수를 대입할 경우가 발생하게 되는데 일일이 그려보지 않아도 방정식을 활용하면 쉽게 계산을 할 수 있다.
역시 EBS의 방정식 설명을 보면 왜 실생활 및 디자인에서도 방정식이 필요한지 느낄 수 있을 것이다.
방정식을 직접 활용하는 사례는 디자인 초기 작업에서 빈번하게 등장하는 그리드 설계이다. 원하는 단의 갯수와 여백, 높이 등을 구하는데 사칙연산을 활용하기 보다는 공식을 이용하면 편리하게 계산하여 적용할 수 있다. 전체 페이지 넓이는 단의 넓이에 여백의 넓이를 더해서 원하는 단을 곱하면 되니 공식으로는 r=(x+2y)i가 나오게 된다. 가장 보기 좋은 단의 높이를 구할 때는 단의 넓이에 φ=1.61를 곱한다.
예를 들어 전체 넓이는 1080 여백은 8픽셀을 대입하면 단 넓이는 200이며 단 높이는 약320이다. 단 넓이를 미지수로 놓고 수식을 만들어 해상도와 단수, 여백을 번갈아 적용하며 테스트하여 최적의 그리드 시스템을 제작한다.
자료를 찾아보니 이미 자동 계산을 하도록 개발해 놓은 사이트도 있다.
계산식이 유용한 사례를 보다가 최근 아이폰6+의 해상도에서 실제 1픽셀을 표현하려면 디자인에서 몇 픽셀을 표현해야 하는지 궁금해졌다.
몇 가지 수학적 방법을 통해 계산한 결과 리얼 픽셀은 RP=1.15i/3이라는 식이 도출되었다. 아이폰6+의 해상도는 1080x1920이며 애플에서는 x3을 적용하기 위해 실제 작업 사이즈는 1242x2208로 정하고 있다. 이를 87%로 축소하여 아이폰에서 보여주게 되는 것이다. 아이폰 앱 등을 디자인하기 위해서 필요한 좌표값은 1/3인 414x736인데 이 사이즈로 작업을 한다면 x3을 해서 1242x2208의 해상도를 가진다. 실제 해상도와 작업 사이즈는 1920/2208=1/1.15의 비율을 갖고 있기 때문에 실제 1픽셀을 표현하려면 1.15픽셀이 되어야 하고 좌표 체계에서는 이것의 1/3인 0.38로 리얼한 1픽셀을 만들 수 있다. 어디까지나 계산적인 이야기이며 모바일 디바이스들은 해상도가 충분히 높아서 굳이 이런 계산을 하지 않아도 선이 뭉개지거나 하는 불상사는 생기지 않을 것이다.
황금비율
또 하나 디자인과 가장 밀접한 관계가 있는 개념은 황금비율이다.
오랜 역사 속에서 시각적으로 가장 아름다운 비율을 증명하기 위해 모두가 노력해 왔지만 아직까지 이것이 정답이라고 말할 수 있는 개념은 없다. 하지만 수학적으로도 그렇고 여러 가지 사례에서 발견된 황금비율의 법칙을 활용한다면 기존의 체계에 많은 도움이 될 수 있다고 생각한다.
황금비율의 정의는 하나의 선이나 면에서 비례적으로 가장 보기 좋은 어떤 지점을 정하는 것이다. 선에서 한 점으로 두 개의 선을 나누었을때 긴 선과 짧은 선의 비율이 1.618:1의 비례를 가지며 나누기 전의 가장 긴 선과 나눈 긴 선의 비율도 역시 같다.
사실 황금비율의 개념은 시각적으로 굉장히 중요한 부분임에도 불구하고 많은 디자이너들이 개념 이상의 노력을 못하고 있는 것이 참 아쉽다는 생각을 한다.
디자인 툴에서 간단한 작도만으로 황금비율을 만들 수 있는데도 계산을 해야 한다는 오해 때문에 실 작업에서 응용하지 못하는 것 같아서 일러스트레이터에서 작도를 하였다.
스티븐 마쿼트 박사는 이 비례 개념을 활용하여 황금마스크를 만들어 성형에 활용하고 있다. 사실 사람의 얼굴이라는 것은 눈, 코, 입, 이마 등의 비율만으로 매력도를 측정하긴 무리가 있지만 원판 불변의 법칙 같은 말들도 있기 때문에 어느 정도의 영향은 있다고 생각한다. 황금마스크를 내 얼굴에 적용했을 때 잘 안맞는 것을 보면 더욱 확실한 듯하다.
얼굴 뿐만 아니라 손가락 마디, 상체와 하체, 손과 팔 등 인체의 곳곳에도 황금비율에 부합하는 비례가 성립된다.
하지만 이 역시 정확하게 황금비율이라고 단정하긴 무리가 있는 것도 사실이다.
우리가 받아들일만한 부분은 인간의 눈으로 아름다움을 볼 때 그 안에서는 어떤 이유들이 존재하고 그중에 하나로 볼 수 있는 비례라는 것은 어느 정도의 신빙성을 갖기 때문에 무시할 수 없다는 사실을 인지하는 것이다.
레오나르도 다빈치의 예술 작품과 파르테논 신전, 모나리자, 자연현상, 제품 디자인이나 로고타입 등 우리 주위에서 발견할 수 있는 시각적 요소 중에서 황금비율에 근접하는 사례도 어렵지 않게 찾아볼 수 있다.
우연히 측정해본 유투브나 페이스북 들도 황금비율을 적용한 것을 보면 사용자들이 오랜 시간 지속적으로 접근하여 사용하는 서비스 디자인이나 제품 디자인에서는 더욱 중요한 개념으로 자리 잡는 듯 하다.
그러나 작정하고 황금비율을 컨셉으로 디자인하거나 이 수치를 정확하게 반영한 사례 이외에 우리가 실제로 그동안 수 세기에 걸쳐 증명되었다고 알고 있었던 유명한 작품이나 건축, 자연현상들을 정확히 측정하면 수학적으로 정의하고 있는 황금비율에는 부합하지 않는다. 대부분 1.4에서 1.8사이의 비례를 가지는 것으로 밝혀졌는데 이것을 고려한다면 인간의 눈은 아주 정확한 하나의 비례 수치만이 아닌 아름답다고 느껴지는 범위가 있다고 이해하면 좋을 것이다.
페히너의 법칙
시각을 포함한 감각을 다루는 학자의 법칙 중에서 참고할 만한 것은 페히너의 법칙이다. 웨버의 법칙에 바탕을 두고 있으며 ‘감각의 양은 그 감각이 일어나게 한 자극의 물리적인 양의 로그에 비례한다’라는 법칙이다. "변화를 감지하기 위해서 증가되어야 하는 자극강도는 표준자극의 강도에 비례한다." 설명하자면 인간은 어떤 자극의 변화를 느끼기 위해서는 감각의 크기가 비례적으로 늘어나야만 한다는 것.
우리가 실제 어떤 현상이 반복되더라도 그 현상의 강도가 전에 경험했던 것과 같거나 약간 크더라도 무감하다고 느끼는 것을 보면 이 법칙이 잘 들어맞는 것 같다.
지금까지 디자인에서의 현상과 이슈, 왜 수와 수학적 논리가 중요한지 또 그에 관련한 법칙이나 수식을 살펴보았다. 하지만 감성적인 디자이너들은 대체적으로 수에 약하다. 감성과 이성이 공존하는 것 자체가 모순이라고 볼 수도 있다.
감각적으로 디자인하는 것이 차라리 더 좋은 경우도 있겠지만 지금 이야기하고 싶은 것은 그렇지 않은 경우에서도 여전히 감각으로만 할 수 있겠냐는 스스로의 반문에서 출발한다. 여전히 수와 수학은 영역 밖에서 존재하는 것이라고 생각할 것이 아니라 그 영역으로 들어가서 우리의 영역과 공존할 수 있는 것이 무엇인지 찾아봐야 한다.
수학에서도 무리수라는 개념이 있다. 영원히 끝나지 않는 수... 철학적으로는 디자이너들에게 이 무리수를 강조하고 싶다. 정확함을 추구하는 수학에서도 끝나고 싶지만 끝나지 않는 수처럼 디자인에서도 아름다움의 근사치를 향해 가는 수많은 디자이너가 있는 것이 아닐까?
디자인에 정답은 없다. 끝나지도 않을 것이다. 하지만 그 어딘가 궁극의 아름다움은 존재할 것이고 우리는 끝까지 파헤치고 달려나간다. 이 내용들이 열정의 땀을 흘리는 디자이너들에게 조금이라도 도움이 되었으면 한다.
실무디자인 적용
Design, Design, Design
이제 컬러, 타이포그래피, 그리드 등 디자인 작업에서 기본적인 영역에 대해서 수와 수학이 어떤 역할을 하여 디자이너들에게 단비가 될 수 있는지 살펴보자.
인간의 감각 중에서 시각 의존도는 85%이고 나머지 15%는 후각, 미각, 촉각, 청각이라고 한다.
그만큼 시각은 디자인에서도 가장 중요한 감각이기 때문에 우리가 보는 것들에 대해 좀 더 원론적으로 접근할 필요가 있다. 인간은 빛을 통해 색을 보며 이 색을 통해 무엇인지를 구분하며 감각적으로 감성을 느끼게 된다. 색은 빛의 넓은 영역에서 조그만 틈처럼 작은 범위이다.
프린팅 영역과 달리 디지털에서는 우리가 보는 빛과 유사하게 스스로 광을 가진 요소의 결합으로 색을 표현하는데 빛의 삼원색인 Red, Green, Blue의 조합으로 약 1600만 가지 색상을 보여준다.
0부터 255까지의 RGB 값으로, 100x160 이미지의 경우 16000개의 픽셀과 x3인 48000의 숫자로 표현한다.
R, G, B는 빛의 가산 혼합 방식으로 작동하는데 레드와 그린이 합쳐지면 옐로우가 만들어지며 레드와 블루가 합쳐지면 마젠타가 된다. 빛의 삼원색에서 서로 마주하는 색상은 보색이며 광원에서 원색을 빼면 보색이 남고 보색과 다시 원색을 합치면 광원이 되는 것이다.
RGB컬러
디지털에서는 삼원색의 자리에 256가지 색상을 숫자로 표현하는데 이를 다시 16진법을 사용하는 헥사코드로 변환하여 사용한다. 여기서 익숙하긴 하지만 또 낯선 헥사코드에 대해 알아볼 필요가 있다.
앞서 2진법에 대해 언급했었는데 0부터 알파벳 F까지 16개의 숫자로 표현하는 16진법은 이보다 더 간단하고 볼 수 있다
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
RR, GG, BB로 보며 각 자릿수 0, 1에 맞게 16을 곱하여 두 자릿수를 더하면 #ff0000은 255.0.0이 되고 R이 255 즉 100%이므로 순색 레드 컬러이다.
컬러코드
코드나 숫자만 보고 RGB 컬러 체계에서 색상을 유사하게 상상하기는 어렵다. 색상 스펙트럼과 채도, 명도로 구분하는 HSB 체계에 비해 빛의 방식인 RGB는 인간이 조절할 수 있는 것이 아니기 때문이다. 하지만 많은 연습을 한다면 어느 정도는 가늠이 될 것이다.
색상 자체가 영역이 존재하며 이 영역에 수의 개념을 더하여 기존의 표색계 같은 것이 만들어졌다. RBG 360도 색상환을 만들어서 15도씩 영역을 나누면 24가지의 색상환이 나오게 되는데 이 색상환으로 기존 검증된 배색 원리를 수학적으로 적용할 수 있다.
보색은 마주 보고 있는 부분 즉, 180도이며 타겟 컬러 X에 180을 더하거나 빼면 보색 C가 나오게 된다. 마찬가지로 등간격 조화색이나 유사색 조화로 공식을 대입하면 정확한 색상 값을 얻을 수 있다.
물론 컬러피커에서 감으로 찍어서 하는 기존의 방식에 비해 번거로울 수는 있지만 이론적으로 정확한 컬러를 선정하고 다시 그 컬러에 감을 입힌다면 어떨까? 미국의 색채 학자 저드(Judd, D. B.)는 이렇게 말했다.
"모든 색채의 조화는 질서 있는 원칙에 따라 선택된 배색에서 생긴다."
디지털에서는 그래픽이나 일러스트 작업이 아닌 이상 아이덴티티 컬러나 그에 따른 배색의 사용은 1에서 3가지 색 정도를 가장 많이 쓰기 때문에 감보다는 원칙을 통해 결과를 도출하고 여기에 디자이너의 개성을 부여하는 방식으로 색상 작업 하기를 바란다.
수학적 배색 예시를 위해 피보나치수열을 적용하여 색상을 추출하고 여기에 색상과 명도 채도 값을 개성적으로 조절하여 색상을 얻은 결과이다.
피보나치수열이나 이 비율이 색상의 상환 값과 관계된다는 이론은 없지만 조화로운 간격의 의미는 있다고 생각한다. 이론적으로 검증된 방식으로는 비렌의 배색을 들 수 있는데 순색과 백색, 흑색을 정삼각형 꼭짓점에 두고 이 변들 사이에 있는 색상은 모두 조화롭다고 주장한다. 나는 실험적으로 여기에 황금비율에 부합하는 거리의 색을 추출하고 정삼각형을 뒤집어 순색의 보색까지 적용하여 색상을 추출하였는데 이를 나름 골든 트라이앵글 배색이라고 부른다. 두 세 가지 컬러 시스템을 제작할 때 유용할 것 같은 느낌이다.
웨버이론
컬러에 대해 유심히 봐야 할 이론은 페히너의 법칙이다. 페히너의 법칙은 웨버의 법칙에 근간을 두고 있는데 웨버는 K = △I / I라는 공식을 만들었다.
이 이론을 바탕으로 인간에서 빛의 강도는 8%라는 점에 주목하였다.
즉 8% 이하로 조명이나 색상이 변하면 거의 느끼지 못한다는 의미이다.
디자이너가 디자인 툴을 사용하여 1670만 가지 컬러 중에서 디자인에 의미 있는 컬러를 찾아내는 것은 너무나도 힘들고 고단한 과정이다. 이렇게 많은 컬러가 매번 필요한 것인가? 그리고 항상 처음부터 이런 많은 경우의 수에서 찾아야 하나?
이런 의문을 시작으로 웨버의 이론을 적용하여 기존의 컬러 값에서 사이 값을 삭제하는 개념으로 단계를 구분 지었다.
기존 RGB 값들을 32값 단계로 계층을 만드니 RGB각각 80가지, 총 240가지의 컬러로 수렴되었다. 현재는 RGB 전체 값을 대상으로 만든 예시이지만 특정 컬러 영역이 있다면 더욱 좁아진 경우의 수를 추출할 수 있을 것이다.
실제 디지털 컬러에서도 이런 이론이 적용되는지 알아보기 위해 실험을 해보았는데 특정한 법칙을 발견했다기 보다는 이론처럼 작은 변화에 대해서는 인지가 힘들다는데 동의한다.
위 그림에서 좌측은 블루 컬러에서 레드와 그린 값을 8씩 증가시켜본 결과인데 대부분의 사람들이 모두 다 같은 컬러라고 인지하며 우측은 320면적에 타겟 컬러에 변화 컬러를 포함시켜 봤을 때 아주 미세함을 무시한다면 적어도 32 이상의 변화가 생겨야 인지가 가능하다는 결과이다.
당연히 포함시켜 서로 비교했을 때는 영역에 반비례할 것이다. 960 사이즈의 면적에서는 16 정도의 차이를 두어야 변화의 인식이 가능하다.
이런 이론과 실험을 결과에서 추천하고 싶은 방식은 256에서 최소 8단위를 사용하여 컬러를 표현하여 선택의 폭을 줄이고 16단위 이상을 사용하여 컬러 차이를 계획하는 것이다. 256, 8, 16법칙이다. 아래의 그럼처럼 굳이 R253이라는 컬러 값을 사용할 필요는 없어 보인다. 8로 나눌수 있는 248을 사용해도 무방할 것이며 특정 컬러에서 다른 컬러를 사용할 때 적어도 RGB값 16 이상의 차이를 줘야 다른 컬러로 인식한다는 것이다.
디자이너 각자 또 다른 이론을 바탕으로 디지털 디자인만의 색상 법칙을 만들어 사용한다면 논리를 바탕으로 시간까지 절약할 수 있겠다.
웹타이포그래피
자, 이제는 타이포그래피 관련한 이야기이다.
포토샵 등 디자인 툴에서 아무것도 조절하지 않고 타입을 적었을 때 자동적으로 생성되는 시스템 체계를 알아보기 위해 폰트 사이즈, 폰트 그래픽 사이즈, 행간, 자간을 검토해보니 신기하게도 법칙들이 보인다. 폰트 사이즈가 8, 16, 32, 64, 128, 256으로 증가되면 그래픽 사이즈(순수한 그래픽의 픽셀)로 역시 같은 비례로 증가하고 행간과 자간 역시 마찬가지로 증가한다. 당연해 보이겠지만 이 사실에서 폰트 크기는 12, 16, 20, 24등 4의 배수로만 사용하며 자간은 1/16을 적용하는 등 여러 가지 법칙을 만들 수도 있을듯하다.
폰트 크기와 행간의 관계에서 황금비율의 법칙을 적용하여 크기와 행간이 1:1.6이 되도록 행간을 설정해 봤는데 모든 사이즈에서 조화로운 행간을 보인다.
다만 행간의 경우 폰트 사이즈와 관계가 있지만 글줄 길이 또한 밀접한 연관이 있기 때문에 길이에 따른 행간도 조절되어야 한다.
최적의 행간은 폰트 사이즈에 황금비율을 곱한 L=fφ 이고 이 행간에서 최적의 글줄 길이는 행간의 제곱인 W=L2이다.
280:175 황금비율을 갖는 4x 사이즈를 기준으로 3x, 2x, 1x로 큰 영역을 구분하고 내외부 영역과 폰트 사이즈와 행간에 같은 비율을 적용하여 설계 후에 그래픽 등 컨텐츠를 위치했는데 기분 탓인지는 몰라도 나름 고칠 데 없는 디자인이 만들어진 느낌이다.
폰트시스템
피보나치수열을 이용하여 기능별 폰트 사이즈를 적용해 본 결과이다. 일견 훌륭한 비례감이라고 느껴지긴 하지만 이처럼 황금비율이나 피보나치수열을 적용할 경우 유의해야 할 점이 있다.
비례 자체가 변화의 폭이 넓기 때문에 그대로 사용하면 서비스 디자인 등 세밀한 차이를 두고 싶을 때 적용하기가 어렵다. 그래서 아래처럼 그 사이에 있는 값들도 조화롭다고 가정하고 비례를 분할하는 방법이 효과적이다. 예시로 수치로는 1.3이라는 결과가 나왔지만 1.3이 아닌 1.6비율의 반 혹은 반의반...이런 식으로 적용한다.
폰트를 다루는 타이포그래피 역시 수와의 싸움이라고 생각한다.
많은 디자이너들이 다양한 환경과 상황에서 수의 실험을 통해 풍부한 디지털 타이포그래피 법칙들이 나오기를 희망해본다.
디자인툴은 인디자인을 추천한다. 북, 브로슈어 등 인쇄기반의 디자인 프로그램에서 디지털 미디어 디자인으로 확장하고 있는 인디자인은 전문 타이포그래피 툴로서 손색없는 기능을 제공한다. 필요한 거의 모든 기능과 버전업이 되면서 플렉서블 타이포그래피 등 디지털 디자인에 적합한 기능도 추가되고 있다.
폰트 파트를 마치며 한가지 언급하고 싶은 부분은 우리가 디지털을 통해 보는 모든 텍스트들 역시 16진수 유니코드로 표현된다는 것이다.
글자 하나마다 숫자가 있으며 금윤정은 AE08 C724 C815이다.^^
마지막은 대부분 가장 중요한 것이다.
실무 적용의 마지막이자 가장 중요, 중요, 또 중요한 것은 역시 그리드이다.
대부분의 디자이너들은 프로젝트에서 시스템으로 3단, 4단, 5단 등 균등한 그리드를 사용한다. 균등 그리드를 통한 디자인은 세련되고 합리적이며 이성적으로 보인다. 하지만 대부분이 균등 그리드라는데 문제가 있어 보인다.
다양한 디자인은 다양한 그리드에서 출발할 수 있는데 그리드가 고정적이며 화면 사이즈도 대부분 정해 놓았으니 큰 틀이 바뀌기는 힘들다는 생각이다.
“그리드 시스템은 디자인의 지원이지 보장이 아닙니다. 활용 가능한 숫자를 허용하고 각 디자이너는 자신의 개인적인 스타일에 적합한 솔루션을 찾아보실 수 있습니다. 그러나 그리드를 사용하는 방법을 배워야 합니다.”
Josef Muller-Brockmann
그것은 연습을 필요로 하는 예술이다.
그리드는 디자인을 나중에 설명하거나 기초 지원 시스템 같은 것이 아니라 디자인 그 자체에 속한다고 말하고 싶다. 그리드는 모든 디자인의 출발이며 하나의 완성체로 취급할 수도 있을 정도로 중요한 부분이다.
그리드를 이야기하기 전, 정오각형 작도를 하는 장면을 보고 시작하자.
약간 복잡하지만 일러스트레이터에서 정확하게 작도할 수 있다.
정삼각형, 정오각형 등 작도의 장점은 기하학적으로 정의된 내용만을 사용하여 면을 분할하며 이 연습을 통해 다양한 공간을 합리적이며 기능적으로 설계할 수 있다는 것이다. 이런 연습 결과를 논리적 감성 찾기라고 부르고 싶다.
피보나치수열을 이용한 면분할을 하기 위해 아이폰5에서 가로 640기준 양쪽 여백을 16픽셀씩 32를 적용하면 분할면의 전체 사이즈는 608인데,
1+2+3+5+8+13+21+34+55+89+144+233=608
우연의 일치로 233에서 딱 떨어지는 결과가 나온다.
여기서 홀수를 제거하거나 짝수로 조정한 후에 서로를 더한 결과의 면들을 추출하고 공통부분을 제외하고 남은 면들로 구성하면 피보나치 그리드를 만들 수 있다.
홀수를 제거하는 이유는 앞서 이진법이나 데이터 단위 등을 설명한 내용을 보면 짝수와 배수 개념 및 계산을 편하게 하기 위함도 있지만 지극히 개인적인 선호의 이유가 가장 크다.
이 수열을 이용한 그리드는 균등그리드에 비해 역동성을 느낄 수 있으며 시원한 대비효과로 인한 강약조절이 수월하다. 640이 아닌 다른 사이즈에서도 세밀히 설계하여 적용하면 될 것이다.
특정한 그리드 방식 이외에 도형 작도법을 응용한 기하학적 그리드도 단일 화면이나 주요 영역을 디자인하는데 유용하게 활용할 수 있다. 약간 복잡해 보일 수도 있지만 기하학 정의에 따라 시도를 몇 번 해보면 쉽게 주요 지점이나 면들을 찾아낼 수 있을 것이다.
대각선 그리드는 디자인할 사각 면의 꼭지점에서 45도 각도로 네 개의 선을 긋고 여기서 교차하는 선들이 생성되는데 이 면들의 비율에서 황금비율을 발견할 수 있다.
전체 면의 좌측 상단 꼭지점에서 우측 사단 꼭지점으로 대각선 선을 만들고 좌측 하단과 우측 상단에서 대각선 라인에 직각으로 선을 그어주면 여기서 생성되는 모든 면들은 황금비율을 이루게 된다. 면을 직접적으로 활용해도 좋지만 위치값이나 거리에 반영하는 것도 좋을 것 같다.
골든 포인트는 일반 포인트를 찾는 것과 비교해서 우선 사각형을 황금비율로 3등분 한다는 것이 차이점이다.
면의 꼭지점과 중점을 연결하여 교차해서 생기는 면에서 6x6의 그리드를 만들 수 있는데 비슷한 과정을 임의로 반복해서 의도하는 핫스팟을 만들 수도 있다.
균등분할도 적용되지만 비례 분할을 하는 방법도 작도를 몇 번 해보면 익숙하게 응용할 수 있다. 어떤 면에 가로세로 1/3의 지점은 면의 가로 세로 중점과 대각선, 그리고 한쪽의 세로 중점이 연결되는 지점에 있다. 이 지점에서 계속 분할을 해나가면 1/6, 1/9, 1/12씩 분할된다.
전체 면의 황금분할점에서 시작하여 생성면을 계속 같은 방식으로 분할한 결과면은 모두 황금비율을 만들 수 있다. 아이폰5 사이즈인데, 16:9 비율이 그대로 유지된 상태로 면분할되며 가로 세로 및 대각선까지 거리 값이 황금비율이다.
그리드는 눈으로 보는 것 보다는 많은 연습을 통해 진가를 알 수 있다.
시도해보면서 자신만의 독창적인 그리드를 개발하여 디자인에 멋지게 적용해 보기를 바란다. 이렇게 개발한 그리드는 쉽게 재사용 및 응용이 가능하여 계속 완성도 높은 디자인을 할 수 있게 될 것이다.
참고로 웹사이트는 1단에서 5단 정도를 가장 많이 사용하기 때문에 이 단의 공배수인 120을 계속 더한 넓이로 단을 짜야 계산도 쉽고 다양한 단을 만들 수 있다.
가로 320의 해상도에서 작업할 때 4단과 10픽셀 여백으로 설정하면 소수점이 생기게 되어 어느 한 단은 수치가 달라지게 된다. 고정 그리드에서 여백은 8의 배수 단위로 설정하면 오차 없이 딱 들어 맞는 레이아웃을 설계할 수 있다.
현존하는 거의 모든 해상도가 8픽셀 단위로 나누어지기 때문에 설계 또한 이 수의 배수로 작업하는 것이 계산에서는 더욱 수월하다.
유동 그리드에서는 %단위로 설계하겠지만 어차피 디자인 작업은 고정된 화면에서 하기 때문에 큰 지장이 없다.
사람도 너무 합리적이거나 이성적이면 재미가 없다.
디자인도 마찬가지다. 보여줄 때는 한없이 감성적일 수 있지만 내재된 속성은 또 한없이 이성적이어야 할 것이다. 그리드는 모든 것의 시작이고 끝이라고 할 수 있다.
이것을 출발점으로 디자인이 시작되며 디자인의 마무리 또한 그리드를 바탕으로 또다시 전개된다. 감성적인 것은 이성적인 것보다 쉽지만 매번 실수를 반복할 수 있다는 것을 명심해야 한다.
정리하면서
애플 아이콘 가이드를 보면 라운딩면 전체가 황금분할로 이루어져 있으며 정확한 측정값을 찾을 수 없어서 다양한 사이즈의 아이콘을 직접 측정한 결과 라운딩 비율은 25.2%이다. 그 결과 512사이즈에서는 115픽셀이며 1024에서는 230픽셀의 라운드 비율을 가진다. 아이콘 가이드가 있긴 하지만 많은 디자이너들은 이 가이드를 기초로 다양한 개성을 부여하여 멋진 디자인을 한다. 중요한 요소인 아이콘 하나에 이렇듯 치밀한 설계를 바탕으로 가이드를 하는데 우리는 대규모 프로젝트를 하며 아직도 감을 믿고 있다. 전체적으로 모두 적용하기는 힘들어도 작은 부분부터 시작하여 감성과 이성이 조화되는 기본에 충실한 디자인을 하기 바란다.
아래 숫자는 내용을 준비하며 재밌어서 메모해 두었던 글이다.
찰나는 “10의 -18제곱”이고, 순식은 “10의 -16제곱”으로 찰나가 더 빠른 시간이다.
순식간에라는 표현은 눈을 한 번 깜박하는 시간의 의미로도 사용한다. 그리고 어떤 점이 분명하지 않다는 의미로 쓰이는 모호는 소수점 아래 13자릿 수를 나타내는 수의 이름으로 불교에서 쓰인다고 한다. 또 아무것도 없는 넓은 공간을 의미하는 말로 쓰이고 있는 허공이라는 단어로 실은 수의 이름인데 “10의 -20곱”을 나타내는 말이다. 온 세상이 하얗다고 말할 때 쓰이는 “온”은 “모두”라는 의미를 갖고 있는 말로 100으로 표현한다.
수와 디자인에 대한 이야기는 이제 끝났지만 이제 또 시작이다. 그동안의 짧은 경험을 바탕으로 이 내용을 준비했지만 끝나지 않는 무리수처럼 계속 발견하고 또 적용하며 이곳에 업데이트를 할 계획이다.
