디버깅 시각화 서비스 개발 결과보고서

<aside> ⌨️

제품 간단 소개 (100~200자 이내로 간단히 작성)

이 제품은 입력한 코드를 실시간으로 시각화해주는 혁신적인 웹 IDE 환경 플랫폼입니다. 개발자들은 코드의 흐름과 실행 과정을 직관적으로 확인하며 디버깅과 최적화를 효과적으로 수행할 수 있고, 복잡한 자료구조와 알고리즘의 작동 원리를 쉽게 이해할 수 있습니다. 또한, 인터랙티브한 예제와 단계별 실습 기능을 통해 코딩 테스트 준비 및 전반적인 학습에도 최적화되어 있어, 개발 및 학습 생산성을 동시에 높일 수 있는 최고의 도구입니다.

git 주소: https://github.com/DMU-DebugVisual

배포주소 : https://zivorp.com

개발 환경(OS, SW, Language):

OS : Windows, MAC
SW : IntelliJ, VSCode, Spring Boot, React, Docker, Swagger, MySQL, GitHub, AWS EC2, RDS, S3, Notion, Figma, Nginx
Language : HTML, CSS, JavaScript, Java (Spring Boot), python(flask) </aside>

<aside> 💼

팀 소개 (이력서 링크)

Product Manger: 김인성

Team Members: 박소정, 윤동준, 채선웅, 한민정

</aside>

프로토타입 결과물 (이미지, 시연영상)

스크린샷 2025-06-11 오후 12.49.37.png

스크린샷 2025-06-11 오후 12.49.57.png

프로젝트 성과 요약

<aside>

팀원의 공통 관심사인 디버깅으로부터 학습 및 이해 문제를 해결하기 위해 디버깅 시각화 서비스를 개발하고자 함
프로젝트 수행을 통해 달성한 목표
- 컴파일러 개발, 로그인/회원가입 구현, ast 생성기 개발, 시각화 개발
개발한 시스템/서비스가 어떤 문제를 해결했는가
- 코드 흐름의 이해를 도움
프로젝트 기간 동안 달성한 주요 이정표 (예: 개발 완료, 테스트 성공 등)
정량적 성과
- 신뢰성&정확성 74%
- 태스트 수행시간(컴파일) 조금느림
기술적 성과
- AI모델 적용
- 커스텀 ast 구조화
- json 기반 시각화 매핑
외부성과
- 창업300+ 심사대기중 </aside>

개발 내용 및 수행 과정 (상세히 작성)

<aside>

기존 서비스 대비 차별성 (유사서비스 5건이상 작성)

유사 서비스명	공통점	차이점(차별성)
visualgo	코드의 실행 흐름을 애니메이션 기반으로 보여줍니다.	예제코드가 아닌 입력한 코드를 기반으로 결과를 볼 수 있게 하였습니다.
pythontutor	입력한 코드를 기반으로 코드의 실행 흐름을 시각화해서 보여줍니다.	정적인 방식의 시각화가 아닌 애니메이션 방식의 시각화를 제공합니다.
Algolist	알고리즘&자료구조의 시각자료를 제공합니다.	단순이미지가 아닌 흐름별 애니메이션으로 시각화를 제공합니다.
Codecast	시각화 모듈을 제공하여, 코드를 시각화해줍니다.	강의형으로 정해진 예제들만 시각화가 가능한 것에 비해 여러 예제들을 제공합니다.
algorithmcanvas	애니메이션 기반의 알고리즘 시각화를 제공합니다.	노코드형 시각화로, 예제코드와 입력코드 모두 지원하지 않습니다.

요구사항 분석

요구사항 수집 방법: 팀 내 회의, 교수&학생 피드백

주요 요구사항 목록

