GSP125

개요

Google Cloud Speech 스트리밍 API를 사용하면 개발자는 음성 언어를 텍스트로 실시간 변환할 수 있습니다. API를 JavaScript의 Web Audio API 및 Websocket과 함께 사용하면 Java 서블릿은 웹페이지에서 스트리밍된 음성을 수신하여 텍스트 스크립트를 제공합니다. 이렇게 되면 모든 웹페이지에서 음성을 추가 사용자 인터페이스로 사용할 수 있습니다.

이 실습은 여러 섹션으로 구성되며 각 섹션에서는 최종 웹 애플리케이션의 구성요소를 소개합니다.

생성한 웹앱은 클라이언트의 마이크에서 오디오를 가져와 Java 서블릿으로 스트리밍합니다. Java 서블릿은 데이터를 Cloud Speech API에 전달하고, Cloud Speech API는 감지된 음성의 스크립트를 서블릿에 다시 스트리밍합니다. 그런 다음 서블릿은 스크립트 결과를 클라이언트에 전달하고 클라이언트는 이를 페이지에 표시합니다.

이 작업을 수행하려면 다음 구성요소를 만들어야 합니다.

• 웹페이지의 정적 HTML, JavaScript, CSS를 제공하는 Java 서블릿
• 웹페이지를 사용자의 마이크에 연결하고, 원시 바이트를 추출하고, Websocket을 통해 서블릿으로 스트리밍하는 JavaScript, HTML, CSS
• 클라이언트로부터 수신한 사운드 바이트를 Cloud Speech API로 스트리밍하고 Cloud Speech API의 스크립트 결과를 클라이언트로 다시 스트리밍하는 서블릿 Websocket 핸들러

실습할 내용

• 가상 머신(VM) 만들기
• HTTP Java 서블릿 시작하기
• 웹페이지에서 오디오 캡처
• 음성을 텍스트로 변환

기본 요건

이 실습은 사용자가 다음에 익숙하다는 가정하에 진행됩니다.

• Java 프로그래밍 언어
• Java 서블릿(구체적으로는 Jetty 서블릿 컨테이너). 다른 서블릿 컨테이너를 사용할 수도 있지만 샘플 솔루션에서는 Jetty를 사용하므로 다른 컨테이너를 사용하는 솔루션은 확인하기가 어렵습니다.
• JavaScript 프로그래밍 언어. 웹페이지용 코드는 거의 전적으로 JavaScript로 작성되므로 웹페이지 관련 실습은 JavaScript를 사용하지 않으면 진행하기가 쉽지 않습니다.
• Linux 명령줄. 실습의 대부분은 Linux 명령 프롬프트에서 진행되며 해당 환경에서 자주 사용하는 도구와 텍스트 편집기에 익숙하다면 실습을 더 쉽게 진행할 수 있습니다.
• Maven 프로젝트 관리 도구. 원칙적으로는 모든 Java 프로젝트 관리 도구를 사용할 수 있지만 샘플 솔루션에서는 Maven을 사용하므로 다른 도구를 사용하는 솔루션은 확인하기가 어렵습니다.

설정 및 요건

실습 시작 버튼을 클릭하기 전에

다음 안내를 확인하세요. 실습에는 시간 제한이 있으며 일시중지할 수 없습니다. 실습 시작을 클릭하면 타이머가 시작됩니다. 이 타이머는 Google Cloud 리소스를 사용할 수 있는 시간이 얼마나 남았는지를 표시합니다.

실무형 실습을 통해 시뮬레이션이나 데모 환경이 아닌 실제 클라우드 환경에서 실습 활동을 진행할 수 있습니다. 실습 시간 동안 Google Cloud에 로그인하고 액세스하는 데 사용할 수 있는 새로운 임시 사용자 인증 정보가 제공됩니다.

이 실습을 완료하려면 다음을 준비해야 합니다.

• 표준 인터넷 브라우저 액세스 권한(Chrome 브라우저 권장)

