AI로 대시보드, 관리 콘솔, 데스크톱 워크스페이스 디자인하기
AI 모델에 대시보드를 요청하면 거의 반사적으로 상단에 KPI 카드 네 개를 놓고 중간에 스플라인 차트, 하단에 일반적인 표를 그립니다. 장애 콘솔, 결제 원장, 실험실 샘플 관리자, 동영상 편집기 같은 실제 운영 도구는 사람들이 하루 종일 조작하는 주요 객체를 중심으로 구성됩니다. 무엇을 선택하고 어떻게 이상을 발견하며 다음에 어떤 행동을 하는지가 핵심입니다.
핵심 요점
- 장식용 KPI 요약 카드 대신 주요 도메인 객체(서비스 토폴로지, 인보이스 원장, 9×9 냉동 상자 그리드, 타임라인)을 화면의 중심에 두세요.
- 모든 데이터를 테두리 상자에 넣는 대신 열 정렬, 테이블 숫자, 간격으로 밀도 높은 화면을 차분하게 유지하세요.
- 행동에 무게가 느껴지도록 컨트롤을 연결하세요. 시간 창을 조정하면 로그와 트레이스가 정렬되고 실패한 행을 선택하면 복구 작업이 열리는 식입니다.
- Oil UI Pro에는 전체 페이지 연속성 검사가 포함된 10가지 전문 워크스페이스 원형(목록-상세, 캔버스-인스펙터, 타임라인, 노드 그래프 등)이 있습니다.
npx skills add oil-oil/oil-ui/ko/inspiration/desktop-app-design/에서 작동하는 콘솔과 데스크톱 도구를 살펴 보세요.
일반적인 차트 그리드에서 객체 중심 워크스페이스로
Oil UI 갤러리의 데스크톱 작품은 일반적인 카드 네 장 분석 템플릿에 의존하지 않습니다. 직업마다 작업하는 객체가 다르기 때문입니다.
Nightwatch(ops)의 워크스페이스는 실시간 서비스 토폴로지와 드래그 가능한 장애 시간 창을 중심으로 돌아가며 지연 시간 차트, 배포 마커, 오류 트레이스를 정렬합니다. Vesper의 핵심 객체는 고객 인보이스 수명 주기로, 임계값 필터와 웹훅 검사 및 결제 재시도를 위한 예외 드로어를 연결합니다. GridStore(lims)에서는 연구자가 시각적인 9×9 냉동고 상자 랙에서 직접 생물학적 표본을 찾고 옮기며 감사합니다.
| 갤러리 작품 | 도메인 | 주요 워크스페이스 객체 | 연결된 상태 및 작업 |
|---|---|---|---|
| Nightwatch (ops) | 장애 대응 및 대기 | 서비스 토폴로지 + 동기화된 시간 조정기 | 정상 개요, 진행 중인 장애 경로 강조, 로그 피크 조사, 릴리스 원인 분석 |
| Vesper (vesper) | API 사용량 결제 콘솔 | 고객 인보이스 표 + 이벤트 타임라인 드로어 | 임계값 필터링, 재시도/할당량 작업이 있는 실패 인보이스 분석, 명령 팔레트 |
| Runrate (revenue) | SaaS 수익 및 유지 | MRR 변동 원장(신규, 확장, 이탈) + 코호트 매트릭스 | NRR 분석 및 계정 드릴다운과 연결된 시간 단위 전환 |
| GridStore (lims) | 실험실 샘플 관리 | 냉동고 계층 + 9×9 cryobox 웰 그리드 | 웰 직접 선택, 관리 사슬 드로어, 일괄 이동, 온도 경고 상태 |
밀도 높은 인터페이스를 차분하게 유지하는 네 가지 규칙
엔터프라이즈 및 개발자 도구는 1440×900 뷰포트에 수십 개의 데이터를 담습니다. 모든 배지가 빛나고 모든 셀에 두꺼운 테두리가 있으면 운영자는 금세 지칩니다. Oil UI는 밀도 높은 화면에 네 가지 요소 제거 습관을 적용합니다.
- 세로 격자선 대신 정렬과 테이블 숫자 사용
- 숫자 열은 tabular-nums로 오른쪽 정렬하고 텍스트 식별자는 왼쪽 정렬하며 불필요한 세로 테두리를 없애면 눈이 행을 쉽게 훑을 수 있습니다.
- 채도 높은 색상은 조치가 필요한 예외에만 사용
- “정상” 행 쉰 개가 모두 밝은 녹색 pill을 달고 있으면 결제 실패나 서비스 저하가 묻힙니다. 정상 상태는 조용하게 유지하고 개입이 필요한 항목에만 황색이나 빨간색을 사용하세요.
- 보조 페이로드는 인스펙터 드로어로 이동
- 주요 목록은 분류에 필요한 5~6개 열에 집중하세요. 행을 클릭하면 전체 웹훅 페이로드, 감사 추적, 트레이스 워터폴이 측면 패널에 열리게 하세요.
- 상단 표시줄부터 모달까지 시각적 완성도 유지
- AI 초안은 상단 머리글을 다듬고 아래의 표, 빈 상태, 대화 상자를 소홀히 하는 경우가 많습니다. 모든 레이어에서 타이포그래피, 테두리 두께, 간격을 일관되게 유지하세요.
대시보드 및 데스크톱 도구 프롬프트 템플릿
코딩 Agent에 어떤 객체가 화면 중앙을 차지하고 어떤 세 가지 운영 상태를 확인할 수 있어야 하는지 알려 주세요.
Oil UI를 사용해 [도구 이름, 예: 실험실 샘플 관리 콘솔 / 물류 배차 워크스페이스]를 1440×900 데스크톱 뷰포트에서 디자인하고 구현해 줘.
- 주요 워크스페이스 객체: [일반적인 KPI 카드 4개 대시보드는 만들지 마. 워크스페이스 중심을 9×9 샘플 그리드 / 예외 운송 표 / 토폴로지 맵에 바로 배치해 줘].
- 레이아웃 및 밀도: [왼쪽 네비게이션 레일 + 중앙 워크스페이스 + 오른쪽 인스펙터 드로어] 구조를 사용해 줘. 모든 숫자는 tabular-nums로 표시하고 채도 높은 강조색은 경고와 활성 선택에만 사용해 줘.
- 전달할 상태: 1) 일상적인 분류와 실시간 필터링, 2) 복구 작업이 있는 선택 예외 검사, 3) 일괄 작업 또는 빠른 명령 팔레트를 구현해 줘. 세 가지 상태를 모두 1440×900 브라우저 스크린샷으로 캡처해 줘.일반적인 KPI 헤더 4개를 명시적으로 배제하면 Agent가 바로 실제 워크스페이스로 향하게 할 수 있습니다.
작동하는 갤러리 사례와 프롬프트
1440px 또는 390px의 실제 데모를 열어 모델과 프롬프트가 최종 인터페이스를 어떻게 형성했는지 살펴 보세요.
Nightwatch
운영 모니터링 및 장애 대응
중규모 플랫폼 팀을 위한 모니터링 및 온콜 도구를 1440×900 영어 인터페이스로 만드세요. 서비스 토폴로지, 지연 시간, 오류율 및 트래픽 차트, 최근 배포, 로그, 트레이스를 제공하고 장애 중에는 알림, 현재 온콜 담당자, 장애 타임라인을 표시하세요. 장애가 전개되는 과정이 핵심입니다. 장애가 발생한 서비스와 영향을 받는 다운스트림 서비스가 토폴로지에서 분명히 보여야 합니다. 시간 범위를 드래그하면 차트, 배포 마커, 로그가 정렬되어 어떤 배포가 문제를 일으켰는지 확인할 수 있어야 합니다. 정상 개요, 알림과 토폴로지의 영향 경로 강조가 있는 장애 진행 상태, 오류 피크에서 로그와 트레이스를 열어 원인 배포를 찾는 상태의 세 가지 화면을 디자인하세요.
작품과 프롬프트 살펴 보기 →
Vesper
API 사용량 과금 콘솔
AI 및 개발자 도구 팀을 위한 API 사용량 과금 및 고객 인보이스 콘솔을 1440×900 데스크톱 뷰포트의 영어 인터페이스로 디자인하세요. 사용자는 구독 플랜과 실시간 API 사용량을 관리하고 이번 주기의 청구 금액과 인보이스 예외를 검토하며 상태와 사용량 임계값으로 고객이나 인보이스를 필터링하고 레코드를 열어 세부 항목, 결제 및 Webhook 타임라인, 이벤트 페이로드를 확인할 수 있어야 합니다. 결제 재시도, 할당량 조정, 인보이스 다운로드를 포함하세요. 일상 작업 공간(수익 및 사용량 추세, 고객 또는 인보이스 목록, 실시간 필터링), 예외 인보이스 상세(사용량 분해, 상태 타임라인, 복구 동작), 빠른 명령 팔레트의 세 가지 핵심 상태를 구현하세요. 오프라인에서 실행 가능한 `index.html`을 전달하고 1440×900, DPR=2로 `shots/desktop.png`, `shots/state-1.png`, `shots/state-2.png`를 캡처하세요.
작품과 프롬프트 살펴 보기 →
Runrate
SaaS 매출 대시보드
독립 개발자와 소규모 팀이 구독 매출을 살피는 데스크톱 앱을 만드세요(1440×900). MRR, 신규, 확장, 축소, 이탈, 순매출 유지율과 월별 추세를 제공합니다. 월을 열어 어떤 고객이 변화를 이끌었는지 보고 고객을 열어 구독 이력을 확인할 수 있어야 합니다. 홈 화면은 지표 카드를 쌓기보다 “이번 달 돈이 어떻게 변했는가”에 먼저 답해야 합니다. 개요, 월을 펼쳐 변화를 보는 상태, 개별 고객 상세를 디자인하세요.
작품과 프롬프트 살펴 보기 →
GridStore
실험실 샘플 관리 시스템
생물의학 실험실을 위한 샘플 관리 시스템을 만드세요. 샘플 입고, 냉동고 보관 위치, 검사 워크플로, 감사 기록을 다루는 메인 인터페이스를 구현하세요.
작품과 프롬프트 살펴 보기 →Oil UI Pro: 10가지 워크스페이스 원형과 전체 페이지 연속성 검사
Oil UI Pro는 장애 콘솔, 결제 원장, 다중 패널 편집기, 타임라인, 노드 그래프를 포괄하는 10가지 전문 대시보드 및 도구 레이아웃을 Agent에 제공하며 표, 드로어, 팝오버 전반의 시각적 연속성을 강제로 검사합니다.
npx github:oil-oil/oil-cli install oil-ui-pro자주 묻는 질문
Agent가 모든 관리 페이지 상단에 커다란 KPI 카드 네 개를 놓지 않게 하려면 어떻게 해야 하나요?
주요 뷰포트가 필터링 가능한 표, 캔버스, 일정 같은 작업 객체로 바로 열리도록 프롬프트에 지정하세요. 요약 지표는 목록 위의 작은 인라인 상태 표시줄에 두어야 합니다.
데스크톱 도구에서 고정된 1440×900 뷰포트와 전체 페이지 스크롤 중 언제 무엇을 사용해야 하나요?
Cut(동영상 편집기), Loom(화이트보드), Sonar(메시징), Nightwatch(장애 콘솔)처럼 지속적인 사이드바, 타임라인, 캔버스가 있는 도구는 독립적인 패널 스크롤을 갖춘 고정 뷰포트 워크스페이스가 적합합니다. 편집형 보고서는 자연스럽게 스크롤할 수 있습니다.
가로 잘림 없이 콘솔에 데이터 필드 15개 이상을 배치하려면 어떻게 해야 하나요?
필드를 분류용 열(주 표에 5~6개)과 검사용 필드(원시 JSON 페이로드, 전체 타임라인, 보조 메타데이터는 슬라이드오버 상세 패널)로 나누세요.
Oil UI 갤러리에서 데스크톱 작품의 여러 상태를 테스트할 수 있나요?
네. Nightwatch, Vesper, Sonar 같은 작품을 열어 필터와 스레드를 직접 클릭하거나 뷰어 표시줄의 상태 전환 버튼으로 미리 설정된 상태 사이를 이동할 수 있습니다.