the origin and meaning of the word "menu"

1. The Origin and
Meaning of the Word
“MENU”
(in Computing)
+관심사 발제
/윤정원
x 2015 Winter

2. MENU 지난이야기
15.01.29 Lab meeting 윤정원

3. MENU의 어원
French
Latin
menu
small
detailed
minutes
very small
menu
detailed list
French
menu
mid 19th century
• Menu란 단어의 어원 – 라틴어의 Minutes에서 유래
• 의미는 – 상세하게 기록된 것, 아주 작은 표(Detailed Record나 Detailed List)
• 원래는 요리장에서 요리의 재료를 조리하는 방법을 설명 한 것이다.
• 1541년 프랑스 헨리 8세 때 브랑위그 공작이 베푼 만찬 때 식탁으로 나왔다.
(여러 가지 음식을 접대함으로써 생기는 복잡함과 순서가 틀리는 불편을 해소하기 위해,
요리명과 순서를 기입한 리스트)
• 19세기에 프랑스 파리에 있는 Palace Royal에서 Menu의 명칭으로 일반화되었다.
출처: “http://en.wikipedia.org/wiki/Menu”

4. MENU의 어원
▲ 식당의 메뉴
▲ 컴퓨팅의 메뉴
1. The details of the food to be served at a banquet; a bill of fare.
2. A printed list of dishes offered in a restaurant.
3. (computing) A list from which the user may select an operation to be performed,
often done with a mouse or other pointing device under a graphical user interface,
but usually also controllable from the keyboard.
출처: “http://en.wiktionary.org/wiki/menu#Derived_terms”

5. MENU(Computing)의 발전
▲ Text-based menu
• 사용자가 명령어를 타이핑해야하는 명령어 라인 인터페이스(command-line interface)는
명령어 단어와 명령어 라인 인터페이스의 구문을 기억하는 것이 어렵다.
• 이 문제점을 극복하기 위해서 메뉴(menu)가 등장했다.
메뉴를 사용하면 명령어 단어를 외우지 않아도 목록에서 원하는 명령어를 선택하기만 하면
되기 때문이다. 또한, 목록에 있는 모든 명령어가 유효한 명령어이기 때문에 구문 에러가
일어날 가능성도 없다.
▲ Command line interface
출처: “New Perspectives on Computer Concepts”_June Jamrich Parsons

6. • 1973년에 개발된 그래픽 사용자 인터페이스를 사용하는 최초의 컴퓨터인 제록스 알토 컴퓨터에서
등장하였다.
• 현재 대부분의 그래픽 사용자 인터페이스들은 기본적으로 이 인터페이스로부터 유래하여
어떤 사람들은 이들을 ‘파크 사용자 인터페이스(PUI)’라 부르기도 한다.
• 파크 사용자 인터페이스는 윈도, 메뉴, 아이콘, 라디오 단추, 체크 상자 등의 그래픽 요소들을 사용했다.
• 이 후, 80년 Merzouga Wilberts에 의해 WIMP가 사용자 인터페이스의 요소로 정의되었고,
애플의 맥킨토시에서 발전되어 상용화된 후, 90년대 초 화면 디스플레이를 갖는 가전제품,
2000년대의 디지털 미디어 플레이어 등에 사용되며 발전되어왔다.
MENU(Computing)의 발전
▲ 제록스 알토 컴퓨터에서의 메뉴

7. MENU Season #3
15.02.06 Lab meeting 윤정원

8. Commands Form Platform
MENU

9. 컴퓨팅과 전자 통신에서의 메뉴(menu)는,
현재 컨텍스트에서 사용자가 시스템의 연산자에 의해 사용할 수 있는 “명령어들의 목록”이다.
MENU(Computing)의 정의
- command는 메뉴의 목적이자 역할이며, command는 1)이동 2)연산 3)navigate의 역할을 한다.
- 메뉴는 메뉴바와 리스트로 구성되며, 메뉴를 보여주는 방식으로 이미지, 탭, 리스트 등이 사용된다.
- PC에서 모바일로 넘어오면서 메뉴를 보여주는 형태가 다양해졌다.
Commands
이동
연산 Form Platformmenu bar
menu list
출처: “http://en.wikipedia.org/wiki/Menu_(computing)”
안내
1. 구성요소
2. 메뉴 형태
icon, image
Tab
PC
Mobile
List
Dashboard

