IT's Fun2017.05.04 12:13

모바일 마켓에 대한 시장 분위기를 나타내주는 가장 큰 변화는 모바일 퍼스트(Mobile First)에서 모바일 온니(Mobile Only)로의 변화입니다. 모바일도 중요하지만 데스크탑이 여전히 중요하다는 메세지(모바일 퍼스트)에서 데스크탑은 버려도 괜찮으니 모바일을 놓치지 말자(모바일 온니)로의 변화였기 때문입니다. 물론, 모바일 기기만 신경쓴다는 것이 합리적인지에 대해서는 갑론을박이 있겠지만 모바일을 통한 매출과 수익의 창출이 데스크탑에 신경쓰는 것에 대비하여 비용 효율적인 것은 부인하기 힘든게 사실입니다.


때문에 많은 기업들이 사례(Best Practice)와 경험을 토대로 모바일 환경에 최적화 하기 위한 개선 작업에 많은 리소스를 투입하고 있습니다. 그렇지만 엠닷으로 대표되는 사이트의 구성과 반응형 웹 사이트 구성 사이에서 갈등이 생기고, 반응형 웹 사이트 안에서도 "정말로 모바일을 위한 최적화가 되어 있는가?"로 다시 한번 여러가지 의견이 나오기도 합니다. 




구글이 제공하는 모바일 웹사이트 속도 테스트 도구는 사용자들이 인터넷으로 접근 가능한 웹 사이트에 대하여 얼마나 모바일에 최적화가 되어 있는지 살펴보고, 최적화 되어 있지 않은 부분이 있다면 어떤 부분들을 집중적으로 파고들어야 하는지에 대한 가이드를 제공해주는 역할을 해줍니다. 물론 상세한 리포트를 제공받기 위해서는 구글을 통한 컨설팅을 받아야 하지만 큰 아젠더 (예: 브라우저 캐시의 활용, 이미지의 최적화 등) 를 뽑아내는데는 무리가 없습니다.


한국의 대표적인 포털 사이트인 네이버(www.naver.com)를 이용해서 모바일 최적화가 얼마나 잘 되어 있는지 살펴보았습니다. 아래의 수치가 절대적인 것은 아니고 구글 모바일 웹사이트 속도 테스트 도구가 테스트하는 방식에도 영향을 받을 수 있기 때문에 어떤 항목들에 대하여 최적화를 하면 좋다고 가이드 하는지 살펴보는 정도로 활용하면 좋을 것 같습니다. 각 결과 페이지에 깨알같이 기술된 "상대적" 이라는 단어도 논란을 막기 위한 포석이라 생각되네요!



일단 모바일 친화성 점수는 100점 만점에 99점으로 아주 훌륭하다는 피드백입니다. 다만 모바일 속도와 데스크톱 속도 항목에서 저조한 점수를 받은 것이 다소 의외입니다. 네이버의 경우 모바일 단말에서 접근시 유저 에이전트(User-Agent)를 확인해 모바일 전용 페이지(m.naver.com)으로 리디렉트 하기 때문입니다. 이런 리디렉트 절차 까지도 점수 산정에 포함되는지는 확인하지 못했습니다.



상세한 항목을 살펴보면 일부 JS 및 CSS 로 인한 리소스 로딩 블러킹 현상이 있는 것으로 보입니다. 개발자 도구를 이용해 워터폴 차트를 살펴보면 확인해 볼 수 있는 부분으로 많은 웹 사이트에서도 발견되는 부분이긴 합니다. 이미지 최적화는 파일 포맷에 대한 것인지 혹은 유저 에이전트(=브라우저)에 따른 최적 파일 포맷(예: webp, jpeg2000 등) 미사용에 대한 부분인지 역시 불명확하긴 합니다. 상황에 따라서는 데스크탑용 이미지를 리사이즈 형태로 사용하는 것에 대해 지적하는 것일 가능성도 아주 낮지만 무시하면 안되겠습니다. 



데스크톱 속도의 경우도 비슷한 항목들이 빨간색으로 분류되었습니다. 귀차니즘이 없다면 워터폴 차트를 한번 보고 싶다는 욕망이 가득했지만 애써 마음을 누르며 늘어난 노란색 항목들을 살펴보았습니다. 모바일 속도 항곰에서는 압축(gzip), 자바스크립트 축소, HTML 축소에 대한 항목이 초록색이었는데 데스크탑 유저 에이전트에 대해서는 노란색으로 추가 수정할 사항이 있다는 권고가 나온 것이 관전 포인트 입니다. 유저 에이전트 혹은 뷰포트에 따라 어떤 형태로 텍스트, 바이너리 컨텐츠를 보여주고 제공할 것인지 잘 결정해야 하겠습니다.



