반응형 웹 기획, 디자인, 개발

반응형 웹 디자인

반응형 웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다. 웹사이트를 PC용과 모바일용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있다. PC용 URL과 모바일용 URL이 동일하기 때문에 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있다. 또한 웹 페이지 내용을 수정할 경우, 하나의 페이지만 수정하면 PC와 모바일 등 다양한 디바이스에서 동일하게 반영된다. 반응형 웹의 핵심 기술은 가변 그리드(fluid grid), 유연한 이미지(flexible images), 미디어 쿼리(media query)이다. 반대말은 디바이스 별로 별도의 웹사이트를 제작하는 적응형 웹(adaptive web)이다.

반응형 웹

미디어 쿼리를 사용하여 화면의 크기를 확인하고 유연한 이미지와 그리드로 화면 크기의 변화에 따라 그에 맞게 화면에 표시 된다.

하나의 템플릿만을 사용해 다양한 사용자와 기기에 대응할 수 있어 개발이 간편하다는 장점을 가진다. 그러나, 사용자는 단 하나의 기기만으로 접속하지만 그 경우에도 모든 기기를 위한 CSS를 전부 다운로드 해야하니 데이터를 낭비하고 로딩시간을 늘리는 단점을 가진다.

적응형 웹

서버나 클라이언트에서 웹에 접근한 디바이스를 체크하여 그 다바이스에 최적화된 마크업을 호출한다. 적응형 웹의 특징으로는 기존의 사이트를 재구축할 필요가 없고 다양한 디바이스에 최적의 성능을 가져올 수 있다.

기존에 이미 데스크톱용 템플릿을 작성했따면 처음부터 재구축할 필요없이 다른 기기용 템플릿만 따로 만들면 된다. 또한 사용자의 기기에 맞는 템플릿 및 CSS만 다운로드하므로 데이터 낭비가 적고 로딩 속도가 빠르다는 장점이 있다.. 다만, 각 기기별로 별도의 템플릿을 작성해야하므로 개발이 복잡해진다는 단점이 있다.

기획

1. 우선순위 관점 정의
2. 가변 단계 정의
3. UI 구성 요소 정의

우선순위 관점 정의

Mobile-First

콘텐츠의 양이 적으며 방문하는 사용자가 대체적으로 모바일 위주의 다비이스를 사용할경우

PC-First

콘텐츠의 양이 많으며 방문하는 사용자가 PC위주의 디바이스를 사용할경우

가변 단계 정의

지원할 디바이스 사이즈의 범위를 정하고 그에 따른 가변단계를 정의 하는단계, 이러한 가변 단계를 정의할때는 형태 출시되어 있는 디바이스 뿐 아니라 향 후 출시 될 디바이스에 대해서도 고려할 필요가 있다.

이 단계에서는 반응형 경계치(Responsive Breakpoints)를 위주로 가변의 단계를 정의하면 된다.

가변 단계 정의 예시

UI 구성 요소 정의

• 이미지 사이즈 규정 : 확대/축소, 행/열 조정
• 폰트 사이즈 규정
• 그리드 규정
• 링크 규정
• 터치 행위 고려

파트별 역할

• ‘기획 > 디자인 > 개발’ 순서로 각 업무 수행
• 기획은 기획자, 디자이너, 개발자 모두가 참여 한다.