[💻 코드스테이츠 FE 44기] 투두리스트 기획

✔️ 시작

피그마로 투두리스트 기획하는 작업에서 시간이 된다면 리액트까지 진행해 보는 시간을 가졌다.

📍 1차 - 기획 단계

✔️ 그림으로 그려보기

그림을 그리면서 틀을 잡아 보았다.
리액트로 작업에 들어갈 땐 컴포넌트는 비슷하게 나눴지만
이름은 좀 더 깔끔하고 직관적이게 수정했다.
Listbox >> TodoItem 이런식으로

✔️ 피그마로 작업하기

그림으로 그렸던 기획본을 토대로 피그마 작업을 진행했고
피그마로 작업하면서 UI/UX도 같이 개선 했다.

삭제 시 모달 창을 만들게 하려고 했는데 여러개를 이런식으로
물어본다면 사용자 입장에서는 귀찮다 생각할 거 같아 없애기로 했다.

디자인은 색감 고민하기에 시간도 부족하고 벤치마킹하던 중 블랙&화이트로도 충분히 예쁘게 작업된 모습을 보고 블랙으로 작업을 진행했다.

있어 보이기 위해 시작화면도 추가해 주었다...ㅎ

아직 완벽하게 피그마로 구현하지는 못했다.

좀 더 보완도 필요하고 더보기 메뉴 클릭 시 어떤한 내용을 보여줄지도 고민이다.

✏️ 마치며

뭐든지 기획 단계가 정말 중요하다고 생각한다.

과제를 진행하면서도 리액트까지 완료해야한다는 마음을 급급해
완성도 다하지 못한채 진행하다 보니 리액트로 작업하는 중간 중간 UX가 애매하다는 영역도 보였고
이번 과제는 다른 동기 분들의 결과물을 보면서 얘기하는 방식인데
다들 참신한 아이디어로 작업하셨다.

나는 틀에 밖혀서 투두리스트로 딱딱하게 진행한 거 같아 아쉽다고 생각이 들었다.
다음에는 같은 기능을 구현하는 거라도 참신한 아이디어로 진행해 봐야겠다.