📝 한줄 요약
사내 교육팀이 매출을 관리하기 쉽게 하기위한 대시보드를 만들고 나서, 사용법을 팀원에게 전달해야 했는데 — Playwright 자동 캡처부터 20페이지 인앱 가이드까지 Claude Code가 알아서 만들어줬습니다.
바쁘시면 이것만 읽어도 돼요:
Claude Code로 B2B 교육사업 관리 대시보드를 만들고, 팀 공유용 가이드까지 제작
Playwright로 각 화면을 자동 캡처하고, 버튼 위치까지 넘버링/하이라이트 처리
처음엔 PDF로 만들려 했는데 결국 앱 안에서 바로 열리는 인앱 가이드로 완성
직접 캡처하고 설명 쓸 필요 없이 시간을 크게 아낌
핵심 팁: 웹 화면도 Playwright를 사용하면 캡처와 함께 필요한 자료를 쉽게 만들 수 있다
🎯 이런 분들께 도움돼요
사내 도구나 대시보드를 만들었는데 사용법 전달이 고민인 분
화면 캡처 + 설명 문서를 매번 수동으로 만들고 있는 분
AI로 문서화나 가이드 자동화에 관심 있는 분
😫 문제 상황 (Before)
저희 팀은 B2B 교육사업을 운영하면서 매출, 강사료 지급, 세금계산서 같은 정보를 구글 시트 여러 곳에 나눠서 관리하고 있었습니다. 시트가 분산되어 있다 보니 "이번 달 매출이 얼마지?", "강사료 지급은 어디까지 됐지?" 같은 간단한 질문에도 시트 여러 개를 열어봐야 했어요.
그래서 Claude Code로 이 모든 정보를 한 곳에 서 볼 수 있는 대시보드를 5일 만에 만들었습니다. 프로젝트 관리, 매출 추적, 강사료 지급, 세금계산서까지 — 풀스택 시스템을 완성했죠.
그런데 문제가 하나 더 있었습니다.
대시보드를 만들었으니 이제 팀원들에게 사용법을 알려줘야 했어요. 보통이라면 이런 과정이 필요합니다:
각 화면을 하나하나 캡처하고
캡처한 이미지에 "여기를 클릭하세요" 같은 표시를 하고
노션이나 PDF로 가이드 문서를 작성하고
기능이 바뀔 때마다 다시 캡처하고 문서를 업데이트
생각만 해도 귀찮은 작업이었습니다.
🛠️ 사용한 도구
Claude Code: AI 코딩 도구 (Opus 모델)
Playwright: 브라우저 자동화 도구 (화면 캡처용)
🔧 작업 과정
가이드가 필요하다 — 어떻게 만들지?
대시보드가 1차로 완성되고 나서, 팀에 공유할 가이드를 만들어야 했습니다. 처음엔 직접 스크린샷을 찍고 슬라이드로 만들려고 했어요. 그런데 화면이 20개가 넘고, 각 화면마다 설명할 필드가 수십 개라 — 이걸 수동으로 하면 반나절은 걸릴 것 같았습니다.
그래서 Claude Code에게 이렇게 요청했습니다:
이거 1차 완성본인데 확인 부탁드립니다.
해당 대시보드의 이용 방법은 아래와 같습니다.
거래 기업과 / 강사를 '파트너'로 등록합니다...
(전체 워크플로 설명)
가이드 만드는 방법을 제안받았는데, Playwright로 자동 캡처하는 방향을 선택했습니다.
Playwright 자동 캡처 — 생각보다 퀄리티가 좋다
내가 원하는 건 대시보드 전체화면을 캡쳐하는 것뿐아니라
특정부분이 잘 보이게 영역 캡쳐 등도 잘 활용하면 좋겠어
예를 들어 프로젝트를 등록할 때 새프로젝트 버튼을 확대해서 오버레이 해서 보여준다든가.
아니면 동그라미 표시로 강조를 한다든가
Claude Code가 Playwright 스크립트를 만들어서 실행했는데, 결과물을 보고 놀랐습니다. 단순히 전체 화면만 찍는 게 아니라:
특정 버튼이나 입력 필드에 하이라이트 박스를 씌우고
클릭해야 할 순서대로 넘버링까지 붙여주고
약 45장의 스크린샷을 자동으로 캡처해줬습니다
눌러야 할 버튼까지 번호를 매기고 표시해주는 게 신기했어요. 직접 캡처하고 포토샵으로 화살표 그릴 뻔한 일을 AI가 알아서 해준 거죠.
스크린샷 비율 잡기 — 이건 좀 씨름했다
물론 한 번에 완벽하진 않았습니다. 특히 사이드바 스크린샷의 비율이 계속 깨졌어요.
여전히 여기 왼쪽 사이드바 캡쳐는 비율이 이상하네
이런 부분이 이미지가 비율이 깨졌고 텍스트의 줄바꿈이 생겨버리니까 이상해
사이드바는 세로로 긴 UI라서 전체를 캡처하면 아래쪽에 빈 공간이 많이 생겼고, 2컬럼 레이아웃에서 텍스트가 줄바꿈되면서 이상하게 보이는 문제도 있었습니다. 하지만 이런 부분은 "비율이 이상해", "텍스트가 줄바꿈 생겨서 이상해" 같이 보이는 대로 말하면 Claude Code가 알아서 크롭 비율을 조정하고, 레이아웃을 수정해줬습니다.
필드별 상세 설명 — 대화 맥락에서 자동 추출
단순 캡처에서 끝나지 않았습니다. 진짜 가이드답게 각 필드별로 상세한 입력 안내가 필요했어요.
기업등록 화면에 기업명에는 내가 추가한 설명 같은걸 자세히 안내 해주면 좋겠어
예를들어 가급적 사업자등록증에 기재한 법인명으로 입력해 주세요 와 같이.
강사 정보 입력 화면에도 내가 빌드할 때 너와 한 대화를 다 분석해서 의미있는 설명이 추가되면 좋겠어.
Claude Code가 5일간의 대화 기록을 분석해서, 대시보드를 만들 때 논의했던 맥락을 가이드 설명에 반영해줬습니다. 예를 들어:
기업명: "가급적 사업자등록증에 기재한 법인명으로 입력해주세요"
강사 유형: "개인 처리 시 주민등록번호, 사업자 처리 시 사업자등록번호를 필수로 기재해주세요"
부분입금: 수정 버튼 → 수금상태 변경 → 입금액/입금일 입력 순서까지 워크플로 설명
이렇게 실제 업무 맥락이 담긴 설명이 자동으로 들어가니, 일반적인 "OO을 입력하세요" 수준이 아니라 진짜 사용 매뉴얼 수준의 가이드가 완성됐습니다.
PDF 대신 인앱 가이드로 — 이게 더 낫다
처음에는 이 가이드를 PDF로 만들어서 공유하려고 했습니다. 그런데 완성된 슬라이드를 보니까, 굳이 외부 문서로 만들 필요가 없을 것 같았어요.
지금 너무 좋다. 처음에 나는 이걸 pdf 로 만드려고했는데
그냥 사이드바에 활용 가이드 메뉴를 만들고 이 창이 뜨게 하면 더 좋을 것 같아.
사이드바 하단 사이드바 접기 위에 활용 가이드보기 만들어줘
Claude Code가 HTML 슬라이드를 React 컴포넌트로 변환해서, 대시보드 안에 "활용 가이드" 버튼을 만들었습니다. 사이드바에서 클릭하면 풀스크린으로 20페이지짜리 가이드가 열리고, 화살표키로 넘기고, ESC로 닫을 수 있어요.
결과적으로 대시보드 안에서 바로 가이드를 볼 수 있게 되었습니다. 별도 문서를 찾아볼 필요가 없어진 거죠.
✅ 결과 (After)
Before vs After
항목
Before
After
화면 캡처
수동으로 하나씩 캡처 + 하이라이트 표시
Playwright 자동 캡처 (45장)
가이드 작성
노션/PDF에 직접 설명 작성
AI가 대화 맥락 분석해서 자동 생성
가이드 위치
외부 문서 (PDF, 노션)
대시보드 내 인앱 가이드
소요 시간
반나절 이상 예상
약 1~2시간 (수정 포함)
업데이트
변경 시 수동으로 다시 캡처/작성
스크립트 재실행으로 자동 갱신 가능
결과물
20페이지 인앱 슬라이드 가이드
45장의 자동 캡처 스크린샷 (하이라이트/넘버링 포함)
필드별 상세 입력 안내 (실무 맥락 반영)
사이드바에서 바로 접근 가능
💬 이 과정에서 배운 AI 활용 팁
효과적이었던 것
"Playwright로 캡처해줘": 웹 화면 기반 문서를 만들 때, Playwright를 사용하면 캡처 + 하이라이트 + 넘버링을 자동화할 수 있습니다. AI에게 자동화 도구를 직접 쓰게 하면 수동 작업을 크게 줄일 수 있어요.
보이는 대로 피드백하기: "비율이 이상해", "텍스트 줄바꿈이 생겨서 이상해" 같이 현상 그대로 말하면 AI가 알아서 원인을 파악하고 수정해줍니다.
대화 맥락 활용 요청하기: "너와 한 대화를 분석해서 의미 있는 설명을 추가해줘"라고 하면, AI가 이전 대화에서 논의한 업무 맥락을 가이드에 자동으로 녹여줍니다.
이렇게 하면 안 돼요
한번에 완벽을 기대하지 마세요: 스크린샷 비율이나 레이아웃은 처음에 안 맞을 수 있어요. 몇 번 수정 요청하면 금방 잡힙니다.
캡처 전에 로그인 방식을 확인하세요: Google OAuth 같은 인증이 있으면 Playwright가 자동 로그인을 못 할 수 있어요. 세션 쿠키를 직접 넣어주는 방식으로 우회해야 했습니다.
🌍 다른 업무에 적용한다면?
이 방법은 대시보드뿐 아니라 웹 기반 서비스라면 뭐든 적용할 수 있습니다:
사내 어드민 패널 사용 가이드
SaaS 제품 온보딩 튜토리얼
QA 테스트 시 화면 상태 자동 기록
고객 지원용 단계별 안내 문서
핵심은 Playwright = 웹 화면을 프로그래밍으로 조작할 수 있는 도구라는 점입니다. AI에게 이 도구를 쓰게 하면, 캡처 → 하이라이트 → 문서화를 한번에 자동화할 수 있어요.
