컴포넌트 관리

테이블 컴포넌트 좌우 길이 조절

피그마 오픈카톡방2026. 3. 7.

질문사항

테이블을 컴포넌트로 만들고 복사한 후 좌우 길이 조절을 유연하게 하고 싶습니다. 어떻게 구현할 수 있을까요?

답변

테이블 컴포넌트를 만들 때, 셀(Cell) 또는 행(Row) 단위로 컴포넌트를 구성하는 것이 일반적입니다. 각 셀이나 행 내부의 객체(텍스트, 아이콘 등)에 대해 너비 속성을 `Fill container` 또는 `Fixed width`로 설정하여 유연성을 확보할 수 있습니다.

`Fill container`: 부모 컨테이너의 너비에 맞춰 자동으로 조절됩니다. 테이블의 전체 너비가 변경될 때 내부 셀들이 자동으로 확장/축소되도록 할 때 유용합니다.

`Fixed width`: 특정 너비를 고정합니다. 특정 컬럼(예: 체크박스, 액션 버튼)의 너비를 유지해야 할 때 사용합니다.

이러한 속성들을 Auto Layout과 함께 사용하면 테이블의 좌우 길이를 조절할 때 내부 요소들이 적절하게 반응하도록 만들 수 있습니다.