[Spring] SpringBoot 프로젝트에서 모바일, 태블릿 기기 식별하기

개요

이번 글에서는 SpringBoot 프로젝트에서 Spring Mobile을 사용하여 PC, Mobile, Tablet 기기를 식별하고 디바이스에 따른 각각의 뷰를 보여주는 방법에 대해 이야기해보려고 한다.

Spring Mobile 의존성 추가(Maven)

<dependency>
	<groupId>org.springframework.mobile</groupId>
	<artifactId>spring-mobile-device</artifactId>
	<version>1.1.3.RELEASE</version>
</dependency>

Interceptor 추가

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new DeviceResolverHandlerInterceptor());
    }
}

Device 설정 추가

# JSP
spring.mvc.view.prefix=/WEB-INF/view/
spring.mvc.view.suffix=.jsp

# For Mobile Device
spring.mobile.devicedelegatingviewresolver.enabled:true

application.properties에 위 설정을 추가한다.

위 설정을 추가하면 컨트롤러의 요청 메소드에 Device 정보를 argument 로 받을 수 있다.

파일 구조

파일 구조

이후 기기에 따른 WEB-INF/view/{device} 경로로 view 파일들을 생성해준다.

TestController 생성

@Controller
public class TestController {

    @GetMapping("/test")
    public String test(HttpServletRequest request) {
        Device device = DeviceUtils.getCurrentDevice(request);

        if(device.isNormal()) {
            return "pc/test";
        } else if(device.isMobile()) {
            return "mobile/test";
        } else if(device.isTablet()) {
            return "tablet/test";
        } else {
            return "test";
        }
    }
}

 

테스트를 위해 Controller를 하나 생성하고 이후 Request를 통해 받아온 Device 클래스의 isNormal, isMobile, isTablet 매서드를 이용하여 각 디바이스에 따라 다른 경로를 바라볼 수 있도록 하면 디바이스에 따른 웹뷰를 보여줄 수 있다.

테스트

1. PC

PC 디바이스

2. Mobile

크롬 모바일 모드

이후 크롬 모바일 모드를 사용하여 iPhone으로 설정해준 후 확인해보면

(크롬 모바일 모드 참고 - https://doshisha.tistory.com/122?category=1007141)

모바일 디바이스

모바일 경로에 있던 파일이 잘 나오는 것을 확인할 수 있다.

3. Tablet

크롬 모바일 모드

태블릿 디바이스도 마찬가지로 크롬 모바일 모드를 사용하여 iPad로 설정해준 후 확인해보면

태블릿 디바이스

태블릿 경로에 있던 파일이 잘 나오는 것을 확인할 수 있다.