AI코딩, 말귀를 알아듣네?

오늘도 재미나고 유용한 기술을 하나 들고 왔습니다.
바로 마이크로 말하면 AI가 이를 알아 듣고 텍스트로받아 적는 것인데요.
이번 실험을 위해서는 소리를 텍스트로 해석하는 API 유료 서비스를 이용할 겁니다.

오늘의 IT 지식 - API 와 위스퍼

API가 뭔가요? API 는 영어로 Application Programming Interface 의 앞글자를 딴 약어인데요.
IT 한글 용어로는 '응용 프로그램 통신규약'이라 합니다.

좀 더 쉽게 비유를 들어 볼께요.
API란 마치 카페에서 커피를 주문할 때 주문 받는 카운터 직원 또는 키오스크 기계와 같은데요.
원두커피를 마시고 싶은데 직접 커피를 볶거나 내리거나 하는 과정을 몰라도
비용을 지불하고 커피를 주문하면 알아서 커피를 만들고
'1xx번 손님~' 부르면서 완성된 커피를 전달해 줍니다.

커피를 비유하였지만 기술도 마찬가지입니다.
누군가 어떤 기술을 만들어 사람들이 사용하도록 제공하는 서비스를 API라고 하는데요.

chatGPT로 유명한 오픈AI사에서 소리를 텍스트로 해석하는 서비스를 만들어 제공하는데
이 API 서비스의 이름이 '위스퍼'(Whisper)입니다.

위스퍼 API 를 사용하려면?

먼저 돈을 내야 합니다.  ...  너무 직설적인가요? ㅎㅎ
위스퍼 AI 를 사용하려면 OPENAI 플랫폼이라는 사이트에서 비용을 결제해야 하는데요.
충전식이고 사용량에 따라 점점 소진됩니다.
연습용으로 사용한다고 할때 5달러 정도만 결제하고 추가 결제는 안되게 하면 무난합니다.

충전 방법은 아래 도현님의 사이트에 아주 상세하게 나와 있으니 참조하시면 되고요.
여기서 발급받은 api-key 를 잘 보관해주셔야 합니다.

https://do-hyeon.tistory.com/pages/OpenaiGPT-API-KEY-%EB%B0%9C%EA%B8%89-%EB%B0%8F-%ED%81%AC%EB%A0%88%EB%94%A7-%EC%B6%A9%EC%A0%84%EB%B0%A9%EB%B2%95

Openai(GPT) API KEY 발급 및 크레딧 충전방법

참고로 위스퍼의 사용료는 1분당 0.006달러로 공식사이트에 안내되어 있습니다. ( 2025. 5. 18 기준 )

https://platform.openai.com/docs/pricing

만일 연습용이라 충전을 하신 후 해외 해킹 등으로 찜찜하시다면 Billing 메뉴의 Payment methods 탭에서 등록한 카드를 삭제하는게 좋습니다. 삭제해도 충전한 금액은 그대로 유지됩니다.

XAMPP 준비~

이제 본격적으로 소리를 텍스트로 바꾸는 위스퍼 AI를 사용할 차례입니다.

이를 위해 먼저 xampp 가 설치되어 있어야 하는데요.
xampp 설치가 안되신 분은 아래 게시글을 참조하셔서 먼저 설치를 진행해 주시면 되구요.

https://itadventure.tistory.com/730

윈드서프 AI로 교회 홈페이지 만들기

기본 설정

그동안은 먼저 폴더를 만들고 윈드서프를 실행했지만, 사실 윈드서프를 먼저 실행하고 해도 됩니다.

윈드서프를 실행한 다음, File - Open Folder 메뉴를 선택하고,

폴더 선택창에서 c:\xampp\htdocs 폴더로 이동하고 폴더를 생성, 이 폴더를 더블클릭해도 됩니다.

talk2text 폴더를 생성하였으니 URL은 http://localhost/talk2text 가 되겠지요?

그리고 왼쪽 explore 창에서 새 파일 아이콘을 선택 후,
윈드서프 규칙 파일 ( .windsurfrules ) 을 추가해줍니다.

규칙 내용은 아래와 같이 작성합니다.

- 모든 답변은 한글로 해줘.
- php8 로 코드를 작성해줘.
- tailwind css 를 사용하고 현대적인 예쁜 색감을 사용해줘.
- 아이콘은 구글 메테리얼 아이콘을 사용해줘.
- 브라우저 미리보기는 자동실행하지 말아줘.

코딩 시작!

이제 오른쪽 채팅창에 아래와 같이 입력해 주세요.

자바스크립트로 음성을 녹음하고 재생하는 코드를 작성해줘. 
녹음 완료 버튼이 필요하고 완료 버튼을 안 눌러도 25초가 되면 자동으로 녹음이 멈추게 해줘.

윈드서프AI가 뭔가를 척척 실행하고 완료되었다고 알려줄텐데요.

ㅏ

중간 과정에 아래와 같이 수락(Accept)을 요구하면 Accept 또는 Accept All 버튼을 눌러주시면 됩니다.

