이 글은 룸톤 Roomtone 시리즈의 18번째 기록입니다. (총 22개)

오늘 한 일

  • 로그인을 여러 번 틀리면 한동안 잠그게 했다. 운영에 올려 실제로 잠기는 것까지 확인했다.
    • 가입하지 않은 이메일도 똑같이 잠근다. 잠김 여부로 가입 여부를 알아낼 수 없게.
    • 운영자 계정 잠금은 사람이 풀어 주는 방식 대신 시간이 지나면 저절로 풀리게 골랐다.
    • 인증번호 메일로 비밀번호를 다시 정하는 기능은 출시 직전으로 미뤘다.
  • 남은 출시 작업이 한눈에 안 들어와서 체크리스트 페이지로 정리했다. 페이지에서 바로 체크하고 저장한다.
  • 앱 화면을 새로 설계했다. Design 기능으로 보통의 음악 앱을 참고한 시안을 만들어 보라고 했고, 웹 판매 페이지와 같은 황동색으로 맞춘 안을 골랐다. 시안이 마음에 들어 그대로 앱에 옮겼다.
    • 재생 바는 셸 하나에만 둔다. 폰은 탭 바 바로 위에 한 줄짜리 재생 바, 누르면 아래에서 전체 재생 화면이 올라온다.
    • 매장 태블릿·데스크톱처럼 넓은 화면은 왼쪽에 탭, 오른쪽에 재생 패널을 늘 띄운다. 손님 앞에서 탭을 오가지 않고 조작하게.
    • 홈 첫 줄은 「지금 스케줄」 카드다. 매장 앱이라 지금 무엇이 나오고 언제 무엇으로 바뀌는지가 가장 먼저다.
    • 재생목록 카드 자켓은 곡 네 개를 2×2로 붙였다. 자동 편성 재생목록끼리 같은 곡이 뽑혀 자켓이 똑같아 보여서, 재생목록마다 서로 다른 네 곡을 늘 같게 고른다.
    • 「곡」 탭을 「둘러보기」로 바꿨다. 검색, 분위기 칩, 장르 타일, 곡마다 담기.
    • 스케줄 첫 화면은 하루 타임라인이고, 요일 격자는 편집할 때만 연다.
  • 새 화면을 쓰면서 짚은 것을 이어서 고쳤다.
    • 넓은 화면의 재생 패널에서 다음 곡 목록이 남는 높이만큼 보이게 했다. 맨 위에는 지금 곡을 넣었다.
    • 넓은 화면의 재생목록 상세를 두 칸으로 나눴다. 왼쪽에 자켓과 재생·셔플·담기, 오른쪽에 곡 목록과 좋아요 하트.
    • 「담기」는 시안에 버튼만 있었는데, 재생목록의 곡 전부를 내 재생목록에 넣는 동작으로 정했다.
    • 재생목록 버튼에서 「재생」·「셔플」·「일시정지」 글자를 뺐다. 아이콘으로 충분했다.
    • 오래 미뤄 둔 「앱 화면 더 다듬기」 세 가지(카드·가로 스크롤, 자켓 4분할, 셔플·반복 표시)가 이 개편에 흡수됐다. 폰은 옆으로 넘기는 선반, 자켓은 2×2, 셔플·반복은 아이콘 상태로 보인다.
    • 지금 곡은 글자 색만 바뀌어서 잘 안 보였다. 줄 전체 바탕을 칠하고 왼쪽 막대와 자켓 위 재생 표시를 더했다.
    • 다른 기기에서 재생 중일 때의 버튼을 「가져오기」에서 「이 기기에서 재생」으로 바꿨다. 무엇을 가져오는지 한 번 더 생각하게 만드는 말보다 누르면 일어나는 일을 그대로 적는 게 낫다.
  • 두 기기 동시 재생 제한을 폰과 윈도우 앱으로 확인했다. 나중에 튼 쪽에 안내가 뜨고 「이 기기에서 재생」으로 넘겨받는 것까지 예상대로 동작했다.
  • 재생 시작과 홈·재생목록 화면이 느린 것을 줄였다. 운영과 폰에서 구간별로 재고 원인마다 고쳤다(아래 막힌 부분).

