피그마 페이지 구성이 막막하다고요? 깔끔한 구조 설계, 이것만 그대로 따라 하세요

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

Figma 에셋 가져오기: 초보 기획자도 실수 없는 컴포넌트 활용 기술

이미지
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초 체크 프로젝트 접속과 내 영역 확보하기 텍스트 도구로 기획안 작성하기 기획서의 구조 잡기: 위계 템플릿 사용자 흐름을 텍스트로 박제하기 ...

2026 생계비통장 개설의 모든 것: 준비물, 신청방법, 유의사항

이미지
2026 생계비통장(생계비계좌) 개설의 모든 것: 준비물·신청방법·유의사항(월 250만원 압류방지) 2026 생계비통장(생계비계좌) 개설의 모든 것: 준비물, 신청방법, 유의사항 통장이 압류되는 순간 , 월세·식비·교통비까지 한꺼번에 얼어붙는 경우가 있습니다. 2026년 2월부터는 이런 ‘생활 마비’ 위험을 줄이기 위해 생계비통장(공식명: 생계비계좌) 제도가 시행됩니다. 이 글은 복잡한 설명을 걷어내고, 개설에 필요한 것 과 헷갈리기 쉬운 250만원 규칙 을 중심으로 정리했습니다. (복붙해서 체크리스트로 써도 됩니다 🧾) 한눈에 보기: 2026 생계비계좌 핵심 요약 항목 핵심 내용 시행 시기 2026년 2월 1일 부터 (일부 금융기관은 첫 영업일 기준 안내 가능) 개설 원칙 1인 1계좌 (중복 개설 불가) 보호 한도 월 최대 250만원 압류로부터 보호 누적 입금 한도 1개월 누적 입금도 250만원 제한 개설 가능 기관 은행, 저축은행, 상호금융(농협/수협/신협/새마을금고 등), 우체국 등   📚 목차 1) 생계비통장(생계비계좌)란? 무엇이 달라지나 2) 대상 및 개설 시기(“2월 1일 vs 2월 2일” 차이) 3) ‘월 250만원’ 규칙 제대로 이해하기 (잔액/누적입금) 4) 어디서 만들 수 있나: 개설 가능 금융기관 5) 개설 준비물 체크리스트 6) 신청방법: 비대면(앱) vs 대면(창구) 2단계 7) 유의사항 7가지 (중복개설·사칭·한도·이자) 8) (헷갈림 방지) 행복지킴이통장과 차이 결론 FAQ 참고자료(출처) 1) 생계...

붕어빵 가게 메뉴판 설계하기: 기획자를 위한 리액트 기능 단위 설계법

이미지
붕어빵 가게 메뉴판 설계하기: 기획자를 위한 리액트 기능 단위 설계법 붕어빵 가게 메뉴판 설계하기: 기획자를 위한 리액트 기능 단위 설계법 보통 기획자는 화면을 ‘페이지’ 단위로 생각합니다. “1번 페이지(홈)를 만들고, 2번 페이지(상세)를 만들자” 같은 방식이죠. 하지만 리액트(React) 개발자는 화면을 ‘컴포넌트의 조립’ 으로 봅니다. 이 시각 차이를 줄이지 못하면, 기획서의 양은 방대해지는데 개발 효율은 떨어지는 악순환이 생깁니다. 오늘은 붕어빵 가게의 메뉴판 을 설계하며, 리액트식 사고방식인 Thinking in React 를 실무 기획에 어떻게 적용할지 정리해 보겠습니다. 🐟 핵심 요약 (오늘 가져갈 3가지) Decomposition : 페이지를 ‘부품’으로 쪼개기 Hierarchy : 부품의 가족 관계(계층) 정하기 Reusability : 같은 부품을 다른 메뉴에도 재사용하기 📚 목차 페이지 중심 기획이 리액트에서 흔들리는 이유 1) 페이지가 아니라 ‘부품’으로 쪼개기(Decomposition) 2) 정보의 계층 구조 만들기(Hierarchy) 3) 재사용성을 고려한 설계(Reusability) 서비스 확장 컴포넌트 트리(메뉴판→장바구니→주문→결제) 1장 요약:...