소개

1. BXM Web Admin 이란?

BXM Web Admin은 BXM 프레임워크 기반 애플리케이션의 운영 현황을 실시간으로 모니터링하고 시스템 설정을 중앙에서 관리하는 관리자 포털이다.

2. BXM Web Admin 사용 환경

2.1. 권장 해상도

구분 권장 사항

최소 해상도

1280 × 768

권장 해상도

1920 × 1080 (Full HD)

권장 배율

100% (Windows 디스플레이 배율 기준)

2.2. 지원 브라우저

지원 브라우저
브라우저 명 버전

크롬

108 이상

파이어폭스

107 이상

Microsoft Edge

107 이상

Internet Explorer(IE)는 지원하지 않는다.
Edge 사용 시 IE 호환성 모드 가 활성화되어 있으면 화면이 정상 표시되지 않으므로 반드시 비활성화해야 한다.

3. 로그인 화면

3.1. 로그인 화면 구성

BXM Web Admin 로그인 화면
Figure 1. BXM Web Admin 로그인 화면
항목 설명

사용자 ID

로그인에 필요한 사용자 ID와 비밀번호를 입력한다. 입력한 사용자 ID가 존재하지 않으면 '유저 정보를 찾을 수 없습니다.', 비밀번호가 틀리면 '비밀번호가 일치하지 않습니다.'라는 문구가 나온다.

도메인

도메인을 선택하는 영역이다. BXM Web Admin에서 도메인 별로 관리할 수 있게 도메인을 선택해 로그인해야 한다. 도메인 정보는 데이터베이스의 BXM_DOMAIN 테이블에서 직접 데이터를 관리한다.

언어

언어를 선택하는 영역이다. BXM Web Admin은 기본적으로 한국어(ko), 영어(en)를 지원한다. 선택한 언어에 따라 Admin 화면이 각 언어로 번역되어 나오지만, 데이터베이스에 있는 정보는 번역되어 나오지 않는다.

4. 기본 화면

BXM Web Admin 기본 화면
Figure 2. BXM Web Admin 기본 화면
번호 영역 설명

①

헤더 영역

인증 토큰 잔여시간, 영업일 정보, 개발 환경, 접속한 Role 정보, Domain 정보, 접속한 User ID, 프로필, 테마, 로그아웃 기능을 제공한다.

②

탭 바

현재 열려 있는 화면을 탭으로 관리한다. 여러 메뉴를 동시에 열어 작업할 수 있고 탭 바 이동시 이전 작업을 이어서 진행할 수 있다.

③

사이드 메뉴

기능별 메뉴 트리로 클릭하면 해당 화면이 ④ 콘텐츠 영역에 표시된다.

④

콘텐츠 영역

선택한 메뉴의 화면이 표시된다. 탭 전환으로 여러 화면을 동시에 사용할 수 있다.

4.1. 헤더 영역

인증 토큰 잔여시간, 영업일 정보, 개발 환경, 접속한 Role 정보, Domain 정보, 접속한 User ID, 프로필, 테마, 로그아웃 기능을 제공한다.

BXM Web Admin 헤더 영역
Figure 3. BXM Web Admin 헤더 영역

  1. 인증 토큰 잔여시간

    현재 접속하는 데에 이용 중인 토큰 잔여시간을 표기한다. 오른쪽 새로고침 버튼을 통해 토큰을 재발급 받을 수 있다. refresh 토큰 만료시 다음과 같이 재로그인 dialog가 표기된다.

    인증 토큰 잔여시간
    Figure 4. 재로그인 dialog

  2. 영업일 정보

    클릭하면 다음과 같은 팝업으로 영업일에 대한 상세 정보를 확인할 수 있다.

    영업일 정보 상세 팝업
    Figure 5. 영업일 정보 상세 팝업

  3. 개발 환경

    현재 접속한 개발 환경 정보가 표기된다.

  4. 접속한 Role 정보

    현재 접속한 사용자의 Role 정보가 표기된다.

  5. Domain 정보

    현재 접속 중인 Domain 정보가 표기된다.

  6. 접속한 User ID

    현재 접속한 사용자의 User ID가 표기된다.

  7. 프로필

    클릭하면 다음과 같은 팝업으로 접속한 사용자 정보를 변경할 수 있다.

    사용자 정보 변경
    Figure 6. 사용자 정보 변경

  8. 테마

    Admin 화면에 적용할 테마를 선택할 수 있다.

    테마 선택
    Figure 7. 테마 선택

  9. 로그아웃

    현재 접속된 사용자 정보를 로그아웃할 수 있다.

