코딩 교육의 대중화와 함께 온라인 학습 플랫폼의 중요성이 어느 때보다 높아지고 있습니다. 이에 맞춰 온라인 코딩 강의 및 교육 가상상품을 손쉽게 유통·학습할 수 있는 ‘플레이코딩(Play Coding)’ 가상상품 웹 판매 솔루션 구축 프로젝트 후기를 소개합니다.

본 프로젝트는 회원 관리부터 상품 검색, 주문/결제, 학습 대시보드, 관리자 시스템 구축뿐만 아니라, 기존 AngularJS 기반의 Google Blockly 학습 모듈 고도화 및 앱 패키징까지 아우르는 종합 에듀테크 솔루션 개발 사례입니다.

💻 1. 플레이코딩 플랫폼 & 구축 배경

― "강의 구매부터 학습 진행, 실습까지 원스톱으로 이어지는 에듀테크 플랫폼"

플레이코딩 솔루션은 동영상 강의와 가상 교육 상품을 효율적으로 판매하고, 수강생에게 최적화된 온라인 학습 환경(LMS)을 제공하기 위해 기획되었습니다.

• 가상상품 중심의 D2C 커머스: 실물 배송 상품과 디지털 교육 강의(가상상품)를 통합 관리할 수 있는 구매 시스템 구축

• 학습 연속성을 극대화하는 대시보드: 수강생이 언제든 이전 학습 지점부터 바로 이어 볼 수 있는 실시간 수강률 및 이어보기 환경 제공

• Google Blockly 기반 실습 모듈 고도화: 기존 AngularJS 코드를 개선하여 블록 코딩 실습의 직관성과 편의성 향상

💡 2. 주요 기능 및 UI/UX 개발 특징

① 프론트엔드 & 마이페이지 (사용자 화면)

• 회원가입 및 인증: 이메일 가입 및 구글(Google) 소셜 계정 연동을 통한 간편 로그인 지원

• 상품 목록 & 검색 엔진: 원하는 코딩 강좌 및 교육 상품을 빠르게 찾을 수 있는 검색 필터 및 찜하기(스크랩) 기능

• 주문 및 결제 프로세스: 가상상품 및 연계 교재 결제를 위한 안전하고 직관적인 결제 시스템 탑재

• 학습 대시보드 & 마이페이지: 수업 진행률, 마지막 수강 정보(수강 날짜, 단원 등), '이어하기' 바로가기 버튼 제공 / 수강 중 강의, 찜 리스트, 결제·배송 조회, 계정 관리 메뉴 구성

② 관리자 전용 아드민(Admin) 시스템

• 회원 & 결제·배송 관리: 가입 회원 정보, 결제 내역, 연계 교재 배송 상태 모니터링

• 스마트 강의 관리 에디터: 강의 및 유닛 추가/삭제/수정, 동영상 업로드, 리치 텍스트 에디터를 활용한 강의 소개글 및 이미지 업로드 기능 지원

③ 기존 웹 유지보수 & Google Blockly 고도화

• AngularJS(1.6.6) 기반 블록 코딩 개선: 기존 Google Blockly 실습 화면 레이아웃 재배치 및 UI 최적화

• 학습 지원 기능 추가: 학습 효과를 높이기 위한 '힌트보기' 및 '정답 보기' 모듈 신규 탑재

• 크로스 플랫폼 영상 지원: Web 브라우저 및 앱(Web View) 환경 모두에서 정상 동작하는 동영상 재생/추가 기능 최적화

④ 앱 패키징 (App Packaging)

• 모바일 접근성 강화: 웹 서비스를 모바일 앱 환경에서도 손쉽게 활용할 수 있도록 하이브리드 앱 패키징 진행

📐 3. 플레이코딩 프로젝트 산출물 요약

🚀 4. 프로젝트 총평 및 성과

플레이코딩 가상상품 웹 판매 솔루션은 동영상 강의 판매 커머스와 수강생 전용 LMS, 그리고 실습형 Google Blockly 모듈을 하나로 융합한 완성도 높은 에듀테크 솔루션 구축 사례입니다.

사용자 친화적인 대시보드와 직관적인 관리자 에디터를 통해 운영 효율을 크게 향상시켰으며, 웹과 모바일 앱을 아우르는 유연한 멀티 플랫폼 환경을 구현하여 디지털 코딩 교육 시장에서의 경쟁력을 한층 높였습니다.