문의하기
ONLINE LECTURE PLATFORM

인강 서비스의 모든 기능을
2개월 반 만에 리뉴얼한
웹 개발 사례

수강 현황, 동영상 플레이어, PG 결제, 쿠폰, 선물하기까지. 인강 사이트에 들어가는 모든 기능을 4명이 리뉴얼했습니다.

웹사이트 + 모바일 웹 4명 (기획1 · 디자인1 · 개발2) 상용 동영상 API PG 결제 (페이게이트 · 페이팔) 선물하기 · 쿠폰
메인 화면 — 강의 배너 + 추천 강좌
매칭 플랫폼에서 연결된 프로젝트 THE STORY

매칭 플랫폼에서
연결된 프로젝트

개발 매칭 플랫폼을 통해 연결됐습니다. 이미 운영 중인 인강 서비스가 있었고, 전면 리뉴얼이 필요한 상황이었습니다.

"기존 서비스를 통째로 업그레이드하고 싶어요.
기획서는 저희 쪽에서 준비해갈게요."

이전 사례들과 달랐습니다. 클라이언트 쪽에 전문 기획자가 있었어요. 화면 흐름, 기능 목록, 디자인 방향이 이미 정리되어 있었습니다. 우리는 기획을 같이 만드는 게 아니라, 정해진 기획을 정확하게 구현하는 역할이었습니다.

특히 디자인에 공을 들인 프로젝트였습니다. 강의 썸네일 하나하나가 화면에서 어떻게 보이는지, 영상 플레이어 주변의 여백과 커리큘럼 목록의 배치까지 — 기획자가 꼼꼼히 챙겼고, 디자이너와의 호흡이 중요했습니다.

인강 서비스의 모든 기능 체크리스트 DIAGNOSIS

인강 서비스의
"모든 기능"이라는 무게

기획서가 있다고 쉬운 건 아닙니다. 인강 사이트에 들어가는 기능은 생각보다 많고, 서로 연결되어 있습니다.

CHALLENGE 01

기능이 서로 물려 있습니다

수강 신청 → 결제 → 수강 현황 → 동영상 재생 → 수강 완료 → 리뷰. 쿠폰은 결제에 붙고, 선물하기는 다른 사람의 수강 신청을 대신 하는 구조. 하나를 빼면 흐름이 끊기고, 하나를 고치면 다른 곳에 영향을 줍니다. 이걸 2개월 반 안에 전부 리뉴얼해야 했습니다.
CHALLENGE 02

테스트가 가장 까다로웠습니다

결제를 테스트하려면 수강 신청이 되어야 하고, 쿠폰을 테스트하려면 결제 흐름이 먼저 돌아가야 합니다. 선물하기는 두 계정이 동시에 필요하고, 동영상 재생은 브라우저마다 다르게 동작합니다. 기능 하나를 확인하려면 앞의 세 단계를 먼저 통과해야 하는 구조였습니다.
CHALLENGE 03

기존 서비스가 돌아가는 중이었습니다

신규 개발이 아니라 리뉴얼이므로, 기존 사용자 데이터와 결제 내역이 있었습니다. 새 시스템으로 전환하면서 기존 수강 이력을 보존해야 했고, 서비스 중단 시간을 최소화해야 했습니다.
기능이 하나씩 연결되는 체인 PROCESS

기획자와 함께
기능을 하나씩 쌓아간 과정

기획서가 있었기에 "뭘 만들지"는 명확했습니다. 문제는 "이 많은 걸 어떤 순서로 만들고 연결할 것인가"였습니다.

Week 1–2
기획 검토 · 설계
클라이언트 기획서 분석, 기존 서비스 구조 파악, DB 설계, API 명세 작성. 기능 간 의존 관계를 정리해서 개발 순서를 확정
기획서 분석 DB 설계 API 명세 개발 순서 확정
Week 2–3
디자인
강의 썸네일, 배너, 수강 화면 등 영상 중심 UI 디자인. 기획자와 디자이너가 밀착 작업하며 화면별 시안 확정
영상 썸네일 UI 메인 배너 반응형 (PC + 모바일)
Week 3–7
개발
핵심 순서: 회원가입(네이버·페이스북) → 강좌 등록 · 목록 → 동영상 플레이어 연동 → PG 결제(페이게이트·페이팔) → 수강 현황 · 나의 강의실 → 쿠폰 · 선물하기 → 나의 글 · 리뷰
소셜 로그인 동영상 API PG 결제 쿠폰 · 선물 수강 관리
Week 8–9
테스트 · 데이터 이관
기능이 서로 물려 있어서 시나리오 기반 테스트. 가입 → 강좌 검색 → 쿠폰 적용 → 결제 → 수강 → 리뷰까지 전 과정을 반복. 기존 사용자 데이터 이관
시나리오 QA 결제 테스트 데이터 이관
Week 10
라이브 전환
기존 서비스에서 새 시스템으로 전환. 서비스 중단 최소화하며 DNS 전환 + 데이터 최종 동기화
라이브 전환 서비스 연속성
FEATURES

