티스토리 뷰
언젠가 만들고 싶다고 생각만 하던 도구가 있었다.
회사에서 반복적으로 마주치는 불편함을 해결할 화면이 있으면 좋겠다고 자주 생각했지만, 막상 시작하려고 하면 데이터, 기준, 화면 구성이 한꺼번에 떠올라 쉽게 손이 가지 않았다.
이번에는 달랐다.
AI가 있어서 시작할 수 있었다.
문제의식과 업무 맥락을 설명하면 AI가 기능을 나누고 구현 순서를 잡는 데 도움을 줬다.
그렇게 머릿속에만 있던 내부 도구를 움직이는 웹앱으로 만들 수 있었다.
그 결과물이 Observatory다.

아래 앱 화면 캡처는 외부 공개를 위해 실제 수치, 개인 식별 정보, 랭킹/테이블 데이터 영역을 블러 처리했다.
왜 만들었나
우리 회사는 교육 콘텐츠를 다루고 있고, 수강생의 시청 기록은 여러 시스템에 쌓인다.
운영성 데이터는 RDB에, 날짜별·콘텐츠별 세부 기록은 MongoDB에 저장되어 있다.
문제는 내가 자주 확인해야 하는 데이터가 대부분 MongoDB 쪽에 있었다는 점이다.
MongoDB Atlas에서 직접 쿼리하면 볼 수는 있었다.
하지만 특정 기간, 그룹, 강의, 상품, 콘텐츠 기준으로 질문이 바뀔 때마다 쿼리 문법을 다시 찾아야 했다.
내가 원한 것은 쿼리 결과가 아니라, 업무 질문에 바로 답할 수 있는 화면이었다.
| 이전 방식 | Observatory로 바꾼 뒤 |
| MongoDB Atlas에서 직접 쿼리 작성 | 기간, 그룹, 강의, 상품, 멤버 기준으로 필터 조회 |
| 결과 표를 보고 직접 흐름 해석 | 일별 추이 그래프와 랭킹으로 흐름 확인 |
| 다음 질문이 생기면 다시 쿼리 작성 | 랭킹 항목 클릭으로 바로 필터 적용 |
| 커리큘럼과 시청 기록을 수동 비교 | 미시청 콘텐츠와 남은 시간을 한 화면에서 확인 |
어떤 화면을 만들었나
Observatory는 대시보드에서 출발했다.
최근 7일, 14일, 30일 기준으로 총 시청시간, 활성 멤버 수, 일별 추이, 멤버그룹 Top 10을 볼 수 있다.
그룹 막대를 클릭하면 해당 그룹 안의 멤버와 강의 Top 5도 이어서 확인할 수 있다.

화면확인할 수 있는 것업무에서 좋은 점
| 대시보드 | 총 시청시간, 활성 멤버, 일별 추이, 그룹 Top 10 | 전체 흐름을 빠르게 파악 |
| Members | 멤버별 시청 기록과 많이 시청한 멤버 | 특정 수강생의 이용량 확인 |
| MemberGroups | 그룹별 시청 기록과 랭킹 | 고객사·조직 단위 흐름 확인 |
| Courses | 강의별 랭킹, 멤버별 랭킹 | 인기 강의와 많이 수강한 사람 확인 |
| Products | 상품별 랭킹, 상품 안의 강의 랭킹 | 패키지나 상품 단위 성과 확인 |
| Contents | 콘텐츠별 기록, 미시청 콘텐츠 | 남은 구간과 세부 콘텐츠 확인 |
랭킹 기능은 특히 중요했다.
콘텐츠 회사에서 “무엇이 많이 소비되고 있는가”는 자연스럽게 궁금해지는 질문이다.
그래서 멤버, 멤버그룹, 강의, 상품 화면에 총 재생 시간 기준 Top 5, Top 10, Top 20 랭킹을 넣었다.
랭킹은 순위를 보여주는 것으로 끝나지 않는다.
항목을 클릭하면 해당 멤버, 그룹, 강의, 상품으로 필터가 적용된다.
숫자를 보고 궁금해진 지점을 다시 쿼리로 옮겨 적지 않아도 된다.