이제 xampp 서비스를 실행하지 않았다면 먼저 xampp 에서 Apahe 서비스를 실행해 주신 다음에,

크롬 브라우저에서 http://localhost/talk2text URL 에 접속하시면 되는데요.
아래와 같은 화면이 등장할텐데요. 여러분의 화면은 좀 다를 수 있습니다.

기능을 확인해볼까요?
녹음 시작 버튼을 누르면, 녹음중이라는 상태가 표시되고 시간이 흘러갑니다.
마이크에 말을 한 다음 녹음 완료 버튼을 누르시면 되는데요.
25초가 되면 자동으로 녹음 완료가 됩니다.

녹음 완료 후에는 재생 버튼을 누르면 소리가 재생됩니다.
와우~ 멋진 기능이지 않나요?
아직 여기까지는 위스퍼 API와 관계없이 실행해 보실수 있습니다.

잠깐! 호스팅 서비스를 이용하시는 분을 위한 팁!

이 내용은 홈페이지를 서버를 임대하여 업로드해 사용하는 분들을 위한 팁입니다.
크롬 브라우저에서 마이크로 목소리를 녹음하려면 마이크 녹음 '권한'이 필요한데요.
이 녹음 권한은 기본적으로 http:// 기반의 주소에서는 사용할 수 없습니다.
SSL 인증서가 적용된 https:// 주소에서만 사용 가능하니 참고해 주세요.
예외적으로 xampp 같은 연습용 서버를 설치해 내 PC에서만 작동하는 http://localhost URL에서는 마이크 권한을 사용할 수 있습니다.

위스퍼 연결, 소리를 글자로!

이제 앞에서 신청한 위스퍼 AI를 연결하여 목소리를 글자로 변환하는 부분을 지시하겠습니다.

위스퍼 API 를 이용하여 녹음이 끝나면 자동으로 텍스트를 추출하고 아래 목록에 항목을 하나씩 추가해줘. 
추가한 항목은 한개씩 삭제하도록 해줘.

윈드서프 규칙에서 PHP 로 만들어 달라고 했기 때문에 알아서 PHP 로 코드를 작성해 줄텐데요.
위스퍼 API는 api-key가 필요하기 때문에 아래와 같은 안내 문구가 표시될 겁니다.

이 경우 transcribe.php 파일에서 $apiKey 에 API 키를 넣어달라고 했으니,
왼쪽 explore 창에 새로 생겨난 transcribe.php 파일을 클릭하여 연 다음,

아래와 같은 부분을 찾으신 다음

따옴표 안에 (" 와 " 사이) API 키를 복붙해서 넣어주시면 됩니다.
그리고 Ctrl + S 키를 눌러 저장합니다.

이제 다시 http://localhost/talk2text URL에서 테스트해볼까요?
저는 아래와 같은 화면이 등장했는데요, 여러분은 화면 구성이 다를 수 있습니다.

종전과 똑같이 목소리를 녹음하고 녹음 완료 버튼을 누르면,
약간의 시간이 소요된 다음, 금방 녹음한 목록에 글자 변환되어 출력된 것을 확인할 수 있습니다.

영어 발음에 약간 자신 있읏다면 영어도 알아듣는데요.
이어서 녹음을 진행하면, 'Do it right now!'
목록이 추가됩니다.

그리고 우측 휴지통 아이콘을 클릭하면 항목이 삭제되는 것을 보실수 있지요.
앞에서 모두 지시한 내용대로 되었습니다.

한번에 성공할 때도 있지만 때로는 요청 내용대로 작동이 안될 때도 있는데요.
그럴 경우 아래 내용을 요청하면 알아서 수정해 줍니다.

작동이 제대로 안되는 것 같은데, 확인해줘.
또는 구체적으로,
녹음 재생 버튼이 작동이 안되네. 확인해줘.

에필로그

AI코딩 도구는 작은 규모의 기능구현은 비교적 잘 만듭니다.
특히 사용해보지 않아 익숙하지 않은 기술 구현은 끝내주게 하는데요.
개발자 입장에서 이걸 통해 기술의 사용법을 아주 쉽게 익힐 수 있습니다.

다만 테스트 결과 기능이 많아지고 시스템의 복잡성이 높아질수록
점점 AI가 감당하지 못하는 문제가 있는 것을 볼 수 있었습니다.
babylon.js 프레임워크를 이용하여 3D 컨텐츠를 개발하는 과정에
AI가 무한 로딩하며 컨텐츠를 전혀 손을 못대거나,
수정했다고 하는데 잘 되던 기능들이 갑자기 모두 먹통이 되는 등의 문제도 있었습니다.

마치 주니어 개발자가 코드를 잘못 손대어 쩔쩔 매는 것 같은 인상에 측은한 느낌일까요? :)
아직 AI코딩의 현주소는 여기까지인데요.
참고로 저는 코딩에 성능이 좋다는 1크레딧씩 소진되는 클로드 3.7 소넷 모델을 사용합니다.

---

흥미롭거나 유용한 주제가 되셨는지요?
오늘도 방문해주셔서 감사합니다. :)