📌 DIT RECORDS - 의류 OEM/ODM 브랜드 웹사이트

🔹 프로젝트 개요

• 작업 기간: 약 1개월
• 작업 범위: 브랜드 아트디렉션 및 메인 시안 5종 제작, 4페이지(MAIN · ABOUT · PROCESS · CONTACT) 반응형 프론트엔드 구현, 메인 인트로 인터랙션 설계, 문의 폼 · 관리자 페이지, 도메인 연결·배포·모니터링
• 사용 도구: Next.js 16(App Router), React 19, TypeScript, Tailwind CSS v4, Lenis, Supabase, Pretendard Variable(self-host), Vercel

🔹 프로젝트 목적

DIT RECORDS는 의류 프로모션(OEM/ODM) 회사의 첫 웹사이트입니다. 제작 현장 사진이 거의 없다는 조건에서 출발했고, 고객의 요구도 “깔끔한 폰트 형식”이었습니다. 그래서 사진 없는 패션 프로덕션 사이트를 목표로 잡고, 이미 회사가 쓰고 있던 레코드 문법 — LP 슬리브, SIDE A : ODM / SIDE B : OEM, 《DANCING IN THE RECORDS》 — 를 그대로 화면 구조로 옮겼습니다. 우리가 새 컨셉을 만든 게 아니라, 회사가 이미 하고 있는 것을 웹의 문법으로 번역한 것입니다.

🔹 핵심 기술 및 구현 기능 (Key Technical Features)

• 메인 인트로 — 브랜드 메시지 4단계
  • 검정 LP 슬리브 위에서 슬로건 → 정의 → 숫자 → 로고 순서로 메시지가 이어지며, 슬리브가 뒤집히고 돌아가는 두 동작으로 마무리됩니다.
  • 인터랙션 공수를 메인 한 곳에 몰아쓰고, 나머지 세 페이지는 IntersectionObserver 기반 공용 리빌 컴포넌트 하나로 통일했습니다. 페이지마다 다른 연출을 넣으면 사이트가 산만해집니다.
  • 실적 숫자는 진입 시점에 카운트업으로 올라갑니다.
• 하지 않은 것이 기준
  • 커스텀 마우스 커서 · 블러 · 글로우 · 파티클 · 스크롤재킹 · 패럴랙스를 전부 배제했습니다(고객 명시 조건). 전환은 150–300ms 로 고정.
• 문의 폼 · 관리자
  • 브랜드명 · 담당자명 · 연락처 · 문의내용 · 미팅요청 일자 5항목 + 개인정보 동의. 문의는 Supabase 에 쌓이고 비공개 관리자 페이지에서 확인합니다.
  • 카카오톡 플로팅 버튼으로 상담 경로를 하나 더 열어두었습니다.
• 배포 품질 검증
  • 재방문에서 헤더 활성 메뉴가 틀리게 잡힐 수 있는 hydration 문제를 PC/모바일 × 첫방문/재방문 × 스로틀 × 4페이지 매트릭스로 재현해 잡았습니다.
  • Lighthouse PC 성능 99 / 접근성·모범사례·SEO 100, 크로스브라우징 6조합 검증.
  • 도메인 연결 후 상태 점검 엔드포인트와 외부 가동 모니터링을 걸어 가동 여부를 자동으로 감시합니다.

🔹 디자인 포인트

• 컨셉 「THE RECORD」: 사진 대신 활자와 면으로 끌고 가는 패션 프로덕션 사이트. 슬리브·트랙리스트·SIDE A/B 같은 레코드 어휘를 그대로 썼습니다.
• 색은 셋: 바탕 흰색(#F6F6F4) · 검정 슬리브 · DEEP RED(#A6111F). 액센트는 화면당 한 덩어리에만 씁니다.
• REC 깜빡임: 딥레드 점이 1.2초 간격으로 켜진 녹음 표시처럼 깜빡입니다. 전 페이지 로고 옆에 유지됩니다.
• 페이지마다 지배 톤을 달리: MAIN은 흰 바탕 + 검정 슬리브, PROCESS는 전면 검정, ABOUT은 좌측 대형 문장 / 우측 본문의 흐름, CONTACT는 액센트가 가장 강합니다.