ted의 개발블로그

📍 [ 독후감 ] 반응형 디자인 패턴과 원리 - 이단 마콧

✏️ 서론

항상 웹사이트를 구경하다 보면 대부분 반응형 페이지로 된 것을 볼 수 있다.(오늘의 집) 내가 프로젝트를 만들 때도 항상 반응형 페이지로 만들려고 노력한다. 하지만, 반응형 페이지의 용어가 정확히 어떤 것이고 언제 반응형 페이지를 만들어야 하는가? 어떻게 하면 유저가 보기 편한 반응형 페이지를 만들 수 있을까?라는 생각이 들면서 관련 서적을 찾을 때 이 책을 보게 되었다. 책은 알라딘에서 주문했고 약 200페이지로 구성되어있다. 읽은 기간은 21.10.19. ~ 21.11.4.이다.

✏️ 본론

파라벨의 트렌트 월턴은 반응형 디자인의 세계로 진입하게 된 과정을 설명한다. 포토샵으로 작업하던 기존의 방식을 버리고 새로운 방식을 채택했는데, 가변 그리드, 가변 이미지, 미디어 쿼리를 활용한 방식이다. 기존에는 페이지를 만들었다면, 페이지 대신 어떤 화면 크기에서든 메시지를 가장 잘 전달하도록 다시 배치할 수 있는 콘텐츠 네트워크를 구축했다. 즉, 반응형 디자인을 어떤 화면 크기에서든 메시지를 가장 잘 전달하게끔 재배치가 가능한 작은 디자인 봉투라고 했다. 책은 반응형 페이지를 적용한 3-40개의 외국 사이트를 예시로 들면서 사이트들의 장점과 단점에 대해 설명했다.

반응형페이지를 적용할 때 작업의 범위와 복잡도가 커지면서, 작업을 모듈화 해야 한다는 필요성이 대두되었는데, 디자인 내에서 컴포넌트에 초점을 맞추게 되었다. 그래서 패턴 라이브러리 혹은 스타일 가이드를 만드는 것에도 새롭게 관심이 집중되었는데 우리가 흔히 알고 있는 스타벅스는 반응형 사이트에 사용한 패턴 라이브러리를 공개한 최초의 기업이라고 설명했다. 커스텀 벅스 프로젝트를 만들 때 스타벅스 패턴 라이브러리를 적극 사용했는데 패턴 라이브러리를 공개한 최초의 기업이라고 하니 신기했다.

다음으로 반응형 페이지를 구성할 때 브라우저가 최신 브라우저인지 테스트하는 방법인데 다음의 코드를 사용했다. 이 코드를 사용했을 때의 장점은 사이트가 로드될 때 자바스크립트 테스트 코드를 통해 기능 수행이 어려운 브라우저를 걸러내고, 그런 브라우저에는 JS로 구동되는 UI를 대부분 제외하여 깨끗하고 간결하며 핵심적인 사용자 경험만 남겨두는 것에 있다.

// querySelector, addEventListener, getComputedStyle DOM 속성의 지원여부를 확인하는 조건문
if ( !( "querySelector" in document && "addEventListener" in window && "getComputedStyle" in window)){
  return;
}

// DOM 속성을 모두 지원하면 HTML요소에 enhanced 클래스를 적용한다.
window.document.documentElement.className += " enhanced";

반응형 페이지를 구성할 때 가변 이미지와 가변 동영상을 설정하는 방법에 대해서도 설명했다. 먼저, 동영상은 이미지와 달리 고유한 크기를 갖고 있지 않으므로 HTML에서 크기를 반드시 지정해줘야 한다. 이때, 종횡비(aspect radio)를 고려하여 넣어야 하는데 4:3 비율은 padding-bottom: 75%를 넣고, 16:9 비율은 padding-bottom: 56.2757202%를 넣어주면 된다. padding-top 혹은 padding-bottom에 퍼센트 값을 설정하면 그 값은 그것을 둘러싼 컨테이닝 블록의 높이에 대한 비율이 아니라 너비에 대한 비율이 된다. 그 결과 수직 패딩은 항상 그것을 둘러싸고 있는 박스 너비의 75%, 56.2757202%가 된다.

