나의 첫 번째 사이드 프로젝트, 중간 점검

이젠 진짜 사이드 프로젝트를 만들어봐야겠다.

전 React를 다루기 시작한지 2~3년이 되었지만 아직까지도 React로 만든 사이드 프로젝트가 존재하지 않습니다.
분명히 대학교 1학년 때 교내 스타트업에서 프론트엔드 개발자로 활동하고, React를 주제로 낸 온라인 강의도 있는데 진행했던 사이드 프로젝트가 하나도 없다는 것이 계속 마음 속에서 걸려왔죠.
그렇게 사이드 프로젝트 해야겠다, 해야겠다를 마음 속에서 반복한지 어연 2년이 지나고, 군대에 입대해 개인 블로그와 온라인 강의를 만들고 나서 사이드 프로젝트를 시작하게 되었습니다.
병장 달기 직전인 올해 4월 직전에 시작해서 실제 프로젝트를 만든 기간은 대략 47일로 이 타이밍에 제가 만들어 온 것을 중간 점검해보는 시간을 가지려고 합니다.

어떤 것을 만들었을까?

사이버지식정보방에서 연등 시간을 보내고, 5분이 남은 시점에서는 항상 Velog를 들여다보곤 합니다.
그러다 보니 거의 매일 사이드 프로젝트 후기, 기업 공채 합격 후기, 각종 기업 또는 동아리에서 진행하는 프로그래밍 교육 과정 수강 후기 등을 보게 되죠.
그렇게 Velog를 눈팅하다 머릿 속에 들어온 것이 우아한테크코스 프론트엔드 과정에서 진행하는 지하철 노선도 애플리케이션이었습니다.
평소에도 우아한테크코스를 듣고 싶은 마음이 커서 자주 찾아보곤 하는데요, 지하철 노선도 미션 후기 글을 본 이후에는 계속 저 미션만 찾아봤던 것 같습니다.

그런데 여기까지는 아직 이걸 사이드 프로젝트 주제로 삼자는 생각이 들지 않았습니다.
결정적으로 주제를 정하게 된 계기는 한 유튜브 동영상이었죠.
그 동영상은 무려 페이스북과 구글에서 소프트웨어 엔지니어로 근무한 경력이 있는 해외 개발자의 사이드 프로젝트 리뷰였습니다.

Clément Mihailescu님의 Pathfinding Visualizer 리뷰 유튜브 링크
Pathfinding Visualizer 프로젝트는 8분 41초까지만 보시면 됩니다.

전 처음에 저 동영상을 보고 큰 충격을 받았습니다.
아, 이 정도는 해야 구글이나 페이스북 프론트엔드 개발자로 일할 수 있는 건가? 싶었죠.
그런데 충격을 받은 동시에 한 번 도전해보고 싶다는 생각도 들었습니다.

그렇게 제 첫 사이드 프로젝트 주제를 정하게 되었죠.
바로 지하철 노선도를 직접 만들어볼 수 있는 애플리케이션을 개발해보자 였습니다.

그동한 관심있게 봤던 기술을 추가해볼까?

우아한테크코스 프론트엔드 과정에서 진행한 지하철 노선도 애플리케이션 개발은 백엔드 과정을 수강하는 크루와 함께하는 미션이었기 때문에 데이터 저장 및 처리보다 UI 처리에 더 많은 비중을 두고 개발을 진행할 수 있었을 것이라고 생각합니다.
하지만 저는 백엔드 없이 오로지 프론트엔드만으로 지하철 노선도 데이터를 관리해야 했기에 데이터 처리와 관리도 중요한 문제였습니다.
이를 위해서는 상태 관리 라이브러리가 거의 필수적이었는데, 저는 평소 Recoil을 활용해보고 싶다는 생각이 들었기 때문에 사이드 프로젝트에서 사용하기로 결정했습니다.

제 첫 사이드 프로젝트, Train Map Visualizer의 레이아웃

