DIT RECORDS

인트로 하나, 네 단계

• · 검정 LP 슬리브 위에서 슬로건 → 정의 → 숫자 → 로고 순서로 메시지가 이어지고, 슬리브가 뒤집힌 뒤 돌아가는 두 동작으로 마무리됩니다. 실적 숫자는 진입 시점에 카운트업으로 올라갑니다.
• · 인터랙션을 한 곳에 모은 것은 예산이 아니라 판단입니다. 페이지마다 다른 연출을 넣으면 4페이지 사이트가 네 개의 다른 사이트로 읽힙니다. 나머지 세 페이지는 IntersectionObserver 기반 공용 리빌 컴포넌트 하나를 함께 씁니다.

하지 않은 것이 기준

• · 커스텀 커서·블러·글로우·파티클·스크롤재킹·패럴랙스가 전부 없습니다. 고객이 피해 달라고 명시한 항목입니다. 전환은 전 페이지에서 150–300ms 로 고정했습니다.
• · 그것들을 빼면 위계는 활자 크기·면·여백에서 나와야 합니다. 대신 페이지마다 지배 톤을 바꿨습니다 — MAIN 은 흰 바탕에 검정 슬리브, PROCESS 는 전면 검정, ABOUT 은 좌측 대형 문장과 우측 본문, CONTACT 는 액센트가 가장 강합니다.

미팅요청 일자가 들어간 문의 폼

• · 브랜드명 · 담당자명 · 연락처 · 문의내용 · 미팅요청 일자 5항목과 개인정보 동의. 날짜를 폼에서 받으면 첫 회신에서 왕복 한 번이 빠집니다.
• · 문의는 Supabase 에 쌓이고 비공개 관리자 페이지에서 확인합니다. 폼 자체를 쓰지 않는 방문자를 위해 카카오톡 플로팅 버튼으로 경로를 하나 더 열었습니다.

hydration 을 매트릭스로 검증

• · 재방문에서 헤더 활성 메뉴가 서버와 클라이언트에서 다르게 잡힐 수 있었습니다. 특정 조합에서만 나오는 문제여서 새로고침을 반복하는 대신 PC/모바일 × 첫방문/재방문 × 스로틀 × 4페이지로 재현했습니다.
• · PC Lighthouse 는 성능 99, 접근성·권장사항·SEO 100 으로 나왔고 브라우저 6조합에서 검증했습니다.

국문 서체 자체 호스팅

• · Pretendard Variable 을 폰트 CDN 이 아니라 앱에서 직접 서빙합니다. 화면이 뜬 다음에 글자가 한 번 바뀌는 현상을 없애기 위한 것입니다.
• · 도메인 연결 후 상태 점검 엔드포인트와 외부 가동 모니터링을 추가해, 멈춘 걸 나중에 발견하지 않고 통보받게 했습니다.

컨셉 「THE RECORD」

사진 대신 활자와 면으로 끌고 가는 패션 프로덕션 사이트. 슬리브·트랙리스트·SIDE A/B 를 그대로 쓴 건 회사가 이미 그렇게 말하고 있었기 때문입니다. 리브랜딩이 아니라 번역으로 읽힙니다.

색은 셋

바탕 흰색(#F6F6F4) · 검정 슬리브 · DEEP RED(#A6111F). 액센트는 화면당 한 덩어리에만 허용합니다. 그 정도로 진한 빨강이 장식으로 변하지 않는 유일한 방법입니다.

REC 깜빡임

딥레드 점이 1.2초 간격으로 녹음 표시처럼 깜빡입니다. 전 페이지 로고 옆에 유지됩니다 — 나머지가 멈춰 있는 사이트에서 유일하게 움직이는 요소입니다.

페이지마다 지배 톤

MAIN 은 흰 바탕에 검정 슬리브, PROCESS 는 전면 검정, ABOUT 은 좌측 60px 문장과 좁은 우측 단, CONTACT 는 액센트가 가장 강합니다. 페이지는 효과가 아니라 면의 무게로 구분됩니다.

사진 네 장, 크롭해서

이후 고객이 국내 공장 사진을 제공했고, 네 장만 흑백으로 크롭해 PROCESS 띠와 ABOUT 와이드에만 넣었습니다. 현장이 있다는 걸 증명할 만큼만, 톤을 깨지는 않을 만큼만입니다.