드래그 앤 드롭 빌더가 아니라, 설명에서 나오는 대시보드
무엇을 보여줄지, 어떤 느낌이어야 할지 에이전트에게 말하세요. Open Design이 차트 패턴, 레이아웃 시스템, 비주얼 언어를 제공하므로 기본 스타일 위젯의 벽이 아니라 일관되고 보여줄 만한 대시보드를 얻습니다.
한 줄로 말하면
Open Design은 지표를 평범한 언어로 적은 명세를, 에이전트가 HTML로 렌더링하는 스타일이 잡힌 대시보드로 바꿉니다 — 리포지토리에서 버전 관리되고, 어디에나 호스팅 가능하며, 좌석당 BI 구독이 없습니다.
Open Design에서 대시보드가 작동하는 방식
- 01
지표를 설명한다
중요한 것을 나열합니다 — "주간 활성 사용자, 요금제별 매출, 이탈률, 30일 추세"처럼. 에이전트가 대시보드 기술을 불러와 한 덩어리의 텍스트가 아니라 KPI 카드, 차트, 테이블을 배치해야 한다는 것을 압니다.
- 02
차트 패턴을 고른다
Open Design은 차트와 레이아웃 템플릿을 제공하므로 추세는 선 차트로, 분해는 막대로, 비율은 알맞은 비주얼로 바뀝니다 — 어긋나는 기본값 대신 일관된 타이포그래피와 여백이 전체를 관통합니다.
- 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 내보내기 지원.
Open Design 대시보드 vs 기존 방식
| 필요한 것 | Open Design이라면 | BI 도구 / 직접 코딩 |
|---|---|---|
| 지표 목록에서 레이아웃으로 | ●프롬프트 하나로 에이전트가 카드, 차트, 테이블을 배치 | 위젯을 하나씩 드래그하거나 차트 코드를 처음부터 작성 |
| 일관된 비주얼 시스템 | ●재사용 가능한 디자인 시스템에서 나온 차트 패턴과 여백 | 기본 위젯 스타일이거나 차트마다 손으로 스타일링 |
| 데이터 연결 | ●CSV / JSON / 붙여넣은 행을 실시간 HTML로 렌더링 | 벤더 커넥터나 맞춤형 데이터 배관 |
| 호스팅과 공유 | ●어떤 정적 호스트에서도 동작하는 자체 완결형 HTML, 계정 불필요 | 보는 사람에게 BI 벤더의 좌석이 필요 |
| 검토와 버전 관리 | ●리포지토리에 있어 코드처럼 diff 가능 | 벤더 안에 갇혀 진짜 diff가 안 됨 |
| 비용과 종속 | ●오픈소스, 자신의 키를 가져와 로컬에서 실행 | 좌석당 구독, 벤더 호스팅 |
프롬프트와 데이터 소스로 렌더링된 진짜 대시보드. 자신에게 가까운 것에서 시작해 추적하는 지표를 설명하세요.
대시보드 FAQ
-
01 Tableau나 Looker 같은 BI 도구가 필요한가요?
아니요. Open Design은 코딩 에이전트 안에서 대시보드를 HTML로 렌더링합니다. 지표를 설명하고 데이터로 향하게 하기만 하면 되고, 라이선스를 사거나 배워야 할 별도 BI 플랫폼이 없습니다.
-
02 데이터는 어디서 오나요?
CSV, JSON 엔드포인트, 또는 붙여넣은 행에서. 대시보드는 평범한 HTML과 JavaScript이므로 어디서 읽어올지를 정확히 직접 제어합니다 — 호스팅된 서비스를 거치는 것은 없습니다.
-
03 비기술 동료도 볼 수 있나요?
네. 출력은 자체 완결형 웹 페이지입니다. 링크나 파일이 있는 누구나 브라우저에서 열 수 있습니다 — 계정도, 좌석도 필요 없습니다.
-
04 어떤 에이전트를 쓸 수 있나요?
Claude Code, Codex, Cursor Agent, Gemini CLI 및 12종 이상의 퍼스트파티 어댑터. 자신의 프로바이더 키를 가져옵니다.
오늘 밤 당신의 대시보드를 만드세요
리포지토리에 스타를 누르고 Open Design을 설치한 뒤, 당신의 지표를, 이미 사용 중인 에이전트 안에서 어디에나 호스팅할 수 있는 대시보드로 바꿔 보세요.