이 글은 [인디해커랩 레터] 에서 발행되었습니다.
인디해커, 개발, 프로덕트, 비즈니스, AI에 대한 정보가 궁금하다면 구독해보세요.
[구독하러 가기]

오늘은 프롬프트만으로 To-do List 서비스를 제작하는 방법을 소개해 드리려고 해요. 이 프로젝트를 통해 Cursor의 강력한 기능을 경험하고, AI 기반 코드 작성이 얼마나 유용한지 직접 느껴보실 수 있습니다.

1. Cursor가 뭔가요?

Cursor는 AI 기반의 코드 에디터로, 프롬프트를 통해 코드 작성, 리팩토링, 디버깅을 쉽게 할 수 있는 도구입니다. 기존의 코드 에디터와는 다르게 사용자가 텍스트로 원하는 기능을 설명하면 Cursor가 이를 바탕으로 코드를 생성해 주기 때문에 코드 작성에 대한 부담을 크게 줄여줍니다.

이런 AI 기반 코드 작성의 장점은 개발자뿐만 아니라 비개발자도 직관적으로 기능을 구현할 수 있다는 점인데요, 오늘은 Cursor로 직접 To-do List 서비스를 만들어보며 이 점을 확인해보겠습니다.

2. 프롬프트 5개로 To-do List 서비스 만들기 프로젝트 단계

이번 프로젝트는 크게 다섯 단계로 나누어져 있으며 각 단계별로 약 5-10분 정도가 소요됩니다.

Step 1: PRD 작성 (with ChatGPT)

먼저 서비스의 기능과 요구사항을 정리한 PRD(Project Requirements Document)를 ChatGPT로 작성해보겠습니다. PRD는 프로젝트의 청사진으로 어떤 기능이 필요한지 한눈에 파악할 수 있습니다.

프롬프트 예시: "HTML, CSS, JavaScript로 백엔드 없이 로컬 스토리지를 사용해 데이터를 저장하는 To-do List 서비스를 만들려고 해. 할 일 추가, 수정, 삭제 기능에 알림, 필터, 정렬 기능도 있으면 좋겠어. 이 요구사항에 맞게 PRD를 작성해줘."

ChatGPT가 이 설명을 바탕으로 기능 요구사항, 사용자 시나리오까지 포함한 PRD를 생성합니다. 이 문서는 프로젝트의 방향을 잡고 필요한 기능을 명확하게 정의하는 데 도움이 됩니다.

Step 2: Cursor에 PRD 등록

작성한 PRD를 Cursor에 등록합니다. 단축키로 NOTEPAD를 실행하세요:

• Mac: command + shift + i
• Windows: ctrl + shift + i

PRD를 등록하면 프로젝트 진행 중 언제든 참고할 수 있어 PRD를 바탕으로 코드 생성이 필요할 때마다 빠르게 작업을 진행할 수 있습니다.

Step 3: 프로젝트 기본 기능 구현

이제 To-do List의 핵심 기능인 할 일 추가, 수정, 삭제 기능을 구현할 차례입니다. Cursor에 프롬프트를 입력해 코드를 생성합니다.

프롬프트 예시: "@PRD 문서를 참고해서 Simple Todo 프로젝트를 만들어줘."

Cursor는 이 요청에 맞춰 기본적인 To-do List의 구조를 만들어 주고 할 일 목록을 추가하고 삭제하는 기능을 자동으로 생성합니다. 단 몇 초 만에 프로젝트의 뼈대가 완성되는 경험을 하실 수 있습니다.

Step 4: 추가 기능 구현

기본 기능을 갖춘 To-do List에 이제 필터링, 정렬, 알림 기능을 차례로 추가해보겠습니다. 이때도 프롬프트로 간단히 요청할 수 있습니다.

프롬프트 예시: "할 일을 완료 상태별로 필터링할 수 있는 기능을 추가해줘." "기한순으로 할 일을 정렬하는 기능을 추가해줘." "할 일 추가 시 확인 알림을 표시해줘."

이러한 프롬프트를 통해 필터링과 정렬 기능이 추가되어 사용자가 완료된 항목과 미완료 항목을 나누어 볼 수 있고 기한에 따라 할 일을 정렬할 수도 있게 됩니다. 각 작업이 완료될 때마다 알림 기능도 추가해 실시간으로 상태를 확인하며 사용자 경험을 향상시킬 수 있습니다.

