6. 현재의 반응형 웹 기술과 최신 동향

웹의 세계는 끊임없는 혁신과 변화의 과정을 거치며, 사용자의 요구사항과 환경에 따라 진화하고 있습니다. 웹은 현재의 디지털 시대에서 더 이상 무시할 수 없는 중요한 요소로 자리 잡았고, 웹 디자인과 개발은 더 나은 사용자 경험과 더 나은 성능을 위한 지속적인 노력의 일환입니다.

따라서 우리는 지금까지 “반응형 웹 디자인"이라는 주제로, 반응형 웹을 만들기 위한 다양한 기술과 기법에 관하여 살펴보았습니다. 이 책의 마지막 챕터에서는 반응형 기술 트렌드를 살펴보고자 합니다. 이를 통해 현재의 반응형 웹 디자인 환경을 파악하고, 미래에 대한 통찰력을 얻을 수 있기를 바랍니다.

6.1 모바일 퍼스트

디지털 시대의 웹 환경은 끊임없이 변화하고 있으며, 그중에서도 가장 주목할 만한 변화는 모바일 기기 환경의 비중이 매우 증가하고 있다는 것입니다. 스스로에게도 한 번 질문해 보세요. 얼마나 자주 모바일 기기를 사용하시나요? 아마 매일, 혹은 거의 매 순간이 아닐까요?

현대 사회에서 스마트폰과 태블릿은 더 이상 부가적인 도구가 아니라, 생활의 일부로 자리 잡았습니다.

이로 인해 모바일 기기를 통한 웹 접근은 단순한 트렌드가 아니라, 디지털 경험의 필수적인 부분으로 자리매김하고 있습니다. 자 이제, 모바일 환경에서의 웹 접근에 필요한 모바일 퍼스트 디자인의 핵심 개념과 그 중요성에 대해 더 자세히 살펴봅시다.

6.1.1 모바일 퍼스트란?

앞서 말했듯 우리의 디지털 일상은 다양한 모바일 기기에 둘러싸여 있습니다. 모바일 환경에서의 웹 경험이 중요해짐에 따라, 웹 디자인과 개발 단계에서 모바일 환경을 최우선으로 고려하는 웹 트렌드가 부상했습니다. 이러한 현상은 모바일 퍼스트(Mobile-First)라는 개념으로 정의됩니다.

모바일 퍼스트란 디자인 개발 과정에서 모바일 환경인 경우를 최우선으로 생각하여 디자인하는 전략을 의미합니다.

모바일 퍼스트 디자인은 ‘점진적 개선'의 원칙에 기반을 둡니다. 이 원칙은 웹 사이트 개발 초기 단계에서 모든 사용자가 접근할 수 있는 기본적인 기능을 먼저 구현하고, 그 기반이 되는 버전 위에 점차 고급 기능이나 추가적인 요소들을 덧붙여 나가는 방식을 의미합니다. 이런 방식으로 웹사이트를 구축하게 되면, 기본 버전에서는 간단하면서도 핵심적인 기능들이 우선 제공되며, 추가 기능이나 고급 기능은 점차 활성화되어 다양한 웹 브라우저와 디바이스 환경에서도 사용자에게 일관된 경험을 제공할 수 있게 됩니다. 따라서 높은 접근성과 호환성을 확보하고 사용자 경험을 개선할 수 있습니다. 그렇다면, 모바일 퍼스트는 오늘날 왜 중요한 개념이 되었을까요?

6.1.2 모바일 퍼스트의 중요성

먼저, 모바일 퍼스트가 중요해진 이유는 모바일 사용자의 폭발적인 증가 때문이라고 할 수 있습니다. 전 세계적으로 스마트폰의 보급이 급격하게 증가하고 있으며, 이에 따라 모바일 기기를 통한 웹 사용자 수도 상당히 높아졌습니다. 이는 아래의 그래프를 통해서도 확인할 수 있습니다.

statcounter의 그래프는 전 세계 데스크톱 vs 모바일 vs 태블릿 시장 점유율(2022.8~2023.8)을 비교합니다. 평균적으로 모바일 시장 점유율이 56% 이상을 차지하고 있는 것을 알 수 있습니다. 스마트폰은 데스크탑에 비해 더 많은 사용자에게 사용되고 있으며, 미래에도 모바일 사용률의 증가는 지속될 것으로 보입니다.

이러한 추세는 모바일 사용자들이 웹 브라우징, 앱 사용, 온라인 쇼핑, 소셜 미디어 등의 디지털 활동을 주로 모바일 기기에서 수행하는 경향을 보여줍니다. 따라서 기업들은 모바일 플랫폼에서 원활한 경험을 제공하기 위해 모바일 퍼스트 전략을 적극 도입하고 있고, 웹 개발 과정에서도 모바일 환경의 중요성이 더욱 강조되고 있습니다.

모바일 퍼스트 디자인의 중요성은 검색 엔진 최적화(SEO) 측면에서도 강조됩니다. 주요 검색 엔진인 Google은 2018년 4월에 모바일 퍼스트 인덱스를 채택했습니다. 모바일 퍼스트 인덱스란 웹 페이지를 모바일 버전 기준으로 색인화하고 검색 결과를 생성하는 방식을 말합니다. 이전에는 데스크톱 버전 웹 페이지가 주요 색인화의 대상이었지만, 모바일 트래픽의 지속적인 증가를 반영하여 Google은 사용자 경험을 개선하기 위한 전략으로 이를 도입하였습니다.

