AIPromptSmarteasy 사용해 보기 – 나 교수와 글 읽고 차 교수와 글쓰기 – Cursor + Claude Sonnet 3.5 Code Stream: Building a Transcript Chat App Live

## 레이 페르난도의 라이브 스트림: 커서로 트랜스크립트 챗 앱 만들기 (전체 분석)

레이 페르난도의 이 라이브 스트림은 2시간이 넘는 시간 동안 커서와 클로드를 사용하여 트랜스크립트 챗 앱을 처음부터 만드는 과정을 보여줍니다. 이 스트림은 AI 지원 코딩의 힘, 프롬프트 엔지니어링의 중요성, 커뮤니티와 지식 공유의 가치를 강조하며, AI가 코딩을 민주화하고 세상을 바꿀 잠재력을 보여줍니다.

**1. AI 지원 코딩의 힘 (AI-Assisted Coding):**

* **”레이는 AI 기반 프로토타입 도구인 V0를 사용하여 간단한 프롬프트만으로 트랜스크립트 챗 앱의 기본 앱 구조를 생성합니다.” (레이는 V0를 사용하여 “generate an app that will allow me to chat with my transcripts”라는 프롬프트로 앱을 생성합니다.)**
* **”놀랍게도 이 앱은 처음부터 파일 업로드 기능을 포함하여 매우 기능적이었습니다.” (V0가 생성한 앱은 “upload transcript” 버튼을 포함하여 실제로 작동하는 기본적인 기능을 갖추고 있었습니다.)**
* **”커서, AI 강화 IDE는 V0의 출력과 완벽하게 통합됩니다.” (“Cursor, an AI-enhanced IDE, seamlessly integrates with V0’s output.”)**
* **”커서는 온라인 문서에 액세스하고 처리하여 코드를 생성할 수 있습니다.” (“Cursor can access and process online documentation to generate code.”)**
* **”레이는 커서의 동작을 안내하는 명확하고 구체적인 프롬프트의 중요성을 보여줍니다.” (레이는 “give me the bun install command for this”와 같이 구체적인 프롬프트를 사용하여 커서가 필요한 명령어를 생성하도록 합니다.)**

**2. 트랜스크립트 챗 앱 (The Transcript Chat App):**

* **”앱을 통해 사용자는 SRT 파일(트랜스크립트)을 업로드하고 해당 내용에 대한 질문을 하여 정보를 쉽게 추출할 수 있습니다.” (앱의 목표는 사용자가 SRT 파일을 업로드하고 해당 파일의 내용에 대한 질문을 할 수 있도록 하는 것입니다.)**
* **”앱은 버셀 AI SDK를 사용하여 OpenAI의 GPT-4 미니 모델에 연결하여 자연어 처리를 수행합니다.” (“The app uses the Vercel AI SDK to connect to OpenAI’s GPT-4 Mini model for natural language processing.”)**
* **”앱은 파일 업로드, 탭 인터페이스, 마크다운 포맷팅, 인용문 제공 등의 기능을 포함합니다.” (앱은 사용자가 SRT 파일을 업로드하고, 트랜스크립트와 챗을 위한 탭을 사용하고, 마크다운 포맷팅을 통해 답변을 받고, 답변을 뒷받침하는 인용문을 보여주는 기능을 제공합니다.)**
* **”레이는 의료 트랜스크립트와 같이 민감한 데이터에 대한 로컬 호스팅의 중요성을 강조합니다.” (레이는 의료 트랜스크립트의 경우 개인정보 보호를 위해 로컬 호스팅이 중요하다고 언급합니다.)**
* **”그는 장치 내 트랜스크립션을 위해 Whisper를 통합하고 OpenAI 서버에 대한 의존도를 줄이는 미래 계획을 언급합니다.” (레이는 Whisper를 사용하여 장치 내 트랜스크립션을 구현하고 OpenAI 서버에 대한 의존도를 줄이는 미래 계획을 밝힙니다.)**

**3. 앱을 넘어 (Beyond the App):**

