모바일에서 열을 쌓으려면 어떻게 하나요?
Column 레이어가 들어 있는 Row 레이어를 선택하고 플러그인 헤더의 Settings 버튼을 클릭한 다음 Stack Columns in this Row를 켜세요. 기본적으로 이렇게 하면 모바일에서 Row의 열이 하나의 열로 쌓여요.
모바일에서 열이 쌓이지 않는 이유는 뭔가요?
해당 Row에서 Stack Columns in this Row가 꺼져 있거나, 모바일에서도 한 행에 열을 두 개 이상 유지하도록 Row가 설정되어 있으면 열이 쌓이지 않아요. 일부 프리셋 컴포넌트는 프리셋 디자인에 맞게 모바일 쌓기가 기본으로 꺼져 있을 수도 있어요.
해결하려면 Row를 선택하고 Settings를 연 다음 Stack Columns in this Row를 켜세요. 각 열이 위아래로 하나씩 표시되게 하려면 1 Column Per Row on Mobile을 선택하세요.
기본적으로 디자인의 모든 Column 레이어는 모바일에서 쌓이도록 설정돼요(의도에 맞게 이 설정이 미리 꺼져 있는 프리셋 컴포넌트를 사용하는 경우는 제외예요).
모바일에서의 이 동작을 바꾸려면 Row 레이어를 클릭하고 플러그인 헤더의 Settings 버튼을 클릭한 다음 Stack Columns in this Row 토글 옵션을 켜거나 끄세요.
Row에 Column 레이어를 2개보다 많이 사용한다면 쌓기 설정을 유지하는 것을 고려해 보세요. 그렇지 않으면 작은 모바일 기기 화면에서 열 안의 콘텐츠가 매우 좁고 작아질 수 있어요.
모바일에서 쌓이는 열 개수 재정의하기
기본적으로 Stack Columns in this Row 토글 옵션을 켜면 Row의 모든 Column 레이어가 하나의 열로 쌓이지만, 원한다면 플러그인에서 토글 옆의 드롭다운 선택기에서 아래 옵션 중 하나를 골라 이를 재정의할 수 있어요.
- 1 Column Per Row on Mobile
- 2 Columns Per Row on Mobile
- 3 Columns Per Row on Mobile
- 4 Columns Per Row on Mobile
예를 들어 이메일에 Column이 4개인 Row가 있다면 2 Columns Per Row on Mobile 옵션을 선택할 수 있어요. 그러면 모바일에서 볼 때 열이 2행에 걸쳐 2열로 쌓여 4칸짜리 “그리드”로 표시돼요.
열 개수에 맞는 드롭다운 값만 선택하세요. 예를 들어 디자인의 Row에 열이 2개뿐인데 드롭다운 옵션을 3 Columns Per Row on Mobile로 설정하면 두 열의 너비가 각각 33%가 돼요. 그러면 모바일에서 화면 너비를 다 채우지 못해 레이아웃이 깨지거나 이상해 보일 수 있어요.
모바일 열 행의 세로 정렬 재정의하기
모바일에서도 Row에 여러 Column 레이어가 나란히 유지된다면, 해당 모바일 행에서 열끼리 세로로 어떻게 정렬될지도 재정의할 수 있어요. Row 레이어를 클릭하고 Mobile Column Vertical Alignment 토글을 켠 다음, 옆의 드롭다운 선택기에서 Top, Middle, Bottom 중 하나를 고르세요.
이 모바일 세로 정렬 재정의는 모바일에서도 Row에 여러 열이 남아 있을 때만 사용할 수 있어요. 즉, 다음 중 하나에 해당해야 해요.
- Stack Columns In This Row 토글이 꺼져 있거나,
- 토글이 켜져 있고 드롭다운이 1 Column Per Row on Mobile보다 큰 값으로 설정되어 있는 경우
Settings를 연 다음 Figma에서 같은 유형의 Emailify 레이어를 여러 개 선택하면 설정을 일괄 적용할 수 있어요. 변경한 설정은 선택한 모든 레이어에 적용돼요.