Takafumi Horiuchi

Practice Log n Share

매일의 음악 연습을 기록하고 공유하는 앱

기록 화면. 위에는 연습 기록 격자, 아래에는 오늘의 막대(총 54분)와 카테고리 카드가 있다. ‘곡 연습’은 27분을 넘겨 측정 중이며 밝은 색과 흰 테두리로 표시된다. 공유 화면. 9월 17일 레슨일부터 24일까지 총 4시간 38분을 집계하고, 카테고리별 막대그래프와 가로 스크롤 없이 모든 카테고리를 볼 수 있는 일별 표를 표시한다.
이 앱은 두 화면으로 구성된다. 웹 데모에서 사용해 볼 수 있다.

1. 개요

악기를 든 채 한 번의 탭으로 연습 시간을 기록하고, 레슨에서 선생님에게 보여 주는 iPhone 앱. 기록과 공유라는 두 화면을 통해 일상의 연습을 레슨의 대화로 이어 준다.

문제를 정의하고 UX와 UI를 설계했으며, iPhone에서 조작감을 다듬고 앱을 구현하고 설명 자료를 제작했다. 구현은 AI와 협업했고, 화면과 조작 방식에 대한 최종 결정은 직접 내렸다.

내 연습과 레슨에서 앱을 사용했다. 선생님은 무엇을 연습했는지 한눈에 알 수 있다고 했으며, 더 상세한 기록을 요청했다(의견 요약).

2. 배경과 문제

취미로 테너 색소폰을 불며 2주에 한 번 레슨을 받는다. 선생님이 “연습은 어떻게 했나요?”라고 물어도, 무엇을 얼마나 연습했는지 구체적으로 전달할 방법이 없었다.

색소폰을 스트랩에 걸고 있어서 연습 중에 종이에 글을 쓰기 어렵다. 연습 일지도 종이가 늘어날수록 기록이 흩어진다.

색소폰을 스트랩에 건 채 종이에 글을 쓰려고 애쓰는 모습. 연습 일지의 종이가 늘어나 흩어지고, 필요한 기록을 찾기 어려워지는 모습.
악기를 든 채 글을 쓰기 어렵다종이가 늘면 기록이 흩어진다

시험 삼아 사용한 시간 기록 앱에서는 한 번의 탭으로 시간을 잴 수 있었다. 하지만 그 기록을 선생님이 한눈에 이해할 수 있는 형태로 만드는 것이 과제였다.

3. 설계 원칙

연습 중의 기록부터 레슨에서의 공유까지 하나의 흐름으로 연결하고자 했다. 이를 위해 두 가지 요구사항을 화면과 조작 방식을 결정하는 기준으로 삼았다.

연습 중에도 간편하게 기록하기

악기를 든 채 카테고리를 한 번 탭해 시간을 기록할 수 있어야 한다.

레슨 전에 기록을 편집할 필요 없게 하기

기록이 자동으로 정리되어, 무엇을 얼마나 연습했는지 그대로 보여 줄 수 있어야 한다.

4. 기능과 설계

조작과 연습 시간을 같은 카드에 모은다

카테고리를 탭하면 측정이 시작되고, 다른 카드를 탭하면 전환되며, 같은 카드를 다시 탭하면 멈춘다. 카드에는 오늘의 시간을 크게 표시하고, 측정 중일 때만 밝게 하면서 흰색 테두리를 더했다. 조작하는 곳과 무엇을 기록 중인지 확인하는 곳을 일치시켰다.

기록 화면. 위에는 연습 기록 격자, 아래에는 오늘의 막대(총 54분)와 카테고리 카드가 있다. ‘곡 연습’은 27분을 넘겨 측정 중이며 밝은 색과 흰 테두리로 표시된다.
‘곡 연습’의 시간을 측정 중이다.
카테고리명, 오늘의 시간, 측정 상태를 같은 카드에서 확인할 수 있다.

가로로 스크롤하지 않고 연습 내역을 한눈에 본다

공유 전에 편집할 필요가 없도록 이전 레슨일부터의 기록을 자동으로 집계한다. 일별 표는 글자가 작아지더라도 모든 카테고리가 동시에 보이는 배치를 우선했다. 선생님에게 화면을 보여 주면서 연습 시간의 배분을 이야기할 수 있는 형태를 지향한다.

공유 화면. 9월 17일 레슨일부터 24일까지 총 4시간 38분을 집계하고, 카테고리별 막대그래프와 가로 스크롤 없이 모든 카테고리를 볼 수 있는 일별 표를 표시한다.
기간, 합계, 카테고리별 배분, 일별 내역을 한 화면에 담았다.

쌓인 연습을 계속할 동기로 삼는다

오늘의 성취와 월·연 단위로 쌓이는 연습을 눈에 보이게 했다. 선생님에게 연습에 들인 노력을 보여 주는 것 또한 계속 연습할 동기가 되기를 기대한다.

하루: 1시간을 기준으로 막대를 채운다

오늘의 연습 막대는 처음에 0부터 1시간까지를 표시한다. 카테고리별 시간을 서로 다른 색으로 쌓아, 막대를 채우는 것이 계속 연습할 동기가 되기를 바랐다.

