본문 바로가기

오공완

패스트캠퍼스 환급챌린지 19일차 : AI로 코딩하는 시대! 비개발자도 할 수 있는 Cursor.AI 실전 웹 제작 후기 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.오늘은 Cursor로 개발할 때 꼭 겪게 되는 에러 수정 요청을 어떻게 해야 정확하게 통하는지에 대한 강의였다.이전까지는 막연히 “버튼이 안 눌려요” 정도로 요청했지만,이제는 그렇게 해서는 원하는 결과를 얻기 어렵다는 걸 깨달았다.강의에서 배운 핵심 포인트는,에러 상황을 구조화해서 설명하는 4가지 요소를 꼭 포함하라는 것:접속 주소 (Where)시도한 행동 (Try)기대한 결과 (Expected)실제 결과 (Actual)이렇게 정리해서 요청하면, 커서도 문제 상황을 더 정확히 이해하고 고칠 수 있게 된다.또한 프롬프트를 쓸 때는 마크다운 구조를 쓰거나,“당신은 시니어 QA입니다”처럼 역할을 부여해서 요청하면 응답의 퀄리티가 확 올라간다는 것.. 더보기
패스트캠퍼스 환급챌린지 18일차 : AI로 코딩하는 시대! 비개발자도 할 수 있는 Cursor.AI 실전 웹 제작 후기 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.1. 왜 라이브러리를 알아야 하나?Cursor는 AI가 코드를 작성하지만, 명확하고 구체적인 지시가 있을 때 더 좋은 결과물을 만들어냄예:"로그인 페이지 만들어줘" → 결과 불명확"shadcn UI의 Input, Button, react-hook-form을 사용해서 로그인 페이지 만들어줘" → 훨씬 정확한 코드 생성✅ 따라서 주요 라이브러리의 역할과 이름 정도는 알고 있어야 AI에게 명확한 프롬프트 작성 가능2. 필수 라이브러리 5가지1. shadcn/ui역할: 고급스러운 디자인의 UI 컴포넌트 집합버튼, 인풋, 다이얼로그 등 다양한 컴포넌트 포함모든 페이지에서 활용 가능설치 방법: shadcn/ui 공식 사이트 → 원하는 컴포넌트 선택 →.. 더보기
패스트캠퍼스 환급챌린지 17일차 : AI로 코딩하는 시대! 비개발자도 할 수 있는 Cursor.AI 실전 웹 제작 후기 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.Next.js App Router 이해하기Next.js 라우팅(App Router) 구조 이해1. 라우터 규칙을 알아야 하는 이유Cursor를 쓸 때 가장 중요한 점은 **“어떤 파일을 열고 요청하느냐”**임Next.js는 특정 파일명을 기준으로 URL 경로를 자동으로 결정함따라서 라우팅 규칙을 이해하지 않으면 AI에게 정확한 명령 전달이 어려움2. Next.js 라우팅 기본 규칙▸ 1. page.tsx만 페이지 파일로 간주됨layout.tsx, globals.css, icon.png 등은 페이지 경로에 직접 대응되지 않음오직 page.tsx라는 파일만 실제 페이지를 렌더링하는 핵심 파일▸ 2. 폴더 경로 = URL 경로예: /premium.. 더보기
패스트캠퍼스 환급챌린지 16일차 : AI로 코딩하는 시대! 비개발자도 할 수 있는 Cursor.AI 실전 웹 제작 후기 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.오늘은 커서에서 프롬프트를 잘 쓰는 것만큼이나 중요한,Next.js 폴더 구조를 이해하는 법을 배웠다.사실 그동안은 “커서가 다 알아서 해주겠지”라는 마음으로 막연하게 코드를 요청했는데,이번 강의를 듣고 나니 커서가 모든 코드를 완벽히 이해하고 응답하는 건 아니라는 사실을 알게 됐다.결국 커서도 사람이 연 파일을 기준으로 작동하기 때문에,내가 정확히 어떤 기능을 수정하고 싶은지를 폴더 구조로부터 명확히 지정해주는 게 핵심이었다.특히 src/app 폴더는 페이지 라우팅 구조, src/components는 UI 요소를 담는 곳으로 나뉘어 있다는 점,그리고 커서의 작동 기준점이 ‘현재 열려 있는 파일’이라는 점이 인상 깊었다.이걸 모르면 의도와 .. 더보기
패스트캠퍼스 환급챌린지 15일차 : AI로 코딩하는 시대! 비개발자도 할 수 있는 Cursor.AI 실전 웹 제작 후기 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.오늘 강의는 커서를 단순히 “AI 코딩 도구”로 사용하는 걸 넘어,개발을 이해하고 도구처럼 활용하는 방법에 대한 인사이트를 담고 있었다.그동안은 프롬프트만 잘 써도 꽤 괜찮은 결과물이 나왔지만,실제로 프로젝트를 진행하다 보면 AI가 완전히 해결해주지 못하는 지점이 분명 존재한다.바로 그 틈을 메우기 위해 기초적인 개발 지식이 필요하다는 걸 오늘 강의에서 확실히 느꼈다.특히 이번 STEP 3 챕터에서는Next.js 기반 프레임워크 구조 이해실습 중 자주 발생하는 에러 원인과 해결 방법EaseNext 안에 내장된 주요 라이브러리(jotai, shadcn/ui 등)의 쓰임새이런 실무에서 정말 자주 마주치는 내용들을 다뤄준다.이론을 깊게 파고드는 .. 더보기
패스트캠퍼스 환급챌린지 14일차 : AI로 코딩하는 시대! 비개발자도 할 수 있는 Cursor.AI 실전 웹 제작 후기 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.인스타그램 클론 UI 구현 실습 – 문서 기반 + 프롬프트 전략오늘은 인스타그램 피드 UI를 클론 코딩해보는 실습을 진행했다.예전 같으면 HTML/CSS 구조 잡고 디자인 참고해서 하나하나 구현해야 했겠지만,이번엔 디자인 가이드를 문서로 정리해서 Cursor에 요청하는 방식으로 접근했다.특히 좋았던 건, nextcursor.com에서 서비스 참고 링크만 입력해도 컬러와 스타일을 자동 추출해준다는 점.정리된 문서를 docs/design.md로 저장해두고,“이걸 참고해서 구현해줘”라고 프롬프트만 입력하면 레이아웃은 물론 컬러 팔레트까지 한 번에 설정해준다.물론 모든 게 한 번에 완벽히 구현되진 않는다.카드가 2열로 나오는 걸 1열로 바꾸고, 시.. 더보기
패스트캠퍼스 환급챌린지 13일차 : AI로 코딩하는 시대! 비개발자도 할 수 있는 Cursor.AI 실전 웹 제작 후기 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다. 오늘은 커서와 함께 카카오톡 채팅 UI를 클론 코딩하는 실습을 진행했다.단순히 UI만 복사하는 것이 아니라, 디자인 가이드를 문서로 정리한 후, 그걸 기반으로 AI에게 구현을 요청하는 방식이었다.특히 기억에 남는 건, 헤더·메시지 목록·입력창을 모바일 화면처럼 하나의 박스 안에 구성하는 레이아웃 설계였다.초기에는 일부 컴포넌트가 박스 바깥에 위치해 있었지만, 프롬프트를 통해 단계적으로 수정 요청하면서 점점 원하는 형태로 맞춰갈 수 있었다.이 과정에서 클래스명이나 컴포넌트 이름을 정확히 파악하고 지시하는 게 중요하다는 걸 체감했다.또 하나 인상 깊었던 건, nextcursor의 이미지 색상 추출기를 활용한 스타일링 실습이었다.카카오톡 스크린.. 더보기
패스트캠퍼스 환급챌린지 12일차 : AI로 코딩하는 시대! 비개발자도 할 수 있는 Cursor.AI 실전 웹 제작 후기 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다. 오늘은 디자인 가이드를 기반으로 실제 웹페이지를 구현해보는 실습을 했다.특히 문서를 정리해두고, 그걸 @docs 프롬프트로 커서에 요청하니 AI가 꽤 정확하게 구현해줘서 신기했다.에러가 생겼을 땐 무작정 고쳐달라고 하기보다,“무엇이 문제인지 → 어디서 발생했는지 → 어떻게 고칠지” 단계적으로 요청하니 훨씬 안정적으로 반영되었다.스타일링을 요청할 때도 디자인 문서에서 사용한 용어를 그대로 써주니 AI가 더 정확하게 이해하는 느낌이었다.실습 마지막엔 Vercel로 배포까지 완료!프리뷰 링크뿐 아니라 외부에 공유할 수 있는 프로덕션 링크도 만들 수 있어서 뿌듯했다.다만 아쉬웠던 점은, 강의에서 사용하는 커서 기능이 일부 현재 버전과 달라진 부분.. 더보기

티스토리툴바