반응형 스타일을 적용하여 다양한 기기에서 동글 서비스 제공하기

이 글은 동글이 반응형을 도입한 과정입니다.

1. 도입 계기

첫 배포를 마친 동글이 서비스로서 성공하려면 사용자가 있어야 한다.

그래서 다양한 루트로 홍보를 진행했는데, 

페이스북 노션 그룹, 블로그, 카페, 카카오톡 오픈채팅방, 에브리타임, 인스타그램 등 많은 환경에서 홍보를 진행했다.

홍보 루트

이전 글에서 확인할 수 있듯이 동글은 원래 PC 타깃으로 개발되었다.

하지만 카카오톡, 에브리타임, 인스타그램 등으로 유입된 사용자들은 모바일로 들어와서 첫 화면을 본다는 게 문제였고, 그 결과 첫인상이 좋지 않았다.

아무 말 없이 사진으로만 온 피드백

위 사진 말고도 반응형에 대한 피드백은 상당히 많았고, PC 퍼스트이긴 하지만 이를 계기로 모바일 지원을 고민하게 되었다.

2. 도입 과정

타겟 기기 선정: 휴대폰, 태블릿, PC

반응형을 코드로 작성하기 전에, 어떤 기기들을 타겟으로 할지 논의가 필요했다.

처음엔 일반 휴대폰과 PC 두 개로 정했으나, 요즘은 태블릿에 관한 수요도 많아 도입하기로 결정했다.

한국 시장에서도 코로나 팬데믹 이후로 태블릿 수요가 급증했다고 한다.

한국 IDC 김혜림 책임 연구원은 “태블릿 사용자는 단순 엔터테인먼트용 콘텐츠 소비를 넘어 문서, 디자인 작업 등 보다 생산성 있는 도구로서 태블릿을 활용하고 있다"라고 언급하였다.

기기에 따라 다른 컴포넌트 렌더링

반응형을 적용할 때 기기의 크기에 따라 다른 컴포넌트를 보여줘야 할 때가 있다.

동글의 경우 PC 환경일 땐 왼쪽, 오른쪽 사이드바를 기본으로 보여주고, 토글 형태로 열고 닫을 수 있다.

PC 화면

하지만 모바일 환경에서는 사이드바가 있으면 중간 화면이 매우 좁아지는 문제가 있었다.

글을 읽을 수 없다.

따라서 모바일에서는 기본적으로 좌우 사이드바를 보여주지 않고, Drawer 컴포넌트로 렌더링 하였다.

이제 글이 잘 보인다

이를 구현하기 위해서는 현재 사용자가 보고 있는 화면이 어떤 사이즈인지 알아야 한다.

감사하게도 window.matchMedia라는 Web API가 있으니 이걸 활용하면 사용자가 어떤 환경인지 쉽게 구현할 수 있다.

나는 `useMediaQuery`라는 훅을 이용해 구현했다.

import { useSetGlobalState } from '@yogjin/react-global-state';
import { mediaQueryMobileState } from 'globalState';
import { useCallback, useEffect, useRef } from 'react';

const MOBILE_MEDIA_QUERY_SIZE = '(max-width: 820px)';

export const useMediaQuery = () => {
  // mediaQueryMobileState: 모바일 여부 전역 상태
  const setIsMobile = useSetGlobalState(mediaQueryMobileState);

  const handleWindowResize = useCallback(() => {
    setIsMobile(window.matchMedia(MOBILE_MEDIA_QUERY_SIZE).matches);
  }, [setIsMobile]);

  useEffect(() => {
    setIsMobile(window.matchMedia(MOBILE_MEDIA_QUERY_SIZE).matches);
  }, [setIsMobile]);

  useEffect(() => {
    const mediaQueryList = window.matchMedia(MOBILE_MEDIA_QUERY_SIZE);
    
    // window resize 시 모바일 여부 상태 설정
    mediaQueryList.addEventListener('change', handleWindowResize);

    return () => {
      mediaQueryList.removeEventListener('change', handleWindowResize);
    };
  }, [handleWindowResize]);
};

 

위 훅을 최상위 컴포넌트에 선언한 뒤

컴포넌트에서 `mediaQueryMobileState` 전역 상태를 이용하여 조건부 렌더링을 하면 된다.

모바일에선 Drawer를 이용한다

기기에 따라 다른 폰트크기와 사이즈

한 가지 더 고려해야 할 점은 바로 폰트크기와 컴포넌트 사이즈다.

동글 서비스는 글을 보는 기능이 있기 때문에 기기에 따라 적절한 폰트 사이즈를 제공해야 한다.

모든 기기에서 같은 폰트 사이즈를 가진다면 UI가 깨질 수 있다.

 

동근 모든 스타일을 `rem` 을 이용했기 때문에, 전역 스타일에서 media-query를 이용해 간단하게 기기별로 다른 사이즈를 적용할 수 있다.

기준 픽셀 변경

반응형 스타일 적용

자잘하게 변경해야 할 부분은 각 컴포넌트에서 인라인으로 수정해 주면 된다.

3. 마치며

반응형은 사실 다른 기능 개발하느라 바빴기도 하고, PC타겟으로 개발했으니까~라는 변명도 하면서 우선순위가 낮았는데, 실제 피드백을 받고 보니 생각보다 모바일에 대한 수요가 높고, 처음 동글을 접하는데 모바일로 들어왔을 때 디자인이 깨져서 첫인상이 좋지 않다면 그 사용자가 다시 우리 서비스를 방문할 확률이 적을 것이라 예측된다.

따라서 모바일이 우리 생활 속에 깊이 들어와 있는 이상 반응형은 무시 못할 존재라고 생각한다.

 

마지막으로 반응형을 개발할 때 유용한 앱인 `ResponsivelyApp`을 추천한다!

기기별로 서비스 화면을 보면서 개발할 수 있다.