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


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

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

 

 

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

 


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

 


 

 


디테일 최소화하기

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

 

 

 


제거하기

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

 

 

 


위치 바꾸기

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

 


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

 

 

출처:  viget

 

by 산비둘기 발자국

 

 

 

Posted by slowalk





웹 디자인의 역사는 어떻게 발전해왔을까요? 전에 반응형 웹 디자인을 짤방으로 설명했던 산디스 씨(Sandijs Ruluks), 이번에는 웹 디자인의 역사를 짤방으로 간단하게 정리했는데요. 그는 웹 디자이너들이 '디자이너가 개발을 배워야 하는가?' 논하기 전에, 웹 디자인의 역사에 대해 알 필요가 있다고 생각해서 이 글을 썼습니다.


1. 웹 디자인의 암흑기


웹 디자인의 역사


웹 디자인의 초창기는 매우 어두웠습니다. 검은색화면에 단색의 글씨만 존재했지요. 디자인이라고 할 수 있는 것은 특수문자와 탭키를 이용한 것이 전부였습니다.

 


2. 테이블 - 웹 디자인의 시작


웹 디자인의 역사


브라우저가 생기고 이미지를 올릴 수 있으면서웹 디자인이 시작되었습니다. 그리고 테이블을 통해 정보를 구성할 수 있었는데요. 하지만 사람들은 레이아웃을 잡기 위해 테이블을 사용했습니다. 수직 정렬이나 그리드를 맞추기가 편하다는 장점을 가지고 있었는데요. 하지만 이 방식은 테이블 본연의 기능이 아니고, 유동적이지 못했습니다.



3.자바스크립트의 구원

 

웹 디자인의 역사


자바스크립트가 html의 한계를 극복하기 시작했습니다. 예를 들어 팝업창이 필요하거나, 빠르게 코드를 수정하고 싶을 때, 자바스크립트를 사용했습니다. 웹사이트에 동적인 요소가 추가되면서 웹사이트는 한층 다채로워졌습니다. 요즘은 css가 좋아져서 자바스크립트를 대체하고 있지만, 그래도 여전히 강력한 재료입니다.

 



4. 표현력의 황금시대 - 플래시


웹 디자인의 역사


플래시가 보급되면서 웹 디자인의 표현력은 황금시대를 맞이합니다. 디자이너는 모양, 레이아웃, 애니메이션, 인터랙션, 그리고 어떠한 폰트도 사용할 수 있었습니다. 플래시는 사용자 컴퓨터에 최신 버전이 설치되어 있고, 약간의 로딩시간을 기다리면 마법처럼 현란하게 작동했습니다.


하지만 검색에 최적화 되지 않았으며, 높은 CPU 점유율 때문에 아이폰에서 제외됩니다. (그러면서 웹 디자인에서 플래시는 몰락하게 되죠.)

 



5. CSS


웹 디자인의 역사


플래시와 비슷하게 나온 css는 기술적으로 더 좋은 방식으로 접근하는데요. 플래시와 달리 기존 html로 구조를 유지하면서 css로 꾸미는 방법입니다. html을 뼈와 살이라면, css는 옷이라고 할 수 있겠네요.


css의 첫 번째 버전은 유연하지 않았습니다. 가장 큰 문제는 당시 구형 브라우저들이 css를 지원하지 않았는데요. 이 브라우저들이 css를 완전히 지원하기까지 오랜 시간이 걸렸습니다. 어느 정도의 표준이 생기고 css3까지 나오면서, 자바스크립트를 대체할 수 있을 정도로 발전했습니다.


이 글의 필자 산디스 씨는 css가 개발 언어라기보다 서술문에 가깝고, 디자이너들은 반드시 알아야 한다고 강조했습니다. 저처럼 영어가 익숙하지 않은 사람은 서술문이라는 표현은 동의 못하겠지만 디자이너가 반드시 알아야 한다는 사실은 동의할 것입니다.

 



6. 모바일 시대의 도래 : (column)을 이용한 디자인

 


웹 디자인의 역사


모바일로 웹사이트를 브라우징 하는 것은 대단한 도전이었습니다. 속도가 매우 느리고, 기기에 따라 디자인이 전부 달랐습니다. 또한, 잘 못 쓰면 폭탄 요금을 맞을 수 있었기 때문에 인터넷 버튼을 누르는 것조차 두려워했습니다.


하지만 스마트폰이 보급되고, 모바일 인터넷 환경이 좋아지면서 모바일 웹 디자인도 발전하기 시작합니다처음에는 단(column)을 이용하는 디자인으로 모바일에 대응했습니다. 대표적으로 960 그리드 시스템을 12단으로 나눠서 사용했습니다.


