[ je개발 회고 ] H/F 프로젝트 회고 (2) - H 프로젝트

1. H 프로젝트 기획, UI/UX 기획

  처음에 기획부터 해야한다는 것이 어려웠다. 기획을 한다는 것은 그래도 어느 정도 우리가 어느 서비스를 제공하는지에 대한 이해를 바탕으로 해야하는데 그 부분이 매우 약했기 때문에 데이터에 대한 이해도도 떨어지면서 기획을 해나가는 부분이 매우 힘들었다. 심지어 이 프로젝트는 우리 회사의 많은 데이터를 다루는 것을 목적으로 하고 있었다. 신입 2개월 차, 심지어 코드 스테이츠를 막 수료하고 나서 바로 취직이 된 거였으니 개발이란 것을 알게 된지, console.log('hello') 를 찍고 신기해 한지 8개월 째인 내가 회사의 그 수많은 데이터를 어떻게 보여줄지를 고민하고 있다니. 내가 내린 결론은 나는 절대 좋은 기획을 낼 수 없다. "물어보자" 였다. 

 

  그렇게 해서 첫 번째 우리 회사 도메인들은 어떻게 데이터를 보여주고 있는지를 확인했다. 어찌됐든 우리 회사의 데이터를 보여주는 거니까 우리 회사의 도메인이 알아서 잘 보여주고 있지 않을까? 라는 생각에서 시작했다. 우리 팀 도메인은 Highcharts 라는 차트 라이브러리와 Ag-Grid 라는 그리드 라이브러리를 활용해서 데이터를 보여주고 있었다. 다른 개발팀 담당 도메인들도 마찬가지였다. 데이터를 보여주는데는 차트 아니면 표 이 두 가지였다. 

 

  두 번째 확인한 것은 이전에 있었으나 개발하지 못했던 요구사항을 확인했다. 아무래도 요구사항이 있었다고 하면, 그것은 실제 단순히 차트와 표를 보는 것 이외에 추가적으로 필요한 기능이 있었던 것을 의미한다. 그렇다면 그 기능을 개발한다면 실제로 반기는 사용자가 있을 것이기도 했고, 기존에 있는 도메인 서비스들과 겹치지도 않으면서 실제로 사용할 수 있고 쓸모가 있는 도메인을 만들 수 있을 거라 생각했다. 그때, 사수가 얘기해준 것은 "Excel 로 조회한 데이터들을 한 번에 다운로드 받았으면 좋겠다" 라는 요구사항이었다. 기존에는 표로 되어 있는 데이터들을 하나 다운 받고, 다시 하나 다운 받는 방식이었다. 이것은 우리 전사의 모든 도메인이 그렇게 디자인 되어 있었다. 

 

  그래서 내가 기획하기에는 "우리 회사에서 관리하는 모든 데이터들을 조회하고, 그 조회한 모든 데이터들을 Excel 파일로 한 번에 다운로드 받을 수 있는 서비스"를 만들어보기로 기획했다. 

 

  그렇게 생각을 하고 나니 UI/UX 의 좋은 레퍼런스가 떠올랐다. 바로 Excel 이다. 진짜 Excel 의 UI 나 기능을 따라가지는 않지만, Excel 과 유사한 형태로 UI/UX 를 디자인해서 직관적으로 Excel 파일을 연상할 수 있도록 하는 것이 UI 의 주된 목적이었다. 

 

  정리한 플로우는 다음과 같다

 

1. 최초에 사용자 접근시에 Tab 하나가 활성화 되어 있다. 

2. Tab 하나에 우리 회사 데이터들 중 조회할 데이터 하나를 선택할 수 있다.

3. 조회에 알맞는 조건들(SQL Query 의 WHERE 문으로 쓸 수 있는 것들. 예를 들면 조회 기간, 날짜 단위_1분/15분 등) 을 설정한 후 조회 버튼을 누르면 조건에 맞는 데이터들이 표로 그려진다

4. Tab 은 여러 개를 활성화 시킬 수 있고(즉, 여러 데이터를 조회할 수 있고) 만든 Tab 은 삭제할 수 있다.

5. Tab 의 이름은 수정할 수 있다.

6. 단일 Tab 하나에 그려진 표를 CSV 다운로드, Excel 다운로드를 할 수 있다

7. 현재 만들어진 모든 Tab 에 저장된 조회 데이터들을 모두 Excel 한 파일에 저장한다

8. 이때, Tab 하나가 바로 Excel 의 Sheet 와 1:1 매칭이 된다 

9. Tab 의 이름은 Sheet 의 이름이 되고, Tab 에 그려진 데이터 표는 Excel 에 그려질 표가 된다

 

  그리고 이를 바탕으로 UI를 만들고 개발을 시작해서 완성했다.

 

