/cc-inspector:ui — 화면 구조 들여다보기#

한마디로#

실행 중인 앱 화면이 어떤 부품(위젯)들로 어떻게 쌓여 있는지 들여다보는 도구입니다. 집의 설계도를 펼쳐 보면서 "어디가 삐져나왔는지, 어떤 방이 어디에 있는지" 확인하는 것과 같아요.

누가·언제 쓰나요#

• 화면 요소가 화면 밖으로 삐져나오는 레이아웃 깨짐(overflow) 이 생겼을 때
• "있어야 할 버튼·글자가 화면에 안 보인다" 하고 위젯이 사라진 것처럼 보일 때
• 화면이 느리거나, 작은 화면·큰 화면에서 레이아웃이 제대로 안 맞을 때

주로 개발자나 AI가 앱을 직접 실행해 놓고 화면 문제를 진단할 때 사용합니다.

무엇을 해주나요#

실행 중인 앱에서 다음을 뽑아내 보여 줍니다.

• 화면 구조 전체 — 어떤 부품들이 어떤 순서로 겹쳐 있는지(위젯 트리)
• 삐져나온 요소 찾기 — 화면 밖으로 넘친 부분이 어디인지(overflow 위치)
• 현재 화면 정보 — 화면 크기 등 기본 정보
• 특정 부품 검색 — 원하는 종류의 요소(버튼, 글자 등)가 실제로 있는지
• 화면 속 모든 글자 — 표시되는 텍스트와 그 내용 모음

어떻게 쓰나요#

# 화면 구조(위젯 트리) 전체 보기
/inspector/ui tree

# 화면 밖으로 삐져나온 부분(overflow) 찾기
/inspector/ui overflow

# 현재 화면 정보 보기
/inspector/ui screen

# 화면에 있는 글자(텍스트) 모두 찾기
/inspector/ui texts

위 네 가지는 문서에 실제로 정의된 사용 예시입니다. 보통 문제 유형에 맞는 한 가지를 골라 실행하면 됩니다.

안에서 무슨 일이 벌어지나요#

문제 종류에 따라 정해진 진단 순서를 따라갑니다.

• 레이아웃이 삐져나왔을 때 — 삐져나온 위젯을 찾아 그 위치를 확인하고, 정해진 크기와 실제 크기를 비교한 뒤 Expanded·Flexible·SingleChildScrollView 같은 해결책을 제안합니다.
• 있어야 할 요소가 안 보일 때 — 해당 종류의 위젯을 검색해 실제 존재 여부를 확인하고, 화면 구조 경로를 따라가 보며 조건부로 가려졌는지 살펴봅니다.
• 화면이 느릴 때 — 화면 구조의 깊이를 보고 불필요하게 깊게 중첩된 곳을 찾은 뒤, 다시 그려지는 빈도를 점검합니다.
• 화면 크기별로 깨질 때 — 현재 화면 크기를 확인하고 여러 크기에서 삐져나옴을 검사해, 크기에 따라 분기되는 조건을 점검합니다.

{
   " tree " : {
     " type " :  " MaterialApp " ,
     " children " : [
      {
         " type " :  " Scaffold " ,
         " children " : [
          { " type " :  " AppBar " ,  " properties " : { " title " :  " Home " }},
          { " type " :  " ListView " ,  " children " : [...]}
        ]
      }
    ]
  }
}

1. ui_find_overflow - >   Identify problem widget
2. Check the widget path
3. Compare constraints vs size
4. Suggest applying Expanded, Flexible, SingleChildScrollView

1. ui_find_widgets type= " TargetWidget " 
 2. Verify widget existence
3. Trace widget tree path
4. Review conditional rendering logic

1. ui_get_widget_tree - >   Check depth
2. Identify unnecessarily deep nesting
3. Check const widget usage
4. Analyze rebuild frequency with /inspector/bloc

1. ui_get_screen_info - >   Check screen size
2. Run ui_find_overflow at various sizes
3. Review MediaQuery-based conditions

/inspector/ui tree

/inspector/ui overflow

/inspector/ui screen

/inspector/ui texts