02 · 대표 실습
QA팀 · 품목별 점검 관리
품목을 고르고 점검하면, 기록이 쌓이는 웹앱
품목별 체크리스트를 꺼내 점검하고 엑셀에 옮기던 일을, 입력과 기록이 이어지는 웹앱으로 바꿉니다.
기업 QA 현장에서 들은 실제 수요를 바탕으로 구성한 교육용 예시입니다.
체크리스트 확인 → 점검 → 엑셀에 재입력 → 시스템 등록
품목 선택 → 항목 체크 → DB 저장 → 팀에서 이력 확인
점검한 자리에서 기록하고, 팀이 함께 확인
입력한 결과가 DB에 쌓여 품목별 이력을 확인할 수 있습니다. 기존 사내 시스템 연동은 환경에 따라 확장할 수 있습니다.
- 우리 업무에 맞게 입력·저장·조회하는 실습용 웹앱
- 화면·서버·DB가 연결되는 원리에 대한 이해
- 팀이 사용하며 권한과 오류를 점검·수정하는 방법
저장한 결과가 이곳에 쌓입니다.
각 항목을 점검하고 정상 또는 이상 있음을 선택해 보세요.
이 화면에서만 동작하는 예시입니다. 실제 DB 연결은 없으며, 새로고침하면 초기화됩니다.
무엇이 어디서, 어떻게 움직일까요?
AI로 만든 코드를 GitHub에 올리고 Vercel에 배포합니다. 직원은 브라우저로 접속하고, 웹앱 서버는 Supabase DB에 점검 결과를 저장합니다.
- 내 PC에서 만들기Claude Code·Codex로 화면과 기능을 만들고, 실행하며 확인합니다.
- 코드 저장하고 배포하기GitHub에 코드를 올리고 Vercel에 연결해, URL로 접속할 수 있게 배포합니다.
- 팀의 기록 함께 쓰기웹앱 서버가 Supabase 공유 DB에 점검 결과를 저장하고, 권한에 맞게 이력을 보여줍니다.
막히는 순간도 수업입니다.
실습 중 문제가 생기면 함께 원인을 찾고 고칩니다. 무엇을 확인하고, AI에게 어떻게 다시 요청하는지도 보여드립니다.
우리 팀의 점검 순서부터 잡습니다
품목마다 필요한 체크 항목과 특이사항을 정합니다. 점검자와 관리자가 볼 화면도 나눕니다.
박대리의 코칭화면에서 입력한 값이 어디에 저장되는지, 화면과 DB의 연결을 그려봅니다.
체크하면 저장되는 화면을 만듭니다
품목을 고르면 체크리스트가 나오고, 점검 결과와 특이사항이 DB에 저장되도록 연결합니다.
박대리의 코칭저장이 안 되면 입력 화면·서버·DB를 나눠 원인을 찾습니다. 고친 뒤 다시 접속해 기록이 남는지 확인합니다.
팀원 입장에서 함께 써봅니다
다른 계정에서 품목별 점검 이력을 확인합니다. 빠뜨린 항목과 권한 밖의 기록도 시험해봅니다.
박대리의 코칭다른 직원의 화면에서 직접 써보며, 헷갈리는 부분과 권한 설정을 다듬습니다.