10. 명령(command)의 실행은
1) 이동하고, 2) 연산할 수 있으며, 3) navigate의 역할을 한다.
이동
- 사용자가 지시한 명령에 따라서 실행을 위한 단계로 이동의 동작을 취한다.
- 링크의 개념으로써 해당 커맨드에 연결되어 있는 페이지로 단순 이동한다.
- 대화 상자가 실행되어 세부 옵션을 선택하거나, 명령에 따른 해당 창이 뜨기도 한다.
▲ 라이브러리에 대한 커맨드는 라이브러리 창을 띄워주는 것으로 실행되었다. ▲ ‘지도검색’에 대한 커맨드 실행으로 지도검색에 관한 화면으로 이동하였다.
COMMAND의 역할

11. 연산
- 단순 이동의 실행이 아니라, 명령에 따라 계산된 결과값이 사용자에게 나타낸다.
▲ 엑셀 메뉴들에는 명령에 따라 수가 연산되어 결과값이 나타나는 커맨드들이 많다. ▲ 키노트에서 오브젝트들을 정렬하기위한 커맨드를 실행하면 명령에 따라 정렬된다.
COMMAND의 역할
명령(command)의 실행은
1) 이동하고, 2) 연산할 수 있으며, 3) navigate의 역할을 한다.

12. 네비게이팅
- 사용자가 현재 머무르고 있는 위치와 방향성을 안내해준다.
▲ 컨텐츠가 많은 곳에서의 메뉴는 사용자의 현재 위치를 알려주는 네비게이팅의 역할을 한다.
COMMAND의 역할
명령(command)의 실행은
1) 이동하고, 2) 연산할 수 있으며, 3) navigate의 역할을 한다.

13. MENU(Computing)의 Form

14. 1) Menu bar
MENU(Computing)의 Form
: 메뉴 바는 그룹핑된 메뉴 타이틀들이 고정적으로 집합된 영역이다.
- 사용자는 메뉴의 타이틀을 기반으로 원하는 메뉴를 선택하기 때문에 명확한 라벨링을 갖고
정확한 커맨드를 담고 있는 것이 중요하다.
- PC에서 주로 상단에 표시되지만 좌측에 표시된 경우도 있다.
▲ 창 상단에 표시되는 윈도우,맥,우분투의 메뉴 바
1. 구성요소

15. MENU(Computing)의 Form
Tool bar : 메뉴 중에서 사용자가 자주 사용하는 기능 혹은 개발자가 추천하는 기능만을 모아
사용하기 편하게 그룹핑하여 모아둔 집합으로 메뉴의 일종이다.
- 시스템내의 메뉴에는 툴 바에 있는 명령들이 모두 포함되어있다.
- 대부분의 툴바는 사용자가 원하는 기능/명령들을 커스터마이징하여 사용할 수 있다.
- 효율적으로 시스템을 빠르게 사용할 수 있는 장점이 있다.
▲ 대표적으로 툴 바를 사용하고 있는 포토샵과 키노트 프로그램
* 메뉴 VS 툴바
1. 구성요소
출처: “http://it.donga.com”

16. MENU(Computing)의 Form
2) Menu list : 메뉴 타이틀안에 그룹핑된 command의 나열로 대부분 vertical 형태로 보여진다.
▲ 창 상단에 표시되는 윈도우,맥,우분투의 메뉴 바
- 메뉴 리스트에는 해당 시스템 내에서 사용자가 명령할 수 있는 모든 기능들이 담겨있다.
1. 구성요소

17. MENU(Computing)의 Form 2. 메뉴 형태
1) 아이콘 및 이미지 : 사용자들이 메뉴를 선택할때 심플하고 직관적으로 조작할 수 있다.
◀ 링크드인, 신한은행 앱의 이미지로 표현된 메뉴
2) Tab : 버튼은 이동이 가능한 메뉴의 타이틀을 나타내는 GUI 표현 방식이며,
탭은 그 버튼들의 조합으로 만들어진다.
◀ 페이스북과 카카오톡의 탭 메뉴

