AI야, 기획 아이디어 줄래?

반응형 웹 기획이 처음인가요? 화면 너비와 그리드 설정, 이것만 따라 하세요 반응형 웹 기획이 처음인가요? 화면 너비와 그리드 설정, 이것만 따라 하세요 모바일에서 보든, PC에서 보든 자연스럽게 화면이 변하는 ‘반응형 웹’. 그런데 기획자가 피그마 캔버스를 “그냥 크게”만 쓰면, 협업은 곧바로 이런 대화로 굴러갑니다. “이 화면은 1440 기준이에요? 1920이에요? 콘텐츠 폭은요?” 😵‍💫 정답은 하나입니다. 디자이너·개발자와 약속한 표준 규격 안에서 기획 해야 수정과 소통 비용이 확 줄어듭니다. 오늘은 “웹 기획서는 가로를 몇 px로 잡아야 하나요?”에 바로 답하는, 초보 기획자용 기준 세트를 드릴게요. 📚 목차 웹 기획의 표준, 프레임(Frame) 사이즈 정하기 반응형 기획 체크포인트(모바일·태블릿·데스크톱) 반응형의 핵심, 그리드(Layout Grid) 설정하기 기획자가 꼭 알아야 할 안전 영역(Safe Area) 8단위 법칙: 간격의 마법(8px 룰) 초보 기획자 사이즈 팁(폰트·배율) 30초 체크리스트 FAQ 1) 웹 기획의 표준, 프레임(Frame) 사이즈 정하기 기획자는 “구현 가능한 설계도”를 만드는 사람입니다. 설계도는 자부터 맞춰야 해요. ✅ 데스크톱(PC 웹) 기준: 1440px 추천 : 1440px을 ‘작업 기준 프레임’으로 잡습니다. 이유 : 피그마의 데스크톱 프리셋이 1440 폭을 기준으로 제공되는 경우가 많아 협업 기준점으로 쓰기 좋습니다. 주의 : 1440은 “최대 화면”이 아니라 “기획 기준”입니다. 실제 구현은 반응형으로 늘고 줄 수 있어야 합니다. ✅ 모바일(모바일...

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

피그마 페이지 구성이 막막하다고요? 깔끔한 구조 설계, 이것만 그대로 따라 하세요 피그마 페이지 구성이 막막하다고요? 깔끔한 구조 설계, 이것만 그대로 따라 하세요 피그마 프로젝트에 초대받아 들어갔을 때, 왼쪽 사이드바에 Page 1 만 덩그러니 놓여 있지는 않나요? 피그마는 캔버스가 무한이라 멋있지만, 정리가 안 되면 곧바로 미로 가 됩니다. 그리고 미로의 끝에는 이런 말이 기다립니다. “최신 기획안이… 어디였더라?” 🧭 이 글에서는 기획자가 페이지 구조를 어떻게 설계해야 나중에 봐도 길을 잃지 않고 , 디자이너/개발자가 “이 기획자 일 잘하네!” 라고 느끼는지, 표준 템플릿으로 정리했습니다. 그대로 따라만 하세요. 📚 목차 페이지 구조화가 왜 중요한가요? 따라만 하면 끝! 표준 페이지 구성 5종 세트 페이지 네이밍 규칙: 접두사·상태·날짜 가독성을 높이는 텍스트 팁: 이모지·구분선(디바이더) 페이지 설계 시 주의할 점 기획자를 위한 피그마 정리 꿀팁(링크 공유·빠른 이동) 마지막 체크리스트 FAQ 1) 페이지 구조화가 왜 중요한가요? 피그마는 “무한 캔버스”를 제공하지만, 관리가 안 된 프로젝트는 미로 와 같습니다. 페이지 구조는 그 미로에 붙이는 지도 예요. 가독성 : 원하는 화면을 찾는 시간을 확 줄입니다. 버전 관리 : “최신 기획안이 무엇인지”가 명확해집니다. 협업 효율 : 디자이너와 개발자가 의도를 한눈에 파악합니다. 결론: 페이지 구조는 ‘예쁨’이 아니라 속도 를 만드는 장치입니다. 2) 따라만 하면 끝! 표준 페이지 구성 5종 세트 왼쪽 사이드바의 Pages 영역에서 새 페이...

