1. 결과물 URL + 캡쳐 이미지 2~3장

url: https://sangyeop-lee.github.io

2. 자기소개

안녕하세요? 전기전자 전공을 하고있고, 현 신분은 군인인 24살 청년입니다!

3. 서비스 소개

사실 코딩을 배운 이래로 저는 대학교 버킷리스트에 저만의 todo리스트를 앱으로 만들고 싶었습니다. 저를 비롯해 집중력을 방해받는 여러 사람들에게 도움이 될만한 앱을 말이죠.

이번 기회에 만든 프로젝트는 비록 미흡하지만, 제가 꿈꾸는 todo리스트의 프로토타입입니다. 기능들을 설명하며 영감을 얻은 곳들도 이야기해보겠습니다.

넣고 싶은 기능들은 많았지만, 시간과 능력이 부족해 많은 부분 빠트렸습니다.

3-1. 접속 & 홈페이지

누구든 접속을 할 때 친근하게 맞이해주고 싶은 마음을 담았습니다. 첫 접속 시 이름을 물어보고, 바로 홈으로 넘어가집니다.

홈에는 시계, 랜덤한 인사말과 프로그래밍 격언을 보여줍니다. 이 부분은 제가 사용한 구름 IDE에서 따온 아이디어입니다. 다음에는 어떤 말이 나올까 궁금한 마음을 주겠거니와 넣었습니다!

3-2. 계획과 할 일

이 어플리케이션에서는 해결해야할 일을 크게 두 가지로 나눕니다. 첫째는 사용자가 규칙적으로 하고싶은 일이고, 둘째는 사용자가 해야하는 불규칙적인 일입니다.

규칙적인 코딩, 독서, 운동을 꿈꾸는 사람들에게 이 앱의 '계획'으로 도움을 주고 싶습니다. 시간 버튼을 한번만 클릭하면 타이머가 시작되고, 이 타이머는 웹 페이지가 꺼지더라도 로컬 스토리지의 도움을 받아 타이머가 유지됩니다. 또한, 목표한 시간이 지나면 자동으로 타이머가 꺼지게 되죠.

가장 윗쪽에 나오는 시간과 백분율은 하루의 성취도를 알려줍니다. 이 성취도는 세번째 기능에서 나올 캘린더에 표시가 됩니다.

3-3. 캘린더

캘린더는 한달동안 자신이 목표한 바를 이루었는지 알려줍니다.

이 웹 페이지에 접속하지 않은 날들은 회색 음영을, 성취도가 높았던 날들엔 랜덤한 웃는 이모지를, 성취도가 낮았던 날들엔 조금은 슬퍼보이는 이모지를 넣었습니다.

또한, 사용자의 로컬 스토리지의 용량을 생각하여 한달이 지나면 기록이 지워지도록 하였습니다.

캘린더의 핵심인 이 기능은 아직 검증되지 않았습니다. (사지방에서 컴퓨터를 끌 경우 로컬 스토리지가 날아가버리기 때문입니다.) 버그가 발견된다면 언제든지 댓글 남겨주시기 바랍니다!

4. 개발 과정 (어려웠던 점과 해결방법)

개발 과정은 어려움의 연속이었습니다. 그 중 가장 어려웠던 부분을 몇 개 꼽아보고, 해결된 것들과 해결되지 않은 것들로 나누어보겠습니다.

4-1. 반응형 디자인

가장 어려웠던 중 하나는 반응형 디자인이었습니다.

어떠한 디바이스 환경에서도 제가 의도한 화면을 보여주고 싶었지만, 능력의 한계로 그럴 수 없었습니다. 우선 버튼들을 svg파일을 사용하고 싶었지만, 만들거나 찾아볼 시간이 부족해 이모지들로 버튼을 채웠습니다.

처음엔 이모지의 위치를 절대적 위치로 바꾸어 버튼의 테두리 중앙에 놓일 수 있게 디자인했지만, 다른 브라우저에서 유효하지 않다는 걸 깨닫고 테두리를 전부 지웠습니다.

할 일과 계획을 추가할 때 modal window가 나오게 되는데, 이 때 화면의 크기를 조절할 때 이 위치가 원하지 않는 곳으로 벗어나게 되는 이슈가 있었습니다. 이는 window.resize 이벤트가 생길 때마다 modal의 위치를 조정해주도록 바꾸었습니다.

