반응 형 디자인 : 왜 잘못하고 있는가

반응 형 디자인은 멋진 CSS 기술로 인해 유행이 아니라 문제에 대한 해답입니다. 항상 그 사실을 기억하고 그 문제를 실제로 적절하게 다루고 있는지 아닌지 스스로에게 물어보십시오. 복사 및 붙여 넣기를 사용하여 미디어 쿼리 중단 점을 삽입하는 경우 솔루션에 결함이있을 수 있습니다.

미디어 쿼리가 존재하는 이유와이를 활용하여 유비쿼터스 웹의 문제를 진정으로 해결하는 방법에 대해 논의 해 보겠습니다. 콘텐츠가 가상 화면 크기가 아닌 레이아웃의 중단 점을 결정하게하는 이유에 대해 이야기 해 봅시다.

이 기사는 Heart 데스크탑 VPS와 제휴하여 제공되는“데스크탑 디자인을 넘어서 바라본다”시리즈 시리즈의 일부입니다.

미디어 쿼리의 비하인드 아이디어

이 토론을 올바르게 시작하려면 왜 미디어 쿼리가 갑자기 인기를 얻었는지 논의해야합니다. 이에 대한 대답은 물론, 에단 마르 코트 (Ethan Marcotte)가 만든 용어 인“응답 적 디자인 (Responsive Design)”은 웹 디자이너들에게 끊임없이 증가하는 문제를 해결하는 환상적인 방법이라는 것입니다.

모든 사람들이“모바일 웹”이 기존 웹을 어떻게 넘어 설 것인지에 관해 계속해서 뛰어 다니는 동안, 일어났던 혁명은 훨씬 더 과감했습니다.

이“문제”는 전 세계적으로는 좋지만 우리에게는 정말 골치 아픈 일입니다. 지난 10 년 동안 전 세계 웹은 새로운 것으로 변모했습니다. 더 이상 이전에 설정 한 벽에 구속되지 않습니다. 나는 이것을 전에 말했지만 반복 할 가치가 있습니다. 모든 사람들이“모바일 웹”이 기존 웹을 어떻게 넘어 설 것인지에 관해 계속해서 뛰어 다니는 동안 발생했던 혁명은 훨씬 더 과감했습니다. 웹은 어디에나있게되었습니다.

현재로서는 단일 지점에서 웹에 액세스하지 않습니다. 우리는“전문가”가 예측 한 것처럼 스마트 폰을 위해 랩톱을 포기하지 않았습니다. 대신 웹은 어디에나 있습니다. 그것은 우리의 전화 및 컴퓨터뿐만 아니라 태블릿, iPod, 게임 시스템, 텔레비전 및 심지어 자동차에도 있습니다.

이 추세는 시간이 지남에 따라 계속됩니다. 반응 형 디자인은 과거에 별도의 모바일 사이트를 만들고 과거에보고있는 장치에 맞게 진화하고 적응할 수있는 하나의 사이트를 개발하는 시대가되었습니다. 미디어 쿼리를 사용하여 다양한 CSS를 다양한 뷰포트 크기에 표시하고 모든 사람이 최상의 경험을 할 수 있습니다.

반응 형 디자인의 문제

위의 섹션은 공간을 채우는 반 역사적 란트가 아니며 반응 형 디자인이 달성해야하는 목표를 살펴 보는 것입니다. 그러면 질문은 이러한 목표를 달성합니까? 반응 형 디자인은 편재 문제를 적절하게 해결합니까?

대답은 복잡합니다. "어떻게하는지에 달려 있습니다." 혼란스러운 진술입니까? 반응 형 디자인은 간단합니다. 미디어 쿼리를 사용하여 다양한 뷰포트 크기에 맞춤 CSS를 제공합니다. 이것이 모두가 올바르게 접근하는 방법입니까? 그렇다면 어떻게 옳고 그른 방법이있을 수 있습니까?

이 기술의 중요한 부분에 대해 논의하기 시작하면 복잡성이 발생합니다. 어떤 미디어 쿼리를 사용해야합니까? 또는 다른 방법으로 사용자 정의 CSS를 대상으로해야 할 "중단 점"은 무엇입니까? 현재 인기있는 답변은 iPhone 및 iPad와 같은 최고의 "모바일"장치 (예 : 화난 Android 사용자 의견)에서 시작됩니다. 이러한 원형에서 우리는 소위 "일반적인"스마트 폰 및 태블릿 크기를 설정합니다. 그런 다음 랩톱과 작은 데스크탑, 마지막으로 큰 화면으로 이동하여 처리합니다. CSS-Tricks와 같은 표준 미디어 쿼리 세트에는 일반적으로 9 개 또는 10 개의 사전 설정된 중단 점이 있습니다.

가상의 장치 사용 사례가 아닌 특정 설계의 요구에 초점을 맞춘 경우 어떻게해야합니까? 어디에서나 잘 작동하는 레이아웃을 구축하면 어떻게 되나요?

공평하게, 이 시스템은 어느 정도 작동합니다. 우리는 위의 Coyier와 유사한 세트를 사용하여 구축 된 훌륭한 반응 형 사이트를 많이 보았습니다. 그러나 나는 이것이 몇 년 전에“모바일 사이트”를 디자인함으로써 우리가했던 것과 같은 실수를 반복한다고 생각합니다. 여기에서 전체 초점은 사이트를 보는 장치에 있습니다. 사이트를 구축하기 전에 이러한 중단 점을 염두에 두어야합니다.