막힌 부분

  • 넓은 화면에서 오른쪽 재생 패널이 위에 붙지 않고 세로 가운데에 떠 있었다.
    • 원인: 가로로 늘어놓는 배치의 기본 정렬이 가운데라 패널이 내용 높이만큼만 차지했다.
    • 해결: 패널이 창 높이를 채우게 했다.
  • 좋아요를 누른 적이 없는데 「좋아요 표시한 곡 3곡」이 떠 있었다.
    • 원인: 좋아요는 계정이 아니라 기기에만 저장된다. 예전 테스트 때 눌린 게 남았고, 그중엔 이제 없는 곡 번호도 섞여 있었다.
    • 해결: 앱을 켤 때 지금 목록에 없는 곡의 좋아요를 걷어낸다. 남은 좋아요는 직접 끈다.
  • 폰에서 둘러보기에 「unauthorized」 글자가 떴다.
    • 원인: 전에 로컬 개발 서버로 테스트하며 받은 로그인이 남아 운영 서버가 거절한 것으로 본다. 그런데 앱은 로그인 화면으로 보내지 않고 오류 글자만 띄웠다.
    • 해결: 서버가 로그인을 거절하면 로그인 화면으로 보낸다. 배포본은 운영 서버에서 받은 로그인만 이어 쓴다.
  • 두 기기로 동시에 틀었는데 다른 기기 안내가 뜨지 않았다.
    • 원인: 동시 재생 제한은 전곡을 듣는 구독 회원만 대상이다. 30초 미리듣기는 새어도 손해가 없어 일부러 뺐다. 게다가 윈도우 앱은 체험 계정이었다.
    • 해결: 테스트 회원에 3시간 뒤 저절로 끝나는 구독을 넣고 두 기기를 같은 회원으로 로그인해 확인했다. 지우는 걸 깜빡해도 운영에 공짜 구독이 남지 않는다.
  • 배포하려는데 wrangler가 새 프로젝트를 만들겠냐고 물었다.
    • 원인: 설정 파일의 프로젝트 이름(roomtone)은 이미 남이 쓰는 이름이라 운영은 roomtone-bgm으로 만들었는데, 배포 스크립트가 이름을 넘기지 않았다.
    • 해결: 만들지 않고 취소한 뒤 배포 스크립트에 운영 프로젝트 이름을 넣었다.

재생이 느렸다 — 어디서 기다리는지부터 쟀다

재생 버튼을 누르면 한참 뒤에 소리가 났다. 먼저 운영 서버를 구간별로 재고, 서버에서 안 보이는 부분은 폰 앱에 구간별 시간을 기록하는 임시 코드를 넣어 쟀다.

구간처음고친 뒤
곡 재생 주소 받기(서버)0.72초0.3초 안팎
곡 파일 첫 바이트0.63~1.0초파일 위치 조회를 없애 줄임
폰에서 누름 → 소리(첫 곡)2.15초체감으로 확실히 빨라짐
폰에서 누름 → 소리(이후)1.30초체감으로 확실히 빨라짐

원인은 코드가 지저분해서가 아니라 기다리는 횟수였다.

  • 서버가 곡 주소를 줄 때 데이터베이스 조회·기록 여섯 번을 하나씩 기다렸다. 읽기는 한 번에 묶고, 재생 횟수 기록은 응답을 보낸 뒤로 미뤘다.
  • 곡 파일을 줄 때마다 데이터베이스에서 파일 위치를 다시 찾았다. 위치를 재생 주소에 싣고 서명해 조회를 없앴다. 주소를 고치면 서명이 깨져 거절된다.
  • 데스크톱과 미리듣기는 서버가 곡 전체를 받아 다 풀고 나서야 보내기 시작했다. 받는 대로 조금씩 풀어 흘린다. 새 방식으로 푼 파일이 옛 방식과 바이트까지 같은지 로컬에서 대조했다.
  • 앱이 요청마다 새로 보안 연결을 열어 0.3초씩 더 썼다. 연결 하나를 이어 쓰고, 첫 곡에만 걸리던 복호화 키 받기는 앱을 켤 때 미리 한다.
  • 재생목록 상세에서 틀면 이미 받은 곡 목록을 서버에서 또 받았다. 받아 둔 목록으로 바로 시작한다.

