가변형 레이아웃/네비게이션 패턴
- 원글정보: 작성일시 2012.04.25 06:37:45
- 조회 529
- 댓글 3
제 블로그 글을 요약했습니다. :)
Multi-Device Layout Patterns - LukeW : mediaqueri.es 의 반응형 사이트들의 레이아웃 패턴을 5가지로 구분 (이미지 출처는 원글)
1. Mostly Fluid: 가장 많이 사용되는 방법으로, 데스크탑 화면에서 (좌우 넓은 여백과 함께) 유동형 그리드 (fluid grid)들이 여러 컬럼으로 배치되고, 화면 폭이 특정 크기 이하가 되면 그리드들이 선형화 되는 구조.
2. Column Drop: 스크린의 크기가 작아지면서, 여러 컬럼들 중 (주로 오른쪽 부터) 하나씩 아래로 이동하는 형태. 각 컬럼의 폭은, mostly fluid와는 달리, 유지되는 형태.
3. Layout Shifter: 화면 크기에 따라서 레이아웃이 크게 변하는 형태. 화면별 레이아웃을 별도로 구성해야 하는, 반응형 웹의 실험적 시도.
4. Tiny Tweaks: 대부분 하나의 컬럼을 사용하고, 화면 폭 변화에 아주 약간의 조정만 하는 형태. 주로 글 내용을 중시하는 블로그들에서 사용.
5. Off Canvas: 가장 혁신적인 방법 중에 하나로써, 많은 native app에서 사용하는, 화면의 바깥에 다른 컬럼들을 배치하여 필요할때만 원하는 컬럼 (주로 네비게이션)을 접근하도록 하는 방법. Css만으로는 불가능하고, 모바일 터치 이벤트를 받아서 처리할 수 있는 방법(js)이 필요.
반응형 메뉴(navigation) 패턴 - Brad Frost : 7가지 패턴의 메뉴 처리 패턴.
- Top nav or “do nothing”: 주로 메뉴가 상단에 있는 경우, 아무런 처리를 하지 않거나 약간의 조정만 해주는 방법.
- Footer anchor: 메뉴는 하단으로 보내고, 상단에는 하단 메뉴로 보내는 링크 하나만 남기는 방법.
- Select menu: 메뉴를 실렉트로 바꾸는 방법.
- Toggle: 드랍다운 메뉴를 토글로 보여주는 방법. Bootstrap
- Left nav flyout: 위 레이아웃 패턴중 off canvas에 해당하는 경우.
- Footer-only: Footer anchor와 다른 점은, 상단에 링크가 없다는 점.
- “Hide n’ Cry”: 많은 부분을 가려버리고 모바일 용 내용만 보여주는 방법.
그밖에 유용한 그리고 재밌는 리소스들로
- 복잡한 데스크탑 레이아웃이 어떻게 모바일 레이아웃으로 바뀌는 지 보여주는 웹: http://www.thismanslife.co.uk/projects/lab/responsivewireframes/ – 안에 들어있는 css만 연구해도 괜찮은 소스라 생각됩니다.
- http://www.thismanslife.co.uk/projects/lab/responsiveillustration/: 같은 웹사이트의 다른 페이지로, 화면 폭을 변화할때 각각을 대표하는 기기들로 변하는 애니메이션. 별다른 용도는 없어보임.
댓글보기
지운아빠 2012.04.25 19:58:56 감사합니다. 공부할 게 점점 많아지니 기쁨의 눈물이 흐르네요. ㅎㅎㅎ
으허어어어헝헝엏어어어헝엉
동감입니다. ^^*
그래도 이번것은, 기술적인 부분이 아니고, ui/ux 패턴이라서 그나마 나았어요..^^;
아마 당분간 더 찾아보지는 않고, 지금까지 조사한 것 중
맘에 드는 것 하나씩을 선택해서 프로토타입 만들어보는 것에 집중해볼까 봐요.. ^^
댓글 2개
레이아웃: http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=205
네비게이션/메뉴: http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=220