2. Hello!!
(현) 미래웹기술연구소 UX Evangelist Group
(현) K-Apps 표준화포럼 콘텐츠&단말분과
UI 프레임워크 자문위원
국내 최초 공공기관 반응형웹 사이트 구축 외 다수
(전) 인크루트 서비스 기획
[발표 이력]
웹데브모바일 외 다수
[수상이력]
2010 세계 IT 올림픽 WCIT 공공부문 수상
Home : http://youngah.com
E-Mail : youngah@w3labs.kr
Twitter : @youngah0812
3. 목차
1. 모바일웹 기획의 현주소와 N-Screen 이슈
2. 반응형 웹(Responsive Web) 개념 정의
3. 반응형 웹 우수 사례 분석
4. 실전에 필요한 반응형 웹 기획 Tip
5. 과거 Web Vs. Mobile
방대한 정보의 표현 가능
대용량 데이터 전송 가능
VS
표현할 수 있는 데이터의 한계
화면 사이즈의 제약사항 존재
단말기의 기능 속성에 따른 고려사항 많음
6. 현재 서비스 구축 사례
모회사가 abc 라는 서비스를 운영중인 경우 모바일 환경에 어떻게 대처?
www.abc.com
m.abc.com
t.abc.com
안드로이드 App. 인력과 시간의
Abc 서비스 중복낭비 불가피
아이폰 App.
아이패드 App.
Feature Phone (Wap)
Omnia Site
7. 웹을 앞서는 모바일 사용률
2011년 12월의 북미 사용자들의 모바일 앱과 웹의 하루 사용 시간 통계
15. 반응형 웹을 간단히 이해하는 방법
IF IF IF
최소 최소 최소
601 pixcel 321 pixcel 이상 1 pixcel
이상 이상
최대
최대 600 pixcel 최대
1024 pixcel 이하 일시 320 pixcel 이하
이하 일시
또는
그 이상 일시
Wide Layout Medium Layout Narrow Layout
17. 비교. 웹 사이트와 모바일 용 사이트 구축 시
• 웹사이트 “www.abc.com” 과 모바일 용“m.abc.com”을 보유한 사이트는?
www.abc.com
& m.abc.com
도메인 page CSS 도메인 page CSS
(결론)으로 중복 관리이지만 미래 Device 에 대응 방안 미비함
18. 반응형 웹 구축 시 비교 분석
• “www.abc.com”을 반응형 웹 UI로 구축한다면?
www.abc.com
도메인 page CSS 1 CSS 2 CSS 3
(결론)
CSS는 여러 벌 만들지만 비교분석 결과 효율적
향 후 출시 될 Screen Device에 유연한 대응 가능
19. 결론적으로
• 반응형 웹 UI 구축이 N-Screen UI 전략의 정답은 아니다.
• 하지만 향 후 출시 될 Screen Deivice에 별도의 투자 없이 대응 할 수 있다
• 현실과 상황에 따라 선택해야 한다.
33. 초기 기획 시, 순서 정의
• 1. 정보 설계
• 2. 가변 단계 정의
• 3. 가변 정의에 따른 레이아웃 정의
• 4. 레이아웃 속성의 정의
• 5. UI 구성 요소의 정의
34. 가변 단계의 정의
• 화면의 가변 정의를 2단계로 할 것인가? 3단계로 할 것인가?
• 구성 정보가 많은 서비스 일수록 가변 단계가 많으면 좋다.
• 가변단계는 출시된 모든 Device 뿐만 아니라 향 후 출시될 모든 Device에
최적화 할 수 있는 방안이어야 한다.
35. Layout 기획 순서
• 작은 화면부터 먼저 기획할 것인가?
• 큰 화면부터 먼저 기획할 것인가?
– 되도록이면 큰 화면부터 작은 화면 순서로 기획하는 것이 좋다.
– 이유 : 화면에 담는 콘텐츠가 비교적으로 적어 PC 기반의 UI에서 콘텐츠 부족
현상 초래
36. UI 요소 기획
• 기획의 요소 중, UI 요소는 가장 상세히 기획해야 한다.
– 이미지 사이즈 규정 : 확대/축소? 행,열 조정?
– 폰트 사이즈 규정 : 퍼센트?
– 링크 규정 : 텍스트 링크? 큐브 링크?
37. Touch에 대한 고려
• 어떤 화면 사이즈에도 터치를 고려해야 한다.
마우스 클릭 위주의 인터페이스는 범용성 하락
핑거 터치 위주의 인터페이스가 범용적