Mani-T 개발 배경
: 행정 효율성 확보 및 데이터 기반 사용자간 신뢰 구축
1) 행정 파편화 해소: '따로 노는' 관리 도구의 통합
기존 교육 현장에서는 출결은 종이 명부나 엑셀에, 과제는 카카오 오픈톡방이나 밴드로, 공지사항은 또 다른 메신저로 관리하는 행정 파편화(Administrative Fragmentation) 현상이 심각했습니다.
•
문제점: 강사님들은 데이터를 한곳에 모으기 위해 단순 반복 업무에 과도한 시간을 할애해야 했으며, 이 과정에서 데이터의 누락이나 관리 오류가 빈번하게 발생했습니다.
•
현황: 강사 커뮤니티 모니터링 결과 강사님들은 보통 조교를 채용하여 행정 업무를 처리하며, 수강생이 4명만 넘어도 시급 만원이상의 파트타임 조교를 채용해서 대응하거나, 20명 미만의 수강생을 가진 강사가 2인 이상의 다수의 조교를 채용하는 경우가 흔하다는 것을 확인할 수 있었습니다.
•
해결책: Mani-T는 분산된 관리 기능을 하나의 플랫폼으로 통합하여 최대한 조교 채용 시점을 지연시킴으로써 강사의 수익 확대의 기여하고자 하였으며, 조교를 채용할 경우에도 업무파악에 소요되는 시간과 행정에 소모되는 시간과 비용을 최소화하여 소수의 인원으로 학습관리가 가능한 구조를 설계하고자 하였습니다. 이는 강사가 오직 교육과 피드백에만 집중할 수 있는 환경을 제공하기 위함이었습니다.
2) 관리 중심에서 '소통 중심'으로의 전환
기존의 교육 관리 방식은 강사가 엑셀이나 별도의 툴에 기록하고, 학생이나 학부모가 요청하거나
중요한 정보(성적표)에 한해서만 부가적인 비용(메시지발송비용)을 할애하여 정보를 제공하는
'비대칭적 정보 구조'를 가지고 있었습니다. 이로 인해 학부모는 학생이 무엇을 배우고 어떻게
성장해가는지를 성적표 하나로 확인하거나 반복적인 확인 문의를 통해서만 확인할 수 있습니다.
강사는 학부모의 "우리 아이가 무엇을 배웠나요?", "과제 제출이 확인되었나요?"등의 단순 문의에 대응
하느라. 시간과 감정을 소모해야만 했습니다. 이에 Mani-T는 PWA 학습 알림을 통해 비용을 최소화하여
이를 해결하고자 하였습니다.
3) 데이터 ‘가시성’을 통한 운영 효율화
데이터를 투명하게 공개함으로써 강사와 이해관계자(학생, 학부모 등)가 동일한 데이터를 실시간으로 공유
할 수 있는 환경을 구축하고자 했습니다.
•
CS 발생의 근본적 차단: 사용자가 직접 대시보드에서 출결, 과제 현황, 피드백을 확인하게 하여
단순 확인용 문의 감소 기대
•
데이터 기반의 납득: 정성적인 설명 대신 정량적인 데이터를 직관적으로 시각화하여 서비스에 대한
신뢰도 상승을 기대
•
CS 발생 최소화: 사용자가 직접 체크하는 시스템을 내재화하여 솔루션 자체 CS 공수도 최소화하고자 함
4) 기술적 제약을 넘는 ‘접근성’ 확보
현장에서의 신속한 피드백과 효율적인 관리를 위해 AWS Amplify, Next.js, Supabase 기반의 서버리스
아키텍처를 채택하였습니다. 이를 통해 인프라 관리 부담을 최소화하고 데이터 동기화의 즉시성을 확보
하였으며, 서비스 확장시에도 유연하게 대응할 수 있을 것으로 기대됩니다. 또한 PWA(Progressive Web App) 기술을 접목하여 네이티브 앱과 같은 사용자 경험(바탕화면실행/Push알림)을 제공하고자 하였습니다.
Mani-T 서비스 소개
: Management & Branding
강사가 행정 업무에서 최대한 자유로울 수 있도록 돕고
학생과 학부모에게는 높은 학습 데이터 접근성을 제공합니다.
Mani-T는 교육 현장의 행정 파편화를 해결하고, 데이터 가시성을 통해 강사와 이해관계자 간의 소통 비용을 획기적으로 낮추는 통합 교육 관리 솔루션입니다.
1) 주요 기능 (Core Features)
•
통합 행정 대시보드: 출결, 과제 현황, 수업 진도를 하나의 화면에서 관리하여 엑셀이나 메신저로 분산된 업무를 통합합니다.
•
실시간 데이터 공유: 강사가 입력한 정보가 학생/학부모 페이지에 즉각 반영되어, 별도의 문의 없이도
학습 현황을 스스로 확인(Self-service)할 수 있습니다.
•
직관적인 피드백 시스템: 정성적인 코멘트와 정량적인 성취도를 시각화하여 제공함으로써 학습 성과에 대해 가시성과 직관성을 높입니다.
•
PWA 기반 접근: 별도의 앱 설치 과정없이 URL 접속만으로 모바일앱과 동일한 사용자경험을 제공합니다.
2) 서비스 기대효과
•
운영 리소스 절감: 반복적인 확인 문의(CS)를 데이터 공개로 대체하여 강사의 행정 업무 시간을
획기적으로 단축합니다.
•
소통의 투명성 확보: '블랙박스' 같았던 교육 과정을 가시화하여 이해관계자와의 두터운 신뢰 관계를
형성합니다.
•
지속 가능한 관리: 파편화된 기록 대신 축적된 데이터를 바탕으로 장기적인 학습 가이드를 제시할 수
있습니다.
•
서비스 확장가능성: 1:1 학습 문의 데이터 등을 누적하여 반복적으로 질문되는 부분을 리스트화하고
응답을 자동화하거나 사전공지하여 추가적으로 계속 행정업무 감소 효과를 확보할 수 있으며,
AI와 접목도 가능할 것으로 기대합니다.
3) 서비스 시연 및 자료 (Link)
•
•
시연 영상 (YouTube/Drive) 플로우
◦
강사(PC): 로그인(카카오) → 대시보드 → 수강생관리(새 폴더 및 새 클래스 추가/수강생 정보
엑셀 데이터 복사/붙여넣기) → 성적/학습관리(성적데이터엑셀등록/출석여부체크) → 학습 자료실(영상 및 자료 업로드) → 대시보드(클래스 현황 확인:클래스/시험별 드롭다운 메뉴) → 포인트(충전하기:포트원 연동) → 1:1 문답(강사용칸반차트)
◦
학생(모바일): 학습관리(학생뷰/성적표는 학부모 공개) → 교안보기(주차별 교안 확인) → 강의보기(강의영상/진도확인) → 1:1 문답(학생뷰)
◦
강사(PC)&학생(모바일): 1:1 문답 → PWA 푸시알림
Mani-T의 구현 과정
1. Mani-T만의 디자인 시스템
2. Mani-T 아키텍처 및 핵심 기능
1) 기술 아키텍처 (Technical Stack)
본 서비스는 높은 확장성과 유지보수 효율을 위해 Serverless & Single Stack으로 구현하였습니다.
•
Infrastructure: AWS Amplify 기반의 서버리스 환경을 구축하여 안정적인 호스팅과 자동화된 CI/CD 파이프라인을 확보했습니다.
•
Frontend: Next.js를 사용하여 빠른 렌더링과 최적화된 UX를 제공하며, PWA 기술로 모바일 접근성을 극대화했습니다.
•
Backend & DB: Next.js의 서버액션과 Prisma ORM으로 Supabase의 실시간 데이터베이스를 연동하여 강사와 사용자 간의 데이터 동기화 지연을 최소화했습니다.
2) 핵심 비즈니스 로직 (Core Buisiness Logic)
※ 본 프로젝트는 실제 현장 상용화 예정으로 핵심 로직 노출을 최소화하였습니다. 이점 양해부탁드립니다.
3. Mani-T 활용 라이브러리 및 개발 환경
1) Core Framework & Language
•
Next.js (App Router): 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)을 유연하게 조합하여 성능과 SEO를 모두 잡기 위해 선택했습니다. 특히 App Router의 최신 기능을 활용해 복잡한 대시보드 로직을 효율적으로 관리합니다.
•
TypeScript: 프로젝트 규모가 커짐에 따라 발생할 수 있는 런타임 에러를 사전에 방지하고, 명확한 타입 정의를 통해 협업의 효율성을 높이기 위해 도입했습니다.
2) Database & Resource Management
•
Supabase (PostgreSQL): 강력한 실시간 기능과 인증 기능을 내장하고 있어 초기 개발 속도를 비약적으로 높일 수 있었습니다. 별도의 백엔드 인프라 구축 없이도 안정적인 데이터베이스 운영이 가능하여 선택했습니다.
•
Prisma ORM: 직관적인 스키마 정의와 타입 안정성이 보장된 쿼리 작성을 위해 사용합니다. DB 스키마 변경 시 마이그레이션 도구로서 매우 안정적인 성능을 보여줍니다.
•
Cloudflare R2: 학습 자료 및 대용량 PDF 파일을 저장하기 위해 도입했습니다. AWS S3와 호환되면서도 비용 효율적이며 전송 속도가 빨라 학습 자료 관리 플랫폼의 백엔드로 적합합니다.
3) Authentication & Security
•
Supabase Auth (SSR): 서버와 클라이언트를 넘나드는 인증 상태 관리를 위해 도입했습니다. 미들웨어(middleware.ts)를 통해 역할 기반 접근 제어(RBAC)를 구현하여 관리자, 강사, 학생별 접근 권한을 엄격히 관리합니다.
4) UI/UX & PWA
•
Tailwind CSS: 디자인 시스템의 일관성을 유지하면서도 빠른 스타일링을 위해 선택했습니다. 유틸리티 퍼스트 방식을 통해 코드 가독성을 높이고 유지보수를 용이하게 합니다.
•
Next-PWA: 웹 앱을 네이티브 앱처럼 사용할 수 있도록 오프라인 지원 및 홈 화면 추가 기능을 구현했습니다. 학생들의 학습 접근성을 높이기 위한 전략적 선택입니다.
•
Web Push (Vapid): 알림톡 외에도 브라우저 푸시 알림을 통해 중요한 학습 공지나 QA 답변을 즉각적으로 전달합니다.
5) External Integration (Service Level)
•
SOLAPI: 카카오 알림톡 및 문자 발송을 위한 핵심 서비스입니다. 성적표 전송 및 주요 공지 사항 알람을 위해 연동되었습니다.
•
Portone (포트원): 메시지 발송을 위한 포인트 충전, 결제 연동 파트로 다양한 결제 수단을 안정적으로 처리하기 위해 도입했습니다.
•
YouTube Data API: 학습 영상 시청 기록 관리 및 자료 등록 과정을 최적화하기 위해 활용합니다.
6) Development & Deployment Settings
•
AWS Amplify: 프론트엔드와 SSR 서버를 동시에 관리하고 자동 배포 파이프라인(CI/CD)을 구축하는 데 최적의 환경입니다. 특히 Git 브랜치별 배포 전략을 통해 안정적인 스테이징 환경을 운영하고 있습니다.
•
Custom Cron Logic (Cron-job.org): 슈파베이스 무료 티어의 휴면 방지 및 정기적인 메시지 발송 재시도(Dispatch processing)를 위해 외부 크론 서비스를 활용한 독특한 자동화 설정을 구현했습니다.
4. 트러블 슈팅 Feat. 문서기반 개발과 와일드 카드
길지않은 프로젝트 기간동안 트러블 슈팅에 시간을 소모하지 않기 위해
초기 기획 및 설계, 구현에 이르기 까지 최대한 사전에 사고를 대비하고자 하였습니다.
기획 및 설계 기간을 구현 기간에 2배 이상 할애하여 설계를 특히 더 꼼꼼하게 고민하였으며
미리 구축해 둔 와일드 카드와 코파일럿 코드리뷰등의 활용으로 단순한 린트 오류로 인한 빌드 오류,
모바일뷰의 소소한 미구현 사항, 환경설정 값 변경으로 해소되는 간단한 트러블 정도만 발생하여
결과발표 시에는 오히려 트러블 슈팅 부분이 많이 다뤄지지 않았다는 평가도 있었으나.
실제로 규모있는 트러블 슈팅이 없었다는 것은 기획과 설계 차원에서 고심한 덕분이라고 생각합니다.
물론, 아키텍쳐를 채택함에 있어서 '전통적인 인스턴스(EC2) 대신 왜 Amplify인가?', 'Java/Spring 환경
대신 왜 Next.js와 Supabase인가?'에 대해 팀원들과 깊게 논의하며 기술적 타당성을 검토했습니다.
백엔드 커리어를 부각하고 싶은 멤버의 경우 개인적으로는 아쉬운 부분이 있을 수 있는 스택 선정이었으나.
기존 스택 대비 프로젝트 구현 범위가 2배 이상 넓어지면서도 높은 퀄리티로 구현할 수 있는 최적의 전략임을 전원이 납득한 뒤 개발에 착수했습니다. 무엇보다도 백엔드의 본질은 특정 언어나 도구에 국한되는 것이 아니라, 데이터의 견고한 설계와 비즈니스 로직의 흐름에 있다고 믿기에 설계 단계에 가장 많은 공을 들였습니다.
특히 전통적인 인프라 구축 및 언어 환경에서 발생할 수 있는 초기 설정의 복잡성과 관리 공수를 객관적으로 분석하여 이러한 리소스를 비즈니스 로직 고도화에 집중시키는 것이 프로젝트 성공의 핵심이라고 판단한
부분은 트러블 슈팅 최소화로 가시적인 성과가 되어주었습니다.
팀 소개 및 프로젝트 회고
안녕하세요 저희는 구름 풀스택 18회차 파이널 프로젝트 팀 The Sync입니다.
무엇보다도 팀이 구성되고 프로젝트가 진행되는 동안
서로간의 Sync 가 중요하다는 것을 상기하기 위해 팀 이름을 The Sync라고 정했습니다.
전공자 3명과 경력 PM으로 구성되어 있는 팀으로 총원 4명 모두 개발이 가능한 인력입니다.
본 프로젝트에서는 팀원 3명이 프론트엔드(2人)와 백엔드(1人)를 나누어 개발 전반을 담당하되
IT 서비스 PM 경력이 있는 팀장이 프로젝트 전반을 관리하며 기획, DevOps, 프로젝트 리스크 펙터 제거
(HotFix 상황 시 백/프론트 구분없이 개발 인력으로 투입, 와일드 카드 개발 등)를 맡아 진행했습니다.