Figma 컴포넌트와 Auto Layout

이번 문서에서 만드는 것

5주는 3–4주의 정보 구조와 신청 흐름에서 반복되는 세션 카드와 버튼을 컴포넌트로 만듭니다. 2주의 Frame·레이어를 이해해야 합니다. 제목 길이·태그 수·상태가 달라도 레이아웃이 버티는 것이 목표입니다.

컴포넌트는 반복되는 구조와 규칙의 원본이고 인스턴스는 실제 화면에 배치한 사용처입니다. 복제한 일반 프레임은 원본 변경을 따라가지 않습니다. 변경 연결이 필요한 반복 요소부터 컴포넌트로 만듭니다.

Auto Layout 크기 규칙

설정은 가로·세로 축마다 다르게 선택할 수 있습니다. 부모도 내용에 맞춰 줄고 자식은 부모를 채우려는 식으로 순환 의도가 생기면 어느 쪽 크기가 기준인지 먼저 정합니다. Fill이 보이지 않으면 부모가 Auto Layout인지, 선택한 레이어가 그 자식인지 확인합니다.

카드 만들기: 바깥에서 안으로

1. Card / Session 프레임을 만들고 세로 Auto Layout을 적용합니다. 처음 검사용 너비는 320px, 높이는 Hug로 둡니다. padding 16px, gap 12px로 시작합니다. 수치는 이 학습 예시의 출발점입니다.
2. 상태 배지, 제목, 일정, 태그 묶음, 신청 버튼을 순서대로 넣습니다. 제목은 가로 Fill, 세로 내용에 맞춰 늘어나도록 설정합니다.
3. 태그 묶음에는 가로 Auto Layout과 줄바꿈을 사용해 태그가 늘어날 때 다음 줄로 가게 합니다. 실제 제품에서 한 줄 제한이 필요하면 축약 규칙을 문서로 정합니다.
4. 버튼은 가로 Fill, 높이는 텍스트와 padding으로 정합니다. 제목을 길게 바꾸어도 버튼이 카드 밖으로 밀려나지 않아야 합니다.
5. 프레임을 컴포넌트로 만들고 03 Components에 둡니다. 원본에서 인스턴스 두 개를 만들어 화면에 배치합니다.

처음부터 고정 높이로 모든 카드를 맞추면 긴 제목이나 큰 글자에서 잘릴 수 있습니다. 카드 높이를 동일하게 해야 하는 요구가 있다면 정보 우선순위와 최소 높이·줄 수 정책을 함께 검토합니다.

상태와 속성 설계

세션 카드의 상태는 open·closed, 버튼 상태는 default·focus·disabled·loading으로 구분합니다. 모든 조합을 만들기보다 실제 사용되는 상태를 우선 표현합니다.

텍스트 속성은 제목 변경, Boolean 속성은 선택적인 아이콘 표시, Variant는 구조나 상태 차이에 사용합니다. Variant 값 이름은 코드 상태와 대응하기 쉽게 정합니다. 단순 문구 변경마다 별도 Variant를 늘리지 않습니다.

Figma의 disabled 모양만으로 실제 버튼 비활성 동작이 구현되지는 않습니다. 개발 인계 때 HTML disabled·aria-disabled·진행 상태 전달 중 어떤 동작이 필요한지 개발자와 합의합니다.

변경과 인스턴스 검사

원본의 padding을 16에서 20으로 바꾼 뒤 인스턴스가 따라오는지 확인하고 실습 종료 후 팀이 선택한 값으로 확정합니다. 인스턴스에서 제목만 바꿔도 구조는 연결되어 있어야 합니다. 수정이 안 따라오면 detach 여부, override한 속성, 실제 원본을 확인합니다.

세션 진행과 완료 기준

권장 100분: 크기 규칙 20분, 카드 구현 30분, Variant·속성 20분, 스트레스 검사 20분, 리뷰 10분입니다.

제출물은 카드·버튼 원본, 인스턴스 세 개, 위 검사 결과, Hug·Fill·Fixed를 선택한 이유입니다. 완료 기준은 긴 콘텐츠로도 동작하고 원본 변경이 사용처에 반영되는 것입니다. 6주 와이어프레임에 이 컴포넌트를 적용하면서 필요한 상태만 추가합니다.

더 읽어보기

• Auto Layout 속성
• Figma 컴포넌트

연결된 PBL 미션과 VOD

PM은 ‘PM업무, 강의 하나로 정리하기’, Figma는 ‘Figma로 앱 디자인부터 포트폴리오까지’를 뜻합니다.

강좌 안내: 참고 강좌 1 · 참고 강좌 2. 이 문서는 영상 전체를 옮긴 전사 자료가 아닙니다. 세부 내용은 위 공식 문서에서 확인합니다.