라테는말야 2편, 녹음 버튼을 누른 뒤 글과 표지와 낭독이 되기까지

1편에서는 첫 화면과 가입, 가입 없이 바로 쓰게 한 게스트 창을 보여 드렸어요. 2편은 이 앱의 본론인 목소리 쪽이에요. 녹음 버튼을 누른 뒤 이야기가 글이 되고, 표지 그림과 낭독이 붙고, 다른 사람이 숏츠로 넘겨 듣기까지를 화면 순서대로 따라가 볼게요.

스크린샷은 지금 사이트에서 테스트용 이름으로 새로 찍었어요. 회원 이야기가 보이는 화면은 글을 흐리게 가렸어요. 7월 22일 이후에 바뀐 화면도 섞여 있어서, 다른 부분은 따로 적었어요.

말로 할지 글로 할지 고르기

하단 바의 마이크나 첫 화면의 "지금 답하기"를 누르면 이 화면이 나와요.

맨 위에 오늘의 질문이 있고, 아래에 두 갈래가 있어요. "말로 이야기하기"에는 "타자가 어려워도 괜찮아요"라고 적었어요. 이 앱을 쓰실 분들 중에는 휴대폰 자판이 제일 큰 벽인 분이 많을 거라서, 말로 하는 쪽을 위에 두고 색도 진하게 칠했어요.

녹음

말로 이야기하기를 누르면 녹음 화면이에요. 가운데 지름 96픽셀짜리 마이크 버튼 하나뿐이에요.

누르면 브라우저가 마이크 권한을 물어요. 녹음 중에는 빨간 점이 깜빡이고 "녹음 중" 글자와 큰 시간 표시가 나와요(맨 위 사진). 최대 5분이 되면 저절로 멈춰요. 녹음이 끝나면 바로 넘어가지 않고 반드시 한 번 들어 보게 했어요. 계획서에 있던 규칙이에요.

1번 재생으로 먼저 들어 보고, 괜찮으면 2번으로 넘어가요.

마이크 권한을 거부하면 이렇게 나와요.

권한 오류가 나도, 브라우저가 녹음을 지원하지 않아도, 항상 "글로 작성하기"로 빠질 길을 같이 띄워요. 녹음 화면에서 막혀서 앱을 닫는 일은 없게 하고 싶었어요.

녹음 형식은 브라우저마다 달라요. 크롬은 webm, 사파리는 mp4를 만들어서, 되는 형식을 순서대로 물어보고 골라요. 원본은 Supabase의 비공개 저장소에 올라가고, 업로드 중에는 진행 막대와 취소 버튼이 떠요.

AI가 받아써요

"이 녹음으로 계속하기"를 누르면 두 가지가 동시에 시작돼요. 원본 파일 올리기, 그리고 받아쓰기요.

처음엔 브라우저에 들어 있는 음성 인식을 썼는데, 아이폰이나 앱 안에서 열리는 브라우저에서 불안정했어요. 7월 22일 오전에 서버에서 Gemini가 받아쓰는 방식으로 바꿨어요. 브라우저마다 다른 녹음 형식은 보내기 전에 브라우저 안에서 16kHz 모노 WAV 하나로 바꿔서 맞춰요. 서버에 보내는 지시문은 이래요.

이 오디오는 한국어 음성입니다. 말한 내용을 그대로 받아쓰기 해주세요.
- 실제로 들리는 말만 옮기고, 없는 내용을 지어내지 마세요.
- 자연스러운 문장부호와 띄어쓰기 정도만 적용합니다.
- 받아쓴 텍스트만 출력하고 다른 설명이나 머리말은 넣지 마세요.
- 아무 말도 들리지 않으면 빈 문자열을 출력하세요.

마지막 줄은 일부러 넣었어요. 이 말이 없으면 조용한 녹음에도 모델이 뭔가를 지어내 채울 수 있어요. 정확도는 반대 방향으로 확인했어요. 한국어 문장을 AI 목소리로 읽혀서 음성을 만들고, 그걸 다시 받아쓰기에 넣어 원래 문장과 비교했어요.

받아쓰기가 실패해도 녹음은 버리지 않아요. 글 칸만 비워서 넘기고, 직접 적을 수 있게 했어요. 그런데 그때 뜨는 문구가 문제예요.

이 사진은 받아쓰기 요청을 일부러 막고 찍었어요. 서버 쪽 받아쓰기가 실패했는데도 "이 브라우저에서는 지원되지 않아요, 크롬을 권장해요"라고 나와요. 브라우저 음성 인식 시절에 쓴 문구가 지금 사이트에도 그대로 남아 있어요. 크롬에서 찍은 화면인데 크롬을 권하고 있어요. 형광펜 칠한 곳이에요.

