(장고) 모바일과 PC에 맞게 텍스트 길이 다르게 출력하는 방법

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

오늘은 Django에서 템플릿을 렌더링할 때 모바일과 PC에서 각각 다른 길이로 텍스트를 자르고 싶어서 여러 가지 방법을 고민해봤다. 텍스트가 너무 길면 모바일에서는 보기 불편하고, PC에서는 길게 보여줘야 할 때가 많으니까. 이 문제를 해결하기 위한 방법을 하나씩 시도해보았다.

먼저, Django의 뷰(View)에서 클라이언트가 모바일인지 PC인지 구별할 수 있는 방법을 찾았다. request 객체에서 HTTP_USER_AGENT 값을 사용해 간단하게 모바일 여부를 확인할 수 있었다. 이를 통해 뷰에서 is_mobile이라는 값을 템플릿으로 넘겨줄 수 있었고, 템플릿에서는 이 값을 이용해 텍스트를 다르게 처리할 수 있었다.

# views.py
from django.http import HttpResponse
from django.shortcuts import render

def my_view(request):
    user_agent = request.META.get('HTTP_USER_AGENT', '').lower()
    is_mobile = 'mobile' in user_agent  # 모바일 체크
    context = {
        'is_mobile': is_mobile,
        'text': '이것은 텍스트 예시입니다. 길이를 잘라서 보여줍니다.',
    }
    return render(request, 'my_template.html', context)

모바일 뿐만 아니라 태블릿 등 좀 더 상세하게 디바이스를 구분할 수 있다. 이전에 작성한 장고 뷰에서 디바이스 감지하기 글을 참고하자!

이렇게 is_mobile 값을 전달한 뒤, 템플릿에서는 조건문을 사용해서 화면에 표시할 텍스트의 길이를 다르게 설정했다. 모바일에서는 짧게, PC에서는 좀 더 긴 텍스트를 표시할 수 있도록 했다.

<!-- my_template.html -->
<div>
    {% if is_mobile %}
        <p>{{ text|truncatewords:5 }}</p>  <!-- 모바일에서 짧게 자름 -->
    {% else %}
        <p>{{ text|truncatewords:10 }}</p> <!-- PC에서 길게 자름 -->
    {% endif %}
</div>

그런데 이렇게 서버에서 미리 조건을 판단해주는 방법 외에도 클라이언트 측에서 화면 크기를 바탕으로 텍스트 길이를 다르게 처리하는 방법도 생각해봤다. JavaScript를 이용해서 window.innerWidth 값을 통해 화면 크기를 체크하고, 그에 따라 텍스트를 다르게 자를 수 있다는 점이 흥미로웠다. 페이지가 로드될 때와 창 크기가 바뀔 때마다 텍스트 길이를 동적으로 바꿀 수 있었다.

<script>
    function adjustTextLength() {
        var textContainer = document.getElementById('dynamic-text');
        var screenWidth = window.innerWidth;

        if (screenWidth <= 768) {
            textContainer.textContent = '{{ text|truncatewords:5 }}';  // 모바일 텍스트
        } else {
            textContainer.textContent = '{{ text|truncatewords:10 }}'; // PC 텍스트
        }
    }

    adjustTextLength();
    window.addEventListener('resize', adjustTextLength);
</script>

이 방법은 사용자 화면 크기에 맞춰 텍스트를 즉시 변경할 수 있어서 유용했지만, JavaScript가 동작해야 하므로 클라이언트 측에 의존하는 단점이 있었다.

마지막으로 CSS 미디어 쿼리를 이용해 화면 크기에 따라 텍스트를 다르게 표시하는 방법도 고려해봤다. 이 방법은 JavaScript를 사용하지 않고, 화면 크기에 따라 CSS만으로 처리할 수 있기 때문에 좀 더 간단하고 빠르게 반응할 수 있었다.

<style>
    .mobile-text {
        display: none;
    }

    .pc-text {
        display: block;
    }

    @media (max-width: 768px) {
        .mobile-text {
            display: block;
        }
        .pc-text {
            display: none;
        }
    }
</style>

<div>
    <p class="mobile-text">{{ text|truncatewords:5 }}</p> <!-- 모바일용 -->
    <p class="pc-text">{{ text|truncatewords:10 }}</p>    <!-- PC용 -->
</div>

CSS 미디어 쿼리는 화면 크기에 맞춰 해당하는 텍스트를 보여주는 방식이라, 페이지 로딩 후 빠르게 적용되었고, 특히 JavaScript에 의존하지 않아 더 안정적인 방법 같았다.


이렇게 여러 가지 방법을 시도해본 결과, 각 방법은 상황에 따라 장단점이 있다는 것을 알게 되었다.

뷰에서 조건을 처리하는 방법은 서버 측에서 미리 데이터를 준비할 수 있어서 안정적이었고, JavaScript로 동적으로 처리하는 방법은 좀 더 실시간 반응을 할 수 있지만, 클라이언트 측에서 실행이 필요했다.

CSS 미디어 쿼리는 화면 크기에 따라 자동으로 텍스트를 다르게 보여줄 수 있어서 매우 간단하고 빠른 방법이었다.

오늘은 이 방법들을 통해 좀 더 유연하게 모바일과 PC에서 다르게 텍스트를 자르고 표시할 수 있는 방법을 배우게 된 날이었다.

인기글

장고 리스트