햄버거 버튼
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
햄버거 버튼은 세 개의 가로선으로 구성된 아이콘으로, 메뉴를 표시하는 데 사용된다. 1981년 제록스 스타의 사용자 인터페이스를 위해 놈 콕스에 의해 처음 디자인되었으며, 1985년 Windows 1.0에 사용된 이후 모바일 앱의 화면 공간을 절약하기 위해 널리 사용되었다. 햄버거 버튼은 사용성 문제와 상호작용 비용 증가, 정보 은닉의 문제 등 비판을 받기도 하지만, 화면 공간을 절약하는 장점이 있다.
더 읽어볼만한 페이지
| 햄버거 버튼 | |
|---|---|
| 개요 | |
| 유형 | 사용자 인터페이스 요소 |
| 목적 | 메뉴 접근 |
| 대체 이름 | 메뉴 버튼 3줄 아이콘 빵 |
| 설명 | |
| 형태 | 일반적으로 세 개의 평행한 가로선으로 구성됨 |
| 기능 | 클릭 시 메뉴를 표시하거나 숨김 |
| 사용 | 주로 모바일 앱 및 웹사이트에서 사용됨 |
| 장점 | 화면 공간 절약 직관적인 인터페이스 |
| 단점 | 명확성이 떨어질 수 있음 숨겨진 탐색으로 인해 사용성이 저하될 수 있음 |
| 접근성 고려 사항 | |
| 명확한 라벨 | 스크린 리더 사용자를 위해 명확한 라벨 제공 필요 |
| 적절한 크기 | 터치스크린 사용을 위해 충분한 크기 확보 필요 |
| 대비 | 배경과의 충분한 색상 대비 유지 필요 |
| 대체 UI 패턴 | |
| 탭 바 | 주요 기능에 직접 접근 |
| 전체 화면 메뉴 | 화면 전체를 사용하여 메뉴 표시 |
| 점진적 공개 | 필요에 따라 메뉴 항목 표시 |
| 논쟁 | |
| 사용성 문제 | 일부 사용자는 햄버거 버튼이 명확하지 않다고 생각함 |
| 발견 가능성 | 숨겨진 탐색으로 인해 중요한 콘텐츠를 놓칠 수 있음 |
| 참여도 감소 | 탭 바에 비해 사용자 참여도가 낮을 수 있음 |
2. 역사
햄버거 버튼 아이콘은 디자이너 놈 콕스가 1981년 제록스 스타 개인용 컴퓨터의 사용자 인터페이스를 위해 처음 디자인했다. 이 디자인은 표시될 메뉴 목록을 단순한 형태로 시각화하려는 의도를 가졌으며, 제한된 화소 환경에서도 명확하게 보이도록 고안되었다.[1][9]
초기에는 1985년에 출시된 Windows 1.0의 제어 메뉴 등에서도 사용되었으나,[2][10] 이후 Windows 운영체제에서는 Windows 2.0, Windows 95 등을 거치며 다른 형태로 대체되어 한동안 잘 사용되지 않았다.[3][11] 햄버거 아이콘이 다시 Windows에 등장한 것은 Windows 10의 1주년 업데이트에서 시작 메뉴에 적용되면서부터이다.[4][12]
2009년경부터 스마트폰과 같은 모바일 기기의 보급이 확산되면서, 제한된 화면 공간을 효율적으로 활용하기 위한 인터페이스 요소로 햄버거 버튼이 다시 주목받으며 널리 사용되기 시작했다.
한편, 2024년에는 오레오 브랜드를 소유한 몬덜리즈 인터내셔널이 이 아이콘의 명칭으로 '오레오'를 사용하자는 제안을 하기도 했다.[5][6]
2. 1. 디자인 기원
이 아이콘은 디자이너 놈 콕스(Norm Cox)가 1981년 제록스 스타(Xerox Star) 개인용 컴퓨터의 사용자 인터페이스 일부로 처음 디자인했다.[17] 콕스는 이 아이콘의 디자인 의도를 다음과 같이 설명했다. "이것의 그래픽 디자인은 상당히 도로 표지판처럼 단순하고 기능적으로 기억할만 하며, 결과로 보이는 메뉴 목록의 외형을 모방하는 것이 의도였다. 작업할 화소(픽셀)가 거의 없었기 때문에 매우 분명하면서도 단순해야 했다. 이미지 렌더링을 위해서는 16 x 16 화소만이(아니면 13 x 13만이, 정확히 기억나지는 않는다) 필요했다."[1]제록스 스타 이후 이 아이콘이 사용된 초기 사례 중 하나는 1985년에 출시된 Windows 1.0이다. 여기서는 각 창의 제어 메뉴에 햄버거 아이콘이 포함되었다.[2] 그러나 이 아이콘은 오래 사용되지 못했다. Windows 2.0에서는 제어 메뉴를 나타내는 아이콘이 단일 가로선으로 변경되었고,[3] Windows 95에서는 이 가로선마저 프로그램 자체 아이콘으로 대체되었다.[3] 햄버거 아이콘은 이후 Windows 10의 1주년 업데이트에서 시작 메뉴에 다시 등장하기 전까지 Windows 운영체제에서 찾아보기 어려웠다.[4]
콕스가 디자인한 햄버거 아이콘은 2009년경부터 다시 주목받기 시작했는데, 이는 모바일 앱이 널리 보급되면서 제한된 화면 공간을 효율적으로 활용해야 할 필요성이 커졌기 때문이다.[18]
한편, 2024년에는 오레오 브랜드 소유주인 몬덜리즈 인터내셔널(Mondelez International)이 햄버거 메뉴 대신 '오레오'라고 부르자는 캠페인을 벌이기도 했다.[5][6]
2. 2. 초기 사용
이 아이콘은 Norm Coxeng가 디자인했으며, 1981년 출시된 제록스 스타 개인용 컴퓨터의 사용자 인터페이스 일부로 처음 도입되었다. Cox는 이 아이콘을 디자인한 배경에 대해 다음과 같이 설명했다.:그 그래픽 디자인은 매우 '도로 표지판'처럼 단순하고, 기능적으로 기억하기 쉬우며, 결과적으로 표시되는 메뉴 목록의 모양을 모방하도록 의도되었다. 픽셀 수가 매우 적었기 때문에 매우 뚜렷하면서도 단순해야 했다. 이미지를 렌더링하는 데 16×16 픽셀만 있었던 것 같다. (또는 13×13... 정확히 기억나지 않는다).[1][9]
제록스 스타 이후, 햄버거 아이콘은 1985년 출시된 Microsoft Windows 1.0에서 각 창의 제어 메뉴에 사용된 것으로 보인다.[2][10] 하지만 이 아이콘은 오래 사용되지 못했다. Microsoft Windows 2.0에서는 제어 메뉴를 나타내는 아이콘이 단일 가로선으로 변경되었고, Microsoft Windows 95에서는 이 가로선마저 프로그램 자체 아이콘으로 대체되었다.[3][11] 이후 햄버거 아이콘은 Microsoft Windows 10의 1주년 업데이트에서 시작 메뉴에 다시 등장하기 전까지 Windows 운영체제에서 찾아볼 수 없었다.[4][12]
Cox가 디자인한 햄버거 아이콘은 모바일 앱에서 사용할 수 있는 화면 공간이 제한적이라는 특징 때문에 2009년부터 다시 주목받기 시작했다.
2024년에는 오레오 브랜드를 소유한 몬덜리즈 인터내셔널이 햄버거 메뉴 대신 "오레오"라고 부르자는 캠페인을 벌이기도 했다.[5][6]
2. 3. 부활과 확산
제록스 스타 이후 햄버거 버튼이 다시 사용된 초기 사례 중 하나는 1985년에 출시된 Windows 1.0이다. 당시 각 창의 제어 메뉴에 햄버거 아이콘이 포함되어 있었다.[2][10] 그러나 이 아이콘은 오래 사용되지 못했다. Windows 2.0에서는 제어 메뉴를 나타내는 아이콘이 단일 가로선으로 변경되었고, Windows 95에서는 이 가로선 마저 각 프로그램의 고유 아이콘으로 대체되었다.[3][11] 이후 햄버거 아이콘은 Windows 10의 1주년 업데이트에서 시작 메뉴에 다시 등장하기 전까지 Windows 운영체제에서 오랫동안 사용되지 않았다.[4][12]
햄버거 아이콘은 2009년경부터 다시 널리 사용되기 시작했는데, 이는 스마트폰과 같은 모바일 기기의 모바일 앱에서 사용할 수 있는 화면 공간이 제한적이라는 문제에 대한 해결책으로 주목받았기 때문이다.
한편, 2024년에는 오레오 브랜드를 소유한 몬덜리즈 인터내셔널(Mondelez International)이 햄버거 메뉴 대신 "오레오"라고 부를 것을 공개적으로 제안하기도 했다.[5][6]
2. 4. 명칭 논란
2024년, 오레오 브랜드를 소유한 Mondelez International은 햄버거 메뉴 아이콘 대신 "오레오"라고 부르자고 공개적으로 제안했다.[5][6]3. 외관과 기능
햄버거 버튼 아이콘은 일반적으로 세 개의 평행한 가로선(☰)으로 디자인되어, 마치 작은 메뉴 목록처럼 보인다. 이 버튼을 클릭하거나 누르면 숨겨져 있던 메뉴가 나타나는 것이 기본적인 기능이다.
화면 공간이나 사용 맥락에 따라 세 개의 수직 점(⋮, 케밥 버튼)이나 세 줄의 정사각형 배열(⋮⋮⋮, 와플 버튼)과 같은 변형된 아이콘이 사용되기도 한다. 메뉴가 표시된 상태에서는 아이콘 모양이 X 버튼 등으로 바뀌기도 한다.[13][14]
3. 1. 기본 형태
이 아이콘은 작은 메뉴의 텍스트 줄을 닮도록 의도된 세 개의 평행한 가로선(흔히 '''≡'''와 같이 표시됨)으로 구성되어 있다. 이 명칭은 아이콘을 조작했을 때 펼쳐지는 메뉴의 모양을 닮았다는 데에서 유래했다는 설이 있다.
화면 공간을 더 줄이기 위해 세 개의 수직으로 쌓인 점('''⋮'''와 같이 표시됨) 형태로 좁혀지기도 하는데, 이는 ''''케밥'''', ''''미트볼'''', ''''팔라펠 버튼'''' 등으로 불리지만, 여전히 일반적인 모양의 메뉴가 나타난다. Microsoft Office 365 및 Google 온라인 제품에서는 세 줄의 세 개 정사각형('''⋮⋮⋮'''와 같이 표시됨)으로 구성된 유사한 아이콘이 사용되기도 한다. 이 아이콘은 메뉴 대신 아이콘 배열을 보여주며, ''''와플 버튼''''이라고 불린다.
이러한 버튼을 클릭하거나 누르면 일반적으로 세로 형태의 메뉴가 나타난다. 이는 항상 화면에 표시되는 메뉴바 또는 탭 모음과는 구별된다. 메뉴 버튼을 누른 후에는 메뉴바가 버튼 위에 겹쳐지거나, 버튼 모양이 × 버튼으로 바뀌는 경우가 있다.[13] × 버튼으로 바뀔 때는 애니메이션 효과가 함께 나타나기도 한다.[14]
3. 2. 기능
햄버거 버튼 아이콘은 일반적으로 세 개의 평행한 가로선('''≡'''와 같이 표시됨)으로 이루어져 있으며, 이는 작은 메뉴의 텍스트 줄을 시각적으로 나타낸 것이다. 이 버튼을 클릭하거나 누르면 일반적으로 수직 메뉴가 나타난다. 이는 항상 화면에 표시되는 메뉴바나 탭 바와는 다른 방식이다.
화면 공간을 더 절약하기 위해 아이콘이 세 개의 수직 점('''⋮''')으로 표시되기도 하는데, 이는 '''케밥''', '''미트볼''', '''팔라펠 버튼''' 등으로 불린다. 이 버튼 역시 일반적인 메뉴를 표시한다. 한편, Microsoft Office 365나 구글 온라인 제품 등에서는 세 줄로 배열된 세 개의 정사각형('''⋮⋮⋮''') 모양 아이콘이 사용되기도 한다. 이는 '''와플 버튼'''이라 불리며, 메뉴 대신 여러 앱이나 기능 아이콘 배열을 보여준다.
메뉴 버튼을 누른 후에는 원래 버튼 아이콘 위에 메뉴가 겹쳐서 표시되거나, 아이콘이 닫기 기능을 하는 X 버튼으로 바뀌는[13] 등의 형태로 변하기도 한다. 특히 X 버튼으로 바뀔 때는 애니메이션 효과가 함께 나타나는 경우가 많다.[14]
3. 3. 변형
햄버거 버튼 아이콘은 세 개의 평행한 가로선(☰)으로 구성되어 작은 메뉴의 텍스트 줄을 연상시킨다. 화면 공간을 더 절약하기 위해 세 개의 수직으로 쌓인 점('''⋮''') 형태로 축소되기도 한다. 이는 '''케밥''', '''미트볼''', 또는 '''팔라펠 버튼'''이라고 불리며, 클릭하면 일반적인 햄버거 버튼처럼 메뉴가 나타난다.
Microsoft Office 365나 구글(Google) 온라인 제품에서는 세 줄로 배열된 세 개의 정사각형('''⋮⋮⋮''') 모양의 아이콘도 사용된다. 이는 '''와플 버튼'''이라고 불리며, 클릭하면 메뉴 대신 아이콘 배열이 나타난다.
햄버거 버튼이나 그 변형 버튼을 클릭하거나 누르면, 일반적으로 세로 형태의 메뉴가 나타나는데, 이는 단일 항목 메뉴나 탭 모음과 유사한 기능을 한다. 버튼을 누른 후의 변화로는, 기존 버튼(☰) 위에 메뉴가 겹쳐서 표시되거나, 버튼 자체가 X 모양(×)으로 바뀌는 경우가 있다.[13] X 버튼으로 바뀌는 경우에는 애니메이션 효과가 함께 나타나기도 한다.[14]
4. 비평
햄버거 버튼은 현재 널리 사용되는 인터페이스 요소이지만, 여러 비판에 직면해 있다. 처음 접하는 사용자나 현대적인 아이콘에 익숙하지 않은 사용자, 특히 고령층에게는 그 기능이 즉각적으로 명확하게 인식되지 않아 혼란을 줄 수 있다는 지적이 있다.[22][23][7][15] 또한, 웹사이트나 앱마다 아이콘의 위치가 일관되지 않은 경우도 문제로 제기된다.[8]
기능적인 측면에서는, 화면 공간을 절약하는 장점이 있는 반면, 사용자가 원하는 정보에 접근하기 위해 추가적인 클릭이 필요하므로 상호작용 비용이 증가한다는 단점이 있다. 더불어 디자이너들이 햄버거 버튼 안에 너무 많은 기능을 숨겨 정보 접근성을 떨어뜨리는 경향이 있다는 비판도 존재한다.[7][15]
4. 1. 사용성 문제
햄버거 버튼은 현재 널리 사용되고 있지만, 처음 접했을 때 그 기능이 즉시 명확하게 드러나지 않는다는 비판이 있다.[22] 특히 현대적인 아이콘이나 인터페이스에 익숙하지 않은 사용자, 예를 들어 고령층 사용자들에게는 혼란을 줄 수 있다.[23][7][15] 또한, 햄버거 메뉴 아이콘의 위치가 웹사이트나 앱마다 통일되지 않고 다르게 적용되는 경우도 있다.[8]이 메뉴 버튼은 화면 공간을 절약하는 장점이 있지만, 메뉴 바와 비교했을 때 사용자가 원하는 정보에 접근하기 위해 추가적인 클릭이 필요하므로 상호작용 비용이 증가한다는 단점이 있다. 더불어, 디자이너들이 햄버거 버튼 안에 너무 많은 기능을 숨겨 사용자가 정보를 찾기 어렵게 만드는 경향이 있다는 지적도 제기된다.[7][15]
4. 2. 상호작용 비용
햄버거 버튼은 기존의 메뉴 바와 비교했을 때 상호작용 비용을 증가시킨다는 지적이 있다. 사용자가 동일한 정보에 접근하기 위해 추가적인 클릭을 해야 하기 때문이다. 이러한 상호작용 비용 증가는 몇 가지 이유에서 발생한다. 햄버거 버튼이 현재는 보편화되었지만, 처음 접했을 때 그 기능이 즉시 명확하게 인식되지 않을 수 있으며,[22] 특히 현대적인 아이콘에 익숙하지 않은 사용자, 예를 들어 고령층 사용자에게 혼란을 줄 수 있다.[23][7][15] 또한, 햄버거 아이콘의 위치가 웹사이트나 앱마다 일관되지 않은 점도 사용자의 학습 비용을 높이는 요인이 된다.[8]그럼에도 불구하고 햄버거 버튼은 화면 공간을 절약할 수 있다는 명확한 장점이 있어, 특히 화면 크기가 제한적인 모바일 환경에서 널리 사용된다. 하지만 디자이너들이 이 버튼 안에 너무 많은 기능을 숨겨 넣어 정보 접근성을 떨어뜨린다는 비판도 존재한다.[7][15]
4. 3. 과도한 정보 은닉
햄버거 버튼은 이제 보편화되었지만, 처음 접하는 사용자에게는 그 기능이 즉시 명확하게 이해되지 않을 수 있다는 비판이 제기되어 왔다.[22] 특히 현대적인 아이콘 사용에 익숙하지 않은 고령층 사용자들은 이를 보고 혼란스러워할 수 있다.[23][7][15] 또한, 햄버거 메뉴 아이콘의 위치는 웹사이트나 애플리케이션에 따라 일관되지 않게 나타나기도 한다.[8]이 메뉴 버튼은 화면 공간을 절약하는 데 도움이 되지만, 항상 보이는 메뉴 바와 비교했을 때 상호작용 비용을 증가시킨다는 단점이 있다. 사용자가 동일한 정보에 접근하기 위해 추가적인 클릭을 해야 하기 때문이다. 또한, 디자이너들이 이 아이콘 안에 너무 많은 기능을 숨겨 정보를 과도하게 은닉하는 경향이 있다는 지적도 있다.[7][15]
4. 4. 긍정적 측면
햄버거 메뉴 버튼은 메뉴 바에 비해 상호작용 비용을 증가시킬 수 있으며, 동일한 정보를 얻기 위해 추가적인 클릭이 필요하지만, 화면 공간을 덜 차지한다는 장점이 있다.참조
[1]
웹사이트
A Brief History of the Hamburger Icon
https://blog.placeit[...]
2019-02-23
[2]
웹사이트
Microsoft First Used The Controversial Hamburger Menu In 1985
https://www.windowsc[...]
2019-06-12
[3]
웹사이트
Windows Elements
http://doublehammer.[...]
2019-06-12
[4]
웹사이트
Here's How the New Windows 10 Anniversary Start Menu Looks Like
https://wccftech.com[...]
2019-06-12
[5]
웹사이트
Oreo claims the hamburger menu as its own
https://www.campaign[...]
2024-04-15
[6]
웹사이트
Oreo craves change, turns internet’s ‘hamburger menu’ into ‘The Oreo Menu’
https://www.thedrum.[...]
2024-04-15
[7]
웹사이트
Loving & Hating the Hamburger Icon
https://www.webdesig[...]
2019-02-23
[8]
웹사이트
Hamburger menu icon: should it be on the left or right?
https://uxpickle.com[...]
2022-11-02
[9]
웹사이트
A Brief History of the Hamburger Icon
https://blog.placeit[...]
2019-02-23
[10]
웹사이트
Microsoft First Used The Controversial Hamburger Menu In 1985
https://www.windowsc[...]
2019-06-12
[11]
웹사이트
Windows Elements
http://doublehammer.[...]
2019-06-12
[12]
웹사이트
Here's How the New Windows 10 Anniversary Start Menu Looks Like
https://wccftech.com[...]
2019-06-12
[13]
웹사이트
WIRED.jp
https://wired.jp/
CONDE NAST JAPAN
2022-01-19
[14]
웹사이트
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋
https://www.nxworld.[...]
null
2020-01-20
[15]
웹사이트
Loving & Hating the Hamburger Icon
https://www.webdesig[...]
2019-02-23
[16]
웹인용
How To Create a Menu Icon
https://www.w3school[...]
2018-09-20
[17]
웹인용
The origin of the hamburger icon
https://www.evernote[...]
2018-09-20
[18]
웹인용
Who Designed the Hamburger Icon?
https://gizmodo.com/[...]
Gizmodo
2016-02-02
[19]
웹인용
A Brief History of the Hamburger Icon
https://blog.placeit[...]
2017-01-25
[20]
웹인용
We need a standard show navigation icon for responsive web design
https://stuffandnons[...]
2018-09-20
[21]
웹사이트
A Brief History of the Hamburger Icon
https://blog.placeit[...]
2019-02-23
[22]
뉴스
Hamburger icon: How these three lines mystify most people
https://www.bbc.co.u[...]
2018-10-11
[23]
웹사이트
Loving & Hating the Hamburger Icon
https://www.webdesig[...]
2019-02-23
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com