정렬 알고리즘의 시각화
이름: 서재연
📋제작 동기
정렬 알고리즘들의 정렬 과정을 한눈에 보여주는 프로그램이 있으면 좋을 거 같다고 생각했습니다. 원소들의 이동 과정 뿐만이 아니라 어떠한 원소들이 비교되는지, 어떤 원소들이 변경되는지도 프로그램의 기능 내에 삽입하여 정렬 과정에 대한 이해를 돕고자 제작하게 되었습니다.
⚙️제작 과정 소개
본 프로젝트는 다음과 같은 세 단계로 진행되었습니다.
- 정렬 알고리즘 구현
- 원소들의 바 그래프 표현
- 깜빡임 수정
정렬 알고리즘의 구현 부분에선 다음과 같은 3개의 정렬 알고리즘을 구현하였습니다.
- 버블 정렬
- 선택 정렬
- 삽입 정렬
각 정렬은 bubble_sort, selection_sort, insertion_sort의 함수로 구분됩니다.
그 후 각 원소들이 정렬되어 가는 과정을 ■ 문자를 이용하여 표현했습니다.
비교되는 부분은 파란색, 직접적으로 변경되는 부분은 빨간색으로 구분하여 어떻게 정렬이 진행되어 가는지를 보기 쉽게 표현하였습니다.
개발 초기엔 원소가 변경될 때 마다 system 함수를 이용하여 화면을 초기화하며 출력하는 방식을 사용했습니다.
하지만 원소의 개수가 많아짐에 따라 화면에 보기 불편한 깜빡임 현상이 나타나게 되었습니다.
이를 해결하고자 콘솔의 Cursor Position
을 조작해 직접적으로 비교/변경되는 부분만 재출력하도록 코드를 수정하게 되었습니다.
작동 방식
프로그램이 실행되면 다음과 같이 세 종류의 알고리즘 중 하나를 선택할 수 있습니다.

알고리즘 선택에 앞서, 0번의 배열 초기화를 통해 정렬할 원소의 개수를 설정할 수 있습니다.

자체적으로 각 비교를 보기 쉽도록 0.2ms의 시간 지연을 걸어두었기 때문에, 권장되는 원소의 개수는 30개 내외입니다.
초기화가 완료되었다면 다음과 같이 알고리즘을 선택하여 정렬 과정을 확인할 수 있습니다.
예시로 버블 정렬을 선택해 20개의 원소를 정렬해보겠습니다.
위와 같이 직접 변경되는 부분은 빨간색으로 표시됩니다.
아래는 각각 선택 정렬, 삽입 정렬을 선택한 모습입니다.
마찬가지로 직접 변경되는 부분은 빨간색, 비교되는 부분은 파란색으로 표시됩니다.
선택 정렬
삽입 정렬
💡느낀점
프로젝트를 완성한 후 원소들이 정렬되어 가는 과정을 보는 것이 뿌듯하게 느껴졌습니다.
해당 3개의 알고리즘 이외에도 다른 알고리즘을 삽입하지 못한 채 마무리해서 아쉬웠습니다.
다시한번 발전시킬 기회가 있다면 그것들까지 포함해 만들어보고 싶습니다.