소개
웹 디자인 초기에는 특정 화면 크기에 맞게 페이지가 만들어졌습니다. 사용자의 화면이 더 크거나 작은 경우 결과는 다음과 같습니다.
- 원치 않는 스크롤바,
- 빈약한 공간 활용,
- 과도하게 확장된 문자열.
반응형 웹 디자인(RWD)의 개념은 다양한 화면 크기를 사용할 수 있게 되면서 등장했습니다. 디자인의 전체적인 개념이 바뀌었습니다. 그리고 다양한 장치에 웹 디자인을 제공할 수 있는 방법에 대한 아이디어입니다.
여기에서 RWD 기본 기술과 이를 마스터하는 방법을 찾을 수 있습니다.
반응형 웹 디자인이란?
반응성이란 무엇입니까? 특정 기술 조건에 적응하는 능력입니다. 웹사이트의 경우 사용자 화면을 의미합니다. 반응형 사이트는 다음에서 동일하게 보입니다.
- 데스크탑
- 노트북,
- 태블릿,
- 스마트폰.
화면 치수(예: 5인치)나 위치 지정은 반응형 페이지에 영향을 주지 않습니다.
반응형 웹 페이지는 장치 화면 및 방향에 맞게 조정됩니다. 사용자가 화면을 더 많이 회전해도 반응형 페이지는 동일하게 유지됩니다.
반응형 웹 디자인의 목표는 사용자 친화성입니다. 또한 전환율이 장치에 따라 달라지지 않도록 합니다.
반응형 디자인의 진화
RWD 이전에는 웹 사이트를 디자인할 때 두 가지 옵션이 있었습니다.
- 브라우저 창에 맞게 늘어나는 유연한 사이트를 만듭니다.
- 고정 폭(예: 고정 크기(픽셀 단위))으로 사이트를 만듭니다.
결과적으로 이 웹사이트 디자인은 한 화면 크기에서만 괜찮아 보였습니다. 오히려 개발자 화면에서. 화면이 작을수록 유동적인 사이트가 찌그러져 보입니다. 더 큰 화면에서는 읽을 수 없는 긴 줄이 표시되었습니다. 고정 너비 사이트는 더 나아 보이지 않았습니다. 작은 화면에는 사용자에게 친숙하지 않은 가로 스크롤 막대가 있었습니다. 더 큰 화면은 가장자리에 많은 공백을 표시했습니다.
최초의 스마트폰은 모바일 웹의 접근성을 높였습니다. 일부 회사는 신흥 모바일 시장을 조사하기 시작했습니다. 이를 위해 그들은 대부분 임시 모바일 버전의 사이트를 만들었습니다. 모바일 버전의 URL이 다릅니다. 따라잡기 위해 그들은 다음을 수행해야 했습니다.
- 개발하다,
- 유지하다,
- 사이트의 두 가지 별도 버전을 최신 상태로 유지합니다.
모바일 웹사이트는 데스크톱 웹사이트와 비교할 때 벗겨진 것처럼 보입니다. 일정 기간 동안 모바일 장치는 성능과 기능 면에서 성장했습니다. 이제 전체 웹사이트를 표시할 수 있습니다. 그러나 모바일 사용자는 짜증이났습니다. 그들은 사이트의 모바일 버전에만 액세스할 수 있었습니다. 완전한 기능을 갖춘 웹 사이트 버전을 사용할 수 없었습니다. 이 문제를 해결하기 위해 RWD가 적용됩니다.
반응형 웹 디자인이 필요한 이유
모바일 트래픽 양은 매일 증가합니다. 모바일 트래픽의 약 50% 이상이 스마트폰과 태블릿에서 발생합니다. 이 수치는 증가할 수 있습니다. 모바일 기술을 사용하면 모든 사람이 어디에서나 인터넷 서핑을 할 수 있습니다.
- 소파에 누우면,
- 길을 걷다 보면,
- 이름으로 대중교통을 이용할 때.
모바일 잠재고객은 지속적으로 증가합니다. 이것은 무시할 수 없습니다. 비즈니스는 휴대용 장치에 맞게 웹 사이트를 조정하는 이유입니다.
반응형 웹 디자인은 불필요한 것으로 간주되었습니다. 그러나 그것은 모바일 트래픽 점유율이 상대적으로 작을 때 유효했습니다. 요즘은 역사입니다. 모바일 트래픽이 필요한 경우 적응해야 합니다. 모든 웹 스튜디오는 RWD를 고객 브리핑의 핵심 포인트로 언급합니다. 또한 그들은 고객과의 의사 소통 초기에 그렇게 합니다.
반응형 웹 디자인과 웹사이트 모바일 버전 – 차이점
모바일 버전이 있는 웹사이트는 반응형 웹 디자인이 있는 사이트가 아닙니다. 그 반대.
현재 반응형 웹 디자인은 사이트 자체의 필수적인 부분입니다. 즉, 장치에 관계없이 소스는 그대로 유지됩니다. RWD 사이트는 여러 유형의 디자인 요소로 구성되므로 구현하기가 더 복잡할 수 있습니다. 그러나 사이트 관리는 더 쉬워집니다. 예를 들어 온라인 상점에서 가격을 변경해야 하는 경우 하나의 관리자 패널에서 수행합니다. 그러나 수정된 가격은 모든 장치에서 올바르게 표시됩니다.
웹사이트 모바일 버전은 사실 별도의 사이트입니다. 모바일 장치용으로 특별히 제작되었습니다. 그리고 그렇게 최적화되었습니다. 그러나 이러한 웹 사이트 관리는 훨씬 더 복잡합니다. 하나가 아닌 두 개의 사이트를 변경해야 한다는 점을 명심하십시오. 추가 리소스가 필요합니다.
RWD와 모바일 사이트 개발의 차이점
일반적으로 반응형 사이트 개발은 일반 비적응형 사이트보다 비용이 많이 듭니다. 더 높은 가격은 개발의 더 큰 복잡성에서 비롯됩니다.
- 반응형 웹 디자인을 사용하려면 다양한 화면 크기에 대한 여러 레이아웃 옵션을 만들어야 합니다. 각 화면 버전에는 추가 엔지니어링이 필요합니다. 웹 개발자는 이러한 사이트를 만드는 데 더 많은 시간을 할애합니다. 기간과 개발 비용이 모두 증가합니다.
- 반응형 웹 디자인은 더 어렵습니다. 이를 구현하려면 더 많은 노력이 필요합니다. 여러 가지 방법이 있습니다. 가장 적합한 것을 선택하는 것은 개발자의 몫입니다.
- QA 볼륨도 증가합니다. 배포하기 전에 프로젝트를 철저히 테스트해야 합니다. 반응형 웹 사이트는 모든 화면(데스크톱, 스마트폰 및 태블릿)에서 별도의 테스트가 필요합니다.
반응형 앱 디자인 기법 및 템플릿
반응형 웹 디자인 기술은 빠르게 발전하고 있습니다. 그러나 많은 검증된 옵션이 잘 작동합니다.
대부분의 반응형 웹 페이지 레이아웃은 다음 다섯 가지 템플릿 범주 중 하나에 속합니다.
- 대부분 유체,
- 칼럼 드롭,
- 레이아웃 시프터
- 작은 조정,
- 오프 캔버스.
일부 페이지는 템플릿 조합(예: 열 드롭 및 오프 캔버스)을 사용할 수 있습니다. 이러한 템플릿은 반응형 페이지의 확실한 시작점입니다. 두 템플릿 모두 원래 Luke Wroblewski가 정의했습니다.
대부분 유동적
Mostly Fluid 템플릿은 고무 그리드로 구성됩니다. 대형 또는 중형 화면에서 동일하게 유지됩니다. 큰 화면에서는 여백이 조정됩니다.
유동 격자는 작은 화면에서 주요 콘텐츠를 재정렬합니다. 열은 다른 하나 아래에 쌓입니다. 이 템플릿의 주요 장점은 작은 화면과 큰 화면 사이에 하나의 중단점만 필요하다는 것입니다.
컬럼 드롭
Column Drop은 전체 화면 너비에 걸쳐 있는 여러 열이 있는 템플릿입니다. 단순히 열을 수직으로 하나씩 배치합니다. 창이 너무 작아서 모든 콘텐츠를 표시할 수 없는 경우 작동합니다.
시간이 지남에 따라 모든 열은 수직으로 배치되며 하나는 다른 하나 아래에 있습니다. 이 레이아웃 템플릿의 중단점 선택은 콘텐츠에 따라 다릅니다. 각 설계 옵션에 대해 별도로 결정해야 합니다.
레이아웃 시프터
Layout Shifter 템플릿은 다양한 화면 너비에 대해 여러 중단점을 제공하므로 가장 반응이 빠릅니다.
Layout Shifter의 주요 차이점은 콘텐츠가 지속적으로 재배치된다는 것입니다. 웹 사이트는 렌더링 트리를 다시 계산하지 않고 열을 서로 아래에 배치합니다. 주요 중단점 간의 상당한 차이로 인해 이 레이아웃을 유지하는 것이 더 어렵습니다. 전체 레이아웃뿐만 아니라 개별 요소도 변경해야 할 수 있습니다.
작은 조정
Tiny Tweaks 템플릿은 단순히 레이아웃을 약간만 변경합니다.
- 글꼴 크기를 조정하고,
- 이미지 크기를 조정하고
- 내용을 이동합니다.
단일 열 레이아웃(예: 텍스트가 많은 한 페이지 선형 웹 사이트 및 기사)에서 잘 작동합니다.
템플릿 이름에서 알 수 있듯이 이 샘플은 화면 크기를 조정할 때 약간 수정됩니다. 화면 너비가 넓어지면 글꼴 크기와 여백도 커집니다.
오프 캔버스
템플릿은 콘텐츠 항목을 수직으로 쌓는 대신 내비게이션이나 앱 메뉴 항목과 같이 거의 사용되지 않는 콘텐츠를 화면 밖에 배치합니다. 이 비트는 화면 크기가 허용하는 경우에만 표시됩니다. 작은 화면에서는 한 번의 클릭으로 해당 콘텐츠에 액세스할 수 있습니다.
결론
디자인은 빠르게 진화하고 고객의 요구에 적응하고 있습니다. 웹 애플리케이션을 지원하는 장치가 많을수록 더 많은 작업이 필요합니다. 더욱이, 다음과 같은 경우에는 MVP 개발. 모든 것이 올바르게 표시되는지 확인해야 합니다. 반응형 웹 디자인 개발자와 디자이너의 작업은 물론 사용자 경험과 편의성을 향상시킵니다. 이 기술을 구현하는 것은 쉽지 않습니다. 가장 좋은 방법은 이 작업을 전문 회사에 맡기는 것입니다. 우선 Bamboo Agile은 반응형 웹 디자인에 풍부한 경험을 가진 회사입니다. 그러나 인터넷에서 사용할 수 있는 다양한 리소스가 엄청나게 많기 때문에 반응형 웹 디자인이 있는 사이트의 독립적인 웹 사이트 개발을 선택할 수도 있습니다.