페이지 이력

...

패널

borderColor	#4338ca
bgColor	#4338ca
borderStyle	solid

AUD 표준 개발 프로세스 가이드

표준 템플릿을 활용한 화면 개발부터 배포까지의 전체 프로세스

패널

borderColor	#e5e7eb
bgColor	#ffffff

01	화면 제작 방식 선택 엑셀 기반 화면 제작 또는 AUD 보고서 템플릿을 선택합니다.

템플릿 유형(엑셀 vs AUD보고서)에 따라 최적의 개발 로드맵을 안내해 드립니다

01	템플릿 유형 선택 (Select Template) 원하는 양식을 선택하세요. 선택한 유형에 따라 프로세스가 달라집니다.

정보

title	어떤 유형을 선택해야 할까요?

엑셀 템플릿 (MX-Grid) Cell-based

추천: 정형 리포트, 데이터 입력/수정 화면, 경영계획
장점: 엑셀 수식/서식 그대로 활용, 빠른 개발 속도

AUD 보고서 템플릿 (Web Component) Free-form

추천: 임원용 대시보드(Dashboard), 시각화, 모바일
장점: 자유로운 디자인 배치, 화려한 차트/지도 구현

AUI Tab Group

📊

엑셀 활용 (MX-Grid)

엑셀 기반 화면 제작 프로세스

02

기존

엑셀

파일을 활용하여 화면 레이아웃을 구성하고, 데이터 매핑 및 인터랙션을 설정하는 방식입니다.엑셀 파일 업로드 – 화면 구조가 정의된 엑셀 파일

파일 업로드 (Import)

기존 엑셀 양식(.xlsx)을 업로드하면 셀 스타일이 자동 변환됩니다.

Check Point

업로드 시 엑셀의 셀 병합, 배경색, 테두리 정보가 그대로 웹 화면 스타일로 변환됩니다.

데이터 연결 – Dataset Manager 또는 DB Bot을 통한 데이터 매핑

인터랙션 구현 – Process Bot, Script Editor 활용

✔ 적용 대상

기존 엑셀 화면을 웹으로 전환하는 경우
정형 리포트 및 입력 화면

🎨 AUD 보고서 템플릿

AUD 표준 보고서 템플릿 활용

AUD에서 제공하는 표준 UI 템플릿을 기반으로 신규 화면을 빠르고 일관성 있게 개발합니다.

템플릿 선택 – 업무 목적에 맞는 레이아웃 선택
컴포넌트 바인딩 – Grid, Chart 등 데이터 연결
인터랙션 구현 – 버튼, 팝업, 파라미터 설정

✔ 적용 대상

신규 대시보드 및 시각화 화면
표준 UI 가이드 준수가 필요한 프로젝트

패널

borderColor	#e5e7eb

02. 데이터 준비

화면에 표시할 데이터 소스를 준비합니다.

엑셀 파일 업로드 또는 DB 테이블 확인
컬럼 구조 및 데이터 타입 점검

패널

borderColor	#e5e7eb

03. 데이터 연결 (Data Mapping)

Dataset Manager 또는 DB Bot을 사용하여 데이터를 매핑합니다.

쿼리 작성 및 데이터셋 생성
컴포넌트와 데이터셋 연결

패널

borderColor	#e5e7eb

04. 인터랙션 구현

사용자 이벤트 및 화면 흐름을 구현합니다.

버튼 클릭 이벤트
팝업 및 화면 이동
스크립트 기반 로직 처리

패널

borderColor	#e5e7eb

05. 화면 디자인 및 테스트

CI/BI 가이드에 맞춰 디자인을 보완하고 기능 테스트 및 데이터 검증을 수행합니다.

패널

borderColor	#e5e7eb

06. 화면 배포

완성된 화면을 포털 메뉴에 등록하고 사용자 권한을 설정하여 배포합니다.

패널

bgColor	#1f2937

함수(Sum, Avg 등)가 포함된 경우 자동으로 계산 로직이 적용됩니다.

