팔랑은 소상공인이 상품 등록부터 결제·클레임까지 한 곳에서 돌릴 수 있는 판매 플랫폼입니다. Next.js 15 App Router + Turbo 모노레포 위에 seller / buyer / admin 3개 앱과 공유 packages/ui를 두는 구조로 만들어졌고, 저는 이 프로젝트에서 프론트엔드 전반을 맡아 개발하고 있습니다.

PoC 단계에서 배포 비용을 줄이기 위해 SPA 방식으로 시작했습니다. 그 덕에 나온 이슈와 그걸 푸는 과정에서 하게 된 작업들이 몇 가지 있습니다.

맡은 부분

Lambda로 OG 메타데이터 주입

SPA 구조라 카카오톡·페이스북 공유 시 OG 프리뷰가 뜨지 않았습니다. 오픈커머스 마켓에서는 이게 꽤 치명적이라, 크롤러 User-Agent로 들어오는 요청만 Lambda에서 동적 OG HTML을 반환하도록 분기를 걸었습니다. 일반 사용자 트래픽은 기존 SPA 경로 그대로 탑니다. SPA의 경량 배포를 유지하면서도 공유 유입 경로를 확보할 수 있었습니다.

상품 등록 4-Step 폼

셀러가 다루는 정보가 많아서 기본정보 → 옵션 → 이미지 → 노출 설정 4단계로 쪼갰습니다. 중간에 이탈했다 돌아와도 작성 내용이 보존되고, 옵션 직접입력형·재고 관리·이미지 필수 검증 같은 실전 UX도 같이 다듬었습니다. 에디터 블록이 비어 있으면 저장 시 자동으로 빼주고, 필드 포커스 시 뷰포트가 하이라이트되는 장치도 넣었습니다.

구매자 주문·클레임 플로우

구매자 페이지의 주문 내역, 주문 상세, 반품·교환·취소 흐름을 Figma 기반으로 리팩토링하면서 Vaul Drawer로 전환했습니다. 클레임은 상태머신으로 설계해서 취소 → 반품 → 교환 → 환불 예정 내역 계산까지 한 줄기로 이어지게 만들었습니다. 사진 첨부는 업로드가 진행되는 동안에도 단계 진행이 막히지 않도록 eager 업로드로 처리했습니다.

상품 이미지·동영상 캐러셀

buyer 상품 상세에 이미지·동영상을 한 캐러셀에서 다루도록 만들고, 슬라이드 전환 시 동영상이 0초부터 재생되도록 처리했습니다. 이미지를 추가하면 캐러셀이 reInit된 뒤 새 슬라이드로 이동하는 동작, dot 인디케이터도 같이 붙였습니다.

Turbo 멀티앱 모노레포

seller / buyer / admin 앱과 공유 packages/ui로 나눠서, 디자인 토큰과 컴포넌트는 한 곳에만 두고 각 앱은 얇게 얹는 구조로 정리했습니다. Turbo 빌드 캐싱 덕에 CI 시간도 같이 줄었습니다.

Figma → 코드 디자인 시스템

Figma 디자인 토큰을 코드로 자동 변환하는 파이프라인을 붙여서, 디자이너가 수정한 토큰이 별도 작업 없이 코드에 반영되게 만들었습니다.

상품 이미지·영상 S3 업로드

상품 이미지·영상은 S3에 직접 올리도록 흐름을 구현했습니다. 진행률 UI, 파일 타입·크기 검증, 업로드 중 페이지 이탈 방지(beforeunload) 처리까지 같이 들어갔습니다.

스택

Next.js 15 (App Router, RSC), TypeScript, Tailwind CSS, Framer Motion, Vaul Drawer, Turbo, AWS Lambda, AWS S3.