User Interface - 메뉴 방식

앞에서 설명한 글들에서는 사용자로부터 입력을 받는 방법에 대해서 설명하였다.

이번 글에서는 앞의 내용들을 응용하여 사용자의 입력을 받아들이고, 사용자가 원하는 기능을 수행해 보는 방법중 하나인 메뉴 방식 사용자 입력에 대해서 설명하도록 하겠다.

extern void root_menu(char *); void loop(void) { root_menu("Just4fun Online Market"); }

loop() 함수에서 root_menu()를 불러 메뉴 방식 인터페이스를 시작하도록 한다.

static int get_menu_num(void) { int num; char *cmd = wait_command(); num = strtol(cmd, NULL, 0); return num; } static void display_menu(void) { puts("1. Clothing, Shoes & Accessories\n"); puts("2. Business & Industrial\n"); puts("3. Books\n"); puts("4. Toys & Hobbies\n"); puts("5. DVDs & Movies\n"); puts("6. Collectibles\n"); puts("7. Health & Beauty\n"); puts("8. Computers & Tablets\n"); } void root_menu(char *main_menu) { int menu_num; printf("\n\t%s\n\n", main_menu); display_menu(); puts("\nSelect item: "); menu_num = get_menu_num(); puts("\nYour choice is "); switch (menu_num) { case 1: puts("Clothing, Shoes & Accessories\n"); break; case 2: puts("Business & Industrial\n"); break; case 3: puts("Books\n"); break; case 4: puts("Toys & Hobbies\n"); break; case 5: puts("DVDs & Movies\n"); break; case 6: puts("Collectibles\n"); break; case 7: puts("Health & Beauty\n"); break; case 8: puts("Computers & Tablets\n"); break; default: puts("Unknown Item\n"); break; } }

root_menu() 함수에서는 29번줄에 나와 있는것처럼 전체 메뉴 항목을 화면에 표시한 다음, get_menu_num() 함수를 이용하여 사용자로부터 메뉴 항목에 해당하는 번호를 하나 입력 받는다.

사용자가 입력한 번호에 해당하는 내용을 수행하기 위하여 switch 문을 이용하여 원하는 동작을 찾아 가도록 한다.

아마, 가장 쉽고 일반적인 방법일 것이다.

위의 화면을 보면 사용자가 3번 항목을 선택하였고, 3번 항목에 해당하는 내용을 출력해 주는것을 확인할 수 있다.

하지만, 이렇게 구현 한 경우 다소 불편함이 발생하게 되는데, 만약 메뉴 항목이 추가 되거나 삭제 될 때마다 코드 수정을 해 주어야만 한다.

비록 메뉴 항목의 변화가 생기더라도 코드는 수정할 필요가 없도록 하면 좋을것 같다.

#define array_num(x) (sizeof(x) / sizeof(x[0])) struct menu_table { char *menu_item; void (*menu_func)(void); }; static void do_cloth(void); static void do_business(void); static void do_books(void); static void do_toys(void); static void do_dvds(void); static void do_collectibles(void); static void do_health(void); static void do_computers(void); struct menu_table top_menu[] = { {"Clothing, Shoes & Accessories", do_cloth}, {"Business & Industrial", do_business}, {"Books", do_books}, {"Toys & Hobbies", do_toys}, {"DVDs & Movies", do_dvds}, {"Collectibles", do_collectibles}, {"Health & Beauty", do_health}, {"Computers & Tablets", do_computers}, }; static void do_cloth(void) { puts("Clothing, Shoes & Accessories\n"); } static void do_business(void) { puts("Business & Industrial\n"); } static void do_books(void) { puts("Books\n"); } static void do_toys(void) { puts("Toys & Hobbies\n"); } static void do_dvds(void) { puts("DVDs & Movies\n"); } static void do_collectibles(void) { puts("Collectibles\n"); } static void do_health(void) { puts("Health & Beauty\n"); } static void do_computers(void) { puts("Computers & Tablets\n"); } void root_menu(char *main_menu) { int menu_num, num_items; int i; printf("\n\t%s\n\n", main_menu); num_items = array_num(top_menu); for (i=0; i<num_items; i++) printf("%2d. %s\n", i+1, top_menu[i].menu_item); puts("\nSelect item: "); menu_num = get_menu_num(); puts("\nYour choice is "); if (menu_num > 0 && menu_num <= num_items) top_menu[menu_num-1].menu_func(); else puts("Unknown Item\n"); }

