'타임메이커'

Demo Code

실제로 사용할 수 있도록 유용한 기능들을 여럿 추가하였습니다.

자세한 기능 설명은 뒷부분에서 설명하도록 하겠습니다.

- 자기소개

안녕하세요! 올해 졸업을 앞두고 대학원 준비 중에 있는 24살 대학생입니다.

처음에는 비전공자로 시작해, 코딩을 공부하면서 컴퓨터 관련 학과에서 복수전공을 하여 열심히 실력을 기르고 있는 중입니다.

웹 프론트 개발에 처음 관심이 생겼을 때는 작년 이맘 때 JS 챌린지를 진행하고 나서였습니다.

노마드코더에서 처음으로 파이썬 1기 챌린지를 성공적으로 마치고, 챌린지가 너무 유익해 바로 이어서 바닐라 자바스크립트 챌린지까지 마쳤으니 작년 5월 정도였겠네요.

요즘에 대학원 진학을 목표로 하고 있어, 개인 포트폴리오를 만드려는데 문득 이런생각이 들더군요.
나름 개발을 하고 있다면서 개인 홈페이지 하나도 없다는게 말이 되나?

이런 생각을 가지고 있던 와중에 노마드코더 유튜브에서 금을 준다는 이야기에 혹해,,,
바닐라 자바스크립트를 힘차게 공부하고 투두리스트를 만들어보면서
깃허브에도 제 입맛대로 홈페이지를 만들어보기로 결심했습니다!

물론... 진행하다보니 홈페이지를 먼저 만들고나서 투두리스트를 만들기 시작했지만요,,

아무튼 잡설은 여기까지하고 투두리스트에 대해서 설명드리도록 하겠습니다!!

*혹시 개인 홈페이지가 궁금하신 분은 요기랑 요기로!!
(두번째 링크는 니꼬가 추천하던 next.js로 해봤어용!!)

- 서비스 소개

요즘 코로나로 인해 다들 집안에서 보내는 시간이 정말 많으실 거에요.

저 같은 경우는 외출하던 때에 비해 주변 환경의 변화가 적으니 시간이 너무 빠르게 지나가더라고요.

그러다보니 시간 개념이 없어지고 허비하는 시간도 너무 많아져서 계획세우기의 중요성을 느꼈습니다.

그래서 이번 프로젝트는 제가 직접 사용하고 싶은 투두리스트를 만들어보기로 했어요 !

감성있고 직관적인 외관과 화면 크기와 상관없는 호환성, 세부적인 기능들을 가장 중요시하여 개발을 진행하였습니다.

설명하는 순서는 사용자들이 서비스를 이용할때 사용하게 되는 기능들 먼저 소개해드릴거에요.

1. 랜덤 배경화면 (unsplash.com)

처음 화면에 등장하는 배경화면은 들어갈 때마다 랜덤으로 바뀌도록 개발되어 사용자들에게 신선함을 줘요!
1600x900 해상도의 고화질 사진과 마우스에 따라 반응하는 블러 필터가 투두리스트를 더욱 감성있게 만들어줍니다!