이러한 변화는 모바일 버전의 웹 페이지 구조와 콘텐츠가 검색 순위 결정에 큰 영향을 미친다는 것을 보여줍니다. 따라서 검색 엔진에서의 높은 노출 가능성을 유지하고, 웹 사이트에 꾸준한 트래픽을 유도하기 위해서는 모바일 환경에 최적화된 디자인과 콘텐츠가 필수적입니다.

앞으로 모바일 디바이스의 보급률은 계속해서 상승할 것으로 예상됩니다. 다양한 연령대와 지역에서 모바일 기기의 활용도 높아지면서, 웹 사이트를 모바일 환경에서 최적화하는 것이 필연적으로 될 것입니다. 그렇다면, 이 “모바일 퍼스트" 전략을 실제 웹 사이트에서 어떻게 효과적으로 구현할 수 있을까요? 몇 가지 활용 방안을 알아보겠습니다.

6.1.3 모바일 퍼스트 적용 방법

모바일 특화 콘텐츠

모바일 사용자는 빠르게 정보를 찾아보거나, 웹 사이트의 특정 작업을 수행하려는 경향이 있습니다. 따라서, 웹 사이트의 콘텐츠는 모바일 화면 크기에 최적화되어야 하며, 필요한 정보나 기능에 직접적으로 접근할 수 있도록 직관적인 구성이 필요합니다. 큰 화면에 적합한 대량의 텍스트나 복잡한 그래픽보다는 핵심적인 내용과 간결한 디자인을 중점으로 해야 합니다.

방해되는 팝업 피하기

모바일 환경에서 팝업은 사용자 경험을 방해하는 주요 요소 중 하나입니다. 화면이 작기 때문에, 팝업은 주요 콘텐츠를 가리기 쉽고, 닫기 버튼을 누르기 어려울 수 있습니다. 따라서,

필요한 경우에만 팝업을 사용하고, 사용자가 쉽게 닫을 수 있도록 명확한 ‘닫기' 버튼을 제공해야 합니다. 또한, 광고나 알림을 위한 팝업 사용을 최소화하거나 사용자가 원할 때만 표시될 수 있도록 설정하는 것이 좋습니다.

간소화된 내비게이션

모바일 화면은 데스크탑 화면보다 훨씬 제한적입니다. 복잡한 메뉴 구조나 여러 단계의 하위 메뉴는 모바일 사용자에게 혼란을 줄 수 있습니다. 따라서, 핵심적인 메뉴 항목만을 간결하게 표시하고, 사용자가 원하는 정보나 기능에 최대한 빠르게 접근할 수 있도록 내비게이션을 단순화하는 것이 중요합니다.

“햄버거 메뉴"와 같은 기술을 활용하여 주요 메뉴 항목을 깔끔하게 정리하고, 필요할 때만 전체 메뉴를 펼쳐볼 수 있도록 하는 것도 한 방법입니다.

지금까지 알아봤듯이, 모바일 퍼스트 전략은 반응형 디자인의 핵심 요소입니다. 이 전략을 통해 모바일에서 데스크탑까지 유연하게 대응하며 사용자의 만족도를 높일 수 있습니다. 단순히 트렌드를 따르는 것을 넘어서, 사용자 중심의 경험을 제공하기 위해서는 모바일 퍼스트 전략을 적극적으로 도입해야 할 것입니다.

6.2 시차 스크롤링 / 웹 폰트

6.2.1 시차 스크롤링

시차 스크롤링(parallax scrolling)은 사용자가 마우스를 스크롤 할 때, 원거리에 있는 배경 이미지는 느리게 움직이게 하고, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법입니다. 하나의 이미지를 여러 개의 레이어(layer)로 분리한 후 스크롤에 반응하는 속도를 다르게 조정하는 방식으로 구현합니다.

이 효과는 2D 사이드 스크롤링 비디오 게임(Moon Patrol)에서 처음 소개되었으며 1930년대부터 애니메이션 분야에 사용되던 기법이었으나, 웹 디자인 분야는 HTML5와 CSS3 기법이 도입됨으로써 사용이 가능해졌습니다.

시차 스크롤링은 프론트엔드 기술의 발전으로 인해 웹사이트에서 복잡한 애니메이션과 인터랙티브한 요소를 쉽게 구현할 수 있게 되었습니다. 이로 인해 디자이너들은 시차 스크롤링과 같은 독특하고 매력적인 효과를 적용하여 사용자가 다양한 시각적 요소와 효과를 보게 되므로 더 많은 시간을 웹 페이지에서 보내게 되는 것을 유도합니다. 웹사이트에 대한 몰입감을 높여주게 되어 사용자가 해당 사이트나 페이지에 오래 머무르며, 컨버전(구독, 구매 등) 도 상승할 가능성을 높여주게 되었습니다.

시차 스크롤링을 적용하기 위해서는 다양한 방법이 존재합니다. 이번 목차에서는 CSS를 이용해서 구현해 보도록 하겠습니다. background-attachment 속성을 fixed로 설정하여 배경 이미지가 스크롤할 때 고정되도록 할 수 있습니다.

스크롤을 하게 되면 고정된 화면에서 사진이 교체되는 시차 스크롤링 기법의 실습 예제를 작성하여 완성된 결과를 이미지로 비교하여 알려 드리도록 하겠습니다.

html 코드


