가상의 법무법인과 사건으로 만든 데모이며 실제 법률 서비스나 소송 참여 접수가 아닙니다. 바꾼 내용은 이 브라우저에만 저장되고, 문의 입력과 올린 이미지는 저장하지 않습니다.가상 법인·사건의 데모이며 실제 법률 서비스가 아닙니다. 바꾼 내용은 이 브라우저에만 저장됩니다.
이 데모는 관리자 화면에서 제목·내용·모집기한·상태만 넣어 사건 페이지를 만들고, 모집 마감과 팝업이 정해진 시각에 맞춰 저절로 바뀌는 집단소송센터입니다. 단계마다 [이 화면 열기]를 누르면 그 화면이 열립니다.
서버 시각은 이 데모의 시연용 시계입니다. 위쪽 시계 모양 버튼(휴대폰 폭에서는 '시연'이 붙은 시각)을 누르면 시각을 앞당길 수 있습니다. 이 창은 위쪽 물음표 아이콘 [사용법]으로 언제든 다시 열 수 있고, 휴대폰 폭에서는 위쪽 점 세 개 버튼 안에 있습니다.
1
완성된 장면 먼저 보기
[이 화면 열기]를 누르면 관리자 화면에서 '택배 분실 보상' 사건을 18:10으로 미리 본 장면이 열립니다. 이 버튼은 지금까지 바꾼 내용을 처음 데이터로 되돌립니다.
마감 시각 18:00을 지나 배지(카드 위의 모집중·모집마감 같은 상태 표시)가 모집마감으로 바뀌고, 하단 신청 버튼이 다음 사건으로 넘어간 모습이 보입니다. 휴대폰 폭에서는 폼 맨 아래 [미리보기]를 누르면 보입니다.
2
[집단소송센터]에서 위쪽 [모집마감]을 누릅니다
처음 들어가면 공지 팝업이 먼저 뜨니 [닫기]나 [오늘 하루 보지 않기]를 누릅니다. 마감된 사건만 남고, [전체]를 누르면 모집 중인 사건부터 다시 정렬됩니다. 위쪽 법인 이름을 누르면 법인 홈(메뉴 4개와 강조된 [집단소송센터] 버튼)도 볼 수 있습니다.
3
사건 카드의 [사건 안내]를 누릅니다
요약, 주요 공지, 참여 절차, 자주하는 질문이 같은 순서로 나오고 지금 단계에 '지금 여기'가 붙습니다.
4
열린 등록 화면에서 제목·내용·모집기한·상태를 채웁니다
네 칸을 채운 뒤 맨 아래 [발행]을 누르면 사건 페이지가 생깁니다. 슬러그(사건 페이지 주소 끝에 붙는 영문 이름)는 비워 두면 자동으로 정해집니다.
5
미리보기의 '시각 미리보기' 막대를 오른쪽으로 끕니다
막대는 넓은 화면에서는 오른쪽, 좁은 화면에서는 폼 아래에 있고, 휴대폰 폭에서는 [미리보기]를 누르면 나옵니다. 마감 시각을 지나면 배지와 순서, 하단 신청 버튼이 어떻게 바뀌는지 미리 봅니다. 팝업 노출 기간은 [노출 관리]에서 같은 방식으로 봅니다. 배너는 그곳에서 개수와 순서를 바꿉니다.
6
[보관함]에서 맨 위 행의 [복원]을 누릅니다
[이 화면 열기]는 사유 [기간 만료]를 골라 둔 채 엽니다. 기간이 끝난 팝업은 기간을 비운 채 [노출 관리]로 돌아와 새 기간을 넣게 됩니다. 삭제한 행에는 지운 사람과 시각이 함께 남아 있습니다.
1단계의 [이 화면 열기]는 처음 데이터에서 그 장면을 다시 준비합니다(그 전에 바꾼 내용은 처음 상태로 돌아갑니다). 위쪽 되돌리기 화살표 아이콘 [처음 상태로](휴대폰 폭에서는 점 세 개 버튼 안)를 누르면 언제든 처음 데이터와 처음 시각으로 돌아갑니다.
이 데모에서 동작하지 않습니다
실제 구축 시
데모에서 뺀 이유
다루는 곳
아래 주소는 관리자가 등록한 외부 서비스입니다.
연결 대상
등록된 외부 주소
데모는 가상 사건이라 실제 신청 서비스로 보내지 않습니다.
상담 안내
사건 참여와 서류에 관한 질문은 사건 페이지의 [문의하기]로 남겨 주세요.
법무법인·사건·공지·팝업·배너·계정은 모두 데모용 가상 데이터입니다. 실제 법인·기업·인물·사건과 관계가 없습니다. 서버 시각은 데모의 시연 시계입니다.
시연용 가상 데이터 (직접 작성)
사건 16건(처음 시각에 사건판에 보이는 14건 + 비게시 초안 1건 + 모집 예정 1건) , 공지 18건, 팝업 4개, 배너 6개, 작업 계정 3개(이름 없는 가상 계정), 처음 시각 기준 보관함 12행으로 구성했습니다.
근거가 있는 형식
일시는 한국 시각 분 단위로 적고, 문의 동의는 개인정보 보호법 제15조의 수집·이용 고지 네 항목(목적·항목·보유 기간·거부 권리)을 따릅니다. 신청 주소는 예시용 예약 도메인(.example)만 씁니다.
이 데모에서 정한 값
대표·공유 이미지는 1200×630 권장, 이미지 파일은 5MB 상한, 사건 주소의 영문 이름은 영문 소문자·숫자와 하이픈만 쓰는 규칙입니다. 실제 구축 때 법인과 함께 정합니다.
실데이터를 쓰지 않은 이유
법무법인의 사건 페이지·공지·팝업을 모아 재배포할 수 있는 공개 데이터를 찾지 못했고, 실제 기업 이름이 붙은 사건 목록을 가상 법인의 모집 화면에 실으면 실제 소송 모집처럼 읽히기 때문입니다. 실제 사건번호도 실제 사건과 겹칠 수 있어 쓰지 않았습니다.
표지 사진
표지 사진: Unsplash 무료 라이선스 사진을 잘라 색을 맞춰 썼습니다. 사진 속 장소·물건은 사건과 관계없는 이미지입니다. 사진가와 원본 주소는 vendor/LICENSES.md에 적었습니다.
서버 시각
처음 시각은 10월 20일 17:40이고 실제 시간과 같은 빠르기로 흐릅니다. 실제로 구축할 때는 서버 시각으로 같은 계산을 하도록 만듭니다.
로그인과 만든 방식
이 데모는 로그인 없이 열리며, 작업 계정은 처리자 기록을 보여 주기 위한 가상 계정입니다. 실제 구축 시 직원별 계정과 권한을 둡니다. 화면은 HTML·CSS·JavaScript로 만든 브라우저 데모입니다.
글꼴·아이콘·에디터
Pretendard(SIL OFL 1.1), Lucide 아이콘(ISC), Tiptap 에디터(MIT)를 페이지와 함께 넣었습니다. 실행 중 외부로 요청하는 파일은 없습니다.