개발일기: Wear OS Tile Chip 너비 문제 해결

wear 앱 화면

🚀 개발일기: Wear OS Tile Chip 너비 문제 해결

📌 1️⃣ 핵심 개념 정리

핵심 개념	설명	추가 정보	예시
Wear OS Tile	Wear OS 기기에서 빠르고 간결한 정보 제공 및 앱 실행을 위한 사용자 인터페이스 요소.	SuspendingTileService를 통해 데이터 및 UI 제공.	날씨 타일, 피트니스 통계 타일.
Chip (ProtoLayout Material)	Wear OS Tiles에서 사용되는 버튼 형태의 Material 컴포넌트. 짧은 텍스트와 액션을 포함.	setPrimaryLabelContent, setWidth, setChipColors 등.	"앱 열기", "다음 노래" 버튼.
Column (ProtoLayout)	자식 요소들을 수직으로 배치하는 레이아웃 컨테이너.	addContent, setWidth, setHeight 등.	여러 텍스트 요소나 버튼을 세로로 나열할 때.
ExpandedDimensionProp	레이아웃 요소가 부모 컨테이너의 사용 가능한 공간을 최대한 채우도록 지시하는 치수 속성.	DimensionBuilders의 일부. wrap_content와 반대 개념.	Chip이나 Column의 width를 Expanded로 설정.
레이아웃 계층 구조	UI 요소들이 부모-자식 관계로 중첩되어 구성되는 방식. 자식은 부모의 제약을 따름.	부모의 너비가 제한되면 자식도 제한됨.	PrimaryLayout > Column > Chip 순서.
PrimaryLayout	Wear OS Tiles의 기본 레이아웃. 전체 화면을 커버하며 반응형 콘텐츠 처리를 담당.	setResponsiveContentInsetEnabled, setContent 등.	Tile의 루트 레이아웃 컨테이너.
tileLayout 함수	Tile의 시각적 요소를 정의하고 반환하는 핵심 함수.	requestParams, context를 인자로 받음.	PrimaryLayout 및 그 안의 Column, Text, Chip 구성.

📌 2️⃣ 단계별 사고 방식 정리 (개발일기)

✅ 개발일기: 2025년 11월 11일, Wear OS Tile Chip 너비 문제 해결

• ✔️ 문제 정의 및 초기 진단: 오늘 Wear OS Tile을 개발하던 중 흥미로운 문제를 발견했다. Chip 컴포넌트를 사용하여 "앱 열기" 버튼을 만들었는데, 분명 setWidth(DimensionBuilders.ExpandedDimensionProp.Builder().build())를 설정했음에도 불구하고, 실제 Tile 미리보기나 에뮬레이터에서 Chip이 텍스트 내용(R.string.tile_button_main_activity)의 한 글자 너비만큼만 표시되는 현상이 발생했다.
• ✔️ 원인 분석 및 가설 설정: 이 문제는 Chip 자체의 setWidth 설정이 잘못된 것이 아님을 직감했다. ExpandedDimensionProp은 "부모가 허용하는 최대 공간"을 의미하기 때문에, Chip의 부모 컨테이너가 충분한 너비를 제공하지 못하고 있을 가능성이 가장 크다고 판단했다. 현재 레이아웃 계층은 PrimaryLayout -> Column -> Chip 형태이다. PrimaryLayout은 화면 전체를 사용하겠지만, 그 다음 계층인 Column이 기본적으로 자식 콘텐츠의 너비에 맞춰 줄어들어 있을 가능성이 높다고 추론했다. 따라서, Chip이 Expanded로 설정되어도, Chip의 직접적인 부모인 Column의 너비가 제한되어 있다면, Chip 역시 그 제한된 Column 너비 안에서만 확장될 수밖에 없다는 가설을 세웠다.
• ✔️ 해결 전략 수립 및 구현: 가설을 바탕으로, Column 컴포넌트에도 setWidth(DimensionBuilders.ExpandedDimensionProp.Builder().build())를 명시적으로 적용하기로 결정했다. 이렇게 함으로써 Column이 PrimaryLayout이 제공하는 최대 너비를 사용하고, 그 안에 포함된 Chip 또한 Column이 확장된 너비를 따라 전체 너비를 채울 수 있을 것이라고 예상했다.

🚀 Flowchart: Chip 너비 문제 해결 과정

