티스토리 뷰
오늘 만들 것
지금까지 배운 도구들을 조합해서 실제로 쓸 수 있는 대시보드를 만듭니다.
완성 목표: 제조업 생산 현황 모니터링 대시보드
포함 기능:
- 오늘의 생산량 / 목표 달성률 실시간 표시
- 공정별 불량률 현황
- 시간대별 생산 추이 차트
- 이상 발생 시 알림 표시
- 데이터 수동 입력 기능
사용 도구: Google AI Studio (AI 분석) + Lovable (웹앱 제작) + Antigravity (자동화)
전체 제작 과정 개요
[1단계] 기획 (10분): 필요한 기능 정리
[2단계] Stitch로 UI 설계 (15분): 화면 레이아웃 결정
[3단계] Lovable로 앱 제작 (30분): 실제 동작하는 앱 구현
[4단계] Google AI Studio 연동 (20분): AI 분석 기능 추가
[5단계] Antigravity 연동 (20분): 데이터 자동 업데이트
[6단계] 배포 및 테스트 (15분): 실제 사용 환경에서 검증
총 소요 시간: 약 2시간
1단계: 기획 (10분)
대시보드를 만들기 전에 "누가, 언제, 어떻게 사용하는가"를 정리합니다.
사용자 정의:
- 주 사용자: 생산팀장, 품질관리자
- 사용 환경: PC 모니터 (1920x1080) + 공장 내 태블릿
- 업데이트 주기: 수동 입력 (실시간 시스템 연동은 이후 단계)
필요한 데이터 정의:
항목 / 입력 방법 / 표시 형태
오늘 생산량 / 수동 입력 / 숫자 카드
일일 목표 / 고정값 설정 / 숫자 카드
목표 달성률 / 자동 계산 / 퍼센트 + 진행 바
공정별 불량률 / 수동 입력 / 막대 차트
시간별 생산량 / 수동 입력 / 꺾은선 차트
이상 발생 여부 / 수동 입력 / 배지/태그
2단계: Stitch로 UI 설계 (15분)
Stitch에 접속해서 아래 내용을 입력합니다.
[Stitch 입력 프롬프트]
제조 공장 생산 현황 모니터링 대시보드 UI를 만들어줘.
화면 레이아웃:
- 상단 헤더: 회사명, 현재 날짜/시간, 공장 상태 배지 (정상/이상/점검)
- 상단 카드 4개 (가로 배치):
- 카드1: 오늘 생산량 (큰 숫자, 단위 EA)
- 카드2: 목표 달성률 (% 숫자 + 원형 진행 표시)
- 카드3: 현재 불량률 (% 숫자, 기준치 초과 시 빨간색)
- 카드4: 설비 가동률 (% 숫자)
- 좌측 하단 (60% 너비): 시간별 생산량 꺾은선 차트
- 우측 하단 (40% 너비): 공정별 불량률 가로 막대 차트
스타일: 다크 테마, 네이비 배경, 흰색 텍스트, 포인트 색상은 청록색과 주황색
산업용 모니터링 시스템처럼 전문적인 느낌으로
스크린샷을 저장해두세요. Lovable에서 참고합니다.
3단계: Lovable로 앱 제작 (30분)
Lovable에 접속해서 새 프로젝트를 시작합니다.
[Lovable 1차 프롬프트 - 기본 화면]
제조업 생산 현황 대시보드 웹앱을 만들어줘.
화면 구성:
- 다크 테마 (배경색 #0d1b2a, 카드 배경 #1b2a3b)
- 상단 헤더: "생산 현황 모니터" 제목, 현재 날짜/시간 (1초마다 자동 업데이트)
상단 지표 카드 4개:
- 오늘 생산량: 기본값 0 EA
- 목표 달성률: 생산량/목표치로 자동 계산, 퍼센트 표시
- 현재 불량률: 기본값 0%, 3% 초과 시 빨간색으로 표시
- 설비 가동률: 기본값 100%
하단 좌측: 시간별 생산량 꺾은선 차트 (오전6시~오후10시 시간축)
하단 우측: 공정별 불량률 막대 차트 (사출/도장/조립/검사 4개 공정)
우측 하단에 "데이터 입력" 플로팅 버튼 추가
버튼 클릭 시 모달창이 열리며 수치를 입력할 수 있게
차트 라이브러리: recharts 사용
반응형 레이아웃으로 태블릿에서도 보기 좋게
앱이 생성되면 테스트하면서 이상한 부분을 수정합니다.
[Lovable 2차 프롬프트 - 기능 추가]
데이터 입력 기능을 더 구체적으로 만들어줘.
데이터 입력 모달창 구성:
- 현재 생산량 입력 (숫자)
- 일일 목표치 입력 (숫자, 기본값 1000)
- 공정별 불량수 입력 (사출/도장/조립/검사 각각)
- 설비 가동 여부 토글 (공정별)
- 특이사항 메모 입력 (텍스트)
- 저장 버튼 클릭 시 대시보드 수치 즉시 업데이트
저장된 데이터는 이력으로 쌓이도록 하고,
하단에 "오늘의 입력 이력" 테이블도 추가해줘
4단계: Google AI Studio 연동 (20분)
이제 AI 분석 기능을 추가합니다.
[Lovable 3차 프롬프트 - AI 기능]
대시보드에 AI 분석 기능을 추가해줘.
우측 상단에 "AI 분석" 버튼 추가
버튼 클릭 시:
- 현재 대시보드 데이터를 JSON으로 수집
- Gemini API에 분석 요청
- 결과를 사이드 패널로 표시
API 설정:
- Gemini API 키는 설정 화면에서 사용자가 직접 입력
- 설정 아이콘 (⚙️)을 헤더에 추가하고 클릭 시 API 키 입력창 표시
- API 키는 localStorage에 저장
AI 분석 요청 내용:
오늘의 생산 지표를 보고 (1) 목표 달성 가능성 평가, (2) 불량률 이상 여부 판단, (3) 개선 제안 2가지를 간결하게 작성해줘. 한국어로 답변.
분석 결과 표시:
사이드 패널에 분석 텍스트 + 신호등 색상 (정상/주의/위험) 표시
5단계: Antigravity 자동화 연동 (20분)
매일 퇴근 전에 자동으로 데이터를 정리하는 워크플로우를 만듭니다.
Antigravity 워크플로우 설정:
트리거: 매일 오후 6시
액션 1: 웹훅(Webhook)으로 대시보드에서 오늘 데이터 수집
→ Lovable 앱에서 웹훅 엔드포인트를 Lovable 프롬프트로 추가 요청
액션 2: 구글 시트에 일별 데이터 자동 저장
→ 날짜, 생산량, 불량률, 달성률 컬럼에 자동 기입
액션 3: AI로 일간 요약 생성
→ "오늘 생산 현황을 3줄로 요약해줘"
액션 4: 팀장에게 이메일 자동 발송
→ 제목: [자동] {날짜} 일간 생산 현황
→ 본문: AI 요약 + 구글 시트 링크
[Lovable 추가 프롬프트 - 웹훅 엔드포인트]
앱에 웹훅 수신 기능을 추가해줘.
/api/today-data 경로로 GET 요청이 오면
현재 대시보드의 모든 데이터를 JSON 형식으로 반환하게 해줘.
6단계: 배포 및 테스트 (15분)
Lovable 상단 "Publish" 클릭 → URL 생성
테스트 체크리스트:
- PC 브라우저에서 정상 표시 확인
- 스마트폰에서 접속 테스트
- 데이터 입력 → 대시보드 수치 변경 확인
- AI 분석 버튼 동작 확인 (API 키 입력 후)
- Antigravity 테스트 실행으로 자동화 동작 확인
완성된 대시보드 활용 방법
활용법 1: 공장 TV 모니터에 상시 표시
크롬 "전체화면" 모드로 설정하면 실시간 현황판으로 활용 가능합니다.
활용법 2: QR 코드로 팀원 공유
URL을 QR 코드로 만들어 사무실에 부착. 스마트폰으로 즉시 확인 가능.
활용법 3: 자동 보고 시스템과 연결
Antigravity 자동화로 매일 보고서가 팀장에게 자동 전달됩니다.
오늘 배운 것: 바이브코딩 조합의 힘
오늘 만든 대시보드는 다음 도구들의 조합 결과입니다.
Stitch → UI 레이아웃 설계
Lovable → 웹앱 구현 + 데이터 입력 기능
Google AI Studio → AI 분석 기능 탑재
Antigravity → 데이터 자동 저장 + 이메일 보고
전통적인 방식으로는 이 대시보드를 만드는 데 개발자 1
2명이 2
4주가 필요합니다. 바이브코딩으로는 실무자가 직접, 2시간 만에 완성했습니다.
오늘의 실습 미션
미션 1: Stitch에서 대시보드 UI 설계
미션 2: Lovable로 기본 대시보드 앱 완성
미션 3: AI 분석 기능 연동 후 테스트
시간이 부족하다면 미션 1~2만 완료해도 충분합니다.
정리
내일은 7일 시리즈의 마지막 날입니다. 이번 시리즈 전체를 정리하고, 실무에 적용하기 위한 로드맵과 다음 학습 방향을 안내합니다.
- [바이브코딩 7일 완성 #1] 바이브코딩이란? 코딩 몰라도 앱 만드는 시대가 왔다.
- [바이브코딩 7일 완성 #2] Google AI Studio 완전 정복 : 무료로 AI 앱 만드는 법
- [바이브코딩 7일 완성 #3] Lovable로 웹앱 30분 만에 뚝딱 : 코딩 없이 앱 제작 실전
- [바이브코딩 7일 완성 #4] Antigravity로 반복 업무 자동화 : 매주 3시간 아끼는 법
- [바이브코딩 7일 완성 #5] Stitch로 UI 디자인 -> 코드 자동 변환 : 구글의 새 무기
- [바이브코딩 7일 완성 #6] 바이브코딩 실전 : 제조업 생산 대시보드 처음부터 끝까지 만들기
- [바이브코딩 7일 완성 #7] 실무 적용 전략과 앞으로의 로드맵
태그: #바이브코딩실전 #제조업대시보드 #Lovable #GoogleAIStudio #Antigravity #Stitch #생산현황대시보드 #AI대시보드 #업무자동화 #노코드앱 #제조업AI