드래그 앤 드롭 빌더가 아니라, 설명에서 나오는 대시보드
무엇을 보여줄지, 어떤 느낌이어야 할지 에이전트에게 말하세요. OpenDesign이 차트 패턴, 레이아웃 시스템, 비주얼 언어를 제공하므로 기본 스타일 위젯의 벽이 아니라 일관되고 보여줄 만한 대시보드를 얻습니다.
한 줄로 말하면
OpenDesign은 지표를 평범한 언어로 적은 명세를, 에이전트가 HTML로 렌더링하는 스타일이 잡힌 대시보드로 바꿉니다 — 리포지토리에서 버전 관리되고, 어디에나 호스팅 가능하며, 좌석당 BI 구독이 없습니다.
OpenDesign에서 대시보드가 작동하는 방식
- 01
지표를 설명한다
중요한 것을 나열합니다 — "주간 활성 사용자, 요금제별 매출, 이탈률, 30일 추세"처럼. 에이전트가 대시보드 기술을 불러와 한 덩어리의 텍스트가 아니라 KPI 카드, 차트, 테이블을 배치해야 한다는 것을 압니다.
- 02
차트 패턴을 고른다
OpenDesign은 차트와 레이아웃 템플릿을 제공하므로 추세는 선 차트로, 분해는 막대로, 비율은 알맞은 비주얼로 바뀝니다 — 어긋나는 기본값 대신 일관된 타이포그래피와 여백이 전체를 관통합니다.
- 03
데이터를 연결한다
대시보드를 CSV나 JSON 엔드포인트로 향하게 하거나 샘플 행을 붙여넣습니다. 데이터가 바뀌면 갱신되는 자체 완결형 HTML로 렌더링되어 어떤 브라우저에서도 열리고 어떤 정적 호스트에도 올릴 수 있습니다.
- 04
다듬고 출시한다
에이전트와 대화하며 조정합니다 — "매출을 지역별로 묶고 KPI 행을 맨 위로 옮겨"처럼. 산출물이 프로젝트 안에 있으므로 대시보드는 다른 코드처럼 검토되고 버전 관리됩니다.
만들 수 있는 것
대시보드
단일 HTML 파일 관리/분석 대시보드. 고정 좌측 사이드바, 사용자/검색 기능이 있는 상단바, KPI 카드 그리드 및 차트로 구성. '대시보드', '관리자', '분석' 또는 '제어판' 화면이 필요할 때 사용.
GitHub 대시보드
GitHub 저장소 분석 대시보드 — 스타, 포크, 기여자, 이슈, 풀 리퀘스트, 최근 활동 및 주요 기여자. GitHub 저장소 대시보드, 오픈소스 성장 보고서, 저장소 상태 페이지 또는 GitHub 분석 뷰에 사용.
데이터 시각화 보고서
CSV, Excel 또는 JSON 데이터를 세련된 시각적 보고서 페이지로 변환합니다.
재무 보고서
분기/월간 재무 보고서 — KPI가 포함된 헤더, 수익 및 소진 차트, P&L 요약 테이블, 주요 하이라이트 및 전망 단락 포함. '재무 보고서', 'Q3 보고서', 'MRR 검토', 'P&L', '재보' 등의 요구사항에 사용하세요.
프로토타입 전체 프롬프트 보기 → 최근 30일
최근 30일간의 커뮤니티 및 소셜 트렌드 조사. 현재 여론, 최근 감정, 커뮤니티 반응, 소셜 증명, 출시 반응, 트렌드 스캔 또는 최근 30일 맥락에 대한 질문에 사용합니다.
Flowai 라이브 대시보드 템플릿
FlowAI 스타일의 팀 관리 대시보드. 3개 탭(팀 멤버, 팀 상세정보, 활동 로그), KPI 통계 행, 멤버 테이블, 역할 분포 막대 차트, 온라인 현황 및 활동 스파크라인, 상위 기여자 패널 포함. 라이트/다크 테마, 차트 툴팁, 클릭 확대, CSV 내보내기 지원.
OpenDesign 대시보드 vs 기존 방식
| 필요한 것 | OpenDesign이라면 | BI 도구 / 직접 코딩 |
|---|---|---|
| 지표 목록에서 레이아웃으로 | 프롬프트 하나로 에이전트가 카드, 차트, 테이블을 배치 | 위젯을 하나씩 드래그하거나 차트 코드를 처음부터 작성 |
| 일관된 비주얼 시스템 | 재사용 가능한 디자인 시스템에서 나온 차트 패턴과 여백 | 기본 위젯 스타일이거나 차트마다 손으로 스타일링 |
| 데이터 연결 | CSV / JSON / 붙여넣은 행을 실시간 HTML로 렌더링 | 벤더 커넥터나 맞춤형 데이터 배관 |
| 호스팅과 공유 | 어떤 정적 호스트에서도 동작하는 자체 완결형 HTML, 계정 불필요 | 보는 사람에게 BI 벤더의 좌석이 필요 |
| 검토와 버전 관리 | 리포지토리에 있어 코드처럼 diff 가능 | 벤더 안에 갇혀 진짜 diff가 안 됨 |
| 비용과 종속 | 오픈소스, 자신의 키를 가져와 로컬에서 실행 | 좌석당 구독, 벤더 호스팅 |
프롬프트와 데이터 소스로 렌더링된 진짜 대시보드. 자신에게 가까운 것에서 시작해 추적하는 지표를 설명하세요.
대시보드 FAQ
-
01 Tableau나 Looker 같은 BI 도구가 필요한가요?
아니요. OpenDesign은 코딩 에이전트 안에서 대시보드를 HTML로 렌더링합니다. 지표를 설명하고 데이터로 향하게 하기만 하면 되고, 라이선스를 사거나 배워야 할 별도 BI 플랫폼이 없습니다.
-
02 데이터는 어디서 오나요?
CSV, JSON 엔드포인트, 또는 붙여넣은 행에서. 대시보드는 평범한 HTML과 JavaScript이므로 어디서 읽어올지를 정확히 직접 제어합니다 — 호스팅된 서비스를 거치는 것은 없습니다.
-
03 비기술 동료도 볼 수 있나요?
네. 출력은 자체 완결형 웹 페이지입니다. 링크나 파일이 있는 누구나 브라우저에서 열 수 있습니다 — 계정도, 좌석도 필요 없습니다.
-
04 어떤 에이전트를 쓸 수 있나요?
Claude Code, Codex, Cursor Agent, Gemini CLI 및 12종 이상의 퍼스트파티 어댑터. 자신의 프로바이더 키를 가져옵니다.
오늘 밤 당신의 대시보드를 만드세요
리포지토리에 스타를 누르고 OpenDesign을 설치한 뒤, 당신의 지표를, 이미 사용 중인 에이전트 안에서 어디에나 호스팅할 수 있는 대시보드로 바꿔 보세요.