📌 VIOLTOWN - 비영리 음악 단체 웹사이트

🔹 프로젝트 개요

• 작업 기간: 약 5주
• 작업 범위: 정보 구조 설계, UI/UX 디자인, 반응형 프론트엔드 퍼블리싱(Next.js), 공연·멤버·소식·공지·FAQ 관리자 CMS 구축, Supabase 스키마·RLS 설계, 예약/사연 문의 폼, 도메인 연결·SSL·배포
• 사용 도구: Next.js(App Router), React, TypeScript, Supabase(PostgreSQL · Auth · RLS · Storage), Lenis(스무스 스크롤), IBM Plex Sans KR, Vercel

🔹 프로젝트 목적

비올타운은 「음악이 필요한 곳이 우리의 무대입니다」를 내건 비영리 사단법인입니다. 연주 단체이면서 동시에 교육·후원 사업을 운영하기 때문에, 공연 소식과 프로그램·가치·멤버 소개가 한 화면 안에서 서로를 설명해야 했습니다. 기존 사이트는 소스 확보가 불가능해 전면 신규 구축으로 진행했고, 목표는 두 가지였습니다 — ① 연주 사진이 주인공이 되는 편집형 화면, ② 담당자가 개발자 없이 직접 공연·멤버·소식을 올릴 수 있는 관리자.

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

• 담당자가 직접 쓰는 관리자 CMS (6기능)
  • 멤버 · 공연 · 소식 · 공지 · FAQ · 유튜브 주소를 전부 DB로 옮기고, 관리자 화면에서 등록·수정·정렬·노출 여부를 제어합니다. 원고 한 줄 고치려고 연락할 일이 없습니다.
  • 관리자가 저장하면 공개 페이지 캐시까지 함께 갱신되도록 경로 표를 두어, 수정이 즉시 라이브에 반영됩니다.
• 권한은 RLS 한 겹으로 통일
  • 서버 액션에서 권한을 다시 검사하지 않고 PostgreSQL의 Row Level Security 정책 하나를 기준으로 삼았습니다. 두 군데에 권한 로직을 두면 한쪽만 고치는 사고가 나기 때문입니다.
  • 관리자 주소는 추측 가능한 /admin 을 쓰지 않고 비공개 경로로 두었고, robots.txt 에 적는 대신 페이지 단위 noindex 로 색인을 막았습니다.
  • 로그인은 이메일이 아니라 관리자 아이디로 받습니다. 담당자에게 메일 주소를 외우게 할 이유가 없다고 보고 내부에서 변환합니다.
• 인트로 · 스크롤 연출
  • 어두운 공연 사진 위로 VIOLTOWN 이 한 글자씩 떠오른 뒤 화면이 상·하로 갈라지며 본문이 드러납니다. 라이브러리 없이 CSS 로 구현했고 세션당 1회만 재생되며, 누르면 건너뜁니다.
  • 스크롤은 Lenis 로 관성을 주되 인트로 동안에는 잠급니다.
• 호버 3요소
  • 이미지 스케일 · 이미지 중앙의 보라색 점 · 커서를 따라다니며 한 글자씩 타이핑되는 라벨. 세 개가 한 묶음으로 움직입니다.
• 성능·안정성
  • 공개 화면은 쿠키를 읽지 않는 전용 클라이언트로 읽어 정적 캐시를 유지하고, 관리자 화면만 동적으로 렌더링합니다.
  • 크로스브라우징(Chrome·Safari·Firefox × PC/태블릿/모바일)과 폼 제출까지 프로덕션에서 재검증했습니다.

🔹 디자인 포인트

• 색은 네 개뿐: 흰색 · 검정 · 페이퍼(#dcd9d2) · 브랜드 보라(#5D1A84). 보라는 비올타운 로고에서 추출한 실제 브랜드 색이고, 어두운 판 위에서는 밝은 보라로 자동 전환됩니다.
• 거터 6px: 이미지가 서로 밀착하는 모자이크가 이 레이아웃 인상의 절반입니다. 여백을 줄여 사진이 지면처럼 붙어 읽히게 했습니다.
• 헤더는 아래 판을 따라간다: 첫 화면이 어두운 사진이라 헤더 글자색이 배경 밝기에 따라 자동으로 바뀝니다. 흰색으로 고정하면 밝은 서브페이지에서 로고가 사라집니다.