이직을 하려고 인강들을 들으면서 React, Typescript 등을 학습했다. 강의 내에서도 실습 프로젝트가 있었지만 직접 프로젝트를 만들고 싶은 생각이 들었다. 포트폴리오 소재에 대해서 고민하던 중 회사에 재직하던 때 사수분께서 말씀하신 내 '주변에서 해결해야할 문제'가 무엇인지 먼저 찾아보라는 조언이 떠올랐다. 어떤 문제가 있을까 고민하다가 지저분한 내 방을 발견했다. 나는 청소를 무척 귀찮아했기 때문에 방도 지저분한 상태였다.
청소하기 너무 싫다..
그래서 떠올린 것이 "게으름뱅이를 위한 청소 투두리스트"이다.
발상
보통 투두리스트를 사용하는 이유는 "어떤일을 해야할지 생각하는 것"과 "실제로 그 일을 수행하는 과정"을 분리하는 게 더 수월하다는 느낌 때문이라고 생각한다. 내 경우에는 정돈되어있는 투두리스트를 보면 (착각일지언정) 이미 할일을 다 끝낸 것 같은 성취감이 들때도 있었다.
그런데 여기서 "어떤일을 해야할지 생각하는 것"도 더 쉽게할 수 있으면 어떨까라는 아이디어가 떠올랐다. 청소를 항상 하면서도 체계없이 한다는 느낌이 많이들었고 그것에 대해 고민하는 것이 피곤하기도 했는데, 여러가지 질문에 대답하기만하면 잘 짜여진 투두리스트가 생성된다면 하기 싫은 청소도 좀 덜 싫어지지 않을까?
기능1: 청소 투두리스트
먼저 <유저에게 설문을 받아서 투두리스트를 생성>한다는 아이디어를 구체적으로 생각해보았다.
- 주방, 거실, 욕실 별로 필요한 청소들의 리스트를 뽑는다.(청소태스크 리스트)
- 각 청소 태스크는 디폴트 여부와 우선순위, 난이도 등의 값들을 가지고 있다.
- 먼저 디폴트인 청소들만 우선순위별로 리스트를 만든다.
- 질문을 통해서 특정 청소를 리스트에 끼워넣거나 제거하거나 한다.(질문 리스트)
- 만약 우선순위가 같은 값이 있다면 어떻게 정렬할지 유저에게 물어본다.
- 이 과정을 거쳐 최종적인 "청소 투두리스트"를 생성한다.
기능2: 도면
친구에게 기본 아이디어를 설명했더니 방의 대략적인 도면을 확인해서 특정 구역(ex: 거실, 욕실, 주방 등)의 청소를 언제쯤 실시했는지 확인하는 기능이 있으면 좋을 것 같다고 말해주었다. 좋은 아이디어인 것 같아서 해당 기능도 구현하기로 했다.
- 청소 투두리스트를 생성할때 어느 구역을 청소할 것인지를 물어보는 질문을 넣는다.
- 선택한 구역에서 이미 생성된 것이 없다면 구역을 생성하는 과정으로 넘어가서 구역을 만든다.
- 도면 메뉴에서 청소를 한 지 오래된 구역일수록 배경색이 빨갛게 변한다.
대략적인 기능 그룹들
위의 내용들에 따라서 생각한 기능들의 그룹들을 생각해보았다. 추가적인 아이디어가 몇가지 있었지만 추린 후에 만든 "반드시 있어야 하는 기능들"의 목록이다.
- 유저의 대답에 따라 커스텀된 청소투두리스트 생성 기능
- 특정 구역에 청소를 언제했는지 직관적으로 확인할 수 있는 도면생성/수정 기능
- 로그인, 로그아웃 등의 앱의 기본기능
플로우차트
- mermaid를 사용해서 플로우차트를 그렸다.
- 도면 생성하는 단계를 어디에 추가해야하는지를 더 명확하게 결정하는 데 집중해서 그렸다.
- 도면 메뉴에서도 구역을 생성할 수 있게 해야한다는 것을 알 수 있었다.
- '체험해보기'부분은 로그인없이 어떤 기능을 제공하는지 알 수 있게 하기 위함인데 일단 추가적인 구현사항으로 정해두기로 하였다.
와이어프레임
- 카카오 오븐을 사용해서 작성한 플로우차트를 기반으로 와이어프레임을 만들었다.(카카오오븐 링크)
- 작업을 하다보니 배경색 등의 스타일등도 추가했는데 촌스러워 보였다. 어쩔 수 없는 부분이라 생각하고 material ui나 daisyUI 같은 디자인시스템을 활용해서 조금이라도 개선해야겠다고 생각했다.
- UI/UX에 대해서 더 많은 공부가 필요하다고 느꼈다.
- 대략적인 레이아웃의 틀을 잡았다. 당초 계획은 데스크톱버전도 생각했었는데 나중에 추가하는 것으로 변경하였다.
마지막으로..
이 프로젝트를 구현해나가면서 내가 얻고싶은 것들이 무엇인지 생각해보았다
- <타입스크립트로 리액트 프로젝트 완성하기>
이전에 다니던 회사에서는 자바스크립트로 리액트를 사용했었다. 런타임에서 에러가 자꾸 나서 고생했는데 타입스크립트를 쓰면서 어떤 점이 편리한지 느껴보고 싶다. - <좀더 체계적으로 리액트 해보기>
부트캠프 다니면서 배운 것들과 회사에서 필요할때 일주일정도 공부하고 바로 프로젝트 했었는데, 코드를 점점 작성하면서 내가 쓴 코드에 발목이 잡히는 경험을 했었다. portals, redux toolkit, 커스텀 훅을 사용해서 유효성검사하는 법, 특히 리액트 문서의 Thinking in React(링크)를 적용해서 컴포넌트 설계를 체계적으로 해보고 싶다. - <next.js>
내가 들은 강의에서 next.js의 요약강의를 제공해줬었는데, getServerSideProps, getStaticPath 등에 대한 내용을 활용할 수 있다면 좋겠다. - <테스트코드>
TDD의 원칙들을 깊게 체득하는 것은 무리겠지만 jest나 React Testing Library을 사용하는 데 익숙해져서 테스트코드를 작성하는 습관을 들일 수 있는 기초를 마련하고 싶다. - <만든 앱을 사용해서 집청소하기>
내가 코딩해서 만든 결과물이 유용하다는 느낌을 경험하고 싶다. - (당연하지만)<청소에 도움이 되는 투두리스트 어플리케이션>
구현하다보면 이 중에 지키지 못하는 것들도 있을 수도 있겠지만 최대한 지키고 싶다.