그리고 많은 부분을 grid와 flex, vh와 vw로 디자인하여 디바이스의 크기에 따라 부드럽게 변할 수 있도록 하였습니다.

4-2. 타이머 구현

개발을 마쳤을 때 가장 큰 쾌감을 느꼈던 부분은 타이머였습니다. 제가 디자인한 타이머는,

1. 시간이 지나면 자동으로 꺼지고,
2. 윈도우가 닫혀도 타이머가 지속되고,
3. 계획이 추가될 때마다 최대 소요 시간과 성취도가 바뀌어야한다.

는 조건을 만족해야했습니다.

1번은 setTimeout과 clearTimeout을 통해 해결하였습니다.

2번이 가장 어려운 부분이었는데, 이는 타이머가 1초가 지날 때마다 로컬 스토리지에 마지막으로 찍힌 시간을 저장하는 방식으로 해결했습니다. 다음에 페이지가 로드될 때, 이 타이머가 시작한 시간을 바탕으로 몇 분이 지났는지 계산하여 사용자에게 보여줍니다. 이 방식으로 페이지가 꺼져도 타이머는 꺼지지 않습니다.

3번은 계획이 추가되는 이벤트가 생길 때마다 타이머에 기록된 모든 정보들을 갱신하고 이를 다시 웹 페이지에 로드하는 방식으로 해결하였습니다. 이는 객체들이 서로 복잡하게 엉켜, 추가적인 기능을 넣는데 걸림돌이 되었습니다. 이 이유로 아직 계획에는 업데이트와 삭제의 기능이 없습니다. 이 부분에서 다음엔 키보드를 두드리기 전 설계에 시간을 더 투자해야겠다는 교훈을 얻었습니다.

4-3. 이벤트 구현

반응형 디자인을 할 때에 수 많은 html element들이 생기고 사라졌습니다.

가령 새로운 계획이 추가되면, 계획 리스트가 다시 로드됐고, 이에 연관이 있는 타이머들이 전부 html 요소와 연결이 끊어졌습니다. 또, 계획 리스트가 다시 로드되는 과정에서 그 전에 붙어있던 event를 삭제해주어야 했기 때문에, 모든 event들을 관리하는 것이 어려웠습니다. 이를 해결했던 두 가지 방법은,

1. 버튼들을 담고 있는 부모 요소에 이벤트를 추가하는 것
2. 이벤트를 생성 & 삭제하는 것을 함수로 모으는 것

이었습니다. 즉,

이벤트 삭제 함수 ⇒ 수정된 요소 로드 ⇒ 이벤트 생성 함수

를 통해 작업을 간소화했습니다.

4-4. 디버깅

개인 컴퓨터로 개발할 수 없는 환경이었기에 로컬 스토리지가 매일매일 새로웠습니다. 이 글을 쓰는 시점에선 로컬 스토리지를 메모장에 저장해두고, 다음 실행 때 로드했으면 어땠을까, 라는 생각이 드네요. 따라서, 가장 핵심 기능이지만 달력에 이모지가 뜨는 것은 아직 디버깅이 되지 않았습니다. 이에 연관된 버그들은 현재 환경에서는 해결하기 어려울 것 같습니다.

5. 앞으로 계획

이 프로젝트에서 가장 큰 문제점은 자바스크립트 코드 모듈화를 하지 않았다는 것입니다. 700줄이 넘어가도록 한 파일에 작성한 것도 있고, 많은 함수들은 재사용이 불가능합니다. 다음 프로젝트를 시작하기 전, 이런 부분들을 더 엄격하게 고려하는 법에 대한 공부를 꼭 해야합니다.

추후에 할 프로젝트은 React / React Native 와 Express를 바탕으로 크로스 플랫폼 todo리스트를 만들어볼 생각입니다. 이번 기회에 만든 todo 리스트에는 저에게 첫 도전이었지만, 원했던 많은 기능이 빠져있습니다. 제가 넣고 싶은 기능들을 모두 담아 언젠간 어플리케이션으로 돌아오고 싶습니다.

감사합니다!