AI Code Editor Cursor 배우기 – 3. 음성인식 웹앱 개발 – 1. V0에서 화면 설계 후 Cursor로 가져오기
1. Cursor에서 음성인식 웹 앱 프로젝트를 생성합니다.
Chat 패널에 다음과 같이 웹 앱 프로젝트를 생성해 달라고 요청합니다.
stt-app 라는 이름의 새로운 Next.js 프로젝트를 생성합니다. |
Cursor가 프로젝트 생성 방법을 알려줍니다. Run 버튼 있는 곳에서는 Run 버튼을 클릭하고, 그렇지 않은 부분에서는 시킨 대로 따라 합니다.
2. V0에서 음성인식 웹 앱 사용자 인터페이스를 설계합니다.
https://v0.dev 페이지에 접속합니다. 등록(sign up)하고, 로그인(sign in) 합니다.
음성 인식을 위한 화면이 어떠해야 할 지 계획하고 그것을 텍스트로 작성에서 V0에게 챗 메시지로 제공합니다.
| 사용자가 오디오 파일을 업로드하고 음성 인식 버튼을 클릭하면 텍스트로 변환하는 화면을 원합니다. 화면 왼쪽은 오디오 파일 업로드 부분이고, 오른쪽은 텍스트 변환 결과를 표시합니다. |
다음과 같은 화면을 만들어 줍니다.
오른쪽 위에 “Add to Codebase” 버튼을 클릭해서 Cursor에서 생성된 사용자 인터페이스를 가져올 명령을 받아 복사합니다.
Cursor 터미널에서 복사한 명령을 붙여넣고 실행합니다. 그러면 Cursor가 V0에서 생성한 user interface를 가져옵니다. stt-app 웹앱을 실행해서 가져온 user interface가 반영되도록 요청합니다.
| 나: 다음 명령을 터미널에서 실행해서 V0에서 설계한 사용자 인터페이스를 가져왔습니다.<V0에서 복사한 부분>
Cursor: 네, V0에서 설계한 사용자 인터페이스를 가져오셨군요. 이제 이 인터페이스를 기반으로 음성 인식 기능을 추가해 보겠습니다. 다음과 같이 코드를 수정해 주세요: … 나: <audio-transcription.tsx 파일을 더블클릭해서 열고, Chat 패널에서 다음과 같이 작성합니다.> “stt-app이 실행되면 이 화면이 나타날 수 있게 해 주세요.” Cursor: 네, 알겠습니다. stt-app이 실행될 때 AudioTranscription 컴포넌트가 표시되도록 설정하겠습니다. 이를 위해 다음과 같이 수정해야 합니다. … |
Cursor의 응답을 읽어보면서, Apply, Accept 합니다. 다시, npm run dev 합니다. 화면이 뜹니다.
다음 번에는 “음성인식을 위한 생성형 인공지능 서비스로 Groq을 사용, 음성인식 웹앱 개발 완료”를 다루겠습니다.
이를 위해 https://console.groq.com/에서 회원 가입한 후 API Key를 발급 받아둡니다.
