테스트 사이트 - 개발 중인 베타 버전입니다
SIR

5. 반응형 네비게이션/메뉴

전진
프로필 보기이 회원 글보기
 · 12년 전 · 16731 · 24

목차

  1. 반응형 네비게이션
  2. 반응형 네비게이션 패턴_1
    1. 상단메뉴
    2. 하단메뉴와 링크
    3. Select
    4. 토글
    5. 좌측 가려진 메뉴
    6. 링크없는 하단메뉴
    7. 안보이기
  3. 반응형 네비게이션 패턴_2: 다단계
    1. 멀티토글
    2. 토글 슬라이더
    3. 하위메뉴 안보이기
    4. 우선순위만 보이기
    5. 슬라이더
  4. 반응형 네비게이션 패턴_3: 터치 노트북
    1. 분할 하단 메뉴
    2. 다단계 하단 메뉴
  5. 주목할 리소스
    1. This Is Responsive: 패턴들
    2. 10가지 예와 튜토리얼
    3. Filament group의 예
    4. Wonderbread
    5. 반응형 네비게이션 아이콘
  6. 닫는 글
  7. 참고문헌/자료

반응형 네비게이션/메뉴

웹사이트를 반응형으로 구성할때, 가장 고민해야 할 부분 중 하나가, 어떻게 각 페이지를 돌아다닐 수 (네비게이션) 있도록, 적절한 메뉴를 제공하는 것입니다. 비 반응형의 경우, 대부분 상단 가로나, 좌(우)측 사이드에 메뉴를 넣는데, 반응형의 경우 이 두가지 공간이 부족해서 메뉴를 보일 수 없는 경우가 많습니다.

NHN개발자블로그에서 진행했던 반응형 웹 개편에서, 블로그의 카테고리 목록을 모바일에서 네비게이션으로 다음과 같이 처리했습니다. (이미지 출처는 원글입니다). 아래 그림은 데스크탑에서 보이는 블로그의 카테고리 목록입니다.

블로그에 따르면, 가장 손쉬운 방법인 <select>으로 처리하는 경우, 기기마다 달리 보이는 문제점이 있음을 지적하였습니다.

그래서, 원글에서는, js로 카테고리 목록을 복사해서 적절한 CSS를 이용해서 아래와 같이 스타일리쉬한 반응형 메뉴를 구현하였습니다.

본 강에서는 이미 사용되고 있는 반응형 네비게이션/메뉴의 패턴들과 기법들을 정리해보고자 합니다.

Brad Frost의 반응형 네비게이션 패턴

Brad Frost가 정리한, 반응형 네비게이션 패턴들입니다. 이 글에서는 일단계 메뉴의 처리에 집중했다면, 이후 업데이트된 글에서는 다단계 메뉴 등 좀더 복잡한 네비게이션을 처리하는 패턴들을 정리했습니다.

여기서는, 장점들은 대부분 쉽게 알 수 있기에 단점들만 나열합니다.

해당이미지는 원래글에서 직접 인용합니다.

Top Nav or “Do Nothing” Approach

(모바일에서) 상단으로 메뉴를 옮기거나, 상단에 있던 네비게이션/메뉴를 그대로 두는 패턴입니다.

단점
  1. 메뉴가 많아지면 화면을 대부분 차지할 수 있습니다.
  2. 또는 (어떤 기기에서) 원하지 않은 여러줄 메뉴가 될 수 있습니다.

The Footer Anchor

메뉴를 아래로 보내고 상단에는, 아래 메뉴로 보내는 링크만 남깁니다.

단점
  1. 화면이 갑자기 아래로 보내지는 상황이, 사용자를 당황하게 할 수 있습니다.

The Select Menu

HTML select 로 (간단히) 변경합니다. 다음은 그누스터디 사이트의 메뉴입니다.

단점
  1. 다중레벨 메뉴를 처리하기기 쉽지 않습니다.
  2. (기본적으로) 스타일이 부족합니다.

The Toggle

Footer Anchor 처럼 메뉴를 보이게 하는 링크를 남기고, 실제 메뉴는 상단에 나타나게 하는 방법입니다. 주로 애니메이션 효과를 같이 사용합니다.

예: Starbucks

단점
  1. 애니메이션이 좋아보이기는 하지만, js를 사용하기에 무거워질 수 있습니다.

