.jpg)
반응형 웹 디자인이란 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미한다. 즉, 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정되는 것이다.
이는 어떤 디바이스를 우선으로 하여 개발할 것인지를 정하는 것을 의미하기도 한다.
장단점 및 유의사항
- 장점
- 유지보수가 효율적이다.
- 하나의 소스를 수정하면 모든 스크린 사이즈에 맞추어서 컨텐츠가 최적화된다.
- 웹페이지 내용을 수정해야할 때에도 하나의 페이지에서만 적용해도 동일하게 반영된다.
- 하나의 소스 코드로 관리가 가능하기 때문에 초기 개발 비용 및 유지 관리 비용의 절감 효과가 있다.
- 용자 입장에서도 기기에 구애받지 않고 항상 최적의 화면을 경험할 수 있다.
- 검색엔진 최적화 (SEO)에 유리하다.
- 검색 결과에서 상위권에 나타나게 할 수 있다.
- PC용 URL과 모바일용 URL이 동일하기 때문에 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있다.
- 결론: 더욱 다양한 기기가 출시되고 어떤 크기의 기기가 나올지 모르는 미래를 대비한 미래 지향적 기술이다.
- 유지보수가 효율적이다.
- 단점
- 하나의 화면만 제공하는 사이트에 비해서 무겁다.
- 반응형 웹 디자인은 읽어들여야 할 소스가 많아서 불필요하게 많은 데이터를 소비하는 경우가 발생한다.
- 로딩 속도나 이미지 리사이징의 문제로 성능이 떨어질 수 있다.
- 실제로 사용하지 않은 자원(이미지, CSS)를 전송받을 수 있다.
- 실제로 사용되는 이미지보다 더 큰 이미지를 사용할 수 있다.
- 즉, 사이트 속도가 느려진다.
- 대책: 서버 사이드 스크립트를 이용해 접속 기기에 따라 디자인을 선택적으로 적용하는 RESS(Responsive Design + Server Side Components)라는 기법도 있다.
- 반응형 웹 디자인은 읽어들여야 할 소스가 많아서 불필요하게 많은 데이터를 소비하는 경우가 발생한다.
- 웹브라우저 호환성의 문제가 있을 수 있다.
- CSS3의 특성상 인터넷 익스플로러(IE) 8 버전 이하에서는 사용이 불가능하다.
- 디자인의 자유도가 떨어진다.
- 100% 맞춤 디자인이 어렵다.
- 콘텐츠가 많거나 유동적인 경우에 작업량이 많아질 수 있다.
- 하나의 화면만 제공하는 사이트에 비해서 무겁다.
- 유의사항
- 사용자의 모바일 경험을 고려해야 한다.
- 완성된 비주얼 디자인보다 프로토타입 테스트를 우선시해야 한다.
- 효율적인 내비게이션 제공 방법을 고민해야 한다.
- 사이트 속도를 향상시키기 위해 이미지를 최적화해야 한다.
- 모바일 기기를 우선하여 레이아웃을 설계해야 한다. (mobile first)
- 미디어쿼리를 적절히 사용해야 한다.
- 작은 모바일 화면에서도 쉽게 클릭/터치할 수 있어야 하며, 버튼 등을 쉽게 구별할 수 있어야 한다.
- 마이크로 익터렉션(Micro Interaction) 기능을 활용하여 사용자의 흥미를 즉각적으로 유도해야 한다.
- 미니멀리스트 디자인을 이용하면 적은 요소의 사용으로 웹사이트의 속도를 향상시킬 수 있다.
구현 방법
- 미디어쿼리
@media 미디어 타입 (너비 및 높이) {
(CSS 입력)
}
예제
@media screen (max-width: 400px) {
body {
color: red;
}
}- 미디어 타입
- all : 모든 미디어 타입- print : 프린터
- screen : 컴퓨터 화면
- speech : 스크린 리더
- 너비 및 높이
- min- 이나 max-로 최대인지, 아니면 최소인지를 정한다.
미디어 쿼리에는 논리곱이나 논리합 부정논리 등을 적용시킬 수도 있다.
// 논리곱 예시
@media screen and (min-width: 400px) and (orientation: landscape) {
body {
color: blue;
}
}
// 논리합 예시
@media screen and (min-width: 400px), screen and (orientation: landscape) {
body {
color: blue;
}
}
// 부정논리 예시
@media not all and (orientation: landscape) {
body {
color: blue;
}
}- 유동형 그리드 (Fluid Grid) / 유동형 레이아웃 (Liquid Layouts)
웹 컴포넌트의 폭을 px 대신 em과 %를 사용하는 방법이다. 고정된 단위가 아니라 상황에 맞게 변할 수 있는 em이나 % 등의 단위를 사용하는 것을 뜻한다. 즉, 웹브라우저 창 크기를 늘이거나 줄이면 페이지를 구성하는 요소의 크기도 그에 맞게 변한다. 미디어 쿼리와 같이 이용하면 특정 범위의 스크린에 따른 고정형 그리드/반응형 그리드의 구현도 가능하다.
- 유연한 이미지 (Flexible Images)
모든 화면에서 볼 수 있게 화면 폭보다 큰 이미지를 다운받고 이미지의 스타일 값 max-width 를 100%로 height를 auto로 설정하는 방법도 있다.
적응형 웹과 네이티브 앱
- 적응형 웹
기본적으로 서버사이드에서 클라이언트의 정보를 미리 받아 해당 조건별로 정해진 화면을 보여준다. 즉, 클라이언트가 모바일인지 웹인지를 파악해서 리소스를 선택하고 그에 맞는 화면을 나타내주는 형태를 뜻한다. 사전에 스크린 사이즈를 미리 정해 놓고, 해당 스크린 사이즈별로 각기 다른 레이아웃과 사용자 경험(UX)를 디자인하는 방식이다.
데스크탑 버전 웹사이트와 모바일 버전 웹사이트를 각각 구축하여 접속 기기에 따라 각기 다른 페이지를 보여주는 방식이 대표적이다.
단점으로는 기준이 되는 스크린 사이즈에 맞춰서 각각의 사이트를 별도로 운영하는 것이기 때문에 다양한 종류의 디바이스의 사이즈에 웹 사이트를 모두 최적화하는 것이 사실상 불가능하다는 것이다.또한 사이트에 수정 사항이 생기면 각각의 소스 코드에 수정 사항을 모두 반영해야 한다는 번거로움도 있다.
- 네이티브 앱
모바일에 최적화된 언어로 개발되는 어플리케이션을 의미한다. 사람들이 통상적으로 ‘어플’이라고 부르는 것들이 바로 이 네이티브 앱에 해당한다.
장점으로는 모바일 기기에 저장된 주소록이나 파일 등의 정보를 변경할 수 있다. 카메라나 플래시, 센서나 마이크 등 디바이스의 물리적인 부분을 직접 제어할 수 있다는 장점도 있다. 또한 모바일에 최적화된 운영체제(OS, Operating System)의 자원을 직접 활용하기 때문에 빠른 실행 속도와 높은 안정성을 보인다.
단점은 앱스토어나 마켓 등을 통해 어플을 다운받아 설치하는 과정이 요구되고, 운영체제나 플랫폼에 맞춰 어플리케이션을 별도로 개발하고 관리해야 하기 때문에 많은 시간과 비용이 소요된다는 것이다. 업데이트 또한 앱스토어나 마켓 등을 통해서만 가능하므로 수정 사항의 즉각적인 반영이 어렵다.
대표적으로 사용하는 언어의 경우 IOS는 Swift(스위프트)나 Obj-C(오브젝티브-씨), 안드로이드는 Java(자바)나 Kotlin(코틀린)이 있다.
