패널

borderColor	#e5e7eb
bgColor	#ffffff
borderStyle	solid

패널

borderColor

상태
colour Blue
title 01
화면 제작 방식 선택 (Select Mode)

어떤 방법으로 화면을 만드시겠습니까? 원하시는 방식을 선택해주세요.

패널

borderColor	#10b981
bgColor	#f0fdf4
borderWidth	3
borderStyle	solid

상태

colour

Green

title

AUI Tab Group

📊 엑셀 활용 (MX-Grid)

#10b981#f0fdf43solid

GreenUnique

📊

엑셀 활용 (MX-Grid)

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

↓ 엑셀 활용 프로세스 보기

패널

borderColor	#3b82f6
bgColor	#eff6ff
borderWidth	2
borderStyle	solid

상태

colour	Blue
title	Standard

🎨

템플릿 활용

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

↓ 템플릿 활용 프로세스 보기

패널

borderColor	#10b981
bgColor	#dcfce7
borderWidth	4
borderStyle	solid

📊 엑셀 활용 (MX-Grid) 개발 프로세스

기존 엑셀 파일을 웹으로 즉시 변환하는 빠른 개발 방식

#d1fae5

bgColor

#ffffff

borderStyle

borderColor

colour

solid

상태

Green

title

02

borderColor

엑셀 파일 업로드 (Import)

기존에 사용하던 엑셀 양식(.xlsx)을 그대로 업로드하세요. 셀 스타일과 수식이 웹으로 자동 변환됩니다.

패널

#86efac

bgColor

#f0fdf4

borderStyle

solid

📥 주제별 엑셀 샘플 양식

📄

재무/회계

손익계산서

📄

영업/매출

견적서

📄

인사/총무

휴가신청서

📄

생산/재고

작업일보

패널

#d1fae5

bgColor

#ffffff

borderStyleborderColorcolour

solid

상태

Green

title

03

borderColor

데이터 연결 (Data Mapping)

엑셀 데이터 시트(Data Sheet)에 데이터를 매핑하여 출력합니다. 원하는 방식을 선택하세요.

패널

#93c5fd

bgColor

#eff6ff

borderStyleborderColor

solid

🗄️ Dataset Manager

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

→ 가이드 보기

패널

bgColor

#86efac

borderStyle

#f0fdf4

정보
icon	solid 🤖 DB Bot No-Code GUI 환경에서 데이터를 연결합니다. → 가이드 보기
	true	title	icon	💡 잠깐! 변수(Parameter) 처리가 필요하신가요? 데이터 연결 시 사용자 조회 조건(날짜, 부서 등)을 처리하는 방법을 확인하세요. → 사용법 보기
정보
	true	title	❓ DB가 준비되지 않았나요? 엑셀/CSV 파일을 직접 업로드하여 데이터를 연결할 수 있습니다. → 파일 업로드 가이드 (준비 중)

패널

#d1fae5

bgColor

#ffffff

borderStylecolour

solid

상태

Green

title

04 인터랙션 구현 (Interaction)

버튼 클릭, 팝업 호출 등 동적인 동작을 정의합니다. 코딩 없이 설정하거나 스크립트로 상세 제어할 수 있습니다.

패널borderColor

#c084fc

bgColor

#faf5ff

borderStyleborderColor

solid

🤖 Process Bot

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

→ 가이드 보기

패널

bgColor

#fb923c

borderStyle

#fff7ed

패널
borderColor	solid 💻 Script Editor JavaScript를 활용해 고도화된 로직을 구현합니다. (Pro-Code) → 가이드 보기
	#cbd5e1	bgColor	#f8fafc	borderStyle	solid 🔄 이벤트 실행 순서 및 생명주기 (Event Lifecycle) 보고서 실행 및 조회 시 발생하는 이벤트의 순서를 확인하세요. → 상세 보기

panel

🎨 템플릿 활용

borderColor

#3b82f6#eff6ff3solid

bgColorborderWidth4borderStylesolid🎨

BlueStandard

#dbeafe

🎨

템플릿 활용

개발 프로세스

표준 컴포넌트가 구성된 템플릿으로 빠르게 화면 제작

패널

borderColor	#bfdbfe
bgColor	#ffffff
borderStyle	solid

borderColor

상태

colour	Blue
title	02

borderColor

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

#bfdbfe#ffffffsolid

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

15가지 표준 템플릿 갤러리에서 화면 목적에 맞는 구조를 선택하여 시작하세요.

패널

#93c5fd

bgColor

