디자이너가 코딩을?바이브코딩의 시작,커서(Cursor)
비개발자도 코딩하는 시대, 그 중심엔 '바이브코딩'
다양한 걸 리뷰하는 리뷰온리입니다.
오늘은 최근 가장 이슈가 되는 내용을 준비했어요.
바로 바이브 코딩인데요!!
5년째 프론트엔드 개발자로 일하면서 가끔 이런 얘기를 듣곤 해요.
"요즘 디자이너도 코딩하던데?"
예전 같았으면 웃으며 넘겼을 말이죠.
하지만 ㅎㅎ 근데 이젠 진짜 그렇습니다.
디자이너가 직접 코드 편집기를 열고, 버튼의 색을 바꾸고,
간단한 인터랙션을 수정해요.
이걸 가능하게 해주는 게 바로 요즘 많이 떠오르고 있는 개념,
바이브코딩(Vibe Coding)입니다.
바이브코딩은 개발 툴이 아니라 흐름이에요.
직관적으로 디자인하듯이 코드에 접근하고,
어려운 문법보다는 ‘느낌’으로 구현하는 방식.
마치 음악을 믹싱하듯, 감각적으로 개발 환경에 다가가는 거죠.
Cursor: 디자이너와 개발자의 경계를 허무는 에디터
바이브코딩의 대표적인 도구 중 하나가 바로 Cursor예요.
Cursor는 GitHub Copilot이 기본 탑재된 에디터로,
Visual Studio Code 기반인데 AI 기능이 훨씬 강력해요.
코드를 자동완성해주는 걸 넘어서,
그냥 AI한테 물어보면 코드를 짜주는 수준이죠.
“이 오류 왜 나요?”, “이 기능 추가하려면 어떻게 해요?”
이런 질문을 바로 코드 창에서 AI에게 물을 수 있어요.
문맥도 기억하니까, 진짜 대화하듯 코딩이 가능합니다.ㅎㅎ
일자리 잃어버리는 소리가 들리는것 같네요...
비개발자도 Cursor를 쓰면 "일단 해보는" 게 가능해진다는 거!
디자이너가 버튼 스타일을 고치고 싶은데,
개발자 기다릴 필요 없이 직접 해보는 거죠.
기획자도 프로토타입 스크립트를 직접 짜볼 수 있고요.
디자이너의 손끝에서 직접 탄생하는 UI
아티클 링크 맨 아래 넣어둘게요얼마 전 한 아티클을 봤는데,
디자이너분이 Cursor로 서비스를 만든 걸 봤어요.
마침 저랑 친한분도 디자이너신데,
커서로 이것저것 해보시더라고요 ㅋㅋㅋ
처음엔 Figma랑 비슷한 텍스트 편집 기능 때문에 관심을 가졌는데,
이젠 자신이 디자인한 컴포넌트를 직접 수정하기 시작했대요
색상 수정, 마진 조정, 심지어 hover 애니메이션까지 손대는중 ㄷㄷ
이전엔 슬랙으로 “여기 살짝 바꿔주세요~”라고 했던 사람이,
이제는 “제가 바꿔봤어요. 이거 어때요?”라고 합니다.
진짜 멋진 변화 아닐까요?
이런 식의 협업은 개발자의 시간을 줄여주고,
디자이너에겐 더 큰 주도권을 줄 수 있는데요.
결국 사용자에게도 더 나은 경험이 된다고 생각해요.
결국 중요한 건, 도구보다 관점의 전환
Cursor, 바이브코딩, AI 도구들…
이 모든 흐름을 관통하는 메시지는 하나예요.
"이제 코딩은 개발자만의 언어가 아니다."
기획자도, 마케터도, 디자이너도…
이제는 원하는 기능을 직접 만지고 실험해볼 수 있는 시대!!
물론 여전히 복잡한 아키텍처나 최적화는 개발자의 몫이지만,
작은 인터랙션, 스타일 수정, 기능 프로토타이핑은 누구나 참여할 수 있어요.
이게 바로 바이브코딩이 주는 진짜 가치라고 생각해요
기술은 결국 '하고 싶은 걸 할 수 있게' 만들어주는 도구일 뿐이니까요.
재밌게 봤던 아티클 링크 남기고
이만 물러가겠습니다~
감사합니다.