18. MENU(Computing)의 Form 2. 메뉴 형태
3) 리스트 : 수평, 수직방향으로 나열하여 세부 메뉴를 표현한다.
▲ 네이버 지도 앱의 주변 검색 메뉴 ▲ PC웹 페이지 내에서의 리스트 메뉴
4) 변형된 형태들 : 다소 산만할 수 있으나, 자유도가 높은 대쉬보드 형태의 메뉴이다.

19. PC에서 모바일로 넘어오면서 변화된 메뉴에 대한 비교
- PC와 모바일에서 나타나는 메뉴를 보기위해, 사용 빈도수가 높은 애플리케이션을 중심으로 비교하였다.
- 애플리케이션은 1) 컨텐츠 양이 많은 포털사이트(구글,네이버)와 2)cooCHA 3) 대표적 SNS인 페이스북,
4)이미지 중심의 지도(네이버 지도), 5)동영상 기반의 유투브, 순차적인 구조를 갖는 6)신한은행과 7)CGV,
8)저작도구인 키노트이다.
PC
Mobile
VS
▲ PC와 mobile에서의 메뉴를 비교하기 위한 각 어플리케이션들의 스냅 샷
MENU: PC → Mobile

20. 1. 페이지의 전환이 나타나는 command의 실행
MENU: PC → Mobile
PC Mobile
PC에서는 메뉴를 선택하면, 해당 화면 내에서 실행의 결과 화면이 나온다.
그러나, 모바일에서는 사용자가 메뉴를 선택하면 페이지가 이동되어 화면이 나오므로,
command가 다른 페이지로 이동의 역할을 한다.
ex) Naver 지도
PC에서는 지도검색 메뉴 실행시 같은 화면에 검색창과 지도이미지가 동반해서 나오지만,
모바일에서는 지도검색 메뉴를 실행했을 때, 검색할 수 있는 페이지로 이동하게 된다.

21. MENU: PC → Mobile
2. 새로운 메뉴 형태의 등장
1) Floating menu
PC Mobile
ex) Naver
PC에서 Naver는 상단 메뉴바와 우측 로그인 창을 통해 메뉴를 노출시킨다.
반면 모바일에서는 이를 플로팅 메뉴를 활용해, 플로팅 메뉴를 클릭하면 메뉴들이 나오는 형태를 보인다.
: PC에서는 가로형의 긴 화면을 활용해 화면내에 거의 모든 메뉴들을 노출시켜 나열한다.
그러나, 모바일에서는 이를 새로운 메뉴 형태로 보여주어 좁은 화면을 활용한다.
화면을 아래로 스크롤해도 화면상에 동일한 위치해, 최상위에 메뉴 바가 없어도 메뉴를 이용할 수 있다.

22. MENU: PC → Mobile
2. 새로운 메뉴 형태의 등장
2) drawer (=side menu, hamburger menu)
PC Mobile
ex) Youtube
: PC에서는 가로형의 긴 화면을 활용해 화면내에 거의 모든 메뉴들을 노출시켜 나열한다.
그러나, 모바일에서는 이를 새로운 메뉴 형태로 보여주어 좁은 화면을 활용한다.
화면의 측면 공간을 활용해 슬라이드되어 나오는 메뉴로 모바일의 좁은 공간을 해소한다.
PC에서 좌측에 보여지는 메뉴들을 모바일에서 drawer menu로 표현하였다.

23. MENU: PC → Mobile
2. 새로운 메뉴 형태의 등장
PC Mobile
ex) CGV
: PC에서는 가로형의 긴 화면을 활용해 화면내에 거의 모든 메뉴들을 노출시켜 나열한다.
그러나, 모바일에서는 이를 새로운 메뉴 형태로 보여주어 좁은 화면을 활용한다.
2) drawer (=side menu, hamburger menu)
화면의 측면 공간을 활용해 슬라이드되어 나오는 메뉴로 모바일의 좁은 공간을 해소한다.
PC에서 상단에 2단으로 보여지는 메뉴들을 모바일에서 drawer menu로 표현하였다.

24. MENU: PC → Mobile
3. 인터랙션으로 대체
PC에서는 메뉴를 실행할 때 단축키를 사용하는 경우가 많았다. (복사는 ctrl+C, 프레젠테이션 재생은 F5 등..)
그러나, 모바일에서는 이를 다양한 제스쳐를 통한 인터랙션으로 해결하고 있다.
ex) Keynote
PC Mobile
PC에서 문서를 만들때 단축키 Ctrl+C로 ‘복사’메뉴를 자주 사용한다. 그러나 모바일에서는 롱탭으로 복사,붙이기, 삭제 등의
메뉴를 실행할 수 있다. 이처럼, 단축키로 자주 사용하던 메뉴들을 모바일에서는 제스쳐를 통한 인터랙션으로 대체하고 있다.
1) 사라진 단축키 메뉴

