2019년, 내 학점 데이터 분석 여정

2019년 리틀 빅데이터 송년회에서 발표한 발표 슬라이드입니다.

제주대학교 학사 데이터의 복잡성을 풀어내고, 이를 시각화하며 사용자의 경험을 개선하는 과정을 담았습니다.
Preact와 TypeScript를 활용하여 최소 기능 제품(MVP)을 제작하였고, 그 과정에서 데이터 정제, UI 개선, 그리고 학점 시각화 프로젝트를 통해 얻은 인사이트를 공유했습니다.

Transcript

1. 2019년, 내 학점 데이터 분석 여정 리틀 빅데이터 송년회 2019 김무훈, 2019년 12월 13일 제주대학교 학적 데이터의 복잡성을 풀어내고, 분석한 과정을 소개합니다. 1 / 24
2. iam@muhun.kim 제주대학교 컴퓨터 학과 2학년, 프론트엔드 프로그래머 지망생 개인 기술 블로그: https://frontend.moe 많이 보러 와주세요 ~ 2 / 24
3. 좀 특이한 이야기 저희 학교 서비스(dreamy.jejunu.ac.kr)의 학적 데이터를 풀어봅니다. 1. 난해한 학적 데이터를 다시 정제합니다. 2. 이미 있는 웹 서비스를 가능한 가장 간단한 방법을 찾아 개선합니다/ 위 두가지를 반복하여, 주변에 피드백을 반복해서 얻었습니다. 3 / 24
4. 목차 1. 2019년에 우리 학교 학사 시스템을 지탱하는 기술 2. 난해한 학적 데이터 프로퍼티 문제 🤨 3. 꼭 필요한 데이터만 보여줄 수 없을까? ➡ 직접 만들어보자 4. 최소 기능 제품(MVP)을 구현하기 4 / 24
5. 우리 학교 학적 시스템의 FE 기술 현실 🏚 - Namo webEditor v4.0 (평가판, Trial 사용 중) - EUC - KR 과 UTF - 8 텍스트 인코딩이 혼합된 콘텐츠 형식 - AJAX & <iframe/> based component < 그림 1, http://dreamy.jejunu.ac.kr:8080/sugang/index.html > < 그림 2, EUC - KR 인코딩 된 ъ੄_੗ܐ.txt> 5 / 24
6. 웹 서비스의 기본? (주관) • 로딩 경험과 응답성을 챙기기, 해당 요소를 최소화하기 • 정보를 명시적으로 전달하기 • 문제를 방치하기 않기, 적정하고 예측 가능하게 기술 적용하기 • 사이드 iframe 컴포넌트 로드가 간헐적으로 타임 아웃이 남. < 그림 4 > < 그림 4, iframe 컴포넌트 타임 아웃 > 6 / 24
7. 난해한 학적 데이터 • 서버로부터 받는 학적 데이터의 프로퍼티 의미가 명확하지 않습니다. • 암묵적인 프로퍼티 이름(예 : SEONGJEOG_TOT = 성적 토탈), 값의 숫자와 문자 타입의 구분 X • 위와 같은 전체 데이터를 사용자에게 별다른 힌트 없이 바로 보여주고 있음 ➡ 사용자가 서버의 내부 상황을 역으로 이해하거나 고려하도록 강요하고 있습니다. 메서드 URL Body (Form Data) 쿠키 POST https://dreamy.jejunu.ac.kr/susj/ com/com_su.jejunu {"mode":"doSchd", "job_id":"SEONGJEOG_TOT"} JSESSIONID, WMONID 표1, 전체 성적 요청 페이지에서 사용하는 AJAX 요청 중 하나. 코드1, 전체 성적 조회 요청의 AJAX 응답 데이터 7 / 24
8. 난해한 학적 데이터 : 표 UI ❔ ”내 평점보다 4.5 평균값이 더 높네? 전교생 표준 평균인 건가?” 아.. 4.3 만점을 4.5 로 치환해서 보여준거구나 (정규화 하면서 암) 그림 3, 전체성적조회 표 신입생 : 우리 학교는 4.3과 4.5 중 어떤 학점제를 사용하나요? 신청/평점, 취득 학점의 차이점? 8 / 24
9. 사용자가 필요로 하는 핵심 데이터만 제공할 방법은 없을까? Preact 컴포넌트를 활용한 확장 기능 프로토타입 테스트 • 로그인/로그아웃 • 메인 페이지 / 세션 유효 시 메인 페이지로 리다이 렉션 • 학번 또는 비밀번호 N회 틀림 알림 • 세션 만료 알림 Proof of Concept 결과물: https://github.com/reflation/prototype < 영상 1. 프로토타입, https://youtu.be/Ney5-npznkM > < 영상 1. 프로토타입, https://youtu.be/Ney5-npznkM > 9 / 24
10. 사용자가 필요로 하는 핵심 데이터만 제공할 방법은 없을까? Preact 컴포넌트를 활용한 확장 기능 프로토타입 테스트 • 로그인/로그아웃 • 메인 페이지 / 세션 유효 시 메인 페이지로 리다이 렉션 • 학번 또는 비밀번호 N회 틀림 알림 • 세션 만료 알림 Proof of Concept 결과물: https://github.com/reflation/prototype < 영상 1. 프로토타입, https://youtu.be/Ney5-npznkM > < 영상 1. 프로토타입, https://youtu.be/Ney5-npznkM > 10 / 24
11. 최소 기능 제품(MVP) 만들기 “기존 UI를 React 컴포넌트로 전부 대체하기가 힘드네요.. 아샬(멘토) : 독립적인 개발 환경을 만들어 작업해보면 어떨까요? 나중에 컴포넌트를 덮 어 씌우면 괜찮을 테니 말이죠. 그리고 모든 학적 데이터를 처리하기에는 양이 많은데, 대 학생이 가장 관심 있어할 정보가 뭘까요? 졸업 요건 정보가 가장 중요하겠죠. 아샬(멘토): 학점 시각화라는 단일 목표를 설정하여 일주일 내로 구현하고 검증해보세요. 이 과정이 바로 MVP 제작입니다” 11 / 24
12. 주변에서 받은 피드백 •최대로 취득 가능한 평점 •졸업 가능한 최소한의 점수 제시 •남은 필수 이수 교양 강의 목록 일주일 뒤의 첫 MVP < 영상 2. 첫번째 MVP, https://youtu.be/iVa9e1w9UMM > < 영상 2. 첫번째 MVP, https://youtu.be/iVa9e1w9UMM > 12 / 24
13. 주변에서 받은 피드백 •최대로 취득 가능한 평점 •졸업 가능한 최소한의 점수 제시 •남은 필수 이수 교양 강의 목록 일주일 뒤의 첫 MVP < 영상 2. 첫번째 MVP, https://youtu.be/iVa9e1w9UMM > < 영상 2. 첫번째 MVP, https://youtu.be/iVa9e1w9UMM > 13 / 24
14. 데이터 정제는 일반적으로 서버 측에서 처리하는 것이 이상적입니다. 그러나 저희 학교의 학적 서비스는 그 책임을 클라이언트에게 전가하고 있습니다. (백여 줄에 달하는 데이터 요청 및 정보 가공 코드를 확인하며 경악했던 경험이 있습니다.) 데이터 정제하기 14 / 24
15. 서드파티 전적 서비스(예: solved.ac, jubeat.tools 등)의 애플리케이션 모델 참고 별도의 서버에서 데이터 정제 및 서빙하고 프런트엔드는 받은 데이터를 바로 보여주고 있습니다. 미러 서비스 만들기 15 / 24
16. 한 함수당 한 기능을 수행하는 요청/정제 내부 모듈을 만들었습니다. 학적 데이터를 별도의 서버에서 정제하기 export const fetchAndParse = async (account: UserNoPw) = > { const { data: { semestersReqParams, . . . user }, cookie, } = await fetchList(account) const rawSemester = await Promise.all( semestersReqParams.map(params = > fetchSemester({ cookie, params })) ) return { . . . user, semesters: postSemesters(rawSemester) } } https://github.com/reflation/frontend/blob/legacy/src/components/Main.tsx#L109 - L166 16 / 24
17. TypeScript와 Prisma로 데이터 타입 안전성 확보하기 • Prisma, 새로운 개념의 ORM 클라이언트 • TypeScript, Golang 지원 • 데이터 모델에 대한 타입세트 생성 17 / 24
18. enum SemesterType { FIRST SUMMER SECOND WINTER } type Subject { id: ID! @id title: String! code: String! grade: String! course: String! } / / Code generated by Prisma (prisma@1.34.10). DO NOT EDIT. export type SemesterType = "FIRST" | "SUMMER" | "SECOND" | “WINTER"; export type SubjectOrderByInput = | "id_ASC" | "id_DESC" | "title_ASC" | "title_DESC" | "code_ASC" | "code_DESC" | "grade_ASC" | "grade_DESC" | "course_ASC" | "course_DESC"; datamodel.prisma models/prisma/index.ts $ prisma generate 데이터 모델에 대한 타입 세트 생성하기 TypeScript와 Prisma로 데이터 타입 안전성 확보하기 18 / 24
19. https://us1.prisma.sh/.../dev 정해둔 DBMS 엔드 포인트로 동기화 데이터를 타입 안전하게 다루기 feat. TypeScript & Prisma enum SemesterType { FIRST SUMMER SECOND WINTER } type Subject { id: ID! @id title: String! code: String! grade: String! course: String! } datamodel.prisma $ prisma deploy 19 / 24
20. *하영드리미는 제주대학교 학적 서비스 이름입니다. 메일 기반 로그인 ➡ 데이터 받아오기 ➡ 메인 페이지 20 / 24
21. 메일 기반 로그인 ➡ 데이터 받아오기 ➡ 메인 페이지 < 영상 2, 두번째 MVP, https://youtu.be/txMMH4WNX_A > < 영상 2, 두번째 MVP, https://youtu.be/txMMH4WNX_A > 21 / 24
22. 메일 기반 로그인 ➡ 데이터 받아오기 ➡ 메인 페이지 < 영상 2, 두번째 MVP, https://youtu.be/txMMH4WNX_A > < 영상 2, 두번째 MVP, https://youtu.be/txMMH4WNX_A > 22 / 24
23. 마치며 • 잘못된 사례를 통해 웹 개발의 중요한 교훈을 속성으로 배웠습니다. • 적어도 5년차 웹 프로그래머 스택 완성? • 이런 경험을 멘토님과 공유하면서 Waterfall 에서 Agile 로 넘어가는 개발 체험을 했습니다. • MVP, TDD, 짝 프로그래밍 • 다만 품질을 신경쓰니 기간 편차가 심했습니다. • 1차 구현 : 4일 • 2차 구현 : 4주 (React Native 에서 미러 웹 서비스로 기획을 바꿈) 23 / 24
24. 앞으로 해야 할 일 • 서비스 출시 준비 • 데이터 확장 및 통합하기 (강의 정보와 성적 연동) 24 / 24