IT's Fun2014.04.14 06:40
스마트 폰, 테블릿 등 우리가 늘 지니고 다니는 휴대용 기기들의 중심에는 어플리케이션이 있습니다. 시장을 바꾸기 시작한 애플이 처음 내놓은 어플리케이션 마켓의 이름이 앱 스토어(App Store) 였던 까닭 때문인지 스마트 기기에서 사용되는 어플리케이션을 우리는 앱(App)이라고 칭하고 있습니다. 앱과 대비하여 전통적인 데스크탑에서부터 인터넷의 중심을 차지하고 있는 서비스는 다름아닌 웹(Web)이라는 것은 너무나 잘 알려진 사실입니다.

초창기 휴대용 기기들이 액세스 할 수 있는 인터넷은 왑(Wap)을 비롯하여 웹을 근간으로 한 상당히 제한적인 형태를 가지고 있었습니다. 네트워크의 느린 속도와 최적화 되지 않은 개발로 인해 사용자들은 쓰기 불편한 왑 페이지와 웹 페이지를 굳이 휴대용 기기에서 엑세스 하려고 하지 않았습니다. 때문에 사전에 많은 부분을 단말에 프리로딩(Preloading)하여 사용자 입장에서 느린 속도를 덜 체감하게 해주는 방식이 오히려 좋은 반응을 얻기도 했습니다.

