해당 서비스는 프로토타입으로, 언제든 기능과 화면 구성이 추가되거나 변경될 수 있습니다.
개요
개발 배경
회사 내에서는 ‘네이트온’이라는 메신저를 사용하여 업무 내용 및 일정을 공유하고 있습니다.
그리고 휴식 시간에도 메신저를 이용하여 직장 동료들과 서로 이런 저런 잡담을 나누는 경우도 많습니다.
어느날, 친한 동료들과 점심 식사 중에 ‘업무용 메신저’라는 주제로 이야기를 나누다 보니,
우리 사이에는 휴식 시간에도 업무용 메신저를 통해 대화를 하면 어쩌면 조금은 업무적인 대화라는 느낌을 지울 수가 없다는 공감대가 형성되었습니다.
실제로 대화를 하다보면 자연스럽게 업무와 관련된 이야기로 넘어가기 쉽고,
이로 인해 휴식 시간에도 마음이 조금 긴장되고 있지 않나 생각해봤습니다.
그러다 문득 이런 생각이 들었습니다.
‘그럼 우리끼리만 나눌 수 있는 편한 대화 공간을 만들면 안될까?’
이 생각이 사건의 시발점이 되었습니다. 이내 곧 저는 이런 생각을 하였습니다.
‘그래, 우리끼리 서로 대화를 주고 받는 서비스를 그냥 내가 만들자!’
개발 스킬
- 소켓 & RESTful API 서버 : Python Flask
- 윈도우 프로그래밍 : C#
- 데이터베이스 : MySQL
베이비챗이란? (What is BabyChat?)
사용자들이 실시간으로 대화할 수 있는 채팅 플랫폼입니다.
사용자 중심의 설계와 간편한 사용성을 강조하며, 누구나 손쉽게 채팅을 시작할 수 있습니다.
또한, 사용자들의 사생활 보호를 위해 사용자 식별을 위한 이메일 정보 이외의 모든 데이터(대화 내용 및 첨부된 이미지 파일 등)는 따로 저장하지 않습니다.
사용 가이드
접속 및 로그인
베이비챗 접속하기
인터넷 URL 입력창에 http://babychat.xyz 를 입력하여 사이트에 접속 합니다.
회원가입
베이비챗에 접속하여 회원가입 버튼을 누릅니다.
유저 식별을 위한 이메일 주소와 닉네임을 입력하여 가입을 진행합니다.
* 이메일 주소는 따로 인증을 진행하지 않으며, 입력한 비밀번호는 암호화되어 저장됩니다.
- 이메일 주소 : 유효한 이메일 주소 형식을 입력합니다.
- 비밀번호 : 4-20자리 사이의 비밀번호를 입력합니다.
- 닉네임 : 2-12자리 사이의 닉네임을 입력합니다.
입력이 완료되면 등록을 눌러 회원가입을 완료합니다.
로그인
베이비챗에 접속하여 이메일 주소와 비밀번호를 입력하고 로그인 버튼을 누릅니다.
- 자동 로그인
- 이후 베이비챗에 접속 시 로그인을 따로 진행하지 않습니다.
- 자동 로그인의 유효 기간은 최대 30일이며, 30일마다 재로그인을 진행해주어야 합니다.
- 시작 시 자동 실행 (윈도우 프로그램 전용 옵션)
- 윈도우 시작 시 베이비챗 프로그램이 자동으로 실행됩니다.
- 웹 사이트에서 베이비챗을 접속할 경우, 해당 체크박스가 따로 보이지 않습니다.
채팅 로비
페이지 설명
- 방만들기 : 채팅방을 생성합니다.
- 입장하기 : 채팅방 목록에서 방을 선택 후, 선택된 채팅방으로 입장합니다.
- 내정보 : 회원의 정보를 변경합니다. 변경 가능한 정보는 닉네임과 비밀번호입니다.
- 로그아웃 : 베이비챗에서 로그아웃합니다.
- 새로고침 : 채팅방과 접속자의 목록을 새로고침합니다. 현재는 실시간으로 자동 새로고침되도록 되어 있습니다.
- 채팅방 목록 : 채팅방 목록을 확인합니다. 채팅방은 ‘방이름 (참여 인원수) 비밀번호방 여부’ 순으로 표시됩니다.
- 채팅방 참여자 : 선택한 채팅방에 참여중인 인원을 확인합니다.
- 전체 접속자 : 현재 베이지챗에 접속중인 전체 인원을 확인합니다.
채팅방 만들기
로그인을 한 후 채팅방 로비 화면에서 상단의 ‘방만들기’ 버튼을 클릭합니다.
- 방 이름 : 생성할 채팅방의 이름을 입력합니다.
- 비밀번호 걸기 : 비밀번호 방 여부를 선택합니다.
- 비밀번호 : 비밀번호 걸기를 체크할 경우, 비밀번호 방의 비밀번호를 입력합니다.
- 생성 : 채팅방을 생성합니다.
- 취소 : 채팅방 만들기 작업을 취소합니다.
채팅방 입장하기
채팅방 로비 화면에서 채팅방 이름의 목록 중 입장할 채팅방을 선택합니다.
- 선택한 채팅방을 더블클릭합니다.
- 선택된 채팅방을 확인하고 상단의 입장하기 버튼을 클릭합니다.
채팅방 나가기
채팅방에 참여된 상태에서만 채팅방을 나갈 수 있습니다.
- 채팅방에 입장한 상태에서 우측 상단의 파란색 아래 화살표(∨)를 클릭합니다.
- 나가기 버튼을 클릭하여 채팅방을 나갑니다.
채팅 기능
페이지 설명
채팅방 로비에서 채팅방을 생성 혹은 입장합니다.
1. 채팅방 참여자의 입장/퇴장을 알리는 시스템 메시지입니다.
2. 특정 유저와 개인적인(귓속말) 메시지를 보낼 때 본인의 메시지를 표시합니다.
3. 특정 유저와 개인적인(귓속말) 메시지를 보낼 때 상대방의 메시지를 표시합니다.
- 귓속말 기능(2번과 3번)은 7번의 귓속말 버튼을 이용하여 개인 메시지를 송수신할 수 있습니다.
4. 채팅방에 참여한 모든 인원이 확인할 수 있는 메시지를 표시합니다.
5. 메시지 내용을 작성하는 입력란입니다.
6. 작성한 메시지를 채팅방 메시지에 표시합니다.
7. 특정 유저와 개인적인(귓속말) 메시지를 보낼 대상을 지정합니다.
- 귓속말 버튼을 누르면 현재 참여중인 사용자 중 한명을 지정하여 개인적인 메시지를 보낼 수 있습니다.
8. 사용자의 채팅 메시지의 말풍선의 색상을 지정합니다.
- 팔레트 버튼을 클릭 한 후, 말풍선의 색상을 선택하면 이후 작성하는 메시지는 보여지는 모든 사용자에게 똑같이 적용됩니다.
9. 채팅방의 투명도를 조절합니다. 자리를 비우거나, 남들에게 보여주기 민감한 정보가 담겨 있을 경우 투명도를 조절하여 흐릿하게 변경할 수 있습니다.
10. 도움말(가이드)의 내용을 확인합니다.
- 프로토타입이기 때문에 따로 작성하지 않았습니다.
11. 참여중인 채팅방의 정보와 초대, 채팅방 나가기 기능을 제공합니다.
- 11-1. 참여중인 채팅방의 이름을 보여줍니다.
- 11-2. 참여중인 채팅방의 참여자의 정보를 목록으로 보여줍니다.
- 11-3. 초대 버튼을 이용하여 참여중인 채팅방 외의 사용자를 초대할 수 있습니다.
- 11-4. 채팅방 나가기 버튼을 이용하여 현재 참여중인 채팅방을 나가고 채팅방 로비로 이동합니다.
메시지에 이미지 첨부하기
클립보드로 캡쳐한 이미지가 있을 경우에만 이미지 첨부가 가능합니다.
이미지 서버를 따로 두지 않고 base64로 이미지를 처리합니다.
때문에 따로 저장되는 이미지 파일은 존재하지 않습니다.
- 이미지의 크기가 클 경우, 최대 가로 1280, 세로 720 사이즈로 제한됩니다.
- 이미지의 품질은 원본 이미지의 90%로 조정됩니다.
- 메시지에 첨부된 이미지 하단의 ‘크게 보기’와 ‘다른 이름으로 저장’ 기능을 수행할 수 있습니다.
초대 기능
사용자 초대하기
채팅방을 생성 혹은 입장합니다.
초대 목록은 현재 참여중인 방 외에 모든 사용자를 표시합니다.
1. 우측 상단의 파란색 아래 화살표(∨)를 눌러 사람 모양의 아이콘을 누릅니다.
2. 초대 버튼을 눌러 초대 목록을 확인합니다.
3. 초대할 유저의 정보를 확인하고 초대버튼을 누릅니다.
사용자에게 초대 받기
채팅방을 생성하거나 혹은 초대받는 방과 다른 방을 입장합니다.
초대 받기는 같은 채팅방 사용자에게는 받을 수 없습니다.
- 초대하는 사용자의 닉네임과 채팅방의 이름을 포함하여 초대 팝업이 출력됩니다.
- 확인 : 초대받은 방으로 이동합니다.
- 취소 : 초대를 거절합니다.
내정보 변경하기
채팅방 로비에서 우측 상단의 ‘내정보’ 버튼을 클릭합니다.
1. 사용자의 이메일을 표시합니다. 처음 입력한 이메일 주소는 변경할 수 없습니다.
2. 사용자의 닉네임을 표시합니다. 닉네임은 2-12자까지 입력이 가능합니다.
3. 사용자의 비밀번호를 변경합니다.
3-1. 비밀번호 변경을 누를 경우, 기존 비밀번호와 새로운 비밀번호를 입력합니다.
4. 입력한 정보로 변경합니다.
5. 내정보 변경 작업을 취소합니다.
윈도우 프로그램 사용 가이드
윈도우에서만 사용 가능한 프로그램으로, 사용자 편의 중심의 기능을 제공합니다.
시스템 요구사항
[ 하드웨어 요구사항 ]
- 32, 64비트 CPU 제한 없이 사용 가능
- 네트워크가 연결된 컴퓨터
[ 운영체제 요구사항 ]
- 운영체제 : Windows 제품에 한함
- 운영체제 버전 : Windows 10 이거나 그 이상의 버전
[ 소프트웨어 요구사항 ]
- 닷넷 7.0 런타임이 설치된 환경
- .NET 7.0 Desktop Runtime (v7.0.16) – Windows x64 Installer 다운로드
프로그램 설치 및 업데이트, 제거
다운로드
주의사항 : 해당 프로그램은 프로토타입으로 만들어져 서명이 되지 않은 프로그램입니다.
그렇기 때문에 윈도우 보안에 의해 기본적으로 차단되어 있습니다. 사용을 희망할 경우 해당 프로그램에 대한 보안을 해지해주세요. (바이러스라고 알림 뜨는데 바이러스는 아닙니다…)
- 베이비챗에 접속하여 베이비챗 프로그램 다운로드(윈도우)를 클릭합니다.
- 베이비챗 윈도우 프로그램 다운로드 링크를 눌러 다운로드를 진행합니다.
- 안전하지 않은 파일 다운로드 버튼을 눌러 다운로드를 진행합니다.
설치
C# .NET 을 기반으로 프로그램이 제작되었습니다.
.NET 7.0이 설치되어 있지 않은 환경에서는 실행이 되지 않습니다.
다운로드 받은 프로그램을 실행합니다.
출력되는 파란 화면에서 ‘추가 정보’ 를 클릭합니다.
‘실행’ 버튼을 눌러 베이비챗 설치를 진행합니다.
설치가 완료되면 바탕화면에 베이비챗 바로가기 아이콘이 생성됩니다.
업데이트
ClickOnce 배포 기술을 사용하여 프로그램이 업데이트 될 경우,
자동으로 업데이트를 진행합니다.
삭제
윈도우 설정에서 앱 – 설치된 앱(프로그램 추가/제거)으로 이동하여 목록의 베이비챗을 찾아 제거를 진행합니다.
윈도우 프로그램 전용 기능
윈도우 시작 시 자동 실행
로그인 화면에서 ‘시작 시 자동 실행’을 체크한 후 로그인을 진행합니다.
이후 윈도우를 시작할 때 자동으로 베이비챗이 실행됩니다.
프로그램 설정 화면 진입
프로그램 우측 상단의 톱니바퀴 모양 아이콘을 클릭합니다.
프로그램 설정 – 프로그램 크기 변경
- 프로그램 크기 부분에서 적용할 해상도를 선택한 후 하단의 확인 버튼을 클릭합니다.
프로그램 설정 – 바탕화면 바로가기 아이콘 생성
- ‘바탕화면 바로가기 생성’ 버튼을 클릭하면 바탕화면에 바로가기가 생성되며, 알림 문구가 출력됩니다.
프로그램 설정 – 시스템 트레이로 이동 (백그라운드 실행)
프로그램 우측 상단의 ‘X’ 버튼을 누를 경우, 프로그램을 종료할지 시스템 트레이로 보낼지 여부를 선택합니다.
- 프로그램 종료 : 프로그램 닫기 버튼을 누를 경우, 프로그램이 종료됩니다.
- 트레이로 보내기 : 프로그램 닫기 버튼을 누를 경우, 백그라운드로 실행되며 트레이로 보내집니다.
예시1) 트레이로 보내기 옵션 선택 후 프로그램을 닫을 경우
- 작업 표시줄에서 프로그램은 사라지며 트레이로 이동됩니다.
채팅방 숨기기 (프로그램 숨기기)
프로그램 실행 상태에서 ESC 키를 누르면 프로그램이 작업표시줄 또는 트레이로 이동됩니다.
1. 프로그램 설정에서 닫기 버튼 기능 정의가 프로그램 종료일 경우
- ESC키를 누르면 작업표시줄로 이동되며 현재 창이 사라집니다.
2. 프로그램 설정에서 닫기 버튼 기능 정의가 트레이로 보내기일 경우
- ESC키를 누르면 현재 창과 작업표시줄에서 사라지며 트레이로 이동됩니다.
시스템 트레이 메뉴
시스템 트레이에서 베이비챗 아이콘 우클릭합니다.
1. 열기 : 베이비챗 프로그램을 보여줍니다. 보통 트레이로 보낸 상태에서 베이비챗을 다시 실행할 때 사용합니다.
2. 도움말 : 프로그램 가이드를 표시합니다. 현재 따로 작성되지 않았으며, 현재 작성되는 문서를 도움말로 사용할 예정입니다.
3. 종료 : 프로그램을 종료합니다.
4. 아이콘 더블 클릭 : 아이콘을 우클릭하는 것이 아닌 더블 클릭 할 경우, (1)열기와 같은 기능으로 작동합니다.
부재중 메시지 수신 알림
프로그램을 최소화한(작업표시줄로 이동) 상태에서 채팅방에 다른 사용자가 메시지를 입력할 경우,
작업표시줄의 아이콘이 깜빡이면서 채팅방에 메시지가 왔음을 표시합니다.
프로그램 중복 실행 방지
프로그램을 다중으로 실행하였을 경우, 알림이 표시 됩니다.
개발 이력
- 2024-01-25
- 실시간 채팅 기능 구현
- 2024-01-26
- 채팅 서버 구축 (소켓 및 API)
- 2024-01-27
- 로그인 페이지 및 채팅 페이지 추가
- 2024-01-28
- 회원가입 및 로그인 기능 구현 및 로그인 페이지 UI 개선
- 2024-01-29
- 클립보드의 이미지 첨부 기능 (base64 이용, 이미지 품질 및 리사이징 처리)
- 2024-01-30
- 귓속말 기능 구현
- 2024-02-01
- 채팅방 만들기 & 입장하기 기능 구현
- 2024-02-03
- 실시간 접속자 현황 확인 기능 구현
- 접속자 현황 새로고침 버튼 추가
- 2024-02-04
- 로비 페이지 추가 ( [절차] 로그인 – 로비 – 채팅방 선택 – 채팅방 입장 )
- 로그아웃 UI 개선
- 2024-02-05
- 비밀번호 방 기능 구현
- 실시간 접속자 로직 개선
- 2024-02-06
- 이용가능 플랫폼 추가 (윈도우, C#언어 사용)
- 배포 및 자동 업데이트 구현 (ClickOnce)
- 2024-02-07
- 자동 로그인 기능 구현
- 2024-02-08
- 윈도우 프로그램 전용 로그인 기능 구현
- 윈도우 시작 시 자동 실행 기능 (해당 기능은 씨샵 프로그램에서만 보입니다.)
- 윈도우 프로그램 전용 로그인 기능 구현
- 2024-02-09
- 초대 기능 구현
- 2024-02-14
- 윈도우 프로그램 전용 기능 추가
- 윈도우 프로그램 내에서 ESC키를 누르면 프로프램 최소화
- 윈도우 프로그램에서 최소화 상태에서 메시지 도착 시 창 깜빡임
- 채팅방 UI 개선 (말풍선 색상 변경 기능 추가)
- 윈도우 프로그램 전용 기능 추가
- 2024-02-15
- 채팅방에 첨부된 이미지 크게 보기 기능 추가
- 2024-02-16
- 채팅방에 첨부된 이미지 다른 이름으로 저장 기능 추가
- 회원가입 UI 개선 및 입력 정보 유효성 확인 로직 추가
- 프로토타입 도메인 추가 : http://babychat.xyz:4000/
- 2024-02-19
- 포트가 없는 기본 도메인으로 변경 : http://babychat.xyz/
- CORS 허용 도메인 추가 : “http://www.babychat.xyz“, “http://babychat.xyz“
- 보인 기능 추가
- 로그인 토큰 유효 기간 추가 : 30일
- 토큰 유효 확인 로직 추가
- 회원 정보 변경 기능 추가 (닉네임, 비밀번호)
- 2024-02-23
- 접속 관리 로직 변경
- 기존은 이름만 사용 > 유니크값 식별을 위해 이메일 함께 사용
- 액세스 토큰으로 유저 식별하여 접속 허용하도록 함
- 접속 관리 로직 변경
- 2024-02-25
- 윈도우 프로그램 전용 기능 추가
- 기존 제목표시줄을 커스텀 UI로 변경
- 창 이동 기능 추가
- 최소화 기능 추가
- 최대화 기능 추가
- 닫기 기능 추가
- 프로그램 글꼴 변경 (배달의민족-주아체) + 글꼴이 설치되어 있지 않아도 적용되도록 함
- 커스텀 제목표시줄에 옵션 설정 기능 추가
- 해상도 설정 (480×320, 640×480, 800×480, 800×600, 960×640, 1024×576, 사용자정의)
- 프로그램 바탕화면 바로가기 생성
- 닫기 버튼 기능 정의 (프로그램 종료 / 트레이)
- 기존 제목표시줄을 커스텀 UI로 변경
- 윈도우 프로그램 전용 기능 추가
- 2024-02-26
- 윈도우 프로그램 기능 추가
- 사용자 설정 저장 기능 추가(settings.config) : 프로그램 설정 시 다음 실행 시에도 설정된 옵션으로 적용
- 프로그램 중복 실행 방지 기능 추가
- 프로그램을 설치형으로 변경 (프로그램 추가 제거에서 확인 가능)
- 채팅 내용 오토 스크롤 제한 기능 추가 (사용자가 밀린 대화 내용을 읽을 때 오토 스크롤 되지 않도록 함)
- 윈도우 프로그램 기능 추가