소개
코딩을 전혀 몰라도 웹사이트를 만들 수 있다는 말에 이끌려 Cursor 기반 랜딩페이지 제작 스터디에 참여하게 되었습니다.
'퍼스널 브랜딩용 랜딩페이지'를 직접 만들며, AI와 협업해 나만의 웹페이지를 제작하는 경험을 해보고 싶었습니다.
처음 이 스터디에 참여하게 된 계기는 단순했습니다.
코딩 지식이 없어도 MVP 웹사이트를 만들 수 있다는 말 한마디에 호기심이 생겼고,
AI가 코드를 대신 써준다는 ‘Cursor’라는 도구에 대한 기대도 있었죠.
하지만 막상 시작해보니, 기대만큼 쉽진 않았습니다.
나의 상황
코딩은 생소했고, 스터디에서 비교 대상(팀원들, 스터디장님)의 결과물이 눈에 띄게 좋았음
처 음에는 내가 뭘 잘못하고 있는지조차 모를 정도로 막막했음
생성된 코드 파일을 계속 지우고 다시 시도하며 무한 반복
그래서 더 많은 걸 배웠고 AI 사용에 익숙해지고 비전공자인 제가 실제로 웹페이지를 만든다는 것 자체가 큰 도전이었습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
- Cursor (AI 기반 코드 생성기)
- Vercel (배포)
- React + TailwindCSS (프론트엔드 프레임워크)
- prd.md, todo.md 마크다운 파일로 기획/작업 정의
커서와 대화하는 방법
1. 기획: prd.md에 원하는 페이지 구성 요소 정의
2. 작업 분해: todo.md로 기능 단위 할당
3. 프롬프트 작성 → Cursor로 코드 자동 생성
4. 코드 수정 & 에러 디버깅 → 반복
5. 로컬 서버로 실행 및 UI 확인
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
Cursor는 구체적으로 설명할수록 더 정교한 결과를 줍니다.
→ “추상적으로 말하지 말고, 화면 구성을 조목조목 써라!”prd.md로 방향을 먼저 정하면 개발이 더 빠르고 정확했습니다.코드에서 오류가 생기면, 당황하지 말고 디버깅과 반복이 답입니다.
✅ Cursor 기본 사용법 | 프롬프트 → 코드 생성 → 결과 확인 → 개선의 구조 이해 |
| ✅ AI와 협업하는 감각 | AI에게 구체적이고 명확하게 지시하는 커뮤니케이션 역량 |
| ✅ PRD & TODO 정리 습관 | 구조화된 사고와 명확한 작업 분할 능력 |
| ✅ 실패를 통해 배우는 근성 | 오류를 두려워하지 않고 시도하고 반복 |
과정 중에 어떤 시행착오를 겪었나요?
다른 팀원들 결과물이 빨리 나오는 걸 보며 위축됐습니다.
오류가 많아 여러 번 파일을 지우고 다시 생성했지만 제대로 작동되지 않았습니다.
결과물을 못 따라가서 속상했지만, 끝까지 시도한 덕분에 결국 비슷한 결과에 도달했습니다.
도움이 필요한 부분이 있나요?
디버깅 능력 향상이 필요합니다.
(에러 메시지를 읽고 정확히 어떤 부분이 잘못됐는지 파악하는 연습이 더 필요해요.)기본적인 React 개념에 대한 이해가 부족한 상태입니다.
앞으로의 계획이 있다면 들려주세요.
🐞 오류 발견 → 🔧 오류 수정 익숙해지기
패턴:
Cursor 프롬프트 → 코드 생성 → 실행 → 오류 발생
오류 위치 파악 → 프롬프트 개선 or 코드 수정
느낀 점:
"AI가 처음부터 완벽하진 않지만, 내가 명확하게 설명할수록 정확해진다.""에러는 학습의 일부다"라는 인식 전환