LTE 시대가 열렸어도 앱의 입지는 더 커져만 가고 있다 (출처 : flurry, http://goo.gl/UPf7K9)

 
이같은 예전의 경험은 스마트 폰의 시대가 열리고 2G, 3G 를 넘어서 4G LTE 의 시대가 되면서 바뀔 것으로 생각한 사람들이 많았습니다. HTML5 를 위시한 새로운 표준의 등장과 브라우저 기술의 발달, 기기의 성능 개선으로 웹이 모바일 시장에서도 패권을 쟁취할 수 있을 것이라 생각하는 사람들을 쉽게 볼 수 있었습니다. 그런데 최근 Flurry 가 발표한 자료에 따르면 (북미 시장에 한정한 자료이긴 하나 글로벌 트랜드는 크게 다르지 않을 겁니다) 스마트 기기에서 앱을 사용하는 시간이 웹을 사용하는 시간보다 더 길고 매년 그 격차는 커지고 있다고 합니다.

최근 우리가 사용하고 있는 앱 들은 대부분 인터넷과 연결되어 어디선가 정보를 받아오고 그 정보를 가공하여 사용자 단말에 보여주는 경우가 대부분입니다. 앱은 사용자들이 보다 쉽게 사용하고 빠르게 이용할 수 있도록 하는데에 포커스가 맞추어져 있고 주요한 정적 리소스를 미리 단말에 가지고 있는 형태이기 때문에 최소한의 데이터만 인터넷을 통해 받아오는 구조로 만들어져 있습니다. 당연히 사용자 입장에서는 구동 속도가 빠르고 다양한 기능을 이용할 수 있으면서도 네트워크를 통해 여러가지 정보를 이용할 수 있는 앱이 웹 보다 더 손에 익숙할 수 밖에 없는 상황인 것입니다.

출처 : flurry, http://goo.gl/UPf7K9

 
웹과 앱을 사용하는 비율을 사용하는 어플리케이션, 서비스의 성격별로 나누어 보면 게임이 역시 가장 많은 32% 의 비중으로 1위를 차지하고 있고 인스타그램 등 인수한 서비스를 포함하여 페이스북이 17% 로 그 이름값을 해내고 있습니다. 페이스북은 왓츠앱(What's App)의 인수로 소셜 메세징이 차지하고 있는 9.5% 에서 일정 부분을 더 확보할 수 있기 때문에 20% 를 넘나드는 수치가 될 것으로 예상됩니다 

반면 브라우저를 기반으로 한 웹 진영은 그 숫자가 상당히 초라합니다. 안드로이드 단말이 포함 되었음에도 불구하고 애플 사파리 브라우저가 7%, 구글 크롬 등의 브라우저가 5% 를 차지하는데 머물렀습니다. 많은 회사들이 데스크탑 사용자를 위한 웹 사이트 이외에 모바일 사용자를 위한 모바일 웹(Mobile Web)을 만드는데 들이고 있는 공에 비하자면 형편없는 수치입니다. 사용자들은 모바일에 최적화되어 "잘 보이는" 웹 사이트도 좋지만 사용하는데 있어서 앱을 쓰는 것처럼 뛰어난 사용자 경험의 제공을 기대하고 있기 때문으로 해석됩니다.

지난 5년간 모바일 웹에 대한 접근이 보이는 것(View)에 대한 최적화와 모바일 환경에서도 뒤쳐지지 않는(?) 검색엔진 최적화에 포커싱이 되어왔다면 이제는 그 목표가 바뀌어야 할 시점이 아닌가 싶습니다. 사용자들은 검색을 통해서 모바일 사이트를 찾아서 사용하는 것이 아니고 쓸만한(=앱과 사용성이 필적하거나 컨텐츠가 아주 가치가 있는 웹 사이트) 웹 사이트를 마치 앱을 이용하듯 북마킹하여 사용하는 시대가 되었습니다. 이제 중심 축을 사용자 경험에 두고 모바일 웹을 생각해야만 앱 과의 경쟁에서 스마트 기기라는 무한한 시장을 놓고 자웅을 겨룰 수 있을 것입니다. 


 
저작자 표시
신고
Posted by 노피디
Daily NoPD/rEvieW2013.08.04 12:34
HTML5 에 대한 이야기가 나온지 참 오래된 것 같습니다. HTML5 라는 이름으로 표준을 확정지으려던 초기의 방침은 현재는 일부 변경되어 지속적으로 개선, 발전되는 HTML5 로 방향을 잡고 새로운 구현들이 이어지고 있습니다. 더 이상 HTML5 가 표준이 확정되지 않았으니 기다려야 한다는 이야기는 설득력을 갖지 못하는 상황이 된 것이지요.

그렇다면 HTML5 를 어떻게 배우는 것이 좋을까요? 그동안 시중에 나온 많은 책들이 HTML5 와 기존 HTML 4.x 의 차이를 분석하고 CSS3 와의 내용이 밍글되거나 스펙(Specification)을 중심으로 요소들을 나열하다 보니 HTML5 를 처음 접하는 독자 입장에서는 새로운 것을 배우고 공부하기 부담스러웠던 것이 사실입니다.



[ 처음 시작하는 사람을 위한 친절한 구성 ]

오늘 소개해 드리는 "HTML5 웹 프로그래밍 입문" (한빛아카데미/윤인성, 2013) 은 그런 관점에서 초보자들을 위해 추천해 드리고 싶은 책입니다. 책은 HTML 의 기본적인 내용을 집으면서 HTML5 중심으로 페이지를 구성하고 만들어가는 방법을 단계별로 설명해 주고 있습니다. 저자 특유의 대화형(?) 문체는 읽는 사람이 부담 없이 저자와 이야기 하듯 HTML5 와 CSS3, 그리고 JavaScript 를 이용하여 멋진 웹 페이지 제작을 할 수 있도록 도와줍니다.

스펙을 중심으로 풀어낸 기존 HTML5 책들은 너무 많은 스펙과 스펙의 다양한 옵션 등에 독자를 질리게 했습니다. 윤인성 저자는 이 책에서 그런 부분을 과감하게 생략(?)하면서 필요할 때 스펙을 찾아서 확인하는 방식으로 학습을 진행할 것을 권장하고 있습니다. 글 서두에 이야기 한 것처럼 HTML5 가 제공하는 다양한 기능들은 지금 이 순간에도 지속적으로 바뀌고 추가되고 있습니다. 즉, 지금 시점에 스펙을 암기하고 외우는 것은 의미도 없을 뿐더러 외운 것이 자칫 바뀔 수도 있기 때문에 불필요한 일이 될 수도 있습니다.

[ 친절한 저자의 강조, "중요한 것은 꼭 외워둡시다" ]

그럼에도 불구하고 저자는 책의 주요한 부분에선 꼭 암기할 것을 강요(?)하고 있습니다. 스펙에 대한 것이나 다양한 옵션은 굳이 외울 필요가 없으니 과감히 생략하면서도 특정한 단락에서 암기할 것을 강요하는 이유는 무엇일까요? 사람의 기억력은 한계가 있고 세상의 모든 것을 다 기억할 수는 없습니다. 그래서 꼭 기억 해야만 하는 것을 골라낼 필요가 있습니다.

방대한 HTML5 와 CSS3 의 다양한 이야기들 중에서 꼭 기억해야 하는 것들은 사실 경험이 많이 쌓이면 자연스럽게 익힐 수 있는 부분입니다. 그렇지만 처음 입문하는 사람들이나 제대로 기초를 잡지 못한채로 업무에 치이는 사람들에게는 경험치가 존재하기 힘듭니다. 친절하게도 저자는 꼭 기억해야 하는 부분들을 두 번, 세 번 강조해서 이야기 해주고 있습니다. 책의 241 페이지 하단에 나온 내용이 대표적인 예입니다.

(241p 상단 인용)

One True 레이아웃의 핵심은 각각의 행을 독립적으로 구성한다는 것입니다. 이를 구현하기 위해 다음과 같은 규칙을 적용하여 스타일 시트를 작성합니다.

1. 자손에 float 속성을 적용한다.
2. 부모의 overflow 속성에 hidden을 적용한다

width 속성과 height 속성을 지정하지 않고 overflow 속성에 hidden을 적용하면 부유하는 영역을 감쌉니다. 만약 [코드 7-]에서 overflow 속성을 지정하지 않으면 [그림 7-6]처럼 float 속성을 적용한 자손이 있는 행을 다른 행이 침범합니다. 두 가지 공식을 기억하고 있으면 어떠한 레이아웃이든 개발할 수 있습니다. 정말 중요한 내용이므로 기억하기 바랍니다.


[ 이 책 한권만 있으면 되는걸까? ]

" HTML5 웹 프로그래밍 입문 " 책은 초보자들이 쉽게 HTML5, CSS3, JavaScript 를 이해하고 감을 잡을 수 있도록 해주는 좋은 입문서입니다. 그러나 말 그대로 입문서이기 때문에 이 책 한권으로 모든 것을 소화할 수는 없습니다. 이 책을 통해 감을 잡고 기초 공사를 어느정도 했다는 생각이 들면 조금 더 깊은 내용을 다루는 책들을 통해 많은 것을 학습하는 단계적 접근이 필요합니다.

HTML5 나 CSS3, JavaScript 는 각각 한권 이상의 책으로 설명될 정도로 방대한 내용을 가지고 있습니다. 책 한권으로 모든 것을 마스터 할 수 있다면 좋겠지만 그건 너무 큰 욕심입니다 :-) 검색도 충분히 활용하되 늘 곁에 끼고 볼 수 있는 책들을 각 영역별로 준비해 놓고 늘 보면서 코드 한줄을 입력하고 이해하는 것이 중요합니다. 이 책을 통해 아무쪼록 웹 프로그래밍의 재미를 느끼고 새로운 바다에 푹~ 빠질 수 있길 바래봅니다. 

[ 윤인성 저자의 웹 프로그래밍 관련 서적 추천 ]
  



- NoPD -
저작자 표시
신고
Posted by 노피디
IT's Fun2011.03.15 13:13
웹 사이트나 블로그의 최적화는 얼마나 잘 하고 계시나요? 최근 미확인된 정보를 근간으로 도출된 결과에 따르면 약 3~4초 이내에 웹 페이지가 로딩되지 않으면 방문자들은 짜증을 느끼고 웹 페이지를 이탈할 가능성이 높다고 합니다. 물론 믿거나 말거나 이겠지만 확실히 로딩속도가 늦는 웹 사이트나 블로그는 잘 안가게 됩니다.

그렇지만 어느정도 웹 사이트를 소셜 서비스들과 연계하여 유연하게 만들다 보면 외부 API 의 호출, 화면 렌더링 이후에 후처리 등의 작업이 불가피하게 들어갈 수 밖에 없습니다. 이런 작업을 마치고 본인의 환경에서만 테스트를 하면 최적화의 신빙성이 많이 떨어지겠지요? 해외에서 유입이 많은 사이트일수록 이런 부분은 더 신경을 써야 하지만 현실적으로 테스트 할 방법이 많지는 않습니다.

 
LOADIN (http://loads.in, [바로가기]) 서비스는 그런 불편과 현실적인 제약을 극복할 수 있도록 해주는 서비스입니다. 전세계 모든 지역은 아니지만 주요 도시에서 특정한 브라우저로 얼마나 로딩에 시간이 걸리는지를 측정해주는 재미있는 서비스입니다. 웹 사이트, 블로그 등의 URL 을 입력하고 지역, 브라우저를 선택하면 로딩 속도를 측정해 줍니다.

제 블로그의 속도를 뉴욕에서 크롭8 로 접근했을 때는 약 20.1 초라는 시간이 걸렸다고 합니다. 그나마도 로딩이 100% 되지 않고 89% 완료 된 이후 Timeout 되었다라고 화면 상단에 주황색 글씨로 알려주고 있습니다. 상당히 느린 속도지요? 외국 방문자가 거의 없는 한글 블로그라는 것이 얼마나 다행인지 모르겠습니다.

 
엄청난 데이터센터와 트레픽 처리량을 자랑하는 구글을 한번 검색해 보았습니다. 전세계 대부분 지역에서 0 ~ 2초 사이의 빠른 응답속도를 보여주고 있습니다만 유독 중국 (이미지에서는 베이징, 8.9초) 에서는 느린 속도를  보여주고 있습니다. 네트워크에 대한 필터링을 하기 때문에 그런 것인지도 모르겠네요. 

글로벌로 서비스되는 웹 사이트, 웹 서비스를 오픈 한 이후에 주요 도시에서의 속도를 측정해 보고 싶다면 추천해 드릴만한 서비스가 아닐까 싶습니다. 언제 어디서나 빠른 속도를 보장하는 사용자 중심의 생각. 간단한 노력에서 시작됩니다~!

 
- NoPD - 
신고
Posted by 노피디

티스토리 툴바