[번역글]반응형 웹 디자인의 9가지 기본 원칙

반응형 웹 디자인의 9가지 기본 원칙

반응형 웹 디자인은 멀티스크린 문제점에 대한 훌륭한 해결책이지만, 프린트의 관점에서의 반응형 웹 디자인은 어려운 문제입니다. 고정된 페이지 사이즈가 아니며, 밀리미터 혹은 인치도 아니고, 맞서야할 물리적인 제약이 있는 것도 아닙니다. 또한 데스크탑과 모바일만을 위해 픽셀로 디자인하는 것은 과거의 것이며, 점점 더 다양한 장치로 웹사이트를 열 수 있습니다. 그러므로, 유동적인 웹과 맞서는 대신 포괄하는 반응형 웹 디자인의 몇 가지 기본 원칙을 명확히 해두려고 합니다. 간단하게 하기 위해서 레이아웃에 중점을 맞추어보겠습니다.

반응형 VS 조정(adaptive)형 웹 디자인

아래의 그림은 같게 보일 수 있지만 그렇지 않습니다. 이 두가지 접근법은 서로 보완할 수 있기에, 옳거나 그른 방법은 없습니다. 내용에 따라 결정되는 것이 좋을 것입니다.

유동성

스크린의 사이즈가 작아졌기 때문에, 내용은 보다 수직의 공간을 사용하기 시작했고 밑에 있는 것은 밀려내려가는데, 이것을 유동성(the flow)이라고 부릅니다. 만약 픽셀과 포인트로 디자인을 하는 데에 적응되어 있다면 유동성을 완전히 파악하는 것은 어려울 수 있습니다. 그러나 이에 익숙해진다면 이해할 수 있을 것입니다.

 

관련 단위

캔버스는 데스크탑, 모바일 스크린 혹은 이 사이에 있는 어떤 것이든 될 수 있습니다. 또한 픽셀의 밀도도 다양하기 때문에, 유연하고 어디에서나 작동하는 단위가 필요합니다. 퍼센트 같은 단위가 편리한 이유는 바로 이것입니다. 그래서 어떤 것을 50%의 너비로 만든다는 것은 언제나 스크린(혹은 뷰포트; 열려있는 브라우저 창의 사이즈)의 반을 차지한다는 것을 의미합니다.

구분점

구분점은 미리 설정해놓은 지점에서 레이아웃을 변화하게 합니다. 예를 들어, 데스크 탑에 3개의 컬럼을, 모바일장치에는 단 1개의 컬럼만을 설정합니다. 대부분의 CSS 속성은 한 구분점에서 다른 구분점으로 바뀔 수 있습니다. 구분점을 넣는 곳은 흔히 내용에 의해 결정됩니다. 만약 문장이 나눠진다면, 구분점을 추가할 필요가 있을 것입니다. 그러나 주의를 기울여서 사용해야 합니다. 무엇이 무엇에 영향을 미치고 있는지 이해하기 어려워지면, 곧장 엉망이 될 수 있습니다.

최대값과 최소값

모바일 장치에서 그런 것처럼 컨텐츠가 스크린의 전체 너비를 차지하는 것이 좋은 경우가 종종 있습니다. 그러나 같은 컨텐츠를 TV 스크린의 전체 너비만큼 늘리는 것은 별로 좋지 않을 것입니다. 이것이 최소/최대 값이 도움이 되는 이유입니다. 예를 들어, 너비를 100%로 하고, 최대 너비를 1000px로 하는 것은 컨텐츠가 화면을 꽉 채우지만, 1000px을 넘지 않는다는 것을 의미합니다.

 

내포된 오브젝트

많은 요소들이 서로 의존하도록 한다면 제어하기 어려울 것입니다. 그러므로 컨테이너에 요소들을 감싸는 것은 더욱 이해하기 쉽고, 깔끔하고 정돈된 방법이 될 것입니다. 이것이 바로 셀과 같은 정적인 단위가 도움이 될 수 있는 이유입니다. 정적인 단위는 로고나 버튼처럼 크기 조정을 원하지 않는 컨텐츠에 유용합니다.

모바일 혹은 데스크탑 우선

엄밀히 따지면 프로젝트가 작은 스크린에서 시작해서 커지던(모바일 우선) 혹은 역의 경우던(데스크탑 우선) 큰 차이가 있는 것은 아닙니다. 그러나 만약 모바일 우선 전략으로 시작한다면, 추가 제약이 더해질 것이며 의사결정에 도움을 줍니다. 보통은 동시에 양 끝에서부터 시작해서, 무엇이 더 나은지를 알아보곤 합니다.

웹 폰트 VS 시스템 폰트

웹 사이트에서 멋진 모양의 퓨우트라체(Futura) 혹은 디도 포인트(Didot)를 보이게 하고 싶다면 웹 폰트를 사용하세요! 웹 폰트가 아주 멋지게 보일지라도, 각각의 폰트는 다운로드 될 것이며 더 많이 사용할 수록 페이지를 로드하는 시간은 길어진다는 것을 유념하세요. 반면에 시스템 폰트는 번개같이 빠르며, 사용자가 로컬에 가지고 있지 않다면 디폴트 폰트로 지원될 것입니다.

비트맵 이미지 VS 벡터

아이콘에 디테일한 부분이 많거나 일부 고급의 효과가 적용되어 있다면 비트맵을 사용하세요. 그렇지 않다면 벡터 이미지를 고려해보세요. 비트맵을 위해서는 jpg, png 혹은 gif를 사용하고, 벡터 이미지를 위한 가장 좋은 선택은 SVG 혹은 아이콘 폰트입니다. 각각 장점과 단점을 모두 가지고 있습니다. 그러나 사이즈를 염두에 두세요. 어떤 사진도 최적화(optimization)없이 온라인상에 올리는 것은 좋지 않습니다. 반면 벡터는 종종 아주 작지만, 일부 오래된 브라우저는 지원을 하지 않습니다. 또한, 곡선이 많다면 비트맵보다 무거워질 수 있기 때문에 현명하게 선택해야 합니다.

출처: http://blog.froont.com/9-basic-principles-of-responsive-web-design/