Step 5: 디자인 개선하기

이제 프로젝트가 완성 단계에 도달했으니 시각적인 개선을 통해 더 사용자 친화적인 To-do List를 만들어보겠습니다. Cursor에 간단한 프롬프트로 CSS 스타일링을 요청해 보다 멋진 UI를 구현할 수 있습니다.

프롬프트 예시: "To-do List의 버튼을 파란색으로 바꾸고 각 할 일을 카드 형태의 디자인으로 보여줘." "모바일 화면에서 잘 보이도록 레이아웃을 반응형으로 조정해줘."

💡 디자인 개선 팁:

Pinterest나 Dribbble에서 "To do list ui design" 같은 키워드로 참고하고 싶은 디자인을 찾아 이미지를 첨부하면 더 구체적인 디자인 방향을 제시할 수 있습니다.

프롬프트 예시: "첨부한 이미지처럼 그림자 효과가 있는 카드 형태로 디자인해줘. 할 일 완료 시 체크 표시도 동일하게 적용해줘."

Cursor는 요청에 따라 CSS 스타일을 적용해 모바일에서도 보기 좋은 반응형 레이아웃과 미려한 카드 스타일의 UI를 제공합니다. 이렇게 사용자 맞춤형 UI를 간단하게 추가해 디자인과 기능이 개선된 웹 서비스를 만들 수 있습니다.

3. 이번 프로젝트에서 얻은 인사이트

이번 프로젝트를 통해 Cursor의 다양한 기능을 확인할 수 있었습니다. 특히 프롬프트 기반의 개발 방식이 코드 작성 시간을 크게 줄여준다는 점이 인상적이었는데요, 다음과 같은 중요한 인사이트를 얻을 수 있었습니다.

1) 프롬프트 기반 개발의 유용성

Cursor가 코드 작성부터 디자인 개선까지 AI를 활용하여 처리해 주기 때문에 개발자는 구조와 설계에 집중할 수 있습니다. 단순한 기능을 빠르게 구현할 때 Cursor는 매우 효과적이며 코드 작성에 대한 부담을 덜어주는 도구로 적합합니다.

2) 개발 지식이 필요한 도구

Cursor는 AI 기반으로 코드를 자동화하는 도구이지만 기본적인 개발 지식이 있을 때 더 생산적인 활용이 가능합니다. 코드의 작동 방식을 이해하고 수정할 수 있을 때 Cursor가 제안하는 코드도 상황에 맞게 조정할 수 있기 때문입니다. 규모가 큰 서비스나 복잡한 로직 구현에는 한계가 있을 수 있지만 기본 개발 지식이 있다면 단순하고 반복적인 작업의 생산성을 극대화할 수 있습니다.

3) 생산성 향상

Cursor는 반복적인 작업을 빠르게 처리할 수 있도록 도와주기 때문에 특히 MVP 개발과 같은 작은 프로젝트를 빠르게 구현할 수 있습니다. 기본 기능을 구현하고 필요에 따라 세부 조정을 하는 방식으로 빠르게 서비스를 구축할 수 있습니다. 기존 프로젝트에서 테스트 코드 생성, 리팩토링 등 다양하게 활용할 수도 있습니다.

4) 비개발자도 쉽게 사용할 수 있는 도구

기본 개발 지식이 없는 비개발자도 Cursor의 간단한 프롬프트 기능을 활용해 기초적인 기능을 빠르게 구현할 수 있어 접근성이 뛰어납니다. Cursor는 비개발자에게 서비스 제작의 가능성을 열어주는 도구이기도 합니다.

Outro

Cursor는 AI를 통해 개발 작업의 많은 부분을 자동화할 수 있는 강력한 도구이지만 기초적인 개발 지식이 있을 때 그 잠재력이 극대화됩니다. 코드가 어떻게 작동하는지 이해하고 필요한 경우 수정하는 능력이 있을 때 Cursor의 생성 코드도 더 큰 가치를 발휘하게 되죠.

Cursor로 작은 프로젝트나 MVP를 제작해보며 개발 지식과 생산성을 동시에 높여보세요!

이 글은 [인디해커랩 레터] 에서 발행되었습니다.
인디해커, 개발, 프로덕트, 비즈니스, AI에 대한 정보가 궁금하다면 구독해보세요.
[구독하러 가기]