승리의 여신 니케의 채팅 시스템을 창작 기획한 문서입니다.

1. 승리의 여신: 니케
채팅 시스템
창작 기획서
최지현
wlqhddl97@naver.com

2. 목차
01.
시스템 개요
1
02.
시스템 구성
2
03.
UI/UX
3
04.
시스템 규칙
4

3. 1. 시스템 개요 – 시스템 기획 의도 (1)
상호작용 증진
 게임 채팅은 플레이어들이 서로 소통하고 협력하거나 대립할 수 있는 수단을 제공한다.
 게임 내 커뮤니티가 구축된다.
“문제 해결과 도움 ”
커뮤니티 구축에 따른 이점
“사회적 연결”
기능
 게임 내 어려운 상황에서 다른 플레이어의 도움을 받을 수 있다.
 공략이나 팁을 공유함으로써 게임 진행이 원활해진다.
기능
 게임 내에서 형성된 친구 관계는 플레이어들이 게임에
지속적으로 접속하고 활동하게 하는 동기가 된다.

4. 1. 시스템 개요 – 시스템 기획 의도 (2)
이모티콘 보편화
 이모티콘을 채팅 시스템의 필수 요소로 자리 잡게 하여 플레이어들이 더 쉽게 감정과 반응을 표현할 수 있도록 한다.
콘텐츠 참여 동기 증가
목적  다양한 게임 내 활동과 이벤트의 보상으로 이모티콘을 제공한다.
기대효과  플레이어들에게 콘텐츠 참여에 대한 추가적인 동기 부여를 제공한다.
이전 성공 사례
 프로필 카드 스티커를 보상으로 제공하여 긍정적인 반응을 얻었다.
 프로필 스티커의 성공을 바탕으로, 이모티콘 역시 콘텐츠 보상으로 제공되었을 때 비슷한 긍정적 반응을 이끌어낼 가능성이 높다.
유료 패키지
목적  특별한 이모티콘을 유료 패키지로 제공한다.
기대효과
 유료 패키지 판매를 통해 매출 증대를 기대할 수 있다
 특별한 이모티콘을 통해 자신을 표현할 수 있게 되어 만족도가 높아진다.
예상 문제점  커스텀이제이션 아이템을 유료로 판매하는것에 대한 유저들의 반발이 있을 수 있다.
해결 방안
 이모티콘만을 유료로 판매하는것이 아닌, 기존 패키지 혹은 추후에 나올 패키지에 가격은 유지하되 이벤트성으로 특별한 이모티콘을 포함시킨다.
 이는 유저들의 패키지 구매 욕구를 증가시킬 수 있다.

5. 2. 시스템 구성 – 시스템 아키텍처
개요
 채팅 시스템의 아키텍처는 클라이언트 / 채팅 서버 / 데이터베이스의 세 가지 주요 구성 요소로 이루어져 있다.
 이 시스템은 실시간 채팅을 지원하여 플레이어 간의 원활한 소통을 가능하게 한다.
클라이언트
역할  플레이어가 게임 내에서 채팅할 수 있는 인터페이스를 제공한다.
구성 요소
UI 컴포넌트  텍스트 입력 창, 메세지 표시 영역, 이모티콘 선택기
네트워크 모듈  채팅 서버와 통신을 담당하여 메시지를 송수신
채팅 서버
역할  클라이언트 간의 메시지 중계를 담당한다.
구성 요소
연결 관리  클라이언트와의 연결을 유지한다.
메시지 브로커  메시지를 수신하고, 적절한 클라이언트로 전달한다.
데이터베이스
역할  채팅 메시지와 사용자 정보를 저장한다
구성 요소
메시지 저장  채팅 기록을 저장하여 나중에 조회할 수 있도록 한다.
사용자 정보 저장  사용자의 프로필 정보 및 설정을 저장한다.

