여기 크기를 맞춘 도형 조합 A, B가 있습니다. A, B 중 사각형과 원의 크기 비율이 같아 보이는 조합은 무엇인가요?  저는 B조합이 훨씬 더 자연스럽게 보입니다. A는 가로 세로 크기를 똑같이 맞췄으며, B는 상대적으로 면적을 고려해 원형의 크기를 사각형보다 조금 더 크게 그렸습니다. 이처럼 사람의 눈에 자연스럽게 보이도록 조정하는 작업을 ‘시각적 보정’이라고 합니다.


디자이너, 혹은 디자이너가 아닌 사람들도 다양한 프로그램을 통해 미세한 크기를 똑같이 맞출 수 있습니다. 하지만 프로그램이 오브젝트를 인식하는 것과 사람이 보는 것은 다르기 때문에, 때론 아주 정확한 것이 부자연스럽게 보일 수 있습니다. 서로 다른 형태 사이의 차이점을 보완해주는 작업이 필요합니다.  


최근 저는 이러한 시각적 보정에 대해 요목조목 잘 정리된 루크 존스(Luke Jones)의 “Optical Adjustment”를 읽었습니다. 여기에 몇 가지 추가 사례를 덧붙여 함께 소개합니다. (“Optical Adjustment”의 원문 번역글은 강수영님의 “시각적인 보정”에서 확인할 수 있습니다.)







1. 도형에 따른 크기 조정하기





앞서 살펴본 원과 사각형의 크기 조절부터 다시 볼까요? 사방 80pixel의 영역 안에서 사각형은 원보다 넓은 면적을 차지합니다. 우리 눈은 사방 길이를 통해 크기를 인식하기 보다는, 면적을 보고 어림잡아 비슷한 크기를 가늠합니다. 사각형보다 원의 크기를 조금 더 크게 그려주면 비교적 두 도형의 크기가 동일해 보입니다.






2. 시각적 무게 중심 고려하기






시각적 무게 중심에 따른 정렬은 플레이 버튼 아이콘을 통해서 해볼 수 있습니다. 원형과 삼각형을 중앙 정렬하면 A 아이콘처럼 됩니다. 중앙에서 빗겨나 있는 것처럼 보이는데요, 이는 삼각형의 무게 중심이 원형의 중심과 맞지 않아서 그렇습니다. 이렇게 서로 다른 형태의 오브젝트를 정렬할 때는 무게 중심을 고려하여 B 아이콘처럼 수정해주는 것이 좋습니다.







3. 면적 대비 색상 조정하기







면적에 따라서 색상의 무게감이 달라집니다. A는 파란 아이콘에 비해 텍스트 컬러가 살짝 연해 보입니다. 이렇게 넓은 면적과 비교적 좁은 면적(텍스트/라인)에 같은 색상이 쓰이는 경우가 많습니다. 이럴 때 좁은 면적의 컬러를 조금 더 짙게 수정해주면 면적의 넓이와 상관없이 (비교적) 동일한 색상으로 인지됩니다.







3. 형태를 고려해 오브젝트 정렬하기






이번에는 슬로워크에서 디자인한 DMZ국제다큐영화제 시그니처를 예시로 정렬을 살펴보겠습니다. 자세히 보면 시그니처의 우측 가장자리에 ‘~제' 로 끝나는 첫줄과 ‘-29.’로 끝나는 마지막줄이 있습니다. 온점은 한글보다 공백을 많이 포함하고 있습니다. 그래서 A처럼 정직하게 정렬하면 마지막줄만 움푹 들어간 것 처럼 보입니다. 이를 B처럼 튀어나오게 수정해주는 것이 보기에 자연스럽습니다.  









4. 명도에 따라 굵기 조정하기






4번의 컬러 조정과 같은 맥락으로, 오브젝트의 명도에 따라 굵기가 달리 보일 수 있습니다. 좌측의 흰색 텍스트와 우측 상단 검은색 텍스트(굵기 조정 전)는 같은 굵기의 폰트입니다. 검은색 텍스트가 상대적으로 가늘어 보여서 조금 더 굵게 수정했습니다. 네거티브, 포지티브 적용을 동시에 할 때 이런 점을 고려하곤 합니다.







5. 영문폰트와 한글폰트 조합시 조정하기






한글폰트와 영문폰트를 조합해서 디자인하는 경우가 많습니다. 편집디자인 툴인 인디자인 프로그램에는 ‘합성글꼴’이라는 기능이 있어 숫자, 영문, 국문, 기호 등을 각각 다른 폰트로 지정하고 세세하게 크기도 다르게 할 수 있습니다. 서로 다른 폰트를 억지로 이어붙이는 것이기 때문에, 크기값이 같아도 한글폰트가 더 커보입니다.(좌측 텍스트) 이때 크기와 높낮이를 직접 조정해주는 것이 좋습니다.(우측 텍스트)