#eff6ff

borderStyle

solid

🎨 업무별 추천 템플릿

📊 전사/경영

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

🧮 재무/회계

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

🚚 영업/물류

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

→ 전체 템플릿 갤러리 보기

패널

#bfdbfe

bgColor

#ffffff

borderStyleborderColorcolour

solid

상태

Blue

title

03

#93c5fd

#eff6ff

solid

🗄️ SQL

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

→ 가이드 보기

#86efac

#f0fdf4

solid

🤖 META

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

→ 가이드 보기

#93c5fd

#eff6ff

solid

🗄️ SQL

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

→ 가이드 보기

#86efac

#f0fdf4

solid

🤖 META

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

→ 가이드 보기

#93c5fd

#eff6ff

solid

🗄️ SQL

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

→ 가이드

#86efac

#f0fdf4

solid

🤖 META

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

→ 가이드

#d8b4fe

#faf5ff

solid

🔗 Grid

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

→ 가이드

#93c5fd

#eff6ff

solid

🗄️ SQL

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

→ 가이드 보기

펼치기
title	컴포넌트 데이터 연결 (Binding) 먼저 데이터를 바인딩할 대상 컴포넌트를 선택한 후, 데이터 연결 방식(SQL/META/Grid)을 결정하세요. 1️⃣ Select Component
title	🗂️ ListGrid - 목록형 그리드
패널
borderColor	bgColor	borderStyle
패널
borderColor	bgColor	borderStyle
펼치기
	title	📊 OlapGrid - 피벗 그리드
패널
borderColor	bgColor	borderStyle
패널
borderColor	bgColor	borderStyle
펼치기
	title	📈 Chart - 차트/그래프
패널
borderColor	bgColor	borderStyle
패널
borderColor	bgColor	borderStyle
패널
borderColor	bgColor	borderStyle
펼치기
	icon	📋 ComboBox - 드롭다운 목록
패널
borderColor	bgColor	borderStyle
정보
	true	title	💡 변수(Parameter) 처리가 필요하신가요? 데이터 연결 시 사용자 조회 조건(날짜, 부서 등)을 처리하는 방법을 확인하세요. → 사용법 보기

패널

#bfdbfe

bgColor

#ffffff

borderStylecolour

solid

상태

Blue

title

04 인터랙션 구현 (Interaction)

버튼 클릭, 팝업 호출 등 동적인 동작을 정의합니다. 코딩 없이 설정하거나 스크립트로 상세 제어할 수 있습니다.

패널borderColor

#c084fc

bgColor

#faf5ff

borderStyle

solid

🤖 Process Bot

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

→ 가이드 보기

패널borderColorbgColor

#fb923c

borderStyle

#fff7ed

borderColor

solid

💻 Script Editor

JavaScript를 활용해 고도화된 로직을 구현합니다. (Pro-Code)

→ 가이드 보기

패널

#cbd5e1

bgColor

#f8fafc

borderStyle

solid

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

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

→ 상세 보기

패널

borderColor	#e5e7eb
bgColor	#ffffff
borderStyle	solid

상태
colour Grey
title 05
화면 디자인 및 테스트

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

패널

borderColor	#c7d2fe
bgColor	#eef2ff
borderStyle	solid

🎨 UI/UX 디자인 시스템

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

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

...

페이지 트리

페이지 이력

버전 비교

이전 버전 10

새 버전 11

키

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

엑셀 활용 (MX-Grid)

템플릿 활용

📊 엑셀 활용 (MX-Grid) 개발 프로세스

Green

02

엑셀 파일 업로드 (Import)

📥 주제별 엑셀 샘플 양식

Green

03

데이터 연결 (Data Mapping)

🗄️ Dataset Manager

🤖 DB Bot

Green

04

인터랙션 구현 (Interaction)

🤖 Process Bot

💻 Script Editor

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

템플릿 활용

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

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

🎨 업무별 추천 템플릿

Blue

03

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

1️⃣ Select Component

🗄️ SQL

🤖 META

🗄️ SQL

🤖 META

🗄️ SQL

🤖 META

🔗 Grid

🗄️ SQL

Blue

04

인터랙션 구현 (Interaction)

🤖 Process Bot

💻 Script Editor

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

상태colourGreytitle05 화면 디자인 및 테스트

🎨 UI/UX 디자인 시스템

상태
colour Blue
title 01
화면 제작 방식 선택 (Select Mode)

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

#bfdbfe#ffffffsolid

상태
colour Grey
title 05
화면 디자인 및 테스트