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 Fun2017.01.24 09:12

요즘 전세계에서 가장 핫한 나라는 미국인 것 같습니다. 지난해 내내 많은 논란이 있었지면 결국 트럼프(Trump)가 미국의 45대 대통령으로 취임하면서 새로운 그리고 어쩌면 가장 저돌적인 4년을 맞이하게 되었기 때문입니다. 우리나라에서도 이명박 전 대통령의 퇴임 카운트다운 시계를 걸어둔 웹 사이트들이 한참 유행을 했었는데요, 미국에서도 벌써부터 4년 카운트다운을 시작하는 등 신임 대통령과 관련하여 여러가지 말들이 많이 나오는 듯 합니다.


이러한 끊이지 않는 논란 때문일까요? 아니면 근래의 인터넷 스트리밍 기술의 급격한 발달 때문일까요? 미국 45대 대통령 트럼프의 취임식을 주요 방송사들과 함께 인터넷 스트리밍으로 제공했던 아카마이가 발표한 자료에 따르면 트럼프의 취임식 방송의 피크 트레픽은 8.7Tbps 로 인터넷 역사상 가장 큰 규모의 대역폭(Bandwidth)를 기록했습니다. 대역폭은 쉽게 이해하면 고속도로의 차선이라고 생각할 수 있습니다. 작년 하반기에 큰 논란이 되었던 미라이 봇넷을 이용한 DDoS 공격이 600Gbps (=0.6Tbps) 대였던 것과 비교해 보시면 규모가 짐작되실 것 같습니다.


초록색 선이 트럼프 취임식 방송 트레픽입니다 (출처 : 아카마이 공식 블로그)


인터넷 트레픽을 모니터링 하는 방법을 여러가지가 있습니다만 가장 널리 사용되는 것은 트렌드(Trend)를 비교하는 방법입니다. 위의 이미지는 취임식 당일(현지시간 1월 20일)과 전일, 그리고 전전일의 트레픽 트렌드를 비교한 자료입니다. 방송이 본격적으로 시작되면서 초록색 그래프가 가파르게 상승하는 것을 볼 수 있습니다. 12시를 전후하여 트레픽은 최고치를 기록했습니다. 전임 대통령이었던 버락 오바마의 취임식때도 이렇게 대단한 트레픽은 관찰되지 않았다고 하는데요, 그 당시와 지금은 인터넷 스트리밍 환경이 급격히 변화했고 기술의 발전도 많이 있었기 때문에 단순히 비교하기는 어려울 것 같습니다. 


출처 : 아카마이 공식 블로그


논란이 되고 있는 버락 오바마 대통령 취임식 인파(좌)와 트럼프 대통령 취임식 인파(우)의 극단적인 사진도 인터넷 스트리밍 트레픽의 폭증과 어느정도 연관관계가 있지 않을까 싶습니다. 트럼프라는 새로운 대통령에 대한 사람들의 나뉘어지는 평가와 사람들이 뉴스와 미디어를 소비하는 패턴의 변화가 오묘하게 결합되어 만든 기록적인 트레픽일까요? 대중들만이 그 답을 알고 있을 것 같습니다 ^^ 이런 인터넷 미디어 트레픽 분석에 빠지지 않는 것이 "다른 산업의 인터넷 트레픽에는 어떤 영향이 있었는가?" 하는 부분입니다. 


취임식 방송을 전후한 미국의 e-commerce 분야 트레픽 추이 (출처 : 아카마이 공식 블로그)


아카마이에서는 취임식 방송이 진행되는 동안 인터넷 쇼핑(e-commerce) 산업의 트레픽 변화도 함께 관찰했습니다.(미국내 트레픽 한정) 사람들이 특정한 이벤트로 몰리는 동안 다른 분야에 대한 관심이 줄어드는 것이 일반적인 패턴이기 때문에 이를 통해 사람들이 취임식 행사에 얼마나 많은 관심을 가지고 있는지를 볼 수 있는 간접 지표이기도 합니다. 그런데 재미있게도 취임식 방송을 전후하여 쇼핑 트레픽은 상승세를 보였다고 합니다. 여러가지 이유가 있을 수 있어 속단하긴 힘듭니다만, 지난 오바마 대통령의 취임당시 인터넷 쇼핑 트레픽이 일시적으로 감소했던 것과 묘한 대비를 이루는 듯 합니다.



여러분들의 생각은 어떠신가요? 먼 나라의 이야기이지만 우리나라와 오랜 뗄레야 뗄 수 없는 관계를 가지고 있는 미국의 새로운 대통령과 미국 국민들의 그에 대한 반응들. 여러가지 생각들이 머릿속을 스치우는 요즈음입니다. 그래도 결론은 버킹검이라 하지 않았습니까? 대세는 인터넷 스트리밍이고 모든 기록을 새로운 이벤트가 생길때마다 갱신되고 있습니다. 


