본문으로 건너뛰기
黯羽轻扬매일 조금씩

모바일 페이지 디자인의 10가지 상식

무료2015-03-31#HTML#移动端页面设计

모바일 기기는 성능이 상대적으로 낮고, 사용자들은 대부분 한 번에 하나의 페이지만 탐색합니다(데스크톱 브라우저 사용자가 여러 탭을 사용하는 것과는 다릅니다). 페이지 성능 때문에 사용자가 인내심을 잃기 쉬우므로, 모바일 페이지 디자인에서는 더 많은 요소를 고려해야 합니다.

##1. 터치 제스처는 어떻게 선택해야 할까?##

선택을 표시하기 위해 스와이프 제스처를 사용하지 마세요. 네이티브 앱에서는 이것이 삭제를 의미하기 때문입니다.

운영체제의 기본 제스처를 변경하지 마세요. 예를 들어 길게 누르기는 컨텍스트 메뉴 호출, 핀치 줌은 축소, 더블 클릭은 확대 등을 의미합니다. 동일한 기본 기능을 다시 구현할 수 있는 경우가 아니라면 말이죠.

##2. 인터페이스를 어떻게 '더 빠르게' 보이게 할까?##

사용자에게 즉각적인 피드백을 제공하세요. 예를 들어 프로그레스 바, 전환 애니메이션 등이 있습니다. 또한 이미지 페이드인 효과도 속도가 빨라진 느낌을 줄 수 있습니다(실제로는 더 느려지는 것이지만요).

##3. 미디어 쿼리(media query)##

IE8 이하는 미디어 쿼리를 지원하지 않습니다. 모바일 환경은 최소 IE10 이상이므로 크게 문제되지 않습니다.

일반적인 임계값: 480px 이하 ~ 모바일 브라우저, 800px 이상 ~ 데스크톱 브라우저, 480px ~ 800px ~ 태블릿 브라우저.

##4. 적절한 선택자(selector) 사용##

자손 선택자(descendant selector) 사용을 피하세요. 대신 class를 사용할 수 있습니다. 브라우저는 CSS 선택자를 오른쪽에서 왼쪽으로 해석하기 때문에 자손 선택자는 비용이 많이 듭니다.

##5. em을 쓸까, px를 쓸까?##

둘 다 가능합니다. em은 2005년경 유행했는데, 당시 브라우저에 글꼴 크기 변경 기능이 생기면서 em 단위를 쓰면 글꼴 변화에 적응할 수 있었기 때문입니다. 이후 IE7에서 기본 확대 방식이 페이지의 모든 요소를 확대하는 방식으로 바뀌면서 em은 잊혔고, 현재는 px가 여전히 가장 직관적이고 확실한 단위입니다. em을 쓰든 px를 쓰든 상관없으며, 어느 쪽도 나쁜 선택은 아닙니다.

##6. viewport의 용도는?##

viewport는 시창(Window) 크기를 제한하는 데 사용됩니다. 시창이란 브라우저가 페이지에 제공하는 컨테이너(제목 표시줄, 도구 모음, 탭 표시줄, 상태 표시줄 등 제외)를 말하며, viewport에는 널리 지원되는 다음과 같은 속성들이 있습니다.

width
viewport의 너비를 설정합니다. 기본값은 980이며 허용 범위는 200-10000입니다.
height
viewport의 높이를 설정합니다. 기본값은 너비와 장비의 가로세로 비율을 통해 계산되며 허용 범위는 223-10000입니다.
initial-scale
viewport의 초기 배율을 설정합니다. 기본값은 전체 페이지가 가시 영역 안에 들어오도록 계산되며, 범위는 minimum-scale과 maximum-scale 속성에 의해 결정됩니다.
maximum-scale
viewport의 최대 배율을 설정합니다. 기본값은 5.0이며 허용 범위는 0-10.0입니다.
user-scaleable（*뒤쪽 단어 철자에 주의*）
사용자가 뷰를 확대/축소할 수 있는지 여부를 결정하며, 텍스트 입력 시 스크롤되는 것을 방지할 수도 있습니다.

다음과 같이 viewport 속성을 사용할 수 있습니다.

<meta name="viewport" content="width=device-width">

기기 너비에 자동 맞춤되며, 상단 헤더의 너비를 100%로 설정해야 하는 경우처럼 퍼센트 레이아웃에서 자주 사용됩니다.

##7. 페이지 로딩이 왜 느릴까?##

  1. HTTP 연결 수 과다 (또는 거대한 쿠키)

  2. 전체 바이트 수가 너무 큼

  3. 대기 중 렌더링 차단 (외부 CSS 파일 및 로딩 과정에서 실행되는 JS 스크립트)

  4. 지연 시간 (3G 네트워크는 약 500ms의 지연 시간이 발생함)

  5. 낮은 캐싱 능력

##8. 애니메이션이 왜 끊기는 느낌이 들까?##

setTimeout 애니메이션 사용을 가급적 피하세요. 대신 transition을 사용해야 합니다. CSS 애니메이션은 별도의 스레드(JS 스레드가 아닌)에서 실행되기 때문입니다.

##9. fixed 레이아웃이 왜 제대로 작동하지 않을까?##

모바일 환경의 fixed 레이아웃은 width=device-width 및 user-scaleable=no 뷰포트 메타 정보를 반드시 추가해야 합니다. 예:

<head>
<meta name="viewport" content="width=device-width, user-scaleable=no"
</head>

사용자가 페이지를 확대/축소하여 레이아웃에 영향을 주는 것을 방지합니다.

##10. 페이지 성능 측정 도구는 무엇이 있을까?##

  • YSlow: 야후(Yahoo!)의 도구로 페이지 점수를 매기고 각 지표의 등급과 최적화 제안을 제공합니다.
  • PageSpeed: 위의 기능 외에도 모바일 최적화를 지원합니다.

위의 두 도구 모두 Firefox와 Chrome 확장 프로그램이 있습니다.

###참고 자료###

  • 《Building Touch Interfaces with HTML5》(《HTML5 터치 인터페이스 디자인과 개발》)

댓글

아직 댓글이 없습니다

댓글 작성