작은 화면 폭에서만 재현되는 레이아웃 버그는 코드만 봐서는 원인을 짐작하기 어려운 경우가 많습니다. Row나 Box의 크기 계산이 얽혀 있으면 텍스트 길이가 조금만 길어져도 다른 요소와 겹치는데, 코드 자체는 문법적으로 문제가 없어서 어디를 고쳐야 할지 바로 보이지 않습니다. 이런 문제를 스크린샷을 찍어서 Claude Code에 그대로 첨부하고, 코드와 이미지를 같이 보여주며 물어보는 방식으로 풀었습니다.

어떤 작업이었나

목록 화면의 카드 컴포넌트에서, 제목 텍스트가 길어지면 오른쪽에 있는 아이콘 버튼과 겹치는 현상이 있었습니다. 에뮬레이터 기본 해상도에서는 문제가 없었는데, 폭이 좁은 기기(360dp)에서 테스트하니 아래 스크린샷처럼 버튼이 텍스트 뒤로 파고들었습니다.

문제가 된 코드는 다음과 같았습니다.

@Composable
fun ItemCard(title: String, onMoreClick: () -> Unit) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = title,
            style = MaterialTheme.typography.bodyLarge,
            maxLines = 1
        )
        Spacer(modifier = Modifier.width(8.dp))
        IconButton(onClick = onMoreClick) {
            Icon(Icons.Default.MoreVert, contentDescription = "더보기")
        }
    }
}

Text에 maxLines = 1만 넣고 overflow 처리를 안 해서, 텍스트가 자기 실제 폭만큼 공간을 차지하려 하고 IconButton은 그 뒤로 밀려나면서 겹치는 구조였습니다.

AI를 어떻게 활용했나

에뮬레이터에서 360dp 폭으로 스크린샷을 저장한 다음, 그 파일 경로와 ItemCard.kt 코드를 같이 첨부해서 물었습니다.

이 스크린샷(~/Desktop/card-overlap.png)에서 제목 텍스트가 더보기 아이콘
버튼과 겹치는 게 보여. ItemCard.kt 코드를 같이 보고 원인을 설명해주고,
360dp 같은 좁은 화면에서도 안 겹치게 고쳐줘.

Claude Code는 이미지 파일도 Read 도구로 읽을 수 있어서, 스크린샷에서 아이콘이 텍스트에 가려진 위치를 짚어내고 코드 쪽 원인을 같이 짚었습니다. Text가 Row 안에서 크기 제약 없이 자기 콘텐츠 크기만큼 넓어지려 하기 때문에, IconButton의 고정 크기를 남기고 남는 공간을 Text에 강제로 배분해야 한다는 설명이었습니다. 제안받은 수정은 다음과 같았습니다.

@Composable
fun ItemCard(title: String, onMoreClick: () -> Unit) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = title,
            style = MaterialTheme.typography.bodyLarge,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.weight(1f)
        )
        Spacer(modifier = Modifier.width(8.dp))
        IconButton(onClick = onMoreClick) {
            Icon(Icons.Default.MoreVert, contentDescription = "더보기")
        }
    }
}

Modifier.weight(1f)로 Text가 남는 공간만 차지하도록 제한하고, TextOverflow.Ellipsis로 넘치는 부분은 말줄임으로 처리하니 아이콘과 겹치는 대신 텍스트 끝이 ...으로 잘리는 정상적인 형태가 됐습니다. 같은 해상도로 다시 스크린샷을 찍어서 첨부해 비교해달라고 하니, 겹침이 사라졌다는 걸 확인해줬습니다.

처음에 걸렸던 부분

처음에는 스크린샷 없이 "좁은 화면에서 카드 레이아웃이 깨진다"라고 텍스트로만 설명했는데, weight를 안 썼다는 것까지는 짚어냈지만 아이콘이 구체적으로 어디까지 가려지는지는 알려주지 않으니 텍스트 잘림 처리(Ellipsis)를 넣을지, 아이콘을 줄바꿈으로 내릴지 같은 선택 중 뭐가 실제 증상에 맞는 수정인지는 제가 다시 설명해야 했습니다. 스크린샷을 첨부하고 나서는 겹치는 정도와 방향이 이미지에 그대로 드러나 있어서 같은 질문을 다시 설명할 필요가 없었습니다.

결과와 얻은 팁

  • 레이아웃이 "깨진다"는 상태는 말로 설명하면 애매해지기 쉬운데, 스크린샷을 첨부하면 겹침의 방향과 정도가 그대로 전달돼서 원인 설명이 더 정확해졌습니다.
  • 문제 화면 스크린샷 하나만 주기보다, 관련 코드 파일과 함께 물어보니 "어느 컴포저블의 어떤 속성 때문인지"까지 짚어주는 답을 받을 수 있었습니다.
  • 수정 후에도 같은 해상도로 다시 스크린샷을 찍어 비교해달라고 하면, 실제로 증상이 없어졌는지를 코드 리딩만으로 판단하지 않고 눈으로 재확인할 수 있습니다.
  • 이 방식은 눈에 보이는 레이아웃 문제에는 잘 맞지만, 상태 관리처럼 화면에 바로 드러나지 않는 버그에는 스크린샷보다 로그나 코드 설명이 더 유용했습니다.