* **”레이는 웹 애플리케이션을 구축하기 위한 Next.js와 같은 프레임워크와 ShadCN UI와 같은 라이브러리의 이점을 강조합니다.” (레이는 Next.js와 ShadCN UI가 웹 개발을 더 빠르고 효율적으로 만드는 데 도움이 된다고 언급합니다.)**
* **”레이는 AI 모델에서 특정 응답을 유도하고 환각을 피하고 정확한 정보 검색을 보장하기 위해 프롬프트를 개선해야 함을 강조합니다.” (레이는 AI 모델의 정확성과 신뢰성을 높이기 위해 프롬프트를 명확하게 정의하는 것이 중요하다고 강조합니다.)**
* **”그는 AI 지원 코드 생성을 위한 특정 지침과 지침을 정의할 수 있는 커서 규칙 개념을 소개합니다.” (레이는 커서 규칙을 사용하여 코딩 스타일과 프로세스를 일관성 있게 유지할 수 있다고 설명합니다.)**

**4. AI 지원 코딩의 미래 (The Future of AI-Assisted Coding):**

* **”레이는 커서와 클로드와 같은 AI 지원 코딩 도구가 더 많은 사람들에게 프로그래밍을 접근 가능하게 하여 프로그래밍을 민주화할 수 있는 잠재력을 갖추고 있다고 믿습니다.” (레이는 AI 지원 코딩 도구가 코딩을 더 쉽게 만들어 더 많은 사람들이 프로그래밍을 할 수 있도록 돕는다고 믿습니다.)**
* **”그는 AI 지원 코딩의 부상으로 인해 두 가지 뚜렷한 파벌이 생길 것이라고 예측합니다.” (레이는 AI 지원 코딩이 발전하면서 앱을 만드는 사람들과 프레임워크를 만드는 사람들로 나뉠 것이라고 예측합니다.)**
* **”레이는 빠르게 변화하는 AI 지원 코딩 세계에서 지속적인 학습과 탐구의 중요성을 강조합니다.” (레이는 AI 기술이 빠르게 발전하기 때문에 끊임없이 배우고 새로운 기술을 탐구해야 한다고 강조합니다.)**

**5. 레이 페르난도의 통찰력 (Ray Fernando’s Insights):**

* **”레이의 AI에 대한 열정은 전염성이 있으며 그는 다른 사람들과 지식과 경험을 공유하는 데 열정적입니다.” (레이는 AI에 대한 열정을 가지고 있으며 다른 사람들과 자신의 지식을 나누는 것을 좋아합니다.)**
* **”그는 AI 분야에서 커뮤니티 구축과 협업의 중요성을 강조하며 시청자들이 서로 연결하고 경험을 공유하고 서로 배우도록 장려합니다.” (레이는 AI 커뮤니티의 중요성을 강조하며 시청자들이 서로 소통하고 협력하도록 장려합니다.)**
* **”그는 AI가 자체 목적을 위해서가 아니라 실제 문제를 해결하고 사용자에게 가치를 제공하는 데 사용되어야 한다고 믿습니다.” (레이는 AI가 단순히 기술적인 발전을 위해서가 아니라 실질적인 문제를 해결하고 사람들에게 도움을 주는 데 사용되어야 한다고 생각합니다.)**

**6. 사용자를 위한 핵심 요점 (Key Takeaways for Users):**

* **”지금 바로 구축 시작: 코딩에 대한 두려움 때문에 아이디어를 추구하는 것을 망설이지 마세요.” (AI 지원 코딩 도구를 사용하면 코딩 경험이 부족하더라도 아이디어를 실현할 수 있습니다.)**
* **”프롬프트 엔지니어링을 받아들이세요: 원하는 결과를 얻기 위해 AI 모델을 안내하는 명확하고 구체적인 프롬프트를 만드는 방법을 배우세요.” (프롬프트 엔지니어링은 AI 모델을 효과적으로 사용하는 데 필수적입니다.)**
* **”프레임워크 및 라이브러리 탐색: 미리 만들어진 도구와 프레임워크를 활용하여 개발 프로세스를 가속화하세요.” (프레임워크와 라이브러리를 활용하면 개발 시간을 단축하고 효율성을 높일 수 있습니다.)**
* **”AI 커뮤니티에 참여하세요: 다른 AI 애호가와 연결하고 경험을 공유하고 서로 배우세요.” (AI 커뮤니티에 참여하면 다른 사람들과 교류하고 새로운 지식을 얻을 수 있습니다.)**
* **”지속적인 학습을 받아들이세요: AI 환경은 끊임없이 변화하고 있으므로 호기심을 유지하고 새로운 도구와 기술을 계속 탐구하세요.” (AI 기술은 빠르게 발전하고 있으므로 끊임없이 배우고 새로운 기술을 익혀야 합니다.)**

