0. 개요
학습 목표
- 개선 UI 완료 작업 (with 러버블)
- PRD 문서 작성
학습 내역
-
개선 UI 작업 및 배포 작업 진행
-
PRD 문서 작성
👇
1. 개념 정리
1.1 진척도(Progress)
1. 정의
- 진척도는 프로젝트, 업무, 혹은 특정 프로세스가 목표 대비 얼마나 진행되었는지를 수치나 시각적으로 나타낸 지표입니다.
- 쉽게 말해 “어디까지 끝냈고, 앞으로 무엇이 남았는지”를 보여주는 척도입니다.
2. 특징
- 정량적 표현이 가능함 → % (예: 70% 완료), 단계별 완료 개수 등
- 정성적 표현도 가능함 → “초기 단계”, “테스트 중”, “배포 완료” 등
3. 업무에서의 의미
- 관리자 관점: 프로젝트 지연/리스크를 조기에 파악 가능
- 실무자 관점: 현재 위치와 다음 업무를 명확히 알 수 있어 업무 효율 상승
- 조직 관점: 전체 목표에 대한 달성 현황을 공유하고 투명성 확보
1.2 Validation(검증)
1. 정의
- Validation은 특정 단계나 데이터가 요구 조건·기준·규칙에 맞는지 확인하는 절차를 의미합니다.
- IT/업무 맥락에서는 “입력값이 올바른가? 조건이 충족되었는가?” 를 체크하는 과정입니다.
2. 유형
- 데이터 Validation: 필수값 입력 여부, 형식(날짜/숫자/이메일 등), 중복 여부 확인
- 업무 Validation: 단계별 완료 조건 충족 여부 (예: B파트 생성 전에 A코스 등록이 끝났는가?)
- 제품 Validation: 요구사항과 실제 결과물이 일치하는지 검증
3. 업무에서의 의미
- 품질 보증: 잘못된 입력이나 조건 미충족으로 인한 오류/재작업 방지
- 프로세스 안정성: 다음 단계로 넘어갈 수 있는지 Gate 역할 수행
- 비용 절감: 사후 오류 수정보다 사전 검증이 훨씬 효율적
2. 과제 요구사항
- PM들이 강의 등록 진행 상황을 직관적으로 파악할 수 있는 통합 대시보드 제공
- 각 단계별 필수 입력값 검증 및 실시간 피드백 기능 구현
- 진행률(progress) 및 다음 태스크 안내를 통한 업무 흐름 최적화
- 신규 PM도 빠르게 적응할 수 있는 사용자 친화적 UI/UX 설계
- 기존 A파트, B파트, C파트, D파트 데이터와의 실시간 연동 및 상태 관리
3. 과제 내용
러닝스푼즈 LMS 관련 내용은 내부 사항이 때문에 A,B,C,D 파트로 대신하여 표시하였습니다.
3.1 PRD 문서 수정
지난주에 작성한 PRD 문서를 기반으로 수정 작업을 진행했습니다.
주로 수정한 작업은 데이터 검증 규칙의 상세화입니다.
1. 문제 정의 및 배경
- PM들이 강의 등록 프로세스에서 진행 상황과 다음 단계 확인이 어려움.
- Pain Points: 진행 척도 파악 불가, 할 일 관리 비효율, 신규자 온보딩 난항, 필수값 누락으로 인한 재작업
- 임팩트: 업무 효율 저하, 온보딩 시간 증가, 비용 발생.
2. 솔루션 개요
- 목표: 통합 대시보드로 진행 현황 시각화, 다음 태스크 명확화
- 개선 방향: 진행률 progress bar, 미완료 태스크 표시, 원클릭 액세스, 단계별 가이드 제공
3. 기능 요구사항
- 프로그레스 추적: 4단계 시각화(A파트 → B파트 → C파트 → D파트), 단계별 완료 조건 정의, 실시간 검증 및 알림
- UX 개선: 현재 위치 기반 스마트 네비게이션 제공
4. 성공 지표
- 정량적: 등록 시간 20% 단축, 재작업률 50% 감소, 온보딩 시간 30% 단축
- 정성적: 만족도 상승, 효율성 및 이해도 개선
5. 기술 요구사항
- 데이터 연동: A파트, B파트, C파트, D파트 데이터와 실시간 연결, 상태 관리
- UI/UX: admin 시스템과 일관성 유지, 간결하고 직관적인 화면 필요
6. 도메인 정의 및 비즈니스 규칙
- 주요 엔티티:
A파트: 교육 템플릿, 커리큘럼 포함
B파트: 실제 운영 단위, 일정·담당자 포함
C파트: 오프라인 장소 or 온라인 링크 정보
D파트: 판매 단위, 가격/조건 포함
- 워크플로우 단계:
PM → A파트 → B파트 → C파트 → D파트 → 모집
- 완료 조건 매트릭스: 온라인·오프라인 별 필수값 정의
- 검증 규칙: 중복 체크, 조건부 필수값, 날짜 유효성, 최소 상품 조건
7. 리스크
- 개발 복잡도 증가, 성능 저하 가능성, 데이터 동기화 이슈, 화면 과부하 위험
8. 부록
- 상세 워크플로우: 단계별 검증 규칙 시각화
- UI 참고사항: 기존 시스템과 통일, Figma 시안 참고
- 개선안 배포 링크: 실제 admin 환경 접속 링크 제공
4. 결과
4.1 개선된 LMS 화면 구현
이렇게 총 6개의 page를 생성하였습니다.
A와 B파트의 입력 폼 페이지에서는 validation 개선을, 관리자분들이 가장 많이 사용하시는 B파트에는 진척도를 새로 추가하고,
나머지 페이지의 경우 기존 LMS를 기반으로 그대로 구현하였습니다.
진척도 조회/등록 과정을 보여줘야 했기 때문에 전반적인 페이지 구현이 필연적이었습니다.
B파트에 진척도를 추가하는 부분은 피그마로 먼저 디자인을 생성한 후 이를 기반으로 화면을 구현하였습니다.
Ex. 기수 목록 페이지
(내부 자료라서 기존 LMS를 그대로 구현한 부분은 가렸습니다.)
4.2 개선 효과
- 중복 확인 버튼
- A파트 목록 화면에서 a코드 중복 여부를 즉시 확인할 수 있는 버튼을 추가
- 기존에는 “제출 버튼”을 눌러야만 중복 여부를 알 수 있었으나, 이제는 사전 확인이 가능해져 재작업 방지
- 검증 로직 강화
- 날짜 검증 로직 강화: 올바르지 않은 날짜값을 입력했을 경우 즉시 오류 표시
- 잘못된 날짜 형식, 과거 날짜, 종료일 < 시작일 같은 오류를 사전 차단
- A파트/B파트 조건 연동
- A파트에서 온라인/오프라인 여부 선택에 따라 Validation 항목이 달라짐
- 오프라인 기수의 경우 → 오프라인 필수값만 진척도에 노출
- 온라인 기수의 경우 → 온라인 필수값만 진척도에 노출
- 불필요한 Validation 체크가 사라져 사용자가 혼동하지 않고 필요한 값만 입력 가능
5. 과제 회고 (느낀점)
약 6개의 화면을 개발하며 가장 크게 느낀 점은 처음부터 끝까지 직접 코딩을 하면 2주 정도가 소요되는 작업이 하루 만에 가능하다는 점이다. 물론 그동안 프로젝트를 하면서 AI를 사용하긴 했지만, 일부 코드의 어시스턴트로서 사용했지, 이렇게 전부 AI로만 개발한 적은 처음이다.
AI로만 개발을 진행하였더니 개발 속도가 확연히 빨라졌다. 유사시스템을 참고해서 클론 코딩을 하려고 하거나, 구현하려는 화면이 피그마 등으로 미리 디자인이 되어 있는 경우는 정말 유용하게 사용될 것 같다.
이번 프로젝트에서 러버블과 supabase를 처음 사용해봤는데, 연동이 너무 잘 되어 있어서 놀라웠다. 기획 프로젝트라서 백엔드를 따로 두게 되면 오버스펙이였다. supabase를 사용해서 DB IO 작업을 쉽게 진행할 수 있었고, 이 또한 바이브 코딩으로 모두 진행하였다.
러버블에서 "B 테이블에 b_name 값을 00으로 변경해줘" 라고 프롬프트에 입력만 하면 알아서 supabase 연결 코드를 작성하고 DB의 값을 조회하는 역할을 스스로 수행하는 것이다. 이러한 러버블과 supabse의 연동성이 놀라웠다.
앞으로 기획을 시각적으로 표현할 때 정말 많은 기획자가 바이브코딩으로 구현 가능성을 제시하고 설득력을 높이겠다고 생각했다. 이미 많이 하고 있는 것 같다.
읽어주셔서 감사합니다.
7주차 회고록으로 다시 찾아오겠습니다 ~~~ !
마지막 주차입니다☺️
*본 후기는 [웅진씽크빅X스코프랩스] AI를 활용한 DT 기획자 과정(Blog) 리뷰로 작성 되었습니다.
