반응형 디자인 현황 및 동향

2012년부터 2014년까지 모두가 웹디자인 트렌드 예측에서 반응형 디자인을 언급했고, 2015년 웹디자인 트렌드 예측에서도 반응형은 계속되고 있습니다. 몇 년 동안 인기를 끌었던 이 반응형 스타일은 지난 몇 년간 빠르게 입지를 굳혔으며 웹 디자인에 대한 새로운 표준의 물결을 일으켰습니다. 여기에서는 일부 문서와 내 의견을 바탕으로 반응형 디자인의 현황과 동향에 대해 이야기하겠습니다.

기원

2010년 5월 Ethan Marcotte는 획기적인 기사("A List Apart"의 "반응형 웹 디자인"이라는 제목)를 작성했으며 세 가지 기존 도구인 유동 그리드, 미디어 쿼리를 사용했습니다. , 확장 가능한 이미지를 사용하여 다양한 해상도의 화면에서 아름답게 보이는 웹사이트를 만들 수 있습니다. Ethan Marcotte는 디자이너에게 웹의 고유한 기능을 활용할 것을 촉구합니다. “우리는 각 장치에 대해 독립적으로 디자인하는 대신 인터넷에 연결된 다양한 장치에서의 다양한 경험을 동일한 웹 사이트 경험의 다른 측면으로 취급할 수 있습니다. 우리는 최고의 시각적 경험을 디자인할 수 있었지만 목표를 달성할 수 있도록 표준 기반 기술을 디자인에 포함해야 할 뿐만 아니라 다양한 매체에 적응할 수도 있습니다. " Ethan Marcotte는 여러 장치에 걸쳐 훌륭한 경험을 제공할 수 있는 방법과 장치 간의 차이를 무시하지 않는 방법이 있음을 보여줍니다. , 디자이너의 제어를 강조하지 않고 자연이 받아들이도록 선택합니다. 그 과정을 받아들이고 웹의 유연성을 수용합니다.

위에서 언급한 세 가지 개념인 유동 그리드, 미디어 쿼리 및 확장 가능한 이미지에 대해 간략하게 소개합니다. 그러나 반응형 디자인을 연구하는 과정에서 이러한 개념은 여전히 ​​더 광범위합니다. 의미하며 디자이너도 이를 이해해야 합니다.

흐름 레이아웃: 원래 백분율을 측정 단위로 사용하여 레이아웃 기술을 구현하는 것을 의미합니다. 여기서는 유동 레이아웃, 탄력적 레이아웃, 유동 그리드 등 다양한 개념을 하나씩 설명하지 않습니다. 저자는 이를 하나의 큰 개념으로 요약합니다. 반응형 디자인의 레이아웃에서는 더 이상 픽셀(px)을 유일한 단위로 사용하지 않고, 백분율 또는 혼합된 백분율과 픽셀을 단위로 사용하여 보다 유연한 레이아웃을 디자인합니다.

미디어 쿼리: 미디어 쿼리를 사용하면 기기 유형, 해상도, 화면의 물리적 크기, 색상 등 특정 환경에서 쿼리되는 다양한 속성 값을 기반으로 어떤 스타일을 적용할지 결정할 수 있습니다. 미디어 쿼리를 이용하면 디바이스와 디바이스의 특성을 얻을 수 있고, 차이점은 유지하면서 공통점을 찾는 솔루션을 제공함으로써 기존 단순 레이아웃 디자인에서 남아 있던 문제점을 해결할 수 있습니다.

유연한 그림: 레이아웃의 유연성과 함께 중요한 정보 형태 중 하나인 그림은 레이아웃 변경에 적응할 수 있는 보다 유연한 방법도 가져야 합니다. 개인적으로 탄성 사진은 Ethan Marcotte가 제품 디자인을 제안할 때 제안한 개념이라고 생각합니다. 후속 연구에서는 사진을 모델로 삼아 연구 범위를 확장할 수 있습니다. 사진 외에도 반응에 대한 연구도 포함해야 합니다. 아이콘, 차트, 동영상 등 정보 콘텐츠의 활용 방식.

인기