<body>
    <section class="scene one">
        <header>
            <h1>
                1번 이미지 시차 스크롤링 예제
            </h1>
            스크롤을 내리면 배경 이미지가 부드럽게 움직입니다.
        </header>
    </section>
    <section class="scene two">
        <header>
            <h1>
                2번 이미지 시차 스크롤링 예제
            </h1>
            스크롤을 내리면 배경 이미지가 부드럽게 움직입니다.
        </header>
    </section>
    <section class="scene three">
        <header>
            <h1>
                3번 이미지 시차 스크롤링 예제
            </h1>
            스크롤을 내리면 배경 이미지가 부드럽게 움직입니다.
        </header>
    </section>
</body>


<style>
        body {
            margin: 0;
        }

        .scene {
            /* 뷰포트 100%를 의미 */
            height: 100vh;
            overflow: hidden;
            background-size: cover;
            font-weight: 200;
            /* 스크롤할 때 배경은 고정 되어 있고 앞 콘텐츠만 움직임 */
            background-attachment: fixed;
        }

        .scene.one {
            background-image: url('./images/bg.png');
        }
        .scene.two {
            background-image: url('./images/bg2.png');
        }
        .scene.three {
            background-image: url('./images/bg3.png');
        }

        .scene header {
            color: white;
            max-width: 80%;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            font-size: 1.5rem;
            text-align: center;
        }

        .scene header h1 {
            font-size: 2rem;
            margin-bottom: 1rem;
            font-weight: bold;
        }

        .scene header h1:after {
            content: '';
            border-bottom: 1px solid white;
            width: 8rem;
            display: block;
            margin: 0 auto;
            margin-top: 1rem;
        }
    </style>

완성된 예제의 이미지를 통하여 background-attachment : fixed의 속성이 적용된 것과 아닌 것의 차이점을 보여 드리도록 하겠습니다.

이미지(좌) 이미지(우)

왼쪽 이미지(좌) : background-attachment : fixed 속성을 적용하지 않았을 때의 페이지 형태입니다.

스크롤을 내리면 화면이 내려가게 되고 첫 번째 이미지는 사진 하단이 보이고 두 번째 이미지가 상단부터 보이게 되는 것을 확인할 수 있습니다. 이는 우리가 흔히 보게 되는 기본 형태의 페이지 입니다.

오른쪽 이미지(우) : background-attachment : fixed 속성을 적용했을 때 페이지 형태입니다.

스크롤을 내리면 첫 번째 이미지는 고정된 상태에서 두 번째 이미지가 밑에서부터 생성되는 페이지를 확인할 수 있습니다. 이처럼 간단한 CSS로도 시차 스크롤링 기법을 이용할 수 있습니다.

사진상으로 차이점을 느끼기 어렵다면 코드가 길지 않으니 꼭 예제 코드를 실행하여 차이점을 직접 느껴보는 것을 추천드립니다.

시차 스크롤링은 많은 장점이 있지만, 몇 가지 주의해야 할 단점들도 존재합니다

성능 문제: 시차 스크롤링은 복잡한 애니메이션과 인터랙션을 필요로 하므로 웹사이트의 성능에 영향을 미칠 수 있습니다. 특히 저사양의 기기나 느린 인터넷 연결에서는 웹사이트 로딩 속도가 저하될 수 있습니다.

SEO 문제: 시차 스크롤링을 사용하는 웹사이트는 대부분 한 페이지로 구성되어 있기 때문에, 검색 엔진 최적화(SEO)에 어려움을 겪을 수 있습니다. 각 페이지별로 고유한 메타 태그나 키워드를 설정하는 것이 어렵기 때문입니다.

호환성 문제: 모든 브라우저가 시차 스크롤링을 지원하지 않으며, 특히 오래된 버전의 브라우저에서는 이러한 기능들이 제대로 작동하지 않을 수 있습니다.

내비게이션 문제: 일반적인 상하 스크롤 방식과 다르게 동작하기 때문에 사용자가 사이트 내에서 이동하는데 혼란스러워할 수 있습니다.

모바일 문제: 시차 스크롤링은 대부분 데스크탑 환경에서 최적화되어 설계되며, 모바일 환경에서는 제대로 작동하지 않거나 부정확하게 보일 수 있는 경우가 많습니다.

위와 같은 장점과 단점을 파악하여 디자인 개발 시점에 프로젝트의 목표와 대상 사용자 그룹, 그리고 지원해야 하는 기기 및 브라우저 등 여러 요소들을 고려하여 시차 스크롤링 적용 여부와 방식을 결정하여 사용하는 것이 좋습니다.

6.2.2 웹폰트

웹 폰트는 웹 페이지에서 텍스트를 표시하는 데 기본적으로 설치되어 있지 않은 글꼴도 인터넷을 통해 온라인에서 다운로드하여 사용되는 글꼴을 말합니다. 웹 폰트를 사용하면 웹사이트의 디자인에 다양한 스타일과 개성을 추가할 수 있습니다.

초기의 웹사이트들은 시스템 글꼴, 즉 사용자의 컴퓨터에 설치된 글꼴만을 사용할 수 있었습니다. 이는 디자인에 제약을 주었고, 모든 사용자가 동일한 시각적 경험을 가질 수 없었습니다. 예를 들어, 특정 글꼴이 한 사용자의 컴퓨터에 설치되어 있지 않다면, 그 사람은 다른 글꼴로 대체된 텍스트를 보게 될 것입니다.

웹 폰트 기술은 이러한 문제들을 해결하기 위해 개발되었습니다. CSS @font-face 규칙을 통해 원격 서버에서 필요한 폰트를 로드하여 보여줄 수 있도록 하였고, 이렇게 함으로써 디자인의 유연성과 정보 접근성, 그리고 웹 페이지의 일관된 표현 등이 가능하게 되었습니다.