참고: 이 실습을 실행하려면 시크릿 모드(권장) 또는 시크릿 브라우저 창을 사용하세요. 개인 계정과 학습자 계정 간의 충돌로 개인 계정에 추가 요금이 발생하는 일을 방지해 줍니다.

• 실습을 완료하기에 충분한 시간(실습을 시작하고 나면 일시중지할 수 없음)

참고: 이 실습에는 학습자 계정만 사용하세요. 다른 Google Cloud 계정을 사용하는 경우 해당 계정에 비용이 청구될 수 있습니다.

실습을 시작하고 Google Cloud 콘솔에 로그인하는 방법

1. 실습 시작 버튼을 클릭합니다. 실습 비용을 결제해야 하는 경우 결제 수단을 선택할 수 있는 대화상자가 열립니다. 왼쪽에는 다음과 같은 항목이 포함된 실습 세부정보 창이 있습니다.

   • Google Cloud 콘솔 열기 버튼
   • 남은 시간
   • 이 실습에 사용해야 하는 임시 사용자 인증 정보
   • 필요한 경우 실습 진행을 위한 기타 정보

2. Google Cloud 콘솔 열기를 클릭합니다(Chrome 브라우저를 실행 중인 경우 마우스 오른쪽 버튼으로 클릭하고 시크릿 창에서 링크 열기를 선택합니다).

   실습에서 리소스가 가동되면 다른 탭이 열리고 로그인 페이지가 표시됩니다.

   팁: 두 개의 탭을 각각 별도의 창으로 나란히 정렬하세요.

   참고: 계정 선택 대화상자가 표시되면 다른 계정 사용을 클릭합니다.

3. 필요한 경우 아래의 사용자 이름을 복사하여 로그인 대화상자에 붙여넣습니다.

   {{{user_0.username | "Username"}}}

   실습 세부정보 창에서도 사용자 이름을 확인할 수 있습니다.

4. 다음을 클릭합니다.

5. 아래의 비밀번호를 복사하여 시작하기 대화상자에 붙여넣습니다.

   {{{user_0.password | "Password"}}}

   실습 세부정보 창에서도 비밀번호를 확인할 수 있습니다.

6. 다음을 클릭합니다.

   중요: 실습에서 제공하는 사용자 인증 정보를 사용해야 합니다. Google Cloud 계정 사용자 인증 정보를 사용하지 마세요. 참고: 이 실습에 자신의 Google Cloud 계정을 사용하면 추가 요금이 발생할 수 있습니다.

7. 이후에 표시되는 페이지를 클릭하여 넘깁니다.

   • 이용약관에 동의합니다.
   • 임시 계정이므로 복구 옵션이나 2단계 인증을 추가하지 않습니다.
   • 무료 체험판을 신청하지 않습니다.

잠시 후 Google Cloud 콘솔이 이 탭에서 열립니다.

참고: Google Cloud 제품 및 서비스에 액세스하려면 탐색 메뉴를 클릭하거나 검색창에 제품 또는 서비스 이름을 입력합니다.

작업 1. 가상 머신 만들기

Compute Engine은 Google 인프라에서 VM을 시작할 수 있는 서비스입니다. 이 실습에서는 VM을 만들고 이를 사용해 웹사이트를 호스팅하는 Java 8로 작성된 서블릿을 실행하고, Cloud Speech API를 사용하여 클라이언트에 동적 스크립트를 제공합니다. 이 실습에서는 VM을 사용하여 코드를 실행합니다.

1. 새 VM을 만들려면 탐색 메뉴() > Compute Engine > VM 인스턴스를 클릭합니다.

2. 새 인스턴스를 만들려면 인스턴스 만들기를 클릭합니다.

3. 머신 구성에서

   • 새 인스턴스의 이름을 speaking-with-a-webpage로 지정합니다.

   • 영역으로 을(를) 선택합니다.

   • 다른 값은 기본값을 유지합니다.