6. 커닝(글자 간격 조정)하기








왼쪽 텍스트를 자세히 들여다보면 글자의 각기 다른 모양 때문에 배열이 균등하지 않아 보입니다. 이때 글자의 형태를 고려해 적당한 간격으로 보이도록 수정하는 것을 커닝(kerning)이라고 합니다. 커닝은 상대적으로 공백을 많이 가진 글자(숫자 1, 알파벳 A, W, V)일수록 조정을 필요로 합니다. 디자인을 전공하면 가장 기초적으로 배우는 부분임에도, 저는 커닝을 완벽히 하는 것이 제일 어렵습니다.


커닝을 연습할 수 있는 사이트도 있습니다. 완성도에 따라 점수도 매겨줍니다. 간단하게 여러분의 눈썰미가 얼마나 날카로운지 확인해보세요. -> 커닝 해보기








참고: Luke Jones - Optical Adjustment





Posted by slowalk

설 연휴는 잘 보내셨나요? 신정이 지나고 구정까지 지나며 본격적인 2012년에 접어들었습니다. 새해를 맞으며 다짐했었던 일들을 다시 한번 상기시켜보고 지난 한해를 돌아봅니다.  

 

지난 2011년, 슬로워크에도 많은 변화가 있었습니다.

  

우선, 삼청동 한옥마을로 자리를 옮겨 고즈넉한 한옥 사무실에서 작업을 하게되었고, 뜻을 같이하는 새로운 식구들을 맞이하고, 재밌었던 하계, 동계 워크샵,,,,바쁜일도 많았지만 생각해보니 많은 추억들도 떠오릅니다. 2012년을 맞아 슬로우워크는 2011년을 뒤돌아보며 ANNUAL REPORT 2011을 한 장으로 이루어진 인포그래픽으로 구성해보았습니다. 

 

 

 

 

한 장으로 표현한 슬로우워크의 이야기들. 그 변화가 한 눈에 보이시나요?

 

 

새로운 한옥 사무실로의 이사, 각자의 개성이 뚜렷한 10명의 슬로우워커들, 한해동안 진행해온 작업, 다시는 생겨선 안 될 인쇄사고^^, 기부, 디자이너들의 자체 프로젝트, 슬로우워크의 보물 블로그와 페이스북, 한 해동안 섭취한 어마어마한 양의 쌀과 커피 그리고 한옥 사무실 안의 각자의 공간까지 나타내보았습니다. 한 장으로 구성된 ANNUAL REPORT는 첫 시도였기에 고민이 많았었는데, 한 장에 1년동안의 이야기 중 어떤 것을 담아낼지 디자이너들과 의논하면서 많은 이야기를 나누었기에 다른 어떤 작업도다 의미있는 작업이 되었지요.

 

 

ANNUAL REPORT 2012에는 보다 풍성한 이야기가 담겨지길 기대하며, 2012년에도 slowalk 화이팅!!

 

 

 

 by 토끼발자국, 사막여우발자국

 

 

공감하시면 아래 손가락 모양 클릭^^ - 더 많은 사람들과 이야기를 나눌 수 있습니다


 

Posted by slowalk





러시아의 3대 도시 중에 하나인 예카테린부르크(Yekaterinburg).
예카테리부르크 공항에는 간단명료하게
공항에서 출발하는 노선에 대한 도착 시간이 명기된 지도(다이어그램)가 설치되어있습니다.







예카테리부르크 국제공항 실내 모습입니다.







원 모양의 지도가 보이시지요.








공항에서 출발하는 모든 노선의 도착지까지 걸리는 시간이 표시되어 있습니다.
별 것 아니잖아라고 말씀 하시는 분들도 계시겠지만,
복잡하고 중연 부연 설명해 놓은 안내서나 가이드보드판에 비해서
누구나 쉽게 파악 할 수 있습니다.
시각 디자인은 인간의 편리성에 중점을 두어야 합니다.







많고 화려하고 복잡한 것이 좋은 것이 아닙니다.
이런 작은 배려가 담긴 지도 하나가
공항을 찾는 사람에게는 도움이 됩니다.


* 러시아 통신이었습니다.
* 사진은 Evgene Belikov





* 공감하시면 아래 손가락 모양 클릭^^ - 더 많은 사람들과 이야기를 나눌 수 있습니다





제 블로그가 마음에 들면 구독+해 주세요






 
Posted by slowalk