XD잉글리쉬
XD English 온라인 1:1 영어 과외 학생용 웹사이트 (레벨테스트/결제)
프로젝트 문제, 접근, 결과
영어 과외 탐색부터 결제까지 학생 흐름이 여러 채널로 흩어져 있었습니다.
공개 페이지, 레벨테스트, 결제, 선생님 탐색, 후기, 블로그 흐름을 하나의 Next.js 앱으로 연결했습니다.
운영 기능과 콘텐츠 페이지를 함께 확장했습니다.
화면 둘러보기
전체 페이지
업데이트 기록
- 프로젝트 시작, 학생·선생님 대시보드와 SNS 로그인·채팅 구축
- 추천인·멤버십 등급 시스템, 어드민 i18n과 이메일 템플릿 관리 추가
- Django 백엔드 도입, 어드민 포털 SPA와 강사 정산 시스템 구축
- 팀 협업 기능(칸반·채팅·급여) 추가, 결제·인증 버그 전면 수정
- 강사 스케줄 캘린더 전면 재구현, 토스 웹훅 운영 안정화
- 영상 리뷰·할인쿠폰 도입, 외부 수강생 데이터 통합
- OAuth 통합·대규모 데드코드 정리, 체험 퍼널 개선과 SEO 보강
- 3개 포털 대시보드 디자인 리뉴얼, 환불 정책·운영 페이지 정비
어떻게 만들었는가
XD English는 온라인 1:1 영어 과외를 학생이 직접 탐색하고 신청할 수 있게 만든 Next.js 기반 서비스입니다. 공개 페이지에는 커리큘럼, 선생님, 가격, 후기, 레벨테스트, 무료 체험 신청 흐름이 나뉘어 있고, 학생용 인증과 결제 성공/실패 라우트까지 한 앱 안에서 이어집니다.
코드 구조는 공개 랜딩과 운영 화면을 분리하는 쪽에 초점을 맞췄습니다. src/app/[locale]/(public) 아래에 콘텐츠성 페이지를 모으고, 학생 대시보드·예약·기록·리포트·결제·설정 같은 반복 사용 화면은 별도 앱 영역으로 분리했습니다. 다국어 라우팅은 next-intl 기반으로 두고, 한국어와 영어 로케일 리소스를 기능별로 나눠 관리합니다.
데이터와 운영 기능은 Supabase 쿼리 계층, AWS SES 메일 발송, 카카오 알림톡, Google Gemini 연동으로 구성했습니다. 레벨테스트 리드, 수업 리포트, 교재 에셋, 선생님 예약, 가격 설정처럼 도메인별 query 모듈을 두어 UI 컴포넌트가 데이터 접근 방식을 직접 알지 않게 했습니다.
UI는 Radix UI 컴포넌트와 Tailwind CSS를 중심으로 만들었고, 결제 옵션·주간 수업 횟수·티어 정보 같은 운영 상수는 별도 파일로 분리했습니다. 1,500개가 넘는 커밋 동안 랜딩, 신청, 결제, 수업 후 리포트까지 범위가 커졌기 때문에 화면 자체보다 유지보수 가능한 라우트와 타입 분리가 더 중요한 프로젝트였습니다.