4. OS 및 스토리지를 클릭합니다.

   • 변경을 클릭하여 부팅 디스크 구성을 시작하고 다음 값을 선택합니다.

     • 운영체제에 Debian을 선택합니다.

     • 버전에서 Debian GNU/Linux 12(bookworm)를 선택합니다.

     • 부팅 디스크 유형을 기본값으로 설정합니다.

     • 창 하단에서 선택을 클릭합니다.

5. 네트워킹을 클릭합니다.

   • 방화벽에서 HTTP 트래픽 허용 확인 및 HTTPS 트래픽 허용 확인을 확인합니다.

6. 보안을 클릭합니다.

   • ID 및 API 액세스 > 서비스 계정은 기본값을 유지합니다.

   • 액세스 범위로 모든 Cloud API에 대한 전체 액세스 허용을 선택합니다.

7. 만들기를 클릭합니다.

몇 분 후 VM이 실행됩니다. VM 인스턴스 목록에서 VM과 관련 세부정보를 확인합니다. 다음 단계에서 사용할 SSH 버튼과 이 실습의 뒷부분에서 사용할 외부 IP를 확인합니다.

8. 오른쪽에 있는 SSH 버튼을 클릭하여 연결합니다. 메시지가 표시되면 승인을 클릭합니다.

새 창이 열리고 VM에 연결되어 명령 프롬프트가 제공됩니다. 이 실습의 나머지 부분에서는 이 인터페이스를 사용합니다.

완료된 작업 테스트하기

내 진행 상황 확인하기를 클릭하여 실행한 작업을 확인합니다.

가상 머신 만들기

관련 문서

Compute Engine 문서 참조에서 Compute Engine과 Compute Engine의 다양한 기능에 대해 자세히 알아보세요.

작업 2. 작업 예시 다운로드 및 설정

1. SSH 세션에서 Git, Java 17, Maven 프로젝트 관리 도구를 설치하여 예시 코드를 컴파일하고 실행합니다.

sudo apt update && sudo apt install git -y sudo apt install -y maven openjdk-17-jdk 참고: 이 명령어는 몇 분 정도 걸릴 수 있습니다.

2. 작업 예시를 VM에 클론합니다.

git clone https://github.com/googlecodelabs/speaking-with-a-webpage.git

이렇게 하면 다음 각 섹션의 하위 디렉터리가 포함된 speaking-with-a-webpage 디렉터리가 생성됩니다. 각 하위 디렉터리는 이전 디렉터리를 기반으로 빌드되며 새로운 기능을 점진적으로 추가합니다.

• 01-hello-https - HTTPS를 통해 제공되는 정적 파일과 핸들러가 있는 최소한의 Jetty 서블릿이 포함되어 있습니다.
• 02-webaudio - 클라이언트 측 JavaScript를 작성하여 클라이언트의 마이크에서 오디오를 녹음하고 시각화를 표시하여 작동 여부를 확인합니다.
• 03-websockets - websocket을 통해 서로 통신하도록 클라이언트와 서버를 모두 수정합니다.
• 04-speech - 서버를 수정하여 오디오를 Cloud Speech API로 전송하고 후속 스크립트를 JavaScript 클라이언트로 전송합니다.

이 실습에서 사용한 예시에서는 일반 HTTPS 포트 대신 권한이 없는 포트 8443을 개발 목적으로 사용합니다.

3. 웹브라우저에서 이 포트에 액세스하려면 다음 gcloud 명령어를 사용하여 VM의 방화벽을 엽니다.

gcloud compute firewall-rules create dev-ports \ --allow=tcp:8443 \ --source-ranges=0.0.0.0/0 참고: 단계별 변경 내용을 비교할 수 있습니다.

한 섹션과 다음 섹션 간에 변경된 내용을 비교하려면 다음 명령어를 사용하면 됩니다.

cd ~/speaking-with-a-webpage

git diff --no-index 01-hello-https/ 02-webaudio/

02-https 디렉터리/단계와 03-webaudio 디렉터리/단계의 차이점이 표시됩니다.