마지막으로 국내 2인자를 벗어나지 못하고 있는 (그러나 제가 거주하고 있는 티스토리를 제공하는!) 다음의 메인 웹 사이트에 대한 성능 측정을 진행해 보았습니다. 페이지가 담고 있는 정보의 양에 따라 달라질 수 있는 부분이겠지만 모바일, 데스크탑 모두 네이버 메인 페이지보다 더 높은 (그러나 둘다 빤간색인...) 점수를 받았습니다. 비슷한 레인지의 점수라 유의미하진 않겠지만 나란히 빨간색으로 저조하다는 평가를 받은 것이 의외입니다.


여러분의 웹 사이트, 블로그도 구글 모바일 웹 사이트 속도 테스트 도구로 모바일 친화도, 성능 측정을 해보시기 바랍니다. 상황에 따라 달라질 수 있는 성능 지표이니 구글의 테스트 결과만으로 너무 속상해 하지 마시기 바랍니다!


구글 모바일 웹사이트 속도 테스트 도구로 성능 측정 해보기 [바로가기]



저작자 표시 비영리
신고
Posted by 노피디
IT's Fun2016.08.16 09:17

비즈니스는 감각이라는 이야기도 있습니다만 근래에는 데이터를 기반으로 한 비즈니스가 아니라면 시장에서 성공하기 쉽지 않은 것 같습니다. 그만큼 데이터를 쥐고 있는 사업자들이 유리한 시장이고 데이터를 기반으로 머신러닝(Machine Learning)이든 빅데이터 분석(Big Data Analysis)를 잘 해내는 기업이 두각을 나타내고 있습니다. 아카마이는 전세계 인터넷 트레픽의 15~30% 를 소화하는 만큼 인터넷에 접근하는 기기의 데이터가 방대할 수 밖에 없는데요, 공식 웹사이트에서 제공되고 있는 IO INTERNET VISUALIZATIONS 페이지를 통해서 시장에서 인기있는 브라우저를 살펴볼 수 있습니다.


모바일 기기의 사용이 많아지면서 브라우저의 시장 점유율에서 모바일과 데스크탑을 어떻게 분리해야 하는가가 고민이고 데스크탑 역시 와이파이나 브로드밴드망이 아닌 모바일 망(Cellular)을 이용하는 경우가 많아지고 있어 "이것이 정답이다" 라고 말하기가 참 쉽지 않습니다. 특히 모바일의 경우 사용자가 워낙 많이 때문에 데스크탑 사용자와 함께 그 수를 측정하는 것이 옳은 방법론인지도 판단하기가 어렵습니다. IO INTERNET VISUALIZATIONS 페이지에서는 이런 조건들을 옵션으로 선택하여 데이터를 추출해 볼 수 있으니 각자의 기준에 맞추어 데이터를 추출해 보시면 재미있을 것 같습니다!




7월 1일부터 8월 14일까지의 데이터를 가지고 브라우저의 시장 점유율을 뽑아봤습니다. 동종 브라우저를 합산하지 않고 별개로 표기하고 있어서 브라우저별 점유율을 보기에는 좀 좋지 않은 것 같습니다. 아마도 사용자들의 User-Agent 값을 가지고 문자열열과 버전을 추출해서 표기하기 때문으로 생각됩니다. 대신 이 View 에서는 각 브라우저들의 세부 버전별로 추이를 확인해볼 수 있는 장점이 또 있는 것 같습니다. 실제로 8월 초까지 30% 이상의 점유율을 기록하던 가장 윗쪽의 Chrome 51 버전은 새로운 Chrome 52 버전의 출시와 자동 업데이트 기능등의 여파로 자연스럽게 손바뀜을 했다는 것을 확인할 수 있습니다. 마이크로소프트의 엣지는 아직 시장에서 이렇다할 자리를 차지하고 있지는 못한것 같습니다. 


재미있는 것은 OTT/셋탑 기기/서비스나 게임 콘솔에서 유입되는 트레픽들입니다. Roku 라던가 엑스박스로 추정되는 Microsoft, 그리고 Netflix, PlayStation, Sony 까지 다양한 사용자 에이전트 값들이 추출되고 있으며 그 그들의 합산 수치도 무시하지 못할 수준이라는 느낌입니다. 물론 브라우저 코어가 무엇이고 자바스크립트 엔진이 무엇인지가 가장 중요한 팩터이고 동일한 동작을 제공하는데 핵심이기 때문에 개개의 브라우저를 대응할 필요는 그리 많지 않아 보입니다. 특히나 표준을 왠만하면 따라가는 것이 시장의 흐름이니 왠만해서는 큰 고민을 하지 않아도 될 것 같습니다.




