결국은 html코드지만..내 아이디어를 손에 잡히게 만든 첫걸음: Cursor로 시작한 개발 입문기

1. 소개

공무원으로 일하면서도 AI에 꾸준히 관심을 갖고 공부해왔고, 이전에는 Bubble.io를 활용해 현수막 관리 시스템도 개발해본 경험이 있어요. 하지만 Bubble은 너무 '한땀한땀' 느낌이 강했기에, 좀 더 편하게 개발할 수 있는 방법을 찾던 중 Cursor를 알게 되었고, 그 첫걸음을 이번 스터디에서 내디뎠습니다. "1인 기업가를 위한 코딩 입문 스터디"는 단순한 코딩 수업이 아니라, 아이디어를 실제 서비스로 실현하는 실전형 여정이자, 제가 하고 싶은 개발을 위한 첫단추 같은 느낌이었어요.

1주차에는 Cursor라는 도구를 설치하고, 아주 기본적인 HTML 구현을 해보는 시간을 가졌습니다. 사실 이전에도 Cursor를 설치하고 "해줘, 해줘" 하며 재미삼아 몇 번 써본 적은 있었어요. 처음 가입하면 14일간 pro 플랜을 체험할 수 있다는 걸 알고 있었는데, 14일이 지난 뒤에도 계속 채팅이 되길래 "어? 이거 뭐지?" 싶었죠. 자세히 보니 클로드는 막혔고, GPT-4.1만 계속 사용할 수 있었더라고요. 그래서 혹시 다른 계정으로 로그인하면 또 14일 무료일까 싶어서 시도해봤지만, 계속 free 플랜만 되더라고요~ 😅 결국 속 편하게 그냥 결제하기로 마음먹었답니다.

우선 https://cursor.com/에서 회원가입후 프로플랜 결재하고 프로그램 다운 받았습니다.

무료버전에서는 ai에이전트에게 신분확인을 한 결과.. 요렇게 나오고.

한국어 문자 메시지의 스크린 샷

프로결재후에는 클로드-4 소넷을 쓸수 있게 되었어요

이번 스터디에 참여하면서 다시 본격적으로 Cursor를 제대로 배워보고자 했고, "내가 개발자가 아니라도 뭔가를 만들 수 있을까?"라는 질문에 작게나마 "될 수도 있겠다"는 가능성을 느낀 시간이었죠. 아직은 걸음마 단계이지만, 해보고 싶은 개발 아이디어는 마음속에 아주 많답니다. 꿈은 원대하게~ 🚀

2. 진행 방법

🛠️ 사용한 도구 및 기능들

  • Cursor: GPT 기반 코드 자동 생성 IDE. 자연어 명령으로 코드 생성 가능.

  • PRD 기반 todo 흐름: 머릿속 생각을 구조화하는 데 큰 도움.

  • 추가 학습 의지: 다음 주부터는 MCP와 API 연동으로 더 넓은 기능을 만들어보고 싶어요.

1) 7월 10일 1주차 OT 요약: 성장피터님 강의 핵심 정리

구분

설명

1. 개발 툴

우리는 Cursor를 중심으로 개발 예정

2. 사전 지식

프론트엔드, 백엔드, API, MCP 등의 기본 개념 숙지 필요

3. 내가 만들고 싶은 것

랜딩페이지 → 이후 다양한 자동화 시스템으로 확장

2) 개발 실전 팁 & 예시 명령어

기능

설명

예시

Font Awesome

아이콘 라이브러리

"제목 옆에 FontAwesome 아이콘 붙여줘"

Tailwind CSS

깔끔한 디자인용 CSS 프레임워크

"Tailwind CSS로 디자인 반영해줘"

Chart.js

데이터 시각화용 차트 라이브러리

"chart.js로 막대차트 그려줘"

Primary Color

주요 색상 정의

"Primary Color를 Navy Blue로 지정해줘"

WYSIWYG 에디터

글쓰기 UI 개선

"Textarea를 WYSIWYG 에디터로 바꿔줘"

채팅봇 맥락 유지

대화 흐름 유지

"이전 대화내용을 포함해서 전송해줘. 세션은 쓰지 마"

3) 개발 아이템 구상

우선순위

아이템

✅ 1순위

퍼스널 브랜딩 랜딩페이지

📌 이후 개발 아이템

-

공공건물 용도 추천 시스템 초안

-

원가심사 GPTs

-

강남구청 식권정산 프로그램

-

주차단속 위반 과태료 자동화 시스템

-

자원순환과 청소포탈에 질의답변 봇 붙이기

4) 진행 방법

🌟 실습 흐름

- Cursor 설치 → 나에 대해 설명해줘(gpt-03모델) 하고 나서 문서검토→ PRD 문서 작성 → todo.md 자동 생성 → 자연어 명령으로 개발 진행

-나에 대한 설명GPT에게 물어보기https://chatgpt.com/share/68707196-ea00-8008-8507-d4243e0afe31

-PRD빌더 GPTS https://chatgpt.com/share/6870b016-d130-8008-88dc-97875e3b5f47

-여기에서 뉴파일 클릭해서 PRD.MD파일 생성

거기에 GPT에게 물어본 PRD문서 생성한거 복사해서 입력합니다.

그리고 PRD문서를 참조해서 TODO.MD파일도 만들어달라고 합니다~!

만들어진 todo.md파일을 참조하도록

```@todo.md를 참조해서 개발을 진행해줘```

한국 문자 메시지의 스크린 샷

-개발을 시작합니다. RUN 이런거 계속 클릭 클릭

-처음에는 빈페이지가 나왔어요

한국어 텍스트가있는 브라우저의 스크린 샷

-그래도 이번에는 좀 있어보이는 에러가

Google 검색 페이지의 스크린 샷

-이후에는 수없이 2시간 정도 계속 수정 수정해~~~~수정해~~왜 안돼? 해결해ㅡㅡ;;

-결국에는 로컬호스트에서 여는것은 포기하고..어제 주워들은 ```바닐라코딩```으로 해보라고 합니다.

결과물(어찌 어찌 HTML로 했습니다. 디자인만)

강진규 - 행정혁신가 | AI 글쓰기 작가 | 퍼스널 브랜딩 멘토

한국 웹 사이트의 스크린 샷

3. 결과와 배운 점

이번 주 가장 크게 느낀 건 바로 이 말이었습니다.

"동영상만 보고 끝내면 내 것이 되지 않는다."

Cursor를 설치하고, 직접 파일을 만들고, 자연어로 명령을 입력하며 얻은 경험은 그 어떤 강의보다 강력한 체득이었어요. 특히 PRD → todo.md → 코드로 이어지는 개발 흐름은 머릿속이 정리되는 느낌을 줬고, 이게 바로 제가 계속 써먹고 싶은 방식이라는 걸 느꼈습니다.

앞으로는 매주 하나씩, 예전에 생각만 했던 아이디어들을 실제 코드로 구현해보려 합니다. MCP 환경과 API 연결을 배우면서, 진짜 '나만의 웹서비스'를 향해 나아가보려고합니다.

4. 도움 받은 글

https://chatgpt.com/g/g-PuPOUqhcR-prd-builder

https://chatgpt.com/g/g-67e27ac185e881918a2d7b5c437d7de1-gaebaljafyi-sarye-gesigeul-mandeulgi

2
1개의 답글

👉 이 게시글도 읽어보세요