가변형 레이아웃/네비게이션 패턴

• 원글정보:    작성일시 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가지 패턴의 메뉴 처리 패턴.

1. Top nav or “do nothing”: 주로 메뉴가 상단에 있는 경우, 아무런 처리를 하지 않거나 약간의 조정만 해주는 방법. 
2. Footer anchor: 메뉴는 하단으로 보내고, 상단에는 하단 메뉴로 보내는 링크 하나만 남기는 방법.
3. Select menu: 메뉴를 실렉트로 바꾸는 방법.
4. Toggle: 드랍다운 메뉴를 토글로 보여주는 방법. Bootstrap
5. Left nav flyout: 위 레이아웃 패턴중 off canvas에 해당하는 경우.
6. Footer-only: Footer anchor와 다른 점은, 상단에 링크가 없다는 점.
7. “Hide n’ Cry”: 많은 부분을 가려버리고 모바일 용 내용만 보여주는 방법.

   

댓글보기

             지운아빠 2012.04.25 19:58:56       

                                    감사합니다. 공부할 게 점점 많아지니 기쁨의 눈물이 흐르네요. ㅎㅎㅎ
으허어어어헝헝엏어어어헝엉                   

        

            전진 2012.04.25 20:12:17       

                                    동감입니다. ^^*

그래도 이번것은, 기술적인 부분이 아니고, ui/ux 패턴이라서 그나마 나았어요..^^;
아마 당분간 더 찾아보지는 않고, 지금까지 조사한 것 중
맘에 드는 것 하나씩을 선택해서 프로토타입 만들어보는 것에 집중해볼까 봐요.. ^^