아카마이의 해당 페이지 하단을 보면 데이터를 CSV 로 추출할 수 있는 링크가 제공되고 있습니다. 브라우저별로 모아서 보면 어떤 추이가 보일지 궁금해서 굳이 데이터를 다운로드해서 브라우저별로 모아서 차트를 만들어 봤습니다. 크롬 브라우저가 35% 전후를 차지하며 가장 인기있는 브라우저의 자리를 차지하고 있고 인터넷 익스플로러가 또 10% 정도의 점유율을 보이고 있습니다. 그 뒤를 파이어폭스, 엣지 브라우저, 사파리등이 뒤를 이어가고 있습니다. 이 차트의 함정은 Etc 에 포함되어 있는 각 브라우저들의 하위 버전이 합산되지 않았다는 점입니다. 아카마이 웹 사이트에서 제공되는 데이터가 상위 15개의 브라우저로 제한되어 있기 때문입니다 ^^;; 그렇다 하더라도 대략적인 시장의 분위기를 확인하는데는 부족함이 없어 보이네요!


아카마이 IO INTERNET VISUALIZATIONS 로 브라우저 시장 점유율 확인해보기 [바로가기]



저작자 표시 비영리
신고
Posted by 노피디
IT's Fun2016.04.04 08:30

한동안 뜨거운 전쟁이 펼쳐졌던 웹 브라우저(Web Browser)시장이 요즘은 꽤나 조용해진 것 같습니다. 마이크로소프트의 인터넷 익스플로러 중심의 시장이 무너진 이래 크롬(Chrome), 파이어폭스(FireFox), 사파리(Safari) 등의 브라우저등이 각자의 지지층을 중심으로 일정한 시장 지분을 유지하는 트렌드와 함께 다양한 브라우저를 동시에 사용하는 사용자들이 많아진 것이 눈에 띄는 요즈음입니다. 각 브라우저마다 사용하는 이유나 목적이 있겠지만 애플의 사파리(Safari)의 경우 개인적으로는 HLS 에 대한 직접 재생을 이유로 많이 사용하고 있습니다. 


크롬이나 파이어폭스의 경우 새로운 프리뷰나 별도의 개발자 버전의 브라우저를 공개하여 새로운 기능들을 미리 사용해 볼 수 있는 기회를 주고 있기 때문에 서로 다른 셋업을 해둔 상태에서 동일한 엔진 및 렌더러 기반의 브라우저를 어느정도 분리하여 사용할 수 있었습니다. 이번에 공개된 애플의 사파리 테크놀로지 프리뷰 버전 역시 같은 맥락에서 새로운 기능들과 향후 사파리 메인 버전에 탑재될 기능들을 이용해 볼 수 있는 버전이라 생각하시면 이해가 쉬울 것 같습니다.




사파리 테크놀로지 프리뷰는 OS X 10.11.4 이상 버전의 엘 캐피탄 운영체제 환경에서만 동작되기 때문에 꼭 이 버전의 브라우저를 이용해야 하는 경우라면 운영체제의 버전을 먼저 확인하고 설치를 진행하셔야 합니다. 애플의 개발자 웹 사이트의 사파리 섹션에서 새로운 버전을 확인해 볼 수 있으며 dmg 파일을 다운로드 받아 직접 설치할 수 있습니다. 이후 버전 부터는 애플 맥 앱스토어를 통해서 지속적으로 버전 업데이트를 제공할 것이라고 하는 멘트도 눈에 띕니다.


릴리즈 노트에서 몇 가지 주목할만한 변화들을 찾아볼 수 있었는데요, ECMAScript 6 버전의 지원, 새로운 자바스크립트 엔진인 B3 의 탑재, 향상된 개발자 도구의 제공(메모리 관련 써머리, 자바스크립트 할당 타임라인 등)과 같은 것들이 테크놀로지 프리뷰에서 제공되는 기능들입니다. 그 외에도 현재의 사파리 메인 버전이 가지고 있는 버그들에 대한 픽스가 되어 있다고 합니다. 


사파리 테크놀로지 프리뷰 다운로드 받으러가기 [바로가기]




저작자 표시 비영리
신고
Posted by 노피디

티스토리 툴바