애플리케이션을 실행했을 때, 바로 보이는 화면은 위와 같습니다.
좌측 상단에는 각종 기능을 실행할 수 있는 아이콘이 담긴 위젯이 있고, 우측 하단에는 노선도를 확대할 수 있는 위젯이 있죠.
그리고 화면 중앙에는 사용자가 직접 지하철역과 호선을 그릴 수 있는 노선도가 존재합니다.
아직은 기능이 그렇게 많지 않아 레이아웃이 되게 간단합니다.

첫 번째 기능, 노선도 확대/축소 및 이동

가장 먼저 구현한 기능은 노선도의 확대 및 축소 기능입니다.
5월 초, 2~3일 정도의 연등 시간을 투자해 만든 기능으로 아직까지는 제가 원하는 단계까지 개발하진 못했습니다.
일차적으로 확대 및 축소 기능은 구현했지만, 저는 화면 정중앙을 기준으로 확대/축소되도록 구현하려고 했는데 그 부분은 해결 방법을 찾지 못해 일단 스킵하고 다른 기능을 개발했습니다.
아마도 끝부분에 가서 다시 고민해볼 것 같네요.

좌측 상단의 위젯에서 맨 첫 번째 아이콘이 보라색으로 활성화되어있는 것이 보이시나요?
해당 기능을 통해 마우스로 노선도를 자유롭게 이동할 수 있습니다.
사진 또는 일러스트 편집 프로그램에서 많이 볼 수 있는 기능이죠.
마우스를 클릭한 상태에서 끌면 마우스 커서 위치에 맞게 화면이 이동합니다.

두 번째 기능, 지하철역 추가

두 번째로 작업한 기능은 지하철역 추가 기능입니다.
좌측 상단 위젯에서 지하철역을 추가할 수 있는 세 번째 아이콘을 클릭하면 위와 같이 위젯이 나타납니다.
그리고 호선과 역 이름을 입력받죠.
입력받은 후에 해당 역이 중복되는지 검사한 다음, 중복되는 역이 존재하지 않는다면 추가하기 버튼이 활성화됩니다.
그 후에 원하는 위치에 지하철역을 추가할 수 있는 것이죠.

만약 중복되는 역이 존재하면 위의 그림처럼 추가하기 버튼 상단에 오류 메시지가 출력됩니다.
그리고 한글 2~5글자라는 역 이름 조건에 부합하지 않아도 오류 메시지가 출력되죠.

혹시 첫 번째 이미지에서 추가하기 버튼을 누르면 하단에 버튼 2개가 나타나는 것을 보셨나요?
왼쪽 버튼은 입력받은 정보를 수정할 수 있게 다시 위젯을 띄워주는 버튼이고, 오른쪽 버튼은 지하철역 추가 기능을 취소하는 버튼입니다.
위의 그림처럼 지하철역을 추가하려다가 정보를 수정할 수도 있고, 아예 추가하는 것을 취소할 수도 있습니다.

세 번째 기능, 지하철 선로 그리기

이 기능 구현하는데 진짜 힘들었습니다... 기능 구현도 만만치 않았지만 데이터 저장 및 처리 부분에서도 꽤나 많은 고민을 하고 갈아 엎기를 반복했습니다.
일단 방식을 먼저 설명하자면 노선도를 2중 배열로 두고, 호선을 그래프의 인접 행렬 방식으로 저장했습니다.
즉, 한 칸 마다 노드 넘버를 지정해주고 부여받은 넘버를 통해 인접 행렬 방식으로 호선을 저장한 것이죠.

실제로 추가할 때에는 지하철역에서부터 시작하지만 예시를 위해서 저렇게 그려놨습니다.
저렇게 11번 노드에서 12번 노드로 그리는 경우에는 그래프 인접 행렬 방식에 따라 사진에 있는 계산식대로 노선 객체를 저장합니다.
저렇게 해야 해당 노드에서 선로를 그려줄 수 있고, 나중에 구현하려는 길찾기 기능도 수월하게 개발할 수 있기 때문입니다.
그럼 실제로는 선로가 어떻게 그려지는지 확인해볼까요?

