정보처리기사, 사무자동화, 컴퓨터활용능력 등 IT 자격증 강의를 온라인으로 제공하는 교육 플랫폼입니다. 강의를 고르고, 결제하고, 수강하는 흐름 전체가 한 사이트 안에서 이어지는 구조여서 결제 연동부터 영상 재생, 학습 이력 관리까지 각 단계가 끊기지 않도록 설계하는 것이 핵심 과제였습니다. 수강생이 시험 준비 기간 동안 반복적으로 돌아오는 사이트인 만큼, 구조 설계 단계부터 학습 흐름과 운영자 편의를 함께 고려했습니다.
화면 구성과 메뉴 구조
상단 메뉴는 자격증 분야를 기준으로 나뉩니다. 정보처리와 보안, 사무자동화, 컴퓨터활용능력과 워드, ITQ와 GTQ, 재경과 회계관리 등 시험 종류에 따라 카테고리가 구분되어 있어 수강생이 관심 있는 분야로 바로 진입할 수 있습니다. 강의 외에 교재 구입, 문제은행, 커뮤니티, 고객지원 페이지도 상단에 함께 배치했습니다.
메인 화면은 추천 강의, 패키지 강의, 이벤트 배너, 강사 소개, 교재, 수강후기, 공지사항과 학습질문 순서로 이어집니다. 처음 방문해 어떤 강의가 있는지 훑어보는 흐름과, 특정 강의를 목적으로 들어와 바로 결제까지 이어지는 흐름을 모두 수용하는 배열입니다.
강의 콘텐츠 구조
강의 카드와 패키지 구성
강의는 카드 형태로 노출됩니다. 강사 사진, 강의명, 수강 유형 태그, 할인 전후 가격이 카드 안에 함께 표시되어 목록을 훑는 것만으로 주요 정보를 파악할 수 있습니다. 패키지 강의는 별도 섹션으로 분리해 강조하며, 카드 크기와 배지 디자인을 달리해 단일 강의와 시각적으로 구분됩니다. 필기와 실기를 한 번에 준비하거나 기출문제를 포함한 구성 등 패키지 성격이 카드 안에서 바로 읽히도록 텍스트를 정리했습니다.
강사 소개 섹션
대표 강사를 슬라이더 형태로 소개합니다. 강사 카드에는 사진, 이름, 담당 자격증 분야, 소개 문구가 함께 표시되며 강사별 강의 목록으로 바로 연결됩니다. 어떤 강사에게 배울지를 먼저 결정한 뒤 강의를 선택하는 방문자 흐름도 수용하는 구조입니다.
결제와 수강 시스템
결제 연동
카드, 계좌이체 등 다양한 결제 수단을 PG사와 연동해 처리합니다. 쿠폰 코드 적용과 패키지 할인도 결제 단계에서 함께 처리됩니다. 결제가 완료되면 수강 승인과 강의실 등록이 자동으로 이어집니다. 결제 후 별도 확인이나 처리를 기다리지 않아도 되는 구조입니다.
영상 스트리밍과 수강 데이터 관리
외부 스트리밍 서비스와 연동해 영상을 제공합니다. 접속 환경에 따라 화질이 자동으로 조정되고, 멈춘 위치에서 이어보기가 가능합니다. 수강 중 저장되는 학습 데이터는 다음과 같습니다.
- 강의별 진도율 및 수강 완료 여부 자동 기록
- 재생 중단 위치와 배속 사용 여부 등 수강 패턴
- 수강 기간 설정, 연장, 휴강 신청 이력
시험 일정에 맞춰 수강 계획을 조정할 수 있는 구조이며, 관리자 화면에서도 수강생별 학습 현황을 통합해 확인할 수 있습니다.
관리자 기능
검증된 오픈소스 CMS를 기반으로 구축하고 목적에 맞게 커스터마이징했습니다. 강의 등록, 이벤트 운영, 배너 교체 같은 작업 대부분을 관리자가 직접 처리할 수 있어 운영 인력을 최소화할 수 있습니다. 수강생의 결제, 학습, 상담 이력을 한 화면에서 확인할 수 있어 자료를 따로 취합할 필요가 없습니다. 마케팅 연동이나 통계 도구 같은 외부 시스템은 플러그인 방식으로 연결해 필요한 기능이 생겼을 때 확장할 수 있습니다.
검색 대응 방식
강의명과 자격증 명칭을 기준으로 페이지 제목과 메타 설명을 구성했습니다. 같은 강의가 여러 경로로 접근될 경우 대표 주소(canonical)를 지정해 중복 노출을 방지했고, 사이트맵을 자동 생성해 새 강의 페이지를 검색엔진이 빠르게 인식하도록 했습니다. 적용한 검색 대응 항목은 다음과 같습니다.
- 스키마 마크업(schema markup): 강사 정보와 강의 내용을 구조화된 데이터로 처리해 검색 결과 노출 확장
- 오픈그래프(Open Graph) 태그: SNS 공유 시 강의 썸네일과 설명 자동 표시
강의 콘텐츠, 강사 소개, 교재, 수강후기, 시험 정보가 일관된 분류 체계 안에서 연결되도록 정리해, 강의 목록 페이지와 개별 강의 페이지 양쪽에서 검색 유입 경로가 생기도록 했습니다.
반응형 처리
모바일, 태블릿, PC 환경에 맞게 레이아웃이 자동으로 바뀌는 반응형 구조를 적용했습니다. 강의 카드는 화면 너비에 따라 한 줄 노출 수가 조정되고, 상단 메뉴는 모바일에서 접혀 버튼 하나로 전개됩니다. 영상 플레이어도 화면 비율에 맞게 크기가 조정되어 작은 화면에서도 수강하는 데 불편함이 없도록 했습니다.
