VIOLTOWN

담당자가 실제로 쓰는 관리자

• · 멤버 · 공연 · 소식 · 공지 · FAQ · 유튜브 주소를 전부 DB로 옮기고, 등록 · 수정 · 정렬 · 노출 여부를 관리자에서 제어합니다. 원고 한 줄 고치려고 연락할 일이 없습니다.
• · 저장하면 경로 표를 통해 해당 공개 페이지 캐시까지 함께 갱신되므로, 수정이 배포를 기다리지 않고 즉시 라이브에 반영됩니다.

권한은 한 겹으로

• · 권한은 서버 액션 안의 재검사가 아니라 PostgreSQL Row Level Security 정책 하나입니다. 권한 로직이 두 벌이면 한쪽만 고치는 날이 사고가 됩니다.
• · 관리자는 /admin 이 아닌 비공개 경로에 두고, 숨긴 경로를 공개해 버리는 robots.txt 대신 페이지 단위 noindex 로 색인을 막았습니다.
• · 로그인은 이메일이 아니라 관리자 아이디로 받고 내부에서 변환합니다. 공연 하나 고치려고 담당자가 메일 주소를 외울 이유가 없습니다.

인트로와 스크롤

• · 어두운 공연 사진 위로 VIOLTOWN 이 한 글자씩 떠오른 뒤 화면이 상·하로 갈라지며 본문이 드러납니다. CSS 로만 구현했고 세션당 1회 재생, 누르면 건너뜁니다.
• · 스크롤은 Lenis 로 관성을 주되 인트로 동안에는 잠급니다. 연출이 절반쯤 진행된 상태로 스크롤해 넘어가지 않게 하려는 것입니다.

호버는 세 가지가 한 번에

• · 이미지 스케일, 이미지 중앙의 보라색 점, 그리고 커서를 따라다니며 한 글자씩 타이핑되는 라벨 — 세 개가 한 묶음으로 움직입니다.
• · 묶어 두면 호버가 하나의 동작으로 읽힙니다. 따로 돌리면 같은 요소 위에서 세 개의 효과가 경쟁하는 것으로 보입니다.

공개 화면은 정적, 관리자만 동적

• · 공개 화면은 쿠키를 읽지 않는 전용 클라이언트로 읽어 정적 캐시를 유지하고, 관리자 화면만 동적으로 렌더링합니다.
• · 크로스브라우징(Chrome · Safari · Firefox × PC/태블릿/모바일)과 폼 제출을 프리뷰가 아니라 프로덕션에서 재검증했습니다.

5단계 접수 처리 파이프라인

• · 예약·사연 접수는 신규 · 검토 중 · 보류 · 완료 · 거절로 상태가 이동하고, 공개 측은 익명 INSERT 에 봇 덫을 함께 걸었습니다.
• · 접수 내역은 15건 페이지네이션, 체크박스 선택 후 선택 삭제·일괄 상태 변경, 기간·종류·상태 필터를 지원합니다. 정리할 수 없는 수신함은 아무도 답하지 않는 폼이 됩니다.

색은 네 개뿐

흰색 · 검정 · 페이퍼(#dcd9d2) · 브랜드 보라(#5D1A84). 보라는 고른 색이 아니라 비올타운 로고에서 추출한 실제 브랜드 색이고, 어두운 판 위에서는 밝은 보라로 자동 전환되어 배경에 먹히지 않습니다.

거터 6px

이미지가 서로 거의 맞닿고, 그 모자이크가 이 레이아웃 인상의 절반입니다. 여백을 줄이는 것이 사진을 카드 목록이 아니라 지면으로 읽히게 만드는 방법입니다.

헤더는 아래 판을 따라간다

첫 화면이 어두운 사진이라 헤더 글자색이 배경 밝기에 따라 바뀝니다. 흰색으로 고정하면 밝은 서브페이지마다 로고가 사라집니다 — 사진 히어로를 쓴 사이트 대부분에서 실제로 일어나는 일입니다.

푸터 서명

슬로건을 화면 폭에 꽉 채운 한 줄로 눕히고, 앞 구절은 윤곽선 · 뒤 구절은 솔리드 보라로 처리했습니다. 크기를 짐작하지 않고 실측해 맞추기 때문에 어느 해상도에서도 딱 떨어집니다.

원고·사진은 전부 실물

더미 텍스트도 스톡 이미지도 쓰지 않고 확정 원고와 실촬영본만 올렸습니다. 멤버 17인 · 프로그램 3종 명칭 · 연혁이 모두 최종 텍스트로 들어왔기 때문에 실제 줄길이에 맞춰 레이아웃을 조정할 수 있었습니다.