[반응형 웹] 가변 그리드, 마진, 패딩 적용하기

반응형 웹(Responsive web)은 여러 기기로 웹을 이용하면 요즘에 반드시 할 줄 알아야 하는 기술이라고 해도 과언이 아니다.

반응형 웹의 구현을 통해 화면의 크기가 서로 다른 기기 별로 웹 페이지의 크기를 따로 설정하지 않아도 되게 된다. 이를 통해 개발에 필요한 비용을 크게 줄일 수 있을 뿐만 아니라 유지/보수 측면에서도 이점을 갖는다.

 

항상 진행하는 프로젝트마다 반응형 웹이 되도록 작성하려고 하였으나, 어설프게 진행하다 포기하기 일수였기 때문에 이번에 책을 한 권 구매하여 제대로 된 공부를 하고 있다.(역시 사람은 돈이 들어가면 조금 더 열심히 하게 된다.)

 

이번 포스팅은 책의 2장에 나오는 가변 그리드, 마진, 패딩을 이전에 진행했던 토이 프로젝트에 반영하는 것을 정리한 포스팅이다.

프로젝트는 항상 웹의 상단에 위치하는 Global Navigation Bar(이하 GNB)를 구현한 프로젝트로, 원티드의 메인 화면을 참고하여 클론 코딩 방식으로 진행되었다. 원티드의 GNB는 크기에 따라서 모양이 달라진다.

 

(위) 일반적인 GNB (아래) 화면이 작을 때의 GNB

 

그림의 위는 컴퓨터로 접속했을 때 확인할 수 있는 원티드의 GNB이다. 아래의 그림은 화면이 작아졌을 때의 GNB이다. 확인할 수 있는 점은 화면의 크기에 따라 표시되는 정보가 달라진다는 것이다. 위쪽 GNB만 해도 화면이 작아지면 각 요소들 사이의 간격이 줄어들고 글씨체가 조정되는 등 화면 크기의 변화에 따라 페이지의 구성이 달라지는 것을 확인할 수 있다.

 

진행한 프로젝트에서 이 기능을 구현했으나 동일한 코드로 작성한 것이 아닌 PC용과 모바일을 따로 나누어 개발하였다. 이렇게 될 경우 비슷한 부분을 중복 개발해야 하기 때문에 작성하면서도 굉장히 좋지 않다고 느껴졌다.

마침 반응형 웹을 실습할 프로젝트를 고민하던 찰나에 굳이 시간을 들여 새로운 프로젝트를 하는 것보다 기존에 있는 프로젝트의 완성도를 높일 겸 배운 내용을 적용해보기로 하였다.

반응형 그리드/마진/패딩

반응형을 위해서는 우선 각 요소들의 크기가 가변적으로 변할 수 있도록 작성해야 한다. 기존 프로젝트에서는 PC와 모바일 별 요소를 따로 작성하고, 그에 맞는 고정된 크기 px를 사용하여 구현하였다. 가변적인 크기를 위해서는 고정된 크기인 px를 적용하지 않는다. % 라는 새로운 단위를 사용하여 크기를 지정한다. %를 구하는 식은 다음과 같다.

 

가변 길이를 설정하려는 요소(A)의 크기 / A를 포함하고 있는 부모 요소(B)의 크기 * 100(%)

 

예를 들어서 부모 요소 B의 길이가 1000px 일 때, 가변 길이를 설정하려는 요소 A의 길이가 600px로 지정하고 싶다면 공식에 따라 600 / 1000 * 100, 즉 60%라는 값을 얻을 수 있다. 화면의 크기가 조정되면 이 비율에 따라서 A의 크기가 변하게 된다.

브라우저의 최대 너비를 1000px라고 고정해둔 경우를 가정해보자. 그리고 B의 너비는 항상 브라우저를 따르도록 하고 싶다면 브라우저와 같은 길이, 즉 1000 / 1000 * 100, 100%로 설정하면 된다. A는 앞서 구한 것과 같이 60%이다. 화면의 크기를 800px로 줄이게 되면 B의 너비도 800px로 줄어들게 되고 A의 너비는 800 * 0.6인 480px가 된다. %로 정의한 비율에 따라 화면 변화에 대응하게 된다.

 

수식은 복잡해 보이지만 페이지를 구성하고 있는 요소를 그림을 그려가며 만들면 쉽게 이해할 수 있을 것이다. 리액트는 결국 컴포넌트 안에 컴포넌트를 담아 만드는 방법이기 때문에 어느 정도 구성 요소 설계할 때 잘 그림을 그려두면 필요한 계산을 할 수 있다.

 

