Blockday - GitHub Copilot으로 만든 간단한 To-Do 리스트

저는 블록 스타일의 마인크래프트에서 영감을 받은 반응형 To-Do 리스트 애플리케이션인 Blockday를 만들었습니다.

아이디어는 간단했습니다. 인터페이스는 깔끔하고 사용하기 쉽게 유지하면서도, 일상적인 할 일 계획을 조금 더 흥미롭게 만드는 가벼운 작업 관리자를 만드는 것이었습니다.

기능 (Features)

• 정상(Normal), 높음(High), 또는 낮음(Low) 우선순위로 작업 추가
• 작업에 마감일 지정
• 기한이 지난 작업을 자동으로 식별
• 오늘 만료되는 작업에 대한 선택적 알림
• 권한 부여 시 브라우저 알림
• 브라우저 알림을 사용할 수 없을 때의 인앱(in-app) 알림
• 작업 완료 표시
• 제목별 작업 검색
• 모두(All), 활성(Active), 또는 완료(Done)로 작업 필터링
• 작업 삭제
• 완료 진행 상황 추적
• 일일 연속 기록 및 최고 연속 기록 추적
• 브라우저 localStorage를 사용하여 작업 자동 저장
• 데스크톱과 모바일을 위한 반응형 디자인
• 백엔드나 데이터베이스 없이 작동

사용된 기술 (Technologies Used)

• HTML
• CSS
• Vanilla JavaScript
• 브라우저 localStorage
• 브라우저 Notifications API
• GitHub Codespaces
• GitHub Copilot
• Render

React, Node.js, 데이터베이스 또는 외부 백엔드가 필요하지 않습니다.

GitHub Copilot으로 구축

제가 이 프로젝트를 만든 주요 이유 중 하나는 개발 과정 전반에 걸쳐 GitHub Copilot이 어떻게 도움을 줄 수 있는지 탐구하는 것이었습니다.

저는 애플리케이션을 구축하고 개선하는 데 도움을 받기 위해 GitHub Codespaces 내에서 GitHub Copilot을 사용했으며, 여기에는 다음 내용이 포함됩니다:

• 애플리케이션 구조화
• 작업 관리 기능 구현
• 마감일 추가
• 알림 시스템 구현
• UI 레이아웃 문제 수정
• 반응형 동작 개선
• 프로젝트 문서 작성

프로세스는 단순히 Copilot에게 애플리케이션을 만들라고 요청하는 것만은 아니었습니다. 저는 요구사항을 제공하고, 생성된 코드를 검토했으며, 애플리케이션을 테스트하고, 문제를 파악한 다음, 특정 프롬프트를 사용하여 구현을 개선했습니다.

마감일 및 알림 (Due Dates and Reminders)

사용자는 작업을 생성할 때 마감일을 지정하거나 나중에 추가/변경할 수 있습니다.

작업은 다음과 같이 구성됩니다:

• 과기한 (Overdue)
• 오늘 마감 (Due Today)
• 예정됨 (Upcoming)
• 마감일 없음 (No Due Date)
• 완료됨 (Completed)

또한 이 애플리케이션은 오늘 마감되는 미완료 작업에 대한 선택적 알림 기능을 제공합니다.

알림이 활성화되면, 권한이 부여된 경우 브라우저 알림을 사용할 수 있습니다. 알림을 사용하지 않거나 차단된 경우, 대신 인앱(in-app) 알림이 사용됩니다.

현재 구현은 애플리케이션이 열려 있을 때 알림을 확인하므로, 웹사이트가 완전히 닫혔을 때는 알림을 보장하지 않습니다.

데이터 저장 (Data Storage)

작업은 localStorage를 사용하여 브라우저에 로컬로 저장됩니다.

이는 다음을 의미합니다:

• 페이지를 새로고침해도 작업이 유지됩니다.
• 일반적으로 브라우저를 재시작해도 작업이 유지됩니다.
• 작업은 서버에 업로드되지 않습니다.
• 작업은 다른 장치나 브라우저 간에 동기화되지 않습니다.

라이브 데모 (Live Demo)

직접 사용해 보기: https://blockday-todo.onrender.com/

자신만의 작업을 만들고 다양한 기능을 탐색해 보세요.

GitHub 리포지토리 (GitHub Repository)

https://github.com/pnkj006/ToDoList-Using_Copilot

제가 배운 것 (What I Learned)

이 프로젝트를 통해 AI 코딩 도구가 실제 개발 워크플로우에 어떻게 통합될 수 있는지 이해하는 데 도움이 되었습니다.

중요한 부분은 단순히 Copilot으로 코드를 생성하는 것이 아니었습니다. 저는 다음을 해야 했습니다:

1. 요구사항을 명확하게 정의하기.
2. 생성된 코드를 검토하기.
3. 애플리케이션을 테스트하기.
4. UI 및 기능상의 문제를 파악하기.
5. Copilot에게 구체적인 프롬프트를 주어 수정하도록 요청하기.
6. 프로젝트를 문서화하기.
7. 최종 버전을 배포하기.

이는 AI 지원 개발(AI-assisted development), GitHub Codespaces, Git, 브라우저 API(browser APIs), 그리고 배포를 활용한 유용한 실습 경험이었습니다.

다음 계획은?

앞으로 탐색하고 싶은 몇 가지 개선 사항들:

• 사용자 인증 (User authentication)
• 클라우드 기반 작업 동기화 (Cloud-based task synchronization)
• 데이터베이스 저장소 (Database storage)
• 더 고급 알림 예약 기능 (More advanced reminder scheduling)
• 신뢰할 수 있는 백그라운드 푸시 알림 (Reliable background push notifications)
• 작업 카테고리 및 태그 (Task categories and tags)
• 드래그 앤 드롭 작업 정리 (Drag-and-drop task organization)

현재로서는 Blockday는 하루를 한 블록씩 계획하는 데 도움을 주는 간단하고 가벼운 프로젝트입니다.

#GitHub #GitHubCopilot #Codespaces #JavaScript #WebDevelopment #HTML #CSS #OpenSource