16장. Figma Make 산출물
NOTE 섹션 문서화
Make 생성 화면과 기획 의도의 연결
Make가 생성한 화면은 시각적 결과물일 뿐이다. 기능의 목적, 상태 전환 로직, 데이터 요구사항, 이벤트 처리 방식을 명시하지 않으면 개발자와 디자이너는 추측에 의존하게 된다. NOTE 섹션은 Make 산출물에 맥락을 부여하는 문서화 레이어다.
Make는 프롬프트를 기반으로 화면을 생성하지만, 프롬프트에 담긴 비즈니스 로직과 제약사항은 화면에 표현되지 않는다. "장바구니가 비었을 때 추천 상품 4개를 보여줘"라는 지시는 화면으로 구현되지만, 추천 알고리즘이나 품절 처리 정책은 보이지 않는다. NOTE가 이 간극을 메운다.
Make 산출물 분석 방법
생성된 화면 해석
Make가 프롬프트를 통해 생성한 화면을 기획자가 직접 분석한다.
프롬프트 입력 예시:
"이커머스 상품 리스트 페이지를 만들어줘. 왼쪽에 필터, 오른쪽에 3열 그리드, 각 상품 카드에는 이미지, 제목, 가격, 할인율 표시"
↓ Make 생성 후 ↓
기획자의 화면 분석:
- 필터 영역이 실제로 왼쪽에 생성됐는가?
- 상품 카드에 요청한 요소가 모두 포함됐는가?
- 생성되지 않은 요소는 무엇인가?
- 예상과 다르게 생성된 부분은 무엇인가?
프롬프트와 결과물 대조
Make에 입력한 프롬프트와 실제 생성된 화면을 비교한다. 프롬프트를 실했다고 모든 화면이 적용되지 않는다.
프롬프트: "상품 카드에 할인율 배지 추가"
→ 생성 결과 확인:
✓ 배지가 생성됨 (우측 상단 빨간색)
✗ 할인율 숫자가 표시되지 않음
✗ 원가와 할인가 구분이 불명확
→ NOTE 작성 필요:
- 할인율 계산 로직
- 가격 표시 규칙
- 배지 표시 조건
Make → 디자인 변환
make로 작성된 페이지를 디자인파일로 복사한다. 모든 페이지가 복사되는 것이 아닌, 각 페이지별로 디자인 복사를 진행해야 한다.
우측 상단에 디자인 복사를 클릭하면 복사가 된다.
NOTE 섹션 구조화
섹션 생성 위치
Figma 페이지 구조:
03_Proto_FO 페이지
━━━━━━━━━━━━━━━━━
Section: Product List (Make 생성)
└─ Frame: List_Desktop
└─ Frame: List_Mobile
━━━━━━━━━━━━━━━━━
Section: Product List_NOTES
└─ Frame: NOTE_기능
└─ Frame: NOTE_상태
└─ Frame: NOTE_데이터
└─ Frame: NOTE_이벤트
1. 복사한 디자인 프레임을 선택한 후 그룹화. (섹션을 만들기 위해)
2. 그룹을 선택 후 메뉴(마우스 오른쪽 버튼)를 열어 섹션화 진행.
3. 섹션 이름 변경.
NOTE 만들기1. 이전에 만들어 놓았던 NOTE를 불러오거나 커뮤니티에서 "note"를 검색 후 템플릿 선택.
2. 노트 프레임(또는 그룹)을 NOTE용 섹션을 만들어 정리.
위의 NOTE 방법은 무료버전에서도 충분히 가능하다. 유료버전은 더 간단하고 간편하게 사용할 수 있다.
** 주석은 유료버전에서만 사용가능하며, 별도 레이어 없이 주석에 카테고리로 NOTE를 간편하게 활용할 수 있다.
NOTE 컴포넌트 배치 규칙
화면과 NOTE의 물리적 연결:
화면 프레임 우측 50px 간격
동일한 Y축 정렬
연결선(Connector) 추가
그룹핑으로 화면-NOTE 쌍 관리
기능 NOTE 작성
Make 요소별 목적 정의
N.Function.P20.01
━━━━━━━━━━━━━━━━━
필터 사이드바
목적: 상품 탐색 효율 향상으로 이탈률 감소
대상: 명확한 구매 의도가 있는 고객
시나리오: 카테고리 진입 후 세부 조건 설정
성공 지표: 필터 사용률 40%, 적용 후 전환율 5% 상승
Make 프롬프트: "왼쪽 고정 필터, 다중 선택 체크박스"
생성되지 않은 기능 명시
Make가 구현하지 못한 기능을 명확히 기록.
N.Function.P20.02
━━━━━━━━━━━━━━━━━
미구현: 필터 초기화 버튼
이유: Make 프롬프트 누락
필요성: 다중 필터 적용 후 원복 편의
구현 위치: 필터 상단 우측
참조: 무신사 필터 UI
상태 NOTE 작성
Make 화면의 상태 확장
Make는 주로 Idle 상태만 생성한다. 나머지 상태를 정의.
N.State.P20.01
━━━━━━━━━━━━━━━━━
상품 리스트 상태 매트릭스
Idle (Make 생성):
- 상품 12개 그리드 표시
- 페이지네이션 활성
Loading (추가 필요):
- 스켈레톤 UI 12개
- 애니메이션: shimmer effect
- 지속: 200ms-2s
Empty (추가 필요):
- 아이콘: 빈 박스 일러스트
- 메시지: "조건에 맞는 상품이 없습니다"
- CTA: "필터 초기화" 버튼
Error (추가 필요):
- 아이콘: 느낌표
- 메시지: "일시적 오류가 발생했습니다"
- CTA: "새로고침" 버튼
상태 전환 트리거
N.State.P20.02
━━━━━━━━━━━━━━━━━
상태 전환 조건
Idle → Loading: 필터 적용, 페이지 전환
Loading → Idle: 데이터 수신 완료
Loading → Empty: 결과 0건
Loading → Error: API 타임아웃 5초
Error → Loading: 재시도 버튼 클릭
데이터 NOTE 작성
Make 요소의 데이터 매핑
N.Data.P20.01
━━━━━━━━━━━━━━━━━
상품 카드 데이터 구조
{
product_id: string (필수)
thumbnail_url: string (필수, CDN)
product_name: string (필수, 최대 50자)
brand: string (선택, 최대 30자)
price: number (필수)
sale_price: number (선택)
discount_rate: number (계산값)
rating: number (0-5, 소수점 1자리)
review_count: number
is_new: boolean
is_soldout: boolean
}
Make 미구현 필드:
- is_new: 신상품 배지
- rating: 별점 표시
데이터 변환 규칙
N.Data.P20.02
━━━━━━━━━━━━━━━━━
표시 형식 변환
가격:
- 천 단위 콤마: toLocaleString('ko-KR')
- 원화 기호: 뒤 "원"
할인율:
- 계산: Math.floor((price - sale_price) / price * 100)
- 표시: "~%" (소수점 버림)
- 조건: discount_rate >= 5 일 때만 표시
상품명:
- 2줄 초과 시: ellipsis (...)
- 모바일: 최대 20자
이벤트 NOTE 작성
Make 인터랙션 상세화
N.Event.P20.01
━━━━━━━━━━━━━━━━━
필터 적용 이벤트 체인
1. 사용자: 필터 옵션 선택
2. UI: 선택 항목 하이라이트
3. 사용자: "적용" 버튼 클릭
4. UI:
- 버튼 disabled
- 리스트 영역 로딩 오버레이
5. API: GET /products?category={}&color={}
6. 응답 처리:
성공:
- 상품 리스트 갱신
- 결과 수 표시: "총 24개"
- URL 파라미터 업데이트
실패:
- 이전 상태 유지
- 에러 토스트 3초
7. 완료: 버튼 enabled
마이크로 인터랙션
N.Event.P20.02
━━━━━━━━━━━━━━━━━
호버 상태 (Make 부분 구현)
Make 구현:
- 카드 호버: shadow 증가
추가 필요:
- 이미지 호버: scale(1.05) 0.3s
- 장바구니 버튼: fadeIn 0.2s
- 커서: pointer
색상 코딩 시스템
우선순위별 NOTE 색상
NOTE 색상 규칙 적용
━━━━━━━━━━━━━━━━━
� 빨강 (#FF3B30): Make 미구현 필수 기능
� 노랑 (#FFB800): Make 부분 구현
� 파랑 (#007AFF): Make 완전 구현
⚫ 회색 (#8E8E93): 차기 개선 사항
프레임별 색상 표시
각 NOTE 프레임의 상단 바에 색상 적용.
Frame: NOTE_기능_P20
├─ Color Bar (Height: 4px, Fill: #FF3B30)
└─ Content Area
문서화 체크리스트
Make 산출물 검증
검증 항목
□ Make 생성 화면 캡처 및 백업
□ 프롬프트 이력 기록
□ 생성 요소 목록화 완료
□ 미구현 기능 식별
□ 4가지 NOTE 유형 작성
□ 색상 코딩 적용
□ 화면-NOTE 연결선 추가
□ 개발 참조 사항 명시
핸드오프 준비도
개발 전달 체크
□ 모든 인터랙션 정의
□ API 엔드포인트 명시
□ 에러 케이스 처리
□ 데이터 타입 정의
□ 상태 전환 로직
□ 성능 기준 명시
Make-NOTE 워크플로우
일일 작업 순서 (예시)
Day N 프로세스
09:00 Make 실행
└─ 프롬프트 입력
└─ 생성 결과 검토
10:00 산출물 Figma 이동
└─ 프레임 정리
└─ 컴포넌트 추출
11:00 NOTE 작성 시작
└─ 기능 NOTE
└─ 상태 NOTE
14:00 NOTE 작성 계속
└─ 데이터 NOTE
└─ 이벤트 NOTE
15:00 검증 및 연결
└─ 화면-NOTE 매칭
└─ 누락 확인
16:00 팀 리뷰
└─ 개발자 피드백
└─ 수정 사항 반영
반복 개선 사이클
Make → NOTE → 피드백 → Make 재실행
↑ ↓
└── NOTE 업데이트 ←──┘
Make 산출물은 시작점이다. NOTE 문서화를 통해 비로소 구현 가능한 명세가 완성된다. Make가 그린 화면과 NOTE가 설명하는 로직이 결합될 때, 개발자는 추측 없이 구현할 수 있고, 기획자는 의도를 정확히 전달할 수 있다.
이전의 PPT 화면설계서는 일일이 도형으로 화면을 그리고 번호를 매겨 우측 Description 테이블에 번호별로 설명을 달았다. PPT화면을 벗어날 경우 페이지를 추가하거나 벗어난 상태에서 설명을 달아 Slide시 설명이 누락되는 경우도 발생했다.
제시하는 프로토타입 기획은 make 프롬프트로 구동이 가능한 화면을 설계하고, 디자인으로 NOTE(또는 주석)를 달아 개발자 및 이해관계자가 해당 영역을 클릭만으로 설명을 볼 수 있어, 누락되는 경우가 줄어든다.
처음 v0에서 화면을 설계하고 Figma 디자인으로 옮겨 NOTE 작성을 하는 구조에서는 v0에서 생성한 화면을 플러그인이나 별도 툴을 사용하여 Figma 디자인 파일로 변환하는 과정이 있었지만, make가 출시되면서 이 단계가 줄었다, 저자도 v0보다는 Figma make를 주로 사용한다.
