프로젝트/디깅 - 종합음악플랫폼

[디깅 뮤직 21편] 문제 해결보다 먼저 해야 할 생각 전환

하러어어러 2025. 6. 11. 18:59

1. 앨범 리뷰 팝업 만들기

앨범 평가 팝업을 만들고 있었다.
그 안에는 앨범 전체에 대한 평가뿐 아니라, 트랙 하나하나에도 별점을 줄 수 있게 만들고 싶었다.

버블에서 repeating group 안의 각 셀에 별도 데이터를 입력하는 건 까다로운 작업이다.
하지만 이 문제는 몇번 겪어본적 있었다.
별점 숫자와 repeating group의 index 값을 포맷팅해서 텍스트 리스트로 만들고,
그걸 state로 바깥에 저장한 다음, 각 셀이 그걸 읽어들여서 자기 점수를 인식하게 만드는 방식이 가장 편하다.

예를 들면 첫번째 트랙을 2.5점으로 평가하기 위해 별을 눌렀을 때 1&&2.5 라는 텍스트를 만들고 나중에 split해서 숫자로 바꾸는 방법이다.

사실 Orchestra 같은 외부 플러그인을 쓰면 편할 수도 있겠지만,무거워지고 복잡해진다. 

이 정도로 설계를 마치고 개발을 시작했다.

 

2. 예상치 못한 부분에서 발목을 잡혔다 (1)

문제는 앨범 메인 별점 UI였다.
회색 별 5개가 있고, 클릭하면 빨간색으로 바뀐다.
그리고 hover할 때도 반응해서 별이 칠해져야 했다.

이전에 만든 걸 확인해보니, 이건 예전에 하드코딩으로 반별씩 10개의 이미지를 넣어서 만든 구조였다.
하드코딩된 이미지 10개를 hovering, 클릭, 데이터 연동까지 모두 적용하는 건 우아하지 못한 구조다.

워크플로우도 너무 늘어난다.

그리고 각 트랙에도 이걸 부여하려면....

그렇다고 이걸 그냥 repeating group으로 바꾸자니,, hovering 액션이 걸렸다.

3.5에 hover했을 때, 0.5부터 3.5까지 전부 채워지고 그 뒤로는 비워지는 모양이 필요하다.

하지만 어떤 cell에 hovering하는 경우, 다른 cell이 반응하는 conditional action은 구현이 힘들다.

 

3. 문제 해결은 한 단계 위에 있었다 (1)

 

이렇게 막힐 때에는 한단계 위에서, 생각해보는 게 중요하다.

정말 필요한 건 "hovering 했을 때 그 뒤의 별들이 지워지고, 그 앞의 별들이 채워지는" 기능이 아니다.

UX 측면에서 정말 필요한 건, "사용자가 클릭할 수 있는 이미지라는 걸 알려주는 기능" "클릭했을 때 별점이 몇 점인지, 자신이 제대로 클릭하는지를 알려주는 기능" 이렇게 두개이다.

그래서 hovering 할 경우 채워진 별을 의미하는 빨강과 비워진 별인 회색의 중간인 새로운 색을 입히도록 했다.

UX 손실은 최소화 하면서 개발 효율을 높일 수 있는 방법이었다

아래는 바꾼 페이지이다. 실제로 호버링 시에 유저 경험은 큰 차이가 없다

3.5를 클릭한 후, 2.5로 조정하려 hover한 경우
3.5를 클릭한 후, 5.0으로 조정하려 hover한 경우

 

4. 예상치 못한 부분에서 발목을 잡혔다 (2)

앨범 총 별점을 구현을 마치고, 이제 트랙별 점수 구현을 시작했다.

내가 까먹고 있던 문제는 repeating group 내부에 별점도 이제 repeating 그룹이라는 점이었다.

repeating group에서 현재 cell에 대한 정보는 얻을 수 있지만, 현재 repeating group에 대한 정보를 얻는 건 쉽지 않다.

원래 계획대로 포맷팅을 하려면 현재 트랙에 대한 정보도 필요한 상황..

 

5. 문제 해결은 한 단계 위에 있었다 (2)

변경 이전 / 변경 이후

트랙별 점수를 설정하는 상호작용(UI)을 개선했다.

위에서 별점을 매겨봤다면 5점이 만점이라는 점을 알 것이라고 가정하고, 별 다섯개는 과감하게 삭제하고, 버튼 두개로 Up/Down 클릭하도록 했다.

이렇게 만들면 repeating group 중첩이 아니라 처음 내가 계획한대로 개발이 가능하다.

 

6. 통찰 : 문제는 종종 그 단계에서 풀리지 않는다. 위에서 보면 비로소 보인다.

기획 → 디자인 → 개발.
이 흐름은 위에서 아래로 작동한다.
애자일이든 워터폴이든, 한 번에 작업하는 분량만 다를 뿐 흐름 자체는 같다.
그래서 문제가 생기면, 지금 위치한 단계에만 갇히지 말고 전체를 조망할 필요가 있다.

윗 단계에서 풀면 훨씬 쉬운 경우가 정말 많다.