라테는말야 1편, 어르신용 이야기 앱의 첫 화면과 가입을 세 번 바꾼 과정

「라테는말야」는 어르신들이 살아온 이야기를 목소리로 남기는 커뮤니티예요. 큰 마이크 버튼을 누르고 말하면 AI가 받아써서 글로 옮기고, 올라간 이야기에는 표지 그림과 낭독이 붙어요. 읽고 듣는 건 누구나 할 수 있고, 이야기를 남기는 건 만 60세 이상만 할 수 있게 했어요.

7월 20일부터 22일까지 Claude Code와 같이 만들었고, 커밋은 32개예요. 화면은 Next.js 16, 로그인과 DB와 음성 파일은 Supabase, 받아쓰기와 낭독은 Gemini를 썼어요. 1편은 앱에 처음 들어온 어르신이 무엇을 보고, 이야기를 남기려는 순간 무엇을 거치는지예요. 녹음부터 표지, 낭독, 숏츠까지는 2편에, 7월 이후 달라진 모습은 3편에 적었어요.

이 글은 7월 22일까지의 작업 기록이고, 스크린샷은 이번에 지금 사이트에서 새로 찍었어요. 그 뒤에 바뀐 화면이 조금 섞여 있어서, 다른 부분은 그때그때 적어 둘게요. 회원 이야기가 보이는 부분은 찍지 않거나 흐리게 가렸어요.

처음 들어오면 보이는 화면

계획서에서 가장 먼저 정한 건 "녹음 버튼은 크게"였어요. 휴대폰 첫 화면에는 "말로 이야기하기"와 "글로 이야기하기" 두 버튼이 화면 폭을 꽉 채우고, 그 아래에 오늘의 질문 카드가 있어요.

하단 바는 세 칸이에요. 홈, 숏츠, 그리고 가운데에 동그랗게 튀어나온 "이야기하기" 마이크 버튼이요. 어느 화면에서든 엄지 한 번이면 녹음으로 갈 수 있게 한 거예요. 오늘의 질문은 관리자 화면에서 바꿀 수 있고, "지금 답하기"를 누르면 글쓰기 첫 화면이 열리면서 같은 질문이 맨 위에 떠요. 무엇을 말할지 막막한 분들이 시작하기 쉽게 하려는 장치예요.

첫 화면 아래쪽 피드에는 정렬 탭과 필터가 있어요.

정렬은 추천, 최신, 인기 세 가지이고 기본은 추천이에요. 추천은 들어올 때마다 순서가 조금씩 바뀌어요. 그 아래로 주제 칩과 "연배로 보기" 칩이 있어서 1940년대생 이야기만 골라 볼 수도 있어요. 같은 시대를 산 사람끼리 모여 읽는 재미를 생각한 필터예요.

주제 둘러보기

위쪽 메뉴의 "주제 둘러보기"는 주제 12개를 카드로 보여 줘요.

계획서에 적힌 주제 후보는 15개였는데, 앱에는 12개를 넣었어요. 첫 직장, 사회 변화, 우리 세대가 잘못했던 일 세 개가 빠졌고, 학창 시절은 학교로, 요즘 세상에 대한 생각은 요즘 세상 이야기로 이름을 줄였어요. "요즘 세상 이야기"가 남아 있는 게 이 서비스다운 점이에요. 계획서는 같은 시대를 산 회원들이 공감하거나 반박하며 대화를 이어 가는 것 자체를 목적으로 적어 두었어요.

가입은 세 번 바꿨어요

이틀 동안 가장 많이 바뀐 곳이 가입이에요.

처음 버전은 화면이 여섯 장이었어요. 소개, 이메일 입력, 메일로 받은 6자리 코드 입력, 프로필, 약관 동의, 완료. 가입을 마쳐도 관리자가 승인해야 글을 쓸 수 있었어요. 계획서대로였지만, 어르신이 여섯 장을 넘기고도 기다려야 하는 구조였어요.

7월 22일 새벽 1시 56분에 먼저 관문을 줄였어요. 새 회원은 바로 승인되게 바꾸고, 화면은 소개, 계정, 프로필 세 장으로, 약관 동의 세 개는 하나로 합쳤어요. 그런데 메일에 6자리 코드가 안 들어갔어요. Supabase 무료 요금제의 기본 메일로는 템플릿을 고칠 수 없어서 코드 숫자를 넣을 자리가 없었어요.

17분 뒤에 링크를 누르면 로그인되는 매직링크로 바꿨어요. 이번엔 메일 속 링크가 제 컴퓨터 주소로 가서 설정을 고쳤고, 그다음엔 무료 요금제의 시간당 메일 한도에 걸려 429 오류가 났어요.

아침 9시 25분에 메일을 아예 뺐어요. 확인 메일 없이 가입하자마자 로그인되게 하고, 가입은 이메일과 비밀번호로 바꿨어요. 지금 가입 화면에 보이는 세 단계가 이 버전이에요.

별명과 태어난 해는 가입 요청에 같이 실어 보내고, DB 쪽에서 프로필을 만들어요. 화면에서 프로필을 따로 저장하는 단계가 없으니, 가입 도중에 끊겨도 프로필 없는 계정이 남지 않아요.

await supabase.auth.signUp({
  email,
  password,
  options: { data: { display_name: nickname.trim(), birth_year: birthYear } },
});

잃은 것도 있어요. 메일을 안 쓰니 비밀번호를 잊으면 되찾을 방법이 마땅치 않아요.

게스트 우선, 쓰려는 순간에 두 가지만

