도리안의 2026년 개발기 #7 - 막대 그래프 차트가 스크롤 안 되는 문제

막대 그래프 차트가 스크롤 안 되는 문제

---

오늘의 개발기

오늘 오전에 출시를 해도 좋다는 승인을 기획팀으로부터 받았다. Google Play Console에 내부 테스트 버전을 업로드하였고, 최종 테스트를 해보았다. 당연히 문제가 없을 거라고 생각했다. 그러나 '회차별 점수'를 보여주는 막대 그래프 차트가 좌우로 스크롤 되지 않는 문제를 뒤늦게 발견했다. 또 하나의 버그도 발견했다. 테스트를 했던 기획팀에서도 이를 모르고 있는 것 같다. 뒤늦게 발견했으니 다행이다. 오후에는 이들을 수정하는데 집중했다.

어려운 점

• 뒤늦게 발견한 버그: 막대 그래프 차트가 스크롤 안 되는 문제

원인

• 2개의 LazyRow 컴포저블 함수 호출시 동일한 LazyListState 객체를 파라메터로 대입했기 때문
  • 하나는 막대그래프 내용 보여주고
  • 다른 하나는 X 축의 회차 레이블 보여줌

해결

• 각 LazyRow 함수에 별도의 LazyListState 객체를 파라메터로 대입
• 둘 중 하나가 업데이트 되면 다른 것도 자동 업데이트 적용

val state1 = rememberLazyListState()
val state2 = rememberLazyListState()

// 1번 리스트 스크롤 시 2번 동기화
LaunchedEffect(state1.isScrollInProgress) {
    if (state1.isScrollInProgress) {
        snapshotFlow { state1.firstVisibleItemIndex to state1.firstVisibleItemScrollOffset }
            .collect { (index, offset) ->
                state2.scrollToItem(index, offset)
            }
    }
}

// 2번 리스트 스크롤 시 1번 동기화
LaunchedEffect(state2.isScrollInProgress) {
    if (state2.isScrollInProgress) {
        snapshotFlow { state2.firstVisibleItemIndex to state2.firstVisibleItemScrollOffset }
            .collect { (index, offset) ->
                state1.scrollToItem(index, offset)
            }
    }
}

// UI 구성
Column {
    LazyRow(state = state1) { /* 아이템들 */ }
    LazyRow(state = state2) { /* 아이템들 */ }
}

배운 점

• 구현한 코드에 문제가 없는지는 반드시 스스로 확인해봐야 함
• 버그는 테스트 단계에서 발견되지 않을 수 있음

후속 조치

• 추가로 수정한 버그를 기획팀에 알리고 추가 확인 테스트 요청

---

지난 2026년 개발기

• #6 - AI 사용하며 주의해야 할 점
• #5 - 새로운 앱은 어떻게 개발하게 될지...
• #4 - 새 맥북 셋업 중
• #3 - 간만에 개인 프로젝트 재개
• #2 - AI 사용 체크
• #1 - 안드로이드 스튜디오에서 앱 로그가 보이지 않는 문제

---

Posted through the ECblog app (https://blog.etain.club)