반응형 디자인 (Responsive)
반응형 디자인은 사용 가능한 공간에 맞게 디자인 요소의 배치를 조정하여 브라우저 너비의 변화에 반응합니다.
반응형 디자인은 직관적입니다. 유동적이기 때문인데
이는 사용자가 온라인 세계에 엑세스하여 대형 모니터에서와 마찬가지로 휴대용 장치에서 즐길 수 있음을 의미한다.
적응형 디자인 (Adaptive)
웹사이트의 점진적 향상.
적응형 디자인에는 여러 고정 레이아웃 크기가 있습니다.
사이트가 사용가능한 공간을 감지할 때 화면에 가장 적합한 레이아웃을 선택합니다,
따라서 데스크탑에서 브라우저를 열면 사이트에서 해당 데스크탑 화면에 가장 적합한 레이아웃을 선택합니다. 브라우저 크기 조정은 디자인에 영향을 미치지 않습니다.
Amazon, USA Today, Apple and About.com은 모바일에 적용되는 웹사이트입니다.
모바일에서 보는 레이아웃은 컴퓨터로 보는 것과는 다를 수 있습니다.
하지만 이건 알아서 디자인이 다르게 정렬하는 것이 아니라 디자이너들이 폰의 크기에 따른 다른 레이아웃을 선택한 것이기 때문이다.
적응형 디자인에서는 6개의 다른 디자인을 만드는것이 적정하다. 너비 ;320,480,760,960,1600pixels
Standalone Mobile Design (독립 실행형 모바일 설계)
모바일 전용 웹 사이트를 만드는 옵션도 있습니다.
이 옵션은 한때 훌륭한 접근 방식이었습니다
설계자는 전용 형식에 맞게 요소와 레이아웃을 조정하여 모바일 장치를 위한 사이트를 만듭니다.
구글은 검색 엔진 순위를 모바일 사이트에 전달했는데 오늘날에는 적응형 사이트와 반응형 사이트에서도 동일한 선호 사항이 부여됩니다.
(다른 디자인을 사용하거나 변경 가능한 디자인을 채택하지 않고) 별도의 사이트를 만들 때 발생하는 큰 단점은 두 버전의 웹 사이트를 균질하게 유지하려면 훨씬 더 많은 유지보수가 필요하다는 것입니다,
이에 대한 특별한 동기 부여 없이 모바일 전용 디자인은 최근 들어 인기가 떨어졌습니다.
Choosing Between Responsive and Adaptive Design
Responsive
Responsive이 뛰어난 설계가 더 쉽고 구현에 필요한 작업도 줄어듭니다.
각 화면 크기에서 디자인을 덜 제어할 수 있지만, 현재로서는 새로운 사이트를 만드는데 가장 선호되는 방법입니다, 또한 WordPress, Zoomla등과 같은 대부분의 CMS (Content Management Systems)의 사용할 수 있는 저렴한 템플릿이 많은 것과 관련이 있을 수 있다. (누가 재창조를 하고 싶겠는가!)
Responsive designers create a single design to be used on all screens
and will generally start in the middle of the resolution and use media queries**(**a question; an inquiry. mental reservation; doubt.**)** to determine what adjustments will be made for the lower and higher end of the resolution scale.
This tends to make users happy, because that familiar web design seems guaranteed to translate across to any device’s screen.
균일성과 원활함은 좋은 사용자 환경을 제공하는 데 있어 중요한 고려사항입니다.
응답성이 높은 설계 프로젝트의 시각적 계층을 주시하는 것이 중요합니다
화면에서 요소가 섞일 때 이 상태를 유지하려고 합니다, 즉 제품을 확실히 배송하기 위해 여러 장치를 사용하여 많은 테스트를 거치게 됩니다, 사이트 설계가 비교적 단순하면 용기에서 용기로 액체처럼 흐릴 수 있습니다.
하지만 Responsive단점은?
1. 웹사이트가 장치간의 '흐름'되어 화면 크기에 맞게 조정되므로 추가한 모든 광고가 공간에 맞지 않을 수도 있다.
2. 갑자기 Responsive디자인을 사용함으로써 제공되는 '바로가기'에는 약간의 작업이 필요할 수 있다
3. 다운로드 시간은 데스크톱과 모바일 장치에 따라 다르다. 여기에는 이미지의 유연성이 큰 고려 사항인데, 집이나 사무실에서 큰 화면이 빠르게 나타나는 대형 디자인은 모바일에서 표시하는데 더 많은 시간 (및 데이처) 이 소요됩니다.
Adaptive
적응형 설계는 이론적으로 사용자가 인터페이스를 사용하는데 사용하는 장치에 따라 최상의 사용자 환경을 보장합니다.
화면이 데스크톱 디자인에서 소형 디바이스로 흐름~연결 되는 응답형 디자인과 달리,
적응형 디자인은 맞춤형 솔루션을 제공합니다
사용자의 상황별 요구와 기능에 적응하는데,
디자이너로서 우리는 디자인 터치를 친숙하게 만들어 모바일 장치에서 사용자의 요구에 부합한다는 것을 사용자에게 보여줄 수 있습니다. 데스크톱 사용자에게도 동일한 작업을 수행할 수 있습니다.
우리는 사이트 최저 해상도 버전에서 시작하여 최고 해상도까지 작업합니다.
현재 6가지의 설계가 표준이지만 사용자의 데이터에 따라 더 적은 설계를 사용할 수 있다.
1.
적응형 설계의 강점은 현대적인 사용자 경험과 더 관련이 있다고 느끼는 반며 , 응답형 설계는 데스크톱 중심접근 방식을 보여줍니다.
사용자로서 우리는 스마트 기기로 인해 더 많은 것을 하고 있습니다, 우리는 우리 장치가 우리가 겪고 있는 것을 인지하고 있다고 느끼기를 좋아하는데요
문자 그대로의 예를 들어봤을 때
만약 여러분이 긴 터널을 운전하고 있다면 환경에 적응하고 밝기를 조절하는 GPS화면을 가지고 있는 것이 더 낫지 않을까요.
이러한 상황별 성능과 사용 편의성은 스마트 기기가 적응할 수 있을 만큼 스마트하고 유용하다는 것을 확인시켜 주는 동기에 안심할 수 있습니다.
2.
적응형 설계를 통해 관련 사용자 인터페이스에 대한 광고를 최적화 하도록 설계할 수도 있습니다.
다른 해상도를 위해 설계하기 때문에 사용자의 특정 요구에 엑세스할 수 있습니다
예를 들어 스마트폰의 센서가 정교해짐에 따라 기업은 이전보다 더 많은 사용자를 알 수 있습니다.
사용자는 즐겨는 상점, 식당, 체육관 등에 자주 방문합니다. 사용자는 체크인하여 프로필을 만듭니다.
이 행동, 개인화, 타게팅을 통해 미세하기 튜닝된 광고를 디자인할 수 있다.
3.
적응형 웹사이트를 보유한 기업이 속도 테스트에서 응답형 웹사이트를 보유한 기업을 능가하는 경우가 많다는 연구결과가 있습니다.
적응형 사이트는 응답형 사이트보다 속도가 2~3배 빠르며 사용자 환경을 제공학 위해 사용자에게 데이터를 적게 제공합니다.
그러나 최고의 사용자 환경을 설계하고 최고의 솔루션을 제공하기 위해서는 시간을 들여 옵션과 사용자의 현실을 검토해야하는 것을 기억해야한다.
하지만 Adaptive단점은?
1. 일반적으로 응답성이 뛰어난 디자인을 만드는 것보다 훨씬 더 많은 작업이 소요된다,
이러한 이유로 대부분의 적응형 설계가 기존 사이트를 여러 장치에서 사용할 수 있도록 개조하는데 사용된다.
따라서 더 많은 기기를 통해 기존 사이트에 접속할 수 있도록 하여 최신 정보를 제공하는 것이 첫번째 비즈니스 순서이다.
2.Adaptive designs can leave out users “in the middle”.
디자이너가 데스크톱 및 스마트폰 사용자에게만 맞춰왔기 때문에 태블릿 또는 노트북 사용자는 '걸린'상태로 남아 있을 수 있다. 따라서 사용자가 버전 간에 전환할 수 있도록 링크를 제공하는 것이 중요하다
3. 검색 엔진 봇이 '.com' 사이트와 'm.com'사이트를 구분하기 위해 검색 결과를 체로 구분하고 정렬하는데 있어 향상되고 있지만, 현 상태를 받아드리이는 것이 현명합니다.
대부분의 검색 엔진은 여전히 여러 URL에서 동일한 컨텐츠의 순위를 매기지 않습니다. 즉, 적응형 설계가 SEO를 계속 유지할 수 있다는 점을 염두에 두어야한다.
검색 엔진 최적화(영어: search engine optimization, SEO)는 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이다.
웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있게 한다.
따라서 현재로서는 응답성이 뛰어난 설계를 선호하는 것이 분명하지만 예산이 충분하다면 적응형 설계를 무시하면 안된다 구글은 사용자들처럼 빠르게 로디오디는 웹사이트를 좋아합니다!
정리하자면..!
Responsive Design
| Pros | Cons |
|---|---|
| - Uniform & seamless = good UX - Abundance of templates to use - SEOfriendly - Often easier to implement | -Less screen size design control - Elements can move around - Advertisements lost on screen - Longer mobile download times. |
Adaptive Design
| Pros | Cons |
|---|---|
| - Allows designers to build the best UX for the appropriate device - Mobile devices can sense their user's environment - Designers can optimize advertisements based on user data from smart devices. | -Labor-intensive to create -most adaptive designs are retrofitting traditional sites to make them more accessible -Tablets and netbooks can have trouble with site configuration tending to be smartphone- or desktop -oriented -Challenging to SEO - Search engines have trouble appreciating identical content on multiple sites |
모바일 기기만이 점점 더 스마트해지고 있는 것은 아닙니다. 가정과 사무실에는 기존 데스크톱보다 더 많은 데스크톱이 있습니다. 이제 시계와 히터에서 "사물 인터넷"을 구성하는 여러 장치에 이르기까지 다양한 스마트 기기가 환경을 감지하고 이에 반응합니다. 지금은 더 똑똑한 물건들로 가득 찬 시대입니다. 우리는 점점 더 그 똑똑함을 염두에 두고 디자인해야 합니다.
