페이지 이력

...

Image Added

...

borderColor	#4338ca
bgColor	#4338ca
borderStyle	solid

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

...

01

템플릿 유형 선택 (Select Template)

아래 탭에서 원하는 양식을 선택하세요. 유형에 따라 프로세스가 달라집니다.

정보

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

Section

Column

width	50%

패널

borderColor

...

bgColor
#059669

...

borderStyle
#f0fdf4

...

01	화면 제작 방식 선택 (Select Mode) 어떤 방법으로 화면을 만드시겠습니까? 아래 탭에서 원하시는 방식을 선택해주세요.

...

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

📊 엑셀 활용 (MX-Grid)

기존 엑셀 파일(.xlsx)이 있는 경우
빠른 웹 변환이 필요한 경우
엑셀 수식과 스타일을 그대로 유지하고 싶은 경우

🎨 AUD 보고서 템플릿

새로운 화면을 처음부터 만드는 경우
표준화된 디자인과 구조가 필요한 경우
다양한 컴포넌트(Chart, Grid)를 조합하고 싶은 경우

none

MX-Grid (엑셀 템플릿)

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

Column

width	50%

패널

borderColor	#3b82f6
bgColor	#eff6ff
borderStyle	none

AUD보고서 템플릿 (Web Component)

추천 : 임원용 대시보드, 시각화, 모바일 호환
장점 : 자유로운 디자인, 화려한 차트 구현

▼ 원하는 유형의 탭을 클릭해 프로세스를 확인하세요 ▼

#d1fae5#ffffffsolid

작성한 서식과 수식 그대로 엑셀 파일이 웹 화면으로 변환됩니다.

엑셀의 데이터 구조와 기능을 웹 환경에서 그대로 구현할 수 있도록 지원하는 AUD플랫폼의 웹 컴포넌트 도구가 "MX-Grid" 입니다.

03

데이터 연결 (Data Mapping)

엑셀 데이터 시트(Data Sheet)에 데이터를 매핑하여

MX-Grid의 'D시트'에 DB 데이터를 연결해 출력합니다. 원하는 데이터 연결 방식을 선택하세요.

#93c5fd#eff6ff

50%

#adbbc8solid

🗄️

Dataset Manager (SQL쿼리 작성)

Dataset Manager에서 SQL 쿼리를 직접 작성하여 데이터를

연결합니다

조회합니다.

→ 가이드 보기

#86efac#f0fdf4

50%

#adbbc8solid

🤖

DB Bot

No-Code GUI 환경에서 데이터를 연결합니다.

→ 가이드 보기

true💡 잠깐! 변수(Parameter) 처리가 필요하신가요?

데이터 연결 시 사용자 조회 조건(날짜, 부서 등)을 처리하는 방법을 확인하세요.

→ 사용법 보기

true❓ DB가 준비되지 않았나요?

엑셀/CSV 파일을 직접 업로드하여 데이터를 연결할 수 있습니다.

→ 파일 업로드 가이드 (준비 중)

#d1fae5#ffffffsolid

(META 활용)

복잡한 SQL 쿼리 없이 META를 활용해 데이터를 조회합니다.

변수를 활용한 데이터 조회 방법이 궁금하신가요? 　가이드 보기 →　

04

인터랙션 구현 (Interaction)

버튼 클릭, 팝업 호출 등 동적인 동작을 정의합니다.

코딩 없이 설정하거나 스크립트로 상세 제어할 수 있습니다.#c084fc#faf5ff

50%

#adbbc8solid

🤖

Process Bot

코딩 없이

클릭만으로

클릭 만으로 이벤트 로직을 설정합니다. (No-Code)

→ 가이드 보기

#fb923c#fff7ed

50%

#adbbc8solid

💻

Script Editor

JavaScript를

JavaScrpit를 활용해 고도화된 로직을 구현합니다.

(Pro-Code)

→ 가이드 보기

#cbd5e1#f8fafcsolid🔄

이벤트 실행 순서 및

생명주기

생명 주기 (Event Lifecycle)

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

→ 상세 보기

🎨 AUD 보고서 템플릿#3b82f6#eff6ff3solid

AUI Tab Group

📊 엑셀 활용 (

MX-Grid

)#10b981#f0fdf43solid

