tailwind로 반응형 디자인을 적용하려고 고민중이다.
모바일 중심 디자인 vs 웹 중심 디자인
직전의 프로젝트는
벤치마킹 할 다른 서비스들을 모두 참고하더라도
모바일 전용이었고,
식단만을 관리하기 위해
사용자가 웹으로 접근할 것 같지는 않았기 때문에
모바일만을 염두에 둔 디자인만 적용했었고
웹으로 접근하는 사용자도 모바일 형태로 볼 수 있게 만들었다.
그러나
현재 프로젝트는
다양한 정보들을 직접 편집해야 하는 경우가 있고,
나의 경험에 미루어 봤을 때 다양한 정보들을 일일이 모바일로 편집하기에는
너무나 불편하고 늦어졌기에 금방 포기해버리고 싶은 마음이 들었던 적이 많았다.
모바일이 많이 발전을 하더라도 데스크톱이 사라지지 않을 것 같은 이유기도 하다.
다시 본론으로 돌아가서
그래서 현재 프로젝트는 모바일 유저의 비중이 많이 차지할 것으로 예상 되지만,
웹 유저의 비중도 비등비등 할 것 같은 게,
식자재는 한 개당 많은 정보들이 들어가거나 수정되어야 하고
좀더 빠르고 다양한 정보를 한번에 다루기 위해서는 웹으로 사용해야 할 것이기 때문이다.
그러므로 웹 중심적으로 디자인 하려고 하다보니,
다양한 디바이스 환경에서도 깨지지 않는 디자인을 고려해야 했다.
그래서 선택한 것이 반응형 디자인이다.
반응형 디자인
tailwind는 반응형 디자인을 손쉽게 할 수 있도록 미리 지정되어있는 브레이크 포인트 프리픽스를 제공해준다.
사용은 다음과 같이 하면 된다고 한다.
<img class="w-16 md:w-32 lg:w-48" src="...">
나는 좀더 커스텀하고 명시적으로 사용하고 싶어 다음과 같이 tailwind.config.ts에 정의해두었다.
screens: {
mobile: { max: '767px' },
tablet: { min: '768px', max: '1023px' },
desktop: { min: '1280px' },
},
그러면 위의 md:w-32대신 tablet:w-32로 명시적으로 사용할 수 있게 된다.
(직관적인걸 좋아하는 편..)
생각해야 할 것
처음에
간단한 Home페이지를 작성했으나,
<div className="desktop:w-44 laptop:w-30 mobile:w-20 desktop:h-44">
<Image src={logo} alt="logo" />
</div>
이렇게 모든 디바이스별로 width와 height를 일일이 작성해야하는 번거로움이 생겼다.
여기서 다시 내가 구현할 반응형 디자인의 정의를 내려둘 필요가 생겼다.
변경이 될지도 모르지만, 일단 먼저 생각해놓은 것을 정리해 두도록 한다.
반응형 디자인 나만의 원칙
1. 너무 세세한 고려를 하여 시간을 과도하게 많이 쏟지 않도록 한다.
2. 반응형은 먼저 모바일 중심 디자인으로 한다.
(기본스타일을 모바일로 진행하고, 반응형으로 다른 디바이스별 디자인을 추가하는방식)
3. 기본 글자 크기는 변경되지 않도록 한다. (버튼 마진등등도 포함)
4. 레이아웃에 영향을 많이 받을것 같은 글자크기 (현재까지는 로고만 해당)는
전역 css파일에 변수로 지정해 두고, 디바이스별로 다르게 적용하도록 한다.
(전역 css파일이 너무 커져 관리가 어려울 수 있으니
postcss-import라이브러리를 사용하여 전역 파일을 나누도록 한다)
5. 너비등은 퍼센트로 적용한다. (margin은 성능에 많은 영향을 미치므로 왠만하면 사용하지 않도록 한다)
6. 디바이스별 레이아웃은 디자인해 놓은 카드의 배치로 고려한다. (최대한 자잘한 수정을 하지 않도록) (네브바 제외)
7. 추후 모바일 버전은 따로 flutter로 개발해보도록 한다