화살표 키, PgUp/PgDn을 사용하여 탐색하고 q를 사용하여 종료합니다.

완료된 작업 테스트하기

내 진행 상황 확인하기를 클릭하여 실행한 작업을 확인합니다.

필요한 소프트웨어 설치 및 방화벽 규칙 만들기

작업 3. HTTPS Java 서블릿 시작하기

Java 서블릿은 이 웹앱을 지원하는 핵심 요소입니다. 필수 클라이언트 측 HTML, CSS, JavaScript 코드를 제공하고 Cloud Speech API에 연결하여 스크립트를 제공하기 때문입니다.

웹페이지에서 사용자의 마이크에 액세스할 때 브라우저에서는 도청을 방지하기 위해 웹페이지에 보안 채널을 통한 통신을 요구합니다. 따라서 HTTPS를 통해 웹페이지를 제공하도록 서블릿을 설정해야 합니다. 보안 웹페이지를 구성하고 제공하는 것은 별도의 주제이므로 이 실습에서는 제공된 샘플 솔루션의 자체 서명 인증서와 Jetty 구성 파일을 사용합니다. 개발 환경에서는 이 정도로도 충분하기 때문입니다.

이 섹션에서는 01-hello-https에 제공된 Maven 프로젝트를 읽고 실행하기만 하면 됩니다. src/ 디렉터리에 있는 파일은 후속 단계에서 빌드되는 기본 파일이므로 특히 주목해야 합니다.

• src/main/webapp의 파일에는 Jetty에서 정적으로 제공되는 JavaScript, CSS, HTML 파일이 포함되어 있습니다.
• TranscribeServlet.java는 /transcribe 경로에 대한 요청을 처리하는 서블릿을 정의합니다.

샘플 솔루션 실행

제공된 speaking-with-a-webpage 저장소의 01-hello-https 하위 디렉터리에는 HTTPS용으로 구성된 Maven 서블릿 프로젝트가 포함되어 있습니다. 이 서블릿은 Jetty 서블릿 프레임워크를 사용하여 정적 파일과 동적 엔드포인트를 모두 제공합니다. 또한 위의 블로그 게시물을 사용하여 Key Tool 명령어로 자체 서명 인증서를 생성하고, HTTPS를 지원하는 Jetty 구성을 추가합니다.

1. 서블릿을 시작합니다. 01-hello-https로 이동합니다.

cd ~/speaking-with-a-webpage/01-hello-https

2. 코드를 실행합니다.

mvn clean jetty:run

3. 그런 다음 웹브라우저에서 https://<your-external-ip>:8443에 액세스합니다.

참고: Cloud 콘솔 VM 인스턴스 페이지에서 외부 IP 주소를 확인할 수 있습니다.

샘플 서블릿이 비표준 포트에서 수신 대기하고 있으므로 외부 IP 링크를 직접 클릭해도 실행 중인 서블릿으로 연결되지 않습니다. 서블릿에 액세스하려면 위와 같이 관련 포트를 서블릿에 추가해야 합니다.

HTTPS URL을 사용하여 웹앱에 처음 액세스하면 브라우저에서 연결이 비공개가 아니라는 경고가 표시될 수 있습니다. 샘플 앱이 개발을 위해 자체 서명 SSL 인증서를 사용하기 때문입니다. 프로덕션 환경에서는 인증 기관에서 서명한 SSL 인증서가 필요하지만 이 실습에서는 자체 서명 SSL 인증서만 사용해도 됩니다. 대신 웹페이지에 보안 비밀을 말하지 않도록 주의하세요. 😁

완료된 작업 테스트하기

내 진행 상황 확인하기를 클릭하여 실행한 작업을 확인합니다.

샘플 솔루션(hello-https) 실행

작업 4. 웹페이지에서 오디오 캡처

Web Audio API를 사용하면 사용자의 동의를 얻어 웹페이지에서 사용자 마이크의 오디오 데이터를 캡처할 수 있습니다. Cloud Speech API는 특정 형식의 원시 데이터가 필요하며 원시 데이터의 샘플링 레이트를 알아야 합니다.