요구사항 타입	목록
기능 요구사항	• 사용자는 작성한 소스 코드를 서버에 저장할 수 있으며, 해당 코드에 대한 시각화 결과도 함께 저장된다.
• 사용자는 최근 실행한 코드에 대한 시각화 결과를 재생하거나 파일로 다운로드할 수 있어야 한다.
• 소스 코드를 입력한 후 실행 버튼을 누르면, 코드가 서버에서 컴파일되고, JSON 기반 애니메이션 시각화가 프론트엔드에 제공되어야 한다.
• 시각화 결과는 단계별로 앞으로/뒤로 이동하거나 자동 재생이 가능해야 한다.
• 사용자는 저장된 시각화 파일을 불러와 언제든지 재생할 수 있어야 하며, 이전 결과를 복원하기 위해 다시 컴파일할 필요는 없다.
비기능 요구사항	• 시스템은 Docker 기반으로 운영되어야 하며, AWS EC2에서 실행될 수 있어야 한다.
• 주요 브라우저(Chrome, Firefox, Safari, Edge)에서 호환되어야 한다.
• 사용자의 비밀번호는 BCrypt 알고리즘으로 암호화하여 저장되어야 한다.
• 코드 실행은 격리된 Docker 컨테이너 환경에서 수행되어야 한다.
• 코드 컴파일 및 실행은 5초 이내에 완료되어야 한다.
• 시각화 결과는 실행 후 8초 이내에 사용자에게 제공되어야 한다.
• 사용자 저장 데이터는 AWS RDS(MySQL)에 저장되어야 한다.

시스템 설계 (아키텍처, 모듈 설계)

| **구분

(인당 1건)**	담당자	사용 환경/언어/기능
클라이언트(프론트)	박소정	사용환경: Windows, IntelliJ, React, JavaScript, D3.js, React Router
언어: JavaScript, JSX, CSS
기능: 다크/라이트 모드, 페이지 라우팅, json 기반 시각화 애니메이션, 페이지 전환 시 스크롤 완화	- 구현 페이지 수 : 5개(애니메이션 포함 11개)

