안녕하세요, 빈종이입니다
작은 회사에서 소프트웨어 만들고 있습니다
주로 이면지에 필기를 하는, 아날로그 인간입니다
AI에 대한 지식과 경험 모두 부족합니다
13기가 첫 스터디입니다. 잘 부탁드립니다
시도해본 것들
Cursor의 Notepad에 요구사항 문서(PRD)를 입력하고, Composer 기능(일종의 Chat 기능)을 활용해서 노코드로 독서 기록용 웹앱 만들기
스터디장 성구 님의 Cursor 스터디 1주차 사례실습을 참고했습니다
코드 생성 요청할 때, 스택에 대한 복잡한 조건 덧붙이기
성구님은 HTML, CSS, JS로 웹앱을 개발하는 데모를 보여주셨는데
저는 이후 제품을 고도화하기 쉽도록, 저에게 익숙한 Next.js, CSS Module 스타일로 코드를 작성해달라고 했습니다
최대한 다른 스터디에서 주워들은 것 사용해 보기
POC 스터디에서 배운 내용을 사용해 PRD를 만들어 봤습니다
Cursor에게 좀 더 나은 명령을 제공하기 위해, 프롬프트 스터디에서 배운 감자나라님의 프롬프트 메이커를 사용해 봤습니다
진행 방법
PRD 도출
자세한 내용은 AI로 독서 기록용 Next.js 웹앱 만들기 (2) - 기획 문서와 설계 문서 도출을 참고해 주세요
매일 독서한 내용을 기록하는 서비스를 만들거야. 해당 서비스의 요구사항 분석을 시작할 거야. 이와 관련된 질문을 나에게 하고 내가 답변을 하면 그것을 요약하고 다시 이어서 추가 질문을 반복해.(Thanks to 개발자F 님)ChatGPT에 위 프롬프트를 넣으면 ChatGPT가 저에게 계속 질문을 하면서 제품 요구 사항을 세부적으로 구성해 나갑니다. 저는 어려운 기능을 최대한 제외하고 만들겠다고 했기 때문에, 질문은 세 번 정도, 한번에 서너가지씩 받았습니다.
해당 질문과 응답 과정을 통해 만들어진 PRD는 다음과 같습니다.
한국어 텍스트가 있는 검은 화면
Next.js 프로젝트 세팅
AI와 무관하므로 넘어가겠습니다
Cursor에서 PRD를 Notepad로 저장
Cmd + Shift + I
맥 os x os x os x os x os x os
Cursor Composer에 넣을 프롬프트 만들기 (with 감자나라님의 프롬프트 메이커)
제가 Cursor에다가 직접 명령하면, 제대로 된 결과가 나오지 않는 것 같아서 프롬프트를 만드는 것까지 AI의 도움을 받아봤습니다
두 단계를 거쳤습니다
한국어 텍스트가 있는 검은 화면
결과로 나온 프롬프트는 다음과 같습니다
너는 지금부터 Next.js를 사용하여 반응형 UI/UX 코드를 작성하는 프런트엔드 개발자 역할을 맡아야 해. 너의 목표는 PRD에 기반해 사용 자가 기록을 모아볼 수 있는 달력 뷰와 상세 기록 뷰, 독서 기록을 남길 수 있는 페이지를 구현하는 것이야. 아래 조건을 모두 만족하는 Next.js 기반 UI/UX 코드를 작성해줘. - PRD에 따라 전체 레이아웃을 구성해 줘. - 각 화면을 위한 컴포넌트들을 CSS Module 방식을 활용하여 스타일링 해줘. - 메인 기능은 기록 달력 뷰와 상세 기록 뷰, 독서 기록 입력 페이지, 이메일 로그인 기능, 사용자 개인 설정 페이지야. - 반응형 디자인을 구현하고, 화면 크기에 따라 자동으로 조정될 수 있도록 CSS Module 방식으로 구성해줘. - UI 컴포넌트를 위한 전체 Next.js 코드와 스타일링 코드를 작성해줘.
Cursor Composer에다가 해당 프롬프트 넣고 수행하기
컴퓨터에 있는 한국어 텍스트 편집기의 스크린샷
본인이 생각하는 프로젝트 구조를 먼저 제안해줬습니다. 이때까지만 해도 매우 기특했어요.
많은 파일을 동시에 만들어줬습니다. 과연 제대로 동작할지 의문입니다.
컴퓨터에 있는 파일 목록의 스크린샷
Next.js 프로젝트 구동해서 얼만큼 됐는지 살펴보기
우선 페이지 간 이동 연결(routing)이 하나도 구현되어 있지 않은 상태였습니다
달력 페이지, 기록 페이지 등의 링크가 연결되어 있지 않아, 일일이 URL을 쳐서 접근해야 했습니다.
첫 페이지는 달력입니다.
하지만 달력이 실제로 구현되지는 않았습니다 ㅠ
이게 결과물의 전부라니
두번째 페이지는 기록 목록…
제목만 목록이고 실제로는 기록용 페이지가 나왔습니다
한국어 텍스트가 있는 검은 화면
첫번째 페이지랑 스타일이 맞지 않습니다
제목과 내용이 끝?
책 이름, 읽은 페이지, 기억에 남는 문장, 감상 등을 기록할 수 있으면 좋겠습니다.
세번째 페이지는 로그인 페이지입니다
텅 비어 있네요.......?
한국어로 된 메시지가 있는 검은 화면
네번째 페이지는 없습니다. 유저 세팅 페이지가 만들어지길 기대했는데… 쩝…
다섯 번째 페이지는 기록 상세 페이지인데, 데이터가 없어서 접근이 불가능합니다.
(밤이 깊었으므로) 정말 최소한의 기능만 구현하기 위해 어떤 내용들을 제외하고 어떤 명령을 다시 내릴지 미리 계획을 세워보았습니다.
프로젝트에서 제외시키기
로그인 페이지
유저 세팅 페이지
(한번도 다뤄지지 않은)
이제부터가 핵심입니다
구체화
기록 목록 페이지(record.tsx)를 기록 작성 페이지(write.tsx)로 리팩터링
기록 데이터 포맷 생성하게 하기 (PRD를 통해 유추할 수 있음)
기록 데이터 포맷에 맞게 작성 페이지 수정
기록 데이터 포맷에 맞게 상세 페이지 수정
달력 뷰에 표현할 가짜 기록 데이터들 만들기
달력 뷰 만들어달라고 하기
기본적인 달력의 인터랙션
가짜 기록 데이터들이 달력 뷰 안에 들어있고
일자를 누르면, 기록 상세 페이지로 이동하도록
두번째 이터레이션 시작합니다. Composer에게 제가 정리한 단계들을 해달라고 요청할 것입니다. 중간중간 결과물을 확인하지 않고, 다 끝난 뒤에만 확인하려고 합니다.
기록 목록 페이지를 기록 작성 페이지로 리팩터링
한국어 텍스트 편집기의 스크린샷
기록 데이터 포맷 생성하게 하기 (처참한 프롬프트지만, 찰떡같이 알아들어줬어요)
기록 데이터 포맷에 맞게 작성 데이터 수정
사실 작성 데이터와 상세 데이터가 한번에 수정되길 바라고 모호하게 요청을 했는데
그래도 작성 데이터를 고쳐준 것만으로도 감사했습니다
한국어로 된 기록 양식 스크린샷
가짜 데이터 생성
왠지 말을 척척 알아들어서 제 말투도 좀 다정해졌습니다
여기서 제시해 준 파일은 자동으로 생성되지 않아서, AI가 시키는 대로 public 폴더에 갖다가 넣었습니다
중국사이트 스크린샷
달력 뷰 생성 요청
여기서는 나름 공들여 프롬프트를 썼습니다 (~하자 라니... 청유형 등장)
한국 달력 스크린샷
다 끝났습니다. 다시 프로젝트를 실행시켜 봤습니다.
달력 뷰 - 정말 대단한 발전입니다
검은 화면에 한국 달력
11/1을 눌렀을 때 보여지는, 기록 상세 뷰입니다.
스타일은 구리지만, 그래도 달력에서 타고 들어갈 수 있고, 데이터를 제대로 그리는 게 어디겠어요?
한 국 컴퓨터 화면의 스크린샷
달력 하단의, 기록 작성 페이지를 눌러서 기록 작성으로 들어갑니다.
데이터의 일관성이 잘 반영되어 있었습니다 좋았습니다.
한국어 텍스트가 포함된 검은 화면의 스크린샷
결과로부터 배운 점
적절한 PRD와 적절한 프롬프트가 있으면, Cursor가 한번에 뚝딱뚝딱 다 해주길 기대하고 시작했는데, 아쉽게도 그런 일은 일어나지 않았습니다.
AI 초보자는 너무 기대가 컸습니다
두번째 이터레이션에서는 좋은 결과가 나오길 기대하면서 이것 저것 쪼개서 작업을 해봤습니다. 훨씬 좋은 결과가 나왔습니다
너무 많은 걸 한번에 해달라고 하는 건 아무래도 힘든 일인 것 같습니다
제 머릿속에 뭔가가 더 정리되어 있어야, 툴을 더 잘 사용할 수 있다는 교훈을 얻었습니다.
Cursor는 노코드 툴이라기보단 코드 에디터니까, Cursor가 짜주는 코드에 전적으로 의지하기보다는, 제가 직접 코드들을 짜면서 뭔가 더 요청하는 식의 개발이 메인이 되어야 할 것 같습니다.
이번 사례에서는 드러나지 않았지만, 서비스에 대한 도메인 지식이 많이 필요한 코드를 작성해야 한다면, 직접 개발하는 게 더 효율적이고 효과적일 것입니다.
도메인 지식을 모두 문서화해서 Cursor에게 맥락(context)으로 제공하는 방향도 있겠지만, 그 일이 혼자서 하기엔 쉽지 않은데다가, 맥락이 많다고 한들 오류의 가능성은 항상 있으니까요
특히 프로덕트 고도화 단계에서는 프로덕트 초기 개발 단계에서보다 Cursor의 노코드 개발에 의존할 수 있는 확률이 낮아질 것 같습니다.
Cursor의 노코드 기능이 잘 동작하는 분야와 동작 조건이 무엇인지 실험을 통해 알아두는 게 중요할 것 같습니다
우선 초반 프로젝트 구조 세팅은 나쁘지 않았습니다
(첫 기대치를 이정도로 잡았다면 그렇게 실망하지 않았을지도...)
PRD 뿐 아니라, 와이어프레임, 플로우차트 등의 자료를 더 제공하면 더 좋은 결과가 나올까 궁금합니다
다양한 사례들을 공유받을 수 있으면 좋겠습니다!
Cursor의 전반적인 기능에 대한 심도 있는 파악이 좀 더 필요할 것 같다고 생각했습니다
특히 Composer가 무엇인지, Composer와 Chat의 차이는 무엇인지 등은 아직 감이 잘 오지 않습니다
이 문제를 위해 Cursor 공식 문서 전부 소화하고 정리하는 사례게시글을 작성중입니다
이후에 작성한 사례게시글
AI로 독서 기록용 Next.js 웹앱 만들기 (2) - 기획 문서와 설계 문서 도출
독서 기록 앱의 상세 기획과 설계를 조금 더 탄탄하고 광범위하게 진행해 보았습니다
13기 마케터 스터디 분들이 작성하신 것과 유사한 형태로 진행해 봤습니다
http://leadz.kr/xGB 여기서 독서 기록 웹앱 사전 신청을 받고 있습니다 😇
도움 받은 자료
성구 님의 Cursor 스터디 1주차 사례실습과 Youtube 링크
곽은철 님의 POC 스터디 오프라인 강의 내용
감자나라 님의 프롬프트 메이커
끝까지 읽어주셔서 감사합니다
읽기에 불편하신 부분이 있다면 댓글 남겨 주세요. 다음 게시글의 개선점으로 삼겠습니다
