Jason

nextjsNext.js

XD잉글리쉬

XD English 온라인 1:1 영어 과외 학생용 웹사이트 (레벨테스트/결제)

  • 문제: 영어 과외 탐색부터 결제까지 학생 흐름이 여러 채널로 흩어져 있었습니다.
  • 해결: 공개 페이지, 레벨테스트, 결제, 선생님 탐색, 후기, 블로그 흐름을 하나의 Next.js 앱으로 연결했습니다.
  • 결과: 운영 기능과 콘텐츠 페이지를 함께 확장했습니다.

Interactive demo

Visual archive

1 / 5

Compare

화면 비교

XD잉글리쉬 screenshot 50105

전체 페이지

XD잉글리쉬 full page

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개가 넘는 커밋 동안 랜딩, 신청, 결제, 수업 후 리포트까지 범위가 커졌기 때문에 화면 자체보다 유지보수 가능한 라우트와 타입 분리가 더 중요한 프로젝트였습니다.