liminfo

Sort Algorithm Visualizer

10+ 정렬 알고리즘 시각화 교육 도구

인접한 두 요소를 비교하며 교환하는 가장 기본적인 정렬 알고리즘입니다.
Best: O(n)Avg: O(n²)Worst: O(n²)Space: O(1)
크기: 30
속도:
기본비교 중교환 중정렬 완료
비교: 0교환: 0

관련 도구

그래프 계산기불 대수행렬 계산기조합론소수 계산기

Sort Algorithm Visualizer 소개

정렬 알고리즘 시각화 도구는 버블 정렬, 삽입 정렬, 선택 정렬, 퀵 정렬, 병합 정렬, 힙 정렬 등 6가지 정렬 알고리즘을 실시간 애니메이션으로 보여주는 교육용 인터랙티브 도구입니다. 각 막대는 배열의 원소를 나타내며, 색상으로 상태를 구분합니다: 파란색은 기본 상태, 노란색은 현재 비교 중, 빨간색은 교환 중, 녹색은 정렬 완료된 위치를 의미합니다.

컴퓨터 과학을 공부하는 학생, 부트캠프 수강생, 기술 면접을 준비하는 개발자들이 알고리즘의 동작 원리를 직관적으로 이해하는 데 활용하는 도구입니다. 퀵 정렬의 피벗 기반 파티션, 병합 정렬의 분할 정복, 힙 정렬의 최대 힙 구성을 눈으로 직접 보면 의사 코드만 읽는 것보다 훨씬 오래 기억됩니다. 배열 크기를 10~80개 원소로 조절하고, 애니메이션 속도를 느리게 또는 빠르게 설정하여 알고리즘의 특정 단계에 집중할 수 있습니다.

모든 연산은 JavaScript 프레임 생성 방식으로 브라우저 내에서 완전히 실행됩니다. 선택한 알고리즘의 비교 및 교환 프레임 전체를 미리 계산한 후, async/await 타이밍으로 재생합니다. 서버로 데이터가 전송되지 않으며, 로컬에서 즉시 실행되어 완전히 안전합니다.

주요 기능

  • 6가지 정렬 알고리즘 지원: 버블 정렬, 삽입 정렬, 선택 정렬, 퀵 정렬(Lomuto 파티션), 병합 정렬(재귀), 힙 정렬
  • 색상 코드로 막대 상태 구분: 파란색(기본), 노란색(비교 중), 빨간색(교환 중), 녹색(정렬 완료)
  • 범위 슬라이더로 배열 크기를 10~80개 원소로 조절 가능
  • 애니메이션 속도를 1~100으로 조절 — 느리게 설정해 개별 단계를 분석하거나 빠르게 설정해 전체 흐름 파악
  • 시작 및 재설정 버튼 — 재설정 시 현재 크기 설정을 유지하면서 새 랜덤 배열 생성
  • 정렬 완료된 원소는 녹색으로 유지되어 알고리즘의 진행 영역을 실시간으로 추적 가능
  • 100% 클라이언트 사이드 프레임 생성 — 서버 호출 없음, 페이지 로드 후 오프라인에서도 동작
  • 다크 모드 지원, 모든 막대 상태별 구분된 색상 변형 제공

자주 묻는 질문

이 시각화 도구가 지원하는 정렬 알고리즘은 무엇인가요?

버블 정렬, 삽입 정렬, 선택 정렬, 퀵 정렬(마지막 원소를 피벗으로 사용하는 Lomuto 파티션), 병합 정렬(재귀적 하향식), 힙 정렬(최대 힙 기반) 6가지를 지원합니다. 각 알고리즘은 실제 비교 및 교환 순서를 충실히 재현합니다.

막대 색상은 무엇을 의미하나요?

파란색은 정렬되지 않았고 현재 검사 중이 아닌 상태입니다. 노란색은 현재 비교 중인 두 원소입니다. 빨간색은 교환이 진행 중인 원소입니다. 녹색은 최종 정렬 위치에 배치되어 더 이상 움직이지 않는 원소입니다.

가장 빨리 완료되는 알고리즘은 무엇인가요?

랜덤 데이터에서 퀵 정렬과 병합 정렬은 버블 정렬이나 선택 정렬보다 훨씬 빠르게 완료됩니다. 퀵 정렬과 병합 정렬의 평균 복잡도는 O(n log n)인 반면, 버블 정렬과 선택 정렬은 O(n²)입니다. 배열 크기를 60~80으로, 속도를 중간으로 설정하면 차이를 명확히 확인할 수 있습니다.

버블 정렬이 퀵 정렬보다 프레임이 훨씬 많은 이유는 무엇인가요?

버블 정렬은 최악의 경우 O(n²)번 비교를 수행해 크기 n 배열에서 약 n²/2개의 프레임을 생성합니다. 퀵 정렬은 평균 O(n log n)번 비교합니다. 50개 원소 배열에서 버블 정렬은 약 1,250프레임, 퀵 정렬은 약 280프레임입니다.

힙 정렬은 어떻게 동작하나요?

힙 정렬은 먼저 모든 비단말 노드에 heapify 연산을 적용해 배열로부터 최대 힙을 구성합니다(바텀업 방식). 이후 루트(최댓값)를 배열 끝으로 이동시키고 축소된 힙에 heapify를 반복합니다. 각 교환과 비교가 프레임으로 기록됩니다.

애니메이션 도중 일시 정지할 수 있나요?

언제든지 재설정 버튼을 클릭하면 애니메이션이 즉시 중지되고 새 랜덤 배열이 생성됩니다. 취소 메커니즘은 cancelRef 플래그를 사용해 다음 프레임이 표시되기 전에 재생 루프를 중단합니다.

삽입 정렬과 선택 정렬의 시각적 차이는 무엇인가요?

삽입 정렬은 다음 원소를 선택해 이미 정렬된 원소들 사이의 올바른 위치로 왼쪽으로 이동시킵니다. 정렬된 영역과 미정렬 영역의 경계 근처에서 주로 활동합니다. 선택 정렬은 미정렬 부분 전체를 스캔하여 최솟값을 찾고 앞으로 이동시킵니다. 매 패스마다 비교 마커가 미정렬 전체 범위를 훑는 것이 보입니다.

기술 면접 준비에 도움이 되나요?

네. 같은 배열 크기와 속도로 알고리즘들을 나란히 비교하면 시간 복잡도 차이를 직관적으로 체득할 수 있습니다. 병합 정렬의 균등한 병합 단계와 선택 정렬의 비효율적인 전체 스캔을 눈으로 비교하면, 코딩 인터뷰에 자주 등장하는 알고리즘 분석 개념을 자연스럽게 내면화할 수 있습니다.