Codify - 학생 제출 코드의 유사도를 분석해 공정하고 효율적인 표절 판단을 돕는 서비스
Codify FE는 교수자를 위한 프로그래밍 과제 표절 검사 서비스의
프론트엔드 전용 레포지토리입니다.
백엔드에서 분석한 코드 유사도 결과를
React 기반의 인터페이스로 직관적으로 시각화하며,
- 파이차트(Recharts)
- 네트워크 그래프(vis-network)
- GitHub Diff 스타일 코드 비교 UI
를 통해 교수자가 빠르게 의심 구간을 확인할 수 있도록 돕습니다.
프론트엔드는 특히 다음 목표에 초점을 두고 설계되었습니다.
- 교수자의 실제 평가 흐름을 반영한 화면 전환
- 여러 과목·과제·주차를 넘나드는 상태 관리
- 복잡한 분석 결과를 이해하기 쉬운 UI로 재가공
- 과목 선택 → 과제명 입력 → 주차 설정 → 파일 업로드 → 결과 분석까지
끊김 없는 단일 SPA 흐름 제공 - 캘린더 기반 기간 선택 시 자동으로 N주차 계산 & 강조 표시
- Zustand로 유지되는 글로벌 상태 덕분에 페이지 이동 간 데이터 유실 없음
- 임계값을 기준으로 “유사도 낮음 / 높음” 두 구역으로 분류해 시각화
- 호버 시 학생 리스트를 툴팁으로 표시
- ROC 기반 Threshold 설명을 함께 표시하여 교수자의 판단을 보조
- 각 제출 파일을 노드(node), 유사도가 있는 쌍을 엣지(edge)로 표현
- 엣지 굵기·투명도·색상을 유사도 값에 따라 매핑
- 노드/엣지 Hover 시 오른쪽 패널에서 파일 이름·제출 시간·유사도 등을 표시
physics: false옵션 적용 → 그래프가 흔들리거나 나는 현상 없이 안정적으로 고정됨
/compare/:from/:to페이지에서 선택된 두 코드 비교- 줄 단위 색상 하이라이트로 유사도 유형 표시
- 각 줄 번호 Hover 시 “유사한 코드를 가진 다른 학생 목록” 툴팁 표시
- “검사 종료 / 결과 저장” 버튼을 하단에 배치해 워크플로우 마무리 용이
- 저장된 분석 결과를 리스트/카드 형태로 관리
- 정렬 옵션: 최신순 / 유사도 높은 순
network/pair타입별로 상세 정보 제공- 누적 네트워크 토폴로지를 시각화하여 학기 전체에서 반복되는 패턴 확인 가능
- 분석 결과/코드 비교/과제 생성 등을 모두 프론트에서 Mocking 가능 (개발 과정)
- 백엔드 완성 전에 UI/UX 개발 및 교수자 피드백 수집 가능
- 개발 속도를 크게 높인 핵심 요소
-
과목 선택 & 과제명/주차 설정
캘린더 기반 자동 주차 계산 및 입력 흐름 제공 -
파일 업로드
학생 제출물 압축 파일 또는 개별 파일 업로드 -
1차 필터링 결과 확인 (파이차트)
임계값 대비 의심 비율과 학생 목록을 시각적으로 확인 -
네트워크 그래프 탐색
유사도가 높은 학생 쌍을 시각적으로 탐색
Hover 시 텍스트 정보 확인, 클릭 시 상세 비교 이동 -
코드 비교 화면 이동 (ComparePage)
GitHub Diff UI로 라인 단위 유사도 확인 -
결과 저장
분석 결과를 저장하고, 대시보드에서 누적 기록을 다시 확인 가능
- React — SPA 기반 UI 구성
- TypeScript — 정적 타입으로 안전성 확보
- Vite — 빠른 번들링 & 개발 서버
- Zustand
- 과목/과제/주차 상태
- 업로드 파일 목록
- 선택된 비교 쌍
- 저장된 기록 등 UI 중심 전역 상태 관리
- React Query
- 분석 결과 / 코드 비교 / 대시보드 등 서버 상태 관리
- 캐싱, 로딩, 에러 핸들링, 자동 refetch 처리
- TailwindCSS — 전체 스타일 시스템
- 자체 제작 컴포넌트
Button,Modal,Select,Tooltip,Layout등 서비스 전반 통일된 UI
- vis-network
- 유사도 네트워크 그래프 구현
- 노드/엣지 커스터마이징 및 hover/interaction 처리
- Recharts
- 1차 필터링 파이차트 및 통계 그래프 구현
- MSW (Mock Service Worker) — API 모킹 및 개발 편의성 극대화
- Git & GitHub — PR 기반 협업
- Figma — 화면 설계 및 UI 가이드
- Vercel — 프론트엔드 배포 및 Preview 환경
Codify FE는 다음 원칙을 기반으로 설계되었습니다:
-
Feature 기반 구조
과목/과제/업로드/결과/비교/대시보드 등
“도메인 단위”로 화면과 로직을 독립 구성. -
UI 컴포넌트와 Feature 분리
재사용 가능한 UI는/components,
페이지 및 화면 로직은/features. -
Zustand + React Query 조합
- UI/플로우 중심 데이터는 Zustand
- 서버 응답 기반 데이터는 React Query
→ 클라이언트/서버 상태가 명확히 분리됨.
-
서비스 계층 구조
/services에서 axios 인스턴스 + API 래퍼를 통일해 관리. -
Mock 기반 개발
/mocks에 각 API별 더미 응답을 갖춰
UI 개발을 백엔드와 독립적으로 수행 가능.
src/
├── components/ # 공통 UI 컴포넌트 (Button, Modal, Tooltip 등)
│ └── layout/ # Header, Footer, Content 등 레이아웃 요소
├── features/ # 각 도메인/페이지 단위 화면 및 로직
│ ├── Account/
│ ├── Assignment/
│ ├── Upload/
│ ├── Similarity/
│ ├── Result/
│ ├── Compare/
│ ├── Dashboard/
│ └── Home/
├── stores/ # Zustand 전역 상태 (과제/과목/파일/저장기록 등)
├── services/ # axios 기반 API 호출 모듈
├── hooks/ # React Query + 비즈니스 로직 훅
├── mocks/ # MSW 기반 Mock API 응답
├── constants/ # 더미 데이터
├── utils/ # 날짜/포맷/네트워크 계산 등 유틸 함수
├── types/ # 타입 정의
└── App.tsx, main.tsx # 라우팅 및 엔트리
- 1차 필터링 결과를 임계값 미만 / 임계값 이상 두 영역으로 시각적으로 구분
- 구역 Hover 시 해당 영역에 속한 학생 목록을 툴팁으로 표시
- ROC 기반 Threshold 설명을 오른쪽 텍스트 영역에 배치해 교수자의 판단을 보조
- 학생 제출물을 노드(node), 유사도 있는 쌍을 **엣지(edge)**로 표현
- 엣지 스타일(굵기, 투명도, 색상)은 유사도 값에 따라 동적으로 매핑
- 노드/엣지 Hover 시 오른쪽 정보 패널에
파일명, 제출 시간, 유사도 값을 표시 physics: false설정을 통해 그래프가 흔들리거나 레이아웃이 변하지 않도록 고정
| 파이차트 | 네트워크 그래프 |
|---|---|
|
|
ResultPage의 네트워크 그래프에서 특정 엣지를 클릭하면
/compare/:from/:to 페이지로 이동하여 두 파일의 코드를 비교할 수 있습니다.
- GitHub Diff Viewer 스타일의 좌·우 2단 코드 비교 인터페이스
- 각 유사 코드 라인은 배경색으로 시각적 구분
- 각 줄 번호 Hover 시 “이 라인과 유사한 다른 제출자 목록”을 툴팁으로 제공
- 하단에는 검사 종료하기 / 결과 저장하기 버튼을 배치해 교수자의 워크플로우를 자연스럽게 마무리
| 코드 비교 화면 |
|---|
|
- 저장된 분석 결과를 카드 / 리스트 형태로 표시
- 정렬 옵션 제공:
- 최신순
- 유사도 높은 순
- 카드에는 과제명, 주차, 분석 날짜, 미리보기 그래프/코드 비교 정보 표시
- 클릭 시 상세 페이지로 이동
또한 대시보드에는 여러 과제를 통합한 누적 네트워크 토폴로지를 제공하여 시간이 지나도 반복되는 유사 패턴을 파악할 수 있습니다.
| 누적 네트워크 그래프 | 저장된 분석 기록 목록 |
|---|---|
|
|
-
데이터 시각화 경험 강화
- vis-network, Recharts를 실제 교육 도메인에 맞게 커스터마이징
- 그래프와 텍스트 설명의 조합을 통해 UX 가독성 극대화
-
안정적인 상태 관리 패턴 구축
- Zustand(클라이언트 상태) + React Query(서버 상태) 조합을 정립
- 업로드 → 분석 → 결과 → 저장 → 대시보드 전체 흐름에서 상태 충돌 없이 자연스럽게 이어짐
-
MSW 기반 프론트엔드 주도 개발 방식 정착
- 백엔드 API가 완성되지 않은 상태에서도 UI 개발을 선행
- 모킹 데이터로 회의 및 시연 반복 → 전체 개발 속도 향상
- 실제 교수자 피드백을 반영하면서 시각화 자체보다, 사용자가 이해할 수 있도록 주변 설명을 강화하는 것의 중요성을 확인
- Feature 단위로 폴더를 분리하고 UI/상태/훅을 정리한 구조가 장기 유지보수에 유리함을 체감
- 대규모 강의에서도 부드러운 네트워크 렌더링
- 300~500명 수준에서도 성능 저하 없는 레이아웃 계산 방식 탐색
- 코드 비교 기능 고도화
- 언어별 코드 하이라이팅
- 라인 단위 검색/필터 등 추가 기능
- 교수자 맞춤형 대시보드 확장
- 과목별/학기별 유사도 추세
- 반복적으로 의심되는 파일 패턴 분석
- 테스트 코드/E2E 도입으로 품질 향상
- vitest / Cypress 기반 자동화 테스트 도입 검토