TradeWeave: 패션 중개인 제거
출처: Dev.to
이것은 GitHub Finish‑Up‑A‑Thon 챌린지를 위한 제출물입니다.
저는 TradeWeave라는 B2B + B2C 패션 마켓플레이스를 만들었습니다. 이 플랫폼은 소규모 직조가와 제조업체를 고객 및 소매업체와 직접 연결해 중간상을 완전히 없앱니다.
프로젝트는 한밤중에 노트에 적은 아이디어에서 시작되었습니다: “공장 노동자와 장인이 직접 판매한다면, 공급망 부풀림으로 40%를 잃지 않고 전액 마진을 챙길 수 있을까?”
🔗 실시간 데모 — TradeWeave — 지금 바로 설치 없이 체험해 보세요
사용 방법:
- 어떤 드레스 카드 위에 마우스를 올리면 카드가 뒤집혀 사이즈가 표시됩니다.
- 사이즈를 선택하고 수량을 조정한 뒤 “Add to cart”(장바구니에 담기)를 클릭합니다.
- “Sign up”(회원가입)을 클릭하면 프리미엄 회원가입 흐름을 확인할 수 있습니다.
- TradeWeave 로고를 5번 클릭하면 숨겨진 관리자 대시보드가 열립니다.
- “Wholesale”(도매) 탭을 클릭하면 직접 제조업체 목록을 볼 수 있습니다.
💻 소스 코드: github.com/Deeraj25/tradeweave
Before:
- 한밤중에 노트에 적은 아이디어
- 코드 한 줄도 작성되지 않음
- 배포도 없음
- “언젠가 할 프로젝트” 아래에 묻혀 있었음
- 상태: 포기
After:
- 프로덕션 단계의 완전한 마켓플레이스
- 약 550줄의 다듬어진 HTML/CSS/JavaScript
- Netlify + GitHub Pages에 실시간 배포
- 누구나 즉시 사용 가능
- 실제 기능을 갖춘 실제 제품
핵심 수정 사항
- 기존 코드가 아닌 완전 새로운 마켓플레이스를 처음부터 구축
- CSS 3D 변환(perspective + rotateY)을 이용한 hover‑to‑flip 카드 구현
- 자동 채우기 레이아웃을 사용한 반응형 제품 그리드 제작
- 장바구니와 관리자 상태를
localStorage에 영구 저장
추가된 기능
- 5개 카테고리, 20개 이상의 아이템
- 페이지 새로고침 없이 동작하는 hover‑flip 인터랙션
- 이미지 업로드 UI를 갖춘 AI 가상 착용 모달
- 제조업체 데이터를 포함한 도매 B2B 포털
- 5번 클릭으로 잠금 해제되는 숨은 관리자 대시보드
- 애니메이션 히어로와 단계가 포함된 Aurora‑스타일 회원가입
- 실시간 분석 대시보드(매출, 상위 카테고리, 주문 테이블)
- 모바일 반응형 디자인
- 키보드 + 마우스 지원
다듬기 및 최적화
- 맞춤형 애니메이션(계단식 등장, 떠오름, 반짝임)
- 고급스러운 느낌을 주는 Cormorant Garamond 타이포그래피
- 프리미엄 패션 감성을 살린 골드 + 크림 색상 구성
- 모바일 터치 지원
- 접근성을 위한 포커스 상태 구현
- 의존성 제로 — 오프라인에서도 작동
The Setup
그때 나는 생각했다: “이 아이디어는 진짜다. 직접 완성해 보자.”
Where GitHub Copilot Made the Difference
-
이미지 렌더링 로직
- 제품 카드에 이모지가 표시되고 있었음
- 전체 그리드를 다시 작성하지 않고 실제 이미지를 넣고 싶었음
- 프롬프트: “
renderProducts를 수정해p.img가 있으면 배경 이미지로, 없으면 이모지를 표시하도록 해줘” - 결과: Copilot이 30초 만에 조건부 CSS 배경 로직을 작성해 줌
-
제조업체 데이터 생성
- 인도 현지의 실제 B2B 공장 4곳을 만들고 싶었음 (MOQ, 리드 타임, 결제 조건, 소재, 가격 등)
- 프롬프트: “인도 텍스타일 공장 4개의 realistic한
manufacturers배열을 생성해줘” - 결과: “Tiruppur Knits Ltd · 4.7 stars · Cotton knitwear”와 같이 내가 생각하지 못한 상세 정보를 모두 자동 생성
-
CSS 3D 플립 카드 버그
- 초기 로드 시 카드 뒷면이 비정상적으로 보임
- 프롬프트: “왜 내 플립 카드에서 backface‑visibility가 작동하지 않을까?”
- 결과: Copilot이
z-index와transform-style문제를 진단하고preserve-3d를 올바르게 적용하도록 CSS를 재작성
-
반응형 그리드 정리
- 특정 화면 너비에서 모바일 레이아웃이 깨짐
- 프롬프트: “제품 그리드를 모바일, 태블릿, 데스크톱 모두에서 동작하도록 고쳐줘”
- 결과: 고정
grid-template-columns: repeat(4, 1fr)을repeat(auto-fill, minmax(220px, 1fr))와 적절한 브레이크포인트로 교체
-
애니메이션 다듬기
- 회원가입 히어로와 제품 카드에 ‘생동감’이 필요했음
- 프롬프트: “제품 카드에 0.06초 간격으로 staggered fade‑up 애니메이션을 추가해줘”
- 결과:
animation-delay계산 로직과 keyframe 정의를 Copilot이 삽입
Copilot은 단순 자동완성이 아니라 완성 파트너였다.
- CSS 3D 변환에서 막혔을 때, Copilot이 문제를 설명하고 바로 고쳐줬다.
- 아이디어는 있었지만 구현 시간이 없을 때, Copilot이 골격을 만들어 주었다.
- 제조업체 데이터가 필요했을 때, Copilot이 실제 같은 인도 텍스타일 공장 정보를 생성했다.
- 코드가 70% 완성됐을 때, Copilot이 남은 30%를 배포 가능한 수준으로 다듬어 주었다.
가장 중요한 점: 완성된 제품을 배포하는 것이 완벽한 코드를 짜는 것보다 훨씬 의미 있다.
완성 > 완벽. 배포된 마켓플레이스가 미완성된 “이상적인” 코드보다 낫다.
Live Demo > Code Link – 누구든 지금 바로 테스트 가능. “클론하고 npm install” 같은 절차가 필요 없다.
Story > Just Features – 심사위원은 단순 코드만 보는 것이 아니라 여정을 본다.
Copilot은 도구일 뿐, 부정행위가 아니다. 핵심 아키텍처는 내가 설계했고, 세부 사항을 마무리하는 데 Copilot이 도움을 줬다.
작은 팀이 빠르게 움직인다. 개발자 1명 + AI 1명 + 마감일 = 배포된 제품.
Live Demo: http://deeraj25.github.io/tradeweave/#/
Source Code: github.com/Deeraj25/tradeweave
My GitHub: @Deeraj25
The Real Victory
“노트에 적은 아이디어”에서 “누구에게든 자랑스레 보여줄 수 있는 실시간 마켓플레이스”로 1주 만에 전환했습니다.
구성: Deeraj Kumar와 Sai Mukesh
스택: HTML, CSS, 순수 JavaScript, Google Fonts
배포: Netlify(무료 플랜) + GitHub Pages
챌린지: GitHub Finish‑Up‑A‑Thon 2026