📌 프로젝트선 (PROJECT SEON) - 경기 고양·일산 인테리어 디자인 스튜디오 공식 웹사이트 구축
🔹 프로젝트 개요
🔹 프로젝트 목적
프로젝트선은 경기 고양·일산을 기반으로 하는 주거 인테리어 디자인 스튜디오입니다. 본 프로젝트는 “한 획, 한 획 진심을 담아 공간에 선을 그린다”는 브랜드 명제를 축으로, 시공 사례를 나열하는 일반적인 업체 홈페이지가 아니라 스튜디오의 태도가 먼저 읽히는 브랜드 웹사이트를 목표로 설계했습니다. 웜 오프화이트 배경과 잉크 블랙 타이포, 넓은 여백을 기조로 한 미니멀 에디토리얼 톤 위에, 브랜드명의 ‘선(線)’을 모티프로 삼은 로딩 애니메이션과 텍스트 리빌을 엮어 읽는 호흡을 설계했습니다. 또한 스튜디오가 개발자 없이 포트폴리오를 직접 운영할 수 있도록 전용 관리자 CMS를 함께 구축했습니다.
🔹 핵심 기술 및 구현 기능 (Key Technical Features)
Fixed-Viewport Layout System (한 화면 고정 레이아웃 시스템):
메인·About·Project 세 페이지를 스크롤 없는 한 화면으로 고정하기 위해, 화면 높이에서 헤더·여백·현장명 영역을 차감한 값으로 그리드 행 높이를 역산하는 CSS 계산 구조를 설계했습니다. 1440×900부터 1920×1080까지 전 해상도에서 세로 스크롤 0을 유지합니다.
Design Token 기반 여백 시스템:
좌우 여백(--gutter)과 헤더 높이(--nav-h) 두 개의 기준값만으로 전 페이지의 상·하·좌·우 여백을 동기화해, 해상도가 바뀌어도 로고 아래 간격과 좌우 여백이 항상 동일한 비율로 유지되도록 구현했습니다.
Scroll & Text Reveal Motion (스크롤·텍스트 리빌 모션):
Lenis 관성 스크롤 위에 GSAP ScrollTrigger 기반 단어별 블러·오퍼시티 스크럽 리빌과, 뷰포트 진입 1회 재생형 BlurText 리빌을 용도에 맞게 분리해 적용했습니다. 로딩 화면은 브랜드의 ‘선’을 그리는 드로잉 애니메이션과 카운터로 구성했습니다.
Portfolio CMS on Supabase (포트폴리오 관리자 CMS):
23개 현장·233장의 시공 사진을 DB로 이전하고, 현장 추가·대표 이미지·상세 사진 다중 업로드·순서 변경을 관리자에서 처리하도록 구축했습니다. 노출 순서는 전체(All)와 평형대 카테고리를 두 개의 독립된 축으로 분리해 관리합니다.
Client-side Image Pipeline (브라우저 이미지 최적화 업로드):
서버 요청 용량 한도로 원본 사진(5~20MB) 등록이 차단되는 문제를, 업로드 시 브라우저에서 긴 변 2000px·webp로 변환한 뒤 한 장씩 순차 전송하는 구조로 해결하고 진행률을 표시했습니다.
Inquiry Form & Mail Notification (상담문의 자동화):
상담 문의를 Supabase에 저장하고 Resend API로 스튜디오 메일박스로 즉시 알림을 발송합니다. 발송 실패가 접수 자체를 막지 않도록 저장과 알림을 분리했으며, 허니팟 필드로 봇 유입을 1차 차단합니다.
NAVER Maps with Graceful Fallback (네이버 지도 연동):
NCP Web Dynamic Map을 연동하되, 인증 실패(키·도메인 미등록) 시 전역 훅을 감지해 대체 지도로 자동 전환하도록 설계해, 어떤 상황에서도 빈 지도 영역이 노출되지 않도록 처리했습니다.
Korean SEO & Structured Data (한국어 SEO·구조화 데이터):
페이지별 메타·canonical·OG·트위터 카드와 지역 비즈니스 JSON-LD(주소·전화·좌표·영업시간), robots·sitemap을 적용했습니다. 임시 배포 주소가 색인되어 정식 도메인과 중복 색인되는 것을 막기 위해, 도메인 연결 전까지 자동으로 색인을 차단하는 스테이징 가드를 넣었습니다.
🔹 디자인 포인트