AI로 다듬기

받아쓴 글은 말 그대로라 "어, 그러니까, 인제" 같은 말이 많아요. 받아쓰기가 성공하면 편집 화면에 "말씀을 글로 옮겼어요. AI로 읽기 좋게 다듬어 볼까요?"가 뜨고, 누르면 Gemini가 두 가지 버전과 제목 제안을 한 번에 돌려줘요. 화면에는 "말한 그대로", "맞춤법만", "읽기 좋게", "직접 수정" 칩 네 개가 뜨고, 누를 때마다 본문이 그 버전으로 바뀌어요. 이 단계는 실제 받아쓰기와 AI 호출이 있어야 해서 이번에는 찍지 못했어요.

다듬기 지시문에는 계획서의 "AI가 해서는 안 되는 것"을 거의 그대로 옮겼어요. 말하지 않은 사실 추가 금지, 날짜와 금액과 장소와 인물 관계 변경 금지, 말투와 개성 지우기 금지. 그리고 "세대 갈등 표현을 삭제하거나 순화하지 말 것"이요. AI가 "요즘 젊은 것들은"을 부드럽게 바꿔 버리면 그 사람의 이야기가 아니게 되니까요. 원문과 다듬은 글은 따로 저장해서 상세 화면에서 원문도 볼 수 있어요.

직접 글쓰기를 고르면 이 화면이에요.

7월 22일 버전과 다른 점이 있어요. 그때는 제목 칸이 있었고, 녹음한 글은 "음성과 글 함께 공개", "글만 공개", "음성 없이 글만" 세 가지 중에 골랐어요. 지금 사이트에는 제목 칸 대신 "제목은 이야기에서 알아서 뽑아 드려요"라는 안내가 있고, 입력 칸 바로 아래에 "말로 입력하기" 버튼이 붙어 있어요.

표지 그림

이야기가 올라가면 그 내용으로 책 표지 같은 그림을 그려요. Gemini가 이야기를 읽고 그림용 영어 프롬프트를 한 줄 쓰고, 그 프롬프트를 이미지 생성 API에 작업으로 넣어요. 따뜻한 수채화나 유화 느낌, 이야기의 시대 분위기, 글자와 가까운 얼굴은 넣지 말 것이 지시예요.

그림은 시간이 걸려서 바로 나오지 않아요. 작업 번호만 받아 두고, 상세 화면이 4초마다 진행을 물어보다가 끝나면 이미지를 저장하고 화면을 새로 고쳐요. 그리는 동안에는 표지 자리에 "이야기로 표지를 그리고 있어요…"가 떠요.

위 표지는 분위기는 잘 나왔는데, 간판에 뭉개진 한글 같은 글자가 잔뜩 들어가 있어요. 빨간 동그라미 친 양쪽 간판이 특히 그래요. 글자 없는 그림을 원했던 거라 아쉬운 부분이에요.

낭독, 들을 때만 만들어요

녹음 없이 글로만 쓴 이야기에는 AI 낭독을 붙였어요. 방식은 하루 사이에 네 번 바뀌었어요.

1. 7월 21일 저녁: 브라우저에 들어 있는 음성 합성. 기계음이었어요.
2. 38분 뒤: Gemini 음성 합성으로 바꾸고, 작성자가 상세 화면을 열면 낭독 파일을 미리 만들었어요.
3. 26분 뒤: "천천히"라는 지시를 빼서 속도를 자연스럽게 하고, 여성과 남성 목소리를 고를 수 있게 했어요.
4. 7월 22일 오후: 미리 만들지 않고, 누군가 "낭독 듣기"를 처음 누를 때 한 번만 만들게 바꿨어요.

마지막으로 바꾼 이유는 비용이에요. 음성 합성은 만들어진 오디오 양으로 비용이 계산돼서, 모든 글을 미리 읽혀 두면 아무도 안 듣는 글에도 비용이 나가요. 한 번 만든 파일은 계속 쓰니 실제로 들린 글만큼만 들어요. 처음 누른 사람은 "낭독을 만들고 있어요… 처음 한 번만 잠깐 걸려요"와 함께 경과 초를 보며 기다려요. 두 사람이 동시에 눌러도 한 번만 만들어지게, DB에서 상태가 "없음"이나 "실패"인 글만 "생성 중"으로 바꾸는 한 문장으로 잠금을 걸었어요.

상세 화면 아래에는 공감과 반박, 댓글이 있어요.

"공감"과 "반박"이라는 버튼 이름은 계획서에서 그대로 가져왔어요. 계획서는 회원끼리의 의견 차이와 반박을 커뮤니티를 살리는 요소로 봤어요. 댓글도 "비슷해요", "조금 달라요", "반박해요", "궁금해요" 중 하나를 붙여 남길 수 있고, 댓글 역시 목소리로 남길 수 있어요.

