DSA 학습 곡선을 낮추는 실시간 데이터 시각화 도구 AlgoTracker

Context

텍스트 중심의 DSA 학습 방식이 시각적 학습자에게 주는 진입 장벽 존재. 추상적인 알고리즘 개념을 실제 코드로 구현하는 과정에서 발생하는 인지 부하 발생.

Technical Solution

• 데이터 구조의 상태 변화를 실시간으로 추적하는 Step-by-Step 시각화 엔진 설계
• Selection Sort의 최솟값 탐색 및 스왑 과정을 인덱스 기반으로 시각화하는 로직 구현
• Insertion Sort의 데이터 시프트(Shift) 및 삽입 위치 결정 과정을 단계별로 렌더링하는 구조
• Binary Search의 탐색 범위 축소 과정을 시각적으로 표현하여 Linear Search와의 효율성 차이 증명
• 알고리즘별 시간 복잡도(Big O Notation)와 실제 수행 시간을 매칭하여 출력하는 분석 패널 구축
• Search와 Sort 알고리즘을 범주별로 분리하여 상호 비교 가능하게 만든 벤치마크 그래프 설계

Impact

• Selection Sort 10개 요소 정렬 시 0.1ms 소요 및 10단계 수행
• 10개 요소 탐색 시 Binary Search는 Linear Search(6단계) 대비 적은 3단계로 결과 도출

Key Takeaway

복잡한 알고리즘의 추상적 개념을 구체적인 상태 변화로 시각화함으로써 논리적 흐름의 이해도를 극대화하는 설계 전략.