6. 2. 시스템 구성 – 데이터 흐름 방식
메시지 전송
1  사용자가 클라이언트에서 메시지를 입력하고 전송 버튼을 누른다.
2  클라이언트의 네트워크 모듈이 메시지를 채팅 서버로 전송한다.
3  채팅 서버는 메시지를 수신하고, 해당 메시지를 다른 클라이언트로 중계한다.
4  다른 클라이언트는 서버로부터 메시지를 받아 화면에 표시한다.
메시지 저장
1  채팅 서버는 수신한 메시지를 데이터베이스에 저장한다
2  데이터베이스는 메시지를 저장하고, 나주에 조회할 수 있도록 관리한다.

7. 2. 시스템 구성 – 데이터 전파 및 저장
데이터 전파
• 클라이언트와 서버 간의 양방향 통신을 위해 웹소켓 통신 방식을 채택한다.
실시간 데이터 전송  서버와 클라이언트 간의 지속적인 연결을 유지하여 실시간으로 메시지를 주고받을 수 있다.
낮은 지연 시간  HTTP 요청 / 응답 주기와 달리 연결이 유지되므로 지연 시간이 적다.
양방향 통신  클라이언트와 서버가 서로 데이터를 보낼 수 있어 실시간 상호작용이 가능하다.
웹소켓 통신 채택 이유

8. 2. 시스템 구성 – 데이터 전파 및 저장
데이터 저장
• 관계형 데이터베이스와 비관계형 데이터베이스를 조합해서 사용한다.
관계형 데이터베이스
 사용자 정보, 친구 목록, 사용자 설정 등 구조화된 데이터를 관리한다.
근거  관계형 데이터베이스는 데이터의 무결성과 관계를 유지하는데 적합하고 안정성이 보장된다.
비관계형 데이터베이스
 key-document 형식의 DB를 채택한다.
근거
유연한 데이터 모델
 문서 지향 데이터베이스는 스키마가 고정되어 있지 않아 다양한 형태의 데이터를 저장할 수 있다.
 이는 채팅 메시지와 같은 비정형 데이터에 적합하다.
빠른 데이터 쓰기 및 읽기  Key-Document 데이터베이스는 데이터 쓰기와 읽기에 최적화되어 있어 실시간 채팅 시스템의 요구사항을 충족시킨다.
수평적 확장성  수평적 확장이 용이하여 대규모 데이터를 효율적으로 처리할 수 있다.

9. 3. UI/UX
< 메인화면 UI >
진입 방법 번호 설명
1
기능 • 채팅 시스템으로 진입할 수 있는 아이콘 UI
진입 방법 • 채팅 아이콘 클릭
출력 위치
/ 의도
• 메인화면 우측 상단에 ‘친구 – 유니온 – 채팅’ 순으로 출력
• 친구, 유니온 아이콘과 함께 우측에 배치하여 소셜 기능의 요소들을 한 곳
에 모음으로써 사용자가 쉽게 찾고 접근할 수 있도록 한다.
아이콘 UI
/ 의도
• 색감과 생김새를 동일하게 하여 플레이어에게 일관된 시각적 경험을 제
공하고, 아이콘들이 같은 그룹에 속한다는 인식을 준다.
도형 색 : 292a2f
테두리 색 : ffffff
글씨 색 : ffffff
글씨 테두리 색 : 292a2f
1

10. 3. UI/UX
채팅창 출현 방식 번호 설명
2
기능 • 채팅 아이콘을 클릭했을 때 화면에 나타나는 방식을 다음과 같이 설정
출현 위치
/의도
• 채팅창은 화면 왼쪽에서 오른쪽으로 슬라이드 인 하여 등장한다.
• 대부분의 플레이어는 왼쪽에서 오른쪽으로 읽는 시각적 흐름에 익숙하다.
• 사용자가 자연스럽게 화면의 주요 요소들을 시각적으로 따라갈 수 있다.
지속 시간 • 채팅창이 완전히 나타나는 데 걸리는 시간은 0.5초이다.
출현 효과
/ 의도
• ease-in-out 방식을 사용한다.
• 플레이어에게 채팅창이 부드럽게 나타나고 사라지는 효과를 제공한다.
상세 설명
초기 • 아이콘을 클릭하기 전, 채팅창은 화면 밖 왼쪽에 위치하여 보이지 않는다.
시작
• 채팅 아이콘 클릭 시, 채팅창의 `left` 속성이 -300px에서 0으로 변화하면서 화
면에 등장한다.
완료
• 0.5초 후, 채팅창이 완전히 화면에 나타나 사용자가 채팅을 시작할 수 있는 상태
가 된다.
2

