반응형 디자인 패턴과 원리

이단마콧

EthanMarcotte
매사추세츠주보스턴에서독립적으로일하는디자이너겸작가.끊임없이변하는웹의새로운디자인방법을설명하기위해‘반응형웹디자인’이라는용어를만들어냈으며,이분야에서최고의책이라할수있는《반응형웹디자인》을썼다.그의디자인과연설,글은디자이너들과여러단체가웹의가변성을활용해모바일,태블릿,데스크톱,그밖의어떤기기에도구애되지않는디자인을하는데큰도움이되고있다.여러해동안‘언이벤트어파트’,‘SXSW인터랙티브’,‘웹스톡’등많은콘퍼런스에서주요연사로활약해왔다.《뉴욕매거진》,‘선댄스영화제’,《보스턴글로브》,《피플매거진》등과도일했다.

한국어판출간에앞서
추천의글
chapter1작은시작
chapter2내비게이션
chapter3이미지와동영상
chapter4반응형광고
chapter5무한한그리드디자인하기
감사의글
참고자료
참고URL
찾아보기

페이지디자인에서콘텐츠네트워크로
콘텐츠에서부터나아가는접근법

성공적인반응형디자인패턴과원리를제시한다.

기기를구별하지않는콘텐츠중심의방식으로
복잡한반응형인터페이스를구축할수있다.

웹이라는매체의구현방식은브라우저,디스플레이해상도,입력유형,기기등의조합을고려해봤을때거의무한대에가깝다.가변그리드,가변이미지,미디어쿼리등의협력을통해모든기기와다양한화면에유연하게동작하는반응형디자인은유용하면서도아름다운방식으로웹의가변성을만들어낼수있다.
이단마콧이‘반응형웹디자인’을고안하고도입하던초창기에는페이지자체에만집중해왔다.그후기기와화면크기가다양해지면서‘페이지’는점점그뜻을잃어갔고‘콘텐츠네트워크’라는개념이어느때보다도큰의미를갖게되었다.지금의반응형디자인은여러개의소형레이아웃시스템이모인네트워크로생각해야한다.어떤화면에서도메시지를가장잘전달하게끔재배치가능한콘텐츠네트워크다.

작게시작해서점차늘려가기
콘텐츠에서부터나아가는접근법의출발점은가장작은콘텐츠부터살펴보는것이다.요소가본래의형태를잃어버리기전까지크기를확대해나가는방식이다.작은화면에서중요한콘텐츠는화면크기에상관없이모든사용자에게중요한정보가될수있다.
대부분데스크톱을우선으로하여디자인한다음더작은화면에끼워맞추려고하기때문에반응형디자인을어려워한다.화면에맞추는것이아니라가장먼저중요한콘텐츠를확인하고화면크기에상관없이그콘텐츠에모두가접근할수있도록해야한다.무엇을보여줄지우선순위를정하는것이중요한이유다.

우선순위를정해야한다.
어떤요소를작은화면에서는가치가없다는이유로감추거나없애고있다면그요소의디자인과콘텐츠를더단순하게해서작은화면에서도동작하게만들수는없는지생각해봐야한다.혹은어떤화면에서도가치가없는요소는아닌지고려해봐야한다.과감한콘텐츠선별작업을통해서사이트는오히려더가볍고유연해질수있다.콘텐츠에우선순위를매기는것에서시작해레이아웃으로발전해가는형식이라고할수있다.시각적으로는아름다워도콘텐츠가너무많으면진정한반응형사이트라고할수없다.

조건에따른로딩방식
조건에따른로딩방식은반응형디자인에서꽤유용하다.조건에따른로딩방식은오직특정한조건아래에서만추가적인콘텐츠를로드하게할수있으며,사용자가화면에보이는정보량에압도되지않도록디자인의밀도를처리하기위한것이다.이방식은광고에도적용할수있지만특히내비게이션에유용하다.불필요한정보와기능을덜어내면사용자의인지부하도줄일수있고사이트접근성도더높일수있다.이런유용한기능은쉽게오용될수있는데,작은화면에맞추기위해사용할것이아니라먼저사용자에게필요한콘텐츠가무엇인지파악해야한다.과감하게선별된내부콘텐츠와짝을이룰때최상의효과를보이기때문이다.

콘텐츠를완전히숨기지말라
맞지않는콘텐츠를숨기는것은많은반응형사이트에서흔히쓰는기법이다.하지만텍스트,동영상,이미지,광고등어떤것을디자인하든있는정보를숨기기보다는디자인을더단순하게만들수는없는지생각해봐야한다.넘치는콘텐츠를CSS로숨기기보다는필요한것만로드하는것이더나은접근법이다.간단하게레이아웃을바꾸는것만으로도엄청난효과를불러올수있는데굳이내비게이션을감추거나숨겨야할필요는없다.

◆이책에서다루는내용
-보이기/숨기기토글
-오프캔버스메뉴
-조건에따라로드되는메뉴
-점진적으로드러내기
-가변이미지,가변동영상
-자바스크립트로반응형광고만들기
-srcset와sizes로책임감있게크기조절하기
-picture와source로더매끄럽게제어하기
-사용자에게전달되는방식
-반응형레이아웃을더신속하게구축하는프레임워크활용
-분기점선정