반응형 웹 구현에 도움이 되는 사이트를 소개하고자 합니다.
1. Responsive Column Layouts
컬럼의 레이아웃 구성입니다. 넓은 브라우저일때와 좁은 브라우저 일때 자동으로 레이아웃을 변경해줘서
좁은 환경에서는 모바일로도 보기 적당해 따로 모바일 버전을 제작하지 않아도 되는 편한 레이아웃입니다.
다만, 한국에서는 게시판 위주의 인터렉티브 구조라서 그런지 그누보드나 기타 게시판들이 해당 반응형 웹의 구조를
지원해준다면 모바일 사이트를 따로 제작하지 않아도 되지만, 다소 압축되지 않은 이미지의 트래픽 등의 단점도 지녔습니다.
넓은 환경에서는 위와 같이 1줄에 4개의 컬럼이 보입니다.
좀 더 줄이면 2개....
모바일 환경에 적합하게 줄엽면 한줄만 보이는 것을 알 수 있습니다.
위와 같이 반응형 웹은 가로 스크로를 스타일에서 강제로 보이지 않게 하는 소스(style="overflow-x:hidden; overflow-y:auto")를 따로 사용하지 않아도 보여지지 않습니다.
2. @dbushell 반응협 웹 레이아웃 구성
데비드 부쉘의 DOES 디자인 사이트입니다.
위의 반응형 웹과 다른 부분은 상단의 호라이즌 메뉴들이 모바일 환경의 좁은 인터페이스에서는 좌측 상단에 히든 메뉴로 압축되는 스타일입니다. 다른 웹사이트 디자인의 주소를 못찾겠는데 일부 디자인 사이트에서는 가로 환경이 훨씬 더 넓어지면 왼쪽에 버티컬 메뉴로 펼쳐지는 반응형 웹도 있습니다.
넓은 인터페이스에서는 상단에 메뉴가 가로로 펼쳐지지만 이를 좁게 해보면 아래의 왼쪽처럼 히든 메뉴 버튼으로 변합니다.
그리고 히든 메뉴를 클릭하면 왼쪽에 버티컬 메뉴가 나타나는데 버티컬 메뉴가 나타나도 가로 스크롤은 생기지 않더군요.
반응형웹은 모바일과 패드 형식의 환경에 적합하게 웹구현을 해주는데 상당히 좋은 기술입니다.
국내에서는 아직 이를 구현해서 적용한 곳이 많지 않은데 네이버는 일찍이 이 반응형 웹으로 패드랑 모바일이랑 구분해지더군요.
댓글