[CSS] Tailwind CSS에서 반응형 디자인 적용하기

 

오늘은 Tailwind CSS를 사용하면서 반응형 디자인을 적용했던 방법을 공유해보려 한다.

 

기존의 CSS에서 반응형을 구현하려면 @media와 같은 미디어 쿼리를 사용해서 코드량이 증가하게 되는데,

Tailwind CSS는 자체적으로 Breakpoint prefix를 제공해서 반응형 디자인을 수월하게 구현할 수 있다.

 

 

테일윈드 CSS에서는 기본적으로 sm, md, lg, xl, 2xl와 같이 5개의 prefix를 제공하는 것을 알 수 있다.

'sm'의 경우 가로너비가 640px 이상인 경우를,

'lg'의 경우 1024px 이상인 경우를 의미한다.

그리고 아무 접두사도 붙이지 않는 경우 전체 너비에 적용된다.

 

 

위의 코드를 예시로 들면,

기본적으로 w-16을 적용하고

md, 즉 가로가 768px 이상일 때는 w-32를,

가로가 1024px 이상일 때는 w-48을 적용한다는 뜻이다.

 

---

 

여기까지 이해했다면 조심해야 할 점이 하나 있다.

sm, md, lg 이런 접두사를 보다 보면 반응형을 구현할 때,

'모바일의 경우는 sm을 쓰면 되는구나~~' 라고 생각할 수도 있는데 테일윈드 CSS에서는 추천하지 않는 방식이다.

 

 

공식문서에 따르면 Tailwind는 기본적으로 부트스트랩과 같이 모바일 우선 중단점 시스템을 사용하기 때문에

모바일용으로 CSS를 적용하려면 sm:w-16과 같이 sm을 붙이는 것이 아닌, 아무 접두사도 붙이지 않는 w-16으로 사용해야 한다는 것이다.

 

쉽게 설명하면, 테일윈드 CSS를 사용해 반응형 디자인을 구현할 거라면

"모바일"에 먼저 맞게 디자인을 적용하고 만약 태블릿이나 데스크톱 등 다양한 환경을 위해서는 md: 또는 lg: 를 붙여서 

기기에 맞게 스타일링하면 된다는 것이다.

 

나도 이 부분이 맨 처음 개발을 진행할 때는 헷갈렸던 기억이 있다.

 

 

 

 

📕 반응형 중단점 커스텀하기

 

내가 테일윈드를 쓰면서 느꼈던 큰 장점 중 하나는 tailwind.config.js 파일을 통해

색상, 글꼴, 중단점 등 많은 것들을 커스텀할 수 있다는 점이었다.

 

그렇기 때문에 위에서 설명한 반응형 중단점 또한 커스텀이 가능한데,

공식문서에서 소개하는 예시는 다음과 같다.

 

이렇게 tailwind.config.js 파일을 수정하면,

태블릿과 데스크탑에 맞는 반응형을 구현하고자 할 때 tablet:w-16, desktop:w-48과 같이 작성하면 된다.

tablet이나 laptop과 같은 이름은 내가 지정하는 것이기 때문에 개발자 입장에서 편하게 수정하면 된다.

 

나는 개인적으로 공식문서에서 소개한 방식대로 커스텀하면,

각 div 영역마다 desktop:w-16 desktop:font-main desktop:grid-cols-2와 같이 복잡해지게 된다.

 

중단점이 여러개인 경우는 중단점마다 CSS를 작성해줘야 하므로, 코드 길이가 몇 배는 길어진다.

그렇기 때문에 나는 공식문서에 나온 방식은 가독성이 떨어진다고 생각해서

desktop은 dt, tablet은 tb와 같이 줄여서 커스텀을 해서 사용했다.

무엇이 편리한지에 대한 정답은 없기 때문에, 각 프로젝트에 맞게 커스텀해서 사용하면 될 것 같다.

 

 

 

 

 

📕 추가적으로 고민하면 좋을 것

 

반응형을 구현하다가 처음에 겪은 시행착오들이 있는데,

이를 공유하면 처음 개발을 접하는 사람들에게 도움이 될 것 같아 적어보려고 한다.

 

1. 되도록 상대 단위를 사용할 것

 

반응형 디자인을 구현하다 보면, px과 같은 단위를 사용할 때가 많은데

이 경우 열려있는 브라우저 창의 크기를 의미하는 viewport가 다를 때 화면이 깨질 수가 있다.

그렇기 때문에 절댓값을 사용하기보다는 화면의 viewport에 따라 자동으로 결정되는 vh나 vw와 같은 단위를 사용하는 것이 사용자 경험에 도움이 된다. 

 

구글 크롬 창에서 Ctrl + Shift + M을 누르면 각 디바이스에 따라 반응형 디자인을 확인해 볼 수 있는데,

절댓값을 많이 사용하게 되면 분명 내 컴퓨터에서는 반응형이 잘 됐는데, 친구 컴퓨터에서는 다 깨져있는 현상이 발생할 수 있다. 

 

2. min과 max를 활용할 것.

 

모바일에서는 콘텐츠가 가로 너비를 꽉 채우는 것이 좋지만,

데스크톱에서는 화면 너비만큼 모두 채우는 것이 오히려 사용자 경험이 저해될 수 있다.

그래서 데스크탑에서는 가로 양옆에 약간 여백을 두는 것이 좋은데,

이 경우 max-w-96 와 같이 max를 잘 사용하면 사용자 경험을 증가시킬 수 있다.

 

 

 

3. 모바일은 세로 방향으로

 

모바일에 비해 데스크탑은 세로 길이가 짧고 가로길이가 넓다.

그렇기 때문에 데스크탑에서는 한 화면에 채울 수 있다면,

세로로 스크롤하기 보다는 가로로 한 화면에 배치하는 것이 더 가독성이 뛰어나다. 

반면에 모바일은 세로로 스크롤하는 경우가 많기 때문에 

컨텐츠를 배치할 때도 세로 방향으로 하는 게 상대적으로 깔끔하다.

 

조금 더 생각나는 게 있으면 추후에 추가하도록 하겠다.

 

 

참고 문서

 

https://tailwindcss.com/docs/responsive-design

Responsive Design - Tailwind CSS