체감을 가장 크게 바꾼 건 기다리는 동안의 모습이었다. 누른 뒤 1초 넘게 옛 곡이 계속 나오고 화면도 그대로라 안 눌린 것처럼 보였다. 누르는 즉시 옛 곡을 멈추고 새 곡 제목과 로딩 표시를 띄운다.

  • 남은 수단: 다음 곡 주소를 미리 받아 두면 곡 넘김이 더 빨라진다. 다만 넘긴 곡까지 재생 횟수에 잡히지 않게 기록을 따로 떼야 해서 미뤘다.

홈이 4~5초 걸려 떴다

재생목록 목록 하나가 2.3초였다. 서버가 재생목록 일곱 개마다 곡 수와 자켓을 하나씩 조회해 열네 번 왕복했다. 앱도 내 재생목록 → 추천 → 전체 곡 700개 → 스케줄 → 매장 이름을 하나 끝나면 다음 식으로 불렀다. 전체 곡은 좋아요 정리에만 쓰는데 홈을 열 때마다 받고 있었다.

  • 해결: 서버는 재생목록별 조회를 한 번에 묶었다(바꾸기 전과 응답이 같은지 대조). 앱은 서로 기다릴 이유가 없는 요청을 동시에 보내고, 좋아요 정리는 앱을 켠 뒤 한 번만 화면을 막지 않고 한다. 재생목록을 누르면 카드에 있던 제목·자켓·곡 수를 먼저 띄우고 곡 목록만 뒤따라 채운다.

다음에 할 일

  • 코드 정리·컴포넌트화 점검 — 중복된 이름 입력 창, 개편 전 스타일인 관리자 화면, 1,000줄 넘는 스케줄 화면부터. 점검 목록을 먼저 보고 고른다
  • 폰의 릴리스 앱으로 운영 한 바퀴 — 가입, 30초 미리듣기, 회원 탈퇴
  • 플레이 업로드 키 만들기
  • 플레이 콘솔에 앱을 만들고 내부 테스트에 올리기
  • 구독 상품(roomtone_monthly, 월 10,000원)과 라이선스 테스터 등록
  • 플레이 결제 연동 설정(서비스 계정·실시간 알림) 뒤 실결제 시험
  • Creem 구독 상품 등록과 결제 비밀값 설정 — 결제 화면에 자동 갱신·무환불 다시 고지
  • 앱 아이콘(아직 기본 아이콘)·스토어 그래픽·스크린샷
  • 로그스톤 샵의 개인정보처리방침·환불 조항 갱신 회신을 받아 웹 페이지 문구 맞추기
  • 인증번호 메일로 비밀번호 다시 정하기 — 출시 직전, 발송 서비스 고르기부터
  • 재생목록 상세 응답 가볍게 — 목록에 안 쓰는 긴 필드 빼기(관리자 화면이 쓰는지 확인 후)
  • 다음 곡 주소 미리 받기 검토 — 재생 횟수 기록을 떼는 것과 같이
  • 플레이 외부 결제 프로그램 등록 뒤 앱→웹 결제 링크 켜기
  • 안드로이드 패키지에 딸려 오는 윈도우용 재생 엔진 빼기 검토(다운로드 6MB 남짓)
  • 반입을 검수 콘솔로 통째로 옮기기 — 파일을 콘솔에 끌어다 놓고 프롬프트도 콘솔에서 입력(프롬프트 엑셀 제거), 그다음 분류·변환·업로드를 버튼 하나로(반입 배치 파일 은퇴)
  • 검수 대기 15곡 마저 듣기
  • 매장 안내방송 — 지정 시각에 한 번 끼어들고 복귀. 음원은 서버에 올리지 않고 기기의 로컬 파일을 고른다
  • 보컬 검사를 여러 구간으로 넓히고 점수와 위치를 저장하기
  • 검수 콘솔 끝잘림 18곡 페이드 처리
  • 곡 제목을 한국어·영어 두 가지로
  • 휴지통 30일 자동 정리 붙일지 검토
  • 넓힌 키워드로 기존 곡 무드 백필
  • 자동 분류가 안 된 5곡 에너지를 귀로 확정

Series: 룸톤 Roomtone


Suggested Posts