안녕하세요, Chloe 입니다.
오늘은 쉽게 접할 일이 드문 MES시스템에 대한 이야기를 해보려고 해요. MES는 Manufacturing Execution System의 약자로서 아마 쉽게 들어보지 못하셨을 수도 있는데요. 공장의 생산 시스템을 온라인으로 생산 실적, 작업자 활동, 설비 가동 여부, 제품 품질 정보등의 내용을 실시간으로 확인・분석・모니터링 하는 시스템이에요.

전체 공정에 대한 정보가 온라인으로 수집되고 실시간 모니터링이 가능해야하니 어마한 데이터들이 쌓이겠죠? 실시간으로 쌓이는 많은 정보를 빠르고 쉽게 확인하기 위해 현대제철의 MES시스템 화면 주요 개선 포인트는 바로 화면 레이아웃에 있었어요. 정보의 유형에 따른 레이아웃과 컴포넌트별 활용에 대해 고민하고 해결한 과정을 소개해 드릴게요.

숨기고 접고 빼고 할 수 있는건 다 해보자!

처음에는 단순히 글자 크기를 조금이라도 줄이면 되지 않을까? 생각했어요. 하지만 사용자 인터뷰를 통해 대부분의 사용자는 40대-50대 였고, 공장에서 작은 모니터로 화면을 보는 사람도 있어 오히려 글자 크기가 커지길 바라는 니즈를 발견했어요. 또한, 개발 특성상 웹 페이지내 스크롤 기능은 불가한 상태였어요. 이런 상황에서 어떻게 폰트는 커지고 더 많은 정보를 보여주지? 난감했지만 폰트를 제외한 나머지 컴포넌트를 다시 들여다 보기로 했어요. 

많은 정보들이 모여있는 메인 작업 영역외에 변화를 줄 수 있는 영역을 찾다보니 결국 상단 GNB, 좌측 LNB를 접었다 펼쳤다하는 방식과 하단 시스템바도 숨길 수 있는 새창 모드를 선택하여 사용하는 방식을 찾았어요. 접을 수 있는 건 다 접어보니 메인 영역을 꾀나 넓게 활용이 가능해졌죠! 하지만 화면이 사용자의 선택에 따라 변하는 만큼 체계적인 화면 정보 구성 규칙이 필요해 보였어요.

💡 여기서 GNB, LNB란?
GNB는 Global Navigation Bar의 줄임말로, 모든 화면에서 동일하게 노출되는 내비게이션 바에요. 보통 웹사이트 최상단에 위치하고 있고 메인 메뉴들로 구성해요.

LNB는 Local Navigation Bar의 줄임말이에요. 보통 GNB메뉴의 하위 메뉴들로 구성되며, GNB영역 하단에 위치하거나 화면의 왼편에 배치하기도 해요. 간혹, 좌/우 Side쪽에 서브 메뉴로 구성하여 배치하는 메뉴를 SNB(Side Navigation Bar)라고 부르기도 하니 알아두시면 좋아요! :)

정돈되고 규격화된 레이아웃 규칙이 필요해

화면 보기 방식을 사용자가 선택해서 볼 수 있기 때문에 우선적으로 더 많은 정보를 한 번에 큰 글씨로 보고싶다는 니즈는 충족을 시켰어요! 🙌 하지만 부서별, 업무별로 보여지는 정보와 이용 목적이 상이하여 일관된 규칙으로 구성된 공통 레이아웃이 필요했어요. 그래서 화면 유형을 이용 목적에 따라 조회, 입력 화면 2가지 유형으로 나눈뒤 정보 구성 배치에 따라 기본형・복수 테이블 상하 구성형・복수 테이블 좌우 구성형으로 규칙을 정의하였어요.

UX/UI 표준가이드에 규칙을 정의하자

이렇게 화면의 레이아웃 정의를 하고나니 세부 컴포넌트 및 적용 규칙이 자연스럽게 맞춰져 갔어요! 기존 AS-IS화면의 문제점을 분석하고 사용자의 니즈를 충족시키고 나니 화면의 레이아웃 부터 작은 컴포넌트까지 세부 규칙은 착착 세워지게 되었답니다. 추후에 다른 작업자가 이번에 적용된 규칙대로 새로운 화면을 작업한다면 통일성 있는 시스템을 만들어 나갈 수 있게 된거죠! 어떠한 규칙도 없던 화면에서 발견된 문제를 하나씩 해결하고 사용자의 니즈를 충족시키고 팀원들과 함께 새로운 규칙들을 세워나가서 여러 방면에서 아주 뿌듯하고 많이 배운 프로젝트였어요. 🤗