Life Calendar

목차

1. 개요
2. 디자인
3. 개발 스택
4. 페이지, 화면별 개요와 기능 소개
5. 어려웠던 점과 해결 방법
6. 결론

---

개요

어느새 4학년이 되어 졸업작품을 완성하고 이렇게 졸업작품에 대한 포스팅을 하고 있다. (아래는 Life Calendar 프로젝트 링크)

Life Calendar

 

Life Calendar는 사람의 인생을 여러 개의 사각형으로 나누어서 나타낸 종이라 할 수 있는 데, 사각형 하나는 1주를 의미한다. 한 주가 지날 때마다 색칠을 하면서 내가 현재 어느 정도 살았는지 그리고 얼마나 더 살 수 있는지 확인할 수 있다. (90년을 살고 자연사한다고 가정했을 때)

 

Life Calendar를 알게된 영상

유튜브 알고리즘 덕분에 우연히 알게 되었는데 보자마자 웹사이트로 만들면 재밌을 것 같다는 생각이 들었고, 색칠뿐만 아니라 해당 주에 무엇을 했는지 기록을 할 수 있게 만들면 더 좋을 것 같다는 생각을 했다.

 

그리고 때마침 졸업작품을 만들어야 하는 시기와 겹쳐서 졸업작품도 만들 겸 나의 첫 번째 사이드 프로젝트를 만들기 시작했다.

 

 

디자인

막상 시작하려하니 어디서부터 시작해야 할지 막막해하며 시작을 못하고 있었는데 디자인부터 해야겠다는 생각이 들어서 피그마를 사용해 디자인을 하며 완성되었을 때의 모습을 먼저 머릿속에 그려나갔다. 확실히 디자인을 하고 나니 시작이 수월했다. 하지만, 개발을 해나가면서 디자인이 많이 변경되어서 처음 디자인했을 때의 모습과 완성된 모습은 많이 다르다. 그래도 전체적인 구조나 틀은 비슷한 것 같다.

Figma

 

 

개발 스택

프론트엔드: Svelte, CKEditor5, Chart.js

백엔드: Firebase

버전 관리: GitHub

 

Svelte에 대해 어떻게 알게 되었는지는 잘 기억이 나지 않지만.. Svelte에 대해 조금 공부해보니 굉장히 배우기 쉽고 더 공부해보고 싶다는 생각이 들었다. 그래서 이 프로젝트에서 써보며 공부해보기로 결심했다.

Firebase가 간편하고 좋다는 것은 알고 있었지만 제대로 써본 적은 없어서 백엔드를 간편하게 구현하고 공부도 해볼 겸 사용하게 되었다.

CKEditor5와 Chart.js는 이번에 처음 알게 된 자바스크립트 라이브러리인데, 사용법이 굉장히 쉬워서 프로젝트에 금방 적용할 수 있었다. 만들어주신 분들에게 정말 감사하다는 말씀을 드리고 싶다..

 

 

페이지, 화면별 개요와 기능 소개

1. 홈
2. 로그인, 회원가입
3. 연간, 월간, 주간 달력
4. 도움말

 

홈의 경우 만들기는 쉬웠지만 어떤 식으로 디자인할지에 대해 많이 고민했다. 여러 웹사이트들을 돌아다녔고, notion 웹사이트의 홈을 참고하여 만들었다.

 

로그인, 회원가입은 class101의 디자인을 참고했다. 예외 처리의 경우 처음에는 아이디가 맞고 비밀번호가 틀리다면 비밀번호가 틀리다고 사용자에게 알려주었는데, 보안상 무엇이 틀렸는지 알려주는 것보다 아이디 또는 비밀번호가 틀렸다고 알려주는 것이 좋다는 것을 알게 되었고 프로젝트에 적용했다.

 

연간, 월간, 주간 달력에 시간을 가장 많은 시간을 쏟았다. 공통적으로는 모두 기록을 할 수 있게 사용자가 사각형을 클릭했을 때 모달 창을 띄웠다. 추가적으로 주간의 경우는 태그 입력이 가능하고 월간에서 보여지는 그래프에 들어갈 정보를 입력할 수 있게 했다. 그리고 태그를 선택하여 해당 태그가 존재하는 주를 찾아낼 수 있고, 깃헙의 잔디밭처럼 기록한 요일수에 따라 사각형의 색이 진하게 보이도록 했다. 월간의 경우는 주간에서 입력한 정보를 바탕으로 그래프로 보여질 수 있게끔 만들었다.

 

도움말은 모달창을 띄우는 형식으로 만들었고, 마크다운 작성방법과 CKEditor5의 단축키에 대해 간단히 적었다. 도움말의 코드 블록 디자인은 Heropy 블로그를 참고했다.

 

 

어려웠던 점과 해결 과정

10년 단위로 접고 펴고 할 때의 성능 문제
처음에는 사각형 하나하나를 반복문을 돌면서 없앴다가 나타냈다가 했는데, 그랬더니 월간에서는 괜찮았는데 주간에서는 토글 버튼을 누른 후 약 1초 동안 렉(화면이 멈춤)이 걸리는 문제가 발생했다. 
해결방법: 행을 만들어서 행안에 해당하는 사각형들을 넣고 행이 나타났다 사라졌다 하도록 했다. 주간의 경우 (52 * 9) 번 반복해야 했던 코드가 9번 반복으로 줄어들었고 더 이상 렉이 걸리지 않았다.

 

지금 생각해보면 그렇게 어려웠던 문제는 아닌 것 같은데 당시에는 해결방법이 하루종일 떠오르지 않아서 냅두었다가 나중에 갑자기 떠올라 해결했던 기억이 난다. 위의 문제들 말고도 부딪혔던 문제들은 많았지만 모두 구글링으로 바로 해결이 되었고, 성능과 관련된 문제는 위의 문제뿐이었다. 물론 지금도 성능은 좋지 않지만....

 

 

결론

처음으로 사이드 프로젝트를 진행하면서 느낀 점은 직접 만들면서 부딪히고 해결하며 배우는 것이 진짜 배움이고, 개발 실력 향상에 큰 도움이 된다는 것을 느꼈다. 그래서 앞으로는 사이드 프로젝트를 많이 만들어보기로 결심했다. 혹시나 이 글을 보시는 분들이 계시다면 지금 당장 어떤 프로젝트든지 직접 만들어 보기를 강력히 추천한다.