웹 폰트의 렌더링 방식은 주로 브라우저와 웹 폰트 자체, 그리고 CSS 속성에 따라 결정됩니다. 일반적으로 웹 폰트는 사용자가 웹 페이지를 방문할 때 서버에서 클라이언트로 다운로드되며, 이 과정에서 발생하는 시간 지연을 최소화하기 위한 여러 가지 최적화 기법이 존재합니다.

렌더링 과정은 아래와 같습니다.

웹 페이지 요청: 사용자가 웹사이트를 방문하면, 해당 사이트의 HTML 파일이 사용자의 브라우저로 전송됩니다.

HTML 파싱 및 CSSOM 생성: 브라우저는 받은 HTML 파일을 파싱 하여 DOM(Document Object Model) 트리를 생성합니다. 동시에 CSS 파일도 파싱 되어 CSSOM(CSS Object Model) 트리가 생성됩니다.

렌더 트리 구성: DOM과 CSSOM 트리는 결합되어 렌더 트리를 형성합니다. 이때 @font-face 규칙에 의해 지정된 웹 폰트들이 발견되면, 해당 폰트 파일들을 서버에서 다운로드하기 시작합니다.

웹 폰트 다운로드: @font-face 규칙에서 지정된 URL을 통해 웹 폰트 파일이 다운로드됩니다. 이때 네트워크 상태나 서버 상태 등에 따라 다운로드 시간은 달라질 수 있습니다.

폰트 로딩 및 적용: 다운로드된 웹 폰트는 메모리에 로드되고, 해당 글꼴을 사용하는 모든 요소들에 적용됩니다.

화면 출력 (Paint): 최종적으로 화면에 출력할 준비가 완료되면, 렌더링 엔진은 화면 갱신(Repaint) 과정을 거쳐 실제 화면(Display)에 그립니다.

하지만 주요 문제점인 FOIT(Flash of Invisible Text)와 FOUT(Flash of Unstyled Text) 현상이 렌더링 과정 중 3번과 4번 단계 사이에서 발생됩니다.

FOIT (Flash of Invisible Text): 웹 폰트가 로드되는 동안 해당 텍스트가 보이지 않는 현상을 말합니다. 웹 페이지를 방문한 사용자는 웹 폰트가 완전히 로드될 때까지 텍스트를 볼 수 없습니다. 이로 인해 사용자 경험이 저하될 수 있으며, 특히 네트워크 속도가 느릴 경우에 이 문제는 더욱 심각해집니다.

FOUT (Flash of Unstyled Text): 웹 폰트가 아직 로드되지 않았을 때 시스템 기본 글꼴로 일단 텍스트를 보여주고, 웹 폰트가 로드되면 즉시 해당 글꼴로 바꾸는 것을 말합니다. 사용자 입장에서는 글꼴이 갑자기 바뀌므로 시각적인 교란을 초래할 수 있습니다.

FOIT와 FOUT 문제를 해결하기 위한 몇 가지 접근 방식이 있습니다. 이러한 접근 방식은 웹 폰트의 최적화, 렌더링 엔진의 설정 변경, 대체 글꼴 스타일 적용 등을 포함할 수 있습니다. 웹 디자이너와 개발자는 웹 폰트를 사용할 때 FOIT와 FOUT 문제를 최소화하고 사용자 경험을 개선하기 위해 이러한 접근 방식을 고려해야 합니다.

앞서 설명했던 문제점을 보완하기 위해 사용되는 기술과 최신 웹폰트를 몇 가지 소개해 드리겠습니다.

변수 폰트(Variable Fonts): 변수 폰트는 하나의 폰트 파일 내에 여러 가지 스타일(굵기, 넓이, 기울임 등)을 포함할 수 있는 새로운 OpenType 표준입니다. 이를 통해 서버에서 클라이언트로 전송해야 하는 파일 수를 줄여 웹 성능을 향상시킬 수 있으며, 더욱 다양한 타이포그래피 디자인을 가능하게 합니다.

여러 스타일과 두께를 조절할 수 있는 형태의 폰트입니다. 변수 글꼴을 사용하는 방법입니다.


/* 변수 폰트 예제 */
@font-face {
    font-family: 'VariableFont';
    src: url('VariableFont.woff2') format('woff2-variations');
    font-weight: 100 900; /* 범위 지정 */
    font-stretch: 50% 200%; /* 변수 글꼴은 여러 두께를 지원 */
}

body {
    font-family: 'VariableFont', sans-serif;
    font-weight: 700; /* 원하는 굵기 설정 */
    font-stretch: 100%; /* 원하는 두께 조정 */
}

WOFF2(Web Open Font Format 2): WOFF2는 웹용으로 최적화된 글꼴 포맷으로, 압축률이 뛰어나 원래 크기에 비해 상당히 작은 파일 크기를 가집니다. 이는 웹 페이지 로딩 시간을 줄여주며, 대부분의 현대 브라우저에서 지원됩니다.


/* WOFF2 예제 */
@font-face {
    font-family: 'MyWebFont';
    src: url('myfont.woff2') format('woff2'),
         url('myfont.woff') format('woff');
    /* 브라우저가 지원하는 첫 번째 URL을 선택합니다 */
}

body {
    font-family: 'MyWebFont', sans-serif;
}

Font Loading API: 자바스크립트를 사용하여 웹 폰트의 로딩 상태와 관련 이벤트를 제어할 수 있는 방법을 제공합니다. 이 API를 사용하면 웹 폰트의 로딩 순서와 전달 방식을 조절할 수 있으며, FOIT와 FOUT 문제를 해결하는 데 더욱 세밀한 제어가 가능합니다.


