[Figma] To-Do APP 기획하기! (이름은 To-Do Today, TDT)

To-Do List CRUD가 가능한 APP의 디자인 및 기능을 기획하는 시간을 가져봤다.

심플함을 강조하며 메인 팔래트의 색상을 파란색, 회색으로 지정해서 해당 색상들을 이용하여 작업했다.

약 3-4시간 동안 한 결과물인데... 속도가 좀 더 빨랐으면 모든 인터렉션을 구현 할 수 있을 거라는 생각에 아쉽다는 느낌도 든다.

 

 

🌱피그마 내용

 

 

 

 

🌱시연동영상

 

완성

 

 

🌱잘한 점

 

 - header, footer 컴포넌트화 잊지않고 활용

 

 - 햄버거 버튼 눌렀을때 모션 부드럽게 나온다

 

 - 하단에 카피라이트 써서 뭔가 더 완성된 것처럼 보이는 부분

 

 - 목록 아래로 스크롤 했을 때 목록 부분만 스크롤이 되는 부분

( -> 목록을 컴포넌트화하고 사이즈 맞춰서 프레임을 씌워서 해결했다. 예전에 했던 건데 기억이 안나서 다시 찾아보며 복습할 수 있었다.)

 

 - 통계 그래프 형태 대신 깃허브의 잔디 심기처럼 구현한 점

 

 - 다른 팀원분들이 칭찬해줘서 뿌듯했다.

 

 - 어쩌면 기획도 잘 할 지도... ? UI / UX 쪽도 재밌을 것 같다는 생각이 들었다.

 

 

 

 

🌱아쉬운 점 및 개선할 점

 

 - 시간 부족해서 모든 인터렉션을 구현하지 못한 점

 

 - 목록이 클릭 됐을 때의 경우를 따로 그룹 컴포넌트화 했더라면 더 좋은 결과물이 나왔을 것

 

 - 달력 부분 엄두가 안나서 못 그렸는데 아쉽다

 

 - 통계를 깃허브의 잔디 심기처럼 구현을 해서 하루에 todo를 최대 15개까지밖에 구현하지 못한다는 단점이 있다

 

 - CRUD 기능이 없다. 까먹음... 일정을 등록하는 버튼을 추가하면 더 좋았을 것이다.

 

 

 

🌱목표

이제 해당 기획을 바탕으로 react로 구현해보기 !