RECTO빌드 현황

Figma → 명세 → 스토어프론트

캐노니컬 디자인 파일에서, 출시된 스토어까지.

Recto는 캐노니컬 Figma 원본에서 모듈 단위로 재구축되었습니다. 이 페이지는 빌드·배포 히스토리와 디자이너 요청 처리 현황을 자동으로 동기화해 보여주는 공개 기록입니다.

29
디자인 모듈
M01–M29, 전부 확정
103
해결된 리뷰 지적사항
총 27회 리뷰
20
디자이너 요청
상태별 처리 현황
20
배포된 릴리스
Cloud Run 리비전

실시간 · main / dev

빌드 · 배포 히스토리

main·dev 브랜치의 최신 커밋입니다. 두 브랜치에 푸시가 있을 때마다 자동으로 다시 빌드·배포되어 이 목록이 갱신됩니다. (생성 시점: 2026-10-10 15:23 UTC)

디자이너 요청 · 20건

요청 처리 현황

디자이너가 Notion에 남긴 요청과 각 항목의 처리 상태입니다. 요청 원문은 Notion에서 실시간으로 가져오며, 상태는 운영/스테이징 반영 여부에 따라 표시됩니다.

운영 반영 11스테이징 반영 7확인 전용 2

Notion 9 — 이미지 뷰어 · 사이즈 추가 요청

