오토레이아웃2 피그마 오토 레이아웃 (패딩, Fill Container, 반응형) 텍스트 하나 바꿨을 뿐인데, 버튼 크기가 틀어지고 카드 레이아웃이 무너진 경험이 있으신가요? 저는 그 상황을 수십 번 반복하다가 오토 레이아웃을 제대로 배웠습니다. 배우고 나서 든 첫 번째 생각은 "왜 이걸 이제야 알았지"였습니다. 피그마 오토 레이아웃이 실무에서 어떻게 작동하는지, 직접 겪어보니 무엇이 달라지는지 솔직하게 풀어보겠습니다.패딩과 갭, 이 두 가지가 레이아웃의 전부다오토 레이아웃(Auto Layout)을 처음 켰을 때 패널에 낯선 숫자들이 쭉 나열돼 있어서 당황했던 기억이 납니다. 그런데 막상 뜯어보면 개념은 단순합니다. 오토 레이아웃의 핵심을 구성하는 요소는 딱 두 가지입니다.첫 번째는 패딩(Padding)입니다. 패딩이란 프레임의 테두리와 내부 콘텐츠 사이의 여백을 말합니다. 상하좌우 .. 2026. 4. 13. 피그마 대시보드 디자인 (레이아웃 그리드, 컴포넌트, 컬러 시스템) 대시보드 디자인에서 개발팀 피드백 1위는 단연 "간격이 화면마다 다르다"입니다. 저도 프리랜서 5년 차가 되기 전까지 이 말을 귀에 못이 박히도록 들었습니다. 레이아웃 그리드 하나 제대로 안 잡고 눈대중으로 요소를 쌓아올렸던 시절 얘기입니다. 피그마로 대시보드를 처음부터 완성하는 과정을 정리하면서, 제가 실제로 겪은 시행착오와 그걸 어떻게 넘었는지 함께 풀어보겠습니다.레이아웃 그리드와 컴포넌트 구조: 디자인 일관성의 실체1920x1080 해상도 프레임에 레이아웃 그리드를 설정하는 것이 대시보드 작업의 첫 단추입니다. 레이아웃 그리드란 화면을 일정한 컬럼과 여백으로 나누어 요소를 정렬하는 기준 격자를 말합니다. 쉽게 말해 도화지에 미리 줄을 그어두는 것과 같습니다. 마진 32, 거터 0 설정으로 콘텐츠 영.. 2026. 4. 10. 이전 1 다음
