웹사이트나 앱 오른쪽 위에서 자주 만나는 ☰ 아이콘. 누르면 숨어 있던 메뉴가 나타나는, 이제는 너무 익숙한 버튼입니다.

생김새 때문에 우리는 자연스럽게 ‘햄버거 메뉴’라고 부릅니다. 위아래 빵 사이에 패티가 들어간 햄버거처럼 보이니까요.

그런데 재미있는 건, 이 아이콘이 처음부터 햄버거를 떠올리며 만들어진 건 아니라는 점입니다. 시작은 스마트폰보다도 훨씬 전인 1981년으로 거슬러 올라갑니다.

햄버거 메뉴가 처음 등장한 곳은 1981년 Xerox의 Xerox Star였습니다. 당시 인터랙션 디자이너 Norm Cox는 약 16×16픽셀의 작은 공간 안에 ‘숨겨진 명령을 여는 버튼’을 표현해야 했습니다.

그가 떠올린 건 메뉴 목록 그 자체였습니다. 여러 명령이 세로로 쌓인 모습을 수평선 몇 개로 압축한 것이죠.

모양을 정하는 과정에서는 하향 삼각형이나 길이가 서로 다른 선도 검토됐습니다. 하지만 삼각형은 방향을 가리키는 기호처럼 보였고, 두 줄은 = 등호와 비슷했으며, 네 줄은 작은 화면에서 복잡해 보였습니다. 결국 같은 길이의 선 세 개가 가장 단순하면서도 메뉴를 또렷하게 나타내는 형태로 남았습니다.

여기까지도 햄버거는 등장하지 않습니다. Xerox 내부에서는 오히려 환기구처럼 보인다며 ‘air vent’라고 부르기도 했습니다. ‘햄버거 메뉴’라는 이름은 훗날 세 줄이 빵과 패티처럼 보인다는 이유로 붙은 별명에 가깝습니다.

햄버거를 그리려고 세 줄을 만든 게 아니라, 메뉴를 그렸더니 나중에 햄버거처럼 보였던 겁니다.

흥미롭게도 이 아이콘은 Xerox Star 이후 곧바로 표준이 되지는 않았습니다.

Windows 1.0에서도 비슷한 세 줄 형태가 사용됐지만, 이후 데스크톱 화면이 커지면서 메뉴 바와 툴바를 화면에 직접 보여주는 방식이 일반적이 됐습니다. 굳이 메뉴를 작은 아이콘 뒤에 숨길 필요가 줄어든 겁니다.

그러다 2000년대 후반부터 모바일 앱이 확산되면서 상황이 다시 바뀝니다.

스마트폰은 화면은 작지만 넣어야 할 기능은 많았습니다. 모든 메뉴를 항상 보여주기에는 공간이 부족했고, 여러 기능을 하나의 버튼 뒤에 접어두는 방식이 다시 필요해졌습니다. 약 30년 전 Xerox가 마주했던 문제와 꽤 비슷합니다.

좁은 화면에 많은 기능을 어떻게 넣을 것인가.

그때 만들어졌던 세 줄짜리 해결책이 모바일 시대에 다시 잘 맞아떨어진 셈입니다.

지금은 햄버거 메뉴 안에 모든 기능을 숨기기보다 자주 쓰는 메뉴는 Bottom Navigation이나 Tab Bar에 직접 보여주고, 상대적으로 덜 중요한 기능을 별도 메뉴에 넣는 방식도 많이 사용됩니다.

그래도 ☰ 세 줄을 보면 자연스럽게 “여기에 메뉴가 있겠구나”라고 생각하는 건 여전합니다.

40년이 넘은 작은 아이콘 하나가 아직도 같은 의미로 통하고 있다는 것. 햄버거 메뉴에서 가장 재미있는 부분은 어쩌면 그 점일지도 모릅니다.