11. 3. UI/UX
채팅창 번호 설명
3
기능 • 채팅창 전체화면 UI
설명
/ 의도
• 채팅창을 모달리스 창 형식으로 설계하여 사용자가 채팅을 할 때 화면의 다른
요소들과 자유롭게 상호작용할 수 있도록 한다.
• 채팅창 배경 색 :000000 (투명도 30%)
• 채팅을 하면서도 다른 작업을 진행할 수 있도록 하여 더욱 유연한 인터페이스
경험을 제공한다.
4
기능 • 패널을 나타내는 UI
설명
5
기능 • 플레이어 프로필 및 닉네임, 말풍선을 나타내는 UI
설명
자신 채팅
4
3
5
월드 패널명 문구 출력
패널 아이콘 & 글씨 색
: ffffff
월드
선택된 패널의 경우
테두리 효과 적용
테두리 색
: 0070c0
니케단1
안녕하세요
플레이어의 프로필
및 레벨 출력
플레이어의 닉네임 출력
글씨 색 : ffffff
말풍성 배경 색 : ffffff
말풍선 테두리 색 :
000000
글자색 : 000000
모두들 좋은 아침입니다.
말풍성 배경 색 : ffc000
말풍선 테두리 색 : ffffff
글자색 : ffffff

12. 3. UI/UX
채팅창 번호 설명
6
기능 • 채팅 메시지를 입력할 수 있는 텍스트 필드 UI
설명
• 메시지 입력 안내문구를 플레이스홀더 텍스트를 통하여 출력
7
기능 • 이모티콘 창을 출력해주는 버튼 UI
설명
버튼 클릭 전 버튼 클릭 후
8
기능 • 입력한 텍스트를 전송하는 버튼 UI
설명
버튼 클릭 전 버튼 클릭 시
6 7 8
터치해 입력…
PH 텍스트 색 :
000000
박스 테두리 색 :
000000
박스 배경 색 :
d9d9d9
발송
글씨 색 :
ffffff
버튼 색 :
0070c0
발송
글씨 색 :
ffffff
버튼 색 :
153254
버튼 사이즈 다운 :
-20%
발송
버튼 색 :
000000
버튼 색 :
ffffff
이모티콘 창 열려있는
동안 유지

13. 3. UI/UX
이모티콘 창 번호 설명
9
기능 • 이모티콘 목록을 나타내는 창 UI
설명
/ 의도
• 모달리스 창 형식으로 설계한다.
• 배경색에 투명도를 50% 적용한다.
• 이모티콘 창 배경의 투명도를 줄이면 플레이어가 채팅을 하면서도 게임 화면을
일부 확인할 수 있다.
• 이는 이모티콘을 선택하는 중에도 채팅을 확인할 수 있도록 한다.
출현 방식 • 이모티콘창은 채팅 입력 칸 위에서 페이드 인 하여 등장한다.
9
< 선택된 항목이 포함하고 있는 이모티콘 목록 >
배경 색 : 0070c0
투명도 : 50%
< 이모티콘 니케 항목 나열 >
배경 색 : 000000
선택된 항목 배경 색 : 0070c0

