기획자의 작업대

피그마 오토 레이아웃 지옥 탈출기: 기획서 수정 10배 빨라지는 법, 이것만 그대로 따라 하세요 피그마 오토 레이아웃 지옥 탈출기: 기획서 수정 10배 빨라지는 법, 이것만 그대로 따라 하세요 기획서에 글자 몇 자 추가했을 뿐인데, 뒤에 있는 박스를 일일이 밀고 크기를 조절하느라 시간을 다 써버리나요? 그 순간 피그마는 “협업 툴”이 아니라 “수동 노동 시뮬레이터”가 됩니다. 🧱 하지만 오토 레이아웃(Auto layout)을 쓰면, 프레임(그릇)이 콘텐츠(내용물)에 맞춰 자동으로 늘고 줄고, 리스트는 자동으로 밀리고, 간격은 균일하게 유지됩니다. 최신 UI에서도 당황하지 않도록, 기획자가 가장 자주 쓰는 기능만 뽑아 “바로 따라하는 순서”로 정리했습니다. 📚 목차 오토 레이아웃, 기획자에게 왜 필요한가요? 3초 만에 만드는 자동 조절 버튼(실전) 업데이트된 패널에서 간격/패딩 조절하기(3개만 기억) 리스트 수정/추가/순서 변경을 “자동화”하는 법 기획자를 위한 오토 레이아웃 생존 팁(해제, Hug vs Fill, 무시하기) 30초 체크리스트 FAQ 1) 오토 레이아웃, 기획자에게 왜 필요한가요? 오토 레이아웃은 한 줄로 말하면 이겁니다. “내용물이 바뀌면, 그릇과 정렬이 알아서 따라온다.” 수정의 자유 : 텍스트를 늘리면 버튼/박스가 자동으로 늘어납니다. 간격 유지 : 항목을 추가하면 아래 요소들이 자동으로 밀려납니다. 정렬의 일관성 : ‘이거 1px 어긋났나?’ 같은 불안을 줄입니다. 기획자 관점에서 가장 큰 이득은 “수정할 때마다 레이아웃 다시 잡는 시간”이 사라진다는 점입니다. 2) 3초 만에 만...

기획자용 Figma Auto Layout: 화면 수정해도 안 무너지는 레이아웃 만들기 기획자용 Figma Auto Layout: 화면 수정해도 안 무너지는 레이아웃 만들기 서론 Figma를 쓰다 보면, 처음엔 “그럴듯하게” 화면이 만들어집니다. 문제는 그 다음입니다. 텍스트가 길어지거나, 버튼이 하나 더 붙거나, 리스트가 한 줄 늘어나는 순간… 레이아웃이 와르르 무너지고, 다시 정렬하느라 시간이 녹아내립니다. (이때 마우스는 갑자기 삽 이 됩니다 🥄) 해결책은 의외로 단순합니다. Auto Layout 으로 “규칙”을 세워두면, 화면이 수정되어도 간격과 정렬이 자동으로 유지됩니다. 이 글에서는 기획자가 실무에서 바로 적용할 수 있도록, Auto Layout 핵심 개념 부터 버튼/리스트/카드 예제 , 그리고 초보가 자주 하는 실수 까지 한 번에 정리해 보겠습니다. 오늘의 목표: Auto Layout의 핵심 4요소(방향/간격/패딩/정렬)만 잡고도 “수정해도 안 깨지는” 화면을 만든다. 📚 목차 Auto Layout이 정확히 뭐예요? Auto Layout이 필요한 순간 3가지 핵심 4요소: 방향·간격·패딩·정렬 Hug / Fill / Fixed 이해하기 실전 예제 3개(버튼·리스트·카드) 초보가 자주 하는 실수 7가지(해결 포함) 기획자 실무 팁: 전달/검수 포인트 결론 FAQ 본론 1) Auto Layout이 정확히 뭐예요? Auto Layout은 “요소들이 줄 서는 규칙”을 정해주는 기능입니다. 예를 들어 버...