서강대학교 바이오기술투자분석사 사이버 캠퍼스 구축

자격·교육 안내부터 이용권 결제, 동영상 학습과 진도 관리까지 연결한 사이버 캠퍼스

SCROLL
프로젝트명
서강대학교 바이오기술투자분석사 사이버 캠퍼스 · BIOTITC
기술
PHP · CodeIgniter · jQuery · Bootstrap · Vimeo Player API
운영 상태
운영 종료
프로젝트 유형
대학 교육 홈페이지 · 온라인 동영상 학습 시스템
담당 범위
홈페이지 구현 · 교육동영상 신청·결제 연동 · 학습 진도 및 운영 관리자 개발
주요 기능
  • 자격·교육·시험 안내 · 동영상 이용권 신청·결제 · 신청내역 조회
  • Vimeo 강의 재생 · 영상별 학습 진도 · 이용기간·개별 시청 권한 관리
  • 관리자 강의·카테고리 등록 · 이용권 금액 설정 · 결제·환불 요청 및 학습 현황 관리
프로젝트 개요
  • 서강대학교 바이오기술투자분석사 자격 취득을 준비하는 학습자를 위한 사이버 캠퍼스입니다.
  • 자격·교육·시험 정보를 확인한 뒤 교육동영상 이용권을 신청하고, 강의 시청과 학습 진도 확인으로 이어지도록 구성했습니다.
  • 이용권 결제 내역과 회원별 이용기간, 영상별 시청 권한을 연결하고 운영자가 강의와 학습 현황을 관리하도록 구현했습니다.
개발 목표
  • 학습자가 교육 정보를 찾고 이용권 신청부터 동영상 수강까지 한 사이트에서 진행하도록 합니다.
  • 운영자가 강의 콘텐츠와 수강 권한, 결제 내역과 학습 진도를 함께 관리하도록 합니다.
바이오기술투자분석사 사이버 캠퍼스 목업 — 메인과 자격검정 안내·교육동영상 신청 화면들을 비스듬히 펼쳐 놓은 모습

WEB DESIGN

서강대학교 바이오기술투자분석사 사이버 캠퍼스 메인 화면
바이오기술투자분석사 자격정보 안내 화면
바이오기술투자분석사 교육안내 화면
바이오기술투자분석사 교육과정과 커리큘럼 화면
바이오기술투자분석사 시험과목과 검정방법 안내 화면
교육동영상 이용권 신청과 결제 안내 화면
교육동영상 신청내역과 결제상태 상세 화면

교육 정보를 찾는 순간부터,
신청과 학습까지 한곳에서

자격 취득을 준비하는 학습자가 교육과정과 시험 정보를 확인하고, 필요한 강의를 수강할 수 있도록 구성했습니다. 정보 안내와 이용권 신청·결제, 동영상 시청과 진도 확인을 회원 계정으로 연결한 교육 플랫폼입니다.

  • 자격·교육 정보 안내

    자격정보와 교육 안내, 커리큘럼과 시험정보를 구분하고 탭과 표로 정리해 학습 준비에 필요한 내용을 찾도록 구성했습니다.

  • 이용권 신청과 수강 연결

    교육동영상 이용권의 금액과 사용기간을 확인한 뒤 결제하고, 회원별 이용기간에 따라 강의를 시청하도록 구현했습니다.

  • 학습자와 운영자의 진도 확인

    Vimeo 재생 정보를 바탕으로 영상별 진도를 기록하고, 학습자는 자신의 진행률을, 운영자는 회원별 학습 현황을 확인합니다.

신청·결제·동영상 학습을
하나의 흐름으로

교육 서비스에 필요한 이용권과 수강 권한, 강의 콘텐츠와 학습 기록을 PHP·CodeIgniter 기반에서 연결했습니다. 학습자가 사용하는 화면과 운영자가 관리하는 기능을 함께 구성했습니다.

자격·교육·시험 안내를
쉽게 찾는 정보 구조

자격 소개와 응시 조건, 교육 안내·커리큘럼·교재 소개, 시험과목과 검정방법을 나누어 구성했습니다. 교육정보는 탭으로, 등급별 과목과 기준은 표로 정리하고 공지사항과 강연·검정자료 게시판을 함께 제공합니다.

교육동영상 이용권
신청과 결제 연동

로그인한 회원이 이용권의 금액, 사용기간과 본인 정보를 확인하고 신청하도록 구성했습니다. PG 결제 연동과 신청내역 저장을 구현하고, 상세 화면에서 결제금액·수단·상태·일시와 이용 만료일을 확인할 수 있도록 했습니다.

이용기간과 개별 권한에 따른
강의 시청 관리

회원의 이용권 만료일을 확인해 동영상 시청 가능 여부를 구분합니다. 운영자가 특정 회원에게 영상별 시청 권한을 부여할 수 있도록 해, 기간제 이용권과 개별 권한을 함께 관리하도록 구현했습니다.

Vimeo 강의 재생과
학습 정보 제공

카테고리별 동영상 목록에서 강의를 선택하고 상세 화면에서 Vimeo 영상을 시청하도록 연동했습니다. 강의 소개, 강사 소개, 교재 소개 및 신청 정보를 탭으로 배치해 학습에 필요한 정보를 같은 화면에서 확인하도록 구성했습니다.

영상별 진도 저장과
회원별 학습 현황 조회

Vimeo Player API의 재생 이벤트를 활용해 회원과 영상별 진행률을 저장합니다. 기존 기록보다 진도가 높아질 때 갱신하고, 학습자는 진도체크 화면에서 강의별 진행률을 확인합니다. 관리자는 회원 아이디로 학습 기록을 조회할 수 있습니다.

강의 콘텐츠와
신청·결제 내역 운영 관리

관리자에서 영상 썸네일과 재생 소스, 카테고리, 강의·강사·교재 소개를 등록하고 개별 시청 권한을 설정합니다. 이용권 금액과 결제 연동 설정, 신청·결제 목록과 환불 요청 내역을 관리하는 화면도 함께 구성했습니다.

교육 안내부터 이용권 결제, 강의 시청과 진도 관리까지 필요하신가요?
기관의 교육과정과 운영 방식에 맞는 홈페이지 제작을 상담해 드립니다.
지금 웹셀러에 상담하세요.

카카오 채널 카카오 1:1 문의