v0.dev, cursor IDE를 활용한 개발 워크플로우 정리

김혁준·2024년 10월 18일

frontend

개발 워크플로우

excalidraw로 와이어프레임 만들기
v0.dev에서 기본 레이아웃 잡기
cursor IDE에서 스타일 및 로직 추가하기 - system prompt 추가, docs 참조하여 코드 변경하기, composer를 통해서 여러 코드를 한번에 변경하기
검색이 필요하면 perplexity로 검색하기
vercel에 배포하기

excalidraw vs figma

Excalidraw와 Figma는 모두 디자인 및 협업 도구이지만, 그 목적과 기능에 있어 몇 가지 중요한 차이점이 있습니다

주요 용도

Excalidraw: 주로 간단한 스케치, 다이어그램, 화이트보딩에 사용됩니다
Figma: UI/UX 디자인, 프로토타이핑, 상세한 인터페이스 설계에 중점을 둡니다

디자인 스타일

Excalidraw: 손으로 그린 듯한 스케치 스타일의 그림을 만듭니다
Figma: 정교하고 정밀한 벡터 그래픽 디자인을 생성합니다

기능의 복잡성

Excalidraw: 단순하고 직관적인 인터페이스로 빠른 아이디어 시각화에 적합합니다
Figma: 고급 디자인 기능, 컴포넌트 라이브러리, 프로토타이핑 도구 등 복잡한 기능을 제공합니다

협업 방식

Excalidraw: 실시간 협업이 가능하지만, 주로 간단한 아이디어 공유에 중점을 둡니다
Figma: 디자인 시스템 관리, 복잡한 프로젝트 협업, 피드백 등 더 광범위한 협업 기능을 제공합니다

사용 난이도

Excalidraw: 배우기 쉽고 즉시 사용 가능한 간단한 도구입니다
Figma: 더 복잡하고 전문적인 도구로, 숙달에 시간이 더 걸릴 수 있습니다

통합 및 확장성

Excalidraw: 제한된 통합 기능을 가지고 있습니다
Figma: 다양한 플러그인과 통합 기능을 제공하여 워크플로우를 확장할 수 있습니다

요약

Excalidraw는 빠른 아이디어 스케치와 간단한 다이어그램 작성에 적합합니다.
반면, Figma는 전문적인 UI/UX 디자인과 복잡한 프로젝트 관리에 더 적합합니다.

v0.dev란?

v0.dev는 Vercel에서 개발한 AI 기반 웹 디자인 및 코드 생성 도구입니다.

주요 특징

UI 디자인 생성: 자연어 설명을 바탕으로 웹 인터페이스를 자동으로 디자인합니다.
코드 생성: 디자인된 UI(파일 업로드 가능)에 대한 레이아웃을 React 컴포넌트 코드를 자동으로 생성합니다.
Tailwind CSS 활용: 생성된 코드는 Tailwind CSS를 사용하여 스타일링됩니다.
실시간 프리뷰: 디자인 변경 사항을 실시간으로 확인할 수 있습니다.
코드 내보내기: 생성된 코드를 프로젝트에 바로 적용할 수 있도록 내보낼 수 있습니다.(코드베이스 cli 가능 -> cursor에 임포트)
퍼블리싱 : 생성된 코드를 공유하여 다른 사람이 보게 내보낼 수 있습니다.

사용 목적

v0.dev는 주로 웹 개발자와 디자이너가 빠르게 UI 프로토타입을 만들고 이에 대한 코드를 얻는 데 사용됩니다.

장점과 단점

장점 : 통일된 ui 컴포넌트를 기반으로 빠르게 레이아웃을 잡을 수 있다
단점 : 생성된 코드를 이전시켜야함. 다른 기존의 코드랑 연동시키기 어려움

cursor IDE란?

Cursor IDE는 AI 기능이 통합된 코드 에디터입니다. Visual Studio Code를 기반으로 만들어졌습니다.

주요 특징

AI 코드 완성: Copilot++라는 강화된 코드 자동 완성 기능을 제공합니다
자연어 코드 편집: 자연어 명령을 통해 코드를 수정하거나 생성할 수 있습니다
코드베이스 이해: AI가 프로젝트의 전체 코드베이스를 이해하고 관련 정보를 제공합니다
채팅 기능: 에디터 내에서 AI와 대화하며 코드에 대한 질문을 할 수 있습니다
디버깅 지원: 오류 메시지를 분석하고 해결책을 제안합니다
VSCode 호환성: VSCode의 확장 프로그램, 테마, 키 바인딩 등을 그대로 사용할 수 있습니다

