반응형 웹디자인 9가지 요소

출처: https://blog.froont.com/9-basic-principles-of-responsive-web-design/

https://slowalk.tistory.com/m/2048

https://www.uxpin.com/studio/blog/responsive-vs-adaptive-design-whats-best-choice-designers/

 

 

 

1. 반응형(Responsive) 웹디자인, 적응형(Adaptive) 웹디자인 차이

반응형 웹디자인(Responsive)

적응형 웹디자인(Adaptive)

Responsive is fluid and adapts to the size of the screen no matter what the target device. Responsive uses CSS media queries to change style based on the target device such as display type, width, height, etc.. and only one of these is necessary for the site to adapt to different screens.   반응형웹에서는 CSS 미디어쿼리를 통해 엔드유저 디바이스의 display type이나 width 또는 height 같은 특징 중 하나를 감지하고, 그 특성에 맞게 스크린사이즈를 유동적으로 변하게한다.

Adaptive design uses static layouts based on breakpoints which don't respond once they're initially loaded. Adaptive works to detect the screen size and load the appropriate layout for it.   적응형 웹에서는 screen의 사이즈를 감지하여 그에 해당하는 layout을 로드한다. 개발자는 대개 스크린사이즈 320, 480, 760, 960, 1200, 1600에 맞춰 레이아웃 분기점을 만든다.

반응형 vs 적응형, 무엇을 선택해야 하는가?

상황에 따라 다르다. 대세는 반응형웹이지만, 그렇다고 절대적으로 반응형웹이 언제나 최선의 솔루션인 것은 아니다.

 

Responsive design will remain popular, but that might be because we have not yet found a decent solution to the heavy maintenance that adaptive demands. Adaptive design hasn’t died out though, despite the web’s apparent love of responsive, so it’s possible – in theory at least – that we’ll see some improvements emerge yet that will blow responsive web design out of the water.

 

 

2. 플로우(Flow)

반응형 웹에서 화면 사이즈 줄였을 때 엘리먼트들의 사이즈 변화가 일어나서 엘리먼트들이 원래 있던 위치에서 밀려나는 것을 flow라고 한다.

 

 

3. 상대적인 단위(Relative units)

반응형 웹에서는 예를 들어 div의 width를 800px이라고 고정하지 않고, 50%로 설정한다. 고정값을 주지않고 퍼센트 같은 상대적인 단위를 사용한다는 뜻이다.

 

4. 분기점(Breakpoints)

어느 시점에서 레이아웃을 어떤 식으로 바꿀 것인지 정해야 한다. 분기점을 나눌 때는, 레이아웃의 변화가 다른 엘리먼트들에게 어떤 영향을 주는지 잘 고려해야 한다.

 

5. 최대값과 최소값(Max and Min values)

반응형 웹에서 예를 들어 width를 무조건 100%로 설정한다고 해서 그것이 언제나 효과적인 것은 아니다. 예를 들어 width가 300px인 이미지의 width를 100%로 설정하면, width가 1000px인 화면에서 그 이미지의 해상도가 깨진다. 그러니까 화면 사이즈를 특정값 이상으로 늘리거나 줄여도 문제가 없도록 엘리먼트에 max 값이나 min값을 정해야 한다는 뜻이다.

 

6. 그룹으로 묶인 요소들(Nested objects)

관리해야할 요소가 많은 경우에는, 그것들의 일부를 한 그룹으로 묶어 일괄적으로 제어할 수 있다. 예를 들어 로고나 버튼처럼 고정단위(static units)를 갖는 경우에는 한개 한개씩 제어하는것 보다 container로 묶어서 한번에 제어하는 것이 편리하다.

 

7.  데스크탑 먼저? 모바일 먼저? (Mobile or Desktop fisrt)

상황에 따라서 적절하게 선택해라.

 

8. 웹폰트 vs 시스템폰트(Webfonts vs System fonts)

웹폰트를 쓰면 다양하고 멋진 폰트들을 골라쓸 수 있지만, 그만큼 페이지를 로드할 때 시간이 더 소요된다.

시스템폰트를 사용할 경우, 엔드유저의 디바이스 로컬에 그 폰트가 없으면 기본글꼴로 표시된다.

 

9. 비트맵 이미지 vs 벡터 이미지(Bitmap images vs Vectors)

사용하고자 하는 이미지에 세세한 특징들이 많거나(디테일한 이미지) 화려한 효과가 적용되어 있다면 비트맵을 써라.(jpg, png, gif) 그렇지 않다면 벡터를 써라.(svg, icon font)

단, 오래된 브라우저에서는 벡터이미지를 지원하지 않는다. 또한, 곡선이 많은 벡터라면 오히려 비트맵보다 무겁다.