모바일 게임 길드 시스템 기획 & HTML 프로토타입 — 유저 리스트·권한·채팅 구현
모바일 캐릭터 수집 RPG의 길드 시스템을 기획하고, 기획서의 테이블과 플로우를 그대로 HTML/JS 프로토타입으로 구현해 본 작업입니다. 아래 데모는 별도 서버 없이 브라우저에서 바로 동작하며, 유저 데이터를 직접 수정하면서 정렬·권한·랭킹 반영을 확인할 수 있습니다.
1. 시스템 개요
길드는 출석·기부·연구·레이드·채팅으로 구성되며, 채팅을 제외한 모든 활동에서 길드 공헌도를 획득합니다. 누적 공헌도로 길드 레벨이 1~25까지 성장하고, 레벨에 따라 최대 인원(20→50명)과 부길드장 수(1→5명), 길드 버프가 확장됩니다. 일일 콘텐츠는 모두 UTC 00시에 초기화됩니다.
2. 등급과 권한
길드원 등급은 길드장 / 부길드장 / 길드원 3단계입니다. 이름·엠블렘·가입 조건 변경과 해산은 길드장 전용, 가입 승인·등급 변경·추방·소개글·공지·연구 오픈은 부길드장까지, 채팅은 전 등급이 사용합니다. 권한이 없는 항목은 딤드 처리하고 터치 시 안내 메시지를 출력합니다. 데모 상단의 등급 시뮬레이션으로 직접 확인할 수 있습니다.
3. 길드 리스트 · 생성 · 가입
목록은 가입 신청한 길드 > 만원이 아닌 길드 필터 > 공헌도 높은 순 > 인원 많은 순으로 정렬합니다. 가입 방식은 신청 / 즉시 가입 / 암호 입력(전용 숫자 키패드, 4자리) 3종이며, 동시 가입 신청은 최대 3개로 제한합니다. 검색 시에는 만원 길드도 필터링하지 않고 전체 검색합니다. 길드 생성은 프레임·문양·색상 엠블렘 조합, 이름 2~10자(특수문자·중복 검증), 소개글 20자, 공지 200자로 구성됩니다.
4. 길드원 관리 (유저 리스트)
등급, 이름·UID, 레벨, 접속 정보, 누적/주간 공헌도를 표시합니다. 기본 정렬은 주간 공헌도 내림차순 > 레벨 내림차순 > 이름 오름차순이고, 컬럼 터치로 우선 정렬과 오름/내림 토글이 가능합니다. 접속 정보는 접속 중 / N분 전 / N시간 전 / N일 N시간 전 / N일 전 포맷으로 자동 변환합니다. 행 터치 시 대상 등급에 따라 길드장 위임·부길드장 임명·강등·추방 메뉴가 분기되며, 가입 승인 대기자 탭에는 승인 대기 시간 카운트다운과 기간 만료·인원 초과 예외 처리가 들어 있습니다.
5. 출석 · 기부 · 연구 · 상점 · 채팅
출석은 하루 1회(공헌도+코인), 기부는 골드 기부 2회와 다이아 기부 3회로 나뉘어 공헌도와 길드 코인을 차등 지급합니다. 길드 연구는 길드장·부길드장이 오픈하고 전 길드원이 품앗이(무료 3회, 이후 유료, 일 최대 10회)로 게이지를 채워 레벨업하는 구조이며, 길드 레벨·선행 연구 잠금 조건을 가집니다. 상점은 길드 코인으로 구매하며 일/주 구매 제한, 레벨 잠금, 매진 상태를 처리합니다. 채팅은 길드장 분홍·부길드장 노랑 말풍선, 100자 제한, 발송 1초 쿨타임(입력 텍스트 보존), 이모티콘 10종, 유저 차단(최대 50명, 차단 시점 이후 메시지 숨김)을 지원합니다.
6. 인터랙티브 데모
아래에서 직접 조작해 보세요. 우측 상단 ⚙ 유저 데이터 관리에서 길드원 32명의 데이터를 수정·추가·삭제하면 리스트와 랭킹에 즉시 반영됩니다.