<aside> ⌨️

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

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

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

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

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

<aside> 💼

팀 소개 (이력서 링크)

Product Manger: 김인성

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

</aside>

프로토타입 이미지 (해당시)

페르소나1

<aside>

이름: 김민준 나이: 21 직업: 컴퓨터공학과 대학생 배경: 컴퓨터공학과 2학년 재학생, 대학교 1학년 때는 기초 프로그래밍과 C언어 위주로 수업을 들었고, 2학년이 되면서 웹 개발과 앱 개발에 본격적으로 관심을 가지기 시작함. 최근엔 JavaScript, React, 그리고 Python을 활용한 간단한 웹/앱 만들기에 도전 중. 목표: 학업과 병행하면서 실력을 쌓고, 졸업 후에는 대기업 소프트웨어 개발자로 취업하고자 함. 행동 패턴

• 코드 작성 후, 종종 작동 방식을 이해하는 데에 어려움을 겪으며, 정보 습득이나 이해를 위해 시각적인 예시와 설명이 있는 개발 블로그를 참고함.

문제점

• 예제 부족 : 개발 블로그에서 다루는 예시/예제 외에 따로 테스트하는 것들에 대한 시각적인 정보를 얻을 수 없어 실제 학습하는 데에는 어려움이 있음.

가치관

• 효율적인 학습: 시각적인 설명(애니메이션, 다이어그램, 실행 순서 시뮬레이션 등)이 이해에 큰 도움을 준다고 생각함. </aside>

사용자 시나리오1

<aside>

목표: 김민준은 개인 프로젝트로 Python을 활용해 게시판 웹 애플리케이션을 개발 중이다. 게시물 목록에 다양한 정렬 기능(최신순, 조회수순, 추천순 등)을 이미 구현했지만, 자신이 작성한 코드가 제대로 된 정렬 로직인지, 그리고 자신이 원하는 정렬 결과가 맞는지 확인하고 싶다.

1. 온라인에서 교육용 시각화 도구 ‘디버깅 시각화 웹 IDE’에 접속한다.
2. 각 조건별 정렬 코드를 시각화한다.
3. 잘못된 부분을 발견하면 수정하고, 문제가 없다면 해당 기능 개발을 종료한다. </aside>

페르소나2

<aside>

이름: 이숙영 나이: 45세 직업: 대학 교수 (컴퓨터공학과, 알고리즘 및 프로그래밍 전공) 배경: 알고리즘과 자료구조, 프로그래밍 기초 수업을 다수 진행하고 있음. 학생들이 개념을 직관적으로 이해하고, 특히 코드 실행 흐름이나 재귀, 포인터, 트리 구조 등 시각적 이해가 필요한 부분에서 어려움을 겪는 것을 자주 목격함. 교수 본인도 복잡한 개념을 설명할 때 판서나 PPT만으로 한계를 느끼고 있음. 최근에는 실습 기반 수업의 효율을 높이기 위해 웹 기반 학습 도구에 관심이 많아짐. 목표: 학생들이 명확하게 이해하게 함으로써 반복 설명을 최소화해 여유 있는 수업 운영을 목표로 함.

행동 패턴

• 학생이 해당 내용을 이해할 때까지 같은 내용을 반복하여 설명함.

문제점

• 예시 부족 : ****같은 예제/예시가 기반이 되어 설명 받는 학생들의 이해가 떨어질 수 있음.

가치관

• 절차적 의미 : 단순한 코드의 실행 결과를 확인하는 것보다, 작동 과정 중심의 학습을 중요하게 여김. </aside>

사용자 시나리오2

<aside>

목표: 다음 주 자료구조 수업에서 학생들이 트리 탐색 알고리즘의 코드 실행 흐름을 시각적으로 이해할 수 있도록 한다. 단계별 시나리오:

