오픈 티켓 화면의 반응형 구현을 위해 Figma에서 화면 설계를 진행했습니다. 아래는 PC와 모바일 화면 설계 이미지입니다.
오픈 티켓 PC 화면
오픈 티켓 모바일 화면
PC와 모바일 화면의 구성은 단순히 크기만 다른 것이 아니라 UI 구조와 인터랙션 방식에서 근본적인 차이가 있습니다:
PC 화면
모바일 화면
이처럼 PC와 모바일은 UI 구조와 동작 방식에서 근본적인 차이가 있었으며, 이를 해결하기 위해 화면 크기와 디바이스에 따라 UI와 로직을 다르게 처리해야 했습니다.
CSS Media Queries는 가장 기본적인 반응형 웹 구현 기술로, 특정 화면 크기에서 다른 스타일을 적용할 수 있습니다.
장점
단점
코드 예시
/* CSS Media Queries 예제 */
body {
font-size: 16px;
}
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
결론
CSS Media Queries는 스타일 변경이 주가 되는 경우에는 적합하지만, UI 구조와 동작 로직을 화면 크기에 따라 다르게 처리해야 하는 이번 프로젝트에는 한계가 있었습니다.
window.matchMedia
(JavaScript 기반)window.matchMedia
는 브라우저에서 제공하는 Web API로, 화면 크기를 감지하고 조건에 따라 로직을 동적으로 처리할 수 있습니다.
장점
단점
코드 예시
import React, { useState, useEffect } from "react";
const ResponsiveComponent = () => {
const [isMobile, setIsMobile] = useState(window.matchMedia("(max-width: 768px)").matches);
useEffect(() => {
const mediaQuery = window.matchMedia("(max-width: 768px)");
const handleChange = (e: MediaQueryListEvent) => setIsMobile(e.matches);
mediaQuery.addEventListener("change", handleChange);
return () => mediaQuery.removeEventListener("change", handleChange);
}, []);
return <div>{isMobile ? "모바일 화면" : "데스크탑 화면"}</div>;
};
결론
window.matchMedia
는 간단한 로직에는 유용하지만, 유지보수성과 가독성이 낮아지고, 여러 컴포넌트에서 반복적으로 사용하기엔 비효율적이라고 판단했습니다.
React-Responsive
는 React 환경에서 반응형 UI를 구현할 수 있는 라이브러리로, 화면 크기나 디바이스 상태에 따라 조건부 렌더링을 간편하게 처리할 수 있습니다.
장점
useMediaQuery
)을 통해 조건부 렌더링과 상태 관리를 간단히 처리할 수 있음.단점
코드 예시
import React from "react";
import { useMediaQuery } from "react-responsive";
const ResponsiveComponent = () => {
const isMobile = useMediaQuery({ query: "(max-width: 768px)" });
return <div>{isMobile ? "모바일 화면" : "데스크탑 화면"}</div>;
};
결론
React-Responsive는 React 환경에 최적화되어 있어, UI 구조와 로직 모두를 유연하게 처리할 수 있다는 점에서 가장 적합한 선택이었습니다.
위 세 가지 기술을 검토한 결과, React-Responsive를 선택했습니다. 이유는 다음과 같습니다:
구조적 차이를 쉽게 해결 가능
모바일과 PC에서 UI 구조와 동작 방식이 크게 다르기 때문에, 조건부 렌더링이 필요했습니다. React-Responsive는 useMediaQuery
를 통해 크기 조건에 따라 완전히 다른 컴포넌트를 렌더링할 수 있어 적합했습니다.
로직과 스타일을 통합적으로 관리
화면 크기에 따라 데이터 요청 방식(API 호출)이나 동작 로직이 달라져야 하는 상황에서, React-Responsive는 로직과 스타일을 한 곳에서 처리할 수 있어 유지보수가 쉬웠습니다.
가독성과 재사용성
window.matchMedia
방식보다 코드가 간결하고, 다양한 컴포넌트에서 재사용할 수 있어 작업 생산성을 높일 수 있었습니다.
커뮤니티와 확장성
React-Responsive는 오픈소스 라이브러리로 커뮤니티 지원이 활발하며, 화면 크기 외에도 다양한 브라우저 조건(색상 모드, 방향 등)을 처리할 수 있어 확장성이 뛰어났습니다.
React-Responsive를 설치하려면 다음 명령어를 사용합니다:
npm install react-responsive
npm install @types/react-responsive
import { useMediaQuery } from "react-responsive";
import MobileEventOpenList from "../../components/eventScheduledOpen/MobileOpenEventList.tsx";
import PcEventOpenList from "../../components/eventScheduledOpen/PcOpenEventList.tsx";
import MobileHeader from "../../components/@common/MobileHeader.tsx";
import UserHeader from "../../components/@common/UserHeader.tsx";
const EventScheduledOpen = () => {
const isMobile: boolean = useMediaQuery({ query: "(max-width: 768px)" });
return (
<div>
{isMobile ? (
<div>
<MobileHeader title={"오픈 티켓"} />
<MobileEventOpenList />
</div>
) : (
<div>
<UserHeader />
<PcEventOpenList />
</div>
)}
</div>
);
};
export default EventScheduledOpen;