반응형 웹 디자인
반응형 웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다. 웹사이트를 PC용과 모바일용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있다. PC용 URL과 모바일용 URL이 동일하기 때문에 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있다. 또한 웹 페이지 내용을 수정할 경우, 하나의 페이지만 수정하면 PC와 모바일 등 다양한 디바이스에서 동일하게 반영된다. 반응형 웹의 핵심 기술은 가변 그리드(fluid grid), 유연한 이미지(flexible images), 미디어 쿼리(media query)이다. 반대말은 디바이스 별로 별도의 웹사이트를 제작하는 적응형 웹(adaptive web)이다.
반응형 웹
미디어 쿼리를 사용하여 화면의 크기를 확인하고 유연한 이미지와 그리드로 화면 크기의 변화에 따라 그에 맞게 화면에 표시 된다.
하나의 템플릿만을 사용해 다양한 사용자와 기기에 대응할 수 있어 개발이 간편하다는 장점을 가진다. 그러나, 사용자는 단 하나의 기기만으로 접속하지만 그 경우에도 모든 기기를 위한 CSS를 전부 다운로드 해야하니 데이터를 낭비하고 로딩시간을 늘리는 단점을 가진다.
적응형 웹
서버나 클라이언트에서 웹에 접근한 디바이스를 체크하여 그 다바이스에 최적화된 마크업을 호출한다. 적응형 웹의 특징으로는 기존의 사이트를 재구축할 필요가 없고 다양한 디바이스에 최적의 성능을 가져올 수 있다.
기존에 이미 데스크톱용 템플릿을 작성했따면 처음부터 재구축할 필요없이 다른 기기용 템플릿만 따로 만들면 된다. 또한 사용자의 기기에 맞는 템플릿 및 CSS만 다운로드하므로 데이터 낭비가 적고 로딩 속도가 빠르다는 장점이 있다.. 다만, 각 기기별로 별도의 템플릿을 작성해야하므로 개발이 복잡해진다는 단점이 있다.
기획
- 우선순위 관점 정의
- 가변 단계 정의
- UI 구성 요소 정의
우선순위 관점 정의
Mobile-First
콘텐츠의 양이 적으며 방문하는 사용자가 대체적으로 모바일 위주의 다비이스를 사용할경우
PC-First
콘텐츠의 양이 많으며 방문하는 사용자가 PC위주의 디바이스를 사용할경우
가변 단계 정의
지원할 디바이스 사이즈의 범위를 정하고 그에 따른 가변단계를 정의 하는단계, 이러한 가변 단계를 정의할때는 형태 출시되어 있는 디바이스 뿐 아니라 향 후 출시 될 디바이스에 대해서도 고려할 필요가 있다.
이 단계에서는 반응형 경계치(Responsive Breakpoints)를 위주로 가변의 단계를 정의하면 된다.
가변 단계 정의 예시
Nike | Bootstrap |
---|---|
640px 이하 : 스마트폰 | 480px 이하 : 스마트폰 |
768px ~ 960px : 테블릿 | 481px ~ 767px : 스마트폰 부터 테블릿 |
1024px ~ 1420px : 기본 | 768px ~ 979px : 테블릿 세로 |
1920px 이상 : 큰화면 | 980px ~ 1199px : 기본 |
1200px 이상 : 큰 화면 |
UI 구성 요소 정의
- 이미지 사이즈 규정 : 확대/축소, 행/열 조정
- 폰트 사이즈 규정
- 그리드 규정
- 링크 규정
- 터치 행위 고려
파트별 역할
기획 | 디자인 | 개발 |
---|---|---|
가변 단계 정의 | 반응형 Font 사이즈 정의 | 반응형 스타일 정의 |
UI 구성 요소 정의 | 그리드 정의 | UI 컴포넌트 개발 |
지원 해상도 정의 | 아이콘 정의 | 반응형 테스트 환경 구축 |
해상도별 타겟 디바이스 정의 | 프리뷰 제공 ( 미리보기 ) |
- ‘기획 > 디자인 > 개발’ 순서로 각 업무 수행
- 기획은 기획자, 디자이너, 개발자 모두가 참여 한다.