그다음으로는 자주 쓰이는 서식, 메뉴, 버튼 등 일반적인 UI를 쉽게 사용할 수 있는 라이브러리가 등장했습니다. 부트스트랩(Bootstrap)과 파운데이션(Foundation)이 대표적인데요. 모바일도 대응할 수 있는 웹 사이트를 빠르고 쉽게 만들 수 있게 되었습니다. 하지만 그만큼 디자인이 비슷한 사이트들이 많아졌으며, 디자이너들이 사용하기에는 코드가 어려웠습니다.

 



7. 반응형 웹 디자인

 

웹 디자인의 역사


디자이너 겸 개발자 에단 마콧 씨(Ethan Marcotte)는 같은 콘텐츠로 화면 넓이에 따라 디자인을 바꿀 수 있는 '반응형 웹 디자인'이라는 용어를 만들고 제안했습니다. 반응형 웹 디자인은 html 수정없이 css 수정으로 모든 크기의 화면에 대응할 수 있습니다. 모바일 웹사이트를 따로 만들 필요도 없어 효율적이며, 어디서나 같은 콘텐츠를 보여줄 수 있습니다.

하지만 반응형 웹 디자인에도 몇 가지 문제가 있는데요. 디자이너들은 반응형 웹 디자인을 위해 여러 가지 화면에 맞는 디자인을 각각 만들어야 합니다. 또한,개발자들은 이미지를 어떻게 사용할지, 데스크톱 혹은 모바일 우선인지 신경 써야 할 것이 많습니다.

 



8.플랫 디자인의 시대


웹 디자인의 역사


수 많은 기기에 맞춰 디자인하는 것은 시간이 오래 걸립니다. 이에 사람들은 정교하지만 오랜 시간이 걸리는 스큐어모픽 디자인을 버리기 시작합니다. 그리고 단순하고 콘텐츠가 돋보이는 플랫디자인을 선호하기 시작하는데요. 형태는 기능을 따른다는 말처럼, 이미 오래전부터 플랫디자인의 시대가 예견되었을지도 모릅니다.




9. 웹 디자인의 미래는?

 

웹 디자인의 역사


우리가 디자인한 이미지파일이 바로 브라우저에서 작동한다면 어떨까요? 거기에 웹 표준과 접근성까지 준수하면서 모든 환경에 대응한다면 어떨까요? 디자이너들은 디자인에 집중하고, 개발자들은 브라우저 호환을 걱정할 필요 없이, 실질적인 개발에 집중할 수 있을 것입니다. 물론 저 같은 웹 퍼블리셔는 일자리를 잃을 수도 있겠지만, 기술의 발전에 뿌듯할 것 같네요. 어쩌면 미래에 기술력보다 더 중요한 것은 좋은 웹사이트를 만들수 있는 기획과 창의력이 아닐까 생각해봅니다.



by 숭이발자국



출처: FroontBlog



 

Posted by slowalk



반응형 웹디자인이 무엇일까요? 얘기는 많이 들었지만 잘 모르고 그냥 넘겼을지도 모릅니다. 하지만 이 분야에 종사하시는 분이라면 이 개념을 확실히 알고 넘어갈 필요가 있습니다.


디자이너 산디스 씨(Sandijs Ruluks)블로그에 반응형 웹디자인을 gif로 쉽게 설명했습니다. 그는 프린트 기반의 디자인을 하다가 웹디자인을 시작해서 좀 더 일반적인 관점에서 잘 설명했는데요.

 

반응형 웹디자인은 다양한 스크린 크기에 대응할 수 있는 훌륭한 해결책입니다. 하지만 이것을 단순히 프린트 기반의 디자인과 같은 개념으로 이해한다면 당연히 어렵습니다. 정해진 페이지 크기가 없으며, 인치(inches)나 밀리미터(mm)의 단위를 쓰지 않습니다. 그렇다고 픽셀만으로 웹과 모바일 디자인한다는 것도 구시대 발상이 되었는데요. 우리는 다양한 스크린 크기에 맞춰 유동적으로 레이아웃을 만들 수 있는 반응형 웹디자인을 정확하게 알 필요가 있습니다.


1. 반응형 웹디자인 vs 적응형 웹디자인 (Responsive vs Adaptive web design)

비슷한 말이지만 같지 않습니다. 적응형 웹디자인이라는 단어는 생소할 수도 있는데요. 반응형 웹디자인은 모든 스크린 크기 맞춰 유동적으로 작동합니다. 하지만 이 블로그에서 말하는 적응형 웹디자인은 아래 gif과 같이 특정 크기에서만 반응하는 방식입니다. 더 좋고, 안 좋은 방식은 없으며, 콘텐츠에 맞춰 방향을 정하시면 됩니다.




2. 플로우 (Flow)