The Left Nav Flyout

지난 글의 Off-canvas 패턴으로, 메뉴 부분을 좌측의 숨겨진 패널로 옮기는 방법입니다.

단점
  1. (사용자에게, 그리고 개발자에게) 너무 복잡할 수 있습니다.

The Footer Only

Footer Anchor 와 동일하지만, 상단에 메뉴로 가는 링크가 없습니다. 일종의 콘텐츠 퍼스트로서 콘텐츠를 기본적으로 보여주고, 메뉴는 스크롤해야 보이도록 하는 것입니다.

단점
  1. (당연히) 하단 메뉴를 찾기 어려울 수 있습니다.

The “Hide and Cry” (안보이기)

사실 이것을 반응형 네비게이션 패턴이라고 부를 수 있을지 모르겠지만, 모바일에서는 메뉴를 가리는 패턴입니다.

단점
  1. (당연히) 일부 콘텐츠의 접근이 불가능합니다.

Brad Frost의 복잡한 반응형 네비게이션 패턴

다단계의 복잡한 네비게이션 메뉴를 모바일에서 어떻게 처리하는 지에 대한 패턴을 정리한 것입니다.

The Multi-Toggle

하위 메뉴가 있는 경우, 한번더 클릭/터치해서 보이고/가리도록 합니다.

단점
  1. 여러단계 메뉴의 경우, 아래위로 스크린을 많이 차지 할 수 있습니다.

The Ol’ Right to Left

하위단계를 접근할때 오른쪽에서 해당 패널이 나오도록 하는 방법입니다.

다음은 iToron의 모바일에서의 메뉴입니다.

단점
  1. 가장 복잡한 패턴이어서, 사용하기 쉽지 않을 수 있습니다.
  2. 애니메이션 효과가 부담이 될 수 있습니다.

The ‘Skip the Sub-Nav’

하위단계 메뉴는 무시하고, 최상위 메뉴만 보입니다. 해당 상위메뉴 페이지에 가면 해당 하위메뉴가 보입니다.

단점
  1. 보이지 않는 하위메뉴를 통한 접근이 불가능합니다.

The Priority+

Michael Scharnagl 이 제안한 방법으로, 가장 중요한 메뉴들만 보이도록 하고, 그 외의 메뉴들은 ‘more’나 링크등을 클릭하면 보이도록 합니다.

복잡한 메뉴를 carousel 형태로 보여주는 방법입니다.

LukeW의 반응형 네이게이션

LukeW는 기기별 접근이 용이한 위치로 네비게이션/메뉴를 옮겨야 한다고 주장하였습니다. 아래 그림은 LukeW의 원글에서 직접 인용합니다.

스마트폰과 테블릿, 그리고 터치 가능한 노트북에서 터치의 쉬운 정도를 보여주는 그림입니다. 대부분의 스마트폰과 테블릿 앱들의 일부 메뉴들이 화면 아래로 내려가있는 반면, 앞으로 쏟아져 나올 터치 노트북의 경우 고려되어야 할 것 입니다.

LukeW는 이를 위하여 Split Screen Navigation과 Multi-Level Bottom Navigation을 제안했습니다.

Split Screen Navigation

테블릿과 터치 노트북의 경우, 두 엄지손가락으로 접근이 쉬도록, 양쪽으로 분리된 하단 메뉴를 이용합니다.

LukeW와 함께 Off Canvas Layout 프로토타입을 만들었던 Jason Weaver가, 다시한번 위 패턴의 프로토타입을 만들었습니다. 작동하는 링크는 다음과 같습니다.

  1. Split Screen Navigation
  2. Split Screen Navigation with a background: 변형 형태로, 메뉴가 반투명한 형태로 원래 내용위에 위치합니다.

Multi-Level Bottom Navigation

메뉴를 하단으로 보내고 여러단계의 메뉴를 필요하면 보이도록 링크를 제공하는 형태입니다. 역시 Jason Weaver가 구현한 작동하는 링크입니다.

  1. Multi-Level Bottom Navigation 

주목할 만한 리소스들

Brad Frost의 This Is Responsive Patterns: Navigation

