AI로 만든 외주 현황 대시보드 수정 사례

1편에서는 대시보드가 왜 필요했고, AI와 기획을 어떻게 확정했는지 다뤘습니다. 2편은 AI로 MVP를 만든 방법, 그리고 직접 써 보면서 일주일 동안 무엇을 고쳤는지 입니다.

소개

설계 문서를 직접 코드를 짜지 않고 동작하는 웹앱으로 만들고, 동료들이 실제로 쓸 수 있는 수준까지 끌어올리는 것입니다.

만드는 것 자체는 생각보다 빨랐습니다. 오히려 직접 띄워서 써 보니 "보기 힘들다", "상태 바꾸기가 너무 번거롭다", "같이 볼 수가 없다" 같은 문제가 쏟아졌고, 일주일은 그걸 고치는 데 썼습니다.

단계 보드: 각 프로젝트가 지금 어느 단계에 있는지 칸반처럼 봅니다. (가상 데이터, 항목명은 가림)

진행 방법

Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.

Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.

Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)

1) AI가 만들고 AI가 검토하는 구조

superpowers의 subagent-driven-development 스킬로 구현했습니다. 작은 작업 단위마다 이렇게 돕니다.

1234567구현 AI: 테스트 먼저 → 코드 → 커밋
   ▼
리뷰 AI: 설계 문서와 대조해 문제 분류
   ▼
중요한 문제는 수정 후 재검토 / 사소한 건 기록해 두고 다음으로
   ▼
전체 완료 후 최종 리뷰 한 번 더

• 리뷰 AI가 권한 관련 허점을 여러 건 잡아냈고, 모두 고친 뒤 병합했습니다.
• "다른 파트너사의 정보는 절대 보이지 않아야 한다"는 규칙은 자동 테스트로 만들어, 실패하면 배포하지 않도록 했습니다.

꿀팁: "AI가 대신 판단한 것" 목록을 꼭 받기. 서브에이전트는 중간에 묻지 않고 진행합니다. 대신 판단할 때마다 무엇을 왜 정했고, 틀리면 비용이 얼마인지 를 기록하게 했습니다. 이 목록을 훑어보다가 제 의도와 다른 판단을 찾아 다시 지시할 수 있었습니다.

1차로 체크리스트·권한·화면을 만들고, 2차로 외부 도구 연동과 알림, 지표 화면을 붙였습니다. 외부로 나가는 동작(티켓 갱신, 메신저 알림 등)은 모두 사람이 미리보기를 확인한 뒤에만 실행 되게 했습니다.

2) "이거 어떻게 봐?"부터 막혔다

이거를 이제 한 번 어떻게 구현되었는지 보고 싶은데 어떻게 해야 해?

다 만들었다는데 정작 저는 화면을 볼 방법을 몰랐습니다. 띄워 보니 디자인이 밋밋해서 회사 디자인 가이드 스타일을 입혀 달라고 했습니다. 상태 색은 시안 3개를 받아서 고르는 방식 으로 정했고, 한 번 더 "가시성이 너무 낮다"고 피드백해서 글자 대비, 칩 크기, 표 머리행을 손봤습니다.

꿀팁: 디자인처럼 말로 설명하기 어려운 건 "정리해 봐" → 시안 여러 개 받기 → 고르기 → 피드백 순서가 빠릅니다.

3) 실제 데이터를 넣자 진짜 문제가 보였다

진행 중인 프로젝트와 이미 끝난 프로젝트를 넣어 보니 문제가 바로 드러났습니다.

지금 진행 중인 건 이미 리뷰 단계인데, 나머지 다 미착수면 어떻게 해?
미착수를 착수나 완료로 바꾸는 게 너무 힘든 거 같아. 정리해 봐.

웹사이트처럼 체크체크 하고, 문서 업데이트되면 확인하고 패스하는 형태로
각 이벤트를 체크하려는 건데 이거 보기 너무 힘들잖아. 이게 최선이야? 기획자 나와.

설계 문서는 "처음부터 앱으로 시작하는 프로젝트"를 기준으로 쓰여 있었는데, 현실은 이미 반쯤 진행된 프로젝트를 옮겨 와야 했습니다. 그래서 세 가지를 추가했습니다.

