반응형디자인3 피그마 오토 레이아웃 (패딩, Fill Container, 반응형) 텍스트 하나 바꿨을 뿐인데, 버튼 크기가 틀어지고 카드 레이아웃이 무너진 경험이 있으신가요? 저는 그 상황을 수십 번 반복하다가 오토 레이아웃을 제대로 배웠습니다. 배우고 나서 든 첫 번째 생각은 "왜 이걸 이제야 알았지"였습니다. 피그마 오토 레이아웃이 실무에서 어떻게 작동하는지, 직접 겪어보니 무엇이 달라지는지 솔직하게 풀어보겠습니다.패딩과 갭, 이 두 가지가 레이아웃의 전부다오토 레이아웃(Auto Layout)을 처음 켰을 때 패널에 낯선 숫자들이 쭉 나열돼 있어서 당황했던 기억이 납니다. 그런데 막상 뜯어보면 개념은 단순합니다. 오토 레이아웃의 핵심을 구성하는 요소는 딱 두 가지입니다.첫 번째는 패딩(Padding)입니다. 패딩이란 프레임의 테두리와 내부 콘텐츠 사이의 여백을 말합니다. 상하좌우 .. 2026. 4. 13. 반응형 디자인 (브레이크포인트, 모바일 퍼스트, 하이브리드) 반응형 디자인은 "그냥 화면 크기에 맞게 줄이는 것"이 아닙니다. 브레이크포인트를 어디에 두느냐에 따라 같은 레이아웃이 완성작이 되기도 하고, 쓸 수 없는 화면이 되기도 합니다. 저도 처음엔 이 차이를 몰랐고, B2B SaaS 대시보드 프로젝트에서 혹독하게 배웠습니다.브레이크포인트를 잘못 잡으면 생기는 일일반적으로 반응형 디자인은 "퍼센트로 유동적으로 줄어드는 것"이라고 알려져 있습니다. 맞는 말이지만 절반만 맞습니다. 제 경험상 이건 좀 다릅니다. 퍼센트 기반으로 비율을 유지하며 축소되다가, 특정 해상도 구간에 진입하는 순간 레이아웃 자체가 전환되어야 합니다. 그 전환점이 바로 브레이크포인트(Breakpoint)입니다. 여기서 브레이크포인트란 화면 너비가 특정 수치에 도달했을 때 CSS 미디어 쿼리(M.. 2026. 4. 11. UI 그리드 시스템 (레이아웃, 반응형, 컴포넌트) 디자이너라면 한 번쯤 이런 상황을 겪어봤을 겁니다. 개발자에게 디자인을 넘겼더니 "이 간격은 몇 픽셀이에요?"라는 질문이 돌아오는 상황. 저도 초반에는 눈대중으로 간격을 맞추다가 핸드오프 때마다 설명에 지쳤습니다. 그 문제를 해결해준 것이 바로 그리드 시스템이었습니다.레이아웃, 어디서부터 시작해야 할까UI 디자인에서 레이아웃이란 화면 안에 텍스트, 이미지, 버튼, 여백 같은 구성 요소를 어디에 어떻게 배치할지 결정하는 작업입니다. 단순히 예쁘게 나열하는 것이 아니라, 사용자가 정보를 읽는 순서와 흐름을 설계하는 일입니다.그리드 시스템(Grid System)은 이 레이아웃을 일관된 규칙으로 구조화하는 체계입니다. 여기서 그리드란 격자판처럼 화면을 일정한 단위로 나누어 요소들이 그 안에 정렬되도록 안내하는 .. 2026. 4. 9. 이전 1 다음
