장고 뷰에서 디바이스 구분하기

소요 시간: 5분 조회수: 34

장고(Django)로 웹 애플리케이션을 개발하면서, 사용자가 어떤 디바이스를 사용하고 있는지 구분하는 방법을 알아보았다. 이 기능을 사용하려는 이유는 두 가지다.

첫째, 소셜 계정 로그인을 구현할 때 모바일과 PC 기기마다 키 값이 다르기 때문에, 이를 구분하여 적절한 처리를 해야 했다.

둘째, 모바일과 데스크톱에 맞는 템플릿을 달리 적용하고 싶어서였다. 이렇게 디바이스를 구분하는 방법을 통해 더 나은 사용자 경험을 제공할 수 있을 것 같았다.

웹 애플리케이션에서 사용자의 디바이스에 따라 다른 화면을 제공하는 것은 매우 중요한 기능이다. 반응형 웹 디자인을 구현하기 위해서, 사용자가 모바일 디바이스를 사용하고 있는지 확인하는 방법을 알아보았다.


디바이스 구분의 필요성

웹 사이트가 모바일과 데스크톱 환경에서 잘 동작하려면, 각각에 맞는 디자인과 기능을 제공하는 것이 필요하다.

예를 들어, 모바일에서는 화면 공간이 적기 때문에 메뉴를 축소하거나, 화면에 최적화된 이미지를 제공해야 한다. 데스크톱에서는 더 큰 화면을 활용할 수 있기 때문에, 더 많은 정보를 한 번에 보여줄 수 있다.

따라서, 장고에서는 요청(request) 객체를 통해 사용자가 모바일 디바이스로 접속했는지 아닌지를 구분해야 했다. 바로 이 부분을 해결하기 위해서 몇 가지 방법을 시도해보았다.


1. 사용자 에이전트(User-Agent) 확인하기

모든 웹 브라우저는 요청을 보낼 때 User-Agent라는 정보를 함께 전달한다.

이 정보에는 사용자가 사용하는 디바이스 종류와 브라우저 정보가 포함되어 있다. 예를 들어, 모바일 장치에서 접속할 경우에는 "iphone", "android"와 같은 키워드가 포함된 User-Agent를 보낸다.

이 정보를 바탕으로, 우리는 사용자가 모바일 장치인지 아닌지를 확인할 수 있다.


2. 정규식을 이용한 모바일 디바이스 판별

장고에서 사용자 디바이스를 구분하기 위해서는 `HTTP_USER_AGENT` 값을 사용해야 한다.

이 값을 정규식(Regex)을 사용하여 특정 키워드(예: "iphone", "mobile", "androidtouch" 등)를 검색하는 방법을 사용하면, 쉽게 모바일 디바이스를 구분할 수 있다.

이렇게 작성했다:

MOBILE_AGENT_RE = re.compile(r".*(iphone|mobile|androidtouch)", re.IGNORECASE)

def is_mobile(request):
    return MOBILE_AGENT_RE.match(request.META['HTTP_USER_AGENT'])

이 코드를 사용하면, 모바일 디바이스에서 접속했는지 아닌지를 쉽게 알 수 있다.

3. 뷰에서 모바일 여부 확인하기

이제, 우리가 작성한 is_mobile 함수를 장고 뷰에서 호출하면 된다. 사용자가 모바일 장치에서 접속한 경우와 아닌 경우에 따라 다른 페이지를 렌더링할 수 있다.

예를 들어, 이렇게 작성할 수 있다:

from django.shortcuts import render

def my_view(request):
    if is_mobile(request):
        return render(request, 'mobile_template.html')  # 모바일용 템플릿
    else:
        return render(request, 'desktop_template.html')  # 데스크탑용 템플릿

위 코드에서는 사용자가 모바일 장치에서 접속했을 때는 `mobile_template.html`을, 그렇지 않으면 `desktop_template.html`을 렌더링하도록 처리했다. 이렇게 하면, 디바이스에 맞는 적절한 화면을 사용자에게 제공할 수 있다.


4. 반응형 웹을 위한 추가적인 생각들

이 방법을 적용하면, 장고에서 간단하게 모바일 디바이스 여부를 확인하고 그에 맞는 화면을 제공할 수 있다. 하지만 반응형 웹 디자인을 구현하는 데 있어, 디바이스 구분은 시작에 불과하다.

다양한 화면 크기에 맞게 CSS나 JavaScript를 활용하여 더 세밀한 조정을 할 필요도 있다.

오늘은 사용자 디바이스 구분에 대한 기본적인 방법을 알아보았다. 이를 바탕으로 더 많은 기능을 추가할 수 있을 것 같다.

예를 들어, 모바일 사용자에게는 버튼 크기를 키우거나, 데스크톱 사용자는 다채로운 레이아웃을 제공할 수 있겠다고 생각했다. 웹 애플리케이션의 사용자 경험을 개선하는 데 정말 중요한 부분이었다.


마무리

장고에서 모바일 디바이스 여부를 구분하는 기능을 통해 웹 애플리케이션을 더욱 반응형으로 만들 수 있겠다고 생각했다.

웹 개발을 하면서 사용자 맞춤형 화면을 제공하는 것이 얼마나 중요한지 깨달았다. 앞으로 더 많은 기능을 추가해보려고 한다.

인기글

장고 리스트