GreenUnique

📊

(엑셀 활용

(MX-Grid

)

사용하던 엑셀 파일(.xlsx)을 업로드하여 즉시 웹 화면으로 변환하고 데이터를 매핑합니다.

#d1fae5#ffffffsolid

02

엑셀 파일 업로드 (Import)

기존에 사용하던 엑셀

다운로드 받은 엑셀 템플릿에 데이터를 연결하거나, 기존 양식(.xlsx)

을

그대로 업로드하세요.

셀 스타일과 수식이 웹으로 자동 변환됩니다.

📥 주제별 엑셀 샘플 양식

📄

재무/회계

손익계산서

📄

영업/매출

견적서

📄

인사/총무

휴가신청서

📄

생산/재고

작업일보

BlueStandard

🎨

AUD 보고서 템플릿

AUD의 시각화 컴포넌트(Chart, Grid)가 미리 구성된 템플릿을 활용하여 빠르게 화면을 제작합니다.

#bfdbfe#ffffffsolid

02	템플릿 선정 및 레이아웃 (Layout) 15가지 표준 템플릿 갤러리에서 화면 목적에 맞는 구조를 선택하여 시작하세요.

🎨 업무별 추천 템플릿

📊 전사/경영

종합 상황판형 (L01)
성과 리더보드 (L15)
경영 시뮬레이션 (L14)

🧮 재무/회계

결산 리포트형 (L05)
피벗 분석형 (L09)
그리드 대량 입력 (L12)

🚚 영업/물류

상품 카탈로그 (L10)
지리 정보 분석 (L06)
공정 흐름도 (L07)

→ 전체 템플릿 갤러리 보기

#bfdbfe#ffffffsolid

03

05

화면 디자인 적용

기업의 브랜드 아이덴티티를 반영하여 최종 결과물을 완성합니다.

#adbbc8solid

폰트 추가

기본 제공 폰트 외에 추가 폰트를 등록하여 사용할 수 있습니다.

#adbbc8solid

박스스타일 변경

템플릿에 적용된 박스스타일을 변경할 수 있으며, 신규로 등록해 사용할 수 있습니다.

#adbbc8solid

이미지 변경

서버에 업로드 된 이미지를 여러 보고서에서 사용할 수 있습니다.

06

완성된 화면 배포

개발이 완료된 화면을 다른 사용자가 조회할 수 있도록 저장할 위치를 지정하고, 사용자 그룹별 조회 권한을 부여하세요.

04

AUD 보고서

02

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

먼저 데이터를 바인딩할 대상 컴포넌트를 선택한 후, 데이터 연결 방식(SQL/META/Grid)을 결정하세요.

1️⃣ Select Component

🗂️ ListGrid - 목록형 그리드

#93c5fd#eff6ffsolid

🗄️ SQL

SQL 쿼리를 직접 작성하여 데이터를 연결합니다.

→ 가이드 보기

#86efac#f0fdf4solid

🤖 META

GUI 환경에서 마우스 클릭으로 데이터를 연결합니다.

→ 가이드 보기

📊 OlapGrid - 피벗 그리드

#93c5fd#eff6ffsolid

🗄️ SQL

SQL 쿼리를 직접 작성하여 데이터를 연결합니다.

→ 가이드 보기

#86efac#f0fdf4solid

🤖 META

GUI 환경에서 마우스 클릭으로 데이터를 연결합니다.

→ 가이드 보기

📈 Chart - 차트/그래프

#93c5fd#eff6ffsolid

🗄️ SQL

SQL 쿼리를 직접 작성하여 데이터를 연결합니다.

→ 가이드

#86efac#f0fdf4solid

🤖 META

GUI 환경에서 마우스 클릭으로 데이터를 연결합니다.

→ 가이드

#d8b4fe#faf5ffsolid

🔗 Grid

화면에 있는 Grid의 데이터를 연결하여 시각화합니다.

→ 가이드

📋 ComboBox - 드롭다운 목록

#93c5fd#eff6ffsolid

🗄️ SQL

SQL 쿼리를 직접 작성하여 데이터를 연결합니다.

→ 가이드 보기

true💡 변수(Parameter) 처리가 필요하신가요?

데이터 연결 시 사용자 조회 조건(날짜, 부서 등)을 처리하는 방법을 확인하세요.

→ 사용법 보기

#bfdbfe#ffffffsolid

주로 사용하는 컴포넌트 별 데이터 연결 방법을 안내합니다.

#adbbc8#FCFCFCsolid

Grid

#adbbc8#FFFFFFsolid

SQL

#adbbc8#FFFFFFsolid

META

#adbbc8#FCFCFCsolid

Chart

#adbbc8#FFFFFFsolid

SQL

#adbbc8#FFFFFFsolid

Grid

#adbbc8#FFFFFFsolid

META

#adbbc8#FCFCFCsolid

ComboBox

#adbbc8#FFFFFFsolid

SQL

변수를 활용한 데이터 조회 방법이 궁금하신가요? 　가이드 보기 →　

03

인터랙션 구현 (Interaction)

버튼 클릭, 팝업 호출 등 동적인 동작을 정의합니다.

코딩 없이 설정하거나 스크립트로 상세 제어할 수 있습니다.#c084fc#faf5ff

50%

#adbbc8solid

🤖

Process Bot

코딩 없이

클릭만으로

클릭 만으로 이벤트 로직을 설정합니다. (No-Code)

→ 가이드 보기

#fb923c#fff7ed

50%

#adbbc8solid

💻

Script Editor

JavaScript를

JavaScrpit를 활용해 고도화된 로직을 구현합니다.

(Pro-Code)🔄

→ 가이드 보기

#cbd5e1#f8fafcsolid

이벤트 실행 순서 및

생명주기

생명 주기 (Event Lifecycle)

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

→ 상세

05

화면 디자인 및 테스트

기업의 브랜드 아이덴티티(CI/BI)를

　가이드 보기 →　

패널

borderColor	#e5e7eb
bgColor	#ffffff
borderStyle	solid

04

화면 디자인 적용

기업의 브랜드 아이덴티티를 반영하여 최종 결과물을 완성합니다.

panel

#adbbc8solid

borderColor	#c7d2fe
bgColor	#eef2ff
borderStyle	solid

🎨 UI/UX 디자인 시스템

표준 컬러 팔레트, 폰트 스타일, 컴포넌트 규격을 확인하고 적용하세요.

→ 디자인 가이드 보기 (준비 중)

패널

borderColor	#e5e7eb
bgColor	#ffffff
borderStyle	solid

06

완성된 화면 배포하기

폰트 추가

기본 제공 폰트 외에 추가 폰트를 등록하여 사용할 수 있습니다.

#adbbc8solid

박스스타일 변경

템플릿에 적용된 박스스타일을 변경할 수 있으며, 신규로 등록해 사용할 수 있습니다.

#adbbc8solid

이미지 변경

서버에 업로드 된 이미지를 여러 보고서에서 사용할 수 있습니다.

05

완성된 화면 배포

개발이 완료된 화면을 다른 사용자가 조회할 수 있도록

포털 메뉴에 등록합니다. 패널

borderColor	#c7d2fe
bgColor	#eef2ff
borderStyle	solid

🚀 포털 메뉴 등록 및 배포

저장할 위치를 지정하고, 사용자 그룹별 조회 권한을

부여하여 배포하세요.

→ 배포 가이드 보기

패널

borderColor	#1f2937
bgColor	#1f2937
borderStyle	solid

부여하세요.

페이지 트리

버전 비교

이전 버전 13

새 버전 현재

키

템플릿 유형 선택 (Select Template)

화면 제작 방식 선택 (Select Mode)

데이터 연결 (Data Mapping)

인터랙션 구현 (Interaction)

엑셀 파일 업로드 (Import)

📥 주제별 엑셀 샘플 양식

AUD 보고서 템플릿

템플릿 선정 및 레이아웃 (Layout)

🎨 업무별 추천 템플릿

화면 디자인 적용

완성된 화면 배포

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

1️⃣ Select Component

🗄️ SQL

🤖 META

🗄️ SQL

🤖 META

🗄️ SQL

🤖 META

🔗 Grid

🗄️ SQL

인터랙션 구현 (Interaction)

화면 디자인 및 테스트

화면 디자인 적용

🎨 UI/UX 디자인 시스템

완성된 화면 배포

🚀 포털 메뉴 등록 및 배포