[엘리스 AI 트랙] 마지막 프로젝트 중간발표까지

Elice

마지막 프로젝트 중간발표까지 우리의 여정

주제는 정해졌다, 개발은 누가할래?

주제는 정했어, 개발은 누가할래?

다른 팀보다 다소 늦었지만, 인공지능 웹서비스 프로젝트 2주차가 지나며 최종적으로 주제는 정해졌다.

화풍 분석 및 화풍 전이를 통해 미술에 대한 흥미를 유발하는 서비스를 주제로 우리는 지난주까지 와이어프레임 및 스토리보드, 기획 초안을 짰고 그에 따른 개발을 시작해야했다. 

개발 3주차가 마무리되는 시점에 중간발표도 있었기 때문에 어느정도 구현을 해놓아야 보여줄게 있지 않을까라는 조급한 마음이 들었던 것도 사실이다.

거기다 우리는 백엔드와 프론트엔드 모두 새로운 프레임워크를 도입하려고 하였기 때문에, 그에 따른 프레임워크 공부까지 곁들이다 보니 정말 개발하는 시간이 정신없게 흘러간것 같다.

최종 확정된 기술 스택 및 라이브러리

프론트엔드 팀원의 의견을 반영하여, React 기반의 next.js를 도입하고자 유튜브, 구글링의 도움을 받아 단시간동안 공부를 하였다. 새로운 프레임워크를 도입하는 만큼 next.js의 다양한 장점을 활용하기 위해 생각보다 개발 시간에 학습시간이 많이 들어간것 같다. 

(진짜 에러가 너무나 많이 나타나서 에러 해결하는 시간도 만만치 않았다...)

뿐만 아니라 이때 멍청하게도 휴대폰과 지갑을 도둑맞아서 경찰서 들르고 하느라 더더 정신이 없었고...스트레스에 몸살에 더더더 정신이 없었다.

진짜로 예상하지 못했던 수 많은 에러들

Error 1

Error 2

Error 3

React 기반이라 많은 것이 유사했지만, 또 상대적으로 많은 것들이 사용하는 방법들이 달랐다. 기본적으로 react만 사용했을 때 쉽게 적용되던 문제들이 왜이렇게 안되는게 많은지 몰랐고 매번 구글링하느라 많은 시간을 잡아먹었던 것 같다. 위의 에러들은 발생한 에러들의 빙산의 일부.....

기본적으로 프론트엔드 환경세팅은 팀원중 내가 도맡아서 하려고 했다.

개인적으로 필자는 antd library 기본 모드가 정말로 못생겼다고 생각한다. 다양한 기능을 제공하고 커스텀도 편하기 때문에 약간 울며 겨자먹기 식으로 사용하긴 하는데....일단 처음에 우리는 이런 다양한 기능을 제공하기에 antd를 쓰되, 커스터마이징된 것을 사용하기 위해 구글링을 통해 next.js에 적용하려고 하는데, 진짜 에러가 에러가 에러가 에러가....해결이 되지 않는다. 결국 시간만 잡아먹고 제대로 우리는 과감히 갓 material-UI로 갈아탔다. 음...더 만족스러워(아직까지 기본 제공하는 컴포넌트는 적지만 antd 보다 예쁘다 좋다...)

material-UI 

우여곡절끝에 airbnb Eslint도 적용하고(물론 이때까지 적용이 제대로 안된줄 몰랐다) 3주차 초반에, 프론트엔드가 사용할 대표적인 라이브러리 및 스택은 정했다.

인공지능까지 담당하는 희지님은 우선 인공지능이 마무리될 때까지 은선님과 내가 프론트엔드 개발 부분을 최대한 많이 해놓자는 목표를 세웠고, 우선 당장 코앞에 다가온 중간발표(11/27)까지 은선님이 메인페이지, 내가 화풍분석페이지를 맡아서 하고자했다.

화풍분석페이지 와이어프레임 1

화풍 분석 페이지 와이어프레임 2

와이어프레임을 바탕으로 디자인 및 기능으로 구현하기 위해 부단히 노력했는데, 진짜 원하는 라이브러리를 쓸 때마다 무수한 에러가 나타나서 적용이 안되었다... 구글링을 해도 솔루션이 나오지 않아서 정말 막막했다...그냥 CRA로는 잘만되는데!!! CNA로하면 왜 안되는거야!!!!!!!!!!!!!라며 진짜 이틀이라는 시간동안 십여개의 라이브러리를 사용하고 뜯어보고 했는데 결과적으로는 안되었다....그래서 이런 기능을 포기하면 안되지 우리 메인기능인데

안되면 내가 만들자 코드로

Dropzone과 관련되어 응용된 라이브러리를 사용하고 싶었는데, 쓰는 것 마다 제대로 안되고 나에게 무수한 에러들을 선사해주었다. 뿐만 아니라 그래프 부분에서도 계속 에러가...하(다시 생각해도 화가난ㄷ)

안되면 어쩌겠는가 내가 코드로 구현하면 되지

원하는 라이브러리들이 에러만 내뱉고 해답이 안나와서 React-dropzone 라이브러리를 바탕으로 직접 원하는 기능으로 커스텀을 했다. 

어떻게 어떻게해서 하나의 고비를 잘 넘겼나 싶었는데, 이번에는 해당 결과를 보여주는 그래프 라이브러리가...안되네...딱 원하는 그래프 모양만 안돼...에러가 나...

하...빡친다... 그래서 그냥 또 원하는 모양으로 최대한 비슷하게 만들었다.

나름 만족했고 팀원들한테 칭찬도 받아서 기부니가 좋았다.

차트 그래프

진짜 이 외에도 라이브러리를 사용하려고 하면 에러가 너무 많이 나타났고, 은선님도 희지님도 상당히 고생했을 것이다...

우리 팀에게 무관심했던 중간 발표 ...

진짜 모든 팀원들이 정말로 열심히 한덕분에 늦었지만, 어느정도 잘 가다듬어서 중간발표에 보여주고자 하는 부분을 다 구현할 수 있었다. (일부 팀원은 시연을 못한 팀도 있었기에 실제로 기능 작동까지 완벽하게 해서 나름 만족스러웠다)

중간발표 일정

이미지처리1팀인 우리는 중간발표에서 첫 번째로 발표를 하게되었고, 희지님께서 발표를 아주 Perfect하게 잘 진행해주셨다.

기능면에서도 라이브러리 대신 코드로 직접 구현한 것에 대해 마로코치님에게 칭찬을 받아서 너무 좋았지만, 뭔가 주제가 어려웠던 것인지 너무나도 피드백이 적었달까,,,,?

이후 발표한 팀에대해서는 코치님들이 피드백도 상당하고 추가적인 아이디어를 제시해주면서 보강하면 좋을 것 같다고 하셨는데, 우리팀은 첫 번째 발표라서 코치님들이 입이 덜 풀린건지 정말로 상당히 질문도 적었고 코멘트도 적어서 찝찝쓰하고 좀 아쉬웠던 발표였던 것 같다.

 

그래...뭐 어쩌겠는가 아쉬운건 아쉬운거지

우리는 남은 기능 잘 구현하고 서로에게 든든한 팀원이 되어주도록 잘 격려하고 남은 최종 발표까지 열심히 준비하자고 서로를 응원해주었다 ㅋㅋㅋㅋ

 

중간발표 이후 남은 2주간의 계획을 다시 정리하고 각자 역할을 분배한 뒤, 잘 마무리하도록 재충전의 시간을 가졌다.

 

2주간의 프로젝트 및 최종 데모데이는 다음 글에서 계속됩니다.