팀원들이 휴식을 취하고 있기에 다음주에 재배포 예정..ㅎ
1. 프로젝트 시작
우리는 프론트 4명 백엔드 2명의 팀이였다.
사실 이전 기수분들 팀플 발표를 보며 3명이면 프로젝트를 만드는데 힘이 들고 4명이면 프로젝트에 구현 할 부분이 적을 것 같기에 3명이 나을 것같다는 의견이 많았다.
하지만 나는 아직 동기분들에게 배울 부분이 많은 사람이라 4명이여도 좋았고 불행 혹은 다행스럽게 백엔드 동기분들이 소수셔서 대부분 4인 팀이였다.
첫 회의때 각자 하고 싶은 아이디어를 각자 이야기하였고
내 아이디어 행사 뉴스레터가 선정이 됐는데
우리가 수업에서 게시판을 구현해왔기에 게시판을 자유 게시판을 만들기보다 다른 팀원분의 여행친구 구하기 아이디어를 합쳐서 만들자고 하였다.
우리 기수는 협업 디자이너 분이 없었기에 크몽이나 지인을 통하여 디자이너를 고용하는 팀도 있었다..ㅎ
만들어진 피그마를 보는 것은 해왔지만 직접 만들어 본적이 없어서 정말 고민이 많이 됐다
그래도 그냥 우리가 해볼수 있을만큼 해보자! 어차피 우리도 현업에 가면 해야한다! 마인드로 와이어 프레임부터 해보기로 했다.
2. 와이어 프레임
이전 기수 분들의 예시 와이어 프레임을 봤을때
디자이너 분이 작업하신 것일수도 있겠지만 직접 손으로 그리신것 같았다.
쉽게 만들 수 있는 것이 무엇일까 하다가 팀원 분이 찾으신 사이트
https://ovenapp.io/ 를 이용하여 와이어 프레임을 만들었다.
내가 작업한 페이지...ㅎ
사실상 큰 틀만 잡고 무엇이 들어갈지 위치만 잡았다.
(실제 페이지랑 완전 달라짐..)
3. 피그마
피그마 작업은 처음이라 커뮤니티를 통하여 물어보기도하고
유투브 강의들도 많이 찾아봤었다.
( https://youtu.be/ESxsgBYuMB8 )
디자이너를 구한 팀도 아닌 팀도 첫주는 퍼블리싱 작업을 해야하지만
수업 시에는 피그마를 보기만 했지 직접 다뤄보니 디자이너의 중요성이 더 느껴지고
Ui/UX에서 프로가 있고 없고의 차이가 느껴졌다 ㅠㅠ
하지만 피그마대로 작업한 페이지를 가지고 1차 피드백을 받았는데
여기서 우리 페이지의 문제점을 알수 있었다.
그건 바로.. 각자 분담한 페이지를 본인이 원하는대로 디자인을 하다보니
디자인이 각각 논다는 것이다!!!
그래서 우리는 하나의 디자인을 만들고 그것을 기준으로 알맞게 변형하여 사이트를 다시 만들었다.
퍼블리싱 작업에는 그래도 이제 익숙해졌기에 금방 다시 만들었고 현재의 디자인과 유사한 페이지가 되었다.
(그때는 몰랐다 내가 페이지를 4번은 다 갈고 다시 만들게 될줄은….)
그리고 로고는 텍스트로만 만든다면 내가 포토샵으로 할수 있겠지만
그림을 그려야하는 아이콘과 로고이미지는 완전 다른 문제였다..
친구의 동생의 친구분 중에 디자인을 하시는 분이 계신다길래
혹시나 하고 연락드리니 웹디자이너는 아니고 현업에서 일하시는 일러스트레이터분이셨다!!
정말 감사히도 다르다면 전혀 다른 분야지만 웹디자인쪽에도 흥미가 있으시다하여 아이콘과 로고를 만들어주셔서 조금이라도 맘편하게 작업하였다.
4. Api
학원에서 제공하는 api가 아닌 우리가 필요한 api를 직접 정하고 만들어야했다.
수업때처럼 이 api를 쓸수 있게 이것을 만드세요! 하고 만드는 것이 아니였다.
로그인부터 사소한 기능들까지 백엔드의 api 없이 할수 있는 것이 매우 적었다.
해봤자 라이브러리를 사용하여 편리성을 높이거나 라우팅 하는 것뿐…
5. 그리고 협업
백엔드도 프론트도 걸음마를 떼기시작한 학생이기에 아직 서로의 업무를 모르고 어떤것을 구현할수 있는지 어떤것을 할수 있는지 다 알수 없었다.
제일 중요하고 문제가 되는 것은 소통이였다.
프론트단에서 두루뭉술하게 이야기하면 백단에서는 이것을 이해할수 없었고
백단에서 이렇게 이용하면 될것같다 해도 프론트 단에서는 이용할 코딩을 하기 어려울수 있었다.
하지만 우리팀은 백단도 프론트단도 서로가 해줄것이라는 서로간의 신뢰…! 로 작업하였고
감정을 상해가며 작업하지 않아서 다행이였다.
그래도 추후 작업을 한다면 이렇게 해야겠다고 다시 한번 다짐한게 있다.
1) 백과 프론트의 소통창구는 하나로만 정하고 자주 소통해야한다.
우리는 자율성을 중요시하여 작업시간을 정하고 코딩하지 않았고 개개인이 편한 환경에서 작업하고자
디스코드 단체방에서 협의하고 요청하는 것으로 정하였다.
그러나 팀원중 한명이 단체방이 아닌 개인 dm을 통해 백의 팀원들에게 각각 연락을 하여
백단은 그 요청이 프론트팀에서 협의되어 더 중요한 일인줄 알았고
그 요청들을 먼저 처리하느라 우선 순위였던 일들이 밀릴수 밖에 없었다…
심지어 각각에게 연락하다보니 백은 동일한 코드를 각각 만드느라 충돌이 생겼다고 한다…ㅠㅠ
2) 서로의 영역을 터치하지 않아야한다.
데이터를 어떻게해라 뭐해라며 참견하는 것이 아닌 우리가 필요한 부분에 대해 설명을 하고 이해시켜야한다.
당연하지만 안지켜질수 있다.
우리 팀 백엔드는 정말 잘하시고 열심히하시는 분들이셨고 우리가 필요 기능을 설명하면 잘 구현해주셨다.
3) 각각 할수 있는 일들에 대해 이야기 해야한다.
예로 날짜 데이터 타입이 string 이든 date이든 프론트가 가공하여 사용할수 있기에 상관 없었으나
String 타입으로해야한다!라는 요청을 받아서 백엔드는 date 타입을 string으로 변경하는 작업을 하느라 시간이 소요되었다.
중간에 내가 그걸 발견하여 상관없으니 편하신대로 작업하셔라 했지만
이미 바꾼 코드를 또 다시 바꿀순 없으니..
그리고 우리는 리스트를 패치해올떄 Page를 나눈다는 것이 당연했지만 백엔드는 그렇게 해야한다는 것을 몰랐었다..ㅎ
당연하지 않은 것들이 더 많다는 것을 알아야한다.
6. 마무리 그리고 진짜 회고
사실 팀프로젝트 전만 해도 내가 할수 있을까?
다른 팀원에게 민폐가 되지 않을까? 라는 걱정이 더 많았다.
심지어 다음 기수 수업 도강하고 싶단 생각도 했다 ㅋㅋㅋㅋ
붙잡고 물어볼 멘토님들이 없었고 내가 물어볼 곳이라곤 팀원과 구글뿐ㅎ
다행히 내 성격이 타인에게 도움을 청하지 못할만큼 내성적인 편은 아니고
실력도 이렇게 하면 될줄 알았는데 되지않는다 정도로 설명할 수준이 였기에
다른분들도 손쉽게 도움을 주시곤 했다.
빛과 소금같은 우리 팀원분들 우리 동기분들 사랑… 아무튼 그거 해요 ㅠㅠ
그리고 또한 팀플동안 웹디자이너와 기획자의 중요성도 확실히 알게되었다.
디자인은 넘기기 쉬운 미세한 하나하나가 실제 페이지에서 너무 잘보였고
기획이 정확하지 않으면 해왔던 것들이 다 무너져버렸다.
실제로 기능을 구현하는 것보다 디자인과 기획에서 더 많은 시간이 소요되었으니깐…
아직 팀프로젝트 리팩토링 할 것이 많고 해야할 것도 많지만
코로나로 인해 1주 더 미뤄져서 더 오래 달려왔고
발표날에 3시간밖에 못잤었으니 이번주까지만 쉬고 다시 달려보려한다..!
우선 고장난 맥북부터 고쳐야지...ㅎ
