Info B조 반응형 웹 디자인 통해서 모바일 웹 적용
하나의 소스로 제작된 컨텐츠가 데스크탑에만 국한되지 않고 타블렛 PC, 모바일 폰 등 다양한 크기의 디바이스 환경에 맞추어 해상도나 화면이 동적으로 변환되는 기법
- 유동적인 그리드 레이아웃 구현
- 기존 기술만으로 화면 사이즈에 대응하도록 디자인 설계
- 화면의 복잡도가 낮고 헤더/콘텐트/풋터 영역 구분이 명확할 경우 적용 유리
- 설계방법에 따라 별도의 전용 코드(css/js) 불필요
- 사이트 개발적용 용이
- 가변적인 폭과 높이를 이용한 미디어(이미지/동영상) 임베이딩
- 미디어 이용이 많을 경우 적용
- 미디어 영역과 메뉴 및 컨텐츠 영역의 구분에 따라 별도 코드 필요
- 전반적으로 1번과 혼용해서 사용
- 미디어쿼리 적용(신기술, CSS3를 지원하지 않는 브라우저-IE8- 사용불가)
- 모바일 서비스에 보다 특화하고자 할 경우 적용
- 별도 코드 개발/유지보수 필요
- 브라우저 호환성 유지 어려움
- 성능/하위호환성 우선 고려
- 현재 구축하고자하는 서비스 특성을 감안하면 1번과 2번 항목만으로 반응형 웹을 적용하는 것이 유리(접근유형:데스크탑/태블릿)
- 개발자 == 빠르고 단순함 추구
- 다양한 시스템환경에서 접근
- HTML 템플릿/CSS/JS 공통사용
- HTML5/CSS3 적용하지 않음
- 특정 페이지(Home화면) 모바일 접속시 모바일 웹 전용화면으로 적용 가능(접근유형:미니 태블릿/스마트폰)
- HTML 템플릿은 공통, CSS/JS는 모바일 전용
- 미디어쿼리 적용하지 않음(모든 모바일 브라우저가 미디어쿼리를 지원하는 것은 아님)
- SimpleStateManager 적용(Managing Responsive Design Breakpoints in Javascript,Coding for Responsive State Changes with SimpleStateManager)
- 정보 설계
- 구성 정보의 다양성에 따라 화면 가변단계가 늘어나는 것이 유리
- 타겟별 N-Screen 분류(가변 단계 정의)
- 화면 가변 정의를 2단계로 할 것인가? 3단계로 할 것인가?
- 향후 출시될 디바이스 고려
- N-Screen별 레이아웃 정의
- 내비게이션 처리
- 해상도별 이미지 구현
- N-Screen별 UI 구성요소 정의
- 이미지 사이즈
- 폰트 사이즈
- 링크(텍스트? 이미지?)
- 터치 인터페이스
- 템플릿 화면(Skin/Css) 개발
- 큰 화면 > 작은 화면 순으로 개발하는 것이 유리(화면에 따른 콘텐츠 다양성 충족)
- MockUp 디자인 적용
- 타겟별 테스트