4.2. 탭 바

현재 열려 있는 화면을 탭으로 관리한다. 여러 메뉴를 동시에 열어 작업할 수 있고 탭 바 이동시 이전 작업을 이어서 진행할 수 있다. 한번에 최대 5개의 탭 항목들만 표기되지만 탭은 그 이상으로 활성화할 수 있다.

탭 바
Figure 8. 탭 바

  1. 탭 항목

    좌측 잠금 버튼과 메뉴명 그리고 우측 종료 버튼으로 구성되어있다. 잠금 버튼을 활성화하면 종료 버튼 및 전체 종료 버튼을 눌러도 탭 항목이 종료되지 않는다.

    탭 항목
    Figure 9. 탭 항목

  2. 컨트롤 버튼

    < > 버튼을 통해 탭 항목 표기 범위를 좌/우로 이동할 수 있다. X 버튼을 통해 현재 활성화 된 모든 탭 항목들을 종료할 수 있다.

    컨트롤 버튼
    Figure 10. 컨트롤 버튼

4.3. 사이드 메뉴

기능별 메뉴 트리로 클릭하면 해당 화면이 콘텐츠 영역에 표시된다. 대메뉴와 소메뉴로 구성되어있다.

사이드 메뉴
Figure 11. 사이드 메뉴

4.4. 콘텐츠 영역

선택한 메뉴의 화면이 표시된다. 탭 전환으로 여러 화면을 동시에 사용할 수 있다.

콘텐츠 영역
Figure 12. 콘텐츠 영역

5. 공통 UI 패턴

BXM Web Admin의 대부분의 화면은 검색 영역 + 목록 영역 + 상세 영역 의 3단 구조를 따른다. (단, 영향도 분석 및 APP 배포 관리 페이지는 예외)

검색 영역 + 목록 영역
Figure 13. 검색 영역 + 목록 영역
상세 영역
Figure 14. 상세 영역

5.1. 검색 영역

검색 조건을 입력하고 조회 버튼을 클릭하면 목록 영역에 결과가 표시된다.

버튼 동작

조회

입력한 조건으로 데이터를 조회한다. Enter 키로도 실행된다.

초기화

모든 검색 조건을 기본값으로 되돌린다.

추가

새로운 항목을 추가할 수 있는 Drawer를 활성화한다.

다운로드

모든 항목을 로컬 파일로 다운로드한다.

조건 없이 조회하면 전체 데이터를 불러온다. 데이터량이 많은 화면에서는 조회 기간 을 반드시 지정하는 것을 권장한다.

5.2. 목록(그리드) 영역

기능 설명

행 클릭

선택한 항목의 상세 정보를 하단 상세 영역에 표시한다.

컬럼 헤더 클릭

해당 컬럼 기준으로 오름차순 → 내림차순 → 기본 순서로 정렬된다.

컬럼 너비 조절

컬럼 헤더 경계선을 드래그하여 너비를 조절할 수 있다.

페이지 이동

하단 페이지 네비게이터로 페이지를 이동한다.

삭제 버튼 클릭 시 확인 팝업이 표시된다.

5.3. 상세 영역

목록에서 항목을 선택하면 해당 항목의 상세 정보가 표시된다.

  • 상세 영역 우측 상단의 × 버튼으로 패널을 닫을 수 있다.

  • 수정 가능한 항목은 직접 편집 후 저장 버튼으로 반영한다.

Copyright© Bankwareglobal All Rights Reserved.