여러분들은 웹 서비스를 개발한다면 단순히 웹페이지를 개발하면 될까요?
프론트엔드 개발에서 가장 중요한 것은 사용자와의 소통입니다.
그 소통은 디스플레이(display)에서 사용자의 조작에 동적인 이벤트를 발생시킴으로 소통합니다.
그렇기에 우리는 여러가지 디스플레이에 대처해야할 필요가 있습니다
세상에는 여러가지 크기의 화면이 있습니다.
모바일 핸드폰도 있고, 아이패드 화면, 13인치 크기 모니터, 17인치 크기 모니터 크게는 47인치 티비까지도 화면으로 사용하는 사용자들도 있습니다.
그렇기에 우리는 이 모든 사용자들을 고려하여 화면을 구성할 필요가 있습니다.
위와 같은 모든 화면에 대해서 동적인 대처가 가능한 웹을 우리는 반응형 웹이라고 합니다.
반응형 웹을 작성하는 방법
고정 픽셀 사용을 지양하자
보통 화면을 구현할 때 피그마나, 제플린과 같은 양식에서는 화면 왼쪽에서 몇 픽셀에 존재해야한다고 하는데, 그 픽셀에 집착해서 absoulute를 통해서 위치를 고정시키려는 사람들이 간혹있다. !절대! 그런 식으로 작성하지 않았으면 좋겠습니다.
너무 고정된 픽셀에 의존하여 css를 작성하려 한다면 화면이 조금만 커지거나 줄어도 UI가 침범되는 현상을 볼 수 있는데, 결국 이런 화면은 수준이 낮은 애플리케이션이라는 인식과 사용자에게 좋은 경험을 줄 수 없을 것입니다.
위에 내용처럼 반응형을 하려했으나 위치가 고정되어 낮은 사용성을 보여줄 수 있다.
그렇다면 어떤 식으로 작성해야하는건가요?
position과 display css 요소를 활용하자
실제로 CSS를 중앙에 놓기 위해 margin:~~ padding~~ 등으로 줄이는 것은 화면에 대해 지정해줘야하기에 많은 귀찮은 작업이 될 것입니다..
하지만 위의 CSS 스타일 속성을 통해서 요소의 위치를 간단하게 정의해줄 수 있습니다.
대표적인 예시로 display:, position:등이 있습니다.
media-query를 잘 활용하자
결국 UI 요소들의 원래 크기 때문에 결국은 모습이나 폰트사이즈를 줄여야하는 경우가 옵니다. 그렇다면 UI 요소들이 화면이 핸드폰 사이즈가 되었을 때 자동적으로 UI가 줄어들면 해결될 것입니다.
이를 구현할 수 있는 것인 media-query입니다.
그렇다면 이것만 할 줄 알면 반응형 웹을 만드는 것에 어렵지 않겠지만 가장 중요한 것이 있습니다
변하는 UI와 변하지 않는 UI를 구별하고 설계하자
여러분들이 하는 프로젝트에서 모바일 화면을 보여주기 위해 media query로 계산해서 모든 것을 보여주겠지만 간단하게 CSS 요소로 만들기도 합니다. 만약 media-query로만 생각해서 만들게 되면 괜스레 필요 없는 부분까지 처리하게 되어 시간적 자원을 낭비하기도 합니다. 또한 CSS가 너무 커지게 되어 유지보수에 어려움을 겪기도 합니다.
결국 반응형 웹을 만드는 것에 대한 기술은 위에 제시한 내용 이외에도 부트스트랩과 같은 외부 UI를 통해서도 작성할 수 있습니다. 하지만 그 모든 것을 설계하고 사용하는 것과 결정하는 것은 전부 개발자의 역량입니다.
반응형 웹에 대한 이해를 높여 사용자에게 더 좋은 UX를 얻어내기를 바랍니다. 감사합니다.