그러나 장치가 변경됩니다. 우리는 이미 웹이 전원 스위치를 사용하여 거의 모든 것에 연결되어 있다는 것을 이미 확립 했으므로 왜 현재 일반적인 화면 크기에 다시 한 번 강조하고 있습니까? 더 나은 대안이 있습니까? 가상의 장치 사용 사례가 아닌 특정 설계의 요구에 초점을 맞춘 경우 어떻게해야합니까? 어디에서나 잘 작동하는 레이아웃을 구축하면 어떻게 되나요?

컨텐츠 중심의 반응 형 디자인

미리 설정된 미디어 쿼리와 관련하여 위에서 언급 한 문제는 내가 파헤쳐 서 실제로 스스로 반응하는 작업을 시작했을 때만 발생했습니다. 이론적으로 표준 제안은 훌륭하지만 일단 복잡한 설계에 적용하면 이러한 중단 점이 항상이를 커버하지는 않습니다. 문제는 사이트가 시작된 후 Boston Globe 디자이너가 신속하게 발견 한 것처럼 문제가 "중간"에서 발생한다는 것입니다 (기록상 프로젝트는 환상적이며 레이아웃 문제는 대부분 해결되었습니다). 디자인이 당신이 설명하지 않은 크기에 있고 사실 이후에 구멍을 뚫고 패치해야 할 때 상황이 복잡해집니다.

나는 이것을 열렬한 애플 팬보이라고 말합니다. 아이폰 용 웹 사이트 디자인을 중단하십시오.

제 질문은, 왜 시작하지 않습니까? 일련의 장치와 결과적으로 미디어 쿼리를 사용하여 프로젝트에 들어가는 대신 디자인을 결정하지 않는 이유는 무엇입니까? 모든 웹 페이지 레이아웃에는 브라우저 크기가 무결성을 저하시키는 지점이 있습니다. 유비쿼터스 문제에 비추어 디자이너로서의 우리의 임무는 그 크기를 찾아서 설명하고, 약점을 모두 설명 할 때까지 거품을 내고 헹구고 반복해야한다.

나는 이것을 열렬한 애플 팬보이라고 말합니다. 아이폰 용 웹 사이트 디자인을 중단하십시오. 대신, 뷰포트 크기가 실현 가능한 상태로 줄어들어 무결성을 유지하는 웹 사이트를 디자인하십시오. 디자인을위한 가이드로 특정 장치를 염두에 두십시오 (예 : 작은 장치는 터치 기반 인 경향이 있으므로 링크를 크게 만드십시오). 그러나 눈을 가리지 말고 더 큰 그림을 보지 마십시오. 어느 화면에서나 잘 보입니다.

새로운 워크 플로우

컨텐츠 중심의 반응 형 디자인 워크 플로우는 어떤 모습입니까? 생각보다 간단합니다. 분명히, 당신은 어떤 종류의 출발점이 필요합니다. 모바일을 시작하고 올라가고 싶다면 좋습니다. 당신이 큰 시작하고 내려오고 싶다면, 또한 좋습니다. 나는 개인적으로 디자인을 파헤쳐 서 모바일 수준에서 시작하면 제대로하는 것이 매우 어렵다는 것을 알지만, 이런 식으로 그것을 수행하는 데에는 확실한 주장이 많이 있습니다.

이 워크 플로를 따라갈 때 뭔가 마술이 발생합니다.

가설 적으로 1020px 너비의 큰 사이트에서 시작했다고 가정 해 보겠습니다. 손을 잡을 수있는 가장 큰 화면에서 확인하고 멋진 모습인지 확인하십시오. 이제 창을 드래그하여 디자인이보기 좋을 때까지 작게 만듭니다. 첫 번째 중단 점이 있습니다. 해당 지점에 대한 미디어 쿼리를 설정하고 해결해야 할 모든 것을 수정하십시오. 완료되면 해당 창을 잡고 추악한 다음 지점을 찾으십시오. 설명 된 범위에 만족할 때까지이 단계를 반복하십시오.

그러나 iPad는 어떻습니까? Kindle Fire 또는 삼성의 최신 관련성 시도는 어떻습니까? 이 워크 플로를 따라갈 때 뭔가 마술이 발생합니다. 레이아웃을 거의 모든 크기로보기 좋게 만들었습니다. 제대로 한 경우 휴대 전화 나 태블릿에서 가져 오면 멋지게 보입니다.

레이아웃 만
이 설명은 레이아웃 비율만을 나타냅니다. 다른 브라우저와 장치에서 기능을 테스트하지 않아도됩니다. 반응 형 디자인은 다른 브라우저 엔진이 HTML, CSS 및 JavaScript를 다르게 해석한다는 사실을 설명하지 않습니다.

결론

요약하자면 미디어 쿼리와 반응 형 디자인은 웹 사이트가 모든 화면과 뷰포트 크기로보고 있다는 사실을 설명 할 수있는 매우 강력한 도구를 제공합니다. 그러나 디자인을 소수의 장치에 고정하기 시작하면 시작한 지점으로 돌아갑니다. 대신 목표는 거의 모든 뷰포트 크기를 처리 할 수 ​​있도록 다목적 레이아웃을 만드는 것입니다.

이것은 이론적으로는 훌륭하지만 예제는 어디에 있습니까? 이 토론의 출발점은 최근 반응 형 이미지 갤러리를 구축하려는 시도에서 비롯되었습니다. 컨텐츠 중심의 반응 형 디자인 워크 플로가 어떻게 생겼는지 살펴 보려면 해당 기사를 확인하십시오.