기획자의 작업대

기획서용 화면 시안 ‘깨짐’ 방지: Figma Constraints 실전 가이드 기획서용 화면 시안 ‘깨짐’ 방지 : Figma Constraints 실전 가이드 서론 기획서에 들어갈 화면 시안을 Figma로 만들고 나면, 꼭 한 번은 이런 일을 겪습니다. “처음엔 멀쩡했는데… 화면 폭을 조금만 늘리면 버튼이 밀리고, 텍스트가 튀고, 카드 간격이 와르르 무너진다.” 마치 레이아웃이 젤리처럼 흔들리죠. (젤리는 맛있지만… 화면은 아니잖아요 🍮) 이 문제는 대개 Constraints 를 제대로 잡지 않아서 생깁니다. Auto Layout이 “컨테이너 안에서 요소가 줄 서는 규칙”이라면, Constraints는 “프레임 크기가 변할 때 요소가 어디에 붙어 있을지(고정/확장/중앙정렬)를 결정하는 규칙”입니다. 이 글에서는 Figma Constraints의 핵심 개념 부터, 기획서용 화면 시안에서 자주 쓰는 실전 설정 , 그리고 Auto Layout과 함께 사용할 때의 기준 까지 “깨짐 방지”에 초점을 맞춰 정리합니다. 이 글을 읽고 나면: 화면을 리사이즈해도 레이아웃이 덜 무너지고, 기획서 이미지 추출/전달이 훨씬 편해집니다. 📚 목차 Constraints가 정확히 뭐예요? 화면 시안이 깨지는 대표 원인 5가지 Left/Right/Center 한 장 비교표(저장용) Constraints 기본 옵션 한 번에 이해하기 기획서 시안에서 자주 쓰는 실전 패턴 6가지 Auto Layout과 Constraints, 같이 쓸 때 기준 깨짐 방지 체크리스트(발행 전 1분 점검) 결론 FAQ ...

기획자용 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은 “요소들이 줄 서는 규칙”을 정해주는 기능입니다. 예를 들어 버...