graph TD
    A[문제 발생: Chip이 전체 너비를 채우지 못하고 1글자만 보임] --> B{Chip.setWidth(Expanded) 설정 확인};
    B -- 설정됨 --> C[가설: 부모 컨테이너(Column)가 충분히 확장되지 않음];
    C --> D[레이아웃 계층 구조 분석: PrimaryLayout -> Column -> Chip];
    D --> E[해결 방안: Column에도 setWidth(Expanded) 적용];
    E --> F[코드 수정: Column.Builder에 setModifiers.setWidth(Expanded) 추가];
    F --> G[결과 확인: Chip이 전체 너비를 정상적으로 채움];
        

참고: 위 Flowchart는 Mermaid 문법으로 작성되었습니다. 웹 페이지에 Mermaid 라이브러리가 포함되어 있지 않다면 텍스트로 표시될 수 있습니다.

📌 3️⃣ 구체적인 예시 & 케이스 스터디 2개 이상 포함!

📌 예시 1: Column에 Expanded 너비 적용

문제 상황에서 Chip이 속한 Column의 정의는 다음과 같았습니다.

val columnBuilder = Column.Builder()
    .setWidth(DimensionBuilders.ExpandedDimensionProp.Builder().build()) // 이 부분을 추가했습니다!
    .addContent(
        Text.Builder(context, context.getString(R.string.app_name))
            .setColor(argb(Colors.DEFAULT.onSurface))
            .setTypography(Typography.TYPOGRAPHY_CAPTION1)
            .build()
    )
// ... (기존 코드)

이전 코드에서는 Column에 setWidth를 명시적으로 설정하지 않아, Column이 내부 콘텐츠(Text, Spacer, 다른 Text들)의 너비에 따라 크기가 결정되었습니다. 하지만 이제 Column 자체가 ExpandedDimensionProp으로 설정되었으므로, PrimaryLayout이 허용하는 최대 너비를 차지하게 됩니다. 이 덕분에 Chip도 그 확장된 Column의 너비를 따라갈 수 있게 되었습니다.

📌 예시 2: 유사한 상황 - Row 내부 Image 문제

이와 비슷한 문제는 Row 레이아웃에서도 자주 발생합니다. 예를 들어, Row 안에 여러 Image를 배치하고 특정 Image가 ExpandedDimensionProp으로 설정되어 있는데, 그 Image가 제대로 확장되지 않는 경우가 있습니다.

이때도 원인은 동일하게 Row 자체가 ExpandedDimensionProp이나 고정된 큰 너비로 설정되지 않고 wrap_content처럼 동작하여 내부 Image가 확장할 공간이 없기 때문일 수 있습니다.

해결 방안: Row 컨테이너에도 setWidth(DimensionBuilders.ExpandedDimensionProp.Builder().build())를 적용하여 Row 자체가 가능한 최대 너비를 사용하도록 해야, 그 안에 있는 Image가 비로소 확장될 수 있습니다. 레이아웃 컨테이너의 너비 설정은 자식 요소의 확장성에 직접적인 영향을 미친다는 것을 보여주는 좋은 사례입니다.

📌 4️⃣ 답변 마지막에는 핵심 요약 + 피드백 그래프 포함!

✅ 요약하자면?

레이아웃 컴포넌트가 ExpandedDimensionProp으로 설정되었음에도 화면 전체를 채우지 못할 때는, 해당 컴포넌트의 직접적인 부모 컨테이너가 충분한 공간을 제공하는지 확인해야 합니다.

대부분의 경우, 부모 컨테이너(예: Column, Row) 또한 ExpandedDimensionProp으로 설정되어야 자식 컴포넌트가 의도대로 확장됩니다.

이는 레이아웃 계층 구조와 크기 측정 방식에 대한 이해가 중요함을 시사합니다.

📊 추가 피드백 비교 분석:

graph LR
    A[문제 원인 파악 능력] --> A1{단순 오류 vs. 계층 구조 문제};
    B[해결책 도출 논리성] --> B1{가설 설정 및 검증};
    C[코드 적용 정확성] --> C1{올바른 위치에 수정 사항 적용};

    subgraph 초기 문제 해결 접근
        A1 -- 낮음 --> D[Chip 코드만 반복 확인];
        B1 -- 낮음 --> D;
        C1 -- 낮음 --> D;
    end

    subgraph 개선된 문제 해결 접근 (본 사례)
        A1 -- 높음 --> E[부모-자식 관계 분석];
        B1 -- 높음 --> E;
        C1 -- 높음 --> E;
        E --> F[Column에 Width 적용];
    end

    D -- 비효율적 --> F;
        

참고: 위 피드백 그래프 또한 Mermaid 문법으로 작성되었습니다. 웹 페이지에 Mermaid 라이브러리가 포함되어 있지 않다면 텍스트로 표시될 수 있습니다.