3번줄에 있는것은 메뉴 항목에 해당 하는 문자열과 메뉴가 선택 되었을 때 해당 메뉴를 실행하기 위한 함수에 대한 포인터를 가지는 구조체를 선언하는 것이다.

20~27번 줄이 이 구조체를 이용한 배열이다.

root_menu() 함수가 상당히 간단하게 변경 되었음을 볼 수 있다.

80번 줄에서 배열에 있는 메뉴 문자열을 for문을 이용하여 화면에 출력하며, 87번줄에서 사용자가 선택한 항목에 해당하는 함수를 배열에서 찾아서 실행하게 된다.

이제 더 이상 메뉴 항목이 추가 되거나 삭제 되더라도 root_menu() 함수는 수정할 필요가 없게 되는 것이다.

필요한 경우 top_menu와 같은 방식으로 sub 메뉴를 실행할 수 있게 된다.

이 정도만 하더라도 충분히 사용 가능한 코드가 되겠지만 조금만 더 구조적인 코드를 만들어 보도록 하겠다.

메뉴 방식 사용자 인터페이스 구조를 분석해 보면 크게 세 부분으로 나누어 볼 수 있다.

타이틀 메뉴를 표시하는 부분과 메뉴 항목을 보여 주는 부분, 그리고 사용자로 하여금 메뉴 항목중 하나를 선택하도록 하는 부분이다.

이렇게 세개의 기능을 각각 함수로 구현하면 다음과 같이 만들 수 있다.

static int title_len; static void menu_header(char *title) { title_len = strlen(title) + 8; int i; puts("\n\n"); for (i=0; i<title_len; i++) putc('='); printf("\n %s\n", title); for (i=0; i<title_len; i++) putc('='); puts("\n\n"); } static void menu_body(struct menu_table *body, int num_items) { int i; for (i=0; i<num_items; i++, body++) { printf("%2d. %s\n", i+1, body->menu_item); } } static int menu_tail(void) { int i; for (i=0; i<title_len; i++) putc('-'); printf("\n 0. Exit\n"); for (i=0; i<title_len; i++) putc('-'); printf("\n Select Number: "); return strtol(wait_command(), NULL, 0); }

위의 세개 함수를 이용한 root_menu() 함수는 다음과 같이 표현할 수 있다.

void root_menu(char *main_menu) { int menu_num, num_items; num_items = array_num(top_menu); menu_header(main_menu); menu_body(top_menu, num_items); menu_num = menu_tail(); if (menu_num > 0 && menu_num <= num_items) top_menu[menu_num-1].menu_func(); else puts("Unknown Item\n"); }

보드에서 실행하면 위와 같은 초기 메뉴 화면을 볼 수 있다.

각 메뉴 항목을 선택하면 다시 그 세부 메뉴가 나오게 될 것이며, 그 중에서 do_books() 함수에 다음과 같은 코드를 추가해 본다.

static void do_art(void); static void do_comics(void); static void do_history(void); static void do_sf(void); struct menu_table book_menu[] = { {"Arts & Photography", do_art}, {"Comics & Graphic Novels", do_comics}, {"History", do_history}, {"Science Fiction", do_sf}, }; static void do_art(void) { puts("Arts & Photography\n"); } static void do_comics(void) { puts("Comics & Graphic Novels\n"); } static void do_history(void) { puts("History\n"); } static void do_sf(void) { puts("Science Fiction\n"); } static void do_books(void) { int menu_num, num_items; do { num_items = array_num(book_menu); menu_header("Books"); menu_body(book_menu, num_items); menu_num = menu_tail(); if (menu_num > 0 && menu_num <= num_items) book_menu[menu_num-1].menu_func(); } while(menu_num); }

위의 그림처럼 Books를 선택했을때 세부 메뉴 항목으로 출력되는 것을 볼 수 있다.

세부 메뉴에서 원하는 메뉴를 선택하면 해당 메뉴가 실행 되고, 다시 동일한 세부 메뉴가 표시된다.  이 단계에서 빠져 나가기 위해서는 '0'을 선택하면 된다.

0을 선택하여 상위 메뉴로 나가게 되는 것을 볼 수 있다.

ui_menu.zip