This Is Responsive: patterns - Navigation 섹션에서, 위의 여러 패턴들을 포함하여 여러 패턴들을 정리하고, 작동하는 링크를 포함하고 있습니다.

다단계 메뉴 패턴들과 브래드크럼(breadcrumb 또는 빵조각: 상하위메뉴 나 이동기록 등을 현재의 위치와 함께 보이는 요소) 관련 패턴들을 제공합니다.

10가지의 반응형 네이게이션 기법과 튜토리얼

참조링크

Filament group의 ‘Truly’ 반응형 네이게이션

참조링크

Chris Kobar의 Wonderbread

재미있는 형태의 네비게이션으로, 메뉴와 브래드크럼를 합친 형태입니다.

제안하는 기능과 형태는 훨씬 복잡하지만, 기존의 방법으로 간단하게 구현된 내용은 작동하는 링크를 참조하세요. 그가 제안하는 형태는

  1. 상단의 브래드크럼과 하단의 메뉴로 구성하고
  2. 하단의 메뉴 중 하나로 이동시, 상단에 일반적인 브래드크럼을 보여주며
  3. 여러단계 메뉴를 선택할때, 상단 여러 단계의 브래드크럼 중 하나를 선택하면 해당 위치로 이동됩니다. (위 그림에서 Automobiles 를 클릭하면 해당 페이지로 이동)
  4. 만일 현재 메뉴가 최종 항목이면 하단에 굵은 줄을 넣습니다. (위 그림에서 SUV에 해당)
  5. 만일 단계가 너무 많아서 화면에 다 나타나지 않으면 글자는 가리고 단계만 (색으로) 표시합니다.
  6. 이 경우, 마우스 후버나 스와핑 터치를 하면 가려져 있는 글자들이 나옵니다.
  7. 모바일에서는 브래드크럼을 위아래로 나열합니다.

이러한 내용은 아직 구현되지 않았고, 보다 자세한 내용은 정리된 pdf 화일을 참조하세요.

반응형 네비게이션 아이콘

모바일의 메뉴를 보이고 가리기 위해서 아이콘을 사용하게 됩니다. 많은 경우 굵은 세줄 ‘≡’ 이나 네줄 ‘≣’ 아이콘을 많이 사용하고 있기는 합니다.

반응형 보일러플레이트인 320 and Up 등으로 유명한 Andy Clarke가 이에 관해서 남긴 글에서, 사용된 기호/아이콘들과 단점등을 정리했습니다.

  1. ‘+’ - ‘-’ 기호: 아이템 추가로 사용되는 아이콘과 헷갈릴 수 있습니다.
  2. 그리드 아이콘: 다음, 네이버 등 많은 모바일 웹사이트에서 사용하고 있습니다. 하지만 대부분의 경우, 그리드 아이콘은 일반적인 메뉴라기 보다는, 전체메뉴 나 그리드로 구성된 콘텐츠를 뜻하는 경우가 많습니다.
  3. 목록 아이콘: 몇개의 줄앞에 리스트 불릿이 붙은 형태입니다.
  4. 굵은 세줄: 앱과 웹을 다 포함해서, 가장 많이 사용되는 형태입니다.

닫는 글

반응형 네비게이션/메뉴는, 반응형을 시도할때 가장 먼저, 그리고 상대적으로 쉽게 해결할 수 있는 부분입니다. 대부분 메뉴를 가리고, 해당 아이콘을 클릭/터치하면 보이도록 하는 원리를 이용합니다.

하지만 이러한 모바일용 네비게이션을 구성할때 한번더 고민해봐야 할 부분은, 모바일에서 어떤 내용을 보여줄까, 또는 어떤 내용으로 연결해줄까를 고민해야봐 한다고 생각합니다.

또 한가지 고려할 부분은, 모바일 앱에서 사용하는 여러가지 패턴의 네비게이션을 반응형웹으로 도입하는 것도 좋을것 같습니다.