40분 연습했을 때의 표시 예시. 색은 연습 카테고리를 나타낸다. 가상의 기록이다.

장기: 초록색 칸으로 매일의 연습을 보여 준다

하루를 한 칸으로 두고, 그날의 연습 시간을 초록색의 농도로 표현했다. 월·연 단위로 쌓이는 칸을 한눈에 볼 수 있게 해, 매일의 기록이 늘어나는 모습이 연습을 계속할 계기가 되기를 바랐다.

한 칸은 하루이며, 빨간 테두리는 이정표를 나타낸다. 맨 오른쪽 열은 기록 중이고 그 아래 날짜에는 아직 기록이 없다. 가상의 표시 예시다.

5. 제작 과정

조사를 통해 기록과 공유의 역할 정하기

ChatGPT로 기존 앱을 조사하고 문제와 접근 방식을 정리했다. 당시 조사 범위에서는 시간 관리 앱을 찾았지만, 선생님과의 소통에 적합한 공유 방식은 찾지 못했다. 대화를 통해 구체화한 콘셉트를 명세서로 정리하고, Codex에 전달해 초판을 구현했다.

초판을 직접 써 보고 조작 영역을 화면 안에 배치한다

생성된 초기 버전을 직접 사용하며 UI와 UX의 개선 요구를 전달해 개선 버전으로 다듬었다. 초판에서 별도로 표시하던 측정 정보와 종료 조작을 카드에 모으고, 오늘의 시간을 크게 표시했다. 조작 패널이 화면 안에 들어오는 배치도 탐색했다.

9월 9일의 초기 버전. 작은 카테고리 카드 여섯 개와 오늘의 합계 40분이 서로 다른 영역에 놓인 기록 화면.

초기 버전

9월 21일의 개선 버전. 각각의 큰 카드에 카테고리와 오늘의 연습 시간을 함께 표시하고, 측정 중인 악보 읽기 10분을 밝게 표시한 기록 화면.

개선 버전

같은 가상 데이터로 비교했다. 카테고리는 6개이며 오늘의 합계는 40분이다.
초판에서 분리되어 있던 측정 정보와 종료 조작을 개선 버전에서는 카드에 모았다.

연습 중 계속 열어 두는 화면인 만큼 검은색을 기본으로 하되, 카테고리의 색으로 밝은 기분을 느끼게 하고자 했다.

스크롤의 조작감을 비교한 뒤 방식 선택하기

‘부드럽게 움직이고, 깔끔하게 멈추는’ 느낌은 말이나 이미지로 요청하는 것만으로는 조정하기 어려웠다. 그래서 방식과 값을 직접 바꿔 시험할 수 있는 보조 도구를 AI와 만들었다. 조작 패널이 화면 안에 들어오는 위치에서 멈추는 것을 기준으로 iPhone에서 비교하고, 브라우저 기본 스냅을 선택해 앱에 반영했다.

스크롤 조정 도구. 다섯 스냅 방식의 전환 항목과 매개변수 옆에 조작감을 시험하는 스마트폰 화면이 놓여 있다.
방식과 매개변수를 바꿔 가며 iPhone에서 스크롤이 멈추는 느낌을 직접 비교했다.

독립적인 리뷰를 활용하되 채택 여부는 직접 판단한다

두 개의 독립적인 AI 세션을 이용해 검토를 반복했다. Claude Code가 제시한 문제와 개선안을 직접 확인한 뒤, Codex가 검증하고 필요한 수정을 반영하도록 했다. 제안이 목표한 UI나 UX에서 벗어나는 경우도 있어, 앱의 목적과 실제 사용감에 비추어 채택 여부를 결정했다.

이 과정을 약 15회 반복했다. AI 리뷰에서 큰 결함이 더는 제기되지 않는 것을 이번 개선 작업을 마무리하는 근거 중 하나로 삼았다.

6. 사용 경험과 향후 과제

연습을 시작할 때 앱을 여는 습관이 자리 잡았다

내 iPhone에 설치해 매일 연습할 때 사용하면서, 악기를 든 채 한 번의 탭으로 기록하는 편리함을 확인했다. 연습 시작 시 앱을 여는 것이 긍정적인 습관이 되었다. 그날의 순서와 시간 배분을 돌아보고 다음 레슨 날짜를 의식하는 것이 연습 계획에 도움이 되고 있다.

선생님에게서 더 세밀한 기록을 요청받았다

선생님은 무엇을 연습했는지 한눈에 알 수 있으며, 스케일의 종류까지 기록하면 앱이 더 유용하겠다고 했다(의견 요약). 이는 내 연습과 선생님과의 레슨에서 얻은 경험이다.

다음 과제는 상세함과 간편한 입력을 함께 유지하는 것이다

‘스케일’ 아래에 ‘펜타토닉 스케일’ 같은 하위 카테고리를 추가하는 방안을 검토하고 있다. 간편하게 기록할 수 있는 조작 방식은 계속 고민 중이다. 공유 화면도 일별 표 대신 카테고리와 하위 카테고리를 계층으로 보여 주는 방안을 생각하고 있다.