1. LINK

https://ryanban.github.io/momentum/ 

2.자기소개

안녕하세요 개발자를 꿈꾸고있는 컴공 대학생 입니다

최근에 노마드를 접하고, 학교 수업보다 더 재미있어서 여러강의를 듣던 도중에 운 좋게 콘테스트에도 참여할수 있었습니다.

3. 서비스 소개 + 캡쳐이미지 4장

투두리스트를 아날로그틱하게 만들어보자는 아이디어에서 디자인했습니다.

총 두섹션으로 나뉩니다. 첫번째는 노트가 있는 책상, 두번째는 포스트잇이 붙여져있는 벽 입니다.

가장 먼저 이름을 물어봅니다!

투두 리스트 노트에 이름이 적힙니다.

왼쪽 페이지는 동기부여를 위해 명언API에서 가져온 랜덤 명언을, 오른쪽에서는 투두리스트를 작성하고 지울수있습니다. 가끔 엄청 긴 명언이 나오기도 합니다.

오른쪽 상단에 있는 포스트잇 아이콘을 클릭하면 벽에 붙은 리스트들을 확인할수있습니다. 리스트는 최대 9개까지 작성할수 있습니다.

포스트잇들은 리스트 순서대로 배열되고 랜덤으로 살짝씩 돌아가 있습니다. 

일을 마치고 포스트잇을 클릭하면 줄이 그어집니다. 한번 그어진 줄은 되돌릴수 없습니다. (음...볼펜으로 그었나봅니다) 여튼 끝낸 일들은 노트 아이콘을 클릭해 다시 노트로 돌아가 리스트에서 지워버립니다.

4.개발과정 + 해결과정

저는 자바스크립트를 깊게 공부안해보고 바로 리엑트를 혼자 공부해왔습니다. 앱을 만들때 레이아웃, 메뉴, 모든 애니메이션을 거의 다른 라이브러리에서 가져왔고 그러다 보니 디자인도 제가 계획하기보다는 라이브러리에서 따와서 그에 맞춰 즉흥적으로 만드는 경우가 대다수 였습니다.

그래서 이번 투두 앱을 만들면서 CSS와 디자인 부분이 가장 힘들었습니다. 

제가 처음부터 직접 다자인하고 그에 맞춰서 코딩을 해본것은 이번이 처음입니다. 만들어진 결과물은 간단해보이지만 포토샵이나 UI툴 같은걸 다뤄본적은 없으니 마음에 드는 이미지와 아이콘, 색깔, 애니메이션 등을 찾기위해 정말 수 없이 바꿔 본것같습니다. (UI/UX디자이너의 중요성을 느꼈습니다..)

CSS 애니메이션중에서는 책을 3D로 구현하고 책넘김에 그림자 애니메이션을 추가하는데에, 그리고 스크롤로 page transition을 자연스럽게 구사하려는데에 애를 먹었던것 같습니다.

시간은 오래걸렸지만 언제나 구글링을 통해 해답을 얻었습니다.  

5.앞으로의 계획

오랜만에 몇일간 재미있게 코딩해본것 같아서 즐거웠습니다. 

이번기회를 통해 자바스크립트 ES6를 좀더 깊게 공부해볼 예정입니다. 그 밖에도 Go, Python, Vue.js 등 항상 해보고싶은것 들은 많지만, 저에게는 막상 시작하고 꾸준히 해보는게 정말 어려운 것 같습니다. 

그런점에 있어 노마드의 챌린지 프로그램이나 이런 이벤트들이 동기부여에 많은 도움이 되었습니다!(니꼬 &린 감사합니다!!)

현재 궁극적인 목표는 졸업장을 받자마자 개발자로 취업하는 것입니다. 글 읽어주셔서 감사합니다 여러분들도 투두리스트 만들고 이루고 싶은 목표 이룰수 있길 바랍니다.