인강 서비스에 필요한
모든 것을 넣었습니다

하나의 인강 플랫폼이 돌아가려면 생각보다 많은 기능이 필요합니다. 이 프로젝트에서 구현한 전체 기능 목록입니다.

동영상 강의 시스템
상용 동영상 API 연동. 강의별 커리큘럼, 진도율 추적, 이어보기. 브라우저 호환성 확보 (PC + 모바일)
PG 결제 · 정산
페이게이트 + 페이팔 이중 결제. 강좌별 가격 설정, 할인, 쿠폰 적용, 결제 내역 관리
선물하기 · 쿠폰
다른 사람에게 강좌를 선물. 쿠폰 발급 · 적용 · 만료 관리. 프로모션 도구로 활용 가능
나의 강의실
수강 현황, 수강 중인 강좌, 결제 내역, 쿠폰 내역, 나의 글/리뷰까지. 사용자 대시보드 전체
소셜 로그인
네이버, 페이스북 소셜 로그인. 가입 허들을 낮추고 기존 계정과 연동
강좌 검색 · 카테고리
전체 강좌, 추천 강좌, 신규 강좌. 카테고리별 필터링과 검색으로 원하는 강의를 찾는 구조
SCREENS

주요 화면

강의 수강 화면
강의 수강 화면
패키지 강좌
패키지 강좌
수강 현황
수강 현황
결제 내역
결제 내역
사용자의 전체 동선이 보이는 순간 RESULT

기능이 하나씩 연결될 때마다
사용자의 동선이 보였습니다

결제가 붙고, 수강 현황이 연결되고, 쿠폰이 적용되는 순간 — "가입한 사용자가 강좌를 찾고, 결제하고, 수강하고, 리뷰를 남기는" 전체 시나리오가 실제로 돌아가기 시작했습니다.

2.5개월
설계부터 라이브 전환
PC+모바일
반응형 웹 동시 대응
전 기능
인강 서비스 풀 패키지
🧩
링이 하나씩 이어지는 순간
인강 서비스의 기능은 서로 물려 있습니다. 회원가입이 안 되면 결제를 테스트할 수 없고, 결제가 안 되면 수강을 확인할 수 없고, 수강이 안 되면 리뷰를 쓸 수 없습니다.

그래서 기능이 하나 완성될 때마다 다음 기능이 열리는 느낌이었습니다. 마치 체인의 고리가 하나씩 걸리면서 전체가 이어지는 것처럼.

마지막 고리 — 선물하기가 연결된 순간, "한 사람이 강좌를 선물하고, 받은 사람이 바로 수강하는" 흐름이 완성됐습니다. 그때 기획자가 보낸 메시지가 기억납니다. "드디어 다 돌아가네요."
FAQ

자주 묻는 질문

인강 사이트를 처음부터 만들 수도 있나요?
가능합니다. 이 사례는 리뉴얼이었지만, 신규 구축도 같은 구조입니다. 동영상 호스팅, 결제, 수강 관리 — 핵심 모듈을 먼저 만들고 확장하는 방식을 권합니다.
클래스101이나 인프런 같은 플랫폼과 뭐가 다른가요?
클래스101, 인프런은 여러 강사가 올리는 마켓플레이스입니다. 자체 인강 사이트는 내 강의만, 내 브랜드로, 내 결제 시스템으로 운영합니다. 수익을 플랫폼과 나누지 않고, 수강생 데이터를 직접 관리할 수 있습니다.
동영상은 어떻게 호스팅하나요?
상용 동영상 API를 사용합니다. 직접 서버에 올리면 트래픽 비용과 품질 관리가 어렵기 때문에, 전문 영상 CDN을 연동하는 게 일반적입니다.
기획서가 없어도 되나요?
이 프로젝트는 기획자가 있는 경우였지만, 기획서 없이 레퍼런스만 가지고 시작하는 경우도 많습니다. 저희가 기획부터 함께 잡아갈 수 있습니다.

온라인 강의 플랫폼, 만들고 싶으신가요?

리뉴얼이든 신규 구축이든, 인강 서비스의 전체 기능을 만들어드립니다

프로젝트 상담하기