쪼그라드는 웹페이지

간단 소개

다양한 화면 크기에 대응하기 위해 웹페이지를 쪼그라뜨리는 기법과 그 과정에서 겪은 기술적 고민 및 해결 방법을 제시합니다.

AI Summary

반응형 웹 디자인의 어려움
- 다양한 장치 크기에 대응하기 위해 미디어 쿼리를 사용하지만, 예상치 못한 디자인 버그 발생.
- 텍스트 넘침 문제와 QA, 디자이너와의 소통 비용 증가.
쪼그라드는 웹페이지 기법
- PC 최소 사이즈보다 작은 화면에서는 모바일 화면을 보여주고, 모바일 화면은 기준 사이즈보다 작은 기기에서 쪼그라뜨림.
- zoom, transform: scale(...), rem, vw 등의 CSS 속성 활용 시도.
- vw 단위를 사용하고 Sass mixin을 통해 코드 번잡함을 해결, CSSO로 미디어 쿼리 최적화.
기술적 한계 및 추가 팁
- transform 속성 등 추가 문법이 있는 속성 처리의 어려움 존재.
- 가로 화면에서 zoom 속성을 활용하여 정보 가독성을 개선하는 팁 제시.