좌측 상단 위젯의 맨 마지막 아이콘을 클릭하면 선로 그리기 모드가 활성화됩니다.
모드가 활성화되면 선로를 그리기 시작할 역을 클릭해 차례대로 그려나가면 됩니다.
그리기 시작할 역을 클릭하게 되면 자동으로 해당 위치에서부터 선택한 역의 호선 색으로 선로를 그려나갈 수 있습니다.
하나의 노드에서 커서의 위치에 따라 네 방향으로 그릴 수 있고, 해당 노선이 지나갔던 자리는 다시 그릴 수 없습니다.
당연히 호선이 이탈하지 않도록 예외처리도 해주었고요.
위의 사진에서는 동일 호선끼리 선로를 이어주었지만, 만약 호선이 다른 서울역과 사당을 이어주는 경우에는 어떻게 될까요?

위의 사진은 2호선인 사당역에서 1호선인 서울역으로 선로를 그린 경우입니다.
2호선 색으로 선로를 그리다가 다른 호선인 서울역을 만나게 되면 해당 역을 환승역으로 변경됩니다.
그에 맞게 서울역의 색과 호선 이름이 변하게되죠.

위의 지하철역 추가 기능과 동일하게 선로 그리기 모드를 활성화했을 때 하단에 나타나는 두 개의 버튼이 보이시나요?
왼쪽 버튼은 바로 직전에 그린 선로를 지우고, 이전의 위치로 돌아가는 버튼입니다.
오른쪽 버튼은 지금까지 그렸던 선로를 모두 지우는 버튼입니다.
이 기능도 개념은 간단했지만 구현이 꽤나 어려웠습니다.

지금까지 그린 선로의 위치를 스택 형태로 저장해 왼쪽 버튼을 누른 경우에는 가장 위의 요소를 꺼내 해당 위치 노선을 지웁니다.
오른쪽 버튼을 누른 경우에는 스택에 쌓인 모든 아이템을 조회해 모든 노선을 지우죠.
선로를 지우는 과정은 비교적 어렵지 않았지만, 그리기 위치를 되돌리는 부분이 꽤나 어려웠습니다.

이렇게 그려왔던 선로를 되돌리거나 아예 취소할 수 있습니다.

이제 선로 그리기 기능의 마지막 세부 기능입니다.
바로 환승역에서 선로를 그리는 기능인데요, 환승역은 최소 2개 이상의 호선을 가지고 있기 때문에 어떤 호선으로 선로를 그릴지 선택할 수 있게 해줘야 합니다.
따라서 선로 그리기 모드가 활성화된 후, 환승역을 클릭하면 어떤 호선으로 선로를 그릴지 선택할 수 있는 위젯을 띄워주었습니다.
아래 사진과 같이 사용자는 그릴 선로의 호선을 선택한 후, 선로를 그릴 수 있습니다.

먼저 1호선을 선택하고 그리다가 취소 버튼을 누른 후, 2호선을 선택해 선로를 그렸습니다.
만약 서울역에서 1호선 선로를 그리기 시작해 사당역까지 선로를 잇는다면 사당역도 환승역으로 변경되겠죠?

사지방 연등 40일치를 갈아넣은 결과물을 보고서

처음에는 정말 막막하게 느껴졌습니다.
React를 시작한 때부터 군입대 후 병장이 된 지금까지 제대로 된 사이드 프로젝트를 해본적이 없었기 때문이었죠.
그래도 처음 며칠간 삽질을 좀 하니 점차 감이 돌아와 지금은 탄력을 붙여 프로젝트를 진행하고 있습니다.
이제 개발할 기능은 선로 또는 지하철역을 선택해 지우거나 정보를 변경하는 기능입니다.
그리고 마지막으로 그린 노선도를 통해 길찾기 기능을 이용할 수 있게 구현할 것입니다.
아직 개발할 것이 많이 남았지만 중간에 처지는 것 없이 꾸준하게 개발해 프로젝트를 완성할 수 있다는 것을 스스로 증명하고 싶습니다.
꼭 사이드 프로젝트를 완성하고서 내가 이걸 개발했구나 하는 뿌듯함을 느낄 수 있었으면 좋겠네요.