2026인테리어 디자인 스튜디오 — 브랜드 웹사이트

PROJECT SEON

설명

인테리어 디자인 스튜디오 — 브랜드 웹사이트

기간

Jul 2026 — Aug 2026

역할

브랜드 명제에서 출발한 웹사이트 전체 기획 및 UI/UX 디자인.
Next.js 반응형 프론트엔드 퍼블리싱, 한 화면 고정 레이아웃 시스템과 리빌 모션 구현.
Supabase 포트폴리오 CMS·상담문의 폼·메일 알림·네이버 지도 연동 풀스택 개발.
한국어 SEO·구조화 데이터·검색엔진 등록, Vercel 배포와 도메인 연결.

기술

Frontend

Next.js 16 (App Router) · React 19 · TypeScript · Tailwind CSS v4

Creative

GSAP · ScrollTrigger · Lenis · Framer Motion

Backend

Supabase (Postgres, Storage, Auth) · Resend

Ops

Vercel · NAVER Cloud Platform Maps · Google Search Console · NAVER Search Advisor

프로젝트 목적

"한 획, 한 획 진심을 담아 공간에 선을 그립니다." 프로젝트선은 경기 고양·일산을 기반으로 하는 주거 인테리어 디자인 스튜디오이고, 이름 자체가 '선(線)'입니다. 이 시장의 업체 홈페이지는 대개 완공 사진 그리드와 전화번호로 끝나는데, 이번 요구는 정반대였습니다 — 개별 시공 사례보다 스튜디오의 태도가 먼저 읽히게 할 것. 웜 오프화이트와 잉크 블랙, 얇은 지오메트릭 산세리프, 그리고 많은 여백으로 화면 전체를 끌고 가면서 브랜드 모티프를 문자 그대로 썼습니다. 로딩 화면에서 선이 그어지고 카운터가 차오르며, 본문은 한 번에 나타나지 않고 어절 단위로 도착합니다. 공개 사이트와 함께, 스튜디오가 개발자 없이 현장 23개·사진 233장을 직접 운영할 수 있는 전용 관리자를 구축했습니다.

범위

· 브랜드 웹사이트 기획·UI/UX 디자인 및 반응형 퍼블리싱
· 한 화면 고정 레이아웃 시스템 및 디자인 토큰 여백 체계
· Supabase 기반 포트폴리오 관리자 CMS 구축
· 상담문의 자동화·네이버 지도 연동·한국어 SEO·배포

주요 기술 특징

한 화면 고정 레이아웃 시스템

· 메인·어바웃·프로젝트가 각각 스크롤 없는 한 화면으로 끝납니다. 그리드 행 높이를 화면 높이에서 헤더·여백·현장명 영역을 뺀 값으로 역산해, 고정 브레이크포인트가 아니라 창 크기에 반응하도록 설계했습니다.
· 1440×900·1512×982·1920×1080에서 세로 넘침 0을 실측 확인했습니다. 같은 규칙으로 모바일에서도 그리드가 화면을 채워, 페이지네이션 아래가 비는 문제를 없앴습니다.

두 개의 토큰으로 만든 여백 체계

· 전 페이지가 좌우 여백 값 하나와 헤더 높이 값 하나를 공유합니다. 콘텐츠 상단 여백을 두 값의 합으로 구성해, 로고 아래 간격이 항상 좌우 여백과 같아집니다 — 1440 기준 양쪽 모두 72px로 측정됩니다.
· '모든 페이지 여백을 동일하게'라는 요청을 페이지별 수치가 아니라 토큰으로 표현한 덕분에, 이후 조정이 네 개 파일이 아니라 선언 한 줄로 끝났습니다.

두 종류의 텍스트 리빌

· 읽는 속도를 손에 맡겨야 하는 곳에는 스크롤 스크럽 리빌(GSAP ScrollTrigger, 스크롤 위치에 블러·투명도 연동)을, 한 덩어리로 도착해야 하는 블록에는 진입 시 1회 재생형 블러 리빌을 적용했습니다.
· 스크럽 리빌은 화면 중앙이 아니라 고정 거리에서 종료되도록 해, 페이지 최하단 문장도 반투명한 채로 멈추지 않고 항상 완료됩니다.

포트폴리오 CMS와 이중 정렬 축

· 하드코딩 배열에 있던 현장 23개·사진 233장을 Postgres로 이전하고, 프로젝트 생성·대표 이미지·사진 다중 업로드·순서 변경·공개 여부를 관리자에서 처리하도록 만들었습니다.
· 노출 순서는 전체(All) 탭과 평형대 카테고리 탭을 **독립된 두 축**으로 관리합니다. 한 프로젝트가 전체에서는 앞이지만 카테고리에서는 아닐 수 있기 때문입니다. 중간 삽입 시 이웃을 밀고 0..n으로 재색인해 번호가 꼬이지 않습니다.

브라우저 이미지 파이프라인

· 처음에는 등록 자체가 실패했습니다. 서버 액션 요청 본문 한도는 1MB인데 카메라 원본은 5~20MB라, 핸들러에 닿기도 전에 요청이 거부됐습니다.
· 지금은 업로드 시 브라우저에서 긴 변 2000px WebP로 축소한 뒤 한 장씩 진행률과 함께 전송합니다. 한도를 해결하는 동시에, 시드된 233장과 규격도 일치합니다.

상담문의 자동화와 지도 폴백

· 상담 문의는 Supabase에 저장되고 Resend로 스튜디오 메일함에 알림이 갑니다. 저장과 발송을 의도적으로 분리해, 메일 실패가 문의 접수를 삼키지 않도록 했습니다. 허니팟 필드가 봇을 1차로 걸러냅니다.
· 네이버 지도는 NCP로 연동했는데, SDK 스크립트는 키가 틀려도 200으로 내려옵니다. 그래서 인증 실패를 벤더 전역 훅으로 잡아 임베드 지도로 폴백시켜, 회색 빈 박스가 노출되지 않도록 처리했습니다.

한국어 SEO와 스테이징 가드

· 페이지별 메타·canonical·OG·트위터 카드, 주소·전화·좌표·영업시간을 담은 지역 비즈니스 JSON-LD, robots·sitemap을 적용했습니다.
· 미리보기 주소에 머무는 동안에는 색인을 자동으로 차단하고, 정식 도메인을 연결하면 환경변수 하나로 robots와 canonical이 함께 전환됩니다. 미리보기 호스트가 실제 도메인과 검색에서 경쟁하지 않습니다.