메랜지지 내에 실시간 채팅을 구현해보자

이원석·2025년 8월 17일
1

사이드 프로젝트

목록 보기
5/10
post-thumbnail

오타/잘못된 내용에 대한 지적은 언제나 환영입니다!

MapleLand Chat - Chrome 스토어

MapleLand Chat - GitHub


안녕하시렵니까..

메이플랜드를 즐기면서 불편했던 점 중 하나는 게임 내에 경매장 기능이 없어 외부 사이트인 메랜지지(https://mapleland.gg)를 이용해야 한다는 점이었습니다.

메랜지지를 이용하면서 항상 아쉬웠던 점은 실시간으로 소통할 수 있는 기능이 없다는 것이었습니다. 경매장 특성상 특정 아이템에 대한 여론이나 의견을 즉시 공유할 수 있다면 훨씬 유용할 것이라 생각했고, 이를 해결하기 위해 크롬 확장 프로그램 형태의 채팅 기능을 직접 구현해 보았습니다.

설치는 간단하며 구글 측 검토를 마친 뒤 스토어에 업로드되었기 때문에 안전하게 사용할 수 있습니다. 별도의 로그인이나 회원가입은 필요 없으며, 익명 기반으로 자유롭게 의견을 나눌 수 있습니다. “실시간 거래를 위한 소통 공간”이라는 컨셉으로, 답글과 알림 기능을 통해 빠른 의견 교환도 가능하도록 설계했습니다.

이번 프로젝트는 상업적 목적이 아닌 개인 학습과 포트폴리오용으로 제작되었습니다. 소중한 트래픽 한 번 선사해주신다면 감사하겠습니다 🙂


🔹 주요 기능

  • 전체 채팅 및 아이템별 채팅 (특정 아이템 페이지 접속 시 자동 연결)
  • 좌측 상단에서 채팅 주제 변경 가능
  • 도배 방지, 욕설 필터링, 검색 기능
  • 신고 누적 시 자동 밴 처리
  • 답글 및 멘션 기능 (알림 소리)
  • 닉네임 변경 기능 (24시간 쿨타임)
  • 다크 모드 지원

⚠️ 크롬 브라우저 전용 / 시크릿 모드에서는 작동하지 않습니다.



또한 아래에는, 구현 과정과 기존 구조와 달라진 기술적 포인트들을 정리하고자 합니다.

(1) 파사드 패턴 기반 계층 구조

(2) third-party 서비스 활용

(3) 알고리즘을 활용한 욕설 필터링

(4) DB 복합 Index 및 커서 페이지네이션을 통한 수행 시간 최적화

(5) 익명 채팅 서비스에서 JWT 로 신원 인증하기



[사용 방법]

1. 크롬 익스텐션 설치

2. 개인정보 처리방침 동의

3. 메랜지지 접속, 우측 하단 주황버섯 아이콘 생성

4. 우측 하단 버섯 클릭, 채팅방 생성

5. 아이템 채팅방 구분

6. 채팅방 위치 이동 가능 및 좌측 상단 탭 클릭시 채팅방











0개의 댓글