극초보 바이브코딩 #6 · 다시 HTML

받아쓰기 메모장 만들기

회의 시간에 손이 말을 못 따라갈 때, 말하면 글자로 받아 적는 메모장이에요. 받아쓰기 기능은 크롬과 엣지 안에 이미 들어 있어서 버튼만 달면 돼요. 기준은 이렇게 잡으세요. 브라우저 안에서 끝나는 일은 HTML, 내 컴퓨터 파일 수십 개를 만지는 일은 파이썬.

바로 쓰기: 받아쓰기 메모장

대기 중

0자 · 이 브라우저에 자동 저장돼요. 보안 한 마디: 크롬·엣지의 받아쓰기는 목소리를 브라우저 회사 서버로 보내 글자로 바꿔 와요. 회사 기밀 회의나 개인정보가 오가는 자리에서는 쓰지 마세요.

받아쓰기 메모장 화면: 듣는 중 표시와 복사·지우기·멈추기 버튼, 확정된 문장 아래 회색으로 받아쓰는 중인 문장

0준비물: 마이크

노트북은 대부분 마이크가 있어요. 데스크톱은 없는 경우가 많아요. 이어폰 마이크나 웹캠을 꽂으세요. 윈도우 검색창에 "마이크 설정" → 말할 때 입력 막대가 움직이면 준비 끝. 마이크가 없어도 아래 연습장은 가짜 마이크로 해 볼 수 있어요.

1AI에게 세 줄로 요청하기

HTML 파일 하나로, 내가 말하면 글자로 받아 적어주는 메모장을 만들어줘.
[시작] 버튼을 누르면 한국어로 듣고, 받아쓴 글이 화면에 계속 쌓이게 해줘.
설치 없이 파일 하나로, 크롬에서 동작하게 해줘.

"크롬에서"는 꼭 넣으세요. 받아쓰기 기능은 브라우저마다 지원이 달라요. 일부러 짧게 둬서 멈추는 버튼도, 듣고 있다는 표시도 없을 수 있어요. 그게 미션이에요.

2연습장에서 가짜 마이크로 시험하기

AI 화면의 미리보기처럼 이 연습장도 진짜 마이크는 막혀 있어요. 대신 가짜 마이크가 문장을 대신 말해 줘요. 실행 화면에서 [시작]을 누르고 아래 이 문장 말하기를 눌러 보세요. 잠깐 조용히를 누르면 진짜 브라우저처럼 듣기가 끝나요. 진짜 목소리로 쓰려면 아래처럼 파일로 저장해서 크롬으로 여세요.

내 목소리로 쓰려면 (파일로 저장해서 크롬으로)
  1. 코드를 메모장에 붙여넣고 모든 파일, 이름 memo.html, UTF-8로 저장해요.
  2. 저장한 파일을 크롬(또는 엣지)으로 열고 [시작] → 주소창 아래 마이크 사용 창에서 허용.
  3. 실수로 차단을 눌렀다면 주소창 왼쪽 아이콘에서 마이크를 허용으로 바꾸고 F5.

3미션: 회의에서 쓸 물건으로

자동 검사는 가짜 마이크로 문장을 말하고, 조용히 하고, 다시 열어 보면서 판정해요.

  1. 기본: 말하면 글자가 쌓인다

    [시작]을 누르고 말하면 받아쓴 글이 화면에 나타나야 해요.

  2. 듣고 있는지 보이게, 멈출 수 있게

    듣는 중에는 버튼이 바뀌고, 다시 누르면 멈추게. 예시 한 줄: "듣는 중에는 [시작] 버튼이 주황색 [멈추기]로 바뀌고 깜빡이게 해줘. 그 버튼을 다시 누르면 받아쓰기를 멈춰줘."

  3. 말을 멈추면 혼자 꺼지는 문제 ⭐

    잠깐 생각하느라 멈추면 받아쓰기가 혼자 꺼져요. 힌트: 브라우저는 조용해지면 "다 말했구나" 하고 듣기를 끝내요. 내가 [멈추기]를 누르기 전까지는 꺼질 때마다 다시 켜지게 해 달라고 설명해 보세요.

  4. 복사하고, 닫아도 남게

    [복사] 버튼과, 다시 열어도 글이 남아 있게. 힌트: "브라우저에 저장해줘". 다른 컴퓨터로는 따라가지 않아요.

  5. 받아쓰는 중인 글을 회색으로 미리 보기

    확정 안 된 글을 회색으로 먼저 보여 주고, 문장이 끝나면 진짜 글로. 해 보면 회색 글씨가 말하는 도중에 자꾸 바뀌어요. 이유는 아래에 있어요.

  6. 자유

    "다음 줄"이라고 말하면 줄 바꾸기, 문장마다 말한 시각, 글자 수, 파일로 내려받기…

안 될 때 확인할 것

증상원인과 해결
"마이크를 찾을 수 없습니다" · audio-capture컴퓨터에 마이크가 없어요(데스크톱에 흔함). 이어폰 마이크나 웹캠 연결
시작하자마자 꺼지고 not-allowed마이크를 차단했어요. 주소창 왼쪽 아이콘 → 허용 → F5
AI 미리보기에서 반응이 없다미리보기는 마이크가 막혀 있어요. 파일로 저장해서 크롬으로
"지원하지 않는 브라우저"파이어폭스 등은 받아쓰기 기능이 없어요. 크롬이나 엣지로
network 오류받아쓰기는 인터넷이 필요해요. 연결 확인
말해도 아무것도 안 적힌다윈도우가 다른 마이크를 쓰고 있어요. "마이크 설정"에서 입력 장치 확인
몇 문장 뒤 혼자 꺼진다조용하면 브라우저가 듣기를 끝내요. 미션 3

알쓸신잡: 회색 글씨는 왜 자꾸 바뀔까?

받아쓰기 세 단계: 소리를 잘게 썰기, 조각마다 후보 고르기, 문맥으로 문장 고르기. 회의 시각 대신 회의 시작이 선택됨

받아쓰기는 ① 소리를 아주 짧은 조각으로 썰고 ② 조각마다 "ㅅ 같다, ㅈ일 수도" 하고 후보를 세운 뒤 ③ 이어 붙였을 때 가장 말이 되는 문장을 골라요. "회의 시각"과 "회의 시작"은 소리가 거의 같지만, 뒤에 "합니다"가 붙으면 "시작"이 훨씬 자연스럽죠. 뒷말을 들을수록 앞말의 정답이 달라지니까 회색 글씨가 계속 고쳐지는 거예요. 미션의 회색 글씨는 컴퓨터가 고민하는 과정을 그대로 보여 주는 창이에요.

조용하면 꺼지는 경우와, 꺼질 때마다 다시 켜서 끝까지 받아 적는 경우를 비교한 그림

자주 묻는 질문

휴대폰에서도 되나요?

안드로이드 크롬은 대부분 돼요. 아이폰은 브라우저와 버전에 따라 받아쓰기 기능이 없을 수 있어요. 휴대폰이라면 키보드의 마이크 버튼을 쓰는 것도 방법이에요.

받아쓴 글은 어디에 저장되나요?

이 브라우저 안에만 저장돼요. 쓸모노트 서버로는 보내지 않아요. 다만 목소리를 글자로 바꾸는 과정은 브라우저 회사의 서버를 거쳐요.

인터넷 없이도 되나요?

크롬·엣지의 받아쓰기는 인터넷이 필요해요. 끊기면 network 오류가 나요.