1. 결과물 URL

https://seongheejeon.github.io/To-Do-List-Contest/

2. 자기소개

교양수업에서 프로그래밍을 처음 배웠고, 재미를 느껴 계속 공부해오고 있습니다. 취직을 하든 사업을 하든 개발을 계속 하고싶고, 아직 경험이 적어서 이번 콘테스트를 통해 공부도 할 겸 만들어보았습니다.

3. 서비스 소개

최근에 책을 읽다가 문득 '한글'이 너무 이쁘게 느껴졌고, 그 이후로 필사도 하고 언어교환도 하며 한글에 많은 관심을 갖고 있습니다. 그래서 이 프로젝트도 한글로 진행해 보았습니다.

오른편에서 지금의 기분을 선택하면 그에 걸맞는 글귀를 보여줍니다. 기분은 좋고 나쁨으로 나뉘지 않고 복잡하게 얽혀있어 그 이유를 찾기어렵지만, 가끔은 sns에서 보는 글귀 하나에 기분이 전환되기도, 문제가 해결되기도 합니다. 위로가 되기도 하고, 동기부여가 되기도하고, 또 때로는 재미를 주기도 하는 글귀를 보여주고 싶었습니다. 문구는 대부분 제가 직접 작성하였습니다.

왼쪽의 to-do-list는 본 강의를 통해 배운것을 바탕으로 스크롤, 전체삭제, 완료여부 등을 추가하였고, 배경화면은 속이 뻥 뚫리고 기분이 좋아지는 하늘을 영상으로 넣어보았습니다.

반응형 웹을 약간 구현해봤는데, 화면이 작아질 경우 todo와 글귀box를 이어주는 고리가 아래쪽으로 연결됩니다.

4. 개발 과정

localstorage에 저장된 todo의 id가 중복되는 경우가 있어 따로 newId라는 변수를 만들어 중복 가능성을 제거하였고, todo의 갯수가 많아질 경우 화면을 벗어나지 않도록 스크롤로 처리했습니다.

이름을 입력하면 todolist와 글귀box가 스르륵 나타나도록 하는 과정이 쉽지 않았습니다. 평소에 차근차근 하나씩 공부하며 적용해보는 것을 좋아하는데, 빨리 제출해야 된다는 생각에 무작정 만들기부터 시작했습니다. transition에서 크기와 투명도를 조절하는 것으로 구현했는데, 헤맸던 시간을 생각해보면 차근차근 공부하고 만드는것과 비슷했겠다는 생각이 들었습니다.

input과 scrollbar도 처음으로 디자인 해 봤는데 내가 만들 수 있다는게 신기하기도 하고 재미있었습니다.

잘 만들고 싶긴 한데 만들고자 하는게 뭔지 확실히 알지도 못하겠고, 제가 좋아하는 것을 다른 사람들도 좋아할까, 라는 생각도 많이 들었습니다. 하지만 하나하나 만들고 고쳐나가면서 완벽하진 않지만 어느정도 만족스러운 결과를 만들어냈고, 많은 사람들이 좋아하진 않더라도 내 마음에 든다는 것으로 위안삼을 수 있을 것 같습니다. 아직 배울게 많고 갈 길이 멀지만, 완성품을 하나 만들어내고 나니 자신감이 좀 붙었습니다.

5. 앞으로의 계획

일단 이 프로젝트를 진행하면서 새로 알게된 것들, 헤맸던 부분들을 기록으로 남겨둘 예정입니다. 기억력이 좋지 않기 때문에 기록을 해두지 않으면 다음번에 분명 처음 보는 것처럼 굴게 뻔하기 때문입니다. 

그리고 이 프로젝트를 진행하느라 잠시 멈췄던 공부들을 할것입니다. 노마드 코더 그림판 강의도 마저 들으며 JS 공부를 하고, 동아리에서 진행하는 프로젝트도 이어나갈 것입니다. 다들 설 잘 보내세요!!

( +이 프로젝트도 계속 수정해나갈 것입니다. 제출 후 주변사람들에게 피드백을 받았는데 스크린 크기에 안맞는게 보여서 일단 반응형부터도 구현해보려고 합니다! )