**전반적으로 레이 페르난도의 라이브 스트림은 AI 지원 코딩의 미래를 흥미롭게 보여주며, 이러한 도구가 모든 수준의 개발자가 놀라운 앱과 솔루션을 구축하도록 돕는 방법을 보여줍니다. AI에 대한 그의 열정과 지식 공유에 대한 헌신은 이 스트림을 이 흥미로운 분야를 탐구하고자 하는 모든 사람에게 귀중한 자료로 만듭니다.**

**7. 레이 페르난도의 배경 및 경험 (Ray Fernando’s Background and Experience):**

* **”레이는 애플에서 12년 동안 엔지니어로 근무했습니다.” (레이는 애플에서 12년 동안 엔지니어로 일했으며, 애플 워치 업데이트 시스템 등 다양한 프로젝트에 참여했습니다.)**
* **”그는 애플에서 일하는 동안 티모시 쿡, 조니 아이브 등 유명 인사들과 함께 일했습니다.” (레이는 애플에서 일하는 동안 티모시 쿡과 조니 아이브 등 유명 인사들과 함께 일하며 다양한 경험을 쌓았습니다.)**
* **”그는 2020년 코로나19에 걸려 뇌염 등 건강 문제를 겪었지만 회복하여 현재 AI 분야에서 활동하고 있습니다.” (레이는 코로나19로 인해 건강 문제를 겪었지만 회복하여 현재 AI 분야에서 활동하며 지식을 공유하고 있습니다.)**
* **”그는 애플에서 엔지니어로 일하며 쌓은 경험을 바탕으로 AI 분야에서 새로운 도전을 시작했습니다.” (레이는 애플에서 엔지니어로 일하며 쌓은 경험을 바탕으로 AI 분야에서 새로운 도전을 시작하고, 커서를 사용하여 앱 개발을 하고, 자신의 경험을 다른 사람들과 공유합니다.)**

**8. 커뮤니티 및 지식 공유 (Community and Knowledge Sharing):**

* **”레이는 AI 커뮤니티의 중요성을 강조하며 시청자들이 서로 소통하고 협력하도록 장려합니다.” (레이는 AI 커뮤니티의 중요성을 강조하며, 시청자들에게 서로 소통하고 협력하여 함께 성장하도록 격려합니다.)**
* **”그는 AI 분야에서 활동하며 다른 사람들에게 AI 기술을 알리고 함께 성장하고 싶어합니다.” (레이는 AI 분야에서 활동하며 다른 사람들에게 AI 기술을 알리고 함께 성장하고 싶어하며, 자신의 경험을 공유하는 데 열정적입니다.)**
* **”그는 AI 관련 정보를 공유하고 AI 커뮤니티와 협력하는 데 힘쓰고 있습니다.” (레이는 AI 관련 정보를 공유하고, AI 커뮤니티와 협력하는 데 힘쓰며, AI 기술의 발전과 대중화를 위해 노력합니다.)**

**9. 결론 (Conclusion):**

* **레이 페르난도의 라이브 스트림은 AI 지원 코딩이 코딩을 민주화하고 세상을 바꿀 잠재력을 보여줍니다.” (레이 페르난도의 라이브 스트림은 AI 지원 코딩이 코딩을 민주화하고, 더 많은 사람들이 창의적인 아이디어를 현실로 만들 수 있도록 돕는 혁신적인 기술임을 보여줍니다.)**
* **”그는 AI 분야에서 새로운 도전을 시작하고, 커서를 사용하여 앱 개발을 하고, 자신의 경험을 다른 사람들과 공유합니다.” (레이 페르난도는 AI 분야에서 새로운 도전을 시작하고, 커서를 사용하여 앱 개발을 하고, 자신의 경험을 다른 사람들과 공유하며, AI 기술의 발전과 대중화를 위해 노력합니다.)**
* **”그는 AI 관련 정보를 공유하고, AI 커뮤니티와 협력하는 데 힘쓰며, AI 기술의 발전과 대중화를 위해 노력합니다.” (레이 페르난도는 AI 관련 정보를 공유하고, AI 커뮤니티와 협력하는 데 힘쓰며, AI 기술의 발전과 대중화를 위해 노력합니다.)**

