Image Added
템플릿 유형 선택 (Select Template)
아래 탭에서 원하는 양식을 선택하세요. 유형에 따라 프로세스가 달라집니다....
...
...
AUD 표준 개발 프로세스 가이드
...
(엑셀 템플릿) - 추천 : 정형 리포트, 데이터 입력/수정, 경영계획
- 장점 : 엑셀 수식/서식 활용, 빠른 개발 속도
|
|
|
|
...
...
...
화면 제작 방식 선택 (Select Mode)어떤 방법으로 화면을 만드시겠습니까? 원하시는 방식을 선택해주세요.
| AUD보고서 템플릿 (Web Component) - 추천 : 임원용 대시보드, 시각화, 모바일 호환
- 장점 : 자유로운 디자인, 화려한 차트 구현
|
|
|
|
▼ 원하는 유형의 탭을 클릭해 프로세스를 확인하세요 ▼
| AUI Tab Group |
|---|
📊 엑셀 활용 (MX-Grid)#10b981#f0fdf43solidGreenUnique 📊 (엑셀 활용 (MX-Grid)사용하던 엑셀 파일(.xlsx)을 업로드하여 즉시 웹 화면으로 변환하고 데이터를 매핑합니다. #d1fae5#ffffffsolidGreen02 )
기존에 사용하던 엑셀 다운로드 받은 엑셀 템플릿에 데이터를 연결하거나, 기존 양식(.xlsx) 을 셀 스타일과 수식이 웹으로 자동 변환됩니다.#86efac#f0fdf4solid📥 주제별 엑셀 샘플 양식 |
📄 재무/회계 손익계산서 | 📄 영업/매출 견적서 | 📄 인사/총무 휴가신청서 | 📄 생산/재고 작업일보 |
#d1fae5#ffffffsolidGreen03 작성한 서식과 수식 그대로 엑셀 파일이 웹 화면으로 변환됩니다.
엑셀의 데이터 구조와 기능을 웹 환경에서 그대로 구현할 수 있도록 지원하는 AUD플랫폼의 웹 컴포넌트 도구가 "MX-Grid" 입니다.
엑셀 데이터 시트(Data Sheet)에 데이터를 매핑하여 MX-Grid의 'D시트'에 DB 데이터를 연결해 출력합니다. 원하는 데이터 연결 방식을 선택하세요.
#93c5fd#eff6ff🗄️ Dataset Manager (SQL쿼리 작성)
Dataset Manager에서 SQL 쿼리를 직접 작성하여 데이터를
연결합니다→ 가이드 보기
#86efac#f0fdf4🤖 No-Code GUI 환경에서 데이터를 연결합니다.
→ 가이드 보기
true💡 잠깐! 변수(Parameter) 처리가 필요하신가요?데이터 연결 시 사용자 조회 조건(날짜, 부서 등)을 처리하는 방법을 확인하세요.
→ 사용법 보기
true❓ DB가 준비되지 않았나요?엑셀/CSV 파일을 직접 업로드하여 데이터를 연결할 수 있습니다.
→ 파일 업로드 가이드 (준비 중)
#d1fae5#ffffffsolidGreen04 (META 활용)
복잡한 SQL 쿼리 없이 META를 활용해 데이터를 조회합니다.
인터랙션 구현 (Interaction)
버튼 클릭, 팝업 호출 등 동적인 동작을 정의합니다.
코딩 없이 설정하거나 스크립트로 상세 제어할 수 있습니다.#c084fc#faf5ff🤖 클릭만으로 클릭 만으로 이벤트 로직을 설정합니다. (No-Code)
→ 가이드 보기
#fb923c#fff7ed💻 JavaScript를 JavaScrpit를 활용해 고도화된 로직을 구현합니다.
(Pro-Code)→ 가이드 보기
#cbd5e1#f8fafcsolid🔄 생명주기 생명 주기 (Event Lifecycle)
보고서 실행 및 조회 시 발생하는 이벤트의 순서를 확인하세요. → 상세 보기
🎨 템플릿 활용#3b82f6#eff6ff3solidBlueStandard
🎨
템플릿 활용
AUD의 시각화 컴포넌트(Chart, Grid)가 미리 구성된 템플릿을 활용하여 빠르게 화면을 제작합니다.
#bfdbfe#ffffffsolidBlue02 템플릿 선정 및 레이아웃 (Layout)
15가지 표준 템플릿 갤러리에서 화면 목적에 맞는 구조를 선택하여 시작하세요.
#93c5fd#eff6ffsolid🎨 업무별 추천 템플릿
📊 전사/경영 - 종합 상황판형 (L01)
- 성과 리더보드 (L15)
- 경영 시뮬레이션 (L14)
| 🧮 재무/회계 - 결산 리포트형 (L05)
- 피벗 분석형 (L09)
- 그리드 대량 입력 (L12)
| 🚚 영업/물류 - 상품 카탈로그 (L10)
- 지리 정보 분석 (L06)
- 공정 흐름도 (L07)
|
→ 전체 템플릿 갤러리 보기
#bfdbfe#ffffffsolidBlue03 화면 디자인 적용
기업의 브랜드 아이덴티티를 반영하여 최종 결과물을 완성합니다.
#adbbc8solid 폰트 추가
기본 제공 폰트 외에 추가 폰트를 등록하여 사용할 수 있습니다.
#adbbc8solid 박스스타일 변경
템플릿에 적용된 박스스타일을 변경할 수 있으며, 신규로 등록해 사용할 수 있습니다.
#adbbc8solid 이미지 변경
서버에 업로드 된 이미지를 여러 보고서에서 사용할 수 있습니다.
완성된 화면 배포
개발이 완료된 화면을 다른 사용자가 조회할 수 있도록 저장할 위치를 지정하고, 사용자 그룹별 조회 권한을 부여하세요.
AUD 보고서
먼저 데이터를 바인딩할 대상 컴포넌트를 선택한 후, 데이터 연결 방식(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#ffffffsolidBlue04 주로 사용하는 컴포넌트 별 데이터 연결 방법을 안내합니다.
#adbbc8#FCFCFCsolidGrid
#adbbc8#FFFFFFsolid SQL
#adbbc8#FFFFFFsolid META
#adbbc8#FCFCFCsolidChart
#adbbc8#FFFFFFsolid SQL
#adbbc8#FFFFFFsolid Grid
#adbbc8#FFFFFFsolid META
#adbbc8#FCFCFCsolidComboBox
#adbbc8#FFFFFFsolid SQL
인터랙션 구현 (Interaction)
버튼 클릭, 팝업 호출 등 동적인 동작을 정의합니다.
코딩 없이 설정하거나 스크립트로 상세 제어할 수 있습니다.#c084fc#faf5ff🤖 클릭만으로 클릭 만으로 이벤트 로직을 설정합니다. (No-Code)
→ 가이드 보기
#fb923c#fff7ed💻 JavaScript를 JavaScrpit를 활용해 고도화된 로직을 구현합니다.
(Pro-Code)🔄 → 가이드 보기
#cbd5e1#f8fafcsolid 생명주기 생명 주기 (Event Lifecycle)
보고서 실행 및 조회 시 발생하는 이벤트의 순서를 확인하세요.
→ 상세 화면 디자인 및 테스트기업의 브랜드 아이덴티티(CI/BI)를 | 패널 |
|---|
| borderColor | #e5e7eb |
|---|
| bgColor | #ffffff |
|---|
| borderStyle | solid |
|---|
|
화면 디자인 적용기업의 브랜드 아이덴티티를 반영하여 최종 결과물을 완성합니다. panel |
| borderColor | #c7d2fe |
|---|
| bgColor | #eef2ff |
|---|
| borderStyle | solid |
|---|
|
🎨 UI/UX 디자인 시스템표준 컬러 팔레트, 폰트 스타일, 컴포넌트 규격을 확인하고 적용하세요. → 디자인 가이드 보기 (준비 중) |
| 패널 |
|---|
| borderColor | #e5e7eb |
|---|
| bgColor | #ffffff |
|---|
| borderStyle | solid |
|---|
|
완성된 화면 배포하기폰트 추가 기본 제공 폰트 외에 추가 폰트를 등록하여 사용할 수 있습니다.
#adbbc8solid 박스스타일 변경 템플릿에 적용된 박스스타일을 변경할 수 있으며, 신규로 등록해 사용할 수 있습니다.
#adbbc8solid 이미지 변경 서버에 업로드 된 이미지를 여러 보고서에서 사용할 수 있습니다.
완성된 화면 배포개발이 완료된 화면을 다른 사용자가 조회할 수 있도록 포털 메뉴에 등록합니다.| 패널 |
|---|
|
| borderColor | #c7d2fe |
|---|
| bgColor | #eef2ff |
|---|
| borderStyle | solid |
|---|
|
🚀 포털 메뉴 등록 및 배포
저장할 위치를 지정하고, 사용자 그룹별 조회 권한을
부여하여 배포하세요.→ 배포 가이드 보기
| 패널 |
|---|
| borderColor | #1f2937 |
|---|
| bgColor | #1f2937 |
|---|
| borderStyle | solid |
|---|
|
Copyright © 2024 AUD Platform Partner Center. |