샘플 솔루션

제공된 speaking-with-a-webpage 저장소의 02-webaudio 하위 디렉터리는 01-hello-https 샘플 코드를 기반으로 빌드되며, 이를 위해 Web Audio getUserMedia 함수를 추가하여 사용자의 마이크를 오디오 시각화에 연결합니다. 그런 다음 오디오 파이프라인에 ScriptProcessorNode를 추가하여 원시 오디오 바이트를 가져와 서버로 전송할 준비를 합니다. Cloud Speech API도 결국 sampleRate가 필요하므로 이 역시 가져옵니다. 다음 단계를 수행하여 02-webaudio 앱을 시작합니다.

1. Ctrl+C를 눌러 서버를 중단합니다.

2. 02-webaudio가 포함된 디렉터리로 이동합니다.

cd ~/speaking-with-a-webpage/02-webaudio

3. 애플리케이션을 실행합니다.

mvn clean jetty:run

4. 실행 중인 웹앱에 액세스하려면 Cloud 콘솔 VM 인스턴스 페이지에서 외부 IP 주소를 찾아 브라우저에서 https://<your-external-ip>:8443에 액세스합니다.

참고: 다음 명령어를 실행하여 이전 섹션(01-hello-https)과 현재 섹션(02-webaudio) 간에 변경된 내용을 확인할 수 있습니다.

cd ~/speaking-with-a-webpage git diff --no-index 01-hello-https/ 02-webaudio/

완료된 작업 테스트하기

내 진행 상황 확인하기를 클릭하여 실행한 작업을 확인합니다.

샘플 솔루션을 실행하여 웹페이지에서 오디오 캡처

5. Ctrl+C를 눌러 서버를 중단합니다.

작업 5. 클라이언트에서 서버로 오디오 스트리밍

일반적인 HTTP 연결로는 오디오를 서버로 실시간 스트리밍하는 작업과 제공되는 스크립트를 수신하는 작업을 동시에 수행하기가 어렵습니다. 이 섹션에서는 클라이언트에서 서버로 이어지는 Web Socket 연결을 만들고 이를 사용하여 오디오 메타데이터(예: 샘플링 레이트)와 데이터를 서버로 전송하는 동시에 응답(예: 데이터의 스크립트)을 수신 대기합니다.

오디오 바이트 스트리밍

제공된 예시에서는 WebSocketAdapter를 등록하기 위해 TranscribeServlet을 WebSocketServlet에서 확장되도록 변경합니다. 이 항목이 정의하는 WebSocketAdapter는 수신된 메시지를 가져와 클라이언트로 다시 전송합니다.

클라이언트에서 샘플은 이전 단계의 scriptNode를 나중에 정의할 소켓으로 데이터를 전송하는 스크립트 노드로 대체합니다. 그런 다음 서버에 대한 보안 Websocket 연결을 만듭니다. 서버와 마이크가 모두 연결되면 서버에서 메시지를 수신 대기하기 시작하고 서버에 샘플링 레이트를 전송합니다. 서버가 샘플링 레이트를 되풀이하면 클라이언트는 리스너를 더 영구적인 스트립트 핸들러로 대체하고 scriptNode를 연결하여 서버에 대한 오디오 바이트 스트리밍을 시작합니다.

1. 03-websockets가 포함된 디렉터리로 이동합니다.

cd ~/speaking-with-a-webpage/03-websockets

2. 애플리케이션을 실행합니다.

mvn clean jetty:run

3. 실행 중인 웹앱에 액세스하려면 Cloud 콘솔 VM 인스턴스 페이지에서 외부 IP 주소를 찾아 브라우저에서 https://<your-external-ip>:8443에 액세스합니다.

4. Ctrl+C를 눌러 서버를 중단합니다.

작업 6. 음성을 텍스트로 변환

