지난 시간에 이어 북스토어 프로젝트의 메인 화면을 구성하고 모바일 환경에 맞게 반응형을 적용해 볼게요.
메인 화면 배너 구현
메인 화면 상단의 배너는 리액트 기본 기능을 활용해 직접 슬라이드 형태로 구현했어요. CSS의 transform: translate() 속성과 현재 보여줄 배너 데이터의 인덱스 상태를 조합하면 이미지를 옆으로 이동시킬 수 있어요. styled-components 같은 CSS-in-JS 방식을 사용할 때 유용한 접근법이에요.
배너 영역은 오른쪽 버튼을 클릭할 때 왼쪽으로 이동해야 하므로 이동 값에 음수(-)를 적용해야 해요. 또한 배너를 불러올 백엔드 API가 아직 없기 때문에 MSW를 활용해 모킹 서버에서 가짜 데이터를 받아오도록 처리했어요.
컴포넌트 스타일 상속 (추천 도서)
추천 도서 영역은 기존에 만들어둔 BookItem 컴포넌트를 재사용하여 구현했어요. styled-components 를 사용하면 기존 컴포넌트의 스타일 객체를 export 하여 다른 파일에서 선택자로 접근할 수 있어요. 이를 활용해 추천 도서 목록에서는 불필요한 요약, 가격, 좋아요 수를 숨기도록 스타일을 덮어씌웠어요.
import React from "react";
import styled from "styled-components";
import { Book } from "@/models/book.model";
import BookItem, { BookItemStyle } from "./BookItem";
interface Props {
book: Book;
itemIndex: number;
}
const BookBestItem = ({ book, itemIndex }: Props) => {
return (
<BookBestItemStyle>
<BookItem book={book} view="grid" />
<div className="rank">{itemIndex + 1}</div>
</BookBestItemStyle>
);
};
const BookBestItemStyle = styled.div`
${BookItemStyle} {
.summary,
.price,
.likes {
display: none;
}
h2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
}
`;
export default BookBestItem;캐러셀 라이브러리 활용 (리뷰 목록)
배너에서는 슬라이더를 직접 구현했다면, 리뷰 목록은 react-slick 과 slick-carousel 라이브러리를 활용해 캐러셀(Carousel) 형태로 구현했어요.
캐러셀은 하나의 한정된 영역 안에 여러 개의 콘텐츠를 교차해서 표시할 수 있는 UI 컴포넌트예요. 검증된 라이브러리를 사용하면 스와이프 기능이나 무한 반복 등 복잡한 슬라이더 로직을 쉽게 처리할 수 있어요.
모바일 대응 (반응형 웹)
다양한 기기 크기에 맞춰 최적화된 화면을 제공하기 위해 반응형 웹 디자인을 적용했어요. 반응형 구현을 위해 고려해야 할 세 가지 주요 요소가 있어요.
- 뷰포트(Viewport):
meta태그를 통해 모바일 기기에서 화면 배율을 제어해요. - 상대 길이 단위:
px같은 고정된 크기 대신%나vw,vh와 같이 화면 크기에 따라 유연하게 변하는 단위를 사용해야 해요. - 미디어 쿼리(Media Query): 특정 화면 너비의 분기점(Breakpoint)을 감지해 레이아웃을 다르게 적용해요.
추가로 폼을 구성할 때 input 태그의 input-mode 속성을 명시하면, 모바일 브라우저에서 입력 필드 성격에 맞는 가상 키보드(숫자 패드, 이메일 패드 등)를 띄워주어 사용자 경험(UX)을 크게 개선할 수 있어요.
