서울시립대학교 빅데이터 MD 유형검사 • sid12g

본 프로젝트는 2026년 서울시립대학교 전공박람회에서 서울시립대학교 빅데이터혁신융합대학사업단이 운영한 부스에서 사용된 빅데이터 마이크로디그리(MD) 유형검사 앱입니다.

1. 개요

빅데이터혁신융합대학사업단은 정해진 과목을 이수하면 인증해주는 마이크로디그리(MD) 과정을 운영하고 있습니다.

빅데이터 표준 MD만 해도 빅데이터초급, 빅데이터관리, 빅데이터분석, 머신러닝, 빅데이터마이닝, 빅데이터고급의 6종이 있고, 여기에 학과별 연계융합 MD 16종이 더해집니다.

하지만 MD별 인정 과목, 대체 과목, 구 교과번호, 이번 학기 개설 여부 등이 30쪽이 넘는 PDF 안내 자료에 흩어져 있어, 학생이 자신에게 맞는 MD를 직접 찾아보기는 쉽지 않았습니다.

그래서 부스에서 QR 코드로 바로 접속해 2분 안에 자신에게 맞는 MD를 추천받고, 앞으로 들을 과목까지 확인할 수 있는 모바일 웹 테스트를 제작하였습니다.

테스트는 아래 두 가지 방식 중 하나로 진행할 수 있습니다.

방식	대상	추천 방법
흥미 기반	아직 들은 과목이 없는 저학년·비전공자	상황형 질문 8개로 준비도와 관심 방향 점수를 계산하여 MD 추천
과목 기반	관련 과목을 이미 들은 고학년·전공자	들은 과목을 체크하면 MD별 진행률(n/4)을 계산하여 가장 빨리 마칠 수 있는 MD 추천

결과 화면에서는 추천 MD와 함께 남은 과목 로드맵, 적은 과목으로 함께 딸 수 있는 MD, 내 학과의 연계융합 MD 진행 상황, 이수 신청 방법을 보여줍니다.

2. 시스템 구성

본 프로젝트는 React, Vite, TypeScript를 사용하여 개발하였으며, 스타일은 CSS 변수 토큰과 CSS Modules로 구성하였습니다.

로그인, 서버, 개인정보 수집 없이 모든 계산이 브라우저 안에서 끝나도록 하였고, 상태는 별도의 라이브러리 없이 useReducer 하나로 관리하였습니다.

MD 인정 여부는 과목명이 아닌 교과번호로만 판정해야 하기 때문에, 본 과목, 대체 과목, 구 교과번호를 하나로 묶은 "슬롯" 단위로 과목 데이터를 정리하였습니다.

표준 MD 6종은 총 26개의 슬롯으로 정리되며, 하나의 슬롯이 여러 MD에 동시에 인정될 수 있습니다.

{ "id": "dl", "name": "딥러닝", "main": "47768", "md": ["분석", "머신러닝", "마이닝"], "group": "ai" }

과목, 슬롯, 문항, 연계융합 정보는 모두 JSON 파일로 분리하여 코드에 교과번호를 하드코딩하지 않도록 하였습니다. 학기가 바뀌면 term.json의 개설 과목 목록만 교체하면 되기 때문에, 행사 이후에도 학기마다 계속 사용할 수 있습니다.

"함께 따기 좋은 MD" 기능은 추천 MD와 다른 MD를 짝지어 둘 다 4/4가 되려면 더 들어야 하는 최소 과목 수를 구합니다. 교내 개설 슬롯이 20개뿐이라 조합을 전수 탐색해도 충분히 빠르기 때문에, 과목 수 k를 하나씩 늘려가며 모든 조합을 확인하도록 구현하였습니다.

for (let k = Math.max(needA, needB); k <= cand.length; k++) {
  let best: Slot[] | null = null
  let bestScore = -1
  for (const c of combos(cand, k)) {
    if (c.filter((s) => s.md.includes(a)).length < needA) continue
    if (c.filter((s) => s.md.includes(b)).length < needB) continue
    const score = c.filter((s) => tierOf(s) === 0).length * 10 + c.reduce((n, s) => n + s.md.length, 0)
    if (score > bestScore) {
      best = c
      bestScore = score
    }
  }
  if (best) return { k, needA, needB, slots: [...best].sort(recSort) }
}

판정 로직은 React와 분리된 순수 함수로 작성하고 Vitest로 골든 테스트를 작성하였습니다. 흥미 기반의 경우 응답 조합 65,536개(4⁸)를 전수 계산하여 6종의 결과가 15.0–18.8%로 고르게 나오는지 검증하였습니다.

이 외에 결과 카드를 이미지로 저장할 수 있도록 html-to-image를 사용하였으며, Google Analytics를 통해 사용자 수 및 이벤트를 트래킹하였습니다.

3. 프로젝트 회고

본 프로젝트는 바로 개발에 들어가기보다 화면 흐름, 문항과 점수, 결과 화면, 예외 처리를 담은 기획 문서와 구현 규칙 문서를 먼저 작성하고, HTML 프로토타입으로 판정 로직을 검증한 뒤 코딩 에이전트와 함께 개발하였습니다.

기획과 규칙이 문서로 정리되어 있으니 에이전트가 만든 결과물을 검토하는 기준이 명확해졌고, 골든 테스트 덕분에 화면을 붙이는 과정에서도 판정 로직이 깨지지 않았는지 바로 확인할 수 있었습니다.

또한 PDF 안내 자료를 데이터로 옮기는 과정에서 같은 과목의 교과번호가 페이지마다 다르게 적혀 있거나, 개설 학과나 MD 명칭이 서로 맞지 않는 부분 5곳과 PDF에 정해지지 않은 규칙 1개를 발견하였습니다.

이를 임의로 판단하지 않고 임시 처리 방식과 함께 사업단에 확인을 요청할 목록으로 정리하였는데, 데이터를 바탕으로 결과를 알려주는 서비스에서는 원자료를 검증하는 일이 개발만큼 중요하다는 것을 깨달을 수 있었습니다.

마지막으로 테스트 결과는 어디까지나 추천일 뿐이기 때문에, 최종 인정은 교과번호 기준으로 사업단이 확인한다는 안내를 결과 화면에 항상 표시하도록 하였습니다. 사용자에게 정보를 전달하는 서비스를 만들 때, 서비스가 책임질 수 있는 범위를 명확히 알려주는 것도 중요하다는 점을 배울 수 있었습니다.