• 여기까지 진행됨 : "지금 이 단계까지 왔다"고 고르면, 앞 단계 필수 항목을 한 번에 완료로 정리하고 지나간 단계는 실제 통과일로 소급 승인합니다.
• 증빙은 나중에 : 증빙 링크가 없으면 막지 않고 "증빙 보완 필요"로 남겨, 나중에 채우도록 했습니다.
• 표에서 바로 상태 바꾸기 + 일괄 처리 : 항목을 하나씩 열지 않고, 여러 개를 골라 한 번에 완료·해당 없음·증빙 첨부를 할 수 있습니다.

여기까지 진행됨: 현재 단계를 고르면 지나간 단계를 소급 정리합니다. 증빙이 없으면 "증빙 보완 필요"로 남습니다. (가상 데이터)

일괄 처리: 여러 항목을 고르면 아래에 처리 바가 뜹니다. (가상 데이터, 항목명은 가림)

또 지난 프로젝트를 새 기준으로 다시 점검해 보니, 종료 후에도 챙겨야 하는 후속 업무가 기한 관리 없이 남아 있던 경우 가 있었습니다. 그래서 종료 후에도 기한이 다가오면 알려 주는 상시 알림과, 프로젝트를 닫을 때마다 회고용 이슈 정리본을 남기는 규칙을 더했습니다.

4) 사내 인증을 기다리지 않고 "내 데스크탑을 서버로"

원래 계획은 사내 SSO 뒤에 배포하는 것이었지만, 인프라 확인을 기다리면 시범이 늦어집니다.

이거 내 데스크탑을 서버로 해서 띄우고 싶은데 가능할까?

그래서 내부 시범은 제 데스크탑을 서버로 쓰기로 했습니다. 로그인은 SSO 대신 초대 링크 방식입니다.

초대 링크를 공유하면 사용 신청을 하고, 내가 승인해 주는 한 단계로 바꿔 줘.
그러려면 회원 관리 가능한 리스트가 있어야겠지?

• 초대 링크를 공유하면 → 동료가 신청하고 → 제가 승인합니다.
• 회원 관리 화면에서 역할 변경, 비활성화, 로그아웃 처리를 합니다.
• 컴퓨터가 재시작돼도 서버가 자동으로 다시 뜨게 해 두었습니다.

나중에 SSO로 바꿔도 나머지는 그대로 쓸 수 있게 인증 부분만 갈아 끼우는 구조로 만들었습니다.

회원 관리: 승인 대기, 회원 목록, 공유 초대 링크를 한 화면에서 관리합니다. (가상 데이터)

5) "어느 단계인지 모르겠다" → 단계 시각화

정보 확인과 진행 상황 파악이 어려워. 단계 기준으로 각 이벤트가 어느 단계인지
명확히 볼 수 있도록 진행 단계를 시각화해 줘.

• 단계 보드 (맨 위 이미지): 단계별 칸에 프로젝트 카드가 놓입니다.
• 진행 현황 목록 : 행마다 단계 진행 막대를 붙였습니다.
• 프로젝트 상세 상단 : 단계 스텝퍼와 요약 숫자(기한 초과, 막힘, 3일 내 마감, 완료율)를 보여 줍니다. ALT 진행 현황 목록: 프로젝트마다 단계 진행 막대와 다음 마감, 막힌 것이 보입니다. (가상 데이터)

프로젝트 상세: 지나간 단계, 현재 단계, 남은 단계와 기한 초과·막힘·완료율을 맨 위에서 봅니다. (가상 데이터, 항목명은 가림)

6) 대리 신청: 리스트에서 "신청서"로

대리 업무 쪽은 리스트만 있는 거야? 대리 신청 포맷으로 연결한다든가,
포맷을 작성하면 위키로 신청이 간다든가 하는 프로세스가 필요해.

대리 신청 큐에서는 누르면 해당 위치로 가야지, 리스트에서 멈추니까 어딘지 모르겠어.