/* Font Loading API 예제 */
const font = new FontFace("MyWebFont", "url(/path/to/myfont.woff2)", 
{ style:'italic', weight:'700' });

// 로드 시작
font.load().then(function(loadedFace) {
  document.fonts.add(loadedFace);
  document.body.style.fontFamily = "MyWebFont, sans-serif";
  // 이 시점에서 새로운 글꼴이 적용됩니다.
});

CSS font-display 속성: CSS font-display 속성은 FOIT와 FOUT 문제에 대한 해결책으로 등장했습니다. 이 속성은 웹 폰트의 로딩과 렌더링 동작을 제어하는 데 사용하여 웹 폰트가 로드되는 동안 어떻게 텍스트가 보여질 것인지 설정할 수 있게 해줍니다.


/* font-display 예제 */
@font-face {
  font-family: 'MyWebFont';
  src: url('/path/to/mywebfont.woff2') format('woff2'),
       url('/path/to/mywebfont.ttf') format('truetype');
  font-display: swap; /* FOIT 해결 */
}

Font Subsetting (폰트 서브셋팅): 필요한 글자만을 웹 폰트로 제한하여 폰트 파일 크기를 줄이는 기술입니다. 폰트 서브셋을 생성하는 방법을 보여줍니다.


/* Font Subsetting 예제 */
@font-face {
  font-family: 'MySubsetFont';
  src: url('subsetfont.woff2') format('woff2');
  unicode-range: U+0041-005A, U+0061-007A; /* 필요한 글자 범위 지정 */
}

/* 텍스트에 폰트 서브셋 적용 */
body {
  font-family: 'MySubsetFont', sans-serif;
}

소개해 드린 기술과 더불어 웹 폰트의 경우 WOFF 기술을 사용하는 것이 더욱 강조되고 있습니다. 그 이유는 “3 Seconds Rule”이라는 규칙이 실제 데이터를 바탕으로 존재하기 때문입니다.

"3 Seconds Rule"은 웹사이트와 관련된 사용자 경험(UX) 규칙 중 하나입니다. 이 규칙은 웹 페이지의 로딩 시간이 3초 이내여야 한다는 것을 의미합니다. 다시 말해, 사용자가 웹 페이지를 클릭하거나 주소를 입력한 후 3초 내에 콘텐츠가 완전히 로드되어 보여야 한다는 것입니다.

이 규칙의 기반이 되는 연구들은 사용자들이 느린 웹사이트에 대해 부정적인 반응을 보인다는 것을 보여줍니다. 일부 연구에 따르면, 로딩 시간이 3초를 초과할 경우 사용자의 대부분(약 40% 이상)이 해당 사이트를 떠날 가능성이 있다고 합니다. 또한, Google 등 주요 검색 엔진들도 페이지 로딩 속도를 검색 결과 순위 결정 요소 중 하나로 고려합니다.

웹 개발자는 사용자의 기대치를 충족시키기 위해 웹 페이지의 성능을 지속적으로 개선하는 데 노력하기 위해 WOFF 파일을 사용하는 것이 매우 중요하다고 생각됩니다.

6.3 다양해지는 기기

최근 온라인으로 물건을 구매해 보신적이 있나요? 없으셨다 하더라도, 물건을 구매를 하는 상상을 해봅시다. 우선 원하는 쇼핑몰에 접속하여 검색창을 누르고, 찾는 상품을 입력하고 검색 버튼을 눌렀을 것입니다. 여기서 데스크탑을 통해 쇼핑몰에 들어가 물건을 구매할 경우 마우스 휠을 내리며, 원하는 상품을 고르고 원하는 상품을 클릭해서 물건을 구매했을 것입니다. 모바일 기기는 어땠을까요?

모바일 기기는 마우스 휠이 아닌 손가락을 이용해 화면을 위로 쓸며 상품을 둘러보고 원하는 상품을 터치하여 물건을 구매했을 것입니다. 갑자기 왜 웹 쇼핑을 하는 과정을 나열 하나 할 수도 있지만 지금부터 알아볼 다양해지는 기기와 그 기기들의 특징에 따른 웹 기술 동향에 대해 쉽게 이해하기 위해 예시를 들어보았습니다.

6.3.1 터치 스크린 기반 기기 대응

위 예시에서는 같은 웹사이트에 같은 목적을 가지고 이용을 해도 어떤 기기로 접속하느냐에 따라 사용자의 동작은 꽤나 달랐습니다. 키오스크와 스마트폰과 같이 터치 기반 기기가 보편화된 후 터치 기반 기기 사용자의 UX를 향상시키기 위해 터치 제스처에 따른 동작에 따른 기능과 사용자의 상호작용이 중요해졌는데요, 이러한 터치 제스처 상호작용은 반응형 웹을 구현할 때도 중요한 역할을 합니다.

특히 모바일 디바이스를 고려한 반응형 웹에서는 터치 제스처를 통해 사용자 편의성을 높이고 모바일 최적화를 실현하며, 더 풍부하고 유연한 웹사이트 경험을 제공할 수 있기 때문입니다. 사진을 확대해 보는 것 부터, 지도 기능을 사용할 때 화면을 이동해 보는 것, 그리고 앱을 삭제하거나, 상세한 정보를 보기 위해 앱을 꾸욱 눌러보는 것과 같이 우리는 모바일 기기를 사용할 때 다양한 터치 제스처를 사용하고 있었습니다.

