EBSi 고교강의 엄빠심쿵 프로젝트

Overview

2018년 7월 4일 ~ 8월 24일 EBSi 고교강의 엄빠심쿵 학습관리시스템 개발에 참여하였습니다.
엄빠심쿵 학습관리 시스템이란, 고1,2,3, N수생을 대상으로 도전적인 학습목표를 달성할 수 있도록 나만의 학습관리 시스템을 제공하여 자기 주도 학습의 기회를 주고자 개발된 ebsi 고교강의 사이트 내 개인화 프로젝트 페이지 입니다.
5~7월간 진행되는 장학생 도전자 모집을 위해 엄빠심쿵프로젝트 소개 및 장학생 선발 내용을 포함한 이벤트를 3차례 진행하였고, 그 후에 학습관리를 위한 시스템에 3000명의 학생 개개인의 위한 학습관리 시스템을 운영하고자 개발하였습니다.
나의 학습 관리(Main DashBoard)에서는 다짐, 목표대학, 목표 등급, 학습 목표 등을 설정하고 지난주까지 내가 학습해 온 이력 및 전체 학생간의 레벨등을 Google Chart로 구현하여 학습에 동기를 부여하였으며, 서브페이지로는 출석확인, 주간 학습 레벨, 공부일기 등 상세화 된 정보로 학습 관리를 용이하게 할 수 있도록 하였습니다.

My Roll

엄빠심쿵 학습관리 시스템 퍼블리싱 (PC/MOBILE) - 기여도 70%
엄빠심쿵 학습관리 시스템의 메인 퍼블리싱을 맡았으며, 가이드가 되는 레이아웃 및 UI를 구현하였습니다.
PC와 MOBILE을 각각 개발하므로 퍼블리싱 작업본은 2개로 나뉘어 작업하였으나, 운영 및 개발을 위해 90% 이상 동일한 마크업으로 제작하였으며, 게시판 목록의 경우에만 디자인 가이드에 따른 컨텐츠 성질 및 순서에 맞게 각각 PC는 table, MOBILE은 list로 구분하여 작업하였습니다.

Goals

• 엄빠심쿵 학습관리 시스템 퍼블리싱 (PC)
  • 나의 학습 현황 (main)
  • 출석 현황
  • 주간 학습 레벨
  • 공부 일기
  • 학습 정보 창고
• 엄빠심쿵 학습관리 시스템 퍼블리싱 (MOBILE)
  • 나의 학습 현황 (main)
  • 출석 현황
  • 주간 학습 레벨
  • 공부 일기
  • 학습 정보 창고
• 엄빠심쿵 학습관리 프로모션
  • 학습관리 레이어 (PC-EBSi 메인)
  • 학습관리 플로팅 배너 (PC-EBSi 메인)
  • 학습관리 프로모션 배너 (MOBILE-EBSi+ 메인)

Issue

• data 영역 검토 - 그래프 data, 수치 data, 공부일기 글쓰기 등 가변적인 data의 최소사이즈 및 최대사이즈 검토하여 실제 data 반영시 레이아웃 고려
• 나의 학습 현황 Graph 영역 검토 - Graph 영역은 Google Chart로 반영하기 위해 해당 API 내에서 직접 구현 가능한 영역과 디자인/퍼블리싱으로 직접 구현해야 하는 영역을 검토하여 개발파트와 협의
• UI 동일하게 구조화 - 기획서, 디자인 상에 여러 varation 으로 표현되어 있던 description 영역의 UI 및 구조를 일괄적으로 동일하게 조정하여 각 파트와 협의 후 구현
• MOBILE view 사용성 검토 - 모바일에 유용한 폰트 최소사이즈, 버튼 터치 영역 등

Features

게시판 목록

컨텐츠의 구현 및 논리적 순서에 따라 PC/MOBILE 마크업을 구분하여 진행하였습니다.

PC

<tr class="best">
	<td><i>best</i></td>
	<td>[고2]</td>
	<td class="tit">
		<a href="#" title="">
			<strong>[76일차] 이제는 내가 고3이다 ㅎㅎ</strong>
		</a>
	</td>
	<td>김*연</td>
	<td>51</td>
	<td>2018.11.15</td>
</tr>

MOBILE

<li class="best">
	<a href="#" title="">
		<div class="tit">
			<i>[공지]</i>
			<strong>엄빠심쿵 학습관리 공부일기 작성 방법</strong>
		</div>
		<p><span>2018.08.13</span></p>
	</a>										
</li>

Final Output