반응형웹디자인 Guide date.2020.04.04. / Ver.1.0.1 1 반응형디자인제약사항 2 반응형디자인 PSD 제작 3 Adaptive( 적응형 ) 영역 4 사용가능글꼴 ( 웹폰트 ) 5 게시판및 Form 디자인제약사항 6 4K 작업지원범위 7 간단요약 웹메이커 21 퍼블리싱팀.
반응형웹디자인 Guide date.2020.04.04. / Ver.1.0.1 본 반응형웹외주디자인 Guide 는외주디자인을통한반응형웹사이트구축을위해작성된 Guide 입니다. 본 Guide 에바탕을두는디자인작업이이뤄져야퍼블리싱및개발작업오류를미연에방지할수있습니다. 1 반응형디자인제약사항 1) Device 웹브라우저해상도 반응형웹사이트는아래표와같은표준웹브라우저 Device 해상도를기준으로제작됩니다. 다만, 아래해상도는 Device 의 웹브라우저 에서지원되는최대해상도를의미하며, Device 의웹브라우저에서지원 되는최대해상도는 Device lcd 액정디스플레이 해상도와는무관합니다. 예를들어, iphonex 의 lcd 최대해상도는 1125 x 2435 이지만, 실제웹브라우저에서지원되는최대해상도는 '375 x α' 입니다. 또한, iphone6 의 lcd 최대해상도는 750 x 1334 로 iphonex 보다현저히낮지만, 웹브라우 저최대해상도는 iphone X 와동일한 375 x α 입니다. 따라서, Device 웹브라우저해상도는최신기종의 Device 라하더라도표준화된 웹브라우저해상도 를기준으로제 작하게됩니다. Device 기준해상도 (Resolution) / Pixel 비고 PC 1920 x 1080 Windows, MaxOS, Linux 등 Tablet 1024 x 1366 ipad, ipad Pro, Gallaxy Tab 등 Mobile 400 x 600 iphone, Gallaxy, Note 등 간혹 PC 와 Tablet 혹은 Tablet 과 Mobile 경계의모호한해상도를제공하는 Device 의경우근접한쪽의 Device 기 준해상도에맞추어작업하게됩니다. (ex: Tablet Device 라하더라도 PC 해상도에근접해있는경우 PC Device 로간주함.) 2) Device 회전처리 위 1) 에서안내된기준해상도는 회전처리 가되지않은 Device를기준으로한해상도입니다. Mobile 의기준해상도가 400 x 600 일때, 스마트폰을가로로눕혀웹사이트를접속하는경우브라우저에서출력되는해상도는 600 x 400 이되는데, 이때정상해상도의폭 (400 Pixel) 과가로형해상도의폭 (600 Pixel) 의구간 (200 Pixel) 은 적응형웹 으로처리됩니다. 또한, Device 의해상도가특수한경우가로형으로눕혀접속했을때 Mobile Device 라하더라도 Tablet Device 로 간주될수있습니다. 적응형웹은 3. Adaptive( 적응형 ) 영역 장에서구체적인내용을다룹니다.
2 반응형디자인 PSD 제작 위에서안내된 Device 별 기준해상도 를바탕으로아래와같이 분기해상도 가설정되어있으며, 분기해상도를기준으로 PSD Canvas 의 Size 가설정되어디자인작업 (PSD) 이진행되어야합니다. 1) 분기해상도안내 분기해상도는위에서안내된 Device 별 기준해상도 를바탕으로설계되어있습니다. 분기해상도는 Mobile 과 Tablet 의경계, Tablet 과 PC 의경계를설정하여안정적으로접속자의 Device 의유형에맞 는화면을웹브라우저에출력하게됩니다. 다만, Device 의해상도가특수한경우는 Tablet Device 에서 PC 화면이, PC Device 에서 Tablet 화면이보일수있 는데, 해상도가 1366 x 1024 인저해상도노트북인경우웹사이트접속시 Tablet Device 로간주하여 Tablet 화 면이반영되는것을예로들수있습니다. 구분분기해상도 (width 기준 ) 비고 PC 1101 Pixel ~ Tablet 751 ~ 1100 Pixel Mobile ~ 750 Pixel 1100 Pixel 이상의브라우저해상도는 PC Device로간주합니다. 750 ~ 1099 Pixel 사이의브라우저해상도는 Tablet Device로간주합니다. 749 Pixel 이하의브라우저해상도는 Mobile Device로간주합니다. 위분기해상도는표준 Device 의브라우저해상도를기준으로설계되어있습니다. 따라서, 분기해상도는어떠한경우라고변경할수없으며, 특수한해상도를가진 Device 는분기해상도설계에배 제하여설계합니다. 2) 분기해상도에따른 PSD Canvas 설정 분기해상도에따른 PSD Canvas Size 는아래표를준수하여제작되어야합니다. 구분 Canvas Size Ratio DPI (width 기준 ) ( 비율 ) PC 1920 Pixel 72 1:1 Tablet 800 Pixel 72 1:1 Mobile 750 Pixel 72 2:1 Radio는 1:1로 1920 Pixel 로작업시웹브라우저에서 1920 Pixel 로출력됩니다. Radio는 1:1로 800 Pixel 로작업시웹브라우저에서 800 Pixel 로출력됩니다. Radio는 2:1로 750 Pixel 로작업시웹브라우저에서 375 Pixel 로출력됩니다.
위 Canvas Size표의크기로 PSD가제작되어야합니다. 위표중 Ratio( 비율 ) 가 1:1인 PC와 Tablet의경우 Canvas 사이즈와동일한크기로웹브라우저에퍼블리싱되어반영되지만, Ratio가 2:1이 Mobile의경우사이즈가 750 Pixel인 Canvas에서디자인작업이이뤄지지만, 실제로웹브라우저에서반영되는사이즈는 375 Pixel입니다. 즉, width 가 375 Pixel 인 Mobile 화면을두배큰 750 Pixel 의 Canvas 에서작업한다이해하면됩니다. 3) 화면구성시주의사항 반응형웹사이트의특성상 PC, Mobile 이분리된웹사이트에비해화면구성디자인시다소제약이따릅니다. 아래표를준수하여디자인작업진행부탁드립니다. 주의사항컨텐츠내섹션및항목의순서는변경할수없습니다. PC, Tablet, Mobile 화면내섹션및항목의순서가동일해야합니다. 반응형웹사이트는 PC화면의구성요소들을활용하여 Tablet, Mobile 화면을구성하게됩니다. 1 < 잘못된예 > < 바른예 >
주의사항반응형웹디자인은단순하고명료한디자인을요합니다. 아래예시화면과같이구성이복잡하여 HTML 퍼블리싱작업이불가한경우 PSD를이미지로추출하여웹페이지에삽입하는 이미지삽입방법 으로진행됩니다. 2 < 잘못된예시 > 3 디자인그리드를준수해야합니다. 반응형 & 적응형웹적용을위해선화면그리드구성이통일되어야합니다. PC 화면의그리드와 Mobile 화면의그리드가다른경우. 또는, 한화면내여러유형의그리드가복합적으로설정된경우 HTML퍼블리싱반영이어려울수있습니다. 3 Adaptive( 적응형 ) 영역 설계된분기해상도를따르면 750 Pixel 보다웹브라우저해상도가커지는경우 Mobile 에서 Tablet 으로반응하 여화면의레이아웃이 Tablet 레이아웃으로변경되는 반응형 기술이적용되지만, 같은 Mobile 분기해상도구간내 750 Pixel 이하의해상도에서는 적응형 기술이적용됩니다. 예를들어, Mobile의경우폭약 320 Pixel 부터최대 750 Pixel 까지모바일 Device로간주하여모바일화면을웹브라우저에출력하게되는데, 디자인된모바일화면폭은 375 Pixel (Canvas 750 Pixel * Ratio) 이므로실제디자인된화면과폭이다른 320 Pixel 과 750Pixel 해상도의경우는레이아웃의폭과좌 / 우여백등을가변적으로조절하여화면을축소하거나채우게됩니다. 따라서, 분기해상도구간내에서는레이아웃구성변경이불가하기때문에 PSD 제작시좌 / 우여백이가변적으로 조절될수있도록고려하여디자인해야합니다.
1) 반응형 & 적응형구간 반응형및적응형구간은아래이미지를참고합니다. 2) 가변영역설정 Mobile 디자인을예로들때, 아래이미지와같이가변영역을설정하여적응형웹이적용될수있도록고려하여디 자인해야합니다. 가변영역이확보되지않은경우퍼블리셔임의로가변영역을설정하여작업하게됩니다. 반응형및적응형구간은퍼블리셔의검수를통해완벽하게확보된상태에서퍼블리싱작업에착수되어야합니다. 미비한경우디자인된 PSD 의화면과실제웹페이지에반영된하면이상이할수있습니다.
4 사용가능글꼴 ( 웹폰트 ) 반응형웹사이트뿐아니라, 모든유형의웹사이트내에서의글꼴 (Font-family) 사용은제한적입니다. 글꼴은아래내용을참고하여신중하게선정하여적용해야합니다. 1) 적용가능글꼴의개수 웹사이트에적용되는웹폰트의개수가많을수록웹페이지로딩속도가저하됩니다. 특히, 반응형웹의경우제작되는웹페이지가 PC 와 Mobile 등모든브라우저에서출력되는설계이기때문에더욱 신중하게웹사이트에적용할글꼴을선정해야합니다. 또한, 적용한글꼴의 weight( 굵기 ) 가다수일경우 weight 의종류만큼글꼴의개수가증가합니다. 만약, Noto Sans 글꼴을적용하는경우 Noto Sans Medium 과 Noto Sans Bold 는다른폰트로간주한다는것 을유념해야합니다. 웹사이트에서권장되는글꼴의개수는 3 종류입니다. 2) 사용가능웹폰트확인 웹사이트에적용가능한글꼴은 Windows 나 MacOS 등의운영체계에서문서작성시사용되는글꼴과는차이가있 습니다. 운영체계에서사용되는모든글꼴을웹사이트에적용할수없으며, 라이선스 (license) 나글꼴성격에따라 사용가능유무를판단해야합니다. 웹사이트에적용가능한글꼴은 오픈폰트라이선스 (Open font license)' 성격을가진글꼴로운영체계와웹상에서자유롭게적용할수있는무료글꼴로통상적으로 웹폰트 라고칭합니다. 일반적으로웹폰트는대형포털사이트 (Noto, 나눔체등 ), 대형기업 ( 우아체, 티몬체, 가비아체, 빙그체등 ) 에서제작한경우가많으며, 이러한웹폰트는제약없이온 / 오프라인에서광범위하게사용가능한특징을갖고있습니다. 이용자들이자주사용하는웹폰트는아래 URL 에서 (Google Fonts) 에서확인가능합니다. ( 웹폰트리스트 : https://fonts.google.com) 3) Base 글꼴은반드시 Sans-serif(Gothic) 계열로선정해야합니다. 3종이하의웹폰트를선정할때, Base가되는기본글꼴은 Sans-serif 계열이어야합니다. 글자끝에부리가있는명조, 필기체등의 Serif 폰트를 Base 글꼴로적용하는경우가독성과호환성이저하되어웹사이트접속자에게제대로된정보전달을할수없게되므로 Base 폰트는반드시본고딕, Noto, 나눔고딕등의 Sans-erif 폰트로선정해야합니다. 4) 웹폰트적용시주의사항 웹폰트의종류가과도하게많거나, 웹폰트로적용할수없는성격의글꼴인경우 PSD 에서이미지로추출하여 이미 지삽입방법 으로웹페이지가제작되거나, 글꼴이임의로변경되어제작될수있음을유념해야합니다. 또한, 오픈폰트라이선스 에해당하지않는글꼴을웹사이트에적용함으로발생되는모든법적은문제에대하여웹사 이트제작사에는책임이없음을인지해야합니다.
5 게시판및 Form 디자인제약사항 게시판및문의폼등개발위주의웹페이지는디자인시제약사항이따릅니다. 웹사이트제작시게시판, 문의폼등의개발웹페이지는당사에서제작한솔루션에기반을둔레이아웃과디자인으로 제작되어야합니다. 불가피하게디자인변경이필요한경우, 사전에당사 PM( 프로젝트매니저 ) 을통해디자인변경 가능범위를안내받은뒤진행해야합니다. 6 4K 작업지원범위 제작된웹사이트의내용중이미지로구성된웹페이지는 4K 해상도의모니터에서흐림현상이발생될수있습니다. 이는, 4K 이상의고해상도가소형사이즈의모니터에적용되어모니터 Ratio 가어긋나발생하는현상으로지극히 정상적인현상입니다. 다만, 당사에서는공통레이아웃범위내의이미지 ( 로고등 ) 에한해 4K 해상도에대응할수있도록처리해드리고있 으며, 공통레이아웃의 4K 작업을원하는경우당사에벡터형태의원본이미지파일을함께제공해주셔야합니 다. 지원범위이상의 4K 작업을요청하는경우퍼블리싱및개발작업기간이증가하며, 추가비용이발생됨을유념해 야합니다. 7 간단요약 1. 스마트폰을눕혀웹사이트를접속한경우테블릿혹은 PC Device 로인식될수있습니다. 2. 아래규격으로 PSD 가제작되어야합니다. (Width 기준 ) PC: 1920px / Tablet: 800px / Mobile: 750px 단, Mobile 은 750px 로디자인되나, 퍼블리싱작업시절반사이즈인 375px 로리사이징하여작업됩니다. 3. '2' 에안내된 PSD 규격에어긋나거나, 적응형구간이확보되지않은디자인인경우텍스트코딩이불가할수있습니다. 4. 웹폰트는 3 종이하로디자인하여야하며, 글씨체굵기 (Weight) 의종류도폰트개수로간주합니다. 사용가능한웹폰트는 https://fonts.google.com 에서확인가능합니다. 5. 게시판디자인은기본적으로리스트화면에한해제한적으로가능합니다. 6. 4K 작업은모든페이지에공통적으로노출되는 header, footer 영역에한해제한적으로가능합니다.