Responsive design

Reponsive web design (RWD) is a web design approach to make web pages render well on all screen sizes and resolutions while ensuring good usability

반응형 디자인은 모든 스크린 사이즈와 해상도를 대비하여 UX를 향상시키기 위한 디자인 접근방식입니다.

Responsive web design is a design approach that addresses the range of devices and device sizes, enabling automatic adaption to the screen, whether the content is viewed on a tablet, phone, television or watch.

반응형 디자인은 장치별 스크린에 맞게끔 자동으로 적응시킵니다.

Responsive web design isn't a separate technology -- it is an approach. It is a term used to describe a set of best practices used to create a layout that can respond to any device being used to view the content

반응형 디자인은 특정한 기술이 아니라 접근방식입니다.
컨텐츠를 장치에 대응되게끔 layout을 만드는 최선의 방법 이라면 반응형 디자인입니다.

예전에는 CSS float가 반응형 디자인으로 소개되었지만, 지금은 best practice가 아닙니다.

Media Query

Media queries allow us to run a series of tests (e.g. whether the user's screen is greater than a certain width, or a certain resolution) and apply CSS selectively to style the page appropriately for the user's needs.

미디어 쿼리는 스크린 너비 구역을 나누는 등, 여러 테스트를 수행하며 선별적으로 적절한 스타일을 적용케합니다.

A common approach when using Media Queries is to create a simple single-column layout for narrow-screen devices (e.g. mobile phones), then check for wider screens and implement a multiple-column layout when you know that you have enough screen width to handle it. Designing for mobile first is known as mobile first design.

일반적인 접근 방식은 하나의 열을 가진 layout을 mobile과 같은 좁은 너비의 기기를 위해 맞추고, 더 넓은 너비는 다양한 열의 layout을 형성하는 mobile first design 입니다.

If using breakpoints, best practices encourage defining media query breakpoints with relative units rather than absolute sizes of an individual device.

만약 breakpoints를 사용한다면 상대적인 단위로 설정하는 것이 권장됩니다.

Media queries can help with RWD, but are not a requirement. Flexible grids, relative units, amd minimum and maximum unit values can be used without queries

미디어쿼리는 반응형 디자인의 수단일 뿐입니다. 미디어 쿼리 없이도 반응형 디자인을 구현할 수 있습니다.

Responsive layout technologies

Responsive sites are built on flexible grids, meaning you don't need to target every possible device size with pixel perfect layouts.

유연한 grid로 반응형 사이트를 만든다는 것은, 개별 장치의 완벽한 픽셀단위의 레이아웃을 만들 필요가 없다는 것입니다. 즉, 개발에 드는 비용이 감소됩니다.

By using a flexible grid, you can change a feature or add in a breakpoint and change the design at the point where the content starts to look bad.

컨텐츠가 못생겨지기 시작한 시점을 breakpoint로 추가하고 변화를 주면 됩니다.

Several layout methods, including Multiple-column layout, Flexbox, and Grid are responsive by default.
They all assume that you ar trying to create a flexible grid and give you easier ways to do so.

Multiple-column layout, Flexbox, 그리고 Grid는 기본적으로 반응형이며 이들은 쉽게 유연한 grid를 만들 수 있도록 돕습니다.

What is grid?

a pattern or structure made from horizontal and vertical lines crossing each other to form squares

수평선과 수직선을 만나 형성하는 사각형 모양의 패턴이나 구조라고 생각하면 될 듯 합니다.

Multicol

With multicol, you specify a column-count to indicate the maximum number of columns you want your content to be split into. The browser then works out the size of these, a size that will change according to the screen size.

.container {
  column-count: 3;
}

If you instead specify a column-width, you are specifying a minimum width. The browser will create as many columns of that width as will comfortably fit into the container, then share out the remaining space between all the columns.

  .container {
    column-width: 10em;
  }

You can use the columns shorthand to provide a maximum number of columns and a minimum column width.

Flexbox

In Flexbox, flex items shrink or grow, distributing space between the items according to the space in their container.

.container { display: flex; }
.item { flex: 1; }

CSS grid

In CSS Grid Layout the fr unit allows the distribution of available space across grid tracks.

.container {
  display: grid;
  grid-template-colums: 1fr 1fr 1fr;
}

Responsive images

To ensure media is never larger than its reponsive container, the following approach can be used:

img,
picture,
video {
   max-width: 100%;
}

위 CSS는 image가 변화하는 container보다 커지는 상황을 방지하는 코드입니다. 이는 CSS Reset으로도 많이 설정합니다.

Why responsive images?

넓은 스크린을 가진 장치를 사용할 때는 이미지로 문제가 발생하지 않았지만, 좁은 스크린 장치를 사용하면서 문제들이 발생되기 시작했습니다. 다시 말하면, 컴퓨터만 존재하던 시대에서 이미지는 단일 이미지로 충분했지만, 스마트폰이 등장하면서 컴퓨터에 사용하던 이미지를 변형할 필요가 생긴 것입니다.

The general problem whereby you want to serve different cropped images in that way, for various layouts, is commonly known as the art direction problem

The browser could then determine the optimal resolution to load based on the screen size of the user's device. This is called the resolution switching problem

How do you create responsive images?

Resolution switching: Diffrent sizes

Resolution switching: Same size, different resolutions

Art direction

Why can't we just do this using CSS or JavsScript?

Responsive typography

Using media queries for responsive typography

html { font-size: 1em; }
h1 { font-size: 2rem; }
@media (min-width: 1200px) {
  h1 {
    font-size: 4rem;
  }
}

As this approach to typography shows, you do not need to restrict media queries to only changing the layout of the page. They can be used to tweak any element to make it more usable or attractive at alternate screen size.

이 방식은 페이지 전체 레이아웃을 변경하는 엄격한 미디어쿼리가 아니라 사용성이 높고 매력적이라면 살짝 tweak 하는 걸로 충분하다는 점입니다.

Using viewport units for responsive typography

Viewport units vw can also be used to enable responsive typography, without the need for setting breakpoints with media queries.

h1 { font-size: 6vw; }

The problem with doing the above is that the user loses the ability to zoom any text set using the vw unit.

viewport unit으로 설정하면 스크린 너비에 따라 자동으로 변환될 것입니다. 하지만 zoom을 해도 스크린 너비는 변하지 않기에 zoom에 따른 변경이 적용되지 않을 것입니다. 그러므로 viewport unit들은 혼자 사용되서는 안되고 calc()와 함께 사용되어야 합니다.

h1 {
  font-size: calc(1.5rem + 3vw);
}

이렇게 한 번 설정해두면 font-size는 viewport와 font-size에 따라 변경될 것이므로 위의 문제를 해결할 수 있을것입니다.

The viewport meta tag

you should always include the viewport meta tag in the head of your documents.

<meta name="viewport" content="width=device-width,initial-scale=1" />

This viewport meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size tha you intended.

By setting width=device-width you are overriding a mobile device's default with the actual width of the device.

이 메타태그는 스마트폰이 등장할때 존재했는데, 대부분의 사이트들은 모바일 최적화되어 있지 않았습니다. 그러므로 모바일 브라우저들은 그들의 viewport width에 맞게 페이지를 렌더했고 이는 데스크탑 레이아웃을 줌 아웃한 것처럼 보였습니다. 이에 이용자들은 불편함을 느꼈고 이는 당신이 viewport meta tag를 <head>에 사용해야할 이유입니다.

느낀점

반응형 디자인을 위한 코드는 개발의 역사(history)를 공부하면 쉽게 이해되는 부분이 많았습니다. 앞으로 개발 공부함에 있어서 현 상황을 단순히 받아들이지 않고 왜 사용해야하는 지를 계속 공부하고 이해해나가겠습니다.

참고사이트

• 코딩애플 HTML/CSS 강의
• https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
• https://dictionary.cambridge.org/ko/%EC%82%AC%EC%A0%84/%EC%98%81%EC%96%B4/grid
• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images