사용 목적

Cursor IDE는 개발자가 코드를 작성하고, 편집하고, 디버깅하는 전체 개발 과정을 AI의 도움을 받아 더 효율적으로 수행할 수 있도록 돕습니다.

주요 사용법

cmd + k : ai 채팅 생성
cmd + shift + l : 코드 드래그해서 채팅 생성
cmd + shift + i : cursor composer 기능 활용해서 전체 프로젝트에 답변 적용 가능
reply : 답변 내용을 드래그하면 해당 내용 참조
@docs : @docs로 도큐먼트 긁어오게 할 수 있음
system prompt : cursor directory를 활용해서 어떤 스택을 사용하는지 ai에게 알려줄 수 있음. rules for ai에 설정하면 된다.(사실상 필수)

https://cursor.directory/ 에서 다른 사람이 올린 프롬프트 확인 가능

AI 오류 해결 : 빨간줄 뜨는 부분에 ai fix in chat 버튼 눌러서 해결 가능

장점과 단점

장점 : 코파일럿보다 빠르고 똑똑함, 에러나 챗 커맨드 창 혹은 컴포저를 통해서 다양한 ai 활용 가능, 기능 추가 속도가 빠르다

단점 : sonnet을 사용하지 않으면 코드 작성에 큰 도움이 안된다

perplexity란?

Perplexity AI는 인공지능 기반의 대화형 검색 엔진 및 연구 도구입니다

주요 특징

AI 기반 검색: 자연어 처리 기술을 활용하여 사용자의 질문에 정확하고 관련성 높은 답변을 제공합니다
실시간 정보: 질문을 받는 순간 인터넷에서 최신 정보를 검색하여 항상 최신의 답변을 제공합니다
출처 인용: 웹에서 찾은 정보를 바탕으로 답변을 생성하고, 텍스트 내에 출처 링크를 인용합니다
요약 기능: 여러 웹 페이지의 정보를 종합하여 간결하고 이해하기 쉬운 단일 답변으로 요약합니다

서비스 모델

무료 버전: 자체 개발한 대규모 언어 모델(LLM)을 사용하여 기본적인 검색 및 답변 기능을 제공합니다

유료 버전 (Perplexity Pro): GPT-4, Claude 3.5, Mistral Large, Llama 3 등 고급 AI 모델에 접근할 수 있으며, 더 정교한 기능을 제공합니다

사용 사례

일반적인 질문 답변: 간단한 사실부터 복잡한 주제에 이르기까지 다양한 질문에 답변합니다
심층 주제 탐구: 'Copilot' 기능을 통해 특정 주제에 대해 더 깊이 있는 탐구가 가능합니다
콘텐츠 요약 및 생성: 기사나 이메일 요약, 코드 생성 등 다양한 작업을 수행할 수 있습니다

Perplexity AI는 2022년에 설립되어 빠르게 성장하고 있으며, 2024년 1분기 기준으로 월간 사용자 수가 1,500만 명에 달했습니다16. 이 플랫폼은 정보 검색과 연구 과정을 혁신적으로 변화시키는 것을 목표로 하고 있습니다.

가장 중요한 것

ai에서 결과물은 항상 다르다
vo.dev에서 스타일을 완벽하게 수정하려고 하지 말자.
v0.dev에서는 전체적인 레이아웃을 구성하는데 집중하자
cursor는 만능이 아니다
ai가 더 발전할수록 더 많이 알아야 ai를 잘 쓸 수 있다. 무엇이 좋고 나쁜지 판단하는 눈이 필요하다

정리

백엔드 개발자를 지망하는 나로써는 되게 유용하다고 느꼈다.
리액트에 대해 공부하긴 했지만 아이디어를 ai의 도움 없이 리액트로 구현하려면 시간이 많이 걸린다. 이부분에 있어서 시간을 많이 절약해주므로 효율적이었다. 물론 프론트엔드와 사용 스택에 대한 기본 지식은 있어야 했다. AI가 항상 완벽하진 않았다.