휘어지는 석재라는, 사진 한 장으로는 설명되지 않는 신소재. 그 물성을 웹에서 경험하게 만드는 것이 이 프로젝트의 과제였습니다. 브랜드 톤부터 영상, 콘텐츠 재구성, 개발, 배포, 그리고 담당자가 직접 운영하는 관리자까지 한 번에 만들었습니다. ㅡ의뢰 배경 - 제품의 질감과 곡면 시공을 사진만으로는 전달할 수 없어 웹에서의 경험 설계가 필요 - 첫 화면에 브랜드 컨셉을 담은 영상과 강한 스크롤 연출 요구 - 회사 소개 PPT를 그대로 나열하지 않고 웹 콘텐츠로 재구성 - 이미지와 팝업을 담당자가 직접 교체할 수 있어야 함 ㅡStudio Maestiq 수행 범위 - 기획, 설계, 브랜딩, 콘텐츠 제작, 디자인, 개발, 배포 ㅡ기술 스택, 인프라 - 프론트엔드: Next.js 16 정적 내보내기 + TypeScript + Tailwind CSS v4 - 인터랙션은 Lenis: 스무스 스크롤, WebGL 실린더 갤러리, 스크롤 리빌 애니메이션 - 런타임과 도메인: Cloudflare Workers 커스텀 도메인 배포 (네임서버 이전 포함) - CMS 백엔드: Cloudflare D1 (설정, 섹션 데이터) + R2 (미디어 오브젝트 스토리지, Range 서빙) - 인증: HMAC 서명 쿠키 기반 관리자 세션, XSS 방어를 위한 URL 스킴 검증 - 콘텐츠는 AI 생성 히어로: 영상, PPT 도해 이미지 재생성, 브랜드 로고 자산 정제 ㅡ핵심 기능 1. AI 히어로 영상 ㅡ 브랜드 컨셉을 담은 원테이크 영상을 자체 제작해 첫 화면 전체를 채웁니다. 정지 이미지로는 나오지 않는 무게감을 첫 3초에 전달합니다. 2. PPT를 웹 콘텐츠로 재구성 ㅡ 회사 소개 자료 12페이지를 통째로 붙이지 않고, 딜레마, 해결, 소재 비교, 시공성, 적용 가이드 흐름의 웹 섹션으로 다시 설계했습니다. 도해 이미지도 웹 톤에 맞춰 재생성했습니다. 3. 관리자 CMS ㅡ 섹션별 갤러리를 드래그로 정렬하고 추가, 삭제, 히어로 영상 교체, 팝업 노출 on/off, QR, 연락처 관리까지 담당자가 직접 합니다. 개발자 호출 없이 사이트가 바뀝니다. 4. 미디어 라이브러리 ㅡ 업로드된 이미지를 한 곳에서 관리합니다. 사용 중인 파일은 배지로 보호되고, 미사용 파일만 골라 일괄 정리할 수 있습니다. 5. 이미지 성능 최적화 ㅡ 원본 외에 화면 크기별 변형 이미지를 사전 생성해 카드 폭에 맞는 파일만 내려보냅니다. 썸네일 전송량을 크게 줄여 모바일에서도 빠르게 뜹니다. 6. SEO, AI 검색 대응 ㅡ 구조화 데이터, OG 카드, 사이트맵, AI 검색용 안내 파일을 적용하고, 네이버 실측 검색량 리서치로 키워드 전략까지 리포트로 제공했습니다. ㅡ프로젝트 정보 기간: 2026년 7월, 자체 도메인으로 현재 운영 중 스크린샷의 대표자, 담당자 이름, 사업자 정보, 전화, 이메일, 상세 주소와 지도 위치는 보호를 위해 블러 처리했습니다. 관리자 화면은 실제 인증정보 없이 공개 데이터로 구성해 촬영했습니다. 브랜드 톤부터 영상, 콘텐츠, 개발, 운영 도구까지 한 팀에서 맡기고 싶으시다면 편하게 상담 남겨주세요.