반응형 웹(RWD) 디자인 및 테스트 도구 모음

Source

  • Evernote/Technote scraps/반응형 웹의 완성도를 높여주는 유용한 사이트 이롭게 iropke.md

Summary

이 문서는 반응형 웹 디자인의 완성도를 높이기 위한 유용한 웹사이트 및 도구들을 카테고리별로 소개합니다. 주요 내용은 그리드 시스템 설계 및 시각화 도구(Golden Grid System, Gridpak, Grid Calculator 등)와 다양한 디바이스에서의 반응형 레이아웃 미리보기 및 테스트 시뮬레이션 도구(The Responsinator, Responsive.is, TROY 등)로 구성됩니다. 각 도구의 특징과 사용법을 간략히 설명하고 있습니다.

Key Points

  • 반응형 웹 그리드 설계 및 시각화 도구: Golden Grid System, Elliot Jay Stocks의 Photoshop 그리드, Gridpak, Grid Calculator 등이 소개되며, 브라우저 크기 변화에 따른 그리드 변화 확인 및 PSD/CSS 파일 생성 기능을 강조합니다.
  • 반응형 레이아웃 테스트 및 시뮬레이션 도구: The Responsinator, Responsive.is, TROY(다음), Responsive Design Testing 등이 소개되며, 다양한 디바이스(iPhone, iPad, 갤럭시 등) 및 화면 크기에서의 실제 렌더링 미리보기 기능을 제공합니다.
  • 참고 자료: Media Queries 사이트는 대표적인 스크린 사이즈별 반응형 웹 예시를 한눈에 비교할 수 있는 갤러리 역할을 합니다.