**전반적으로 레이 페르난도의 라이브 스트림은 AI 지원 코딩의 힘과 잠재력을 보여주는 훌륭한 예시입니다. 그는 AI에 대한 열정과 지식 공유에 대한 헌신을 통해 AI 기술의 발전과 대중화에 기여하고 있습니다.**

**이 스트림은 AI 지원 코딩에 관심 있는 모든 사람에게 영감을 주고, 새로운 가능성을 열어줄 것입니다.**

 

레이 페르난도의 라이브 스트림: 커서로 트랜스크립트 챗 앱 만들기

레이 페르난도가 놀라는 모습들이 재밌어, 일부 영상 스크립트 일부 번역도 공유합니다. 대부분의 놀람은 v0.dev에 대한 것이긴 하지만,  이것의 출력이 완벽하게 커서에 통합된다고 하니, 여기서의 놀람은 결국 커서에 대한 놀라움이 되는 것으로 보여 집니다. 아무튼 레이 페르난도 처럼 지금의 변화가 정말 놀랍고 재미있는게 되었으면 좋겠네요~

좋아요, 신사 숙녀 여러분, 오늘은 커서를 사용해서 다시 앱을 만들어 볼 거예요. 제가 정말 인기 있는 시리즈의 후속편이에요. 이렇게 인기 있을 거라고는 몰랐는데, 커서로 앱을 만드는 3시간짜리 코딩 스트림을 올렸고, 오늘은 처음부터 앱을 만들어서 트랜스크립트를 분석해 볼 거예요. 어떤 분이 저에게 연락해서, “안녕하세요, AI로 앱을 만드는 방법을 알고 싶어요. 그 여자분이 커서를 사용해서 앱을 만드는 것을 봤는데, 해리포터와 대화할 수 있는 앱을 만들었더라고요. 저는 제 트랜스크립트와 대화할 수 있는 앱을 만들고 싶은데, 왜 안 될까요?”라고 하셨어요. 하지만 문제는 제가 유럽에 살고 있어서, 트랜스크립트가 인터넷으로 유출되는 것을 원치 않는다는 거예요. 로컬에서 처리해야 해요. 그래서 오늘은 몇 가지 과제가 있고, 제가 앱을 어떻게 구성하는지, 머릿속에서 어떻게 아이디어를 정리하는지 알려드리고, 종이에 옮겨 볼 거예요.

저는 12년 동안 애플에서 엔지니어로 일했고, 지금은 AI를 가지고 혼자서 탐험하고 있어요. 앱을 만드는 게 정말 재미있어요. 특히 커서를 사용해서요. 오늘은 아주 긴 코딩 스트림 동안 여러분과 함께 할 것을 약속드려요. 많은 주제를 다룰 거예요. 그리고 장(chapter)과 시간 표시(timestamp)를 제공할 것을 약속드려요. 사실 커서 덕분에 이걸 위한 앱이 있거든요. 여러분도 저와 함께 배우실 수 있어요.

제가 프로젝트를 계획하는 방법, 앱을 구성하는 방법 등 다양한 기법을 보여드릴 거예요. 오늘은 처음부터 시작해서, 명령줄(command line) 기본 사항을 알려드리고, 앱을 만드는 방법을 알려드릴 거예요. 도움이 될 거라고 생각해요. 따라하고 싶은 분들은 Rayfernando.com으로 가시면 돼요. 거기에서 코딩 스트림, “커서로 앱 만들기”를 찾으실 수 있어요. 그리고 제 트위터 게시글도 있고, 여기에서 사용할 마크다운 프롬프트도 있어요. 기본적인 내용이에요. 이런 것들은 몇 가지 지침이 있으면 더 잘 작동해요. 제가 프롬프트를 생성하는 과정을 조금 보여드릴게요. 또 하나, 프로토타입을 만드는 데 도움이 되는 Vercel을 사용할 거예요. 제가 자주 사용하는 프로토타입 앱이에요.

아이디어를 정리하고, 대략적인 윤곽을 잡고, 그걸 바탕으로 앱을 만들 수 있어요. 꽤 괜찮죠. 또 하나, UI 템플릿을 살펴볼 거예요. 이 UI 템플릿들은 보통 최고 수준의 10배 효과를 내는 것들이에요. 디자인 과정을 훨씬 빠르게 만들 수 있거든요. 이 템플릿을 찾는 방법과 기본 템플릿을 추가하는 방법을 알려드릴게요. 이런 것들은 보통 멋진 랜딩 페이지에서 볼 수 있는 것들이에요. 그걸 가져와서 우리 코드에 추가할 수 있어요. 커서로 어떻게 하는지 보여드릴게요. 이런 것들은 중요한 기본 요소들이에요. 그리고 Aeternity UI라는 것도 있는데, 이건 앱에 요소를 추가하는 데 정말 훌륭한 프레임워크예요.

