MOMO ERP · UI SAMPLES

화면 스타일 샘플 10종

내용 · 기능은 모두 같고, 메뉴 위치와 화면 틀 · 글자 크기만 다르게 만들었습니다. 색은 모두 모모패밀리디자인입니다.
각 샘플을 열어 직접 눌러 보고, 데모 안에서도 오른쪽 아래 UI 샘플 A~J 버튼으로 바로 바꿀 수 있습니다.

NAVY #1f2a44BLUE #5a63eaBLUE_SOFTPAGE #f5f7fbLINE
A 기본 화면
A

기본 — 남색 사이드바

지금 쓰는 화면입니다. 왼쪽 남색 메뉴에 26개 화면이 모두 펼쳐져 있어 한 번에 찾아가기 쉽습니다.

왼쪽 메뉴기본 글자 13px모든 메뉴 항상 보임
B 상단 메뉴 화면
B

상단 메뉴 — 넓은 화면

사이드바를 없애고 메뉴를 위로 올렸습니다. 그룹에 마우스를 올리면 하위 화면이 펼쳐지고, 본문은 가운데 넓게 보입니다. 표가 많은 업무에 좋습니다.

상단 가로 메뉴기본 글자 14px본문 최대 1,400px
C 아이콘 레일 화면
C

아이콘 레일 — 두 단 메뉴

왼쪽 얇은 남색 줄에는 업무 그룹 아이콘만, 옆 흰 메뉴에는 지금 그룹의 화면만 보여 줍니다. 메뉴가 짧아져 한눈에 들어옵니다.

아이콘 줄 + 보조 메뉴기본 글자 13.5px지금 그룹만 표시
D 라이트 화면
D

라이트 — 여백 넉넉한 카드형

흰 사이드바, 테두리 대신 부드러운 그림자, 큰 숫자와 넉넉한 여백으로 가장 산뜻한 느낌입니다. 대표 · 관리자가 현황을 보기에 좋습니다.

흰 사이드바기본 글자 14.5pxKPI 숫자 30px
E 탭형 화면
E

탭형 — 촘촘한 업무 화면

남색 상단 탭으로 그룹을 고르고, 바로 아래 흰 탭에서 화면을 고릅니다. 글자와 줄 간격을 줄여 한 화면에 더 많은 줄이 보입니다. 물류 · 경리처럼 목록을 많이 보는 팀에 맞습니다.

상단 탭 + 하위 탭기본 글자 12.5px표 줄 간격 촘촘
F 플로팅 화면
F

플로팅 — 떠 있는 사이드바

사이드바를 화면에서 띄운 둥근 남색 카드로, 상단바는 반투명 유리처럼 만들었습니다. 배경에 연한 인디고 빛을 깔아 가장 현대적인 느낌입니다.

떠 있는 사이드바기본 글자 13.5px반투명 상단바
G 다크 화면
G

다크 — 어두운 남색 테마

모모 남색을 바탕으로 한 어두운 화면입니다. 밤 근무나 모니터를 오래 보는 물류 · CS 팀의 눈 피로를 줄이고, 그래프 색이 더 또렷하게 보입니다.

다크 테마기본 글자 13.5px인디고 강조 유지
H 도크 화면
H

도크 — 아래쪽 메뉴

사이드바 없이 화면 아래 떠 있는 도크에 업무 그룹을 두었습니다. 그룹을 누르면 위로 하위 화면이 펼쳐집니다. 넓은 표 · 그래프를 크게 보기 좋습니다.

하단 도크기본 글자 14px본문 최대 1,440px
I 런처 화면
I

런처 — Ctrl+K 호출형

평소에는 메뉴를 숨겨 본문만 크게 보여 주고, 「메뉴」 버튼이나 Ctrl+K 로 26개 화면을 바둑판으로 불러냅니다. 이름으로 찾아 Enter 로 바로 이동합니다.

메뉴 숨김 + 런처기본 글자 15px가장 큰 글자
J 아코디언 화면
J

아코디언 — 접는 메뉴 + 위치 표시

흰 사이드바에서 지금 업무 그룹만 펼치고 나머지는 접어 둡니다. 화면 위에 「홈 › 그룹 › 화면」 위치 표시줄이 있어 어디에 있는지 늘 보입니다.

접는 사이드바기본 글자 13px위치 표시줄

※ 모든 샘플은 휴대폰에서 왼쪽 서랍 메뉴(☰)로 바뀝니다. · 고른 샘플은 이 브라우저에 기억되어 다음에 데모를 열 때도 유지됩니다. · 통합 업무프로그램 소개로 돌아가기