...
...
| borderColor | #4338ca |
|---|---|
| bgColor | #4338ca |
| borderStyle | solid |
...
AUD 표준 개발 프로세스 가이드
표준화된 템플릿 활용 개발부터, 기존 엑셀(MX-Grid)을 활용한 웹 변환까지.
원하는 개발 방식을 선택하면 최적의 로드맵을 안내해 드립니다.
...
| borderColor | #e5e7eb |
|---|---|
| bgColor | #ffffff |
| borderStyle | solid |
| 상태 | ||||
|---|---|---|---|---|
|
어떤 방법으로 화면을 만드시겠습니까? 원하시는 방식을 선택해주세요.
| 패널 | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
📊 엑셀 활용 (MX-Grid)사용하던 엑셀 파일(.xlsx)을 업로드하여 즉시 웹 화면으로 변환하고 데이터를 매핑합니다. |
템플릿 유형 선택 (Select Template)
아래 탭에서 원하는 양식을 선택하세요. 유형에 따라 프로세스가 달라집니다.| 정보 | |||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
어떤 유형을 선택해야 할까요?
|
...
| 패널 | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
📊 엑셀 활용 (MX-Grid) 개발 프로세스기존 엑셀 파일을 웹으로 즉시 변환하는 빠른 개발 방식 |
...
| borderColor | #d1fae5 |
|---|---|
| bgColor | #ffffff |
| borderStyle | solid |
...
|
...
| 상태 | ||||
|---|---|---|---|---|
|
🎨
템플릿 활용
AUD의 시각화 컴포넌트(Chart, Grid)가 미리 구성된 템플릿을 활용하여 빠르게 화면을 제작합니다.
|
▼ 원하는 유형의 탭을 클릭해 프로세스를 확인하세요 ▼
| AUI Tab Group | ||||||
|---|---|---|---|---|---|---|
02 엑셀 파일 업로드 (Import)다운로드 받은 엑셀 템플릿에 데이터를 연결하거나, 기존 양식(.xlsx) 그대로 업로드하세요. 패널 | | |||||
| ||||||
📄 재무/회계 손익계산서 | 📄 영업/매출 견적서 | 📄 인사/총무 휴가신청서 | 📄 생산/재고 작업일보 | |||
| 패널 | ||||||
| ||||||
| 상태 | | |||||
| colour | Green | title | borderStyle | |||
| 패널 | ||||||
| borderColor | #93c5fd | |||||
| bgColor | #eff6ff | |||||
| borderColor | #86efac | |||||
| bgColor | #f0fdf4 | borderStyle | ||||
| 패널 |
| 정보 | ||||
|---|---|---|---|---|
| ||||
데이터 연결 시 사용자 조회 조건(날짜, 부서 등)을 처리하는 방법을 확인하세요. |
| 정보 | ||||
|---|---|---|---|---|
| ||||
엑셀/CSV 파일을 직접 업로드하여 데이터를 연결할 수 있습니다. → 파일 업로드 가이드 (준비 중) |
| borderColor | #d1fae5 |
|---|---|
| bgColor | #ffffff |
| borderStyle | solid |
인터랙션 구현 (Interaction)
버튼 클릭, 팝업 호출 등 동적인 동작을 정의합니다.
| borderColor | #c084fc |
|---|---|
| bgColor | #faf5ff |
| borderStyle | solid |
코딩 없이
클릭 만으로 이벤트 로직을 설정합니다. (No-Code)
JavaScrpit를 활용해 고도화된 로직을 구현합니다.
| borderColor | #cbd5e1 |
|---|---|
| bgColor | #f8fafc |
| borderStyle | solid |
| 패널 | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
🎨 템플릿 활용 개발 프로세스표준 컴포넌트가 구성된 템플릿으로 빠르게 화면 제작 |
| 패널 | |||||||
|---|---|---|---|---|---|---|---|
|
| 상태 | ||||
|---|---|---|---|---|
|
15가지 표준 템플릿 갤러리에서 화면 목적에 맞는 구조를 선택하여 시작하세요.
| borderColor | #93c5fd |
|---|---|
| bgColor | #eff6ff |
| borderStyle | solid |
🎨 업무별 추천 템플릿
📊 전사/경영
- 종합 상황판형 (L01)
- 성과 리더보드 (L15)
- 경영 시뮬레이션 (L14)
🧮 재무/회계
- 결산 리포트형 (L05)
- 피벗 분석형 (L09)
- 그리드 대량 입력 (L12)
🚚 영업/물류
- 상품 카탈로그 (L10)
- 지리 정보 분석 (L06)
- 공정 흐름도 (L07)
| borderColor | #bfdbfe |
|---|---|
| bgColor | #ffffff |
| borderStyle | solid |
| 상태 | ||||
|---|---|---|---|---|
|
먼저 데이터를 바인딩할 대상 컴포넌트를 선택한 후, 데이터 연결 방식(SQL/META/Grid)을 결정하세요.
1️⃣ Select Component
| title | 🗂️ ListGrid - 목록형 그리드 |
|---|
| 패널 | ||||||
|---|---|---|---|---|---|---|
| ||||||
🗄️ SQLSQL 쿼리를 직접 작성하여 데이터를 연결합니다. |
| 패널 | ||||||
|---|---|---|---|---|---|---|
| ||||||
🤖 METAGUI 환경에서 마우스 클릭으로 데이터를 연결합니다. |
| title | 📊 OlapGrid - 피벗 그리드 |
|---|
| 패널 | ||||||
|---|---|---|---|---|---|---|
| ||||||
🗄️ SQLSQL 쿼리를 직접 작성하여 데이터를 연결합니다. |
| 패널 | ||||||
|---|---|---|---|---|---|---|
| ||||||
🤖 METAGUI 환경에서 마우스 클릭으로 데이터를 연결합니다. |
| title | 📈 Chart - 차트/그래프 |
|---|
| 패널 | ||||||
|---|---|---|---|---|---|---|
| ||||||
🗄️ SQLSQL 쿼리를 직접 작성하여 데이터를 연결합니다. |
| 패널 | ||||||
|---|---|---|---|---|---|---|
| ||||||
🤖 METAGUI 환경에서 마우스 클릭으로 데이터를 연결합니다. |
| 패널 | ||||||
|---|---|---|---|---|---|---|
| ||||||
🔗 Grid화면에 있는 Grid의 데이터를 연결하여 시각화합니다. |
| title | 📋 ComboBox - 드롭다운 목록 |
|---|
| 패널 | ||||||
|---|---|---|---|---|---|---|
| ||||||
🗄️ SQLSQL 쿼리를 직접 작성하여 데이터를 연결합니다. |
| 정보 | ||||
|---|---|---|---|---|
| ||||
데이터 연결 시 사용자 조회 조건(날짜, 부서 등)을 처리하는 방법을 확인하세요. |
| borderColor | #bfdbfe |
|---|---|
| bgColor | #ffffff |
| borderStyle | solid |
| 상태 | ||||
|---|---|---|---|---|
|
화면 디자인 적용
기업의 브랜드 아이덴티티를 반영하여 최종 결과물을 완성합니다.
기본 제공 폰트 외에 추가 폰트를 등록하여 사용할 수 있습니다.
템플릿에 적용된 박스스타일을 변경할 수 있으며, 신규로 등록해 사용할 수 있습니다.
서버에 업로드 된 이미지를 여러 보고서에서 사용할 수 있습니다.
완성된 화면 배포
개발이 완료된 화면을 다른 사용자가 조회할 수 있도록 저장할 위치를 지정하고, 사용자 그룹별 조회 권한을 부여하세요.
컴포넌트 데이터 연결 (Binding)
주로 사용하는 컴포넌트 별 데이터 연결 방법을 안내합니다.
Grid
Chart
ComboBox
인터랙션 구현 (Interaction)
버튼 클릭, 팝업 호출 등 동적인 동작을 정의합니다.
| borderColor | #c084fc |
|---|---|
| bgColor | #faf5ff |
| borderStyle | solid |
코딩 없이
클릭 만으로 이벤트 로직을 설정합니다. (No-Code)
JavaScrpit를 활용해 고도화된 로직을 구현합니다.
| borderColor | #cbd5e1 |
|---|---|
| bgColor | #f8fafc |
| borderStyle | solid |
| 상태 | ||||
|---|---|---|---|---|
|
| borderColor | #e5e7eb |
|---|---|
| bgColor | #ffffff |
| borderStyle | solid |
화면 디자인 적용
기업의 브랜드 아이덴티티를 반영하여 최종 결과물을 완성합니다.
| borderColor | #c7d2fe |
|---|---|
| bgColor | #eef2ff |
| borderStyle | solid |
🎨 UI/UX 디자인 시스템
표준 컬러 팔레트, 폰트 스타일, 컴포넌트 규격을 확인하고 적용하세요.
→ 디자인 가이드 보기 (준비 중)
| borderColor | #e5e7eb |
|---|---|
| bgColor | #ffffff |
| borderStyle | solid |
| 상태 | ||||
|---|---|---|---|---|
|
폰트 추가
기본 제공 폰트 외에 추가 폰트를 등록하여 사용할 수 있습니다.
템플릿에 적용된 박스스타일을 변경할 수 있으며, 신규로 등록해 사용할 수 있습니다.
서버에 업로드 된 이미지를 여러 보고서에서 사용할 수 있습니다.
완성된 화면 배포
개발이 완료된 화면을 다른 사용자가 조회할 수 있도록
| borderColor | #c7d2fe |
|---|---|
| bgColor | #eef2ff |
| borderStyle | solid |
🚀 포털 메뉴 등록 및 배포
저장할 위치를 지정하고, 사용자 그룹별 조회 권한을
| 패널 | ||||||
|---|---|---|---|---|---|---|
| ||||||
Copyright © 2024 AUD Platform Partner Center. |
부여하세요. |