다음 주에 있을 MIX10이나 오는 5월에 런던에서 열리는 Future of Web Design 컨퍼런스 등에서 느낄 수 있듯이, 웹표준에 이은 HTML5 시대의 도래와 모바일 환경 변화가 웹디자인의 새로운 부흥을 이끌고 있다는 생각이 듭니다.
어제는 월간웹과 소셜미디어 포럼의 주최로 열린 HTML5와 모바일에 대한 토론회가 있기도 했죠. 아래는 녹화된 영상이에요.(00:08:30경 부터 토론이 시작합니다.)
PC가 8억 5천만대인 반면 핸드폰은 27억만대가 사용되고 있다고 하는데요.(Mobile Web Design 참고) PC의 Personal이라는 말이 무색할 정도로, 핸드폰은 한 곳에서 여럿이서 쓰기도 하는 PC 대신에 사용자에게 더 개인적인 컴퓨터가 될 것 같네요.
지난 주와 오늘 있었던, 모바일 UX 관련 세미나에서 사용했던 자료들을 공유합니다. 오늘 발표했던 내용으로 정리해 봅니다.
마크업 테스트 링크 - 모바일 브라우저로 열어보면 쉽게 마크업 렌더링 결과를 확인할 수 있어요.
모바일 웹트렌드 2009 원문 (한글) 1년전 내용이지만 아직도 유효하네요.
다양한 모바일 웹 스크린샷 웹사이트
웹 디자인 스크린샷과 평점들을 볼 수 있지만, 참고링크도 볼만해요.
모바일 웹 디자인 : 팁과 모범 사례 원문
- 하드웨어와 소프트웨어의 기능에 친숙해지기
- 간단하게 하기
- 유효한 마크업 사용하기
- 원래 사이트를 방문하는 옵션 제공하기
- 별도의 모바일 테마를 사용하기
- 한 방향으로만 스크롤하기
- 팝업이나 새창 쓰지 않기
- 이미지 사용 최소화 하기
- 네비게이션 최적화하기
- 플래시나 자바스크립트에 의존하지 않기
- 가능한한 원래 사이트의 많은 컨텐츠를 포함시키기
- 리다이렉트 링크가 잘 동작하는지 확인하기
모바일 웹을 위한 7가지 사용성 가이드 원문
- 사용자 니즈에 빨리 맞추기
- 네비게이션을 매 페이지마다 반복하지 않기
- 선택된 항목을 분명히 구분해주기
- 사용자 입력을 가능한한 간단하게 하기
- 꼭 필요한 정보들만 보여주기
- 기본적인 브라우징 제어기능을 제공하기
- 모바일 환경에 친숙한 페이지 레이아웃으로 디자인하기
서로 다른 스크린 사이즈를 갖은 디바이스에 대응하는 디자인 전략 원문
- 디바이스 그룹을 정의한다.
- 기본이 되는 참고 디자인을 만든다.
- 컨텐츠와 디자인 적용을 위한 규칙을 정의한다.
- 웹표준과 유연한 레이아웃을 적용한다.
모바일화를 위한 10가지 가이드 링크
- 하나의 웹을 위한 설계
- 웹 표준 준수
- 유해 요소 제거
- 장비 제한 주의
- 웹 네비게이션 최적화
- 그래픽과 색상 확인
- 가볍고 간결한 사이트
- 네트워크 자원 절약
- 사용자 입력 가이드
- 모바일 유저 배려