이제 터치 제스처가 반응형 웹에서 어떤 식으로 사용자에게 편의성을 높여주는지 감이 잡히셨을 것입니다. 터치 제스처는 다양한 종류가 있는데 구현하고자 하는 UI에 적합한 동작을 선택하여, 반응형 웹 제작 시 함께 기능을 구현한다면 사용자 편의성을 높인 반응형 웹을 구현할 수 있을 것입니다.

기본적인 터치 제스처 종류

탭(Tab)

화면의 요소를 가볍게 한번 터치하는 동작으로, 다른 웹페이지로 이동하거나, 특정 요소를 선택할 때 사용됩니다.

더블 탭(Double Tab)

화면의 요소를 2번 연속으로 터치하는 동작으로, 요소의 확대/축소를 하거나, 특정 동작을 수행할 때 사용됩니다.

프레스(Press)

화면의 요소를 길게 터치를 유지하는 동작으로, 요소의 상세 컨텐츠나, 추가 옵션을 확인할 때 사용됩니다.

스와이프(Swipe)

화면의 요소를 특정 방향으로 쓸듯이 터치하는 동작으로, 화면을 스크롤 하거나, 페이지를 전환하는 데 사용됩니다.

드래그(Drag)

화면의 요소를 길게 터치하여 요소를 가진 상태로, 화면을 이동하는 동작으로, 요소의 위치를 변경 시키는데 사용됩니다.

핀치 인 / 아웃(Pinch In/ Pinch Out)

화면의 요소를 손가락 2개 양쪽으로 넓히거나(Pinch Out), 좁히는(Pinch In) 동작으로, 요소의 확대/축소를 하는데 사용됩니다.

이 외에도 손가락 가지 수를 2개에서 3개~4개로 늘리거나, 터치가 유지되는 시간, 속도 등을 세분화하여 다양한 터치 제스처가 등장하고 있습니다.

6.3.2 접속 기기 확인

지금까지 살펴보았던 내용처럼, PC와 모바일이라는 물리적인 차이로 인해 웹 개발자는 사용자의 편의성을 위해 추가적인 작업을 진행합니다. 하지만 이러한 추가적인 작업들은 특정 환경 즉, 접속 기기에 따라 사용 여부가 달라집니다. 여기서 한 가지 생각을 해볼 수 있을 것입니다. 특정 해상도에 따라 선언한 style을 적용하는 css의 미디어 쿼리(media query)와 같이 기능들을 필요한 상황에만 불러오면 되지 않을까 하는 생각을요!

이번 파트에서는 위와 같이 사용자의 접속 기기를 확인하고, 기기 별로 필요 기능들을 적용할 수 있는 방법에 대해 자세히 다뤄 보도록 하겠습니다.

<link>태그의 media 속성

<link>태그의 media속성을 이용하면, 기기의 종류와 화면의 해상도 값 등을 조합하여 작성한 조건이 만족할 때 링크된 파일을 불러오게 됩니다. 여기서 속성값으로 사용할 수 있는 값은 미디어 쿼리와 동일합니다.


<link media="속성값(①기기 ②연산자 ③값)">

아래와 같이 작성 시 스크린에서 너비가 720px 이하일 경우 경우 style.css를 불러오게 됩니다.


<link rel="stylesheet" media="screen and (max-width: 720px)" href="./style.css">

이렇게 media 속성을 사용하여, 기기 또는 해상도를 지정해 특정 기기에서만 사용하는 필요한 파일을 불러오게 할 수 있습니다.

JavaScript의 navigator.userAgent

Navigator객체는 브라우저의 종류, 버전과 같이 웹브라우저의 전반적인 정보를 제공하는 객체입니다. 이러한 객체의 속성 중 하나인 userAgent는 사용자의 브라우저 정보를 문자열로 반환해 주는 역할을 합니다. 이제 userAgent가 제공해 주는 정보를 직접 살펴볼 수 있는 간단한 실습을 해봅시다. html 파일에 아래와 같이 js를 작성해 줍니다.


<body>
    <script>
        alert(navigator.userAgent);
    </script>
</body>

alert을 통해 userAgent 정보를 확인할 수 있는 코드를 작성하였습니다. 이제 이 코드를 데스크탑과 모바일에서 각각 실행해 봅시다. 결과는 아래와 같습니다.

💡

실습 결과 문자열 내용이 위 결과 이미지와 다르게 보이나요?

다른게 당연합니다! 앞서 설명한 것처럼 userAgent는 사용자의 브라우저 정보를 반환합니다. 따라서 각자 실습을 하고 있는 브라우저의 환경과 버전이 다르기 때문에 이미지 와 다른 문자열이 보여질 수 있습니다!

같은 코드를 실행했는데 데스크탑과 모바일에서의 출력 결과의 큰 차이점을 발견하셨나요?

결과 화면에 차이점에 하이라이트 처리가 된 부분을 보게 될 경우, PC의 경우 Macintosh, 모바일의 경우 iPhone으로 구분되어 표시가 되고 있습니다. 만약 실습 환경이 PC가 window, 모바일이 android였을 경우 하이라이트의 부분의 정보가 각각 window, android로 표시되었을 겁니다. 이렇게 userAgent가 전달해 주는 정보를 이용하여, 사용자가 접속한 기기를 파악하고 기기 별로 필요한 기능을 적용할 수 있습니다.


<script>
    const userAgent = navigator.userAgent;
    if(userAgent.match(/iPhone|Android/i) === ""){
        alert('모바일 기기에서 접속했습니다!');
    }else{
        alert('PC에서 접속했습니다!')
    }
