화면이 작아지면 로고가 변한다? 반응형 로고 디자인

데스크탑 뿐만 아니라 모바일, 테블릿PC 등 다양한 환경에서의 인터넷 사용이 증가하면서 웹디자인도 환경에 따라 변화하고 있습니다. 스크린의 크기, 비율에 따라 변화하는 웹디자인을 반응형 웹디자인이라고 하는데요, 예전에 슬로워크 블로그에도 소개된 적이 있죠. (반응형 웹디자인의 9가지 요소 글 보러가기)

스크린에 따라 상하좌우로 변화하는 웹디자인 안에서 해당 웹페이지의 로고 역시 스크린의 사이즈에 따라 축소, 확대되는 것을 볼 수 있습니다. 단순하고 간단한 형태를 가진 로고는 스크린의 사이즈에 맞춰 축소되더라도 아무 문제가 없겠죠. 그러나 복잡한 모양이나 작은 글씨를 가진 로고의 경우는 그 형태를 인식할 수 없고, 글씨 또한 읽히는 데 어려움이 있습니다.

오늘은 이렇게 다양한 환경에 적응하며 로고들이 어떻게 변화하는지에 대해 소개합니다.

 

 

대부분의 잘 디자인된 로고들은 최적의 적용을 위해 가로형, 세로형 로고의 가이드라인을 가지고 있습니다. 펜실베니아 대학교의 로고는 여기에 한 가지 가이드를 더 추가하였습니다. 특별히 더 작은 영역에 사용될 수 있는 대체로고 규정이었죠.

 

로고의 작은 버전에서는 작은 글씨가 제거되었고, 로고타입은 심볼의 높이와 일치하도록 확장되었습니다. 그 결과 로고는 와이드 320픽셀인 작은 화면의 압축된 헤더에서 더 잘 읽힐 수 있게 되었습니다.

 

 

 

디테일 최소화하기

위와 같이 복잡한 심볼을 가진 로고의 경우에는 자세한 모양을 좀 더 부드럽고 단순하고 처리하고, 얇은 선을 두껍게 만드는 방법을 사용할 수 있습니다. 심볼의 흰 부분을 검게 채우는 식으로 요소를 반전시켜 작은 크기에서도 인식이 쉽도록 변화하였습니다. 사이즈 축소의 단계별로 로고의 심볼 또한 점점 더 단순화되어 가독성을 높인 예입니다.

 

 

 

제거하기

위의 로고는 메인 그래픽 앰블럼을 둘러싼 많은 글씨들이 특징입니다. 이와 같은 로고는 작은 화면에서는 전혀 읽히지 않습니다. 따라서 이 로고는 화면의 크기에 따라 순차적으로 요소를 제거하는 방법을 택했습니다. 엠블럼을 둘러싼 작은 글씨들을 제거하고, 다음 단계에서는 엠블럼 자체의 글씨를 제거하였습니다. 이러한 과감한 변화에도 브랜드 인지도는 여전히 유지됩니다.

 

 

 

위치 바꾸기

가장 일반적인 방법으로 사이즈의 축소시 로고타입을 심볼과 같은 높이에 맞춰 로고타입의 가독성을 높이는 결과를 가져다 주는 예입니다.

 

로고를 조정하는 것이 브랜드 인지도와 아이덴티티에 영향을 주지 않을까 걱정을 하실 수도 있겠는데요. 위의 사례와 같이 각 상황에 맞는 대체 로고 규정이 있다면, 로고의 유연성은 오히려 아이덴티티의 인지도를 향상시킬 수도 있다고 합니다. 앞으로 더 빠르게 변화할 웹의 환경에 맞춰 얼마나 다양한 방법의 로고 솔루션이 등장할지 기대됩니다.   

 

 

출처:  viget

 

by 산비둘기 발자국