WIL 11주차 (실전프로젝트 4주차)
📖 WIL 11주차 (실전프로젝트 4주차)
🌞 회고
⛅ 디자이너와의 이별..
이번주 우리팀에게 큰 문제가 생겼다. 바로 팀의 디자이너와 함께 하지 못하게 된 것인데 우리는 3주차까지 디자이너에게 계속해서 디자인작업을 요구하고 시안이나 디자인의 예시들을 드리며 소통했으나 1주차 와이어프레임초안에서 3주차가 끝나도록 바뀐것은 없었다. 차라리 빠르게 할 수 없을것 같다라고 포기하셨더라면 우리도 프로젝트 초기에 새로운 디자이너를 찾았겠지만 매번 당연하게 할 수 있다, 최대한 빨리 주겠다라는 말만 하며 미뤘었다. 드디어 4주차의 시작인 월요일에 첫 디자인을 받았는데 정말 처참한 수준이었다. 중학생이 했다고 해도 이상하지 않고 그림판으로 작업했다고 해도 믿을만한 말도 안되는 퀄리티였다. 당황했지만 디자이너도 팀원이고 앞으로 수정해 나가면 괜찮겠지란 생각을 했지만 디자이너의 황당한 말이 우리의 모든걸 바꿔놨다. 이것이 마지막 최종본이고 본인의 학업때문에 바빠서 수정해줄 수 없다는 것이다. 우리는 이것을 받아들일 수 없어 부트캠프의 운영팀에 도움을 요청했다. 운영팀 조차도 디자인의 퀄리티를 보고 놀라지 않을 수 없었고 전문 디자이너가 아니었던 것을 인정하며 (이제 막 디자인과를 진학하여 공부를 시작한 대학생이였으며 당연하게도 피그마를 사용할 줄 몰랐고 UI,UX디자인 자체를 모르는 사람이었다. 운영팀 측은 포트폴리오를 보고 채용했다고 했지만 그 포트폴리오 조차 UI,UX와 거리가 먼 순수미술분야였다.) 이례적으로 디자이너를 다시 구할수 있는 비용을 지원해줬다.
⛅ 실전프로젝트 4주차에 새로운 시작
우리는 결국 4주차에 기획단계부터 새롭게 해야했고 최대한 2주안에 결과물을 만들 수 있는 방향으로 기획하였다. 짧은 기간 완성도가 떨어저도 의도한 것처럼 보일 수 있도록 B급 감성으로.. 게임같은 기본 프로젝트 틀틀 이용해 픽셀을 이용하기로 했다. 열심히 디자이너를 구인해봤지만 일정상 디자인이 3~4일만에 나와야 했고 한정된 예산에 이것을 받아준 디자이너가 없었기에 결국 모든 디자인도 프론트엔드가 직접 하기로 했다. (다행인지 불행인지 난 디자인과를 졸업했다.) 와이어프레임도 없는 상황에서 즉석으로 디자인을 생각해가며 레이아웃을 만들고 기능을 넣는다는건 생각보다 힘든 일이었고 중간 중간 포토샵작업과 일러스트작업을 병행해야 했기때문에 첫주차때 계획한 일정보다 계속해서 늦어지고 있다.
🌞 완성된 캘린더와 투두리스트
-
디자이너가 있을 당시 MVP 단계의 캘린더와 투두리스트
-
완성된 내가 디자인한 캘린더와 투두리스트
- moment를 이용한 달력
- CRUD
- axios를 이용한 http요청
- Redux Toolkit을 이용한 전역상태관리
- Svg와 삼각함수를 이용한 도넛차트
우리 서비스의 중요 기능이라고 생각하고 디자이너가 나가기전 원래 계획대로 라면 투두리스트를 모두 완료시 캘린더에 스티커를 붙힐수 있는 단순한 디자인이였지만 내가 직접 디자인을 기획하며 투두리스트를 완료할경우 캘린더에 원형그래프로 투두리스트의 완료정도를 파악하게 만들었다. 이를 위해서 캘린더 라이브러리를 사용하지 않고 직접 달력을 구현하였으며 도넛차트 또한 라이브러리 사용없이 직접 코딩하였다. 또한 디데이 기능을 추가하였으며 추후에 알림 기능을 추가할 예정이다.
🌞 트러블 슈팅
카테고리를 추가하고 투두리스트 입력창을 열어 카테고리에 맞는 투두리스트를 추가할 수 있다. 하지만 .map() 함수를 이용해 그리고 있어 하나의 투두리스트 입력창만 열고 싶지만 모든 투두리스트 의 입력창이 열린다. 이를 해결하기위해 처음으로 .map()의 Index 파라미터를 제대로 사용해보았다.
undefined
const [todoInputShow, setTodoInputShow] = useState<any>([ false, false, false, false, ]);
undefined
function onSubmitHandler() { if (dateTodos.length < 4) dispatch(__postCategory({ categoryName: category, selectDate: date })); else { alert("4개까지만 생성가능"); } setCategory("");
}
undefined
function todoBoxIndex(index: number) { let temp = [...todoInputShow]; temp[index] = !temp[index]; setTodoInputShow(temp); }
🌳 Svg와 삼각함수를 이용한 도넛차트 참고자료
https://evan-moon.github.io/2020/12/12/draw-arc-with-svg-clippath/
🌳 이번주 나의 토양
https://velog.io/@leejpsd/forEach-map-filter-reduce-find
이번주 정말 많이 사용했던 배열 메서드들을 정리했다.