가장 업무적인 기능: 미시청 콘텐츠
B2B 교육 서비스에서 수강 데이터는 민감하다.
단순히 누가 무엇을 봤는지의 문제가 아니라, 고객사의 교육 성과나 이수 판단과 연결될 수 있기 때문이다.
특히 “어느 구간을 보지 않았는가”는 자주 확인해야 하는 정보다.
예전에는 특정 멤버, 강의, 상품 기준의 시청 기록을 조회한 뒤 커리큘럼 전체 목록과 비교해야 했다.
필요한 값을 잘못 넣으면 결과가 달라지고, 데이터 구조를 다시 확인해야 할 때도 있었다.


그래서 콘텐츠 화면에 미시청 컨텐츠 영역을 만들었다.
멤버 ID, 강의 ID, 상품 ID를 입력하면 백오피스의 강의 커리큘럼과 MongoDB의 시청 기록을 비교해, 아직 보지 않은 콘텐츠와 남은 시간을 보여준다.
이 기능은 단순 편의 기능이라기보다 반복 확인을 줄이고 실수를 줄이기 위한 장치에 가깝다.
민감한 데이터를 다룰수록 “빠르게 본다”만큼 “정확하게 본다”가 중요하기 때문이다.
구현하면서 정리한 것
| Next.js 기반 내부 어드민 | 로그인, 페이지 라우팅, 화면 구성 |
| MongoDB aggregation | 시청시간 합계, 일별 추이, 랭킹 계산 |
| 백오피스 API 연결 | ID만 있는 데이터에 그룹명, 강의명, 상품명, 멤버 정보 보강 |
| 환경 선택 | DEV / QA / STAGING에 따라 API와 DB 전환 |
| CSV 다운로드 | 필터링한 결과를 추가 분석으로 연결 |
기술적으로 아주 새로운 것을 만든 것은 아닐 수 있다.
하지만 나에게는 의미가 컸다.
이 프로젝트는 거창한 서비스라기보다, 내가 매일 느끼던 병목을 줄이기 위해 만든 작은 제품에 가깝다.
무엇보다 AI 덕분에 “이런 게 있으면 좋겠다”에서 멈추지 않을 수 있었다.
AI가 모든 것을 대신 만들어줬다기보다는, 내가 이미 알고 있던 불편함을 실제 도구로 바꾸는 속도를 만들어줬다.
Observatory를 만들면서 느낀 것은 업무 개선이 꼭 거창할 필요는 없다는 점이다.
반복해서 검색하는 쿼리 하나, 매번 비교해야 하는 표 하나, 확인할 때마다 조심스러운 데이터 하나가 좋은 출발점이 될 수 있다.
이번 프로젝트는 그걸 확인한 경험이었다.
내가 필요해서 만들었고, 그래서 더 현실적인 도구가 됐다.
다음에도 비슷한 불편함을 만나면 예전보다 조금 더 빨리 생각할 것 같다.
“이거, 화면으로 만들 수 있지 않을까?”
'회고 > 우당탕 개발자 성장기' 카테고리의 다른 글
| 9.5초 → 0.27초: 측정으로 시작한 API 성능 개선기 (0) | 2026.06.05 |
|---|---|
| pub/sub 로직 개선하기 (3) | 2025.06.25 |
| api 속도 개선 해보기 (0) | 2025.03.16 |
| 테스트 코드를 너무 믿었다 (0) | 2024.07.19 |
- Total
- Today
- Yesterday
- 제로베이스 백엔드 스쿨
- 프로그래머스
- 개발자 면접 준비
- 프로그래머스 자바
- 프로그래머스 카카오
- 개발자 취업 준비
- 코딩테스트
- 코딩테스트공부
- 코테공부
- 백준
- 코테준비
- 알고리즘
- 기술 면접 준비
- 알고리즘공부
- 코딩테스트 공부
- 백엔드 개발자
- java
- 알고리즘 공부
- 취업준비
- 취업 준비
- 취준
- 자바
- 주니어 개발자 취업 준비
- 코딩테스트 준비
- 백엔드 개발자 취업 준비
- 백엔드 개발자 기술 면접 준비
- 코테 준비
- 자바공부
- 제로베이스 백준 장학금
- 개발자 취준
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
