안녕하세요~ 퇴근 후 집에 가는 길... 날씨가 너무 춥군요;; 내일은 서울이 영하 16도까지 내려간다는데;; 얼마나 추울지 벌써부터 걱정이되는군요... 오늘은 반응형 웹사이트를 쉽게 만드는 방법에 대하여 알아보려고합니다~



# 반응형 웹사이트(Responsive Web)란반응형 웹사이트를 모르시는분을 위해 간단하게 적어보겠습니다. 사용자가 사용하는 환경은 모두 다를 것이며 모니터의 크기와 이에따른 해상도 역시 다를 것입니다. 또한 브라우저의 크기를 조절할 경우 나타나는 화면의 크기 역시 다른데 이런 다양한 사용자 환경에 즉시 반응할 수 있는... 가장 최적화된 화면을 제공하는 것이 바로 반응형웹이라고 하겠습니다. 사용자 경험을 제공하니 이 역시 UX에 해당한다고 볼 수 있을 것입니다.


! 모바일웹과 반응형웹의 차이점은?
일반적으로 여러 디바이스에 대응하기 위한 방법으로 반응형웹 또는 모바일웹을 구축하게 됩니다. 반응형웹과 모바일웹은 엄격히 구분되는데 모바일의 경우 모바일 환경인 스마트폰에 최적화된 별도의 웹사이트를 구축하는 경우입니다. 따로 사이트를 구축하므로 디자인이 완전히 다르거나 좀 더 모바일에 최적화된 웹어플리케이션의 모습을 가질 수 있습니다. 다만 시간과 노력이 더욱 필요하게됩니다.

이와 다르게 반응형웹은 다양한 디바이스(랩탑, 테블릿, 모바일 등등)에 대응할 수 있도록 사이트의 해상도에 따라 최적화된 UI를 제공하도록 합니다. 기존 웹페이지의 스타일은 크게 벗어나지 않으면서 각각의 디바이스 환경에 따라 변할 수 있도록 좀 더 최적화에 초점이 된 웹사이트라고 생각할 수 있습니다. 이처럼 둘 다 비슷하나 목적, 성격에 따라 좀 더 맞는 구축 방법을 택해야 하겠습니다.

특히 반응형웹이 더 많이 사용되는 이유는 m.webisfree.com 등의 별도 url이나 서버 운영등을 고려하지 않고 기존의 환경을 그대로 유지하여 사용하기 때문이기도 하며 추가로 다양한 환경에 최적화되었기 때문입니다.


! 반응형 웹사이트를 쉽게 만드는 방법기본적으로 반응형웹을 구현하기 위해서는 다음을 고려해야합니다.

1. 폭 또는 너비가 비율에 따라 크기가 변하는 수치를 사용할 것
고정된 값을 사용하면 브라우저의 크기를 변화시켜도 즉각적인 반응이 나타나지 않으므로 픽셀(pixel)이 아닌 퍼센트등의 비율이 적용되는 단위를 사용해야 함

2. CSS 미디어 쿼리의 활용
디바이스에 따른 스타일을 조정하기 위해서는 반드시 css media query를 이용. css가 없이 자바스크립트만을 사용하는 방법은 시간도 많이 필요하지만 성능에도 이슈가 따름

3. 변하는 컬럼과 변하지 않는 컬럼을 어떻게 구현하느냐
화면 변화에 따라 바뀌는 UI를 반응형으로 구현할 경우 자바스크립트 또는 제이쿼리의 사용이 필요할 수도 있음


여기까지는 가장 기본적이고 중요한 내용이라 생각합니다. 반응형웹을 구현할때 가급적 자바스크립트를 최소화하고 CSS만을 활용하는 1, 2 방법이 가장 좋을 것입니다. (css만으로만 구현하기에는 제약이 따를수 있습니다) 왜냐하면 반응형웹이 하나의 시각적 UI이기 때문이죠. 또한 가능하다면 CSS만으로 구현하는 것이 가장 좋다고 생각합니다.

하지만!! 웹사이트의 화면설계에 따라 단순하게 CSS만을 이용하여 구현하는 것이 매우 어렵습니다. 이는 웹사이트가 점점 더 복잡해지고 다양한 기능구현이 필요하기 때문이기도 합니다.

위에도 언급했지만 가장 곤란한 부분중 하나가 바로 폭, 너비가 동일한 고정요소와 지속적으로 바뀌는 가변요소함께 사용될 경우입니다.


