반응형 웹디자인의 유용한 길잡이 사이트 12개 총집합

반응형 웹디자인의 유용한 길잡이 사이트 12개 총집합

 

반응형 웹디자인(RWD)이 올해는 국내에서도 보편화 되며 많은 사이트에 적용되고 있습니다. 예전에는 와이드 화면과 모바일 정도만 신경쓰면 되었지만 이제는 모바일, 테블릿 PC도 다양한 사이즈와 해상도로 출시되기 때문에 다양한 디바이스에 대응하지 않으면 안됩니다.

 

 

반응형 웹 디자인이란?

반응형 웹 디자인(Responsive Web Design, RWD)은 다양한 디바이스에 대응하여 최소한의 변화(Resizing, Panning, Scrolling)로 내용 탐색을 쉽게 하여, 사이트를 최적의 형태로 제공하는 기술입니다.(휴대폰에서부터 데스크탑 컴퓨터에 이르기까지)
반응형 웹 사이트는 유동적이고 비율에 기초한 그리드와 유연한 이미지, 그리고 @media 규칙에서 확장된 CSS3 미디어 쿼리(Media Queries)를 활용하여 보여지는 레이아웃에 적응합니다.

출처 – http://en.wikipedia.org/wiki/Responsive_Web_Design 

 

 

디자이너들에게는 유연한 레이아웃을 고려해야 하는 숙제가 생겼는데요. 국내에는 도움이 될만한 교육자료가 부족하다 보니 해외 사이트들을 뒤적이고 있는데요. 반응형 웹디자인에 유용한 길잡이 사이트를 잘 정리한 자료가 있어 공유합니다.

 

 

 

 

총 12개의 사이트로 Daum의 트로이(Troy)를 제외하면 모두 해외 사이트입니다. 실제 프로젝트를 진행하며 반응형 웹디자인의 완성도를 높여줄 수 있는 기능들이 가득 담겨 있습니다.

 

 

** 본 자료는 (주)이롭게 디자이너 Sarah 님이 작성한 포스트를 스크랩한 것으로 무단복제가 아닌 이미지로 캡쳐 하였습니다. 단, 해당 사이트는 클릭하면 바로 이동하니 참고바랍니다.

 

▶ 원문 바로 가기

 

 

 

 

 

 

 

 

JSX 파일 포멧이란?

JSX 파일은 포토샵에서 자동으로 스크립트를 실행시키는 파일입니다. ‘File > Scripts > Browse’ 메뉴를 통해 파일을 불러올 수 있으며 위의 ‘Grid Calculator’ 예시의 경우 해당 파일을 포토샵에서 실행하면, 자동으로 설정한 그리드의 값에 맞춰서 캔버스에 가이드 라인이 생성됩니다.

 

 

 

 

 

 

 

 

 

 

 

 

<이롭게 블로그에 가시면 더욱 다양한 반응형 웹을 만날 수 있습니다>