I Rebuilt This Dashboard From a Screenshot using Hope AI. Here's the Live App and Everything It Took.
스크린샷 한 장으로 대시보드를 재구축했다 — Hope AI로 만든 라이브 앱과 그 과정 전부
저자가 스크린샷 한 장과 "첨부된 디자인에 따라 대시보드를 만들어 달라"는 한 줄 프롬프트만으로 React 대시보드를 배포까지 완성한 과정을 공개합니다. 차트 라이브러리 없이 CSS로 구현된 그래프, 컴포넌트 단위 구조 등 결과물의 수준을 보여주면서도, mock 데이터·동작하지 않는 내비게이션 등 한계를 솔직하게 짚으며 "한 번의 프롬프트는 프로토타입까지"라는 논지를 분명히 합니다.
- 주제
본문
AI 코드 생성 도구에 대한 과장된 주장이 넘쳐나는 가운데, 이 글은 실제로 무엇이 가능하고 무엇이 불가능한지를 실측한 사례 보고입니다. 저자는 Bit Cloud의 AI 도구인 Hope에게 디자인 스크린샷 한 장과 "Create a dashboard according to the attached design"이라는 한 줄만 입력해, 사이드바 내비게이션·KPI 카드 4개·차트 2개·검색과 행 선택이 되는 트랜잭션 테이블을 갖춘 React 앱을 받아냈습니다. 390px까지 대응하는 반응형이며 실제 프로덕션 URL로 배포된 상태입니다.
스크린샷이 곧 스펙이었다
흥미로운 지점은 입력에 색상 값, 간격 스케일, 컴포넌트 목록, 브레이크포인트 지시가 전혀 없었다는 것입니다. 팔레트, 타이포 위계, border radius, 매출 막대의 스트라이프 패턴, 매출 차트의 미러링된 파란 막대, 알약 형태의 상태 배지까지 전부 스크린샷이 담고 있었습니다. 저자는 "디자인이 곧 스펙이었다"고 표현하며, 빌드를 가능하게 한 모든 결정은 이미 대시보드를 그린 디자이너가 내려둔 것이라고 짚습니다.
결과물의 구조
돌아온 것은 900줄짜리 App.tsx 하나가 아니라 구조를 갖춘 컴포넌트들입니다. sidebar.tsx는 그룹화된 내비게이션, 활성 상태, BETA 배지, 1024px 이하에서의 오프캔버스 드로어를 담당하고, kpi-card.tsx는 데이터로 구동되는 카드 하나를 네 번 인스턴스화합니다. 차트가 특히 주목할 만한데, 저자가 "틀렸을 것이라 예상했는데 아니었다"고 밝힌 부분입니다. Recharts나 D3 없이 flexbox 컬럼과 퍼센트 높이로 그렸고, 스트라이프 막대는 repeating-linear-gradient, 매출 차트는 점선 중심축을 사이에 둔 두 개의 미러링 절반으로 구현됐습니다. 차트 라이브러리를 끌어오는 것보다 가볍고 레퍼런스와 일치한다는 평가입니다. theme.module.css에는 CSS 커스텀 프로퍼티 형태의 디자인 토큰이 들어 있고, 타입·mock 데이터·테스트·문서도 함께 생성됐습니다.
배포까지의 흐름
검증(타입, 린트, 테스트 4개) → 프리뷰 lane에 푸시 → change request 생성 → 머지 순으로 프로덕션 URL이 발급됐습니다. 이 용어가 낯선 이유는 작업 단위가 repo가 아니라 component와 scope인 Bit Cloud 위에서 진행됐기 때문입니다. 각 컴포넌트는 자체 API·테스트·문서와 함께 버저닝되고, 브랜치와 PR 대신 lane과 change request로 출시됩니다. Hope는 이 위에서 동작하는 AI이며, 그래서 결과물이 하나의 긴 파일이 아닌 구조화된 컴포넌트로 나왔다고 설명합니다.
정직한 한계 고백
글의 절반은 한계를 나열하는 데 씁니다. 데이터는 전부 하드코딩된 mock이고 백엔드·DB·API가 없습니다. 사이드바 항목 12개 중 실제로 이동하는 페이지는 하나뿐이며, "Products"를 눌러도 breadcrumb만 바뀝니다. 인증도 없어 "Welcome back, Najla"는 그저 문자열입니다. 날짜 선택기는 버튼일 뿐이고, Filter와 Export는 아무 동작도 하지 않으며, 페이지네이션은 8개 행 위에 페이지 번호 3개를 그려둔 것에 불과합니다. 저자는 이를 단점이 아니라 "프로토타입이라는 것이 원래 그런 것"이라고 정의하며, 가치는 "디자인이 존재함"에서 "클릭하고 공유할 수 있는 동작하는 것"까지의 구간을 한 단계로 압축한 데 있다고 말합니다. 실제 플랫폼으로 만들려면 라우팅 연결, DB 구축, 인증, 날짜 필터, Export 구현 등 각각의 작업이 필요하며 — 과거보다 작아졌지만 0은 아니라고 덧붙입니다. "한 번의 프롬프트로 배포된 프로토타입까지는 진짜다. 한 번의 프롬프트로 플랫폼까지는 아니다. 그렇게 말하는 사람은 뭔가를 팔고 있는 것"이라는 결론이 이 글의 핵심 논지입니다.
저자가 남긴 질문
저자는 자신이 이 디자인을 할 수 없으며 스크린샷은 다른 사람의 더 나은 작업이라고 인정합니다. 사라진 것은 디자인이 아니라 디자인과 브라우저에서 열 수 있는 버전 사이의 간극 — 핸드오프, 티켓, 엔지니어링 리소스를 기다리는 일주일 — 이라고 정리합니다. AI 생성 도구의 현재 위치를 과장 없이 보여주는 사례로, 디자인-개발 핸드오프 비용을 고민하는 개발자에게 참고할 만합니다.
원문: dev.to / 번역·요약: Trawling