🧪 Cursor 웹앱 도전기 2: 나의 개발 여정 🐘✨

지난 Cursor 웹앱 2차 모임에서 가장 먼저 들었던 생각은...
"사람들 정말 성실하다!" 😲
모각 모임에 참여한 사람과 그렇지 않은 사람의 차이는 분명히 존재했어요.
같은 도전을 하더라도 같이 한다는 힘이 얼마나 큰지 새삼 느꼈죠.

🧰 새롭게 알게 된 도구들: Bolt, Lovable, V0 by Vercel

이번 모임에서 전 처음으로 bolt, lovable, v0 by Vercel 같은 웹앱 자동 생성 도구들을 알게 되었어요.
Cursor만으로 구현하려고 한 제 안의 곤조🔥는 잠시 불타올랐지만…

“디자인이... 음... 내 맘에 안 들어!!! 😤”

결국 저는 bolt를 사용해서 PRD를 작성하고, 그걸 기반으로 웹앱을 생성해보기로 했습니다.

⚙️ Bolt + Cursor 조합 = WOW 😮

놀랍게도 bolt는 제가 구현하고자 했던 기능들을 정말 자연스럽고 깔끔하게 만들어줬습니다.

• 버튼도 잘 활성화되고

• 흐름(Flow)도 제가 구상한 대로 매끄럽게 연결되고

• 로그인, 친구 생성, 채팅창 등도 잘 만들어졌죠!

그래서 Bolt에서 만든 코드를 export한 다음, 다시 Cursor에서 열어 디자인을 조금씩 손봤습니다.
전문가 눈에는 별 차이 없어 보일 수 있지만, 저한테는 나름 만족스러운 결과물! 😌

⏱️ Cursor와 2시간의 사투

Cursor와 함께한 시간은 거의 격투기 수준이었어요.
Prompt를 바꿔가며 2시간 동안 싸운 끝에 드디어 아래 기능들을 구현했죠:

• ✅ 로그인 화면

• ✅ 친구 만들기 페이지

• ✅ ID 생성 & 채팅창까지의 Flow

ALT

보라색 배경에 한국어 앱의 스크린 샷

ALT

보라색 배경이있는 블루 스크린

ALT

한국 웹 사이트의 스크린 샷

ALT

한국어 웹 사이트의 홈페이지

하지만 여전히 제 마음속에는 하나의 목표가 남아있었어요.
"진짜 AI와 채팅하는 페이지를 만들자!" 💬🤖

🤯 Blog 페이지에서 멘붕 시작

블로그 페이지를 만들고 네비게이션 바의 Blog 버튼을 클릭하면 해당 페이지로 이동하게 하고 싶었어요.
하지만 결과는…

• 클릭해도 페이지 이동이 안 됨 😓

• 어떤 경우엔 홈 화면이 싹 지워짐

• 메인 문구만 남고 나머진 사라짐 🫠

Cursor는 자꾸 “정상 작동 중”이라고 하지만…
전혀 그렇지 않아요!! 지금도 이 문제로 계속 씨름 중입니다.
(혹시 이 글을 읽는 스터디장님 or 전문가님들, 도움 좀 주세요…🙏)

🐘 코끼리를 등장시키고 싶었다… 그런데 말입니다

Blog 페이지를 잠시 포기하고 메인 홈 화면에 귀여운 코끼리 영상을 넣고 싶었어요.
그래서 Cursor에게 이렇게 말했죠:

“'당신의 AI 친구' 글씨 위에 코끼리가 자연스럽게 왔다 갔다하는 영상을 넣어줘 🐘”

Cursor는 “좋은 생각이에요!”라며 흔쾌히 수락했지만...
화면에는 아무 변화도 없었습니다. 😵

🤖 Claude에게 SOS 요청

그래서 Claude에게 도움을 요청했더니, 아래와 같은 Prompt 템플릿을 추천해줬습니다:

Create a knitted/crocheted elephant that moves naturally across the webpage.

Requirements:
1. ELEPHANT DESIGN:
   - Create a cute knitted/crocheted elephant using CSS or SVG
   - Soft, yarn-like texture and appearance
   - Pastel colors (light gray, pink, or cream)
   - Rounded, plump shape typical of knitted toys

2. NATURAL MOVEMENT:
   - Elephant walks back and forth across the screen
   - Smooth, gentle animation (not mechanical)
   - Slightly bouncy walking motion
   - Pauses occasionally, then continues
   - Changes direction at screen edges

3. ANIMATION DETAILS:
   - Walking cycle: subtle leg movement
   - Trunk swaying gently while walking
   - Ears flapping slightly
   - Body bobbing up and down
   - Speed: slow and relaxed

4. TECHNICAL SPECS:
   - Responsive design (works on mobile/desktop)
   - CSS animations or JavaScript
   - Smooth 60fps animation
   - No performance issues
   - Optional: click interaction (elephant stops and trumpets)

Please create a complete HTML/CSS/JS solution with a charming knitted elephant that moves naturally across the page.

이걸 그대로 Cursor에 넣어보니...
진짜로 이상한 코끼리가 화면을 오가는 모습을 볼 수 있었습니다! 🧶🐘

ALT

코끼리가있는 한국 웹 사이트의 스크린 샷

제가 원하는 코끼리는 요론 모양의 코끼리가 어슬렁 어슬렁 거리는 거였는데 말이죠...

ALT

테이블 위에 앉아 회색 니트 코끼리

💡 다음 도전

네비게이션 링크 활성화, 적절한 Object를 넣어서 홈 화면의 덜 심심한 모습 구현, Chatbot 구현
진짜로 AI와 채팅하는 기능을 구현하는 것!
돌아오는 주는 이걸 완성하기 위해 집중할 예정입니다.
(곤조 재점화 🔥)

✍️ 마무리하며

이번 웹앱 여정은 단순히 도구를 배우는 걸 넘어,
**“내가 원하는 걸 구현하기 위해 Cursor 와 대화를 잘 해야 하는가”**를 스스로에게 묻는 시간이었어요.