1. 온라인에서 교육용 시각화 도구를 찾던 중 ‘디버깅 시각화 웹 IDE’에 접속한다.
2. 트리 탐색 알고리즘 코드를 시각화하고, 각 순회의 실행 흐름(함수 호출, 방문 노드 등)을 단계별로 애니메이션처럼 보여준다.
3. 실제 수업 시간에는 이 시각화된 결과를 바탕으로 학생들에게 흐름을 설명하고, 실습 시간에는 학생들이 직접 자신이 짠 코드의 흐름을 눈으로 확인할 수 있도록 안내한다. </aside>

제품 개발 목적 및 배경

<aside> 🥅

주제 선정 배경

제품 주제를 선정하게 된 배경에 대해 작성. →개조식 3문장으로 요약

• 팀원들은 효율적이고 직관적인 개발 및 학습 환경에 큰 관심을 가지고 있습니다.
• 복잡한 코드 디버깅과 자료구조·알고리즘 이해의 어려움을 문제로 인식하였습니다.
• 이를 해결하기 위해 실시간 코드 시각화와 인터랙티브 학습 기능을 갖춘 웹IDE 플랫폼을 개발하고자 합니다.

제품 개발의 필요성

제품을 개발해야 하는 이유(필요성)와 관련한 근거자료(2024년도 이후 자료로 제한, 뉴스기사, 논문 등)를 포함하여 개발 사유를 작성.→5건 이상 자료 조사하여 관련 사유를 작성 (링크 또는 상세 자료명 첨부)

• 최근까지도 코딩교육에 대한 프로그램과 관련된 학습자료가 만들어지고 있습니다.

코딩 교육 의무화 바람 ··· “형태 변해도 코딩 열풍 이어질 것”(뉴스)

자동 채점 시스템을 활용한 스택과 큐 자료 구조 학습 자료 개발(논문)

• 시각자료가 몰입도와 이해도를 향상시키는 것을 확인하였습니다.

화면 레이아웃이 학습자 몰입도에 미치는 영향 -대학 이러닝 학습 콘텐츠 중심으로-(논문)

분별 프롬프트 학습을 통한 고객 질의응답 데이터의 계층 구조 표현 및 시각화(논문)

디지털 환경에서의 정보 시각화를 위한 디자인 프레임워크 제안(논문)

요소 결정체 성장 실험 이해도 향상을 위한 시각화 및 예측 프로그램 개발(논문)

파이썬으로 구현한 육각형 기반 시각화 코딩 프로젝트 탐구(논문)

</aside>

제품 사용 타겟 유저

<aside> 👤

프로그래밍 교육자/학습자

</aside>

개발 성공 기준 (KPI, 3항목 이상 작성)

<aside> 🏆

기초 알고리즘 10종 이상 지원 (정렬, 탐색, 재귀 등)

정성적 평가 (참조논문은 하단 벤치마킹에서 찾아볼 수 있음)

• 사용자가 작성한 코드에 대해 시간복잡도와 공간복잡도를 분석하고, 결과를 BigO표기와 같은 직관적인 방식으로 제공한다.(채색 그래프의 Max Clique 점 집합을 모두 구하는 알고리즘)
• 변수 및 메모리 상태 변화가 직관적인 애니메이션으로 시각 처리 되도록 구성한다. (The Visual Debugger: Past, Present, and Future)
• UI는 튜토리얼 없이도 사용자의 사고 흐름을 자연스럽게 따라갈 수 있도록 구성한다. (Introduction to UI/UX Design: Key Concepts and Principles)

정량적 평가 (하단에 상세 내용 기재)

• 사용자 만족도 조사를 실시하여 서비스의 기능성, 편의성, 독창성에 대한 정량적 피드백을 확보한다.
• 실제 코드의 실행 결과와 시각화된 애니메이션 간의 일치도를 수치화하여, 시각화 기능의 신뢰성과 정확성을 정량적으로 검증한다.
• 정해진 작업(Task)을 수행하는 데 걸리는 평균 소요 시간을 기존 컴파일러 및 웹 기반 디버깅 도구와 비교 분석하여 효율성을 검증한다. </aside>

정량적 평가 상세 내용

• ✅ 사용자 만족도 조사