Cursor 스터디 실습 세션: 프롬프트로 간단한 To-do 서비스 만들기

안녕하세요, 13기 Cursor로 개발 생산성 극대화하기 스터디장을 맡은 성구입니다 👋

이번 실습 세션에서는 Cursor를 처음 접하는 분들을 위해 프롬프트로 간단한 To-do 서비스를 만드는 과정을 준비했습니다. 본격적으로 실습에 들어가기에 앞서 Cursor와 스터디에 대해 소개드리겠습니다.

1. Cursor가 뭔가요?

Cursor는 AI 기반 코드 에디터입니다. (코드 에디터는 코드를 작성하는 도구입니다. 마이크로소프트 워드와 비슷하다고 생각하시면 됩니다.)

AI 기반 코드 에디터는 뭐가 다를까요?

기존에도 ChatGPT, Claude 등 AI 서비스들이 코드 생성을 지원하고 있었습니다. 하지만 생성된 코드를 내 코드에 통합하고, 내 코드 베이스로 질문하는 등 제약이 있어 불편했습니다. Cursor는 내 코드 베이스에서 GPT, Claude 등 AI 모델을 사용하여 코드 생성, 리팩토링 등을 도와주기 때문에 개발 생산성 향상에 큰 도움을 주고 있습니다.

2. Cursor 스터디에서는 뭘 하나요?

Cursor 스터디의 목적은 'Cursor로 개발 생산성 극대화하기'입니다. 그렇기 때문에 개발 중인 서비스가 있으시거나, 개발하고 싶은 서비스가 있으신 분에게 적합합니다. Cursor로 개발 생산성에 도움을 받을 수 있는 케이스는 아래와 같습니다. (이 외에도 도움을 받을 수 있는 부분을 같이 스터디하면서 찾아봐요!)

아이디어를 MVP로 빠르게 구현
기존 코드 리팩토링
복잡한 로직 구현
디자인 개선
테스트 코드 작성
등등

개발자만을 위한 스터디는 아닙니다. 기초적인 개발 지식을 배우실 의지가 있다면 Cursor를 활용하여 간단한 서비스를 만들 수 있습니다. 그리고 공부를 하면서 조금씩 개발 경험을 쌓아나가면 좋을 것 같습니다.

(AI로 개발을 할 수 있다 X, AI로 개발 생산성을 향상시킬 수 있다 O)

3. 실습 세션

이번 실습 세션에서는 프롬프트로 간단한 To-do 서비스를 만드는 과정을 보여드리겠습니다.

개발 순서

ChatGPT로 PRD 작성하기
Cursor에 PRD 문서 등록하기
PRD 기반으로 프롬프트로 코딩하기

1) ChatGPT로 PRD 작성하기

프롬프트 질문: PRD 작성 요청

간단한 To do 서비스를 만들려고해. HTML, CSS, JS로 만들예정, 백엔드없이 프론트엔드만으로 구현하려고해서 브라우저의 로컬스토리지를 사용하면 좋을 것 같아. 할 일 추가, 수정, 삭제에 알림, 필터, 정렬 등 부가적인 기능도 들어갔으면 좋겠어. 요구사항에 맞게 PRD를 작성해줘.

프롬프트 답변: PRD 결과물

### PRD: 간단한 To-Do 서비스

---

**프로젝트 이름:** 간단한 To-Do 서비스  
**기술 스택:** HTML, CSS, JavaScript (프론트엔드만 사용)  
**데이터 저장:** 브라우저 로컬 스토리지

---

#### 1. 개요

간단한 To-Do 서비스는 백엔드 없이도 사용자가 효율적으로 할 일을 관리할 수 있는 가벼운 웹 애플리케이션입니다. 데이터는 브라우저의 로컬 스토리지를 통해 저장되어, 페이지 새로고침이나 브라우저 종료 후에도 사용자의 작업이 유지됩니다.

---

#### 2. 기능 및 요구사항

##### 핵심 기능