Google Cloud Speech 스트리밍 API를 사용하면 오디오 바이트를 API로 실시간 전송하고 감지된 음성의 스크립트를 비동기식으로 수신할 수 있습니다. API는 요청 시작 부분에 전송되는 구성에 따라 결정되는 특정 형식으로 바이트가 제공되길 기대합니다. 이 웹앱에서는 LINEAR16 형식의 API 원시 오디오 샘플을 전송합니다. 즉, 각 샘플은 클라이언트에서 획득한 샘플링 레이트로 전송되는 부호 있는 16비트 정수입니다.

샘플 솔루션

제공된 speaking-with-a-webpage 저장소의 04-speech 하위 디렉터리는 03-websockets 단계의 서버 코드를 작성합니다. 위의 StreamingRecognizeClient 샘플 코드의 코드를 통합하여 Cloud Speech API와 연결하고, 오디오 바이트를 전달하고, Cloud Speech API에서 스크립트를 수신합니다. 스크립트를 비동기식으로 수신하면 JavaScript 클라이언트와의 연결을 사용하여 전달합니다. JavaScript 클라이언트는 웹페이지에 이를 출력하는 역할만 합니다.

1. 애플리케이션을 시작합니다.

cd ~/speaking-with-a-webpage/04-speech mvn clean jetty:run

2. 실행 중인 웹앱에 액세스하려면 Cloud 콘솔 VM 인스턴스 페이지에서 외부 IP 주소를 찾아 브라우저에서 https://<your-external-ip>:8443에 액세스합니다.

작업 7. 배운 내용 테스트하기

아래는 이 실습에서 배운 내용을 복습하기 위한 객관식 문제입니다. 최선을 다해 풀어보세요.

수고하셨습니다

gcloud를 사용하여 VM을 만들고 Java 서블릿을 시작하여 웹페이지에서 오디오를 캡처하고 텍스트로 변환하는 방법을 배웠습니다.

다음 단계/더 학습하기

다른 소프트웨어 개선사항을 추가할 수 있을지 생각해 보세요.

• 클라이언트 앱은 지금은 텍스트를 출력하는 역할만 하지만 다양한 방식으로 활용할 수 있습니다. 또 다른 사용자 인터페이스라고 생각하시면 됩니다. 키워드로 특정 작업을 호출할 수 있으며 텍스트를 대화 엔진과 통합하거나 텍스트 자체를 자막으로 사용할 수도 있습니다.
• 비정형 텍스트에서 구조를 추출할 수 있는 Cloud Natural Language API와 스크립트를 통합합니다.
• Cloud Speech API는 간단한 구성 파라미터를 통해 선택할 수 있는 80개 이상의 언어를 지원합니다. 구사할 수 있는 다른 언어나 현재 배우고 있는 언어를 사용해 보세요.
• 현재 프로젝트 설정은 주로 개발 목적에 적합하며 프로덕션에 배포할 때는 설정을 변경해야 합니다. 예를 들어 인스턴스 그룹에서 여러 Compute Engine 인스턴스를 사용하고 SSL 부하 분산기를 사용하여 클라이언트와 서버 간에 보안 통신을 제공할 수 있습니다.

Google Cloud 교육 및 자격증

Google Cloud 기술을 최대한 활용하는 데 도움이 됩니다. Google 강의에는 빠른 습득과 지속적인 학습을 지원하는 기술적인 지식과 권장사항이 포함되어 있습니다. 기초에서 고급까지 수준별 학습을 제공하며 바쁜 일정에 알맞은 주문형, 실시간, 가상 옵션이 포함되어 있습니다. 인증은 Google Cloud 기술에 대한 역량과 전문성을 검증하고 입증하는 데 도움이 됩니다.

설명서 최종 업데이트: 2025년 9월 15일

실습 최종 테스트: 2025년 9월 15일

Copyright 2025 Google LLC. All rights reserved. Google 및 Google 로고는 Google LLC의 상표입니다. 기타 모든 회사명 및 제품명은 해당 업체의 상표일 수 있습니다.