반응형 디자인 개념은 제안된 이후 지속적으로 확산되어 모든 당사자로부터 인정을 받았습니다. 주요 이유는 다음과 같습니다.

외부 환경: 빠른 성장. 인터넷에 연결된 장치의 다양성은 오늘날 더 이상 표준 화면 크기가 없다는 것을 의미합니다.

자체 기능: 엄격하게 정의된 응답성이란 일반적으로 반응형 웹 디자인을 의미하며, 고유한 유연성과 가소성 덕분에 모든 크기와 구성의 장치에 적응할 수 있어 어디에서나 사용할 수 있습니다.

내부 수요: 반응형 디자인 개념이 제안되자마자 주요 웹사이트와 플랫폼에서는 이 일률적인 모델을 채택하여 더 많은 장치에 보다 유연하게 적응할 수 있기를 희망합니다. 특히 지금은 더욱 그렇습니다. 모바일 기기의 인기가 폭발하는 시대입니다.

물론 모든 상황에서 반응형 디자인을 채택해야 하는 것은 아닙니다. 그렇다면 어떤 상황에서 반응형 디자인이 더 적합할까요?

더 많은 시나리오에 비용 효율적으로 적응하고 싶습니다.> 리소스는 제한되어 있지만 항상 제한된 리소스를 사용하여 더 큰 가치를 얻기를 원합니다. 반응형 사이트를 구축하는 데 필요한 인력과 시간은 일반 웹사이트를 개발하고 디자인하는 것보다 늘어나지만, 다양한 기기에 맞게 여러 버전을 구축하는 것보다 비용은 훨씬 저렴하며 유지 관리 측면에서도 훨씬 쉽습니다.

설계하고 개발하려는 신제품이 어떤 시나리오에 더 적합한지 알 수 없습니다.> 예측을 통해 핵심 장치를 선택한 다음 별도로 설계하는 대신 웹 사이트를 더 많이 만드는 데 시간을 투자하는 것이 좋습니다. 다양한 용도로 사용할 수 있도록 유연하게 사용할 수 있습니다. 귀하의 장치에서 가능한 최고의 경험을 누리십시오. 모든 측면을 알 수 없는 경우 예측을 하면 프로세스 위험이 증가하고 결과가 극도로 어려워지기 때문입니다.

모드

현재 대부분의 웹사이트에서 반응형으로 선택되는 두 가지 주요 디자인 모드가 있습니다.

기기 기반: 레이아웃 중단점은 유형과 크기에 따라 결정됩니다. (중단점) 여러 스타일 세트를 디자인한 다음 이를 각각 해당 장치에 투영합니다.

콘텐츠 우선순위: 콘텐츠의 가독성과 가독성을 기준으로 중단점을 결정합니다. 즉, 콘텐츠를 배치할 때 장치를 무시하고

개인적으로 저는 여전히 컨텐츠 우선 접근 방식을 선호합니다. 이는 반응형 디자인의 핵심 전략과 정확히 일치하는 모델입니다. 그리고 미래를 향한 좋은 길잡이이기도 합니다. 과거에는 기본적으로 여러 PC 크기를 기준으로 페이지를 디자인하는 데 가장 적합한 표준 크기를 선택했지만 이제는 모바일 장치가 눈부시게 변했고 TV와 웨어러블 장치에서도 서서히 사용되기 시작했으며 더 이상 고정된 크기가 없습니다. 앞으로는 더욱 예측 불가능한 장비 환경이 조성될 것입니다. 그렇다면 올바른 접근 방식은 무엇일까요? ——컨텐츠 그 자체입니다! 변화는 언제나 빠르고 힘들게 찾아온다. 우리가 해야 할 일은 전체 상황을 연결할 수 있는 실마리를 잡는 것 뿐이다!

콘텐츠 우선 전략에는 전체 반응형 디자인 프로세스 전반에 걸쳐 사용할 수 있는 세 가지 사고 모드가 있습니다.

장치를 잊어버리세요. 사용자가 어떤 종류의 장치를 사용하여 웹 사이트에 액세스할지 모르므로 가능한 한 모든 시나리오를 다루어야 합니다. 모든 것(레이아웃, 구성 요소 등)은 다양한 유형의 장치 및 플랫폼과 호환됩니다. .