화면별 컴포넌트 수: 10개(헤더, 푸터, 메인 페이지 4개, 코드방송 2개, mypage 2개)
UI 상태관리 복잡도: useState 3개
CSS/스타일 시트 코드량: 2610줄
스크립트 수: 10개(애니메이션 포함 16개)
JavaScript/React 코드 줄 수: 1572줄 | | 클라이언트(프론트) | 채선웅 | 사용환경 - IDE: IntelliJ IDEA(React + JSX 개발), OS: Windows, 패키지 매니저: npm, 스타일: CSS, 라우팅: react-router-dom 언어 - Frontend: React, Styling: CSS, 통신: Axios, Icon: react-icons 기능 - 회원 인증: 이메일, 비밀번호 이용한 로그인/회원가입, 비밀번호 보이기/숨기기 토글, 실시간 이메일 형식 및 비밀번호 유효성 검사, 소셜 로그인 버튼 UI, 커뮤니티, 마이페이지 사이드바, 대시보드, 공유된 프로젝트 UI/UX, 다크모드 지원 | - 구현 페이지 수: 6개
화면별 컴포넌트 수: 8개(sidebar, config.js 포함)
UI 상태관리 복잡도: useState 만으로 지역 상태 처리
CSS/스타일 시트 코드량 : 6개의 시트, 3140줄
스크립트 수: 8개
JavaScript/React 코드 줄 수 :953줄 | | 클라이언트(프론트) | 윤동준 | 사용환경: React 18, JavaScript, Monaco Editor, React Router, CSS3, VS Code 언어: JavaScript/JSX 기능: 온라인 IDE 제공, 다중 언어 지원(Python, Java, C++, C, JavaScript), 실시간 코드 편집, 코드 실행, 알고리즘 시각화 애니메이션, 파일 관리 시스템, 사용자 인증/로그인, 다크/라이트 모드, 반응형 UI, API 연동을 통한 코드 실행 결과 표시 | -구현 페이지 수: 3개 -화면별 컴포넌트 수: 20개 -UI 상태관리 복잡도: 25개 상태변수 (Redux 없음, useState 기반) -CSS/스타일시트 코드량: 2,139줄 -스크립트 수: 18개 -JavaScript/React 코드 줄 수: 3,175줄 | | 클라이언트(프론트) | 김인성 | 사용환경: Chrome, React 기능: HashRouter 설정, api주소 관련 잔수정, merge충돌 해결 | - HashRouter처리, merge 충돌 잔수정, api 주소변경사항 반영 등 | | 서버(백엔드) | 한민정 | 사용환경: Java 17, Spring Boot 3.4.3, Gradle, IntelliJ, AWS EC2 (Amazon Linux 2), Docker 언어: Java 기능: REST API 제공, JWT 기반 로그인/인증, 사용자 관리, 권한(Role) 관리, 코드 실행 요청 처리(WebClient 사용), 관리자 전용 사용자 추가/삭제 기능, CORS 설정, 보안 설정(Spring Security) | - API 엔드포인트 개수: 10개
비즈니스 로직 함수 수: 14개
서버 코드 라인 수: 997줄
데이터 처리량 (배치 작업 수, 스케줄러 수 등): 현재 시스템에서는 주기적으로 실행되는 배치 작업이나 스케줄러는 사용하지 않습니다. 대신, 사용자 요청 시 실시간으로 처리되는 API 중심의 구조로 동작합니다. 향후 데이터 누적량 증가 또는 반복 처리 로직 발생 시, 배치 및 스케줄러 도입을 고려할 예정입니다.
보안/인증 모듈 수: 5개
- SecurityConfig: 전역 보안 설정 및 비밀번호 암호화를 위한 PasswordEncoder 설정
- ProdSecurityConfig: 프로덕션 환경에서 요청 필터링 및 인증 필터 적용
- JwtAuthenticationFilter: 요청에서 JWT를 추출하고, 사용자 인증 및 권한 등록
- JwtTokenProvider: 토큰 생성, 유효성 검사, 역할 기반 권한 추출 등의 JWT 핵심 로직
- UserService: 로그인 시 비밀번호 검증 및 토큰 발급 기능 포함 | | Spike(백엔드) | 김인성 | 사용환경: python, docker, html 기능: 컴파일러기능, 시각화기능, | - 구현 페이지(컴파일러/시각화) : 2개
Docker 이미지 수: 3개 (Python Compiler 1개, Java Compiler 1개, C Compiler 1개)
app.py(docker 실행, gpt api 호출) | | DB | 한민정 | 사용환경: MySQL 8.0 (AWS RDS 연동), JDBC, JPA (Hibernate), IntelliJ DB 도구 사용언어: Java(JPA) 주요기능: 사용자 정보 저장 및 조회, 사용자 상태 활성화/비활성화 관리, 유니크 제약 조건(userId, connectId), JPA 기반 CRUD 처리, 자동 테이블 매핑, 쿼리 메서드 기반 조회 (findByUserId, findByEmail, findByIsActiveTrue) | - 테이블/컬렉션 수: 1개
컬럼 수: 9개
쿼리 수: 3개
인덱스 및 트랜잭션 수 : 3개
데이터 마이그레이션 스크립트 라인 수: 0개 | | UI/UX | 윤동준 | 사용 환경 : 웹 기반 (크로스 플랫폼), Chrome, Firefox, Safari, Edge,반응형 디자인, WCAG 2.1 AA 준수 언어: Next.js 14, React, TypeScript, Tailwind CSS, shadcn/ui,Framer Motion,React Hooks (useState, useEffect),Lucide React 기능 : 코드 에디터 및 시각화 실시간 코드 방송 커뮤니티 플랫폼 사용자 관리 시스템 대시보드 | -총 디자인 시안: 15개 메인 페이지: 1개 IDE/에디터: 3개 대시보드: 2개 커뮤니티: 2개 마이페이지: 4개 방송 페이지: 2개 로그인/회원가입: 1개 -와이어프레임/프로토타입 페이지 수 와이어프레임: 12페이지 고해상도 프로토타입: 8페이지 인터랙티브 프로토타입 5페이지 -사용자 피드백 수용 건수 UI/UX 개선: 8건 기능 추가 요청: 5건 성능 최적화: 3건 접근성 개선: 2건 총 반영 건수: 18건
디자인 리소스 파일 수 아이콘: 45개 (Lucide React 라이브러리 활용) 이미지 자산: 8개 랜딩 페이지 시각화 이미지: 6개 플레이스홀더 이미지: 2개 컴포넌트 라이브러리: 25개 (shadcn/ui 기반)
애니메이션/인터랙션 수 페이지 전환 애니메이션: 3개 컴포넌트 애니메이션: 12개 버튼 호버 효과: 5개 모달/드롭다운 애니메이션: 4개 로딩 애니메이션: 3개 인터랙션 효과: 15개 | | 배포 및 CI/CD | 김인성 | 사용환경: React, Godaddy, Github Pages, GitHub Actions, Nginx (API Gateway) 기능 : 프론트페이지 자동배포처리, ssl https 보안처리, 도메인처리 | - GitHub Actions Workflow 수: 1개 (Frontend 배포)
배포 기준: main에 PR이 merge 될때
Nginx API Gateway 설정 파일 라인 수: 약 30라인 수정(백엔드 배포된 Ec2 환경)
certbot 패키지 사용(ssl 인증)
http 강제 https 리다이렉션 처리 및 https 보안통신
zivorp.com 도메인처리 | | 배포 및 CI/CD | 한민정 | 사용환경: AWS EC2 (Amazon Linux 2), Docker, GitHub Actions, Nginx (API Gateway) 주요 도구: GitHub Actions, Docker Compose, MySQL (AWS RDS), IntelliJ, GitHub 기능: 전체 서비스 (Spring Boot Backend + 언어별 Compiler Service) Docker 기반 통합 배포, GitHub Actions 기반 자동화된 CI/CD 파이프라인 구축 및 운영 | - GitHub Actions Workflow 수: 2개 (Spring-Backend 배포, Flaks-Server 배포)
Docker 이미지 수: 5개 (Spring-Backend 1개, flask-server, Python Compiler 1개, Java Compiler 1개, C Compiler 1개)
배포 기준: main에 변동이 생겼을 때(merge, push)
Docker Compose 서비스 정의 수: 5개 (Spring-Backend, flask-server, Python Compiler, Java Compiler, C Compiler)
GitHub Actions Workflow 평균 실행 시간: 약 1분 30초
배포 빈도: 주 3~5회
EC2 인스턴스 수: 1대 (Application Server 겸용)
RDS 인스턴스 수: 1대 (MySQL 8.0) |