만약 코드에 익숙하지 않거나, 코드를 처음 접한다면 걱정하지 마세요. 참여해서 질문하세요. 이건 라이브 스트림이고, 우리는 함께 만들어가는 커뮤니티예요. 아이디어를 앱으로 만들고 싶어 하는 사람들이 많다는 걸 알고 있어요. 그리고 커서는 그걸 가능하게 하는 좋은 방법이라고 생각해요. 여러분이 10배 효율적인 엔지니어가 된다고 약속드리는 건 아니에요. 아마 아이디어를 더 잘 만들 수 있게 될 거예요. 이 스트림의 목표는 제가 일하는 방식, AI를 사용하는 방식을 공유하는 거예요. 그냥 이런 것들을 함께 해보는 거죠. 자, 시작해 보죠. 최근에 Aeternity UI 제작자를 만났는데, 정말 멋진 분이셨어요. 와, 멋지네요. 그 분은 베이 지역에 계신가요? 저는 지금 베이 지역에 있어요. 베이 지역에 계신 분들은 연락 주세요. 함께 커서로 코딩하고, 이런저런 걸 하는 게 정말 좋을 것 같아요. 연락 주세요. 제 DM은 항상 열려 있어요. 저를 팔로우하지 않으셨다면 RayFernando1337을 팔로우하세요. 와, 제가 라이브로 나왔네요. 네, 터보가 정말 멋져요. 네, 저를 팔로우하세요. 죄송해요, 제 게시글을 리트윗한 사람을 보느라 정신이 없었네요. 팔로우하시면 DM을 보낼 수 있어요. 베이 지역에 계시면 함께 할 수 있어요. 인도네시아에서 인도에 거주하고 계시군요. 와, 대박이네요. 정말 멋지네요. 네, 시청해 주셔서 감사합니다. 만약 이 메시지를 퍼뜨리고 싶으시다면, 제 프로필을 방문해서 리트윗 버튼을 눌러주세요. 유튜브에서도 라이브로 진행하고 있어요. RayFernando1337을 검색하세요. 유튜브에서 이전 스트림을 시청할 수 있다는 게 정말 좋은 점이에요. 지금 6명이 시청하고 있는데, 유튜브 프리미엄 사용자라면, 언제든지 다시 시청할 수 있어요. 차 안에서 보거나, 다시 돌려보면서 메모를 하거나, 정말 유용해요. 마크, 잘 지내시죠? 참여해 주셔서 감사합니다.

오늘은 처음부터 앱을 만들어 볼 거예요. 제가 사용하는 앱 중 하나는 v0.dev라는 거예요. v0.dev를 채팅창에 입력할게요. 채팅창에 이렇게 띄워놓으면, “여기서 이걸 얻을 수 있어요”라고 말할 수 있죠. 아마 여기에 띄워놓을게요. 사람들이 볼 수 있도록요. 오늘의 목표는 처음부터 앱을 만들어서, 트랜스크립트와 대화할 수 있도록 하는 거예요. 어떤 치료사 분이 “이런 앱을 만들어 주시면 정말 좋겠어요. 제가 직접 만들고 싶은데, 로컬에서 처리할 수 있으면 좋겠어요”라고 하셨어요. 그래서 “좋아요, 그럼 같이 만들어 봅시다”라고 했죠. 분위기를 내려면, 당연히 음악이 필요해요. 저는 음악을 제공하기 위해 UDiio라는 걸 사용해요. 그냥 편안하게 함께 코딩할 수 있어요. 스트림에 참여해 주신 모든 분들께 감사드립니다. 데이빗 햇틀리, 시청해 주셔서 정말 감사합니다. 정말 재미있을 거예요. 편안하게 함께 프로젝트를 만들어 가는 거예요. 제가 사용하는 프롬프트나 다른 것들을 공유할 거예요. 모두 무료예요. 저는 이게 미래라고 생각해요. 아이디어를 종이에 적고 싶어 하는 사람들이 많아질 거고, 또 다른 사람들은 코딩을 하고, 코딩 프레임워크를 깊이 파고들 거예요. 그래서 정말 빠르게 만들 수 있죠. 자, 여기 들어가서 앱에 대해 조금 생각해 봅시다.

