기획자의 작업대

주니어 기획자를 위한 반응형 웹 기획서 필수 체크리스트 5가지 (Figma 기준) 주니어 기획자를 위한 반응형 웹 기획서 필수 체크리스트 5가지 “태블릿에서는요?” “글자 길어지면 내려가나요?” 그 질문을 받는 순간, 피그마 화면이 갑자기 ‘퀴즈’가 되는 경험… 익숙하죠. 반응형 기획은 화면을 줄이는 작업이 아니라 환경이 바뀔 때 지켜야 할 규칙 을 설계하는 일입니다. 키워드: 반응형 웹 기획서 · Figma · Auto Layout 목표: 개발 질문을 “대화”로 바꾸기 결과물: 기획서에 바로 붙여넣는 템플릿 포함 📚 목차 서론: 반응형 기획서가 ‘설계도’인 이유 본문: 반응형 웹 기획서 체크리스트 5가지 결론: 규칙 하나가 화면 열 개를 이긴다 FAQ: 실무에서 가장 많이 묻는 질문 서론: 반응형 기획서가 ‘설계도’인 이유 피그마로 예쁜 화면을 그렸는데 개발자에게 “태블릿에서는 어떻게 보여요?” , “텍스트 길면 줄바꿈 돼요?” 같은 질문을 받고 머릿속이 하얘지는 순간이 있습니다. 반응형 기획의 핵심은 픽셀 이 아니라 규칙 입니다. “이 화면은 360px에서 이렇게, 768px에서는 이렇게, 1200px 이상에서는 이렇게 행동한다”를 문서로 고정하면, 개발과 QA가 훨씬 빨라집니다. 아래 체크리스트 5가지는 주니어 기획자가 피그마(Figma)로 반응형 웹 기획서를 작성할 때 “절대 놓치면 안 되는 항목”만 뽑아 압축한 버전입니다. 본문: 반응형 웹 기획서 필수 체크리스트 5가지 (Figma 기준) ...

피그마 오토 레이아웃 지옥 탈출기: 기획서 수정 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은 “요소들이 줄 서는 규칙”을 정해주는 기능입니다. 예를 들어 버...