25. MENU: PC → Mobile
3. 인터랙션으로 대체
PC에서는 보통 마우스 우클릭으로 contextual menu를 실행했다. 그러나, 모바일에서는 마우스의 역할을 손가락
제스쳐로 대신한다. 대부분의 경우, 해당 컨텍스트에서 롱탭의 제스쳐를 행하면 contextual menu가 등장한다.
2) 마우스를 대신한 Contextual menu 실행
PC Mobile
ex) 대부분의 앱
PC에서는 contextual menu를 띄우기 위해 마우스 우클릭을 사용하지만,
모바일에서는 롱탭의 제스쳐로 가능하다.

26. MENU: PC → Mobile
PC Mobile
3. 인터랙션으로 대체
3) 메뉴간의 이동
PC에서는 원하는 메뉴를 선택해 이동하는 방식이다. 반면, 한 손으로 기기를 잡고 사용 할 때
메뉴간의 이동이 자유롭도록 모바일에서는 플리킹하여 메뉴간의 이동이 가능하다.
ex) cooCHA PC에서는 메뉴를 클릭하여 선택하는 형식이었는데, 모바일에서는 옆으로 플리킹하여 메뉴간의 이동이 가능하다.

27. MENU: PC → Mobile
4. 상단에서 하단으로 메뉴의 위치 이동
1) 시스템 메뉴의 이동
PC Mobile
PC에서 웹 페이지를 실행할 경우, 해당 어플리케이션에 대한 메뉴는 고정적으로 상단에 위치한다.
그러나, 모바일의 경우 하단에 위치하며, 그 형태 또한 고정적이지 않고 스크롤할 때만 잠깐 나왔다 사라지는 형식이다.
ex) Safari web page PC에서는 화면 상단에 항상 고정적으로 메뉴바가 위치해 있지만,
모바일에서는 위아래로 플리킹할 때 sticky한 형태로 하단부에서 나온다.

28. MENU: PC → Mobile
4. 상단에서 하단으로 메뉴의 위치 이동
2) 탭 메뉴의 등장
PC Mobile
ex) Facebook
PC에서는 화면의 상단이나 좌측 등에 메뉴가 나타나는데 모바일에서는 이들을 탭 형식으로
하단에 배치해 쉽고 빠르게 접근 가능하다.
PC에서 상단과 좌측에 나타나는 메뉴를 모바일에서는 하단에 위치한 탭으로 표현하였다.

29. MENU: PC → Mobile
5. 그 외
1) 순차적인 페이지 이동이 나타나는 모바일의 특성에 맞게 홈 화면에 전면적으로 메뉴를 나타낸다.
2) 메타포를 적극 활용하여 역동적인 형태로 메뉴를 보여준다. 3) 시각화된 수치를 data로 표현하는 dash board 형태의 메뉴가 등장했다.

30. SUMMARY
첫째, 한 화면 안에서 대부분의 command가 실행되어 나타나는 PC와 달리,
모바일에서는 페이지가 전환된다.
둘째, 모바일의 좁은 화면에 많은 메뉴들을 담기 어렵기 때문에,
한 화면에 효율적으로 메뉴를 구성할 수 있는 floating 메뉴나 drawer 메뉴 등이 등장했다.
셋째, 키보드와 마우스를 자유롭게 사용할 수 있는 PC사용 환경과 달리, 모바일은 이동성을 갖고 있다.
때문에, 키보드에서 사용하던 단축키, 마우스 우클릭으로 나타나던 contextual 메뉴가
제스쳐로 가능한 인터랙션으로 대체되었다.
또한, 메뉴간 이동 또한 한 손으로 인터랙션이 가능하게 바뀌었다.
넷째, PC화면 상단 혹은 좌측에 고정되었던 메뉴가 썸존의 영역에서 쉽게 조작가능하도록
하단으로 내려와 탭의 형태로 나타난다.

31. THANK U