2026-06-26 ● Notion 실시간 · 12개 블록 Notion ↗
항목요청상태커밋
Q2① 확대 이미지: 화면 너비 맞춤 · 원본 비율 · 세로 스크롤 스테이징 반영 783770f
Q2② 사이즈 목록 가로 스크롤 (작은 화면에서 전부 노출) 스테이징 반영 e0110fd
Q3 2차 확대 150% · 클릭 지점 중심 · 드래그 패닝 · 재클릭/바깥 클릭 축소 스테이징 반영 783770f
사이즈 PLP→PDP 진입 시 사이즈 미리 선택 해제 스테이징 반영 e0110fd
Notion 원문 (실시간 12개)
  • Q2. 확대 이미지 뷰어 및 사이즈 목록 스크롤 방향 (노션 #12 / #1a) 이미지 확대 화면에서 좌우가 잘리는 현재 방식 대신, 이미지를 위에서 아래까지 전체적으로 확인할 수 있도록 표시해 달라고 요청해 주셨습니다. 아래 내용을 확인해 주세요.
  • ① 확대 시 이미지를 화면 너비에 맞추고, 원본 비율을 유지한 상태로 세로로 길게 표시하며 위아래로 스크롤하는 방식이 맞나요?
  • ② 사이즈 선택 목록은 현재 세로 방향으로 스크롤됩니다. 노션 #1a에는 ‘좌우’로 기재되어 있는데, 가로 방향 스크롤로 변경하면 될까요?
  • Q3. 2차 확대 동작 사양 (노션 #13 / #14) 이미지 위에서 커서 위치에 따라 다음과 같이 동작하도록 요청해 주셨습니다.
  • 이미지 양옆: 잡기(grab) 커서
  • 이미지 가운데: 돋보기 커서
  • 이미지 가운데를 다시 클릭: 2차 확대
  • 정확한 구현을 위해 아래 내용을 확인해 주세요.
  • ① 2차 확대 배율은 어느 정도로 설정하면 될까요? 예: 1차 확대 100% → 2차 확대 200%
  • ② 사용자가 클릭한 지점을 중심으로 확대하면 될까요?
  • ③ 2차 확대 상태에서 마우스 이동 또는 드래그를 통해 이미지를 이동하는 패닝 기능이 필요할까요?
  • ④ 다시 클릭하거나 이미지 바깥 영역을 클릭하면 원래 크기로 축소되도록 하면 될까요?

Notion 8 — 1차 피드백

2026-06-24 — 웹 미게시 (URL 추가 필요)
항목요청상태커밋
#1 카드·PDP에 모든 컬러웨이 스와치 표시 스테이징 반영 905fcde
#10 AboutNav 'about' 비클릭 라벨 처리 운영 반영 8c2de01
#11 필터 정렬(순서) 단일 선택 (radio) 운영 반영 8c2de01
#12 캠페인·컬렉션 확대 뷰어 (전체 이미지 + 줌) 검토 필요
#12는 로그상 AboutNav 드릴인(운영)과 캠페인 확대(스테이징) 두 곳에 등장 — 매핑 확인 필요
스테이징 반영 dbe0a31
#13 사이즈 오버레이 닫기(X) 상단 이동 + 개폐 애니메이션 운영 반영 7447c90
#14 이미지 2차 확대 (돋보기 · 패닝 · 클릭아웃) 스테이징 반영 783770f
#15 PDP 본문 상단 패딩 조정 운영 반영 7447c90
#2 PLP 내비 가장자리 항목 잘림 방지 (좌우 패딩) 운영 반영 7447c90
#3 PLP 내비 오버플로 스크롤 가장자리 정리 운영 반영 7447c90
#4 헤더 1차 내비 재탭 시 메가메뉴 닫기 (태블릿 포함) 운영 반영 8c2de01
#5 OS 관련 항목 검토 필요
로그상 'verify-only'로만 표기 — 정확한 요청 내용 확인 필요
확인 전용
#6 PLP 카드 사이즈 전체 표시 + 스크롤 운영 반영 7447c90
#7 드롭다운 사이즈 전체 표시 운영 반영 7447c90
#8 사이즈 목록 스크롤 동작 운영 반영 7447c90
#9a 매장 재고 드로어 타이틀 정리 (regularTitle) 운영 반영 7447c90
#9b 매장 목록 스크롤 확인 전용

방법론

모든 모듈이 동일한 5단계 게이트를 통과했습니다

각 모듈은 캐노니컬 파일에서 추출되어, 이를 무너뜨리려 시도하는 별도 에이전트의 독립 리뷰를 받았고, 모든 지적사항이 해결된 뒤에야 확정되었습니다 — 총 103건.

01

슬라이스

50MB Figma 파일에서 해당 캐노니컬 섹션을 기계적으로 추출.

02

추출

토큰·지오메트리·상태·모션을 전수조사와 함께 정밀하게 명세로 작성.

03

리뷰

별도 리뷰어가 모든 수치를 원본과 대조 검수하고, 빈틈이 있으면 반려.

04

해결

모든 지적사항을 수정하고, 깨끗이 승인될 때까지 재검수.

05

구현

명세를 라이브 스토어프론트로 구현하고 프로토타입과의 일치를 검증.

빌드 · 29개 모듈

캐노니컬 디자인 모듈

단계별로 분류한 전체 모듈 목록입니다. 모든 모듈이 확정 게이트에 도달했으며, 각 모듈 하단의 수치는 그 과정에서 해결한 리뷰 지적사항 수입니다.

기반 요소

캐노니컬 Figma 파일에서 추출한 디자인 시스템 기본 요소.

M01 확정

디자인 토큰 & 브레이크포인트 시스템

5개 변수 모드와 브레이크포인트 시스템, 캐노니컬 토큰에서 복원한 전체 바인딩 전수조사.

20건 지적 · 5회 리뷰
M02 확정

타이포그래피 & 그리드 스타일

6개 공유 텍스트/그리드 스타일 해독, 383개 임의 텍스트 노드와 문자 단위 오버라이드 전수조사.

14건 지적 · 3회 리뷰
M03 확정

버튼

Button / TextBTN 변형, 상태별 색상, 3.7천 개 인스턴스의 300ms ease-out 호버 처리.

6건 지적 · 3회 리뷰
M04 확정

폼 입력 요소 (TextField · CheckBox · Dropdown · Accordion)

TextField · CheckBox · Dropdown · Accordion — 커서 깜빡임 + 스마트 애니메이트 아코디언 동작.

8건 지적 · 2회 리뷰
M05 확정

브랜드 & 아이콘

브랜드 워드마크와 아이콘 세트, 지오메트리와 사용 규칙.

12건 지적 · 3회 리뷰
M06 확정

이미지 & 가격 표시

이미지 호버/디졸브 전환과 가격 표시 위젯.

2회 리뷰
M07 확정

커머스 위젯

커머스 위젯 — 사이즈 선택, 재고 표시, 장바구니 담기 요소.

10건 지적 · 3회 리뷰
M08 확정

글로벌 크롬 (헤더 · 내비 · 푸터 · 텍스트배너)

글로벌 크롬 — 구분된 4개 헤더 세트, 메가메뉴 호버 모델, 내비·푸터·텍스트배너.

11건 지적 · 3회 리뷰

화면

프로토타입에서 픽셀 단위로 재현한 모든 화면과 오버레이.

M09 확정

메인 (홈 화면)

홈 화면 — 에디토리얼 영역, 히어로, 캠페인 카드.

검증 완료
M10 확정

상품 목록(PLP) + 그리드

상품 목록 페이지와 반응형 상품 그리드.

검증 완료
M11 확정

필터 (정렬·필터 오버레이)

상품 목록 필터/정렬 오버레이 패널.

검증 완료
M12 확정

상품 상세(PDP)

상품 상세 페이지 — 갤러리, 사이즈/색상, 정보 아코디언.

검증 완료
M13 확정

검색

검색 오버레이 — 입력 상태 + 결과 상태.

검증 완료
M14 확정

매장 재고 확인 + 재입고 알림

매장 재고 확인 오버레이 + 재입고 알림.

검증 완료
M15 확정

위시리스트

위시리스트 드로어.

검증 완료
M16 확정

장바구니

장바구니 드로어.

4건 지적 · 3회 리뷰
M17 확정

결제 (체크아웃)

결제(체크아웃) 페이지.

검증 완료
M18 확정

회원가입 + 로그인

회원가입과 로그인 인증 화면.

검증 완료
M19 확정

계정

계정 대시보드와 하위 화면.

검증 완료
M20 확정

어바웃

어바웃 — 캠페인/컬렉션 에디토리얼 내비게이션.

검증 완료
M21 확정

푸터 (푸터 목적지 화면)

푸터 목적지 화면들.

검증 완료
M22 확정

팝업 시스템

팝업/모달 시스템.

검증 완료
M23 확정

글로벌 프로토타입 플로우 & 모션

글로벌 프로토타입 플로우 & 모션 — 4개 브레이크포인트 플로우, 전환 타이밍.

검증 완료

엔지니어링

디자인을 라이브 스토어로 렌더링하는 Next.js + Shopify 스토어프론트.

M24 확정

Next.js 앱 아키텍처 & 토큰 연결

Next.js 앱 아키텍처와 디자인 토큰 연결.

검증 완료
M25 확정

Shopify Storefront 연동

Shopify Storefront 연동 — 카탈로그, 검색, 고객.

18건 지적 · 0회 리뷰
M26 확정

장바구니 & 커스텀 결제

장바구니와 커스텀 결제 (최소 Shopify 핸드오프).

검증 완료
M27 확정

조립 · 라우팅 일치 · QA

조립, 프로토타입 플로우와의 라우팅 일치, QA 매트릭스.

검증 완료
M28 확정

에셋 수집 & 검증

에셋 수집과 검증.

검증 완료

인증 복구

이후 캐노니컬 페치에서 추가된 계정 복구 플로우.

M29 확정

아이디 찾기 + 비밀번호 찾기

아이디 찾기 + 비밀번호 찾기 인증 복구 화면.

검증 완료

기록 · 105개 체크포인트

전체 수정 기록

빌드 중 기록된 모든 체크포인트와 출시 이후의 운영 수정 — 최초 추출부터 라이브 스토어, 그 이후까지의 전체 여정입니다. 최신 항목이 맨 위에 표시됩니다.