지금 트랜스크립트가 있다면, 트랜스크립트와 대화하려면, 인터페이스를 만들어야 해요. 마크, 감사합니다.

그게 바로 Vercel의 V0가 정말 훌륭한 이유예요. 그걸 통해서 가능하죠. “트랜스크립트와 대화할 수 있도록 해주는 앱을 만들어 줘“라고 말할 거예요. 잠깐만요, 품질 모드를 확인해 봅시다. 네, 모든 생성은 품질 모드이고, 공개로 할게요. 아무 생각 없이 그냥 해 볼게요. 자, 가 봅시다. 와, 두 가지 모드가 있네요. V0는 이렇게 UI를 생성하는 일반 모드가 있고, 실제 채팅 모드도 있어요. 채팅 모드는 클로드와 채팅할 때 보는 것과 매우 비슷해요. 차이점을 알아볼게요. 와, 대박이네요. 이미 멋진 채팅 앱을 만들어냈어요. 와, 갑시다. 잠깐만요, 머리를 좀 가릴게요. 와, 이건 정말 대단해요. 옵션 1이 있고, 사실 머리를 계속 둘 거예요. 여기로 옮길게요. 여기로요. 여러분, 괜찮죠? 와, 이건 미쳤어요. 이게 바로 우리가 살고 있는 AI 시대예요. 미팅, 면접, 강의가 여기에 있어요. 와, 거짓말 안 하고, 정말 대박이에요. 태블릿 모드도 있고, 모바일 모드도 있고, 아직 제대로 작동하지 않지만, 코드로 수정하면 돼요. 중요하지 않아요. 밑에 보면 “옵션 A”라고 써 있고, “옵션 B”는… 와, 트랜스크립트, 영업 전화, 미팅 통화, 와, 대박이에요. 그리고 오른쪽에 있는 이건… 와, 플러스 버튼을 누르면 트랜스크립트, 마음에 들어요. 마이클 조호 H 테마, 와, 테마를 적용할 수 있어요. 와, 세상에, 와, 대박이에요. 갑시다. 정말 재미있어요. 윈도우 98, 와, 멋지네요. 너무 멀리 왔어요. 어떤 게 제일 좋을까요? 저는 두 개의 창이 있는 게 더 깔끔해 보여요. 그러니까… 와, 새로운 채팅 기능이 있어요. 제 이름을 클릭하고 채팅을 클릭하면, 여기 창을 열 수 있어요. 여기에 “새 채팅”이라고 입력할게요. 음악 볼륨을 줄이고, 같은 프롬프트를 입력할게요. “트랜스크립트와 대화할 수 있도록 해주는 앱을 만들어 줘”. 어떻게 될지 궁금해요. 이 채팅 앱은… 글꼴을 좀 더 크게 할게요. 여러분이 보실 수 있도록요. 클로드와 채팅하는 것과 매우 비슷해요. 만약 클로드와 채팅해 본 적이 없다면, 클로드와 채팅하는 건 기본적으로… 와, 코드가 이미 여기에 있어요. 트랜스크립트 업로드, 와, 대박이네요. 앱이 이미 작동해요. 와, 갑시다. 출시합시다! 세상에, 놀랍네요. 이전에는 그냥 프로토타입이었는데, 여기서는 실제로 완전히 작동해요. 와, 갑시다. 심지어 오픈 AI 엔드포인트와 연결하는 방법도 알려주네요. 와, 세상에, 잠깐만요. 케이블이 걸렸어요. 와, 와, 와, 정말 강력한 도구예요, 친구들. 와, 이건… 와, 라이브 스트림 끝났어요. 앱이 이미 완성됐어요. 갑시다! 와, 이건 미쳤어요. “당신은 어시스턴트예요”. 와, 정말 놀라워요. “YOLO”라고 질문을 해 보세요. 제가 이걸 시도하려고 했던 것을 보세요. 아마 실제로 코드를 실행하고 있을 거예요. 여기 코드가 있어요. 와, 이건 정말 대단해요. 와, 이미 놀라워요. LOL, 맞아요. 와, 이봐요, 앱이 이미 만들어졌어요. 2초 만에요, 여러분. 이걸 보세요. 정말 미친 듯이 멋지네요. 저도 너무 신나요. 자, 이걸 설정해 봅시다. 오픈 AI 키, 오픈 AI 트랜스크립트를 설정해야 해요. 이제 코드를 실행해 봅시다. 제가 좋아하는 패키지 관리자 중 하나는 Bun이에요. 만약 Bun을 사용해 본 적이 없다면, Bun은 패키지 관리자를 처음부터 다시 작성해서, 엄청나게 빠르게 설치하고, 공간을 많이 절약하고, 그냥 대박이에요. “이 프로젝트를 시작하기 위한 Bun 명령어를 알려줘”. 자, 보세요. 모든 종속성과 필요한 것들을 가져와야 해요. “빠른”. 네, Next.js를 사용하고 싶어요. 이미 그렇게 되어 있을 것 같아요. “Next 앱 생성”. 네. “Next.js 14, Tailwind CSS, 타입스크립트와 함께 사용하고 싶어요”. 맞아요. 이제 이걸… 와, 이걸 설정해 줄게요. 여기 지침이 있어요. 멋지네요. 완벽해요. “트랜스크립트 챗 오픈”. 와, 대박이네요. 한 번의 프롬프트로 두 개의 작동하는 앱을… 와, 카터, 봤어요? 업로드 버튼을 클릭했는데, 작동할 거라고 생각도 못 했어요. 이게 바로 채팅의 힘이에요. 만약 V0를 사용하고 있다면, 옆쪽의 작은 채팅 섹션으로 가세요. 여기 있어요. vz.dev/chat으로 가면 돼요. 하지만 여기에 없다면, vz.dev로 가서, 머리가 있는 쪽으로 가면, 작은 SL 채팅 버튼이 있어요. 바로 여기가 핵심이에요. 그리고 채팅은… 와, 이건 대박이에요. 자, 이제 이 지침을 따라 봅시다. 제가 할 일은… 이걸 옆으로 옮길 수 있을까요? 와, 카드 보기도 하네요. 네, 이걸 잠깐 옆으로 옮길게요. 여러분과 함께 이 여정을 떠날 수 있도록요. 자, 비트를 바꿔 봅시다. 이건 제 흥분을 반영하지 못해요. 여기가 우리가 원하는 곳이고, 그리고 여기 아래에… 좋아요. 멋지네요. 밑에 있는 이걸 클릭하면, 터미널이 나타나고, 이제 터미널이 열렸어요. 이제 지시대로 해 보죠. 아마 여기 밑에 있을 거예요. 좋아요. “트랜스크립트 앱, npm run dev, npm install”. 와, 여기에 npm install이 있어요. 어딘가에 있겠죠. 와, 찾았어요. “npx create-next-app latest”. Bun을 사용하고 싶은데, “npx create-next-app latest”. 아니요, 이걸 다시 입력할게요. Bun을 사용하고 싶어요. “이걸 위한 Bun install 명령어를 알려줘”. 제출. 연필을 사용하면, 마지막 부분으로 돌아가서, 프롬프트를 다시 입력할 수 있어요. 제가 이걸 덮어 놓고 있었네요. 그러면 프롬프트를 다시 입력할 수 있어요. “여기에 나를 넣어줘”. 좋아요. “Bun create-next-app, 모든 것들을 사용하고 Bun을 사용해 줘”.

이 영상을 보고, 실제 해 보려는 분들에게 도움이 될 만한 것을 찾아 정리해 봤습니다.

v0 by Vercel: 이 프로젝트는 채팅 기반 웹 개발 도우미를 소개합니다. v0를 사용하면 간단한 텍스트 프롬프트와 이미지에서 UI 요소를 생성할 수 있습니다. 자연어 입력과 웹 개발을 조합한 흥미로운 개념입니다. 더 자세한 내용은 v0.dev 웹사이트에서 확인하실 수 있습니다.

Magic UI – UI library for Design Engineers

50+ free and open-source animated components built with ReactTypescriptTailwind CSS, and Framer Motion.
Perfect companion for shadcn/ui.

Aeternity UI

Make your websites look  10x better

Copy paste the most trending components and use them in your websites without having to worry about styling and animations.

About the Author
(주)뉴테크프라임 대표 김현남입니다. 저에 대해 좀 더 알기를 원하시는 분은 아래 링크를 참조하세요. http://www.umlcert.com/kimhn/

Leave a Reply

*