KOJ (KNU Online Judge)

2024.01.01 ~ 2024.06.28

🧑‍💻 프로젝트 내 역할: 프론트엔드 설계/구현, 채점 파이프라인 요구정의, 교육 도메인 UX

프로젝트 개요

  • 경북대학교 프로그래밍 실습 수업 맞춤형 Online Judge
  • 문제/제출/채점/랭킹 흐름을 수업 운영에 맞게 단순화
  • 과거 학과 내부 환경에서 실제 운영된 버전(현재는 신규 시스템으로 대체)

기획 및 디자인

IBM Carbon Design System의 깔끔한 룩앤필을 일부 차용하여, 기존 UI에 익숙한 사용자도 무리 없이 적응하도록 점진적 개선 방향으로 UI/UX를 기획했습니다.

피그마 링크

데모 영상

아래는 KOJ의 기능 데모 영상 두 편입니다.

문제 추가/제출 기능 데모 (YouTube)제출물 다운로드 기능 데모 (YouTube)

1) CP949 인코딩 문제 해결

  • 문제: Visual Studio에서 작성된 CP949 인코딩 코드가 서버에서 실행 불가
  • 해결: iconv-lite + buffer로 UTF-8 변환 파이프라인 구성
  • 성과: 한글 포함 코드의 리눅스 OJ 서버 정상 실행 보장

2) CodeHole 컴포넌트

  • 문제: 특수 유스케이스(빈칸 채우기 등) 미지원
  • 해결: prism.js + DOMParser로 CodeHole 컴포넌트 제작
  • 성과: 교수자 채점 공수 감소, 학생 즉각 피드백
Syntax Highlighting이 적용된 CodeHole 컴포넌트
Syntax Highlighting이 적용된 CodeHole 컴포넌트

3) 엑셀 기반 학생 등록

  • 문제: 반복적인 수기 입력 부담
  • 해결: xlsx 업로드로 일괄 등록
  • 성과: 반복 작업 감소 및 운영 편의 향상
학교 전산 시스템에서 내려받은 xlsx 파일을 통한 학생 등록 모달
학교 전산 시스템에서 내려받은 xlsx 파일을 통한 학생 등록 모달

4) 교수자/학습자 편의 기능 강화

  • 교수자: “실습 가져오기(복제)”로 자료 재활용 → 준비 시간 단축
  • 학생: 제출물 일괄 다운로드로 시험 대비 자료 정리 용이
  • 성과: 교수자 최대 30% 단축, 학생 평균 50% 단축
교수자의 편의를 위한 실습 가져오기 모달
교수자의 편의를 위한 실습 가져오기 모달

성과

  • 교수자 수업 준비 시간 최대 30% 단축
  • 학생 시험 대비 자료 정리 시간 평균 50% 단축

프로젝트 스토리

진행 과정과 고민을 정리한 블로그 글 모음입니다.

배운 점

  • 도메인 중심 문제 해결 경험
  • 브라우저-Node.js 호환성 문제 해결 역량 강화
  • 지속적인 QA 과정을 통한 사용자 중심 UX 설계 경험