다음 소스를 사용해서 개발했어요! (http://source.unsplash.com/1600x900)

1-1. 로딩페이지

접속할때마다 랜덤으로 고화질 사진을 받아오니까 아무래도 서버에서 다운로드 될때까지 어느정도 시간이 걸리는 일이 발생했는데요.(약 1초)

그래도 랜덤을 포기할 수도 없고, 사진을 미리 받아두자니 랜덤한 요소가 줄어든다는 단점이 존재했습니다!

이러한 연유로 기다리는 시간에 사용자들을 심심하지 않게 해주는 로딩페이지를 개발하게 되었는데요!

처음 만들어본 로딩페이지지만 loading.io라는 사이트에서 좋은 로딩 아이콘을 받아서 비교적 쉽게 개발할 수 있었습니다.

지금까지 이미지는 모두 png만 사용해왔는데 svg한번 써보니 매우 좋더군요,, 다들 svg 쓰세요!!

2. 어느 디바이스에서든 사용할 수 있는 호환성

미디어 쿼리를 이용해 디바이스의 화면 크기에 따라 달라지는 모습을 확인해보실 수 있어요.

데스크탑이나 랩탑을 이용하시는 분들은 화면 크기를 가로로 줄여보시면 여러 요소들이 가독성 좋게 크기가 변하는 것을 보실 수 있을거에요!

참고로 모바일에서 가장 최적화 되어있답니다!

추가적으로 브라우저마다 호환성이 다른데 가능한 모든 브라우저에서 돌아가도록 했지만 아쉽게도 인터넷 익스플로러(IE)와 사파리에서는 지원하지 않는 기능이 있어요ㅠㅠ(저도 사파리 유저랍니다...)

모든 기능을 즐기기 위해서는 크롬 브라우저를 이용해주세요!

만약 모바일이시라면 걱정마세요. 사파리 모바일 브라우저로는 잘 돌아가는 것으로 확인했습니다!

3. 상단 아이콘 & 시계 뷰

상단 왼쪽을 보시면 시간에 따라 해, 또는 달의 아이콘이 보이실 거에요!

현재 시간이 궁금하시다면 이 아이콘을 꾹 눌러주시면 시계가 쨘 하고 나오실 겁니다!

아날로그와 디지털 모두 잡았으니 입맛에 맞게 시간을 확인하실 수 있습니다!

* 상단 오른쪽에 X 버튼은 아직 개발중이에요! 비밀아닌 비밀인데 사실 지금 만들어진 페이지는 커버페이지랍니다. 추후에 더욱 세부적인 기능을 위해 메인 페이지도 만들 계획에 있어요!

4. 할 일 추가

가운데에 입력하는 부분을 눌러보시면 부드러운 애니메이션 효과와 함께 심플한 입력 화면이 등장합니다!

본질적인 기능에만 집중할 수 있도록 그 이상의 불필요한 애니메이션 효과는 넣지 않았어요!

지금, 혹은 오늘 해야할 일을 추가하고 싶으신 분은 그냥 입력하시고 엔터 혹은 입력 버튼을 누르셔서 추가하시면 됩니다!

하지만, 한가지 알아두셔야 할 점! 타임메이커는 더욱 더 세부적인 일정 관리 기능들을 제공합니다!

5. 세부적인 일정 추가

입력 화면이 등장했을 때 오른쪽에 ...버튼이 만들어진게 보이실거에요!

이 버튼을 누르시면 타임메이커의 진가가 발휘됩니다! 짠~

일정이 어떤 타입인지 사용자가 직접 정할 수 있고(원하는 색상),

어느 날짜에 진행할 일정인지(날짜),

언제부터 언제까지 진행할건지(시간)

다양한 조건을 가진 일정을 추가하실 수 있어요!

조건을 잘 못 설정하셨다고 해도 걱정마세요! 오른쪽 x(리셋 버튼)을 누르시면 초기화 된답니다.

참고로 설정의 기본값은 다음과 같아요.

색상 : 흰색,

날짜 : 사용자 로컬 시간 기준 오늘,

시간 : 00~00 (하루종일) [하루종일의 경우 일정 관리시에 별도 표시 없음]

*아직 하루를 초과하는 할일은 지원하지 않아요! 우리에겐 타임메이커가 있으니 매일매일 지킬 수 있는 일정을 만들어서 지켜봐요!




6. 주간 달력 및 오늘 세부 계획

제일 핵심적인 부분이에요!

한 줄 한 줄 천천히 따라와 주세요!

먼저, 오늘 날짜 기준으로 이번 주와 오늘의 일정을 각각 왼쪽, 오른쪽 하단에서 볼 수 있어요!

그리고 각 화면에서 왼쪽, 오른쪽 버튼을 누르시면 다른 주, 혹은 다른 날의 일정도 확인하실 수 있습니다!

일정이 비어있는 날에는 일정 추가 버튼(+)이 존재해요.

해당 버튼을 누르시면 상응하는 날짜에 일정을 추가하실 수 있도록 자동으로 설정됩니다!

추가된 일정은 주간 달력에서는 타입 색상만 보이실 텐데요, 해당 부분을 클릭해보시면 세부 내용도 같이 확인해 보실 수 있답니다!

그리고 주간 달력의 날짜 부분을 클릭하시면 오늘쪽 하단 화면이 해당 날의 일정으로 변하는 것을 확인하실 수 있어요. 참 편리하죠!!

오늘 날짜에는 주간 달력에서 흰색 글자에 검은색 동그라미,

오늘의 일정에는 굵은 글씨체에 Today라고 쓰여져 있어 한 눈에 알아보실 수 있어요!

참고로 어제와 내일의 경우에도 Yesterday와 Tomorrow가 쓰여져 있답니다~

아, 그리고 완료하신 일정은 오른쪽 화면에서 꼭 색상 체크박스를 눌러주세요!

오른쪽 뿐만 아니라 주간 달력에도 동시에 체크 표시가 생긴답니다!

모든 일정을 마스터 하도록 열심히 해보자구요!

7. Drag & Drop 기능

이럴수가, 내일 일정을 오늘에 넣으셨다고요?

걱정마세요! 드래그 앤 드롭 한번이면 모든 문제가 해결된답니다!

주간 달력에서 날짜를 변경할 일정을 드래그! 앤 드롭! 해주세요!

색상, 내용, 일정을 포함한 모든 내용이 동일하게 유지되어 날짜만 달라진 상태 그대로 변경됩니다!

참고로 Drag & Drop 기능은 moonk님의 ToDoList 를 참고하면서 많은 도움을 얻었어요.

이 자리를 빌려 감사하다는 말씀 올립니다. 다들 한번 씩 들어가서 구경해보세요.

정말 깔끔하고 이쁘게 잘 만드셨어요!

8.일정표 투명도 조절 및 닫기

심미적인 효과를 위해 대부분의 요소들을 반투명하게 개발했어요.

어떤 색상이든 어울리게 하얀색 위주로 개발하였지만, 가끔 배경 사진이 너무 랜덤하기 때문에 할 일 리스트가 제대로 보이지 않을 수도 있어요.

이런 문제점을 해결하기 위해 투명도를 조절하는 기능을 넣었고, 반대로 배경 사진만 보고 싶은 분들을 위해 일정표 닫기 기능도 추가했어요!

일정표 오른쪽 바로 위에 O버튼(Opacity)와 V버튼(내리기)를 누르시면 해당 전환효과들을 경험하실 수 있을거에요!

대표적인 기능들은 여기까지 설명하도록 할게요!

이야기하지는 않았지만 일정을 지우는 기능도 물론 당연히 구현되어 있답니다!

- 개발 과정

1. 빡빡한 일정과 연속 밤샘

2월 6일부터 해보자는 생각을 하고 설날 연휴로 미리 본가에 내려가느라 2월 8일 정도부터 본격적으로 개발을 시작했어요.

남들보다 늦게 시작했기 때문에 그만큼 모든 시간을 이번 프로젝트에 집중했답니다.

2. 모방은 창조의 어머니

퀄리티 높은 프로젝트 결과물을 위해 상용하는 투두리스트들을 참고하고 본인의 능력 내에서 구현할 수 있는 좋은 기능들을 추렸어요!

실제 구현된 기능들은 기존 기능들에서 추가적인 아이디어가 가미된 거지만 그래도 처음 생각을 시작하는 좋은 발판이 되었답니다.

3. 시작이 반이다

시작이 반이다라는 말이 이번에 정말 공감가는 프로젝트였어요.

자바스크립트를 만들기도 전에 구조를 짜는데만 이틀밤 넘게 소요되었답니다.

잘못된 구조로 프로젝트를 크게 수정할 일이 없기 위해 구조를 먼저 짜두고 들어갈 기능들을 생각해보았어요.

이렇게 만들고 싶은 서비스의 구조를 그려두었더니, 그만큼 머리속에서도 서비스를 구체화할 수 있어서 추후 개발을 진행할 때에도 실수도 줄어들고 개발 속도도 빨라졌답니다!

일반적으로 자바스크립트보다 CSS 속도가 더 빠르다는 이야기가 있어 CSS를 적극적으로 활용하면 성능면에서도 좋을거에요!

<초기 CSS 구조>

4. 접근성이 생명

웹으로 돌아가는 프로젝트이다보니 모바일 환경에서도 동일하게 이용할 수 있는 접근성 높은 완성품을 만들고 싶었어요.

구글 교수님께 반응형 웹에 대해 여쭤보아 @media query 라는것을 알게되어 적용하게 되었는데, CSS 코드가 엄청나게 길어지게 되었지만 그래도 세부적인 조정이 가능해져서 많은 도움이 되었답니다.

제일 어려웠던 부분이라기엔 쉬웠던 부분이 없어서 글을 쓰는 지금까지도 쉽지 않다는 말밖에 안나오네요.

계획했던 모든 부분에 문제가 생겼었고 항상 문제에 부딪혀 해결책을 찾기에 급급했습니다.

CSS 미디어 쿼리에서부터 flex 까지, 자바스크립트 함수들도 항상 야매로 공부해와서 개념적인 부분이 많이 부족했는데 실전 프로젝트를 진행해보면서 이제 어느정도 체득된것 같이 느껴져요.

구글 교수님께 물어볼 수 있는 용기와 답을 얻어낼 때까지 물어보는 끈기가 가장 중요했던 것 같습니다.

아, 그리고 프로젝트의 크기가 거대해지면서 함수를 분할해서 사용하는 일이 정말 많아졌어요!

코드의 재사용성을 고려해야하는게 정말 쉽지 않으면서도 정말 중요한 일이더라는 걸 다시금 깨달았습니다!

- 추후 계획

저의 계획은 먼저 개인 포트폴리오 사이트를 제대로 만들어서 정비할 예정입니다.

멋지고 섹시하게 만들어서 멋진 사람처럼 보이도록 만들거에요.

나중에 개인홈페이지 마음에 드시면 깃허브 별 하나씩만 부탁드릴게요~! >_<

그리고 인공지능 공부를 열심히해서 웹에서 돌아가는 인공지능 모델을 만들어두고 싶고요!

이제 학교를 졸업하지만 따로 진행하고 있는 일이 없어서 뭐든 손에 잡히든대로 열심히 해볼거에요!

개인적인 계획은 여기까지였구요, 이번 프로젝트를 진행하면서 아쉬웠던 점에 대해서 계획을 말씀드릴게요!

지금까지 설명했던 이 모든 페이지가 커버 페이지라고 했었죠?

더 깔끔하고 파워풀한 기능들을 가진 메인 페이지를 만들어볼 예정입니다.

그 외에 추가할 기능, 그리고 추가하고 싶은 기능들을 나열해보자면 다음과 같아요!

- 다른 기기에서 같은 일정을 공유하고 싶을 분들을 위해 일정 데이터를 공유할 수 있는 기능.

- 크롬 플러그인을 이용해 연동할 수 있는 기능.

- 하루를 초과하는 일정 호환 기능.

- 날짜 외의 다른 속성 변경 기능.

직접 이용해보시고 더 추가하면 좋겠다 하는 기능이 있으면 언제든 댓글으로 달아주세요!!

버그 문의도 정말정말 환영합니다!

정말 긴 글 읽어주셔서 감사드리고,

특히 CSS코드가 엄청 길 텐데 모두 HTML 요소 순서대로 작성했으니 코드 참고하실 때 참고하시면 좋을 것 같습니다.

다른 누군가에게 도움이 되는 코드였으면 좋겠네요!

다시 한 번 감사합니다!! 다들 오늘 하루도 좋은 하루 되시길 바라요!