햄버거 버튼

위키백과, 우리 모두의 백과사전.

햄버거 버튼에 사용되는, 접힌 메뉴 아이콘
햄버거 - 아이콘 별칭의 기원

햄버거 버튼(hamburger button)은 햄버거와 우연히 닮은 데에서 비롯된 이름으로, 그래픽 사용자 인터페이스의 최상위 모퉁이에 보통 위치하는 버튼의 하나이다.[1] 메뉴를 토글하거나(이를 보통 "햄버거 메뉴"라고 부름) 버튼 뒤에 접어두는 것과 화면에 표시하는 것 사이를 넘나드는 내비게이션 바 역할을 한다. 이 위젯과 관련된 아이콘은 수평 막대 3개로 이루어져 있으며 이를 접힌 메뉴 아이콘(collapsed menu icon)이라고 한다.

역사[편집]

디자인 기원[편집]

이 아이콘은 원래 놈 콕스(Norm Cox)가 제록스 스타의 사용자 인터페이스의 일부로 처음 설계한 것으로, 1981년 선보였다.[2] 이 아이콘은 모바일 앱에서 이용 가능한 화면 영역이 제한됨에 따라 2009년부터 빛을 보기 시작했다.[3][4][5] 콕스는 이 아이콘의 제작을 설명하면서 "이것의 그래픽 디자인은 상당히 도로 표지판처럼 단순하고 기능적으로 기억할만 하며 결과로 보이는 메뉴 목록의 외형을 모방하는 것이 의도였다. 작업할 화소가 거의 없으면서도 분명하지만 단순해야 했다. 이미지 렌더링을 위해서는 16 x 16 화소만이(아니면 13 x 13만이, 정확히 기억나지는 않는다) 필요했다."고 말했다.[6]

비평[편집]

접혀있는 메뉴 버튼이 현재 일상화되어 있으나 이 기능이 처음 마주쳤을 때에는 바로 명확히 드러나지 않는다는 논쟁이 있어왔다.[7] 특히 현대의 아이코노그래피에 덜 친숙한 옛 사용자들에게 혼동을 불러일으킬 수 있다.[8]

같이 보기[편집]

각주[편집]

  1. “How To Create a Menu Icon”. 《www.w3schools.com》. 2018년 9월 5일에 원본 문서에서 보존된 문서. 2018년 9월 20일에 확인함. 
  2. “The origin of the hamburger icon”. 2015년 11월 7일에 원본 문서에서 보존된 문서. 2018년 9월 20일에 확인함. 
  3. Campbell-Dollaghan, Kelsey (2014년 3월 31일). “Who Designed the Hamburger Icon?”. Gizmodo. 2016년 2월 6일에 원본 문서에서 보존된 문서. 2016년 2월 2일에 확인함. 
  4. “A Brief History of the Hamburger Icon”. 《placeit.net》. 2014년 10월 29일. 2017년 2월 2일에 원본 문서에서 보존된 문서. 2017년 1월 25일에 확인함. 
  5. Ltd., Stuff & Nonsense. “We need a standard show navigation icon for responsive web design”. 2018년 9월 20일에 원본 문서에서 보존된 문서. 2018년 9월 20일에 확인함. 
  6. “A Brief History of the Hamburger Icon”. 《Placeit Blog》 (미국 영어). 2014년 10월 29일. 2019년 2월 23일에 확인함. 
  7. Stokel-Walker, Chris (2015년 5월 16일). “Hamburger icon: How these three lines mystify most people”. 《BBC》. 2018년 2월 20일에 원본 문서에서 보존된 문서. 2018년 10월 11일에 확인함. 
  8. “Loving & Hating the Hamburger Icon”. 《Webdesigner Depot》 (영어). 2018년 9월 17일. 2019년 2월 23일에 확인함.