채팅 기능이 중요한 기능으로 생각했기 때문에 모바일 퍼스트 웹으로 구현하게 되었다.
그런데 3주 정도의 기간에 모든 페이지에 반응형을 추가하기는 어렵다는
팀원들의 의견으로 모바일 UI만 만들게 되어 아쉬운 마음에
TailwindCSS의 Breakpoint Prefix로 가로 너비를 체크하여 780px 이상일 경우
로고를 추가하여 반영해 줄 수 있도록 구현해주었다.
그리고 프로젝트 마감 기한까지 모든 기능 구현을 마치고 ! 개인적으로 반응형 UI도 추가해보기로 했다 !!
✔️ Breakpoint Prefix
특정 화면 크기 이상일 때 적용할 스타일을 정의할 때 사용한다.
| Breakpoint prefix | Minimum width | CSS |
|---|---|---|
| sm | 40rem( 640px ) | @media (width >= 40rem) { ... } |
| md | 48rem (768px) | @media (width >= 48rem) { ... } |
| lg | 64rem (1024px) | @media (width >= 64rem) { ... } |
| xl | 80rem (1280px) | @media (width >= 80rem) { ... } |
| 2xl | 96rem (1536px) | @media (width >= 96rem) { ... } |
// example
<img class="w-16 md:w-32 lg:w-48" src="..." />📍 Tailwind CSS vs media query
Tailwind CSS를 활용하면 일반 CSS 미디어쿼리보다 간단하게 반응형을 적용할 수 있다.
간단하게 768px 이상일 때, 위의 화면의 Logo 를 적용하는 예시를 구현한다고 생각했을 때,
일반적인 CSS의 미디어 쿼리를 이용해서 적용한다면 다음과 같이 구현할 수 있다.
.logo {
display: none;
}
@media (min-width: 768px) {
.logo {
display: block;
width: 64px;
height: 64px;
}
}하지만 !
Tailwind CSS로 적용할 경우 이렇게 간단하게 구현할 수 있다.
<Image className="hidden md:block w-16 h-16" src="logo.png" alt="Logo" />Tailwind CSS로 반응형 UI를 적용하는 것은 생각보다 시간이 확실히 조금 걸렸고, 간단하게 작업할 수 있었다.
코드도 많이 늘어나지 않고 굉장히 효율적으로 작업할 수 있다는 것을 느낄 수 있었다.
💡 기록해두기
✔️ aspect-ratio
aspect-ratio
: 요소의 가로와 세로 비율을 유지하면서 크기를 조정할 수 있도록 도와주는 CSS 속성
가로 또는 세로의 크기를 그냥 지정하면 컨텐츠가 찌그러질 수 있다. 이를 해결하기 위해aspect-ratio를 사용하면 비율을 고정하면서 유동적으로 크기가 변하도록 설정할 수 있다.
기본적으로 제공되는 비율은 두 가지가 있다.
aspect-square:1:1비율( 정사각형 )aspect-video:16:9비율( 비디오 비율 )
하지만 제공되는 비율 외에도 [가로/세로] 형식으로 필요한 비율을 직접 설정해서 사용할 수 있다.
<div className="relative w-full h-56 sm:aspect-[1/2]">
{imgSrc ? (
<Image
src={imgSrc}
alt="캠핑장 이미지"
// fill: Next.js Image 컴포넌트에서 부모 요소 크기에 맞게 자동으로 채우기
fill
sizes="auto"
// object-cover: 이미지가 비율을 유지마하면서 꽉 차도록 조정
className="rounded object-cover"
quality={60}
/>
) : (
<DefaultImg />
)}
</div>✔️ 반응형 grid 만들기
화면 크기에 따라 유연하게 변경되는 카드 배치 그리드 UI 만들기
<div className="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-4 pb-20 overflow-auto"
ref={scrollRef}
>sm:grid-cols-1: 640px 이상은 1개만 배치md:grid-cols-2: 768px 이상에서 2개씩 배치lg:grid-cols-3: 1024px 이상에서 3개씩 배치gap-y-4: 카드 세로 여백 추가
✔️ max-width, min-width 활용하기
처음에 전체적으로 형태만 생각하고 놓치고 지나갔던 부분이 바로 min-width !
min-widht 설정을 안해줘서 비율로 창이 계속 작아지다보니 칸이 다 깨져서 화면이 이상하게 보일때까지도 줄어들었다.
이를 방지하기 위해 min-w-[width]를 설정해줘서 원하는 크기 이하로 줄어들지 않도록 설정해줄 수 있다.
반대로 max-width도 설정해서 불필요하게 커져서 이상하게 보이지 않도록 조절할 수 있다.
<div className="bg-white rounded-lg h-auto overflow-auto sm:p-4 min-w-[340px] w-[90%] h-auto sm:min-w-450px sm:w-[50%] ">✔️ 반응형에 비율을 설정할 때, 같은 단위 사용하기
예를 들어서, width를 기본적으로 30%로 설정, sm: 부터는 45rem 으로 설정한다 ?
제대로 동작하지 않을 가능성이 높다.
w-[30%](퍼센트)와 w-[45rem](고정 단위)를 섞어서 쓰면, 경우에 따라 30%가 45rem보다 커질 수도, 작아질 수도 있다. 이 부분을 처음에 생각하지 못해서 적용이 잘 되지 않아서 조금 헤맸다...
반응형을 적용할 때는 같은 단위(px, rem, % 등)를 유지하는 것이 안정적이다.
✨ 구현 결과
📍 prefix와 grid를 활용한 반응형 카드 배치
📍 prefix를 활용한 반응형 카드 리스트 배치
📍 prefix를 활용한 반응형 지역 검색 UI
📝 정리
- 반응형을 적용해보면서 모바일 퍼스트에서 시작하는 방식이 확실히 좀 더 효율적으로 작업이 가능한 거 같았다.
aspect-ratio+object-cover로 이미지 비율을 유지하면서 반응형 ui를 만들 수 있다.- 반응형에서는 동일한 단위를 유지하는 것이 중요 !
- Tailwind CSS의
prefix와grid,max-width/min-width등을 활용하여 반응형 ui를 생각보다 빠르게 구현할 수 있었다.- 다음에는 다크 모드도 적용해보고 싶다 !