• 대리 신청 항목에 신청서 탭 을 붙였습니다. 파트너가 작성 → 필수 항목 검사 → 우리 팀 검토 → 제출 순서입니다.
• 제출하면 위키 문서나 티켓을 생성 제안 으로 올리고, 담당자가 미리보기를 확인한 뒤 실행합니다. 같은 문서가 이미 있으면 새로 만들지 않습니다.
• 큐에서 항목을 누르면 해당 프로젝트의 그 항목으로 바로 이동합니다.

대리 신청서: 필수 항목이 비면 검토 요청을 할 수 없습니다. (가상 데이터, 양식 내용은 가림)

결과와 배운 점

배운 점과 나만의 꿀팁을 알려주세요.

과정 중에 어떤 시행착오를 겪었나요?

도움이 필요한 부분이 있나요?

앞으로의 계획이 있다면 들려주세요.

현재 상태

홈 "오늘 챙길 것": 기한 초과, 3일 이내, 7일 이내로 묶어 보여 줍니다. (가상 데이터, 항목명은 가림)

배운 점과 꿀팁

1. 만드는 것보다 써 보는 게 오래 걸린다. 테스트는 모두 통과했지만, 직접 써 보니 "보기 힘들다"와 "바꾸기 번거롭다"가 가장 큰 문제였습니다.
2. 도구는 데이터만큼만 쓸모 있다. 실제 프로젝트를 넣자마자 "이미 한 일이 기한 초과로 뜬다"는 문제가 나왔습니다. 설계 단계에서 기존 진행분을 옮겨 오는 방법 을 함께 정했어야 했습니다.
3. 불편함은 거칠게라도 바로 말하기. "이게 최선이야? 기획자 나와."라고 했더니, AI가 문제를 다시 정리하고 개선안을 번호로 내놓았습니다. 감정 섞인 피드백도 구체적인 장면만 담기면 충분히 통합니다.
4. 완벽한 인프라를 기다리지 않기. 사내 인증을 기다리는 대신 데스크탑 서버와 초대 링크로 먼저 시범을 열었습니다. 인증 부분만 갈아 끼우게 만들어 두면 나중에 옮기기도 쉽습니다.
5. 외부로 나가는 동작은 항상 "미리보기 → 사람이 실행". 자동화가 늘어도 이 원칙 하나로 사고 걱정이 줄었습니다.

시행착오

• 다 만들고 나서야 화면을 볼 방법을 몰라 헤맸습니다. 처음부터 "실행해서 보여 줘"를 요청 단계에 넣는 게 좋습니다.
• 동료와 같이 보려고 주소를 공유했는데 로그인 때문에 안 열렸습니다. 결국 초대 링크와 회원 승인 흐름을 새로 만들었습니다.
• 대리 신청 큐가 목록에서 멈춰서 어디를 고쳐야 하는지 알 수 없었습니다. "누르면 어디로 가는가" 는 설계 문서에 없던 부분이었습니다.

도움이 필요한 부분

• 외부 협력사 인력이 함께 쓰는 사내 도구의 인증·접근 관리 경험
• 개인 데스크탑에서 돌리는 시범 도구를 팀 공용 환경으로 옮겨 본 경험
• AI로 만든 사내 도구를 비개발자가 운영·유지보수하는 방법

앞으로의 계획

1. 실데이터 정합 : 이미 끝낸 항목이 기한 초과로 뜨는 문제를 정리하고, 진행 중인 프로젝트를 모두 최신 상태로 맞추기
2. 내부 시범 : 동료를 초대해 우리 팀이 먼저 사용하고 불편한 점 모으기
3. 파트너사 오픈 준비 : 사내 인증 전환과 보안 점검
4. 측정 시작 : 기한이 지난 뒤 발견된 항목 수("놓친 일"), 우리 팀 개입 횟수, 기한 준수율

최종 목표는 파트너사가 주도하고 우리 팀은 단계 승인만 하는 구조를 도구로 뒷받침하는 것입니다.

도움 받은 글 (옵션)

• superpowers (Claude Code 플러그인)

출처

• 원문: https://www.gpters.org/nocode/post/real-start-came-created-CtXmxxOtbLS5cRs (2026-10-21 · 장혜령_리즈)