기획자의 작업대

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

"기획서는 피그마에 있습니다" | 따로 문서 만들지 않는 피그마 스펙(Spec) 작성법 "기획서는 피그마에 있습니다" - 따로 문서 만들지 않는 '피그마 스펙' 작성법 피그마에서 화면을 수정하면 노션 기획서 스크린샷도 다시 찍고, 정책도 고치고, 링크도 갈아끼우고… 이건 기획이 아니라 복붙(CTRL+C/CTRL+V) 올림픽 입니다. 🥲 이제 화면과 기획서를 분리하지 마세요. 피그마를 단순한 디자인 툴이 아니라 살아있는 기획서(Spec) 로 만드는 방법을 정리했습니다. 목표는 하나, 팀원이 묻기 전에 파일이 답하게 만들기입니다. 📚 목차 왜 '피그마 네이티브' 기획서인가? 따로 문서 만들지 않는 3가지 레이아웃 전략 개발자가 읽기 편한 스펙 기술 가이드 (Data/Logic/Interaction/Edge) Dev Mode로 스펙을 '링크+주석+상태'로 완성하기 피그마 스펙이 지저분해지지 않게 만드는 정리 규칙 공유 전 5분 점검 체크리스트 FAQ 1) 왜 '피그마 네이티브' 기획서인가? 화면과 정책이 한곳에 모이면 협업 효율이 확 올라갑니다. 피그마 네이티브 기획서의 핵심 가치는 아래 3가지입니다. Single Source of Truth : "어디가 최신이에요?" 질문이 사라집니다. 맥락 유지 : 기능을 보면서 바로 옆에서 정책을 읽으면 오해가 줄어듭니다. 업데이트 부담 감소 : 화면이 바뀌면 기획서도 사실상 같이 바뀝니다. (스크린샷 재촬...

"말보다 화면으로 보여주세요" – 기획자의 피그마 프로토타이핑 생존기 "말보다 화면으로 보여주세요" – 기획자의 피그마 프로토타이핑 생존기 "이 버튼을 누르면 어디로 가나요?", "팝업이 뜨는 건가요, 페이지가 바뀌는 건가요?" 기획서 리뷰 시간에 질문 폭탄을 맞아 손이 마르는 경험이 있다면, 이제 프로토타이핑(Prototyping) 을 시작할 타이밍입니다. 여기서 중요한 포인트는 하나입니다. 기획자의 프로토타입 목표는 ‘화려함’이 아니라 논리적 근거를 클릭으로 증명 하고 UX 결함을 사전에 검증 하는 것입니다. 📚 목차 기획자가 프로토타이핑을 해야 하는 3가지 이유 기획자를 위한 핵심 기능 2개: Navigate to, Open overlay Navigate to로 유저 플로우를 “한 번에” 보여주는 법 Open overlay로 팝업/바텀시트를 “현실처럼” 만드는 법 프로토타입 공유 전 자가점검 체크리스트(Dead-end 제거) 20분 생존 루틴: 해피 패스만 빠르게 연결하는 순서 주석 템플릿: 개발자/디자이너 질문을 미리 막는 문장 FAQ 1) 기획자가 프로토타이핑을 해야 하는 3가지 이유 프로토타이핑은 “보기 좋아서”가 아니라 기획자의 생존과 직결됩니다. 커뮤니케이션 비용 절감 : 백 마디 설명보다 한 번의 클릭이 정확합니다. UX 논리 검증 : 정적인 화면에선 보이지 않는 막다른 길(Dead-end), 불필요한 단계가 튀어나옵니다. 의사결정권자 설득 : "왜 여기 있어요?"에 "직접 ...

커뮤니케이션의 완성: 데브 모드(Dev Mode)를 활용한 친절한 기획서 작성법 커뮤니케이션의 완성: 데브 모드(Dev Mode)를 활용한 친절한 기획서 작성법 기획자가 피그마에서 화면 설계를 마쳤다고 해서 기획이 끝난 건 아닙니다. 진짜 완성은 개발자가 내 의도를 100% 이해하고 구현에 착수 하는 순간에 옵니다. 이제는 PPT/노션에 캡처를 붙여 설명하지 않아도 됩니다. 피그마의 데브 모드(Dev Mode) 와 몇 가지 장치만으로도 충분히 ‘친절한 기획서’를 만들 수 있어요. 📚 목차 Dev Mode, 기획자가 왜 알아야 할까? 친절한 기획서의 뼈대: 3단 구조(상태-주석-링크) 섹션(Section)과 Ready for dev로 “여기부터 개발하세요” 표시하기 Annotation(주석)으로 ‘로직’을 레이어에 직접 고정하기 [추가] 화면 유형별 Annotation 템플릿(목록/상세/폼/결제) 컴포넌트 이름/라이브러리 유지가 Dev Mode에서 빛나는 이유 Dev resources로 Jira/Notion 링크를 “레이어에 붙이는” 방법 Variables로 다크모드·다국어까지 Dev Mode에서 확인 가능하게 기획서 퀄리티를 올리는 마지막 1%: 스펙 자동화 개발자가 바로 코딩하는 Dev Mode 체크리스트 FAQ 1) Dev Mode, 기획자가 왜 알아야 할까? Dev Mode는 개발자가 디자인을 코드로 옮기기 쉽게 돕는 환경입니다. 기획자가 이 환경을 이해하면 “전달”이 아니라 “구현 시작”을 만들어낼 수 있습니다. 정확한 데이터 전달 : 텍스트...

[기획자 편] 효율적인 화면 설계를 위한 피그마 라이브러리 운용 가이드 [기획자 편] 효율적인 화면 설계를 위한 피그마 라이브러리 운용 가이드 많은 서비스 기획자가 피그마를 쓰면서 가장 많이 하는 실수는, 디자인 시스템이 담긴 라이브러리(Library) 를 ‘도구함’이 아니라 ‘내 마음대로 수정하는 스케치북’으로 착각하는 겁니다. 기획자의 피그마 숙련도는 화려한 디자인 실력이 아니라 정해진 규격을 얼마나 정확하게 가져다 쓰느냐 에서 갈립니다. 오늘은 디자이너·개발자에게 사랑받는 기획자가 되기 위한 라이브러리 운용법(가져다 쓰되, 망치지 않기) 을 실무 기준으로 정리합니다.  📚 목차 라이브러리 사용의 대원칙: “가져다 쓰되, 망치지 않기” 왜 ‘Instance(인스턴스) 유지’가 중요한가? 효율적인 화면 설계를 위한 3단계 운용법 Detach(연결 해제) 지양: 부채가 되는 순간 디자이너와 평화롭게 협업하는 체크리스트 라이브러리에 없는 UI가 필요할 때: 기획자의 정석 요청법 FAQ 1) 라이브러리 사용의 대원칙: “가져다 쓰되, 망치지 않기” 라이브러리는 ‘제약’이 아니라 가이드레일 입니다. 기획자는 새로운 UI를 창조하는 역할보다, 라이브러리 안에서 최적의 컴포넌트를 선택해 배치(Layout) 하고 의도를 명확히 전달 하는 데 집중할수록 팀 생산성이 올라갑니다. 이 원칙을 지키는 가장 쉬운 방법은 단 하나예요. ✅ Instance(인스턴스) 상태를 유지한 채 사용하기 2) 왜 ‘Instance(인스턴스) 유지’가 중요한가? 라이브러리의 Main Component(원본)를 직접 만지는 순간, 협업의 평화가 흔들립니다. 반대로 인스턴스를 유지 하면...