우아한 저하: 이 개념은 원래 기존 브라우저에서 새로운 기능을 제대로 구현할 수 없을 때 기술 구현에 대한 절충안이었지만 여기서는 콘텐츠가 와이드에서 와이드로 변경될 때 레이아웃을 디자인하는 유연성만을 표현하고 싶습니다. 좁기 때문에 핵심 콘텐츠 블록을 유지하려면 주의 깊게 검사해야 합니다. 이 모드는 기존 PC 페이지 제품의 반응형 디자인 변형에 매우 적합합니다.

점진적 향상: 이 개념은 2003년 SXSW 이벤트에서 Steven이 제안했습니다. 본질적으로 이는 우아한 저하의 반대입니다. 먼저 간단한 방식으로 콘텐츠를 표시하는 데 중점을 두고 기본 경험을 만든 다음, 기본 경험을 보장하면서 디스플레이의 레이아웃과 상호 작용 작업을 시작합니다. 여기서는 반응형 디자인의 콘텐츠 전략을 설명하는 데에도 사용됩니다. 콘텐츠가 좁은 것에서 넓은 것으로 변경되어 그에 따라 콘텐츠의 풍부함이 높아질 수 있습니다. 이 패턴은 모바일 우선 전략과 일치합니다.

물론 반응형 웹 디자인을 사용하지 않는 데에는 이유가 있을까요? 하지만 “반응형 디자인을 없애자”라고 말하는 사람은 없을 것 같습니다. 실제로 점점 더 많은 웹사이트가 반응형 디자인을 선택하고 있습니다. 이는 2014년에도 그랬고, 2015년에도 계속 그럴 것입니다. 왜냐하면 이것은 더 이상 추세가 아니지만 기쁨이 표준이기 때문입니다.

앞으로 나아가는 방향

반응형 디자인의 장점과 트렌드는 일반적으로 인식되고 있지만, 현재 반응형 디자인 모델의 대중화에는 아직 극복해야 할 문제가 많습니다.

반응형 이미지: 현재의 탄력적 이미지 방법은 주로 크기 조정, 자르기, 조건부 로드 및 기타 구현 방법은 본질적으로 단지 기술일 뿐이며 로컬 영역은 해결하지 않고 문제를 은폐하지 않습니다. 이미지의 유연성을 완벽하게 구현해 보세요.

크로스 엔드 상호 작용: 반응형 디자인에서는 데스크톱 사용자의 사용 습관뿐만 아니라 다양한 크기의 핸드헬드 장치도 고려해야 합니다. 예를 들어, 데스크톱에서는 끝없이 우아해지는 Hover는 모바일 터미널에서는 매우 열악한 경험입니다. 모든 터미널에서 경험을 최적화하기 위해 "차이점을 유지하면서 공통점을 찾는" 방법은 여전히 ​​더 탐구되어야 합니다.

성능: 성능 평가는 반응형 개발에서 가장 큰 고통입니다. 조건에 따라 콘텐츠를 로드하거나 숨기거나 표시하는 것은 단일 조건으로 판단하는 코드 구조보다 더 번거롭고 경험과 유지 관리에 영향을 미칩니다. 특히 모바일 성능 측면에서 볼 때, 점점 더 복잡한 사용 환경을 갖고 있는 디바이스가 많아지고 있습니다. 어떻게 디바이스를 식별하고 다양한 환경에서 디바이스가 좋은 경험을 할 수 있도록 하는지도 어려운 문제입니다.

협업 프로세스: 반응형 디자인은 단순한 디자인 전략 그 이상입니다. 이는 웹 프로젝트에 새롭고 완전한 방법 세트를 제공하며, 새롭고 변경 가능한 접근 방식도 포함해야 합니다. .

마지막으로 반응성은 적응력이 뛰어난 디자인 싱킹 모델을 구현한다고 말하고 싶습니다. 반응형 디자인을 탐구하는 과정에서 반응성 자체가 유일한 목적은 아닙니다. 어떤 디바이스에서든 페이지 콘텐츠를 완벽하게 기획하기 위한 디자인 전략과 워크플로우가 더 큰 주제가 되어야 합니다~