콘텐츠
‘옛날’(2010 년 이전)에는 대부분의 웹 디자인에 데스크톱 용과 모바일 용으로 각각 하나씩 두 개의 별도 웹 사이트를 만들었습니다. 그런 다음 Apple은 iPad를 소개했고 모든 것이 바뀌 었습니다. 얼마 지나지 않아 시장에 출시되는 다양한 장치의 수가 기하 급수적으로 증가했고 모든 장치를위한 맞춤형 웹 사이트를 디자인하는 것이 불가능 해졌습니다. 이 문제를 해결하기 위해 제작자 Ethan Marcotte가 반응 형 웹 디자인 (또는 줄여서 RWD)이라고 명명 한 새로운 분야가 등장했습니다.
반응 형 웹 디자인의 기본 원칙은 모든 기기에 대해 별도의 웹 사이트를 만드는 것이 아니라 사용되는 기기에 맞게 사이트를 원활하게 조정할 수있는 많은 코드를 작성하는 것입니다.
이것은 2018 년에 만들어진 고품질 웹 사이트가 더 작은 스마트 폰 화면에서 볼 때와 와이드 스크린 노트북에서 볼 때 완전히 다른 모습을 보이는 이유를 설명합니다. 실제로 전자에서 브라우저 창의 크기를 조정하더라도 레이아웃이 변형되는 것을 확인하고 유쾌한 '자동 마법'방식으로 적응할 수 있습니다.
그러나 반응 형 웹 디자인은 단순히 사이트를 다르게 보이게하는 것이 아닙니다. 점점 더 다르게 행동하게 만드는 것입니다.
런던 디자인 컨설팅 업체 Elixirr Creative의 파트너 인 Bill Kingston은“본질적으로 반응 형 웹 디자인은 사용자가 필요로하는 정확한 시간과 장소에서 올바른 경험을 만드는 것입니다.
“사용자가 찾는 정보는 장치에 따라 다르기 때문에 설계 할 때이 점을 고려해야합니다. 사용자 행동과 맥락에 대한 통찰력이 핵심입니다. "
Hampshire 대행사 Superrb의 디지털 디자이너 인 Joel Maynard가 실용적인 예를 제공합니다. "예를 들어 일부 사이트에서 내비게이션을 처리하는 방법은 신중하게 고려해야합니다."라고 그는 설명합니다.
“롤오버 및 호버 효과와 같은 것들은 한때 정말 유행이었습니다. 그러나 커서를 사용하여 이러한 기능을 잠금 해제하는 경우 터치 장치에는 실용적이지 않으므로 미리 생각해야합니다. . 특히 스마트 폰과 태블릿뿐만 아니라 터치 데스크톱도 이제 더 인기를 얻고 있기 때문입니다.”
미묘한 조정
요점은 사용자의 요구 사항과 사용자가 찾고있는 정보의 종류가 기기에 따라 달라질 수 있다는 것입니다. 디지털 스튜디오 ustwo London의 디자인 책임자 인 Chris Robinson은 이러한 차이가 미미할 수 있지만 이것이 중요하지 않다는 의미는 아닙니다.
“예를 들어주의 시간은 다를 수 있습니다.탐색 계층 구조를 변경해야 할 수 있습니다. 특정 기능의 우선 순위를 정하거나 상호 작용 원칙을 미묘하게 변경할 수 있습니다. "
고맙게도 새로운 기술로 인해 이러한 복잡한 요구 사항을 반응 형 웹 디자인에 적용하기가 더욱 쉬워졌습니다. Robinson은“이전에는 특정 레이아웃이 반응 형을 만들기가 어렵거나 엉망이었을 수 있습니다.
그러나 CSS Grid 및 Flexbox와 같은 새로운 도구는 더 복잡한 레이아웃을 허용하기 시작했습니다. 웹에서의 상호 작용이 크게 개선되고 있으며 이제 브라우저에 다양한 복잡한 앱이 구축되는 것을 보게 될 것입니다. "
운 좋게도 대부분의 디자이너에게이 모든 작업을 수행하기 위해 코더가 될 필요는 없습니다. "그래픽 디자인 도구는 마침내 디자이너가 반응 형 레이아웃을 테스트하는 데 도움이되는 기능을 통해 디지털 워크 플로우에 적응하기 시작했습니다."라고 Robinson은 말합니다.
예를 들어 Sketch의 스마트 크기 조정 및 고정 도구를 사용하면 구성 요소 수준에서 반응 형 규칙을 만들 수 있습니다. Framer는 조금 더 나아가 다양한 차원에서 구성 요소의 가시성을 변경할 수 있도록 도와줍니다.”
Maynard는 대부분의 웹 디자인 프로젝트에 Sketch를 사용합니다. "디바이스 크기에 대한 템플릿이 함께 제공되므로 반응 형 디자인을 바로 시작할 수 있습니다."라고 그는 설명합니다.
"InVision Studio는 실제로 하나의 앱에서 프로토 타이핑, 애니메이션 및 디자인을위한 게임 체인저처럼 보이기 때문에 계속 주시하는 것이 좋습니다. 제가 사용하는 또 다른 도구는 작은 장치에서 검색 할 때 모든 디자인이 정렬되어 있는지 확인하는 데 도움이되는 Skala Preview입니다.”
주위를 둘러 봐
하지만 웹 사이트 나 프로토 타입을 직접 만들지 않더라도 반응 형 디자인의 핵심 요소를 이해하면 디자이너로서의 경력을 쌓을 수 있습니다. 주변에서 일어나는 일에주의를 기울이는 것만 큼 간단 할 수 있습니다.
Maynard는“하루 종일 웹 사이트 작업을 할 때 자연스럽게 웹 사이트가 어떻게 작동하는지 알게됩니다. “더 깊이 탐구하기 위해 Awwwards 및 siteInspire와 같은 사이트는 최첨단 디자인 측면에서 최대로 끌어 올린 멋진 사이트를 찾는 데 적합합니다. Tympanus 및 CodePen과 같은 사이트를 사용하여 여러 장치와 다양한 화면 크기에서 잘 작동하는 멋진 대화 형 요소를 찾을 수도 있습니다.
RWD는 끊임없이 진화하고 있습니다. 틀리거나 올바른 방법은 없습니다. 실험 해보세요!
“더 넓게는 연습이 반응 형 설계에있어 완벽하게 만듭니다.”라고 그는 덧붙입니다. "한때 연습하기 위해 한 일은 개선 될 수 있다고 생각한 웹 사이트를 찾은 다음 반응 형 개념을 조합하는 것이 었습니다."
Kingston은 비슷한 견해를 가지고 있습니다. "웹을 계속보고, 다른 장치에서 사이트를보고, 분석합니다."라고 그는 권장합니다. “성공적인 경험을 발견했을 때의 고충 사항 목록과 영감 폴더를 보관하십시오. 경계를 유지하십시오. RWD는 끊임없이 진화하고 있습니다. 틀리거나 올바른 방법은 없습니다. 실험 해보세요!”
이 기사는 원래 279 호 컴퓨터 예술, 그래픽 디자이너를위한 세계 최고의 잡지입니다. 구입279 호또는여기에서 구독하세요.
