카카오톡 디자인을 참고한 실시간 채팅 애플리케이션 만들어 보기 (1)

💻 프로젝트 미리보기

 

 

서울로 이사하고 회사에 입사한 지 4개월이 지나서 OJT를 하면서 업무를 배우고 시간을 보내다가 여유가 생겼다. 주말에 사이드 프로젝트를 만들어보자고 마음먹고, 웹소켓을 이용한 채팅 프로그램을 개발했다.

스프링 부트를 취업 전에 사용하여 여러 프로젝트를 진행했었는데, 회사에 입사한 이후로는 잘 사용하지 않아서 잊어버린 부분이 많았다.

우선 회사를 다니면서 혼자서 사이드 프로젝트를 진행하는 일이 보통 힘든일이 아니였다...

회사에서도 프로젝트를 진행하는데 퇴근하고 집에 오면 바로 침대행이기 때문.....

 

실시간 채팅 애플리케이션

 

 

우선, 프로젝트 구성은 대충 이런식으로 구성하였다.

프로젝트 루트
│
├── src
│   ├── main
│   │   ├── java
│   │   │   └── com
│   │   │       └── example
│   │   │           └── chatapp
│   │   │               ├── config
│   │   │               │   └── WebSocketConfig.java
│   │   │               │   └── WebConfig.java
│   │   │               ├── controller
│   │   │               │   └── ChatController.java
│   │   │               └── service
│   │   │                   └── UserService.java
│   │   └── resources
│   │       └── application.properties
│   │
│   └── webapp
│       └── WEB-INF
│           └── jsp
│               └── chat.jsp
│               └── username.jsp

먼저 사용자가 닉네임을 입력하는 부분인 username.jsp를 만들고 채팅방을 입장하게 되면 chat.jsp가 실행된다.

 

WebSocket은 취업 준비를 하면서 팀 프로젝트에서 사용해본 경험이 있었지만, 그때는 웹소켓에 대한 이해가 부족한 상태에서 사용한 느낌이었다. 이번에는 웹소켓에 대해 깊이 공부하고 구현해보았다.

 

---

기술 스택

• 백엔드: Spring Boot, WebSocket
• 프론트엔드: JSP, JavaScript, CSS

 

주요 기능

• 실시간 채팅: 사용자는 메시지를 실시간으로 주고받을 수 있다.
• 사용자 목록: 현재 접속 중인 사용자 목록을 표시한다.
• 이모지 선택기: 사용자가 메시지 입력 시 이모지를 쉽게 선택할 수 있는 기능을 제공한다. 이모지는 카테고리별로 구분되어 있어 사용자가 원하는 이모지를 쉽게 찾을 수 있다.
• 사용자 입장/퇴장 알림: 사용자가 채팅방에 입장하거나 퇴장할 때 시스템 메시지를 통해 알림을 제공한다.

 

주요 파일 및 구성

• ChatController.java: 사용자 목록 관리 및 메시지 전송 로직을 처리한다.
• chat.jsp: 사용자 인터페이스를 구성하며, 이모지 선택기와 사용자 목록을 포함한다.

UI/UX 개선

 

이모지 선택기의 디자인을 개선하여 사용자 경험을 향상시켰다. 이모지를 카테고리별로 구분하고, 마우스 오버 시 확대되는 효과를 추가하여 시각적으로 더 매력적으로 만들었다.

 

의존성 설정

plugins {
    id 'java'
    id 'org.springframework.boot' version '3.3.4'
    id 'io.spring.dependency-management' version '1.1.6'
}

group = 'com.example'
version = '0.0.1-SNAPSHOT'

java {
    toolchain {
        languageVersion = JavaLanguageVersion.of(17)
    }
}

configurations {
    compileOnly {
        extendsFrom annotationProcessor
    }
}

repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-websocket'
    implementation 'org.springframework.boot:spring-boot-starter-data-jdbc'
    implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
    implementation 'org.springframework.boot:spring-boot-starter-web'

    // JSP Support Dependencies
    implementation group: 'org.glassfish.web', name: 'jakarta.servlet.jsp.jstl', version: '2.0.0'
    implementation 'jakarta.servlet.jsp:jakarta.servlet.jsp-api:3.0.0'
    implementation 'jakarta.servlet:jakarta.servlet-api:6.0.0'
    implementation 'org.apache.tomcat.embed:tomcat-embed-jasper'
    implementation 'org.apache.taglibs.taglib-standard-impl:1.2.5'
    implementation 'org.apache.taglibs.taglib-standard-spec:1.2.5'

    compileOnly 'org.projectlombok:lombok'
    developmentOnly 'org.springframework.boot:spring-boot-devtools'
    runtimeOnly 'mysql:mysql-connector-java:8.0.33'  // MySQL Connector
    annotationProcessor 'org.projectlombok:lombok'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
}
tasks.named('test') {
    useJUnitPlatform()
}

 

WebConfig.java 파일만들기

/**
 * WebConfig 클래스는 Spring MVC의 CORS(Cross-Origin Resource Sharing) 설정을 구성합니다.
 * CORS는 다른 출처의 웹 페이지가 현재 출처의 리소스에 접근할 수 있도록 허용하는 메커니즘입니다.
 * 이 설정을 통해 특정 출처에서 오는 요청을 허용하고, 허용할 HTTP 메서드 및 자격 증명 사용 여부를 지정합니다.
 */

package com.example.chatproject.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // CORS 설정 추가
        registry.addMapping("/chat/**") // "/chat/**" 경로에 대한 CORS 설정
                .allowedOrigins("http://localhost:8080", "http://localhost:3000") // 허용할 출처
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 허용할 HTTP 메서드
                .allowCredentials(true); // 자격 증명(쿠키, 인증 헤더 등) 허용
    }
}

 

 

WebSocketConfig.java 파일만들기

/**
 * WebSocketConfig 클래스는 Spring WebSocket 메시지 브로커를 설정하는 클래스이다.
 * 이 클래스에서는 STOMP 프로토콜을 사용하여 웹소켓 엔드포인트를 등록하고,
 * 메시지 브로커를 구성하여 클라이언트와 서버 간의 실시간 메시지 전송을 가능하게 한다.
 */

package com.example.chatproject.config;

import com.example.chatproject.listener.CustomHttpSessionInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;


@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // STOMP 엔드포인트 등록
        registry.addEndpoint("/ws") // 웹소켓 엔드포인트를 "/ws"로 설정
                .setAllowedOriginPatterns("http://localhost:8080") // 허용할 출처를 설정
                .withSockJS() // SockJS를 사용하여 브라우저 호환성 제공
                .setInterceptors(new CustomHttpSessionInterceptor()); // 커스텀 HTTP 세션 인터셉터 사용
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        // 메시지 브로커 설정
        config.enableSimpleBroker("/topic"); // 메시지 브로커가 "/topic" 경로를 구독하도록 설정
        config.setApplicationDestinationPrefixes("/app"); // 애플리케이션 목적지의 접두사를 "/app"으로 설정
    }
}

 

이 파일들은 각각 CORS 설정과 WebSocket 메시지 브로커 설정을 담당한다.

이 두 설정 파일은 Spring Boot 기반의 웹 애플리케이션에서 중요한 역할을 한다. 

WebConfig.java는 CORS 설정을 통해 외부 출처의 요청을 허용하고, WebSocketConfig.java는 실시간 메시지 전송을 위한 웹소켓 설정을 담당한다. 이러한 설정을 통해 사용자에게 더 나은 경험을 제공할 수 있다.