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

"기획서는 피그마에 있습니다" | 따로 문서 만들지 않는 피그마 스펙(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(원본)를 직접 만지는 순간, 협업의 평화가 흔들립니다. 반대로 인스턴스를 유지 하면...

[기획자 가이드] 스웨거(Swagger) 문맹 탈출! API 명세서 핵심만 읽는 법 [기획자 가이드] 스웨거(Swagger) 문맹 탈출! API 명세서 핵심만 읽는 법 개발자가 슬랙으로 보낸 의문의 URL 하나. 눌렀더니 영어와 코드가 가득한 스웨거(Swagger) 화면이 뜹니다. 그리고 따라오는 한 마디: “여기 API 다 나와 있으니 참고해서 기획해 주세요.” 이때 기획자의 뇌는 잠깐 멈추고, 손은 커피를 찾고, 마음은 “이거… 시험지인가?”가 됩니다. 그런데 스웨거를 ‘조금만’ 읽을 줄 알면, “이 데이터 화면에 그릴 수 있나요?” 같은 질문을 매번 던질 필요가 줄어듭니다. 오늘은 복잡한 화면 속에서 기획자가 꼭 확인해야 할 3가지 핵심 만, 실무에서 바로 써먹는 순서로 정리합니다. 📚 목차 스웨거(Swagger)가 대체 뭔가요? 기획자가 봐야 할 3대 핵심 읽는 법 “Try it out” 버튼 활용하기 (기획자의 무기) 보너스: 기획자가 자주 놓치는 4가지(인증·상태코드·페이징·필드명) 결론: API를 아는 기획자는 일정이 정확합니다 FAQ 참고 자료 1) 스웨거(Swagger)가 대체 뭔가요? 스웨거(대개 Swagger UI 화면을 의미)는 서버 개발자가 만든 API 설명서 입니다. 화면(프론트엔드)에서 서버에 데이터를 달라고 요청할 때, 어떤 주소로 , 어떤 형식으로 , 무슨 값을 넣어서 호출해야 하는지 적어둔 약속이죠. 기획자 관점에서는 “우리 서비스가 제공할 수 있는 재료 리스...