1. 톤 & 컬러
- 베이스: 딥 블랙(
#050403) + 실사 포스터 배경. 공연·매직의 무대 암전을 그대로 화면으로 가져옴. - 포인트: 골드
#e9b765단 한 톤. 제목·프레임·버튼·구분선까지 전부 이 색 하나로 통일해서 요소가 늘어나도 화면이 산만해지지 않음. - 예외 구역: 신청 모달만 중립 라이트(
#fafafa). 입력·읽기 작업은 밝은 배경이 압도적으로 편해서 의도적으로 톤을 끊음. 대신 로그인 단계는 다크 골드로 두고 폼 단계에서 밝아지게 해 “무대 → 사무 절차” 전환을 시각적으로 표현. - 피한 것: 골드 원색을 밝은 배경 글자에 쓰기(대비 1.9:1). 텍스트용은
#8a6520으로 분리.
2. 타이포그래피
- 기본 Pretendard(고딕) — 안내·표·폼처럼 정확히 읽혀야 하는 곳.
- 위원장 인사말과 주요안내는 Noto Serif KR(본명조), 본문 weight 300. 편지 성격의 글에 격식과 호흡을 주려고 섹션 단위로 폰트를 바꿈.
- 명조는 같은 px에서 작아 보여서 행간 1.95로 벌리고 글자색을 한 톤 밝게(
#f6f0e5) 보정. 어두운 배경 + 얇은 획 조합의 가독성 손실을 상쇄.
3. 레이아웃 & UX
정보 구조를 감정 → 사실 → 행동 순으로 배치:
① 포스터(분위기) → ② 위원장 인사말(왜 마련했나) → ③ 공연 안내(장소·회차 표 + CTA) → ④ 주요안내(취소·입장·연령 규정) → ⑤ 신청 모달
- 회차 정보는 이미지가 아니라 진짜
<table>. rowspan으로 날짜·요일 병합. 화면 낭독기가 읽고 모바일에서 안 깨짐. - 팝업 자동 오픈을 껐음. 들어오자마자 폼이 얼굴에 들이닥치면 콘텐츠를 볼 기회가 사라져서, 버튼으로만 열리게 함.
- 모달은 내부 스크롤 대신 페이지 스크롤. 좁은 창 안에서 두 겹 스크롤이 생기는 답답함 제거.
4. 전환 설계 (모바일 우선)
- 2단계 모달: 조합원 확인(이름+직번) → 인증 성공 시 같은 자리에서 신청 폼으로 교체. 페이지 이동이 없어 이탈 지점이 하나 줄어듦.
- 이름·직번은 로그인 계정에서 자동 입력(readonly), 연락처는 프리필하되 수정 가능. 입력 항목을 실질적으로 3개(회차·좌석·동의)로 압축.
- 로그인 직후 우상단 “○○○ 님”이 새로고침 없이 나타남. 33MB짜리 포스터 이미지를 다시 안 불러오려고 DOM에 직접 심는 방식.
- 신청 완료자는 폼 대신 접수 내역 카드 + 취소 버튼. “내가 신청했나?”를 다시 묻지 않아도 되게.
5. 신뢰·운영 안정성
- 1인 1신청을 4중으로 — DB UNIQUE 인덱스 / 동시제출 예외처리 / 제출 시 재검사 / 화면 차단. 추첨 공정성이 이 이벤트의 핵심 신뢰 요소라 여기에 가장 두껍게 투자.
- 실패 메시지를 한 문장으로 통일(“직번과 이름을 다시 확인해 주세요”). 사유를 나누면 직번만 바꿔가며 명부를 탐색할 수 있어서. IP당 15분 10회 제한 병행.
- 개인정보 동의문 전문 노출(스크롤 박스) + 수집항목·목적·파기시점 명시.
- 신청 오픈은 코드 상수 기준 자동 전환. 담당자가 8/21 09:00에 아무것도 안 해도 열리고, 8/27 17:00에 자동으로 닫힘. 사람의 망각을 설계에서 배제.
- 접수 알림 메일은 껐음. 수천 통이 쌓이면 오히려 확인을 안 하게 되니, 관리자 목록 + 신청자 문자로 대체.
