Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back
Challenge 3개 동시 수강하면서 만든 Simple Todo
#to_do_list
3년 전
1,705
1

1. 결과물 URL
TODO URL

undefined

[ ↑ 최종 (모바일) ]

undefined

[ ↑ 최종 (pc) ]

2. 자기소개
17살에 C언어로 프로그래밍을 공부하기 시작해 C, Python, JavaScript를 다루게 된 19살 대학생입니다.

3. 서비스 소개
처음으로 제작해본 반응형 웹페이지입니다. 너비가 700px 이하가 되면 진행 목록과 완료 목록 중 하나만 볼 수 있게 만들었고, 보이는 목록을 바꾸는 스위치를 넣었습니다. 기본에 충실한 Todo List입니다.

4. 개발 과정
4-1 활기찬 시작
제작을 시작한 건 2월 9일 오전 5시였습니다. 처음에 기획한 모습은 완성작과는 꽤 다릅니다. 제작하려 했던 기능들은 다음과 같습니다.

◾ 사용자 이름 저장 & 시간대에 맞는 인사 (good morning, afternoon, evening)
◾ 검색 (새 탭에서 google 검색 결과 보여줌)
◾ 시간
◾ 즐겨찾기 (최대 10개 저장, 팔레트에서 랜덤 색상, 제거할 때 애플처럼 흔들거리는 모션)
◾ todo (진행, 완료된 목록 중 보여지는 것 토글)
◾ 달력 (달력에 todo 표시)
◾ 이메일 (새 탭에서 gmail 열기)
◾ 커스터마이징 기어

완성된다면 메인 브라우저처럼 사용해도 될 정도로 만들 계획이었지만, 네 번째 기능까지 만들고 부모님께 보여드렸더니 너무 기능이 많아서 todo가 조연처럼 느껴진다고 하시더군요. 큰 깨달음을 얻고 만들던 것을 멈춘 뒤 새로운 시작을 했습니다.

undefined

[ ↑ 초안 ]

undefined

[ ↑ 초안 50% 제작 ]

4-2 예상치 못한 변수
차분한 마음으로 새로운 프로젝트 폴더를 만든 것도 잠시, 제가 2주 챌린지를 두 개나 듣고 있음을 인지합니다. 사실 이 프로젝트를 9일에야 시작한 이유가 파이썬 스크래퍼 졸업작품을 만들어야 했기 때문이었는데 '코코아', '바닐라js' 챌린지가 남아있었습니다. 게다가 Todo를 어떻게 만들어야 기억에 남을까 아이디어를 아무리 떠올려봐도 돌이 되어버린 머리는 굴러갈 생각을 하지 않더군요. 그렇게 설날을 맞고, 벌써 마감일이 찾아왔습니다.

4-3 세상에 마상에
그런데 맙소사! 오늘의 바닐라js 챌린지 과제 템플릿이 그렇게 예쁠 수가 없었습니다. '이거다!'라는 마음으로 후다닥 만들어버린 Todo지만 완성작을 보니 꽤 아기자기하고 괜찮다는 생각이 들었습니다. 가족과 친구들에게 링크를 보내주어 피드백을 받고 작은 에러들을 고쳐 나갔습니다. 페이지 제일 밑의 margin이 없다는 점, 모바일에서 초기 로딩 시 버튼이 focus 되지 않는다는 점 등을 수정했습니다.

5. 앞으로의 계획
새해가 되고, 나태해진 저를 바로잡기 위해 Nomad 챌린지들을 듣고 있습니다. 여러 챌린지를 동시에 수강하는 것이 조금은 벅차지만 정말 많은 도움이 되고 있습니다. 작년까지만 하더라도 CSS 다루는 게 어려워서 안 하게 되었는데 요즘은 html 작성 속도나 css로 원하는 스타일을 입히는 것이 쉬워졌습니다. 앞으로는 Node를 공부할 생각입니다. Client-server model을 심도 있게 공부해서 real-time app을 만들고 싶습니다.

1 comment