14. 3. UI/UX
월드 채팅 번호 설명
10
기능 • 현재 속한 채널을 나타내고 채널을 바꿀 수 있는 채널목록창을 출력하는 버튼을 포함한 UI
설명 • 속한 채널 – 채널 포화 상태 – 채널 바꾸는 버튼 순으로 나열한다.
채널 상태
설명 • 채널 상태에 따라 다른 UI를 출력한다.
• 긍정적이고 안정적인 상태를 나타내는 초록색으로 버튼을 표시함으로써 접속에 문제가 없음
을 인지시킨다.
• 주의를 나타내지만, 빨간색보다 덜 긴급한 상황을 나타내는 노란색으로 버튼을 표시한다.
• 일반적으로 경고, 주의, 부정적인 상황을 나타내는 빨간색으로 버튼을 표시함으로써 채널 접
속에 있어서 시각적인 경고를 보낸다.
채널 변경
창
출현 방식 • 채널 변경 창은 채팅창 가운데서 페아드 인 하여 등장한다.
헤더 구성 • 채널 아이콘 – 채널 목록 문구 – 채널 목록을 새로고침하는 아이콘 순으로 정열한다.
메인 구성
/ 예시 이미지
• 채널 목록을 표시하는 UI를 출력한다.
10
< 월드 채팅 UI >
혼잡
균형
여유

15. 3. UI/UX
1:1 채팅 번호 설명
11
기능 • 채팅중인 채팅 목록을 출력하는 UI
패널
• 채팅창 패널과 동일
• 글자 색 : ffffff
대화 목록
• 대화 중인 채팅방 개수를 표시한다.
• 글자 색 : ffffff
설명
12
기능 • 친구 / 유니온 맴버 목록을 나타내는 UI
친구 /
유니온
목록
• 친구 / 유니온 맴버 인원의 개수를 표시한다.
• 글자 색 : ffffff
설명
마지막으로 접속했던 시간을 출력
상대방과 1:1대화를 할 수 있는
버튼 아이콘 UI를 출력
친구/유니온 맴버의
닉네임 출력
11
12
마지막으로 했던 채팅 내용을 출력
상대방의 마지막 채팅을 확인하지 않
은 경우 표시되는 아이콘
채팅 상대의 닉네임 출력

16. 4. 시스템 규칙
최대 글자 수
행/열 글자 최대 수
기준 • 픽셀 단위로 최대 너비/높이 기준
이유
• 다양한 문자의 크기를 고려하여 픽셀 단위로 최대 글자
를 설정한다.
행 최대 글자 • 한 줄 최대 12자까지 허용
열 최대 열 개수 • 3줄까지 허용
최대 글자 수 • 12 x 3 = 36
메시지 박스 크기
박스 크기
최소 크기
너비 • 80px
높이 • 20px
최대 크기
너비 • 200px
높이 • 60px
자동 크기 조절 • 메시지 길이에 따라 말풍선이 자동으로 크기를 조절하도록 한다.
패딩
설명 • 메시지 박스와 글자 사이의 여백 값을 정의한다.
좌우 여백 • 10px
상하 여백 • 5px
200px
동해물과 백두산이 마르고 닳도록 하
느님이 보우하사 우리나라 만세 무궁
화 삼천리 화려 강산 대한 사람 대한으
로 길이 보전하세 남산 위에 저 소나무
철갑을 두른 듯 바람 서리 불변함은 우
리 기상일세 무궁화
52px
※ 참조용. 실제 최대 글자 수 x
5px
10px
200px
동해물과 백두산이 마르고
닳도록 하느님이 보우하사
우리나라 만세
180px
10px 10px
60px 50px
5px
5px