참고문헌/자료

  1. 정찬명, HelloWorld 블로그 반응형 웹 개편, NHN 개발자 블로그, 2012
  2. Brad Frost, Responsive Navigation Patterns, 2012
  3. 그누스터디, http://study.gnuboard.org/
  4. Brad Frost, Complex Navigation Patterns for Responsive Design, 2012
  5. 아이토론, http://itoron.com/
  6. Luke Wroblewski, Responsive Navigation: Optimizing for Touch Across Devices, lukew.com, 2012
  7. This Is Responsive, Navigation pattenrs
  8. Zurb, Off Canvas Layouts, zurb.com, 2012
  9. Speckyboy Design Magazine, 10 Responsive Navigation Solutions and Tutorials, 2012
  10. Filament group, A Responsive Design Approach for Navigation, Part 1, 2012
  11. Chris Kobar, Wonderbread, 2012
  12. Jeremy Keith, Re-tabulate, Adactio.com, 2011
  13. Andy Clarke, We need a standard show navigation icon for responsive web design, stuffandnonsense.co.uk, 2012
목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 24개

TaisToi
프로필 보기이 회원 글보기
 12년 전
글쓰고 나서 '아 그냥 저 페이지 들어가서 내가 보면 되겠구나;;' 라는 생각을 해고 들어가보니 ul 로 처리되어있네요 ㅎㅎ
전진
프로필 보기이 회원 글보기
 12년 전
네, 그렇죠. ^^
방방이
프로필 보기이 회원 글보기
 12년 전
너무 감사합니다. 좋은정보 잘 보고 갑니다. ㅎ
xusikizqxe
프로필 보기이 회원 글보기
 12년 전
좋은 정보 감사합니다~

게시글 목록