03	데이터 연결 (Data Mapping) Dataset Manager(SQL) 또는 DB Bot(No-Code)으로 데이터를 연결합니다.

#93c5fd#ffffffsolid

Dataset Manager (SQL)

SQL 쿼리를 직접 작성하여 연결

가이드 보기 →

#86efac#ffffffsolid

DB Bot (No-Code)

GUI 환경에서 데이터 연결

가이드 보기 →

true잠깐! 조회 조건 변수(Parameter) 및 파일 업로드

변수 처리: 데이터 연결 시 날짜, 부서 등 사용자 조회 조건을 처리하는 방법 → 사용법 보기

DB가 준비되지 않았나요? 엑셀/CSV 파일을 직접 업로드하여 데이터를 연결할 수 있습니다.

AUD 보고서 템플릿

02	컴포넌트 데이터 연결 (Binding) 그리드, 차트 등 컴포넌트를 선택하고 데이터를 바인딩합니다.

ListGrid - 목록형 그리드

SQL 또는 META를 이용하여 데이터를 연결하세요.

가이드 보기 →

Chart - 차트/그래프

SQL, META 또는 Grid 데이터를 연결하세요.

가이드 보기 →

trueTip: 조회 조건 및 파일 업로드

변수(Parameter): 조회 조건 처리 방법 → 확인하기

파일 업로드: DB 없이 엑셀/CSV 파일로 연결 가능합니다.

04	인터랙션 구현 (Interaction) Process Bot(No-Code) 또는 Script Editor(JS)로 동적 동작을 정의합니다.

패널

borderColor	#c084fc
bgColor	#ffffff
borderStyle	solid

Process Bot (No-Code)

클릭만으로 이벤트 로직 설정

가이드 보기 →

패널

borderColor	#fb923c
bgColor	#ffffff
borderStyle	solid

Script Editor (Pro-Code)

JS를 활용한 고도화된 로직 구현

가이드 보기 →

패널

borderColor	#cbd5e1
bgColor	#f8fafc
borderStyle	solid

이벤트 실행 순서 및 생명주기 (Event Lifecycle)

보고서 실행 및 조회 시 발생하는 이벤트의 순서를 확인하세요.

상세 보기 →

05	화면 디자인 적용 CI/BI를 반영하여 폰트, 박스 스타일, 이미지를 최종 조정합니다.

패널

borderColor	#e5e7eb
bgColor	#ffffff
borderStyle	solid

폰트 추가

파일 서버 경로에서 폰트 파일을 직접 추가/변경합니다.

가이드 보기 →

패널

borderColor	#e5e7eb
bgColor	#ffffff
borderStyle	solid

박스스타일 변경

템플릿에 적용된 박스스타일을 변경하며, 즉시 적용됩니다.

준비 중

패널

borderColor	#e5e7eb
bgColor	#ffffff
borderStyle	solid

이미지 변경

서버 경로의 이미지 파일을 교체하여 로고 등을 변경합니다.

준비 중

06	완성된 화면 배포 저장 위치를 지정하고 사용자 권한을 부여하여 포털에 등록합니다. 배포 가이드 보기 →

패널

borderColor	#1f2937
bgColor	#1f2937
borderStyle	solid

페이지 트리

버전 비교

이전 버전 42

새 버전 43

키

화면 제작 방식 선택

템플릿 유형 선택 (Select Template)

엑셀

파일 업로드 (Import)

✔ 적용 대상

AUD 표준 보고서 템플릿 활용

✔ 적용 대상

02. 데이터 준비

03. 데이터 연결 (Data Mapping)

04. 인터랙션 구현

05. 화면 디자인 및 테스트

06. 화면 배포

데이터 연결 (Data Mapping)

Dataset Manager (SQL)

DB Bot (No-Code)

컴포넌트 데이터 연결 (Binding)

인터랙션 구현 (Interaction)

Process Bot (No-Code)

Script Editor (Pro-Code)

이벤트 실행 순서 및 생명주기 (Event Lifecycle)

화면 디자인 적용

폰트 추가

박스스타일 변경

이미지 변경

완성된 화면 배포