</script>

위 예제는 match 함수와 정규 표현식을 사용하여 userAgent가 반환하는 문자열에서 모바일 기기를 의미하는 단어를 찾고, 단어의 유무에 따라 모바일 기기로 접속했는지에 대한 판단을 할 수 있는 기능을 만들어놓은 것입니다. match 함수 안의 정규 표현식에 iPhone, Android이 외에 에도 BlackBerry와 같이 모바일 기기에 해당되는 문구를 추가하여, 좀 더 세부적으로 기기 구분을 할 수도 있습니다. 이제, 해당 기능이 실제 모바일과 PC에서 어떻게 동작하는지 확인해 보겠습니다.

코드 실행 시 접속 기기를 구분하여 다른 alert를 띄우고 있는 걸 볼 수 있었습니다.

이렇듯 userAgent를 사용하게 되면 사용자의 브라우저 정보를 쉽게 얻어 간단한 코드로도 접속 기기를 구분할 수 있는 장점이 있지만, userAgent를 사용할 때, 몇 가지 주의해야 할 사항이 있습니다. userAgent가 반환하는 문자열의 양식이 브라우저마다 다르게 제공하기 때문에 문자열을 기반으로 한 브라우저 식별은 신뢰성이 떨어질 수 있으며, userAgent는 사용자의 정보를 담고 있기 때문에, 단순히 html 구조를 바꾸거나, 특정 브라우저에서 발생하는 오류를 해결하기 위해서 사용하는 등 적절한 대응 방안이 있는 상황에서 userAgent 사용은 권장되고 있지 않습니다. 최근 chrome에서는 userAgent 사용 시 사용자의 개인정보 보호를 위해 userAgent 문자열의 정보를 축소하는 등 새로운 방안을 도입하고 있습니다.

지금까지 모바일 기기를 감지할 수 있는 2가지 방법에 대해 자세히 다루어 보았는데요, 이 외에도, 정교한 모바일 기기 구분을 위해 라이브러리를 사용하는 방법, 디바이스의 터치 가능 여부를 따져 모바일과 PC를 구분하는 등 여러 가지 방법들이 등장하고 있습니다. 이러한 다양한 방법들 속에서 상황과, 조건에 따라 적절한 모바일 기기를 감지하는 적절한 방식을 선택하는 것이 중요합니다.

6.4 주요 프레임워크 소개

프레임워크는 소프트웨어 개발을 용이하게 하기 위해 제공되는 통합된 라이브러리와 도구의 모음입니다. 프레임워크를 사용하면 개발자는 처음부터 모든 것을 다시 만들 필요 없이, 미리 개발된 컴포넌트를 활용하여 빠르게 애플리케이션을 구축할 수 있습니다. 이는 생산성 향상과 코드의 일관성을 증가시켜줍니다. 또한 기본적인 프로그래밍 지식만 있어도 프레임워크를 활용하여 소프트웨어를 개발할 수 있습니다.

반응형 웹사이트 제작에 주로 사용하는 프레임워크에는 Foundation, Bulma, Tailwind CSS 등이 있으며 아래는 프레임워크의 주요 특징과 각각의 프레임워크에 대한 설명입니다.

6.4.1 프레임워크의 주요 특징

재사용성: 이미 검증된 코드나 구조를 재사용함으로써 개발 시간을 줄이고 코드 품질을 향상시킵니다.

규칙 및 표준화: 프레임워크는 일관된 방식의 코딩을 요구하므로, 코드의 표준화와 규칙 준수가 강조됩니다.

확장성: 구성 요소나 모듈의 추가 및 수정이 용이하여, 기능 확장이나 변화에 대응하기 쉽습니다.

유지 보수: 코드의 일관성과 모듈화 덕분에, 유지 보수가 쉽고 비용이 절감됩니다.

커뮤니티 지원: 대부분의 프레임워크는 활발한 개발 커뮤니티를 가지고 있어, 문제 해결이나 학습 자료를 쉽게 찾을 수 있습니다.

6.4.2 Foundation

Foundation은 웹 개발을 위한 프론트엔드 프레임워크 중 하나로, ZURB에서 개발한 프론트엔드 프레임워크입니다. 반응형 웹 디자인과 웹 애플리케이션 개발을 용이하게 만드는 반응형 그리드 시스템과 UI 컴포넌트를 제공합니다. Foundation은 그리드 설정의 유연성과 고급 기능으로도 알려져 있습니다.

Foundation의 주요 특징

반응형 디자인: Foundation은 Mobile-first 접근 방식을 기반으로 하며, 다양한 화면 크기와 디바이스에 맞게 콘텐츠를 자동으로 조절하는 그리드 시스템을 제공합니다.

모듈성: Foundation는 웹사이트 또는 앱에 필요한 기능만 선택적으로 사용할 수 있게 모듈화되어 있습니다.

사용자 정의 가능: Foundation은 Sass를 기반으로 하므로, 디자인과 기능을 쉽게 사용자 정의하고 확장할 수 있습니다.

다양한 UI 컴포넌트: 버튼, 모달, 탭, 슬라이드 메뉴 등 다양한 UI 컴포넌트와 플러그인을 제공합니다.

통합 개발: Foundation은 웹사이트뿐만 아니라 이메일과 애플리케이션 디자인도 지원하는 템플릿과 도구를 포함하고 있습니다.

