[Study] UI 개발 (2)

UI 개발2

• GUI 테스트 관점에서 참조할만한 자료
• 모바일 테스트

모바일 테스트 환경

브라우저별/버전별 상이

실무에서 퍼블리셔/UI개발자 가장 많이 체크하는 일 (50% 이상..?)

• 예시1 - 브라우저별로 다르게 나올 때
• 예시2 - 브라우저 버전별로 다르게 나올 때

In-App/External Browser

웹/앱 구현 환경 이해

• 웹뷰/인앱브라우저 환경 고려하기
• In-app browser, External browser

브라우저 성능 최적화

• CSS 성능 최적화
• 렌더링 성능 최적화

브라우저별 유용한 기능

브라우저 개발자 도구의 유용한 스타일 관련 기능

• 크롬 90 버전 추가 기능 - Flexbox 조정하기

Debugging CSS

윈도우 OS에서 Safari 브라우저 설치하기
ㄴ Safari 5.1.7 버전 (2012년 이후 버전x)

윈도우에서 iOS 사파리 디버깅 (Web Inspector)
ㄴ iTunes 설치, node runtime 환경에서만 가능

• 모바일 기기, 휴대폰에 직접 에뮬레이션 기능 다운로드
  1) 모바일 크롬, 삼성인터넷 : 크롬 카나리아
  2) 모바일 사파리 : 아이폰 디버깅 webkit proxy
  3) 크롬 반응형 웹 테스트 도구 모바일 시뮬레이터

점유율

국내 웹 브라우저 점유율 (2022/01)

• 데스크톱·모바일 합산 : 크롬 54.25%, 사파리 12.9%, 삼성인터넷 12.88%, 웨일 8.34%, 엣지 7.5%
• 모바일 : 삼성인터넷 26.18%, 사파리 23.1%, 웨일 10.82%, 엣지 9.98%

Global Browser Market Share Worldwide (2022/05)
Chrome 64.95%, Safari 19.01%, Edge 3.99%, Firefox 3.26%, Samsung Internet 2.85%, Opera 2.11%

Solutions

모바일 테스트 자동화툴

• mTworks
• Eggplant