모바일 웹 앱을 위한 최고의 UX 패턴
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
상위 1,000개 사이트의 모바일 친화성을 분석한 결과 53%는 여전히 데스크톱 전용 환경만 제공하고, 사이트의 82%는 휴대기기에서 상호작용 문제가 발생하며, 사이트의 64%는 사용자가 읽을 수 없는 텍스트를 사용한다는 문제를 발견했습니다.
빠른 조회를 통한 획기적인 모바일 웹 환경 개선
- 항상 표시 영역 정의
- 표시 영역 내에 콘텐츠 맞추기
- 읽기 쉬운 수준으로 글꼴 크기 유지
- 웹 글꼴 사용 제한
- 탭 타겟의 크기와 간격을 적절하게 조정합니다.
- 입력 요소에 시맨틱 유형 사용
PageSpeed Insights에서 내 사이트의 모바일 친화성 정도를 판단하는 UX 분석을 시작했습니다. 이를 통해 사이트 모바일 UX의 일반적인 문제를 발견하는 데 도움이 될 것입니다. 직접 사용해 보세요.
Slides: 모바일 웹 앱을 위한 최고의 UX 패턴
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2025-07-25(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-07-25(UTC)"],[],["Mobile site analysis reveals that over half (53%) are desktop-only, 82% have interactivity issues, and 64% have readability problems. Key improvements include defining a viewport, fitting content within it, maintaining readable font sizes, limiting web fonts, spacing tap targets, and using semantic input types. PageSpeed Insights offers UX analysis to identify these issues. Additional resources for UX patterns can also be found in the slides.\n"]]