숏츠

첫 화면에는 "이야기 숏츠로 감상하기" 띠가 있어요.

누르면 표지 그림을 배경으로 이야기를 목소리로 틀어 주는 세로 전체화면이 열려요. 위로 넘기면 다음 이야기로 가요.

브라우저는 사용자가 한 번 누르기 전에는 소리를 틀지 못하게 해서, 첫 화면에서 재생을 한 번 누르면 그다음부터는 넘길 때마다 저절로 재생돼요. 오디오가 끝나면 다음 이야기로 알아서 넘어가요. 처음엔 낭독 파일이 없는 글을 브라우저 기계음으로 읽었는데, 7월 22일에 숏츠 목록을 "표지가 있고 저장된 오디오가 있는 글"로 좁혔어요. 넘길 때마다 기다리거나 기계음을 듣게 하지 않으려고요. 같은 날 왼쪽 위의 "3 / 20" 같은 개수 표시는 끝이 정해진 느낌을 줘서 지웠고, 긴 글은 6줄까지만 보여 주고 "전체 이야기 보기" 링크를 달았어요.

배포 뒤 조용히 멈춰 있던 AI 기능

나중에 알게 된 게 있어요. 배포된 사이트에서 Gemini를 쓰는 기능이 전부 실패하고 있었어요. 받아쓰기, 글 다듬기, 표지 프롬프트, 낭독이요. 여러 곳에서 같이 쓰던 Gemini 키에 접속 IP 제한이 걸려 있었는데, Vercel 서버는 나가는 IP가 고정돼 있지 않아서 Google이 거절했어요.

오류 화면이 없었던 건 사용자를 막지 않으려고 넣은 대비책들 때문이에요. 받아쓰기는 빈칸으로 넘어가서 위의 "이 브라우저에서는 지원되지 않아요"가 떴고, 표지는 프롬프트 만들기가 실패하면 기본 수채화 프롬프트로 그려져서 그림은 나왔어요. 낭독은 "다시 시도" 버튼만, 글 다듬기는 "잠시 후 다시 시도해 주세요"만 떴어요. 하나하나는 친절한 처리였는데, 한꺼번에 실패하니 아무 신호도 없었어요.

이 앱만 쓰는 IP 제한 없는 새 키를 만들어서 해결했어요. 새 키에서는 원래 쓰던 모델 이름이 "새 사용자에게는 더 이상 제공되지 않는다"며 404를 내서, 글 쪽과 낭독 쪽 모델 이름도 환경변수로 바꿔 지정했어요.

써 보니 좋은 점

• 녹음 화면에 버튼이 하나예요. 누르고, 말하고, 끝내고, 들어 보는 순서가 화면마다 하나씩이라 헷갈릴 게 없어요.
• 어느 단계에서 막혀도 "글로 작성하기"로 빠질 수 있어요.
• 표지와 낭독이 저절로 붙어서, 녹음 한 번이 숏츠에서 넘겨 들을 수 있는 이야기 한 편이 돼요.
• 낭독을 들을 때만 만드니, 글이 늘어도 비용이 글 수만큼 늘지 않아요.

아쉬운 점

• 받아쓰기 실패 문구가 여전히 브라우저 탓을 해요. 크롬에서도 크롬을 권해요.
• 표지에 뭉개진 글자가 들어가는 경우가 있어요.
• 긴 녹음을 확인하지 못했어요. 16kHz 모노 WAV는 1초에 32KB라 5분이면 약 9.6MB인데, Vercel 함수가 받는 요청은 4.5MB까지라서 계산상 2분 20초쯤 넘으면 서버에 닿기 전에 막힐 수 있어요.
• 낭독 생성 중에 서버가 60초 제한으로 끊기면 상태가 "생성 중"으로 남고, 그 글은 다시 눌러도 새로 만들지 않아요.
• AI 기능을 반복해서 불러도 막는 장치가 없어요.

지금 상태와 남은 것

7월 22일 기준으로 목소리 쪽에 남은 일은 이래요.

• 받아쓰기 실패 문구를 서버 실패에 맞게 고치기
• 긴 녹음을 압축된 원본으로 보내거나 나눠 보내기
• "생성 중"에 멈춘 낭독을 되돌리는 처리
• AI 기능 호출 빈도 제한
• 음성 댓글에 대한 음성 답글, 새 질문이 올라왔을 때 모두에게 보내는 알림

개발은 7월 22일 뒤로도 이어지고 있어요. 그 뒤로 달라지는 것들은 3편에서 이어서 적을게요.

가입과 게스트 흐름 쪽 이야기는 1편에 있어요.