요소의 각 크기 설계 그림

 

그림은 완성했던 프로젝트를 반응형으로 바꾸는 과정에서 크기 지정을 위해 그린 그림이다.

파란색 박스는 GNB가 아닌 페이지의 컨텐츠가 표시되는 컴포넌트이다. 이 컴포넌트의 최상위 컨텐츠는 페이지 전체를 사용한다. 페이지 전체이므로 100%라고 할 수 있다. 이 중 페이지의 가변적으로 5%를 하도록 설계하였다. 그렇게 되면 남는 길이는 양쪽 5%를 제외한 90%가 된다. 남은 90%의 길이에서 양쪽 10%는 여백을 주기 위해 패딩으로 설정하였다. 그렇게 되면 그림에서 초록색으로 표시된 것과 같이 영역의 70%가 실제 화면의 컨텐츠가 표시되는 영역이 되고 양끝 10%는 패딩이 된다. 여기서 주의해야 할 점은 패딩은 컴포넌트의 너비에 포함시켜야 한다는 점이다. 마진은 별도의 길이로 생각하고 패딩은 컴포넌트의 길이로 생각해야 한다.

 

그림을 구현한 코드(JSX)

 

코드는 위의 그림을 구현한 내용이다. 내용에 해당되는 내용은 스크롤을 위해 길게 적어 포스팅에서는 하나로 생략하였다.

지켜봐야 할 것은 각 div 태그의 id, class값과 포함 관계이다.

가장 최상위 요소인 div는 id가 wrap으로 되어 있다. wrap의 경우 width가 100%로 되어 있다. 즉, html 파일에서 최상단에 있는 구성 요소인 html의 지정된 width를 모두 사용한다는 뜻이다.

wrap div 내에는 main-contents div가 존재한다. 이 부분이 그림에서 파란색 테두리로 표시된 부분이다. 실제 컨텐츠를 포함하고 있는 일종의 container의 역할을 수행한다. 마찬가지로 화면 전체를 사용한다. 즉, wrap div와 너비를 동일하게 설정할 것이다. 그렇기 때문에 100%로 설정하였다.

main-contents div 내에는 이제 검은색 박스로 둘러싸인 content div가 존재한다. 여기서 상위 요소인 main-contents의 width를 기반으로 가변 그리드의 너비, 마진과 패딩을 지정할 수 있다. 그림에서 설계한 대로 양쪽 마진과 패딩 값을 지정해주었고 너비를 나머지 길이로 만들어 주었다. 100%라는 상위 요소의 width 크기를 사용할 수 있는데 하위 요소에서는 해당 범위 내에서 원하는 크기를 상대적으로 지정하면 되는 것이다. 하위 요소의 width, 양쪽 마진/패딩 값을 모두 더했을 때, 100%가 되면 화면에 딱 맞는 형태로 요소를 작성할 수 있다.

 

작성한 후 화면의 크기를 조정해보면 화면 크기에 따라 유동적으로 크기가 변경되는 것을 확인할 수 있다.

정리

가변 그리드, 마진, 패딩 값은 결국 상위 요소와 하위 요소 간의 길이를 비율로 표시하는 것이다. 화면이 어떻게 보이기를 원하는지에 따라서 다르겠지만 하위 요소에서 사용할 수 있는 최대 너비의 크기는 하위 요소를 포함하고 있는 상위 요소의 너비 크기라고 말할 수 있다. 사용할 수 있는 범위 내에서 구성하려는 요소들을 원하는 대로 비율별로 나누어 작성해보면 원하는 결과를 얻을 수 있을 것이다. 만약 조금 차이가 난다면 조금씩 값을 조정해나가면 된다.

 

이 상위 요소와 하위 요소의 크기를 확실히 정의한다면, 가변적인 그리드와 마진, 패딩 값을 확실히 설계할 수 있을 것이다.

사실 이것만으로는 완전 반응형 웹이라고 할 수는 없다. 진짜 반응형 웹을 위해서는 화면을 표시하고 있는 미디어가 어떤 것인지 정보를 확실할 수 있는 미디어 쿼리(MediaQuery)와 화면의 영역(viewport)이 필요하다. viewport의 경우는 보통 header 태그 내에 정의되어 있어 따로 정의할 필요는 없지만 미디어 쿼리의 경우는 css 파일 내에 별도로 명시해주어야 한다. 이에 대해서는 다음 포스팅에서 정리해보도록 하겠다.