2. H 프로젝트 개발

  하... 진짜 너무 힘들었다. 힘들었던 가장 큰 이유는 배워야할 게 너무 많았기 때문이다. Vue 를 쓰는 것도 처음이었다. 심지어 릴리즈가 얼마 되지 않은, 레퍼런스가 별로 없는 Vue 3버전이었다. Typescript 도 처음이었다. 가장 메인 라이브러리인 Ag-grid 도 처음이었다. 상태 관리 툴인 Pinia 라는 라이브러리도 처음이었다. 개발과 관련된 모든 것이 다 처음이었다. 그러나 기한은 2주였다. 

 

  이게 2주가 될 수밖에 없었던 게, 한 달에 한 번 하는 발표인데 기획하는데만 1~2주가 걸렸다. 그리고 그 전에 내가 코로나에 걸려서 회사에 나오지를 못했다. 나는 코로나에 좀 세게 걸린 편이라 열이 39도 까지도 올라가고. 아주 장난이 아니었다.  그렇다보니 시간이 너무 지체됐다. 코로나 후유증으로 컨디션도 안 좋아서 제대로 발표를 마무리 할 수 있을까 걱정이 됐다.

 

   그러나 결국 해냈다.

 

  코로나 때문에 휴가와 재택 근무를 했는데 그때 진짜 Vue 와 Typescript 공부를 아주 그냥 이를 갈면서 어떻게든 머리에 때려 박았다. 이때, 지금까지도 무용담처럼 떠돌아다니는 게 Inflearn 의 캡틴 판교 Typescript 강의를 3일 만에 완주해버리는 기염을 토해낸다. 그 머리 39도 펄펄 나는 와중에 그렇게 공부를 했다. 증거 자료는 아래에 있다.

 

https://github.com/Je-chan/typescript-study-inflearn/commits/main

GitHub - Je-chan/typescript-study-inflearn

 

  지금 생각해도... 참... 대단하다 대단해. 어떻게 그렇게까지 공부를 했지. 지푸라기 잡는 심정으로 엄청나게 빠른 속도로 라이브러리들을 학습했고, 진짜 어떻게든 기능이 구현되기만을 바라는 마음으로 엄청 코드를 와장창창 써내려갔다. 그 전에 발표했던 게 TDD, Storybook 이었는데 TDD 고 뭐고, 디자인 시스템이고 뭐고 다 필요 없이 오로지 기능 구현 만을 바라보면서 엄청 달렸다. 그리고 결국 구현해냈다. 

 

   ...하지만 이렇게 짠 아키텍쳐와 코드들은 이후에 스노우볼이 되어 F프로젝트에 거다란 화가 되어 돌아온다. (첨언: 이랬던 경험이 있어서 그런가. 지금 나는 유지보수하기 좋은 코드와 에자일한 개발에 대한 열망이 크다) 

 

 

3. H 프로젝트 UI 리팩터링

  어찌됐든 기능은 구현됐으니 참 다행이다. 하지만, 이 프로젝트의 UI 는.... 나는 디자이너가 아니라는 것을 절실하게 느끼는 시간을 가져야만 했다. UI 에 대한 엄청난 피드백이 들어왔다. 그룹장님은 이건 지금 중국산 UI 라고까지 하셨다... 근데 솔직히 그렇게 들을 정도까진 아니라고 다들 말해줬다. 하지만, 어쨌든 UI 가 어디에 밖으로 내놓기에는 안 되는 그런 디자인이긴 했던 것 같다. 그래서 UI 를 엄청 많이 바꿨다. 사실, 지금도 바꿀 계획이 있다. 이제 F 프로젝트가 완전히 릴리즈 되면 H 프로젝트의 기능도 일부 릴리즈 할 예정인데, 그때 내가 디자인한 이 UI 도 세상 밖으로 나오게 된다. 그래서... UI 를 어떻게 하면 "대학생 공모전 수준" 이 아니라 "기업의 전문 자료 수준" 으로 보이게끔 할 수 있을지.. 그게 고민이다. 애초에 이 도메인의 메인 색상이 주황색인데... (주황색일 수밖에 없는 이유가 있긴 하다) 어떻게든 잘 만들어 보자.

 

 

4. 결론

  서비스의 처음 기획, 디자인, 개발, 그리고 운영까지. 모든 것을 신입이었던 내가 할 수 있었던 것은 진짜 귀한 기회였다고 생각한다. 덕분에 회사의 데이터에 대한 이해도 높아졌고, 어떻게하면 데이터들을 효율적으로 운용할 수 있는지에 대한 고민을 많이 해본 것 같다. 왜냐하면 회사의 많은 데이터를 다루는데 이것을 하나의 도메인에 보여주자니, 데이터를 정리하고 그 각자 다른 데이터들을 하나의 UI 컴포넌트와 라이브러리로 보여주기 위한 중간 processing 과정에 굉장히 많은 시간과 비용을 들일 수밖에 없었기 때문이다. 물론, 내가 내리는 결론이라고 해봤자 아직 1년차 밖에 되지 않은 얕은 경험에서 비롯된 생각이겠지만 그럼에도 다른 사람이 그렇다 하더라가 아닌, 내 경험에서 비롯된 생각을 할 수 있게 됐다는 게 좋은 것 같다. 

   

 

5. 레퍼런스

  그 당시에 내가 작성했던 개발일지들이다. H 프로젝트와 관련된 내용이 담겨 있다.

 

https://je-developing.tistory.com/217

[ je 개발 일지 ] 73일차(교훈 있음), "위기 혹은 기회 - 설계 단계의 애송이"

https://je-developing.tistory.com/219

[ je 개발 일지 ] 75일차(교훈 있음), "개인 공부 < 회사 일 (2) / 겸손해지기"

https://je-developing.tistory.com/227

[ je 개발 일지 ] 82일차, "많은 데이터를 어떻게 처리할지 고민 - 코드 작성보다 설계의 문제"