개발자에게 ‘이력(History)’은 단순한 나열이 아니라, 기술적 성장의 궤적이다. 기존의 단순 리스트 형태는 프로젝트 간의 시간적 관계나 병렬로 진행된 작업의 밀도를 보여주기에 역부족이었다. 이를 해결하기 위해 시간의 흐름을 시각적으로 조망할 수 있는 버티컬 멀티트랙(Vertical Multi-track) 인터페이스를 구현했다.

1. 시각화의 본질: 시간과 밀도의 표현

단순히 프로젝트를 시작일 순으로 정렬하는 것만으로는 “이 시기에 얼마나 바빴는가?” 혹은 “어떤 기술 스택을 동시에 다루었는가?”를 파악하기 어렵다. 이를 해결하기 위해 트랙 패킹(Track Packing) 알고리즘을 도입했다. 시간이 겹치는 프로젝트는 자동으로 옆 트랙으로 밀려나게 하여, 시각적 간섭을 없애면서도 병렬 수행 여부를 직관적으로 보여주도록 했다.

2. 레이블 충돌 문제와 해결 (Collision Resolution)

버티컬 타임라인의 최대 난제는 텍스트 가독성이다. 프로젝트 바 위나 옆에 단순히 이름을 적으면, 프로젝트가 밀집된 구간에서 글자가 겹쳐 읽을 수 없게 된다. 이를 해결하기 위해 ‘충돌 방지 알고리즘’을 적용했다.

1. 레이블을 프로젝트 바에서 분리하여 우측 전용 공간에 배치한다.
2. 레이블끼리의 수직 위치를 계산하여 겹치면 아래로 밀어낸다.
3. 원래 위치(프로젝트 바)와 이동된 위치(레이블)를 SVG 베지에 곡선(Connector)으로 연결하여 시각적 연관성을 유지한다.

3. 미래 지향적 시간 축 (Future -> Past)

일반적인 타임라인은 과거에서 시작해 아래로 내려갈수록 최신이 되는 경우가 많다. 하지만 포트폴리오 성격의 페이지에서는 ‘가장 최신의 성과’가 가장 먼저 보여야 한다. 따라서 시간 축을 역전시켜 페이지 상단이 ‘현재(미래)’가 되도록 배치했다. 또한 NOW 라인을 동적으로 계산하여 붉은색 실선으로 표시함으로써, 현재 진행 중인 프로젝트와 완료된 프로젝트의 경계를 명확히 했다.

4. 감성적 UX: 파스텔 톤과 인터랙션

딱딱한 데이터 시각화를 피하기 위해, 문자열 해싱을 통한 파스텔 톤(Pastel Tone) 자동 배색을 적용했다. 또한 사용자가 특정 프로젝트에 집중할 수 있도록, 바(Bar)나 레이블(Label) 중 하나만 호버(Hover)해도 양쪽이 동시에 강조(Scale Up + Highlight)되는 양방향 인터랙션을 구현했다.

최종적으로 구현된 페이지는 아래와 같다.

이번 리팩토링은 단순한 기능 추가가 아니라, ‘데이터를 어떻게 정보로 변환하여 전달할 것인가’에 대한 고민의 결과다.