아카마이 공식 블로그의 트럼프 취임식 트레픽 리포트 살펴보기 [바로가기]



저작자 표시 비영리
신고
Posted by 노피디
IT's Fun/Slack2016.10.19 06:30

이제 슬랙에 협업 공간을 만들어봅시다. 차근차근 따라 하면 어렵지 않습니다. 우선 슬랙 홈페이지(https://slack.com/)에 접속해봅시다.

슬랙 홈페이지 첫 화면에서 이메일 주소를 적고 [Create a new team] 링크를 클릭합니다. 회사 구성원만 사용하는 팀으로 만들고 싶다면 회사에서 제공받은 이메일 주소를 입력하는 것이 좋겠지요? 개인 목적으로 만드는 팀이라면 개인 이메일 주소를 써도 괜찮습니다. 

 

[그림 1] 슬랙 홈페이지 첫 화면 [그림 1] 슬랙 홈페이지 첫 화면


 

 

이메일을 입력하면 기계적인 가입을 막기 위하여 여섯 자리 인증 코드를 포함한 메일을 입력한 메일 계정으로 발송합니다. 도착한 메일을 확인하여 인증 절차를 마칩니다. 

 

[그림 2] 이메일 주소 인증[그림 2] 이메일 주소 인증


 

 

슬랙을 이용하는 데 이름은 크게 중요하지 않습니다만 사용자를 쉽게 식별할 수 있도록 이름을 입력하겠습니다. 유저네임(Username)은 일종의 닉네임으로 팀 공간 내에서 사용합니다. 원하는 이름으로 자유롭게 입력해보세요.

 

[그림 3] 유저네임 입력[그림 3] 유저네임 입력



 

 

유저네임까지 입력하면 이제 패스워드를 지정할 차례입니다. 여기서 지정된 패스워드는 해당 팀을 접속할 때만 사용하는 패스워드입니다. 하나의 이메일로 여러 팀에 참여하고 있다면 각 팀별로 패스워드를 다르게 설정할 수 있다는 의미입니다. 

 

[그림 4] 비밀번호 입력[그림 4] 비밀번호 입력



 

 

이제 팀 도메인을 설정하는 단계입니다. 팀 도메인은 일반적인 도메인 호스트명의 제약조건을 따르며 누군가 선점한 도메인이라면 사용할 수 없습니다. 도메인 이름은 나중에 변경할 수도 있으니 너무 심각하게 고민하지 않아도 됩니다. 

 


 

 

팀 도메인까지 입력하면 사람들에게 초대 메일을 보낼 수 있습니다. 당장 누군가를 초대할 것이 아니라면 나중에 보낼 수도 있으니 이 단계를 건너뛰어도 괜찮습니다.

 

[그림 6] 팀원 초대[그림 6] 팀원 초대


 

 

여기까지 무사히 진행을 했다면 생성된 팀 도메인으로 이동하면서 슬랙 협업 공간을 만나게 됩니다. 

 

 

[그림 7] 슬랙에 오신 것을 환영합니다![그림 7] 슬랙에 오신 것을 환영합니다!



 

 슬랙은 기존의 다른 서비스와는 조금 다릅니다. 단일 계정이 아니라 복수의 이메일 계정을 활용할 수 있고, 한 이메일 계정으로 여러 팀에 참여할 수 있습니다. 슬랙 클라이언트는 이러한 n:n 구조의 이메일 - 팀의 관계를 하나의 화면에 등록하고 관리할 수 있으며 쉽게 콘텍스트(Context)를 전환하며 사용할 수 있도록 도와줍니다. 나중에 조금 더 자세히 설명을 하겠지만 팀 내에서도 채널을 통해 더 세부적으로 사용자들의 정보 공유 권한을 조절할 수 있습니다. 

 

기기별 애플리케이션을 설치해보고 모바일과 데스크탑 클라이언트가 어떤 차이가 있고 원활한 팀 활동을 위해 어떤 형태로 이용할 것인지도 한번 고민해 보시기 바랍니다. 그럼 다음 화에서는 슬랙의 주요 기능인 메시지를 알아봅시다.


슬랙으로 협업하기 시리즈는 국내 최대 출판 네트워크인 "한빛출판네트워크" 에도 같이 연재되고 있습니다.

조금 더 빨리 컨텐츠 시리즈를 만나보시려면, 한빛출판네트워크 페이지를 확인해 주세요 [바로가기]



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

티스토리 툴바