17. 4. 시스템 규칙
이모티콘
이모티콘 표시
규칙 • 이모티콘의 사용 시, 이모티콘을 먼저 출력 후 메시지 박스 출력
텍스트
텍스트 설정
폰트 크기 • 14px
폰트 색상
• 발신자 : 000000
• 수신자 : FFFFFF
※ [UI/UX] – [채팅창] 페이지 참조
폰트 스타일 • 게임 내 폰트와 동일한 스타일 적용
정렬 • 좌측 정렬
스크롤
스크롤 정책
목적
• 스크롤 기능은 사용자가 화면에 표시되지 않는 채팅 메시지, 친구 목록, 채
팅방 목록 등을 편리하게 확인할 수 있도록 하여 사용자 경험을 향상시키기
위해 도입한다.
기능 범위 • 채팅 시스템 내의 모든 범주
기능 구현
• 스크롤바는 사용자가 쉽게 인식할 수 있도록 명확하게 표시된다.
• 스와이프 제스처를 통해 스크롤이 가능하도록 지원한다.
주의 사항
• 스크롤 기능은 부드럽고 끊김 없이 동작해야 하며, 사용자가 스와이프하는
동안 앱이 원활하게 작동해야 한다.
• 스크롤바의 디자인은 게임의 전체 UI 디자인과 일치해야 하며, 사용자 경험
을 방해하지 않도록 신경 써야 한다.
예시 이미지

18. 4. 시스템 규칙
채널
채널 규칙
채널 개수 • 10개
채널 인원 • 50명
※ 채널 개수와 인원은 추후 업데이트에 따라 조정될 수 있다.
여유 • 서버에 있는 유저가 전체 용량의 약 0% ~ 30% 정도일 때 여유 상태이다.
균형 • 서버에 있는 유저가 전체 용량의 약 30% ~ 70% 정도일 때 균형 상태이다.
혼잡 • 서버에 있는 유저가 전체 용량의 약 70% ~ 100% 정도일 때 혼잡 상태이다.
채팅 리스트 저장 및 삭제
저장
목적
• 사용자들이 이전에 주고받은 채팅을 다시 볼 수 있도록 보관하는 것이 목적
이다.
저장 용량 • 최대 100MB의 채팅 기록을 보관한다.
삭제
목적
• 채팅 리스트의 크기를 유지하고 데이터베이스 공간을 관리하기 위해 삭제
정책이 필요하다.
용량 제한 • 채팅 리스트가 최대 용량에 도달하면 가장 오래된 채팅부터 삭제된다.
채팅 초기화
채팅 초기화 정책
목적
• 재접속 시 채팅 탭을 초기화함으로써 사용자 경험을 향상시키는 것이 목적
이다
탭별 초기화
유무
※ O : 초기화 진행 X : 초기화 진행하지 않음

19. 4. 시스템 규칙
플레이어 정보
플레이어 정보 규칙
규칙 • 플레이어 아이콘 클릭 시, 정보 창을 출력한다.
정보 확인 • 플레이어 프로필 카드 창을 출력한다.
채팅하기 • 알림 팝업 창 출력 후 1:1채팅 탭에 채팅룸을 생성한다.
신고하기 • 팝업 창 출력 후 플레이어를 신고한다.
※ [시스템 규칙] – [신고하기]에서 자세히 설명
차단하기
• 팝업 창 출력 후 플레이어를 차단한다.
※ [시스템 규칙] – [차단하기]에서 자세히 설명
2
3
1
UI / UX
1 • 클릭 시, 플레이어 정보 창을 종료한다.
2 버튼 클릭 전
마우스 오버
/ 클릭 시
3 클릭 전
글자 & 아이콘
Size = 100%
마우스 오버
/ 클릭 시
글자 & 아이콘
Size – 20%
팝업 창 출력
• 2,3 모두 해당 버튼에서 마우스 릴리즈 시, 원 상태로 복구된다.
팝업 창
1 2
OOOO
버튼 색 : 116fe0
글자 색 : ffffff
OOOO
버튼 색 : 0d3a71
글자 색 : ffffff