1. **할 일 관리**
   - **할 일 추가:** 제목과 선택적 세부 내용을 포함한 할 일을 추가할 수 있습니다.
   - **할 일 수정:** 기존의 할 일을 수정할 수 있습니다.
   - **할 일 삭제:** 할 일을 삭제할 수 있습니다.
   - **완료 표시:** 할 일을 완료 또는 미완료로 표시할 수 있습니다.

2. **알림**
   - **작업 확인 알림:** 할 일 생성, 수정, 삭제 시 알림을 제공합니다.
   - **상태 변경 알림:** 할 일을 완료 또는 미완료로 변경할 때 알림을 표시합니다.

3. **데이터 유지**
   - 로컬 스토리지를 사용하여 백엔드 없이도 사용자 데이터를 유지합니다.

##### 추가 기능

1. **필터링**
   - **상태별 필터링:** "전체," "완료," "미완료" 상태별로 할 일을 필터링할 수 있습니다.
   - **날짜별 필터링:** 생성일 또는 완료일에 따라 필터링 기능을 선택적으로 제공합니다.

2. **정렬**
   - **기한순 정렬:** 할 일을 기한에 따라 오름차순 또는 내림차순으로 정렬할 수 있습니다.
   - **우선순위 정렬(선택적):** 사용자가 우선순위를 지정한 경우 해당 우선순위에 따라 정렬할 수 있습니다.
   - **알파벳순 정렬:** 제목을 알파벳순으로 정렬할 수 있습니다.

3. **검색 기능**
   - **키워드 검색:** 사용자가 키워드를 입력하면 실시간으로 필터링된 할 일 목록을 보여줍니다.

4. **사용자 인터페이스**
   - **반응형 디자인:** 모바일 및 데스크탑 디바이스에 맞게 레이아웃이 조정됩니다.
   - **접근성:** 기본적인 접근성 기능을 포함하여 사용 편의성을 높입니다.

---

#### 3. 비기능적 요구사항

1. **사용성**
   - 직관적인 UI 디자인과 사용하기 쉬운 컨트롤 제공.
   - 할 일 가시성을 방해하지 않는 간단한 알림 기능.

2. **성능**
   - 빠른 로딩 시간과 할 일 추가, 수정, 삭제 시 매끄러운 전환.
   - 로컬 스토리지의 효율적인 사용을 통해 데이터 저장 및 검색 속도 최적화.

3. **확장성**
   - **초기 목표:** 확장성은 큰 고려사항이 아니지만, 할 일 목록이 커질 때 로컬 스토리지가 효율적으로 작동하도록 관리.

---

#### 4. 사용자 스토리

1. 사용자로서 새로운 할 일을 제목과 내용으로 추가하여 해야 할 일을 관리하고 싶습니다.
2. 사용자로서 기존 할 일의 내용을 수정하고 싶습니다.
3. 사용자로서 더 이상 필요 없는 할 일을 삭제하고 싶습니다.
4. 사용자로서 할 일을 추가, 수정, 삭제할 때마다 알림을 받고 싶습니다.
5. 사용자로서 완료 상태에 따라 할 일을 필터링하여 남은 일을 집중적으로 보고 싶습니다.
6. 사용자로서 기한에 따라 할 일을 정렬하여 우선순위를 두고 작업하고 싶습니다.
7. 사용자로서 브라우저를 닫아도 할 일이 저장되길 원합니다.

---

#### 5. 기술적 고려사항

1. **로컬 스토리지 구조**
   - 할 일을 객체 배열로 저장하며, 각 객체는 `title`, `details`, `status`, `createdAt`, `completedAt` 같은 속성을 가집니다.
   
2. **데이터 업데이트 메커니즘**
   - 할 일 목록에 변경이 있을 때마다 로컬 스토리지에 업데이트를 반영합니다.
   
3. **알림 구현**
   - JavaScript로 각 작업에 대한 알림을 동적으로 표시합니다.

---

이 PRD는 HTML, CSS, JavaScript만으로 백엔드 종속성 없이 사용자 친화적이고 기능적인 To-Do 리스트 애플리케이션을 구축하는 데 초점을 맞추고 있습니다. 추가 요청사항이 있으면 알려주세요!