React 프론트 프로젝트 완. 료.

이 글은 알파코에서 진행 중인 [신한투자증권] 프로디지털아카데미의 과정에서 신윤수 강사님과 진행한 프로젝트를 기반으로 작성되었습니다.

 

 

 

0. 프로젝트 시작

 

프로젝트는 4명이 한 팀으로 구성되어 약 4주간 진행됐다. 기획부터 개발, 배포, 발표까지 꽤 많은 범위를 다루었는데, 특히 기획 단계에서 어떤 주제를 가져가야 할지 오랜 고민의 시간을 보냈다. 팀원 모두가 컴퓨터를 전공한 사람들이어서 금융에 대한 깊은 지식이 없었고, 투자도 아주 얕게만 하고 있는 수준이어서 현재 논의 중인 주제가 정말 의미가 있는가- 에 대한 토의가 계속 이루어졌다. 실제로도 여러 번 주제를 엎어서, 다른 팀들이 기능 명세나 ERD 를 작성하기 시작할 때도 우리는 기획에만 매달리고 있었다 .. 으악

 

 

 

1. 아이디어 기획

 

결국 평일 이틀 내내 아무 결론을 내리지 못하고 주말동안 더 디벨롭 해오자 ! 하고 헤어졌는데, 주말동안 다들 열심히 새로운 기획 + 원래의 기획 디벨롭을 해왔다. 기획 방향만 정해지면 그 뒤로는 빠르게 진행될 거라는 걸 알고는 있었지만, 그래도 우리 팀을 제외하고 모두가 앞서 나가는 느낌이어서 당시에는 걱정이 많이 됐었다 ㅠ

 

그렇게 각고의 노력 끝에 정해진 주제는 ETF ! 요즘 투자 시장에서 떠오르는 상품이기도 하고, 연금 계좌에서 ETF 를 운용할 수 있게 되면서 실제로도 많은 투자자와 자금이 유입되고 있다는 점에 주목했다. 실제로 이 부분에 대해 알아보다보니, ETF 를 비교해보기가 어렵다는 점을 알게 되었다. 구성 종목으로 검색이 불가능한 사이트가 많았고(현재 조금씩 기능이 업데이트 되고 있는 추세인 것 같다), ETF 끼리 한눈에 비교하기 어려웠다. 또한, 사용자 맞춤 추천의 경우에는 리스크 기반의 단순한 추천이 많아서 개인화 되어 있다는 느낌은 받지 못했다.

그래서 우리는 투자자가 ‘ETF를 어떻게 고르고, 비교하고, 확신을 가질 수 있는지’ 에 집중하고 싶었다. 단순한 ‘추천’ 중심이 아닌 ‘선택 기준을 제시하는 플랫폼’이라는 방향을 잡았고, 이를 바탕으로 Easy To Find 라는 이름이 탄생했다. (개인적으로 이 이름이 너무너무 만족스러웠다 ㅋㅋㅋㅋㅋ ETF 의 삼행시 버전인데, Easy To FInd 라는 문장에 우리가 추구하는 방향이 오롯이 담겨 있는 느낌^-^)

개발은 모든 팀원이 기획–개발–배포 전 과정에 관여하고, 필요할 때마다 서로 도와주는 유연한 방식으로 흘러갔다. 그 덕분에 더 많은 시행착오를 공유할 수 있었지만, 다음에는 역시 팀장을 정하고 가는 게 좋겠다고 생각했다. 서로의 업무 스타일이 다르다보니 팀장을 기준으로 밀고 나가는 방식이 보다 효율적으로 진행할 수 있을 것 같았다.

 

아무튼 ! 미니 프로젝트에 이어 이번에도 내 기획이 채택되어 뿌듯한 마음이 있었다 ! PB를 하는 친구의 조언이 많은 도움이 되었다. 

 

 

 

2. 본격 설계 및 개발

 

2-1. IA (Information Architecture)

 

아래와 같이 (초기) IA 를 작성하였는데, 보다시피 기획 중에도 수정된 부분이 많고, 마지막에도 거의 기능을 엎다시피 했어서 실제 우리가 개발한 서비스와는 약간의 차이가 있는 부분들이 있다. - 발표 5일 전까지도 가장 중요한 시뮬레이션 기능에 대한 로직과 개념이 팀 내부에서 정립되지 않아 굉장히 많은 고민이 있었다. - 하지만 ! 지금 돌이켜보면 정말 성공적으로 마무리 되었다고 생각한다. 금융과 관련된 시뮬레이션이다보니 기능 자체를 신뢰할 수 있느냐가 가장 중요한 포인트였는데, 이 부분을 끝까지 잡고 고민해준 태헌이에게 감사 인사를 전하고 싶다 ! 마지막까지 머리를 싸매던 모습이 아직도 선한데 정말 고생 많았다고 얘기해주고 싶다 !

 

이렇게 매우매우 긴 IA 가 나오게 되었는데, IA - 와이어 프레임 과정이 서비스 개발에서 가장 중요하다고 생각하는 만큼, 전체 흐름, 기능의 방향, 기능의 구현 디테일 등등 모든 부분에서 팀원들과 논의하고 합의하고 발전시키는 과정을 거치고자 했다. 

 

 