개발 및 구현 (Github 작업 기반)

개발자명	Commit 수	Commit 수행 일 수	추가 줄 수	삭제 줄 수	Pull Request 수	Issue 수
김인성	23	6	18,906	19,587	20	1
한민정	25	11	2,116	365	10	9
박소정	17	5	24,632	1,668	8	3
채선웅	31	6	3947	1,234	15	2
윤동준	26	6	10,634	2,657	11	0

문제점 및 해결방안

개발자명	담당파트	문제점(계획대비 도달하지 못한 목표, 개발 변경된 항목)	해결방안(적용대안, 향후 계획)
김인성	PM / 구조개발	ast 해석이 상당히 고수준으로 보임	1학기 발표는 gpt를 통해 시각화용 ast 추출하는 것을 목표로 함
한민정	백엔드 및 DevOps	Docker 경로 설정으로 인해 생각보다 시간을 많이 소모하여 클라우드 파일 저장 기능과 커뮤니티 기능을 구현하지 못함	핵심 기능인 컴파일러 개발에 몰두, 클라우드 파일 저장과 커뮤니티 기능은 하계방학에 구현 예정
박소정	프론트엔드	애니메이션 구현이 생각보다 어렵고, 일부 애니메이션에서 요소가 단계 진행 중 사라졌다가 나타나는 문제가 있음	아직까지 해결하지 못했고, 차후 시간을 더 투자하여 해결할 예정
채선웅	프론트엔드	실제 기능을 구현하지 못한 페이지들이 있음	하드 코딩으로 UI/UX를 구현했고 이후에 API 연결 예정
윤동준	프론트엔드	애니메이션 구현이 예상보다 복잡하고 모달 창 내 레이아웃 조정이 어려움, 애니메이션 오버플로우 시 확대/축소 기능 미구현	스크롤 가능한 애니메이션 영역으로 임시 대응, 향후 줌 컨트롤 및 반응형 애니메이션 크기 조정 기능 추가 예정