<!DOCTYPE html>
<head>
  <style>
    .intro{
      position: relative;
      padding-top: 25px;  /* IE5 IE6의 깨진 상자 모델을 피하기 위한 공간 */
            padding-bottom: 75%;  /* 4:3 */
      padding-bottom: 56.2757202%;  /* 16:9 */
      height: 0;
    }

    .intro video {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
  <div class="intro">
    <video controls>
      <source src="/media/cc0-videos/flower.mp4"
              type="video/mp4">
      Sorry, your browser doesn't support embedded videos.
  </video>
  </div>
</body>
</html>

가변형 이미지를 만드는데 유용한 여러 CSS 속성 중 background-size 속성을 이용했다. 만약, 이미지의 너비 혹은 높이가 이미지를 둘러싼 컨테이닝 블록보다 더 크다면 컨테이닝 블록 바깥의 나머지 픽셀들은 보이지 않을 것이다. 하지만 background-size 속성을 사용하면 이와 같은 현상을 제어할 수 있다. 이때 길이 값 중 하나를 auto로 설정하면 특정 너비 또는 높이를 기준으로 가로세로 비율을 유지한 채 이미지 크기가 조정된다. 만약, 가로 세로 비율을 유지하면서 컨테이너를 채우고 싶을 때 background-size: cover를 사용하면 되는데, 컨테이너의 크기가 이미지의 크기보다 작다면 이미지의 일부가 뷰에 보이지 않을 때가 있다. 이럴 때는 background-size: contain를 사용하면 컨테이너 안의 배경 이미지 전체가 반드시 보인다. 이외에도 반응형 광고, flex, grid 등에 대한 설명이 적혀있다.

✏️ 결론

이 책을 읽었다고 반응형 페이지를 100% 이해했다고 하기는 힘들다. 반응형을 시도하는 방법은 다양하고 지금도 꾸준히 발전하고 있는 분야기 때문이다. 하지만, 책을 읽으면서 반응형 페이지가 왜 생기게 되었고 반응형 페이지의 중요성, 반응형 페이지의 기초적인 지식, 응용 예제 등을 책을 통해 배우게 되어서 좋았다. 제일 기억에 남는 지문은 반응형 페이지는 특정 기기 중심의 분기점을 설정하지 않고 요소들의 경계선 위치에 따라 레이아웃 시스템을 조절한다면, 더욱 견실하고 미래 지향적인 레이아웃을 만들어낼 수 있을 것이다. 이렇게 되면 우리가 아직 상상해본 적도 없는 기기와 브라우저도 더 잘 대비할 수 있을 것이다.라는 말인데, 요즘에는 모바일, 태블릿, 데스크톱 사이의 경계가 흐려지고 있기 때문에 가까운 미래에는 우리가 만드는 사이트가 스마트폰과 화면 크기가 거의 비슷한 스마트 워치에서도 표시될 수도 있기 때문에 기기 종류에 한정 짓지 말고 환경적 특성을 고려하는 것이 건설적인 방향이라는 의미인 것 같다.

저작자표시

'독서' 카테고리의 다른 글

[ 독후감 ] 그림으로 배우는 Http & Network Basic을 읽고... (0)	2022.04.05
[ 독후감 ] 한 권으로 끝내는 Node & Express 2판을 읽고... (0)	2022.02.28
[ 독후감 ] 그림으로 이해하는 AWS 구조와 기술을 읽고... (0)	2021.11.02
[ 독후감 ] HTML5 & CSS3를 읽고.. (0)	2021.10.12
[ 독후감 ] 코어 자바스크립트를 읽고.. (2)	2021.10.05

ted's tech-blog

[ 독후감 ] 반응형 디자인 패턴과 원리를 읽고...

📍 [ 독후감 ] 반응형 디자인 패턴과 원리 - 이단 마콧

✏️ 서론

✏️ 본론

✏️ 결론

'독서' 카테고리의 다른 글

댓글

티스토리툴바

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

[ 독후감 ] 반응형 디자인 패턴과 원리를 읽고...

📍 [ 독후감 ] 반응형 디자인 패턴과 원리 - 이단 마콧

✏️ 서론

✏️ 본론

✏️ 결론

'독서' 카테고리의 다른 글

관련글

댓글

티스토리툴바