활발한 커뮤니티 지원: Foundation 또한 활발한 커뮤니티 지원과 잘 정리된 문서를 제공하여 개발자들에게 인기가 있습니다.

Foundation을 시작하는 가장 쉬운 방법은 CDN을 통해 연결하는 것입니다. 그러나 npm이나 Foundation CLI를 사용해서도 설치할 수 있습니다. CDN 링크를 사용하여 연결하는 예시는 아래와 같습니다.


<!-- CSS CDN 링크 -->
<link rel="stylesheet" 
href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist
/css/foundation.min.css" 
crossorigin="anonymous">

<!-- JavaScript CDN 링크 -->
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist
/js/foundation.min.js"
crossorigin="anonymous"></script>

CSS CDN 링크는 <head></head>안에 작성하고 JavaScript CDN 링크는 <body></body>내의 </body> 바로 위에 작성하면 됩니다. 필요한 부분의 CDN 링크 추가하면 Foundation을 사용할 수 있습니다.

6.4.3 Bulma

Bulma는 모던하고 유연한 CSS 프레임워크로, Flexbox를 기반으로 한 반응형 디자인을 제공합니다. 2016년 Jeremy Thomas에 의해 처음 소개되었으며, 그 이후로 빠르게 인기를 얻었습니다. Bulma는 순수한 CSS만을 제공하므로 JavaScript 플러그인에 의존하지 않는 것이 특징입니다.

Bulma의 주요 특징

Flexbox 기반: Bulma의 모든 레이아웃 및 그리드 시스템은 Flexbox에 기반하고 있어 유연하고 현대적인 웹 디자인을 쉽게 구현할 수 있습니다.

모듈식: Bulma는 여러 Sass 파일로 구성되어 있어, 필요한 것만 선택하여 사용할 수 있습니다. 이로 인해 최종 CSS 파일의 크기를 줄일 수 있습니다.

반응형 디자인: Mobile-first 접근 방식을 사용하여 다양한 화면 크기에 적응하는 웹사이트를 만들 수 있습니다.

쉬운 커스터마이징: Bulma는 Sass 변수를 사용하여 스타일링을 제공하므로 디자인을 쉽게 사용자 정의할 수 있습니다.

빠른 성장하는 커뮤니티: Bulma는 활발한 커뮤니티와 많은 확장 모듈 또는 추가 컴포넌트를 제공하고 있습니다.

Bulma를 시작하는 방법 또한 다른 프레임워크들과 같이 npm을 이용해 설치하거나 CDN 링크를 연결할 수 있습니다. CDN 링크를 사용하여 연결하는 방법은 아래 코드를 <head></head>안에 작성하면 됩니다.


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css
/bulma.min.css">

6.4.4 Tailwind CSS

Tailwind CSS는 유틸리티 기반의 CSS 프레임워크로서, 웹사이트의 디자인을 빠르고 효율적으로 구축할 수 있게 도와주는 도구입니다. Adam Wathan과 Jonathan Reinink에 의해 처음 개발되었으며, 그 이후로 웹 개발 커뮤니티에서 빠르게 인기를 얻었습니다.

Tailwind CSS의 주요 특징

유틸리티 기반: Tailwind는 세부적인 스타일링을 위한 수많은 유틸리티 클래스를 제공합니다. 이를 통해 개발자는 HTML 코드 내에서 직접 디자인을 조작하면서 레이아웃을 구축할 수 있습니다.

고도의 사용자 정의 가능성: Tailwind의 설정 파일을 통해 프로젝트의 요구사항에 따라 기본 스타일, 색상, 간격 등을 손쉽게 조절할 수 있습니다.

반응형 디자인: sm:, md:, lg:, xl:, 2xl: 등의 접두사를 사용하여 각각의 브레이크 포인트에 따라 다른 스타일을 적용할 수 있습니다.

플러그인 시스템: Tailwind는 자체 플러그인 시스템을 제공하여 개발자가 필요한 추가 유틸리티나 컴포넌트를 쉽게 생성하고 확장할 수 있습니다.

커뮤니티와 자료: Tailwind는 활발한 커뮤니티 지원을 받고 있으며, 다양한 플러그인, 확장 도구, 튜토리얼 등의 리소스가 온라인상에서 쉽게 접근 가능합니다.

Tailwind CSS을 시작하는 방법 또한 다른 프레임워크들과 같이 npm을 이용해 설치하거나 CDN 링크를 연결할 수 있습니다. CDN 링크를 사용하여 연결하는 방법은 아래 코드를 <head></head>안에 작성하면 됩니다.


<script src="https://cdn.tailwindcss.com"></script>

반응형 웹 페이지 디자인은 현대 웹 개발의 필수 요소 중 하나로 자리 잡았습니다. 이를 지원하기 위한 다양한 프레임워크가 존재하며, 각각은 그만의 독특한 장점과 성격을 가지고 있습니다. Foundation은 유연성과 확장성을 자랑합니다. Bulma와 Tailwind CSS는 모던한 유틸리티 기반의 접근법으로 디자인의 자유도를 높여줍니다.

프로젝트의 요구사항, 팀의 숙련도, 그리고 원하는 디자인의 복잡성을 고려하여 프레임워크를 선택하는 것은 중요합니다. 올바른 프레임워크를 선택하고 그 장점을 최대한 활용한다면, 빠르게 반응형 웹 페이지를 구축하면서도 안정성과 효율성을 확보할 수 있습니다. 결국, 다양한 옵션 사이에서 가장 적합한 도구를 선택하는 것이 성공적인 웹 페이지 제작의 핵심이 될 것입니다.