글 읽어 주는 페이지 만들기

출근길 지하철, 설거지하는 손. 눈이 바쁠 때는 귀로 들으면 돼요. 목소리는 윈도우와 브라우저 안에 이미 들어 있어서 따로 받을 게 없어요.

1AI에게 세 줄로 요청하기

HTML 파일 하나로, 붙여넣은 글을 소리 내어 읽어주는 페이지를 만들어줘.
글을 넣는 칸과 [읽기] 버튼만 있으면 돼. 한국어로 읽어줘.
인터넷 연결이나 설치 없이 파일 하나로 동작하게 해줘.

일부러 짧게 뒀어요. 멈추는 버튼도, 목소리 고르는 칸도 없어서 한 번 읽기 시작하면 끝까지 들어야 할 수도 있어요. 그 불편함이 오늘의 출발점이에요.

2연습장에서 가짜 스피커로 시험하기

연습장에서는 소리 대신 가짜 스피커가 무엇을, 어떤 목소리와 속도로 읽었는지 글자로 보여 줘요. 목소리 목록도 실제 크롬처럼 조금 늦게 불러와져요. 진짜 소리로 들으려면 파일로 저장해서 여세요.

3미션: 출근길에 쓸 물건으로

1. 기본: [읽기]를 누르면 한국어로 읽는다

   글을 넣고 [읽기]를 누르면 소리가 나와야 해요.

2. 멈추고, 쉬었다가, 이어서

   읽다가 전화가 오면? 예시 한 줄: "읽는 중에 멈출 수 있게 [일시정지]와 [멈춤] 버튼을 추가해줘. 일시정지했다가 다시 누르면 멈춘 곳부터 이어서 읽어줘."

3. 목소리 고르기

   고르는 칸을 만들고, 같은 파일을 크롬과 엣지에서 열어 목록을 비교해 보세요. 힌트: 한국어 목소리만 보이게 해 달라고 하면 고르기 편해요.

4. 속도 조절

   출근길엔 빠르게, 공부할 땐 천천히. 힌트: "0.6배부터 2배까지", "지금 몇 배인지 숫자로"처럼 범위와 표시 방법까지 말하세요.

5. 지금 읽는 문장에 형광펜 ⭐

   오늘의 핵심. 힌트 한 줄: 글을 문장 단위로 나눠서 한 문장씩 차례로 읽게 하면 지금 몇 번째 문장인지 알 수 있어요. 덤으로 "멈춘 곳부터 이어서"도 정확해져요.

6. 자유

   "다 읽었습니다" 알림, 닫아도 글이 남게, 글자 수와 예상 시간, 어두운 화면…

안 될 때 확인할 것

알쓸신잡: 컴퓨터는 '같이'를 어떻게 [가치]로 읽을까?

글자를 소리로 바꾸는 기술을 TTS(Text To Speech)라고 해요. ① 글자를 발음으로 바꾸고("같이 읽는 국물" → [가치 잉는 궁물]) ② 숫자와 기호를 풀고("3시"는 [세 시], "3층"은 [삼 층]) ③ 높낮이를 붙여 소리로 만들어요. 물음표면 끝을 올리고 마침표면 내리죠. 아래 칸에 문장을 넣고 어떻게 읽는지 직접 들어 보세요.

자주 묻는 질문