# CSS 미디어 쿼리의 사용 방법
CSS media query를 사용할 수 있어야 반응형웹이 비로서 완성될 수 있습니다. Media query는 특정 resolution에 맞는 각각의 css를 적용할 수 있는 css3 기법입니다. css의 media query를 사용하는 방법은 내용이 많으므로 아래의 페이지에서 확인하시기 바랍니다. 어떻게 왜 사용하는지 자세하게 알 수 있습니다.

링크 바로가기 >
https://webisfree.com/2018-03-14/css3-미디어쿼리-media-query-사용하는-방법-반응형웹-구현



# 가변 영역과 아닌 부분이 함께 있는 경우 반응형으로 구현하기
화면에 보여질 컬럼이 2개 이상이고 이중 하나를 고정된 길이인 경우 문제가됩니다. 아래와 같이 좌측이 항상 200px이고 우측 컬럼이 브라우저의 나머지 크기를 차지한다면?

두 컬럼 모두 변하는 경우 각각 20%, 80%와같이 비율을 정하면 되겠지만 하나는 무조건 200px이라 언급했으므로 반드시 하나의 값에서 200을 제외해야합니다. 그래서 떠오르는 부분이 바로 자바스크립트를 사용해 브라우저 크기의 변화시 이벤트를 감지해 전체 폭에서 정해진 200px을 제외한 값을 계속해서 다른 컬럼에 적용하는 방법이죠. 이 경우 어떻게 해야하는지 아래에서 알아봅니다.


! css를 사용하여 반응형웹에서 가변 영역 구현하는 팁
하지만 CSS만을 사용해서 구현할 수 있는 방법이 있습니다. 바로 아래 두가지 속성을 사용하는 방법인데요...

padding-left: 200px;
box-sizing: border-box;


여기서 사용된 box-sizing 속성은 전체너비에서 padding에 사용된 값을 포함할지 아니면 따로 계산할지의 여부를 결정합니다. 즉, box-sizing을 바꾸면 전체 너비인 width를 비율로 변하게 하되 좌측 padding은 항상 똑같은 값을 줄 수 있다는 것입니다.

좌측의 padding 200px은 당연히 왼쪽에 위치할 컬럼과 레이어가 겹치게됩니다. 그럴 수 있도록 position 속성을 absolute를 써야하겠죠.

중요한 것은 좌측 공간을 비우기 위해 left나 margin을 사용하지 않는 것입니다. 반드시 전체 너비와 함께 계산할 수 있는 padding을 사용합니다.

! 또 다른 방법 calc() 함수를 css에 사용하기초창기 반응형웹에서는 거의 사용되지 않았으나 지금은 대부분의 최신 브라우저에서 사용가능한 calc()를 사용하는 방법이 있습니다. 위 코드를 만약 이 방법으로 구현할 경우 전체 100%에서 항상 고정적인 200px을 제외해야하므로 아래처럼 작성합니다.
.leftColumn {
  width: calc(100% - 200px);
}

매우 간단하죠? 이처럼 쉽게 구현할 수 있는 방법이지만 예전에는 구 IE에서 지원하지 않아 사용되지 못했죠.



반응형웹에서 가변 영역을 가지는 예제보기 어렵지 않은 간단한 예제를 알아보겠습니다. 아래의 이미지처럼 좌측 200px의 컬럼값을 고정으로 가지는 두개의 컬럼을 가진 반응형웹을 만들어보겠습니다.


위와 같은 웹페이지를 만들기 위해 아래와 같이 코드를 입력합니다.
<div class="leftColumn">
  좌측 고정 컬럼
</div>
<div class="rightColumn">
  우측 컬럼
</div>

html 코드는 위와 같이 사용하면 됩니다. 투컬럼 형태의 레이아웃으로 사용될 두개의 div 컬럼을 만들었습니다. 아래는 적용될 CSS입니다.
.leftColumn {
  width: 200px;
  height: 500px;
}

.rightColumn {
  position: absolute;
  width: 100%;
  height: 500px;
  padding-left: 200px;
}

이 코드에서 가장 중요한 부분은 바로 position 속성에 absolute 값을 주어서 padding-left로 설정된 값이 클래스명 leftColumn의 요소 위로 올라가게 되는 부분입니다. 쉽게 생각해보면 매우 간단한 방법입니다.


! 마치면서여기가 마지막입니다. 스크립트로 구현하기 전에 화면 인터렉션이 아닌 비주얼적 요소의 경우 CSS 만을 사용해 구현할 수 있을까에 대한 고민을 자주 자주하는 것은 매우 좋은 습관이라 생각됩니다.