20. 4. 시스템 규칙
채팅 설정 UI
진입 방법 [ 서브 메뉴 ] – [ 설정 ] – [ 채팅 ]탭을 통해 진입 가능하다.
진입 UI
설정 창 UI
설정 팝업 창에
[채팅]탭 추가
1
2
3
4
UI 설명
1
• 채팅창 투명도를 조절할 수 있는 설정 UI
• 투명도 끄기 기능은 체크 박스로 구현
• 투명도 조절은 볼륨 슬라이더로 구현
2
• 채팅에 대한 알림을 받을지에 대한 설정 UI
• 푸시 알림 설정은 라디오 버튼으로 구현
3
• 비속어를 필터링 할지에 대한 설정 UI
• 비속어 필터링 설정은 라디오 버튼으로 구현
4
• 차단한 사용자 목록 보기, 차단 추가 및 해제 기능을 하는 UI
• 차단 목록은 텍스트 필드로 구현
• 차단 목록에서 대상 선택은 체크 박스로 구현
• 차단 추가 및 해제는 버튼으로 구현
차단 추가 차단 해제
색 테마는
자기소개 입력 창과 동일

21. 4. 시스템 규칙
차단
차단 규칙
유저 차단
• 유저는 언제든지 특정 사용자를 차단할 수 있다.
• 차단된 사용자의 메시지는 차단한 유저에게 보이지 않으며, 차단된 사용자도
차단한 사용자의 메시지를 볼 수 없다.
차단 해제
• 사용자는 언제든지 차단을 해제할 수 있다.
• 차단을 해제하면 해당 사용자의 메시지가 다시 표시된다.
차단 관리
• 사용자는 차단한 사용자 목록을 확인하고 관리할 수 있다.
• 차단 목록은 사용자 설정 메뉴에서 접근할 수 있다.
도배
도배 방지 정책
목적
• 채팅 시스템의 균형과 질서를 유지하고, 사용자들의 채팅 환경을 개선하는
것이 목적이다.
제한
• 단일 사용자가 일정 시간 동안 동일한 메시지를 반복해서 전송할 경우 일정
시간 동안 해당 사용자의 메시지 전송을 제한한다.
제한 기준
• 동일한 메시지를 10초 이내에 5회 이상 반복해서 전송하는 경우 해당 사용
자의 메시지 전송이 1분 동안 제한된다.
경고 메시지

22. 4. 시스템 규칙
신고
신고 규칙
목적
• 채팅 신고 기능은 게임 내에서 부적절한 행동이나 언어를 신고하여 게임 환
경을 개선하고 유저의 안전을 보호하는 데 사용된다.
신고 절차
신고 버튼 클릭 • 유저는 채팅 창에서 신고 버튼을 클릭한다.
신고 팝업 창
• 유저는 팝업 창에서 신고 사유를 선택하고 신고하기
버튼을 클릭한다.
신고 대상
• 욕설 및 혐오 발언
• 괴롭힘 또는 언어적 공격
• 불법적인 홍보나 광고
• 그 외 상대방의 기분을 해칠 수 있는 채팅
처리 절차
신고 검토 • 신고가 접수되면 관리자가 해당 신고를 검토한다.
조치
• 관리자는 적절한 조치를 취하여 부적절한 행동을 한
유저에 대해 경고, 제재 또는 계정 정지 등의 조치를
취한다.
비속어
비속어 처리 규칙
목적
• 비속어 처리 기능은 게임 채팅 시스템에서 유저 간의 부적절한 언어를 필터링하
여 게임 환경을 건전하고 쾌적하게 유지하는 데 사용된다.
비속어 처리
비속어 감지
• 시스템은 사전에 정의된 비속어 목록을 사용하여 채팅 메
시지를 분석하고 비속어를 감지한다.
필터링 • 비속어가 감지될 경우 채팅 전송을 취소한다.
경고 메시지
• 유저가 비속어를 입력하면 시스템은 해당 유저에게 경고
메시지를 표시하여 부적절한 언어 사용을 제한하는 역할
을 한다.
필터링 대상
• 욕설 및 혐오 발언
• 인신 공격 또는 괴롭힘
• 선정적인 언어 또는 성적인 언어
• 그 외 상대방의 기분을 해칠 수 있는 채팅