피그마 페이지 구성이 막막하다고요? 깔끔한 구조 설계, 이것만 그대로 따라 하세요
피그마 페이지 구성이 막막하다고요? 깔끔한 구조 설계, 이것만 그대로 따라 하세요
피그마 프로젝트에 초대받아 들어갔을 때, 왼쪽 사이드바에 Page 1만 덩그러니 놓여 있지는 않나요?
피그마는 캔버스가 무한이라 멋있지만, 정리가 안 되면 곧바로 미로가 됩니다. 그리고 미로의 끝에는 이런 말이 기다립니다.
“최신 기획안이… 어디였더라?” 🧭
이 글에서는 기획자가 페이지 구조를 어떻게 설계해야 나중에 봐도 길을 잃지 않고, 디자이너/개발자가 “이 기획자 일 잘하네!”라고 느끼는지, 표준 템플릿으로 정리했습니다. 그대로 따라만 하세요.
1) 페이지 구조화가 왜 중요한가요?
피그마는 “무한 캔버스”를 제공하지만, 관리가 안 된 프로젝트는 미로와 같습니다. 페이지 구조는 그 미로에 붙이는 지도예요.
- 가독성: 원하는 화면을 찾는 시간을 확 줄입니다.
- 버전 관리: “최신 기획안이 무엇인지”가 명확해집니다.
- 협업 효율: 디자이너와 개발자가 의도를 한눈에 파악합니다.
결론: 페이지 구조는 ‘예쁨’이 아니라 속도를 만드는 장치입니다.
2) 따라만 하면 끝! 표준 페이지 구성 5종 세트
왼쪽 사이드바의 Pages 영역에서 새 페이지를 추가하고, 아래 순서로 만들어 보세요.
① 📋 [Notice] 프로젝트 개요
- 용도: 프로젝트 목적, 범위, 참고 링크(기획 문서/슬랙 채널/회의록), 담당자 연락처를 한 곳에 모읍니다.
- 내용: 이미지 없이 텍스트만으로 “이 프로젝트는 무엇인가?”를 정의합니다.
- 추천 구성:
- 프로젝트 한 줄 정의
- 이번 스프린트 목표
- 참고 링크 모음(문서/티켓/회의록)
- 담당자/의사결정자
② 🏗️ [IA] 정보 설계 & 플로우
- 용도: 서비스 구조(메뉴 트리)와 사용자 흐름을 정리합니다.
- 내용: 텍스트 + 화살표(→)만으로도 충분합니다.
- 추천 텍스트 포맷:
- 홈 → 검색 → 상세 → 결제 → 완료
- 로그인 실패 → 에러 → 재시도
③ ✍️ [Draft] 기획 중 (Main)
- 용도: 지금 “작성 중”인 공간입니다. 손이 가장 많이 가는 페이지.
- 운영 규칙: 기획이 확정되면 [Final]로 이동시키고, Draft는 “항상 작업 중인 최신 초안”만 남깁니다.
- 한 줄 원칙: Draft에는 “결정 중”이 있어도 되고, Final에는 “결정된 것”만 있어야 합니다.
④ ✅ [Final] 기획 완료 (Dev)
- 용도: 개발/디자인이 최종 확인해야 하는 확정본입니다.
- 팁: 페이지 이름 뒤에 날짜를 붙이면 혼선이 줄어듭니다.
- 예시: [Final] 결제_전달완료_260201
- 운영 규칙: Final은 “토론”이 아니라 “참조” 페이지입니다. 댓글도 ‘질문’보다 ‘확인’ 중심으로 남기는 편이 깔끔합니다.
⑤ 📦 [Archive] 히스토리 관리
- 용도: 이전 버전/폐기된 시안/과거 논의 결과를 보관합니다.
- 중요: 삭제하기 아깝지만, 메인 목록에 두면 헷갈리는 것들은 전부 여기로.
- 추천 방식: “날짜 폴더 느낌”으로 섹션을 나눠도 좋습니다(텍스트 구분선 활용).
이 5개 페이지만 깔아도, 프로젝트는 ‘정돈된 책장’이 됩니다. Page 1은 이제 퇴근해도 됩니다. 💤
3) 페이지 네이밍 규칙: 접두사·상태·날짜
페이지 구조의 완성은 “페이지 이름”에서 결정됩니다. 추천 규칙은 아래 조합입니다.
- 접두사: [Notice] [IA] [Draft] [Final] [Archive]
- 상태: Working / Review / Done (또는 이모지로 표시)
- 날짜: 260201 같은 6자리 또는 2026-02-01
추천 예시
- [Draft] 홈_검색_작업중
- [Final] 결제_전달완료_2026-02-01
- [Archive] 결제_v0.9_2026-01-20
핵심: “누가 봐도 최신이 뭔지”가 이름만으로 판독되면 성공입니다.
4) 가독성을 높이는 텍스트 팁: 이모지·구분선(디바이더)
이미지 없이도 페이지 목록을 깔끔하게 만드는 방법입니다.
4-1. 이모지로 상태를 직관적으로 표시
- 🚧 Working: 작업 중
- 👀 Review: 리뷰 요청
- ✅ Done: 확정/전달 완료
예: ✅ [Final] 결제_전달완료_260201
4-2. 구분선(페이지 디바이더)로 섹션 나누기
페이지가 늘어날수록 “목차”가 필요합니다. 이럴 때 빈 페이지를 구분선으로 만들면 목록이 정리됩니다.
- 예: ---------- 또는 ----- Final -----
- 팁: 디바이더는 “내용이 없는 빈 페이지”에서 만드는 편이 깔끔합니다.
5) 페이지 설계 시 주의할 점
5-1. 너무 세분화하지 마세요
페이지가 20개를 넘어가면 “정리”가 아니라 “새로운 혼돈”이 됩니다. 큰 기능 단위로 묶고, 상세는 섹션/프레임에서 나누는 편이 찾기 쉽습니다.
- 좋은 묶음: 홈 / 검색 / 상세 / 결제 / 마이
- 피하고 싶은 묶음: 홈_버튼정의 / 홈_텍스트정의 / 홈_예외케이스정의… (분열의 씨앗)
5-2. 네이밍 규칙을 팀에서 ‘한 번만’ 합의하세요
접두사([Draft]/[Final])와 날짜 포맷(YYYY-MM-DD 또는 YYMMDD)만 통일해도 협업 효율이 크게 오릅니다.
6) 기획자를 위한 피그마 정리 꿀팁(링크 공유·빠른 이동)
6-1. 특정 페이지 링크 복사로 “바로 그 자리” 소환하기
동료에게 “여기 봐주세요”라고 말로 설명하는 대신, 페이지 링크를 공유하면 정확히 착지합니다.
- 왼쪽 페이지 목록을 펼칩니다.
- 공유할 페이지 이름에서 마우스 오른쪽 클릭
- Copy link to page 선택
- 슬랙/메일/이슈에 붙여 넣기
6-2. 페이지 목록 사이 빠른 이동
키보드에 따라 Page Up/Down 또는 Mac의 fn + ↑/↓로 페이지 이동을 쓰는 경우가 많습니다. (환경에 따라 동작이 다를 수 있어 “손에 맞는 키”를 하나만 고정해 두는 게 좋습니다.)
7) 마지막 체크리스트
- [Notice][IA][Draft][Final][Archive] 5페이지가 존재하는가?
- Draft에는 “작업 중 최신”만, Final에는 “확정본”만 있는가?
- 페이지 이름에 접두사/상태/날짜 중 최소 2개 이상이 포함되어 있는가?
- 구분선(디바이더)로 섹션이 나뉘어 있어 목록이 읽히는가?
- 페이지 링크(Copy link to page)로 특정 위치 공유가 가능한가?
결론
깔끔한 페이지 구조는 협업의 시작입니다. 페이지는 단순한 목록이 아니라, 프로젝트의 “길 안내 표지판”이에요.
오늘은 복잡한 정리 대신, 표준 5페이지를 먼저 만들고 시작해 보세요.
정돈된 환경에서 기획은 더 빨리 확정되고, 질문은 줄고, 칭찬은… 가끔 따라옵니다. ✅
FAQ
Q Page 1만 있는 상태에서 뭘 먼저 만들어야 하나요?
A가장 먼저 [Notice]부터 만드세요. 프로젝트 목적/링크/담당자를 한 곳에 모아두면 이후 페이지가 늘어도 중심이 흔들리지 않습니다.
Q Draft와 Final을 굳이 나눠야 하나요?
A네. Draft는 “결정 중”, Final은 “결정됨”입니다. 이 구분이 없으면 개발자는 Draft를 보고 구현하기 시작하고, 다음날 Final이 바뀌면서 모두가 함께 흔들립니다.
Q 페이지가 너무 많아졌어요. 줄이는 기준이 있을까요?
A페이지는 “기능 단위”까지만 쪼개고, 그 안에서 상세는 섹션/프레임으로 분리하는 편이 좋습니다. 20페이지가 넘어가면 “정리 비용”이 “검색 비용”을 이기기 시작합니다.
Q 구분선(디바이더)은 어떻게 만드는 게 깔끔해요?
A내용이 없는 빈 페이지를 하나 만들고, 이름을 -----처럼 구분선 형태로 지정하면 목록이 훨씬 읽기 쉬워집니다.
Q 특정 페이지를 팀원에게 정확히 공유하려면 어떻게 하나요?
A페이지 이름에서 우클릭 후 Copy link to page를 사용하세요. 링크를 열면 해당 페이지로 바로 이동합니다.
Q View 권한(보기만 가능)인 사람도 페이지를 볼 수 있나요?
A보기 권한이 있어도 페이지를 탐색할 수 있고, 편집 권한이 있어야 페이지 생성/관리(추가/삭제/이름 변경)가 가능합니다.