Figma 에셋 가져오기: 초보 기획자도 실수 없는 컴포넌트 활용 기술 Figma 에셋 가져오기: 초보 기획자도 실수 없는 컴포넌트 활용 기술 디자이너가 공들여 만든 버튼, 입력창, 아이콘들… 기획서에 넣고 싶은데 방법을 몰라서 사각형부터 그리고 계셨나요? 그 사각형, 마음은 따뜻하지만 결과물은 “임시” 티가 납니다. 😇 Figma의 에셋(Assets) 기능을 쓰면 클릭 몇 번으로 실제 서비스와 동일한 컴포넌트 를 기획서에 배치할 수 있어요. 복잡한 매뉴얼 대신, 이 글 순서대로만 따라오면 됩니다. 📚 목차 에셋(Assets) 패널 위치 확인하기 원하는 컴포넌트 광속으로 찾는 법 기획서로 에셋 가져오기 (드래그 앤 드롭) 초보 기획자가 자주 하는 실수 방지 가이드 아이콘/버튼 교체하기: 스왑(Instance Swap) 요령 기획 퀄리티 2배 올리는 에셋 활용 꿀팁 마지막 체크리스트 FAQ 1) 에셋(Assets) 패널 위치 확인하기 왼쪽 사이드바에는 보통 Layers 와 Assets 탭이 있습니다. Layers(레이어) : 지금 페이지에 있는 요소 목록(현재 캔버스의 “재료 목록”). Assets(에셋) : 디자이너가 만들어 둔 컴포넌트(부품) 목록 (우리에게 필요한 “정품 부품 창고”). 빠른 이동 단축키 Assets 열기 : Windows Alt + 2 / Mac Option(⌥) + 2 Layers 열기 : Windows Ctrl + 1 / Mac Option(⌥) + 1 포인트 : “기획서는 Layers가 아니라 Assets에서 ‘부품을 꺼내 쓰는’ 문서”라고 생각하면...

디자인 툴이 무서운 기획자를 위한 가이드: 프로젝트 세팅부터 기획안 작성까지 이것만 따라 하세요 디자인 툴이 무서운 기획자를 위한 가이드: 프로젝트 세팅부터 기획안 작성까지 이것만 따라 하세요 요즘은 프로젝트에서 기획서를 피그마로 작성하는 경우가 많아 지고 있습니다. 제가 지금 진행하는 프로젝트도 피그마로 기획서를 작성하고 있는데요, 몇년간 PPT로 기획서를 작성하다가 오랫만에 피그마로 작성하다 보니 저도 어떻게 사용했었지 라는 생각이 먼저 들더라고요. 그래서 오늘 글은 피그마를 오랫만에 접속했거나, 처음 접하는 분들을 위해 피그마로 기획서 작성 시 어떻게 사용해야 하는지에 대한 글을 작성합니다. 디자이너에게서 피그마 초대 메일을 받고, 링크를 클릭하는 손가락이 갑자기 무거워진 경험 있으신가요? “이거… 내가 만지면 레이아웃 폭발하는 거 아냐?” 같은 불안이 올라오는 순간이요. 하지만 기획자에게 피그마는 ‘디자인 툴’이라기보다 무한히 넓은 화이트보드 에 더 가깝습니다. 오늘 글은 이미지 한 장 없이, 텍스트만으로 피그마에서 기획서를 완성하는 방법을 “진짜 순서대로” 정리했습니다. 이대로 따라 하면, 최소한 이런 말은 안 하게 됩니다: “저는… 그냥 메모장으로 드릴게요.” 이 글을 따라 하면 얻는 것 내 기획안을 적을 안전한 내 영역 을 만들 수 있음 텍스트만으로도 위계가 선명한 기획서 구조 를 잡을 수 있음 댓글로 디자이너/개발자와 논리적으로 커뮤니케이션할 수 있음 실수해도 되돌릴 수 있는 생존 단축키 까지 손에 익힘 📚 목차 입장하자마자 10초 체크 프로젝트 접속과 내 영역 확보하기 텍스트 도구로 기획안 작성하기 기획서의 구조 잡기: 위계 템플릿 사용자 흐름을 텍스트로 박제하기 ...