[TIL] 내일배움캠프 260127 - figma make, v0, antigravity..

 

오늘한 것

• 어제 특강(바이브 코딩) 복습 ing 
• 지난 과제(개인/팀) 회고 ing

---

상세 내용 및 배운 점

figma make

간단한 프로토타입 만들기

링크

Mobile MBTI Test App

 

어제 특강의 예시 프롬프트를 넣어서 만들어 봤는데

ㅇㅋㅇㅋ 잘 만들어짐 근데 이걸 왜 쓴다고? <- 항상 샛길로 빠지는 이유ㅎ.. 근데 학습하는 중이니까 괜찮지 뭐

어제 컨디션이 안 좋아서 강의 집중을 잘 못하기도 했어서..

해당 부분들을 다시 복습하고 한계/용도를 다시 학습해 봄.

 

Figma Make 한계

• 드래그 앤 드롭으로 할 수 있는 범위가 매우 제한적
• 실제 다중 페이지 구조가 아니라 단일 페이지에 오버레이되는 구조
• 그래서 페이지 단위 GA(다 같은 page_view로)·체류 시간 등 데이터 수집에 한계가 있음
• 유저 피드백·정량 분석이 필요한 최종 단계에는 부적합

Figma Make 추천 용도

• 시연용 데모
• UX 플로우 확인용 High-fidelity 프로토타입
• 아이디어 초기 검증(“이해는 하는가?” 수준)
• 개발·마케팅 설명용 비주얼 레퍼런스

 

외부 웹사이트를 Figma로 가져오기

html.to.design → Figma → Framer

---

 

v0 by vercel

이거 versel 에 배포가 된 건가..?

항공권 검색 결과 | SkyBook

 

figma make랑 v0 모두 코드없이 프롬프트만으로 결과물을 내는데, 차이점이 뭐냐?

 

Figma Make

• 쇼룸에 있는 모형 자동차
• 핸들 돌아가고 문도 열림
• 근데 도로에 못 나감

v0

• 공장에서 바로 나온 실제 자동차
• 바로 도로에 올릴 수 있음
• 고치고 업그레이드 가능

---

antigravity

 

피그마 메이크에서 한 것이랑 같은 것을 cursor 에서 시도했는데 무료 버전이라 막힘ㅎ..

antigravity로 재시도.. (근데 이것도 그냥 유료 구독해야할 것 같다 하 툴이 너무 넘쳐!!!)

 

특강 자료로 제공된 프롬프트를 다 넣은 버전이랑

그 프롬프트에서 아래 뭔가 기능/개발같은 요소들을 아예 다 뺀 버전을 각각 요청했다.

중간에 우여 곡절이 많았지만...

 

 

어쨋든 이렇게 각각 다르게 잘 만들어졌음!

 

---

비교

PM 관점 질문	Figma Make	v0	Cursor(/antigravity..)
이걸로 아이디어를 빠르게 설명할 수 있나?	클릭 가능한 화면을 바로 만들어서, 기획 의도를 설명하기에 매우 적합함	실제 웹처럼 동작하는 화면을 만들어 설명 가능하지만, 초기 속도는 Make보다 약간 느림	아이디어 설명보다는 구현·운영 단계에 적합
실제 유저에게 배포해도 되나?	시연·테스트용 링크 수준이며, 실제 서비스 배포로 보기는 어려움	퍼블리시하면 실제 웹 주소가 생기고 유저에게 배포 가능	배포 자체는 다른 도구(Vercel 등)와 함께 사용
유저 행동 데이터를 보고 의사결정이 가능한가?	페이지 구조가 단일 화면이라 정밀한 행동 분석은 어려움	기본적인 GA 이벤트, 퍼널 분석이 가능해 실험용 의사결정에는 충분함	원하는 모든 이벤트를 정밀하게 설계하고 분석 가능
요구사항이 자주 바뀔 때 대응이 가능한가?	조금만 바뀌어도 다시 만들어야 하는 경우가 많음	프롬프트로 방향 수정은 가능하나, 점진적 개선에는 한계가 있음	요구사항 변경에 가장 유연하게 대응 가능
개발자 없이 PM 혼자 진행 가능한가?	처음부터 끝까지 혼자 가능	기본 실험 단계까지는 혼자 가능	개발자 역할이 사실상 필요

 

cursor/antigravity는 용도가 앞의 두 개와 조금 다름.

내 컴퓨터 내에서 코드를 쓰는 것임 (배포는 vercel에 따로)

 

---

결론

중요한 점

• figma make, v0은 껍데기(?) 만드는 용도.
• 커서, 앤티그래비티는 코드로 들어가는 영역.. but 코드적인 부분 없어도 만들 수는 있더라
• 다만 (만드는 거랑은 완전 다른 문제로)최종적으로 실행시키는 과정에서 브라우저가 안 열리는 등의 또 다른 문제가 생길 수 있다.
• 즉, 그런 문제(에러)가 생겼을 때 어떻게 해결(대처)할 것인지에 대한 고민/학습 필요
• 그리고 코드를 쓰지 않는다면,
  만들고 싶은 것에 대해 어떻게 더 자세하게 요구사항을 쓸 것인가에 대한 고민/학습 필요(이것이 기획?)
  ex. 비교를 해보니, 위에 기술한 것처럼 첫 화면부터 다른데, 다시 살펴 보니 원 프롬프트에는 페이지 구성에 대한 내용이 있었기 때문. 이런 식으로 프롬프트에 뭐가 필요한지...!
• 기획자 오픈 톡방에서 보니 필요한 상황에 AI 툴을 다 다르게 쓰시던데, 일단 그런 흐름을 아는 것도 중요한 것 같고, 나아가 그런 툴에 또 일일이 시킬 필요없이 툴끼리 서로 시키는.. 그런 상황이 오고있다는 것도 알아야겠더라.

마치며

어제는 고민이 너무 많아서 우울했는데 그래도 오늘은 또 이것 저것했고 하고 있다...!!

 

금요일부터 다시 개인 과제 시작이라

그 전까지 (이제 이틀..) 지난 과제들(개인과제2+팀플1) 회고 다 하고 노션 정리하고 그러는 게 목표!!

각 과제의 회고는 각 과제 카테고리에 올려두어야겠다.

 

그리고 바이브 코딩의 세계를 뭔가 한 판? 손으로 정리해보고 싶다.

ㅋㅋㅋㅋㅋㅋㅋㅋ 지금은 이럼 ㅋㅋㅋㅋㅋ

바이브 코딩의 세계라기보다는 암튼..

GPT 유료인데 한글 왜 이래!