스크린이 작아졌을 때, 콘텐츠들은 수직 공간을 더 차지합니다. 그리고 그것 아래 요소들은 아래 첫 번째 gif처럼 밀려나게 되죠. 그것을 플로우(Flow)라고 합니다.




3. 상대적인 요소들 (Relative units)

사용자는 다양한 사이즈의 기기를 쓰기때문에, 유연하고 어디서나 작동하는 유연한 레이아웃이 필요합니다. 예를 들어 아래의 gif처럼 50% 단위를 쓰면 데스크톱은 물론이고 모바일에서도 50%의 크기를 유지하겠죠. 저는 개인적으로 반응형 웹사이트를 만드는 데 핵심이라고 생각하는 부분입니다.

 



4. 분기점(Breakpoints)

분기점을 이용하면 특정 크기에 맞는 코딩으로 바꿀 수 있습니다. 예를 들어 데스크톱에서는 3단의 레이아웃을 쓰고 싶은데, 모바일에서 3단을 유지하면 너무 작게 보이는 경우가 있습니다. 이럴 때 분기점을 이용해, 특정 넓이 이하에서는 3단을 1단으로 바꿀 수 있습니다.




디자이너분들이 이걸 잘 사용한다면 모바일웹에서도 본인이 원하는 디자인으로 맞출 수 있습니다. 하지만 레이아웃을 바꿔서 다른 요소들에 영향을 주는지 주의하세요. 웹사이트를 순식간에 망가트릴 수 있습니다.

 


5. 최댓값과 최솟값 (Max and Min values)

가끔 모바일 웹사이트를 열었는데 이미지가 화면에 꽉 차면서 깨지는 경우가 있습니다. 그것은 이미지가 브라우저 넓이보다 작은 데 억지로 늘려놓았기 때문이죠. 이미지 넓이에 최댓값을 설정해준다면 브라우저 크기가 이미지를 크기를 훨씬 넘어가도 더 이상 커지거나 깨지지도 않을 것입니다.




6. 그룹 지은 요소들 (Nested objects)

요소들이 많아 통제하기 힘들 때, 그 요소들을 그룹으로 만들어 한꺼번에 통제할 수 있습니다. 이 방식은 로고나 버튼 같은 크기의 변경이 필요없는 요소들에 유용합니다.




7. 모바일 혹은 데스크톱 우선 작업 (Mobile or Desktop first)

모바일에서 데스크톱으로 프로젝트가 반응형 작업을 할 때와 데스크톱에서 모바일로 진행될 때 기술적으로 큰 차이는 없습니다. 하지만 모바일에서 먼저 시작할 때 제한이 적고, 콘텐츠 배치를 결정할 때 수월하게 할 수 있습니다. 그래도 프로젝트별로 다를 수 있으니 프로젝트에 맞춰서 해보시길 권합니다.  




8. 웹폰트와 시스템 폰트 (Webfonts vs System fonts)

반응형 웹디자인에서 유동적인 레이아웃을 위해 이미지보다 폰트를 많이 쓰는데요. 폰트는 접속 시 내려받아 설치하는 웹폰트와 사용자 기기에 원래 설치된 시스템폰트가 있습니다. 웹폰트를 사용하면 웹사이트를 예쁘게 만들 수 있는 것은 사실입니다. 하지만 웹폰트를 다양하게 쓰는 것은 그만큼 페이지를 느리게 할 수 있습니다. 개인적으로 제목이나 디스플레이를 위한 폰트는 웹폰트로 하고 본문은 시스템폰트를 사용하는 것을 제안합니다.




9. 비트맵 방식과 벡터 방식 (Bitmap images vs Vectors)

여러분이 만든 아이콘이 스큐어모픽 스타일처럼 화려하고 디테일하다면 비트맵 방식(jpg, png, gif등등)을 사용하는 것이 맞습니다. 하지만 이런 스타일이 아니라면 벡터방식(svg)을 써보세요. 해상도가 높은 기기에서도 선명하게 보일 것입니다. (예시)



Svg는 가볍고 선명하지만 구형 브라우저에서 지원하지 않아 분기해서 써야 하는 불편함이 있습니다. 또한 굴곡이 많다면 비트맵보다 무거울 수도 있으니 주의해서 써주세요.

 


저는 퍼블리셔로 일하면서도 반응형 웹디자인의 개념만 대충 알고 있었습니다. 하지만 클라이언트와 미팅 중에 반응형 웹디자인에 대해 설명해야 되는 상황이 있었는데요. 저도 모르게 전문용어를 남발해서 클라이언트를 난감하게 만들었습니다.

전문성은 자신이 가진 지식이나 업무능력이 전부가 아니라고 생각합니다. 클라이언트 혹은 사용자들에게 이런 개념을 잘 전달하는 소통능력도 중요하지 않을까요? :)



by 숭이발자국


출처: FroontBlog





Posted by slowalk