소개
코딩을 전혀 몰라도 웹사이트를 만들 수 있다는 말에 이끌려 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가 처음부터 완벽하진 않지만, 내가 명확하게 설명할수록 정확해진다.""에러는 학습의 일부다"라는 인식 전환