번호 제목
8265
스크롤 소스 구합니다 2
20403
PHP 숫자를 한글표기로 바꾸기 입니다.
20402
Mobile Android,IOS 앱용 아이콘 템플릿 참고 사이트
20401
PHP 여러문장을 한번에 자동 줄바꿈 하기 입니다.
20400
웹서버 서버 동시접속자 설정 변경하기
8259
반응형웹 템플릿 좀 봐주세요. 5
20399
PHP 디렉토리의 모든 파일을 읽어 목록으로 만들기 입니다.
20398
PHP PHP 버전이 낮아 imagerotate() 함수가 없을때 대신 사용하는 함수
8255
가운데 정렬좀 요~~~ 3
8249
시안 퍼블리쉬 해주신느분 있나요? 5
8246
부트스트랩은 어디서 받나요? 2
8242
소스구해요 3
20396
PHP 간단하게 자동으로 테이블 너비 조정하기 입니다. 1
8240
PHP MYSQL 장문 필드 검색 질문 입니다. 2
20395
PHP 문자열자르기 (문자별 다른 너비 해결)
20394
MySQL 테이블 복사 쿼리
31033
기타 많이들 사용하시는 Slider 에 대해서... 2
28385
밀려요 2
20393
PHP 현재 접속중인 사용자 나타내기
28380
디스플라이 인라인이 안되요,, 4
20392
MySQL mysql select 후 update 하기
28377
노란색박스가 가운데로 오게하려면 어떻게 하나요? 2
20391
PHP 다른 페이지로 이동하는 방법 3가지 입니다.
20390
PHP 한글문자열 자르는 법 입니다.
20389
PHP mysql_query 전체 갯수 빨리 알아보기 입니다.
20388
PHP POST값 통째로 인코딩하기, 배열, iconv
20387
PHP 이메일주소 검사하기 입니다.
20386
웹서버 php 확장자 내 맘대로 바꾸기 입니다.
20385
PHP 문자열을 한 문자씩 나누어 출력하기 입니다.
20384
node.js Node js 게시판 프로젝트 소개합니다.
20383
PHP pc 모바일 체크 1
20382
PHP 계정 사용량(용량) 확인
8238
어도비에서 만든 텍스트에디터 Brackets 1
20380
PHP textarea 입력한 엔터값 출력하기 1
20379
MySQL 소수점 반올림 버림
28376
html page 이동시 흰색 깜박임 없앨수 있나요??
28372
헤더영역 position: fixed 했는데 가로 스크롤이 안되네요 3
20378
jQuery jQuery version 1.9 이상에서 $.browser 사용하기
20377
PHP 에러 로그파일 생성하기
8235
CRM 고객관리 프로그램 2
20375
PHP 간단한 특정 IP 차단하기 입니다. 1
20374
PHP 다른 사이트의 내용을 자동으로 긁어오기 입니다.
20373
PHP 후이즈검색 하기 입니다.
20372
PHP 그래프 그리기 입니다.
20371
JavaScript 자바스크립트로 구현한 number_format() 입니다.
20370
JavaScript 금액 관련 숫자를 한글로 변환하기 입니다.
28370
모니터 별 세로 해상도 채울 수 있나요? 1
20369
PHP PHP 날짜 계산 관련 함수
28366
이제 3년되가는 퍼블리셔입니다. 3
20368
jQuery jQuery 1.x와 2.x 버전 동시에 사용하기
20367
PHP 요일, 시간마다 다른 CSS 제어하기 입니다.
20366
PHP iframe내의 id셀렉터 입니다.
20365
JavaScript 사업자 등록번호 검사하기 입니다.
20364
PHP 폼전송을 통해서 페이지를 이동하기 입니다.
20363
JavaScript 항상 같은곳에 광고창 만들기 입니다.
20362
JavaScript 부메뉴 나오게 하기 입니다.
20361
JavaScript 특정문자 제거하기 입니다.
20360
JavaScript 휴대폰번호 검사 하기 입니다.
20359
JavaScript 이미지 좌우로 이동 갤러리 입니다.
8231
웹 html 에디터는 어떻게 구현하시나요? 3
20358
PHP 파일 확장자 검사 함수 입니다.
20357
JavaScript 쉬운 replaceAll 입니다.
20356
PHP 그누보드 최근 게시물 파싱하기 입니다.
20355
PHP [알고리즘]퀵 정렬(Quick Sort)
20354
PHP php로 옥션 지마켓 11번가 쿠팡 위메프 등의 발주내역서 파일을
20353
PHP array_unique 배열중복값 제거
20352
JavaScript 콤보스타일 메뉴 입니다.
20351
JavaScript 쿠키를 이용한 레이어 공지창 입니다.
20350
JavaScript 효과있는 텍스트 틱커 입니다.
20349
PHP [알고리즘]힙 정렬(Heap Sort)
20348
PHP HTTP 인증 하기 입니다.
20347
JavaScript 외부 문서 불러오기 입니다.
20346
JavaScript 지정한 날짜까지 New 이미지를 띄워주기 입니다.
20345
MySQL Common MySQL Queries 다양한 MySQL 쿼리 예제
20344
JavaScript 메일 주소 검사하기 체크박스 입니다.
20343
JavaScript 무단링크 금지하기 입니다.
20342
PHP 간단하게 마우스,드래그,복사 등 막기 입니다.
20341
MySQL DB백업 및 복원
20340
JavaScript 페이지가 다른 사이트의 프레임에 갇히는 것을 막기 입니다.
20339
PHP 다른 사이트로 이동시 또는 창 닫을 시에 자동 로그아웃 하기 입니다.
20338
PHP PHP에 MYSQL 와 자바스크립트 연동 예제 입니다.
20337
jQuery input text 대문자만 받는 Jquery
20336
PHP 현재 페이지 URL 출력하기 입니다.
20335
JavaScript 이미지 업로드와 미리보기 입니다.
20334
JavaScript 배경음악 랜덤 재생 하기 입니다.
20333
JavaScript css 지원 여부 확인해서 다른 페이지로 이동하기 입니다.
20332
JavaScript 하부메뉴가 보였다가 숨겨졌다 하는 토글버튼 입니다.
20331
JavaScript 개별 페이지에 인덱스로 거쳐 들어오게 하기 입니다.
20330
JavaScript 랜덤으로 이미지 출력 되기 입니다.
20329
JavaScript 사용자 해상도 알아내기 입니다.
20328
JavaScript 붙여넣기 금지하기 입니다.
20327
MySQL 대소문자 데이터 조회하기
20326
JavaScript 퇴장시 팝업창 한번한 띄우기 입니다.
20325
PHP www 주소 리다이렉션 시켜주기 입니다.
20324
PHP 신문 기사를 긁어오기 입니다. 1
20323
JavaScript 시도, 구군, 동 주소 select
20322
MySQL 커리로 DB 테이블 명세서 출력하기
20321
JavaScript 브라우저 해상도 구분없는 절대 x,y 좌표 값 구하기 입니다
20320
PHP rss 읽어오기 입니다.
20319
JavaScript 자바스크립트로 Ajax 효과내기 입니다.
이전 다음
전체 목록