비밀번호 방식으로 바꾸고 26분 뒤에 순서를 통째로 뒤집었어요. 이메일과 비밀번호를 만드는 것부터가 어르신들께는 문턱이라서요. 읽고 듣는 건 원래처럼 아무것도 묻지 않고, 처음으로 글을 쓰거나 댓글을 달거나 공감을 누르는 순간에만 이 창을 띄워요.

묻는 건 태어난 해, 불러드릴 이름, 이용수칙 동의 세 가지예요. 사진에 1, 2, 3으로 표시한 곳이에요. 창 맨 아래에는 "이 기기에 임시로 저장돼요. 나중에 내 정보에서 계정을 만들면 다른 기기에서도 이어서 쓸 수 있어요"라고 적었어요. "이야기 시작하기"를 누르면 Supabase의 익명 로그인으로 계정이 바로 만들어져요. 컴퓨터에서는 같은 창이 화면 가운데에 떠요.

태어난 해 확인도 이 창에서 해요. 1966년보다 늦게 태어났다고 적으면 계정을 만들지 않고 안내만 띄워요.

"안 돼요"가 아니라 "읽기와 듣기는 누구나 된다"로 끝나게 한 문장이에요. 밑줄 친 둘째 줄이 그 부분이에요. 자녀나 손주가 들어와서 눌러 볼 수도 있으니까요.

체크 칸의 "커뮤니티 이용수칙"은 새 창으로 열려요. 서로 존중하기, 삼가 줄 내용, 신고와 조치를 짧게 적은 페이지예요.

세 칸을 채우고 시작하면 바로 글쓰기 첫 화면으로 넘어가요.

위 두 장은 테스트용 이름으로 채워서 찍었어요.

이 창은 앱 전체에 한 번만 깔아 두고, 필요한 곳에서 부르기만 하면 되게 만들었어요. 하단 바의 이야기하기, 댓글 쓰기, 공감과 반박과 저장 버튼이 모두 이 한 줄로 시작해요.

if (!(await ensureContributor())) return;

세션이 있으면 바로 통과하고, 없으면 창을 띄운 뒤 사용자가 시작하거나 닫을 때까지 기다려요. 글쓰기 화면에서 창을 닫으면 홈으로 돌아가요.

나중에 정식 계정을 만들고 싶으면 내 정보에서 이메일과 비밀번호를 붙이면 돼요. 새 계정을 만드는 게 아니라 지금 익명 계정에 이메일을 더하는 방식이라, 그동안 쓴 이야기와 댓글이 같은 사람 것으로 이어져요.

서비스 소개와 약관 페이지

화면 아래와 가입 동의 칸이 서비스 소개, 이용 안내, 개인정보 처리방침, 이용약관으로 링크하고 있었는데, 정작 페이지가 없어서 누르면 404가 났어요. 7월 22일 새벽 2시 26분에 네 페이지를 한꺼번에 채웠어요.

"말씀하시면 글로 옮겨 드리고, 이야기에 어울리는 표지 이미지와 낭독까지 만들어 드려요", "마이크를 누르고 편하게 이야기하면 글과 음성으로 남아요"처럼 기능 설명도 전부 어르신께 말하듯 썼어요. 형광펜 칠한 두 곳이에요.

써 보니 좋은 점

• 처음 온 사람이 이야기를 남기기까지 묻는 게 세 가지뿐이에요. 이메일도 비밀번호도 없이 태어난 해와 이름만 적으면 바로 녹음 화면이에요.
• 글씨와 버튼이 커요. 휴대폰에서 주요 버튼은 화면 폭을 꽉 채우고, 마이크 버튼은 하단 바 가운데에 튀어나와 있어서 찾기 쉬워요.
• 만 60세 기준에 걸린 사람에게도 "읽기와 듣기는 된다"로 끝나서 쫓겨나는 느낌이 덜해요.
• 읽기와 듣기는 처음부터 로그인 없이 되게 해 둬서, 가입을 세 번 바꾸는 동안에도 그쪽은 건드릴 일이 없었어요.

아쉬운 점

• 태어난 해는 본인이 적는 값을 그대로 믿어요. 확인할 방법은 없어요.
• 게스트 계정은 그 기기에 묶여 있어요. 휴대폰을 바꾸거나 브라우저 기록을 지우기 전에 내 정보에서 계정을 만들어야 한다는 걸 어르신이 알기는 어려워요.
• 비밀번호 찾기가 없어요. 메일 발송을 뺀 대가예요.
• 휴대폰에서 "최신 이야기", "인기 이야기" 탭 글자가 두 줄로 접혀요. 위 필터 사진에서 보이는 그대로예요.
• 7월 22일 기준으로 숏츠 화면의 공감과 댓글은 이 창을 안 쓰고, 예전처럼 로그인하라는 안내를 띄워요.

지금 상태와 남은 것

7월 22일 기준으로 가입과 로그인 쪽에 남은 건 이래요.

• 비밀번호 찾기
• 휴대전화 문자 인증 (문자 발송 업체 연결이 필요해요)
• 요청 빈도 제한. 누가 AI 기능을 반복해서 불러도 막는 장치가 없어요.
• 숏츠 화면에도 게스트 창 붙이기

개발은 7월 22일 뒤로도 이어졌어요. 지금 로그인 화면에는 카카오와 구글 로그인이 붙어 있고, 7월 이후 달라진 것들은 3편에 지금 사이트 화면으로 적었어요.

녹음이 글이 되고, 표지와 낭독이 붙고, 숏츠로 넘겨 듣기까지는 2편에 이어서 적었어요.