ERP 클라이언트의 기술은
jsp 및 php 에서,
ActiveX,
JQuery,
React or Vue(사실상 얘네까지는 아직 가지 못함)
까지.. 끊임없이 기술이 변화하고 발전해왔으나 ERP의 구조 자체는 크게 변하지 않았습니다.
당장 저는 15년 전에 개발된 ERP를 최신 기술로 전환하는 프로젝트를 진행해본 경험이 있는데,
정말 놀랍도록 다르지 않아 놀랐었네요.
(조회조건을 통한 검색, 메가메뉴, 그리드와 버튼 및 권한처리 등)
또한 구형 ERP 메뉴얼의 초기버전에서 설명하는 동작 원리 및 구성도가
크게 변화없이 현재 ERP 메뉴얼에 적용되어 있는 것도 여러번 확인한 바 있습니다.
자, 거두절미하고 ERP에서 사용되는 용어와, 기능, 기술을 프론트앤드 개발자의 관점에서 적어보도록 하죠.
화면 레이아웃은 현재 데모버전이 공개되어있는 이카운트 솔루션을 사용하도록 하겠습니다.
대충 메인화면 구성을 보면 이렇습니다. 단순해보이지만 다양한 기능들이 숨겨져 있습니다.
왼쪽 상단부터 CI(회사 로고), 검색창, 내비게이션바, 메가메뉴, 업무화면(업무화면 내에 태스크바) 순서로 배치되어 있으며 기능은 아래와 같습니다.
CI : 일반적으로 회사 대표 로고가 들어가며, 보통 메인화면으로 즉시 이동하는 하이퍼링크가 들어갑니다.
검색창 : 업무화면이나 기타 데이터를 조회할 수 있는 화면입니다. 메뉴 검색을 지원하는 경우 자동완성(Autocomplete)를 지원하는 경우가 많습니다.
내비게이션바 : 화면이 스크롤되어도, 화면 url이 바뀌어도 사용할 수 있는, 어떤 상황에서도 사용할 수 있는 기능들이 모여있는 별도의 프레임입니다.
메가메뉴 : 회사 업무에 따라 업무화면의 종류는 수백개가 될 수 있는데, 이를 편리하게 볼 수 있도록 각각의 업무구분(대분류, 중분류, 소분류)으로 나누어놓은 메뉴형태입니다.
업무화면 : 특정한 업무 수행을 목적으로 만들어진 화면입니다. 메인화면에서 여러개의 프레임을 사용하여 작은 화면으로 볼 수 있고, 직접 접속하여 큰 화면으로 볼 수 있습니다. 브라우저 새 창으로 열어 볼 수도 있습니다.
테스크바 : 일반적으로 즐겨찾기, 업무메모, 새로고침 등 해당 업무화면에서 동작하는 공통 기능들이 모여있는 별도의 프레임입니다.
메인화면은 여기까지입니다. ERP마다 다르겠지만 보통은 이러한 구조를 갖습니다.
다음은 업무화면입니다.
아코디언 메뉴 : 업무화면 사용 중, 인접한 업무화면에 빠르게 접근할 수 있도록 하기위해 만들어진 메뉴입니다. 메가메뉴를 사용하는 경우 2번 클릭해야할 것이, 아코디언 메뉴를 사용하는 경우 1번 클릭으로 이동 가능합니다.
현재 화면에 보이는 이카운트 ERP의 경우 1,2 Depth를 상단에, 3,4 Depth를 좌측에 배치하였네요.
Header : html5 기준으로 화면 구성을 header, main, footer라고 부르며 erp에서도 비슷하게 사용합니다.
header는 일반적으로 화면명(타이틀), 조회조건이 들어갑니다. 이카운트의 경우 조회조건이 숨겨져 있고, 단축키로 show/hide 할 수 있도록 되어있네요.
Tab : 서로 다른 데이터를 사용하지만 동일한 화면 패턴이 사용되거나 업무간 연관이 있는 경우 Tab이 사용됩니다.
Tab은 Dynamic하게 구성할 수 있으며, 각각의 tab을 별도 화면으로 열 수도 있습니다.
(이카운트는 안되는 것 같네요)
Grid : 업무화면에서 표현하고자 하는 데이터 목록입니다. 데이터가 많은경우 paging(전체 데이터를 index로 나누어 처리하는 방식), next(전체 데이터를 append하는 방식) 등으로 처리할 수 있습니다. grid는 각각의 cell을 editable하게 표현할 수 있고, 각각의 cell에 button을 표현할 수 있으며, expr을 적용할 수도 있습니다. checkbox 및 radio button을 이용해 cell을 select 할 수도 있습니다.
Footer : 일반적으로 로직처리 및 거래를 위한 버튼이 배치됩니다. 등록, 수정, 삭제 등 CRUD나, 결재, excel up/download 기능이 들어가기도 합니다.
업무화면은 정말 특별한 화면이 아니고서야 R(단순조회), CRUD(조회 및 저장) 둘 중 하나입니다.
보통 저 둘이 아니면 타 솔루션 링크정도 뿐이겠네요.
다음은 공통기능에 대하여 알아보겠습니다
'개발자 이야기' 카테고리의 다른 글
웹 컴포넌트에 대하여. -정의, 주요 3요소- (0) | 2020.12.29 |
---|---|
개발자가 직방,다방 웹사이트를 분석하여 쉽게 매물 찾는 방법 (0) | 2020.12.27 |
당근마켓의 바이럴 마케팅 (1) | 2020.11.25 |
알고리즘 공부는 바킹독만 알아도 된다. (0) | 2020.09.30 |
나태한 마인드 때문에 걱정만 하고 행동하지 않는 사람을 위한 어플 추천 (2) | 2020.09.25 |