2-2. API 명세서

 

한국투자증권 API, KRX, ETFCheck 크롤링 등 외부 API를 연결해야 했다. 이 표에서는 API 개수가 적어 보이지만 실제로는 (특히) 상세 페이지에서 굉장히 많은 DB 테이블 연결이 필요했기 때문에 쿼리와 조인 등을 통해 데이터를 가져오는 것에 꽤 많은 시간이 소요되었다.

 

 

2-3. 와이어프레임

 

우리의 목표는 초보자가 사용하기 쉬운 탐색/비교, 맞춤 추천, 시뮬레이션 이었기 때문에 UI 가 굉장히 중요했다. 기존의 증권사 혹은 ETF 투자 사이트들은 오래된 디자인을 고수하는 경우가 많아 사실 사용자 친화적이지 않은 경우가 대부분이었다. 그래서 특히 투자 초보자가 많은 2030 세대의 눈에 익숙하고, 사용하기 편리하도록 디자인하려고 했다. 추구미는 삼성증권과 토스였다. 깔끔하면서도 전문적인 느낌을 가져가고자 했다.

개발에서 개인적으로 아쉬웠던 부분은 Lightweight charts 라이브러리를 완전히 커스터마이징 하지 못한 것이다. 주식 관련 전문? 차트여서 x축은 데이터 포맷이 지정되어 있었고 그래프 디자인 자체도 변경하기 까다로웠다. 기능 상으로는 전혀 문제가 없었지만 .. 디테일한 것까지 완벽함을 추구하는 나로서는 아무래도 아쉬움으로 남았다.

 

 

2-4. ERD

 

ERD 역시 마지막까지 필요한 데이터들을 추가하고 기능을 수정하고 하는 바람에 많은 수정이 있었다. 처음에는 최대한 정규화를 했었지만 오히려 조인을 여러 번 해야 해서 약 90만 건의 데이터를 불러와야 하는 우리 서비스 특성상 너무 오랜 시간이 걸려서 결국 다시 반정규화 상태로 되돌렸다. 지금까지는 정규화에 대한 내용만 배워왔고, 실제로도 정규화 하는 것이 효율적이었던 경우가 많았는데, 이번 기회로 인해서 반정규화의 장점을 깨달을 수 있었다 ! 지금 생각해보니 꽤나 의미 있는 경험인 것 같다 !

 

 

2-5. 아키텍처

 

서비스 배포를 위해 AWS EC2, RDS, Nginx, PM2 기반으로 구축했고, GitHub Actions를 이용해 CI/CD 도 적용했다. 배포를 해볼 기회가 많지는 않을 것 같아서, 이번에는 다른 팀원들도 경험해볼 수 있도록 자원을 받으려고 했고, 다영이가 배포를 맡아주었다. 처음이었음에도 큰 문제 없이 잘 마무리해주어서 마지막에 정신 없었던 개발 기간에도 안심할 수 있었다 !

저번 미니 프로젝트에서 배포를 해보긴 했지만, 아직은 익숙하지 않아서 기회가 된다면 최종 프로젝트에서 다시 한 번 배포를 맡아보고 싶다.

 

 

 

3. 트러블슈팅

 

내가 맡았던 페이지는 상세 페이지였는데 총 7개의 컴포넌트에서 각각 다른 DB 테이블을 불러와야 했다. 또한, 그 컴포넌트 안에서도 서로 다른 테이블의 컬럼들을 불러와야 해서 쿼리에 조인이 아주 버무려진 .. 코드가 탄생했다. 처음에 아예 정규화 되지 않은 상태로 개발을 진행했다면 내 파트를 먼저 끝내고 다른 친구들을 도와주거나, 더 디테일한 부분에 신경을 많이 쓸 수 있었을 것 같은데 그러지 못했던 부분이 많이 아쉽다. 다음에는 ERD 를 짤 때도 단순히 논리에 맞는지만 따지는 것이 아니라, 개발을 할 때의 편리성까지 다시 한 번 확인하는 시간을 거쳐야겠다고 생각했다.

 

 

 

4. 프로젝트 총 회고

 

이번 프로젝트는 본 프로젝트였던 만큼, 기획부터 설계, 개발, 배포까지 전 과정을 이전보다는 조금 더 큰 볼륨으로 경험할 수 있었다. 물론 아쉬웠던 점도 있었지만, 다음 프로젝트에서 반복하지 않으면 되는 거니까 ! 라는 마음으로 이 프로젝트를 잘 마무리하고자 한다.

마지막 일주일은 하루에 한두 시간밖에 자지 못할 정도로 매일 밤을 새다시피 해서 체력이 정말 바닥나는 게 느껴지지만, 그래도 잘 마무리했으니까 마음만은 가볍다 !

무엇보다 우리 팀원들을 만나서 이렇게 잘 마무리할 수 있어다고 생각한다. 서로의 강점을 파악하고, 적재적소에 역량을 발휘하도록 돕는 것이 semi 팀장으로서 중요한 역할이었던 것 같다. 나 역시 팀원들에게 도움이 되는 사람이었길 바란다 :)

태헌, 혜원, 다영아 너희 덕분에 재밌었고, 또 많은 성장을 할 수 있었어 ! 정말 고생 많았어 고마워 !