ERP 메뉴 스타일 정리: 화면을 찾아가는 여섯 가지 방식과 두 줄 툴바
입사 둘째 날인 영업 담당자가 수주를 넣으려고 ERP를 엽니다. 왼쪽 메뉴에는 영업관리, 구매관리, 재고관리, 생산관리가 있고, 영업관리를 펼치니 수주등록, 수주현황, 수주마감, 수주변경이력이 또 나옵니다. 옆자리 선임은 메뉴를 쓰지 않습니다. 검색창에 「수주」를 치고 엔터를 누릅니다.
ERP 메뉴는 대개 수백 개, 큰 제품은 수천 개입니다. 그래서 ERP마다 메뉴 모양이 다르고, 그 차이는 취향이 아니라 「이 많은 화면을 사람이 어떻게 찾아가게 할 것인가」에 대한 서로 다른 답입니다. 최근 가상의 제조사 ERP 데모를 만들면서 이 답들을 하나씩 대 보았습니다. 여기에 정리합니다.
메뉴가 푸는 문제는 두 가지입니다
메뉴 스타일을 비교할 때 두 질문을 나눠 보면 정리가 쉽습니다.
- 찾아가기: 수백 개 화면 중 지금 필요한 화면에 어떻게 도착하나
- 도착한 뒤: 그 화면에서 조건을 걸고, 등록하고, 인쇄하는 버튼은 어디에 있나
앞의 것이 좁은 의미의 메뉴이고, 뒤의 것이 화면 안의 툴바입니다. 제품마다 앞의 답은 많이 다르고, 뒤의 답은 생각보다 비슷합니다.
1. 트리와 코드 입력: SAP GUI
오래 쓰인 SAP GUI의 첫 화면은 폴더 트리입니다. 모듈 아래 업무, 업무 아래 화면이 계층으로 내려갑니다. 사용자는 자주 쓰는 화면을 따로 모은 사용자 메뉴도 만들 수 있습니다.
그런데 숙련자는 트리를 거의 열지 않습니다. 화면마다 트랜잭션 코드가 있고, 명령 입력칸에 코드를 치면 바로 그 화면으로 갑니다. 판매 오더 생성은 VA01, 구매 오더 생성은 ME21N 같은 식입니다.
이 방식은 메뉴 수가 아무리 많아도 무너지지 않습니다. 대신 코드를 외워야 하고, 처음 온 사람에게는 트리가 유일한 길이라 진입 비용이 큽니다.
2. 상단 가로 메뉴와 펼침: NetSuite, Odoo
NetSuite는 화면 위에 탭을 가로로 늘어놓습니다. 탭에 마우스를 올리면 여러 단계의 메뉴가 펼쳐집니다. 어떤 탭이 보이는지는 사용자의 역할(센터)에 따라 달라집니다. 머리 가운데에는 거의 모든 기록을 찾을 수 있는 전역 검색이 있습니다.
Odoo도 한 앱 안에서는 위쪽 가로 메뉴를 씁니다. 판매 앱에 들어가면 주문, 견적, 고객, 보고 같은 메뉴가 위에 한 줄로 서고 각각 펼쳐집니다.
가로 메뉴는 본문 폭을 온전히 쓸 수 있다는 장점이 있습니다. 대신 한 줄에 들어가는 항목 수가 제한되니, 역할이나 앱으로 먼저 나눠 줄 수를 줄이는 장치가 같이 따라옵니다.
3. 앱 타일 홈: SAP Fiori, Odoo, Salesforce
SAP Fiori의 런치패드는 업무 화면을 타일로 보여 줍니다. 타일 하나가 앱 하나이고, 역할에 맞게 묶어 공간과 페이지로 나눕니다. Odoo의 첫 화면은 앱 아이콘 격자이고, Salesforce는 격자 아이콘(앱 런처)을 눌러 앱을 바꾼 뒤 그 앱의 탭 줄로 이동합니다.
타일 홈은 트리를 두 층으로 나눈 것에 가깝습니다. 먼저 큰 덩어리(앱)를 고르고, 그 안에서 메뉴를 고릅니다. 한 번에 보이는 선택지가 적어 처음 쓰는 사람이 덜 헤맵니다. 앱을 오가는 일이 잦은 사람에게는 매번 홈을 거쳐야 하는 한 단계가 생깁니다.
4. 역할 홈과 탐색 창: Microsoft Dynamics 365
Dynamics 365 Business Central은 역할 센터라는 홈을 둡니다. 영업 담당자의 홈과 회계 담당자의 홈이 다르고, 홈 위쪽 탐색 메뉴와 그 아래 탐색 막대, 자주 하는 동작을 모은 동작 영역이 역할에 따라 채워집니다. 화면 이름으로 바로 찾아가는 검색도 있습니다.
같은 제품군의 Finance and Operations는 왼쪽에 모듈 목록을 펼치는 탐색 창을 두고, 업무별 작업 공간을 타일로 보여 줍니다.
이 방식의 특징은 메뉴를 사람이 아니라 역할이 먼저 줄여 준다는 점입니다. 권한이 곧 메뉴라서, 권한 설계가 잘 되어 있으면 각자 보는 메뉴가 짧아집니다.
5. 왼쪽 트리와 열린 화면 탭: 국내 설치형 ERP
국내 중소기업이 오래 써 온 설치형 ERP에서 흔한 모양입니다. 위쪽에서 모듈을 고르면 왼쪽에 그 모듈의 메뉴 트리가 나오고, 화면을 열 때마다 본문 위에 탭이 하나씩 쌓입니다. 수주등록, 재고현황, 거래처등록을 동시에 열어 두고 탭으로 오갑니다.
화면 안은 대개 같은 틀입니다. 위에 조회조건 칸이 있고, 조건을 고른 뒤 「조회」 버튼을 누르면 아래 그리드가 채워집니다. 신규, 저장, 삭제, 인쇄, 엑셀 버튼이 화면 위쪽 한 줄에 모여 있습니다.
여러 화면을 열어 두고 오가는 일은 실무에서 아주 흔합니다. 수주를 넣다가 재고를 확인하고 다시 돌아오는 식입니다. 브라우저 탭이 없던 시절의 해법이지만, 지금 웹 ERP에서도 이 방식을 그대로 가져가는 이유가 여기에 있습니다.
6. 내가 고치는 메뉴: 이카운트
이카운트는 메뉴를 사용자가 직접 고치는 쪽에 무게를 둡니다. 쓰지 않는 메뉴를 끄고, 필요한 메뉴만 골라 폴더를 만들어 나만의 메뉴(MY메뉴)로 묶을 수 있습니다. 개인 메뉴를 회사 메뉴로 돌려 모두가 같이 쓰게 할 수도 있습니다.
기본 메뉴를 완벽하게 설계하는 대신 「회사마다, 사람마다 쓰는 화면이 다르다」는 사실을 받아들인 방식입니다. 메뉴를 고치는 수고는 사용자 몫이 되지만, 한 번 정리하면 매일 보는 메뉴가 열 개 안쪽으로 줄어듭니다.
한눈에 비교
| 방식 | 대표 제품 | 찾아가는 길 | 잘 맞는 사용자 |
|---|---|---|---|
| 트리 + 코드 입력 | SAP GUI | 폴더 트리, 숙련자는 코드 | 같은 화면을 매일 오래 쓰는 담당자 |
| 상단 가로 메뉴 | NetSuite, Odoo(앱 안) | 탭에 올리면 펼침 | 역할이 분명하고 메뉴가 적은 사용자 |
| 앱 타일 홈 | SAP Fiori, Odoo, Salesforce | 앱을 고른 뒤 메뉴 | 여러 업무를 가끔씩 쓰는 사용자 |
| 역할 홈 + 탐색 창 | Dynamics 365 | 역할이 줄여 준 메뉴 | 권한 설계가 잘 된 조직 |
| 왼쪽 트리 + 열린 화면 탭 | 국내 설치형 ERP | 트리, 여러 화면 동시에 | 화면을 오가며 입력하는 실무자 |
| 사용자 편집 메뉴 | 이카운트 | 내가 고른 메뉴 | 쓰는 화면이 사람마다 다른 소규모 회사 |
메뉴는 달라도 검색으로 모입니다
여섯 가지를 늘어놓고 보면 공통점이 하나 보입니다. 모든 제품이 결국 검색을 붙였습니다. SAP의 트랜잭션 코드, Business Central의 화면 검색, NetSuite 머리 가운데의 전역 검색이 모두 같은 자리를 채웁니다. 메뉴가 수백 개를 넘으면 어떤 모양으로 정리해도 숙련자는 이름을 치는 쪽이 빠릅니다.
그래서 저는 메뉴 설계를 「처음 온 사람이 헤매지 않게 하는 일」로, 검색을 「매일 쓰는 사람이 빨라지게 하는 일」로 나눠 봅니다. 둘 중 하나만 잘 되어 있으면 한쪽 사용자가 불편합니다.
도착한 뒤의 답은 비슷합니다: 두 줄 툴바
화면 안으로 들어가면 제품 사이의 차이가 줄어듭니다. 거의 모두 두 줄입니다.
- 첫 줄: 화면 이름과 그 화면에서 하는 일. 등록, 저장, 인쇄 같은 버튼
- 둘째 줄: 무엇을 볼지 정하는 조건. 검색, 필터, 보기 전환
SAP Fiori는 이 구조를 규칙으로 정해 두었습니다. 목록 화면의 머리에 제목과 동작이 있고, 그 아래 필터 바가 있습니다. 내용을 아래로 스크롤하면 필터 바가 접혀 결과를 넓게 보여 주고, 위로 올리면 다시 펼쳐집니다. Odoo도 첫 줄에 경로와 만들기 버튼, 둘째 줄에 검색과 보기 전환을 둡니다. 국내 ERP의 「버튼 줄 + 조회조건 칸」도 같은 두 줄입니다.
갈리는 지점은 둘입니다.
첫째, 둘째 줄이 스크롤할 때 접히는가입니다. Fiori는 접고, 많은 웹 제품은 계속 보여 줍니다. 결과를 넓게 봐야 하는 화면이면 접는 편이 낫습니다.
둘째, 조건을 고르는 즉시 적용하는가, 「조회」를 눌러야 적용하는가입니다. 웹 제품은 대개 즉시 적용합니다. 국내 ERP는 조회 버튼이 오랜 관례입니다. 데이터가 크면 조건 여러 개를 다 고른 뒤 한 번에 조회하는 편이 서버에도 사용자에게도 낫고, 오래 쓴 사용자는 버튼부터 찾습니다.
데모를 만들며 고른 조합
가상의 포장용기 제조사 ERP 데모를 만들면서는 이렇게 골랐습니다.
- 왼쪽 메뉴는 업무 묶음 단위로 두었습니다. 기준정보, 영업, 생산, 자재·재고, 회계·원가. 넓은 화면에서는 펼쳐 두고, 접으면 묶음 하나가 아이콘 한 칸이 되어 누르면 옆으로 항목이 펼쳐집니다. 좁은 화면에서는 햄버거로 여는 서랍이 됩니다.
- 검색은 메뉴 맨 위, 대시보드 바로 위에 두었습니다. 단축키로 어디서든 열립니다.
- 알림은 회사 이름 옆에 두었습니다. 「이 회사에서 나에게 온 것」이라서입니다.
- 화면 안은 두 줄 툴바입니다. 첫 줄은 온전히 그 화면의 것이라 검색이나 알림 같은 전역 도구를 올리지 않고, 오른쪽 끝에 그 화면의 주 동작을 둡니다. 둘째 줄은 검색이 맨 앞, 그 뒤에 상태 칩과 보기 전환이 옵니다.
- 조건은 즉시 적용하되, 날짜 범위처럼 무거운 조건이 붙는 화면만 조회 버튼을 두기로 했습니다.
- 계정, 회사 전환, 화면 모드처럼 하루에 몇 번 안 쓰는 것은 메뉴 맨 아래 「더 보기」 하나에 모았습니다.
만들어 보니 메뉴 모양보다 오래 걸린 것은 규칙을 지키는 일이었습니다. 화면이 서른 개를 넘어가자 어떤 화면은 검색이 칩 뒤에 있고, 어떤 화면은 표가 여백 안 카드에 들어가 있었습니다. 두 줄 툴바와 목록 틀을 부품 하나로 만든 뒤에야 모든 목록 화면이 같은 모양이 됐습니다.
고를 때 볼 세 가지
우리 회사 ERP나 사내 시스템의 메뉴를 정한다면 제품 이름보다 이 세 가지를 먼저 보겠습니다.
- 사람마다 매일 쓰는 화면이 몇 개인가. 열 개 안쪽이면 역할별 메뉴나 사용자 편집 메뉴로 충분히 짧아집니다. 수십 개를 오가는 사람이 많으면 검색과 열린 화면 탭이 필요합니다.
- 여러 화면을 동시에 띄워 두고 일하는가. 입력하다 다른 화면을 확인하고 돌아오는 일이 잦다면 열린 화면 탭이나 브라우저 탭으로 여는 길을 막지 않아야 합니다.
- 처음 쓰는 사람과 오래 쓴 사람의 비율. 새로 오는 사람이 많으면 묶음이 분명한 메뉴가, 오래 쓴 사람이 많으면 검색과 단축키가 먼저입니다.
메뉴는 어느 하나를 고르는 문제라기보다 이 셋의 답에 맞춰 섞는 문제에 가깝습니다. 앞의 여섯 가지 제품도 실제로는 대부분 두세 가지를 섞어 씁니다.
참고
- SAP Fiori 디자인 가이드라인: Dynamic Page, Filter Bar, List Report
- Microsoft Learn: Designing Role Centers, Adding Menus to the Navigation Area (Business Central)
- Oracle NetSuite 도움말: Navigation Menu, Header and Menus
- 이카운트 ERP 제품 안내: 사용기능 최적화(사용메뉴 설정)
함께 읽기
- 디자인 시스템 이름을 짓는 방법: 오래 가는 네이밍 전략디자인 시스템을 운영하다 보면 버튼, 컬러, 레이아웃보다 먼저 부딪히는 문제가 있습니다. 바로 이름입니다. 이름은 문서 구조, 패키지명, 컴포넌트 철학, 팀 내 커뮤니케이션에 계속 영향을 줍니다.
- UI 디자인 스타일을 빠르게 이해하는 실무 가이드웹사이트나 앱을 만들 때 “어떤 느낌으로 디자인할 것인가”는 생각보다 중요한 결정입니다. 같은 기능이라도 시각 언어에 따라 신뢰감, 친근함, 전문성, 실험성이 완전히 달라집니다.
- 웹사이트 구축 전 기획: 목표·콘텐츠·정보 구조를 정리하는 방법좋은 웹사이트 기획은 화면을 많이 그리는 일이 아니라, 방문자가 해야 할 일을 콘텐츠와 구조로 명확하게 만드는 일이다. 이 글에서는 첫 코드를 작성하기 전에 목표, 사용자, 콘텐츠, 페이지 구조, URL, 접근성 기준을 하나의 실행 가능한 문서로 정리하는 방법을 다룬다.
- 웹 디자인 레이아웃의 기본: 콘텐츠 흐름부터 반응형 그리드까지웹 레이아웃은 화면을 몇 칸으로 나눌지 정하는 작업이 아닙니다. 콘텐츠의 읽기 순서를 먼저 세우고, 넓이가 달라져도 그 순서와 기능이 무너지지 않도록 공간의 규칙을 만드는 작업입니다.
- 네오브루탈리즘 UI는 언제 효과적일까네오브루탈리즘은 최근 웹과 앱 디자인에서 자주 보이는 강한 시각 스타일입니다. 두꺼운 테두리, 원색, 딱딱한 그림자, 과감한 타이포그래피를 사용해 화면을 포스터처럼 보이게 만듭니다.