하이브리드 웹 애플리케이션 개발 도구인 Appcelerator사의 Titanium(타이타늄)은 크로스 플랫폼하에 동작이 가능한 네이티브 애플리케이션 개발을 위한 도구이다.  이런 도구는 Titanium외에도 PhoneGap이라는 도구도 있다.  단 PhoneGap의 경우에는 Titanium과 아키텍쳐는 유사하지만 모바일에 초점이 맞추어져 있고 Titanium의 경우에는 모바일뿐 아니라 데스크탑 애플리케이션까지 개발이 가능하도록 도와준다.


구조

Titanium은 4가지 레이어로 나뉜다.
1. HTML/CSS/JavaScript 으로 구현된 애플리케이션 코드
2. 디바이스와 데스크탑의 내장 기능에 접근하기 위한 API, 분석과 모듈 기능
3. 웹 형태의 코드를 내장 애플리케이션으로 컴파일하기 위한 브릿지 
4. 크로스 플랫폼으로 배포를 위한 응용프로그램 패키지 런타임 쉘


특징
가장 큰 특징은 웹 서비스를 개발하기 위하여 가장 흔히 사용되어 왔던 서버 영역에 PHP 뿐아니라 Python, Ruby 를 포함한 최근 연일 이슈에 오르는 HTML5과 CSS3, JavaScript 로 데스크탑 운영 체제인 Window, OSX, Linux 위에서 내장 애플리케이션으로 손쉽게 개발, 패키징, 배포할 수 있는 것이다.

여기에 더하여 iPhone과 iPad, Android 의 모바일 플랫폼에서도 동일하게 내장 애플리케이션을 개발할 수 있도록 한다.

웹 개발자들에게 있어서는 기존에 가지고 있던 웹 개발 스킬을 굳이 iPhone,iPad 앱 개발을 위해 Objective-C를 학습하다던가 Android를 위해 Java 공부를 새롭게 시작할 필요가 50%정도는 줄어든 셈이다.



모바일

iPhone을 생각할 때 가장 특징은 바로 터치로 움직이는 유연한 UI를 손꼽을 수 있다. Android 역시 비슷하다. 

Titanium은 이러한 UI와 table view, scroll views, native button, switch, tab 등과 같은 대부분 것들을 제공한다.


다시 말하면 웹 기술만으로도 iPhone이나 Android에서 기존의 네이티브 애플리케이션들과 똑같이 동작한다는 것이다.

또한 페이스북이나 야후, 트위터와 같은 소셜 네트워킹 서비스나 위치기반 서비스들을 그대로 활용할 수 있게 된다.

무엇보다 중요한 것은 모바일 디바이스의 내장 기능(비디오, 데이터 베이스, 카메라등) 들에 접근인데 거의 모든 기능들을 접근할 수 있도록 지원하고 있다.  물론 웹 표준 기술들을 지원하기 때문에 동반하는 많은 기술들을 그대로 사용할 수 있다.

1. Rich Multimedia 
2. Flexible Storage ; Filesystem, Database On Device
3. Unlimited Extensibility
4. Your Best Shot: Access the Camera or Video Camera
5. Cloud-Connected Apps
6. Code like it’s the year 202 : HTML5 and CSS3 support

모바일 앱에서 필요한 거의 대부분의 기능들을 300개 이상의 API를 이용하여 제공하고 있다.


데스크탑
그간 웹 기술을 이용하여 데스크탑 애플리케이션을 만들기 위한 도구로는 Adobe AIR의 런타임 환경에서만 구동되고 HTML이나 JavaScript의 기술로 만들더라도 AIR 플랫폼의 특징을 이해해야 했다.  반면에 Titanium 은 더 나은 기존의 나왔던 도구들보다 더 나은 성능과 각각의 OS에 기반 UI, 데이터베이스 접근, 오프라인 기능, 알림기능 그리고 멀티미디어 기능까지 모두 제어할 수 있다.

Adobe AIR와 마찬가지로 하나의 코드로 Window, OSX, Linux의 세가지 플랫폼에서 동일하게 동작하지만 Adobe AIR에 비해서 메모리 사용률은 1/10배에 불과할 뿐 아니라 로컬 시스템 접근을 완벽하게 지원한다.

이 말은 웹에서 구현할 수 있었던 거의 모든 기능들을 데스크탑에서 구현하게 됨으로써 플래시 비디오나 마이크로 블로그는 데이터 저장소를 로컬에 둠으로써 향상된 성능과 오프라인상에서 원활히 동작할 수 있게 된다.

또 하나의 작은 특징이라면 운영체제에서 지정된 UI를 완벽하게 지원하는데 이것은 Titanium 자체에서 각각의 플랫폼에 맞게 동작하도록 되어있다. 

Appcelerator 사에서 Titanium 의 초점은 바로 모든 플랫폼에서 원할히 동작할 수 있는 오픈웹 기술들에 있다.  이것은 webkit 엔진의 최선 버전이 번들되게 되고 HTML5나 CSS3의 최신 기능들이 따라서 제공된다.

추가적으로 커스텀 에니메이션, 3D 이펙트 혹은 크로스브라우저 문제 없는 킬러 UI를 만들 수 있다.


Titanium Desktop 에는 몇 가지 특징이 더 있다.

1. The Appcelerator Network breaks the interup barrier
         자체적인 클라우드 서비스를 이용해 빌드, 패키지, 크로스 플랫폼으로 배포까지 지원.
2. No sandbox, better Performance
        Adobe AIR와는 달리 시스템 리소스 전체를 접근할 수 있도록 지원하고 AIR 애플리케이션에
        비해 약 1/10배의 메모리만 사용.
3. Apps for more than just the desktop
        파워 디지털 간판, point for sale, 키오스크, ATM기, 셋톱 앱 그리고 구글 크롬 OS와 애플 
        타블렛에도 지원할 예정.
4. Mix and match your favorite web technologies
        오픈웹 기술 HTML5, CSS3, JavaScript 뿐만 아니라 서버사이드 기술인 Python, Ruby, PHP까지 
        모든 플랫폼, 모든 앱, 모든 운영체제에서 모두 제공.


요약
Adobe AIR 의 경우에는 웹 기술을 활용하여 데스크탑 애플리케이션 개발을 위한 환경이였고 실제로 만들어 보려고 몇번 시도는 했으나 번번히 작은 제약들과 AIR 환경에 대한 학습 부담이 있었지만 Titanium은 동일한 코드로 애플리케이션을 빌드하고 패키지하여 배포하는데까지 AIR 만큼의 학습을 요구하지 않습니다. 

아니 그냥 메뉴얼에 따라 움직이면 될정도 간단하고 쉽습니다.
이미 만들어 놓은 웹 기반 애플리케이션이 있다면 패키지 레퍼런스를 보고 한번 따라해보면 될것도 같습니다.

모바일이나 맥, 리눅스 개발환경이 없어서 패키징이나 배포를 해볼 기회는 없으나 윈도우에서는 정말로 간단히 애플리케이션을 만들 수 있도록 지원합니다.

개발자 커뮤니티를 통해 계속적으로 발전을 꾀하고 있고 오픈 웹 기술의 발전 가능성 만큼 타이타늄과 같은 플랫폼은 발전가능하다는 것을 느끼게 되었습니다.


더불어 HTML, CSS, JavaScript를 이용해서 데스크탑이나 모바일 애플리케이션을 만들 수 있는 도구가 나왔고 웹 개발자에게 있어서도 좋은 기회들을 많이 만들 수있을 것 같다는 생각이 듭니다. : )





신고
Posted by Rhio.kim
이런 낚시성 기사를 적는 것은 이 블로그에서 매우 이상한 상황이지만 아이디어가 전달되기를 바라며 계속 적어봅니다.

요즘 많은 SNS, 블로그, 카페, 저널들 할 것 없이 아이패드와 관련된 수 많은 정보들과 이슈들이 매우 다양한 접근법으로 연이어 터져나오고 있네요. 


저는 개인적으로 아이패드는 말 그대로 패드에 관점에서 접근해봅니다.  컴퓨터를 하는 대부분의 사람들은 마우스 밑에 깔려있는 "마우스패드"를 인식하지 못한체 마우스를 움직여 댑니다.  그리고 스크린에서 마우스 포인트의 움직임을 주시하죠.

"아이패드"  어떻게 보면 게임을 위한 도구가 아닌 콘텐츠 유통을 위한 혁신적인 도구라고 보고 싶습니다.  
패드는 핸드폰 처럼 휴대를 하거나 아이폰 처럼 손에서 손쉽게 제어하거나 하는 것이 아닌 어디에 놓여진 체로 스크린을 통해서 정보를 전달받고 전달하는 도구이죠.  

아이패드라는 이름은 이 장치가 단순히 커진 아이폰이라면 굳이 아이패드라고 하지 않았을 것이고 아이폰 역시 아이폰이라칭하지 않았을 것입니다.

i + 패드, i + 폰  즉 장치들의 명칭을 나의 관점으로 역할로 해석한 것이라 느껴집니다.

또한 HCI 관점에서는 아이폰이 출시된지 얼마 되지 않았지만 수 많은 아이폰 사용자들은 이미 아이폰의 새로운 형태의 경험을 뿌리 깊이 수용해버린 듯 합니다. (모두 그렇지는 않습니다.) 

그 경험과 조금 달라진 아이패드의 출시를 대부분 기존 아이폰의 경험과 빚대거나 비슷한 디바이스와 비교해서 장단점을 파악했으니까요.  

MS DOS 시절에 마우스라는 것이 없었지만 윈도우 운영체제와 함께 나타난 마우스는 사용자와 컴퓨터간의 대화에 있어서 혁명적인 도구의 발견이였습니다.  

그때와 같은 기분은 왠지 모르겠지만 지금은 잘 느껴지지 않습니다.  나도 모르게 스킨쉽(터치)를 통해 사용자와 컴퓨터간에 더욱 밀접한 인터페이스를 하고 있는데도 불구하고 말이죠.   다음에 나올 인터페이스의 도구는 무엇일까요?  텔레파시? 기대됩니다.  (각설 각설 각설 각설.... 하지만 기계와 인간의 대화방식은 점점 인간다워진다는 것은 매우 중요합니다.)





위 이야기는 단순한 제 생각이구요. 사실 요 이야기를 하고 싶었습니다. 

최근 게임시장에 관련된 몇가지 기사를 보면서 아이패드에서 이런게 가능하겠구나 싶어서 간단히 파워포인트로 끍적인 결과입니다. 

아이패트 4인용 게임 패키지


아이패드 하나에 많은 사람들이 함께 게임을 즐길 수 있는 모습을 그려본 것이죠.  과연 가능할까요? 
기술적으로 불가능해 보이지는 않습니다. (불가능하면 말씀해주세요. 정정하도록 하겠습니다. ^^;; )

뭐 블루투스가 아니되면 다른 방법이 있겠죠.  
아이패드는 또한 다양한 외부 출력장치와 연결도 가능하고 플래이스테이션이나 엑스박스의 사양은 당연히 기대할 수 없지만 수 많은 아이폰 사용자들로 하여금 기존의 아이폰앱을 통해서 좀더 끈끈한 사용자 네트워크를 형성할 수 있는 도구로도 볼 수 있지 않을까?


게임용 패키지 나오면 사실분?   대략 가격이 아이폰 2대 + 아이패드 1대면 200은 줘야 겠네요.  
누가 안사겠다 ;)



신고
Posted by Rhio.kim

개발자의 일반적인 타임라인!!  
대부분 기획이 끝나고 개발에 착수하면 늘 기획자와 디자이너에게 요청을 받는 입장이 된다는 것
업무에서 Ajax 처리 방식은 개발자를 슬프게 한다.

개발자 타임라인

기획, 개발, 디자인의 타임라인



개발자의 효율적인 타임라인
현실적으로 불가피한 부분도 있겠지만... 모든 요청 및 변동 사항은 Green 지역에 문서와 기록으로 적재



효율적인 시간관리와 업무진행을 위해서 모든 파트에서 잔인할 만큼 모든것에 대한 문서화, 기록화가 필요하다. 
그 시기엔 낭비로 보일지 모르나... 시간이 지나고 습관이 되다보면 모두 보상 받는다.

신고
Posted by Rhio.kim

사용자 로그인 과정을 향상시키기 위한 11가지 전문가 팁


로그인 프로세스에 대한 그리고 회원정보를 받아들이는 프로세스에 대한 연구와 노력을 언제 어디서든지 지금까지도 노력해오고 있는 것 같습니다.

국 내외 수많은 포털 사이트들의 가입절차를 보면 2000년 즈음에 보아왔던 가입절차에 비해서 매우 간소화 되고 로그인을 위한, 개인정보 확인에 대한 절차가 매우 간소화되고 전문화 되었습니다. 

그리고 계속 발전해 나가고 있습니다.  각 나라의 문화의 차이, 사용자들의 행동양식, 시대적 흐름, 기술의 진보에 맞춰 변해가고 있습니다.


Gary Barber 씨는 SitePoint를 통해서 사용자 로그인 프로세스 향상을 위한 전문가적인 11가지 팁을 발표하였습니다.  천천히 읽어 보았지만 시기 적절하게 상당히 좋은 내용인 듯 합니다.

로그인의 부분 기능적, 기술적으로는 매우 작고 간단한 부분이라 생각하여 사용자에게 부족한 경험을 제공되면 그것을 사용하는 사용자들은 사이트의 사용을 꺼리게 되고 잘못된 사용자 경험으로 반복된 일을 계속 해야만 한다거나 헛된 일을 자꾸 하게 되고 사이트는 결국 문을 닫아야 할지도 모릅니다.

로그인 인터렉션은 표면적으로는 매우 간단하지만 사용자 입장에서 봤을 때에는 최종적인 디자인에 있어 고려해야 할 요소는 매우 많습니다.   크게 아래와 같습니다.


보안
이전 사용자 경험
사이트의 전반적인 절차
내부 비즈니스 프로세스
페이지 인터페이스 디자인
사용자의 플랫폼 고려


요약하자면

1. 사용자 명을 위해서 이메일 주소를 사용해라.
2. 안전을 위해서 긴 암호를 사용하도록 해라.
3. 일부 Ajax를 추가해 폼 유효성 체크
4. 로그인 지속 시간을 지정하도록 해라.
5. 텍스트 필드는 가까운 곳에 함께 유지시켜라.
6. 로그인 링크는 상단에 유지시켜라.
7. 로그인 링크는 라벨로 표시해라.
8. 사용자 명 과 비밀번호 찾기 링크는 로그인 실패 시에 표시해라.
9. 도움이 되는 에러 메세지를 표시해라.
10. 사용자 인증을 위한 문항의 사용해라.
11. 페이지의 용량을 작게 유지해라

12. 오픈 아이디는 시간이 지남에 따라 로그인을 위한 주류가 될 수 있지만 현재는 주제 밖의 내용인 것 같다.



원글 : http://www.sitepoint.com/blogs/2008/12/23/11-ways-to-enhance-your-web-application/

신고
Posted by Rhio.kim
들으면 들을수록 중독되는 so Hot!
원더걸스
             이미지 출처 : 고뉴스

과연 음악이 어떻게 만들어 졌을까요?  이런 곡에서도 어떤 객체지향이라는 느낌을 받게 하네요.
실 세계의 사물을 단순화해 놓은 객체들의 유기적인 조합은 so Hot이라는 음악과 같이 한 시대를 풍미하는 좋은 문화로 자리 남고 IT세계에서는 서비스나 좋은 소프트웨어로 남을 수 있다라는 생각을 해봅니다.  또한 후배들에게 물려줄 좋은 자산이 되리라 생각해봅니다.

박진영 대표는 객체지향 음악을 설계하는 패턴과 제작과정에 대한 상세한 설명을 알려주었습니다.

원더걸스의 이전 앨범의 텔미는  반주를 오브젝트를 먼저 만들고 거기에 멜로디라는 오브젝트는 붙인 경우이고 이번 앨범의 so Hot 은 멜로디를 먼저 만들고 반주를 붙이는 패턴을 적용하였다고 합니다.

1.    Kick (loop)구성 - drum
2.    Clap 구성

3.    Hihat 구성
4.    Percussion 구성

5.    Main synth – 기본 테마
6.    Base 구성

7.    Lead 구성

이렇게 7가지의 단계를 통하여 so Hot이라는 곡이 탄생하게 되었네요.  거기에 비쥬얼한 원더걸스라는 UI가 씌워졌고 테스트와 연습을 거쳐 최고의 음악으로 음악 방송을 통해 많은 팬들에게 서비스하게 되었습니다.



신고
Posted by Rhio.kim
Adobe 사의 Ryan Stewart 씨와 Ajaxian의 java 커뮤니티 담당자인 Dion Almaer는 아래와 같은 슬라이드를 공유했네요.

Ajax Application 개발에 관심이 있다면 꼭 AIR에 대한 기술도 연마하시기를 권장합니다.

Adobe의 AIR와 Google의 Gears 의 발전 방향은 서로 비슷합니다.
온라인의 기능을 오프라인의 데스크탑 어플리케이션으로 만들 수 있는 방법을 제시하고 있습니다.

아래의 슬라이드 자료는 Ryan Stewart 씨의 AIR에 대한 개요를 제시하였고 이에 맞서 Dion Almaer씨가
Google의 Gears에 대한 개요를 제시하였습니다.

두 사람은 웹의 발전에 흥분하는 이유를 논의했고 또한 AIR과 Gears의 상호 보완할 수 있는 것들 또한
찾을 수 있었습니다.

처음 슬라이드를 볼때와는 달리 대화가 끝나고 슬라이드를 봤을때는 어려움이 없었다.
재미있는 연습을 통해 아래의 슬라이드 자료를 본다면 많은 도움이 될것 같습니다.



신고
Posted by Rhio.kim
Stoyan Stefanov씨는 Yahoo 엔지니어로 좀더 나은 예시를 찾기 위해 일해왔습니다.
그리고 새로운 결과를 아래 자료로 발표하였습니다.

그는 웹 페이지의 성능향상을 위한 14가지 기존 룰에 20가지 새로운 규칙을 찾아냈습니다.
우리는 다음 정보에 대해서 분류화 최적화를 하였습니다. :  서버, 컨텐츠, 쿠키, 자바스크립트, CSS, 이미지 그리고 모바일


아래의 새로운 목록입니다.  그리고 좀더 상세한 정보는 곧 발표할 예정입니다.

1. Flush the buffer early [server]
2. Use GET for AJAX requests [server]
3. Post-load components [content]
4. Preload components [content]
5. Reduce the number of DOM elements [content]
6. Split components across domains [content]
7. Minimize the number of iframes [content]
8. No 404s [content]
9. Reduce cookie size [cookie]
10. Use cookie-free domains for components [cookie]
11. Minimize DOM access [javascript]
12. Develop smart event handlers [javascript]
13. Choose <link> over @import [css]
14. Avoid filters [css]
15. Optimize images [images]
16. Optimize CSS sprites [images]
17. Don’t scale images in HTML [images]
18. Make favicon.ico small and cacheable [images]
19. Keep components under 25K [mobile]
20. Pack components into a multipart document [mobile]

Is it just me, or is performance getting a LOT of attention these days?

신고
Posted by Rhio.kim
Firecookie는 Firebug의 extension으로 브라우저에서 쿠키를 관리하고 확인 할 수 있습니다.
관리측면이나 사용자측면에서 모든 쿠키를 별개로 이용할 수 있습니다.  이것은 Firebug 확장용으로 만들어져서
웹 개발자들에게는 친숙한 Firebug 유저 인터페이스를 따릅니다.
사용자 삽입 이미지
Firecookie가 성공적으로 설치되면 위에서 보듯아 YSlow 옆에 Cookies 탭이 생성되면서 cookie를 효과적으로 관리 할 수 있게 됩니다.


사용자 삽입 이미지
목록에 있는 모든 쿠키 정보를 클릭하면 확장되면서 상세한 정보까지 볼 수 있습니다.
 특정 쿠키 정보만 필터링을 하고 싶으면 Firebug의 search 창에서 필터링 할 이름을 적어놓으면 동적으로 필터링하여 처리해줍니다.

또한 Firecookie를 통해서 새로운 쿠키를 삭제하거나 생성가 가능하고  페이지의 권한 또한 관리할 수 있습니다.(이 말은 무슨말이죠??)


페이지에서 어떤 쿠키에 대한 변화가 생길때에 console 탭에 계속해서 변화에 대한 정보를 trace해 줍니다
사용자 삽입 이미지

쿠키에 대한 관리 능력이 뛰어납니다.  일단 개발자들에게 친숙한 Firebug UI를 따랐다는 것에 큰 점수를 주고 싶네요.

사용도 간편하고 뭐 필요에 따라서는 역시 쿠키 컨트롤이 쉬워져서
페이지 쿠키 정책에 매우 심사숙고하여 개발해야겠네요.

깔았으니 몇 군데 사이트 테스트 해봐야곘죠?

원본 : http://www.softwareishard.com/blog/?page_id=5

에 대한 다운로드 불을 firecookie
신고
Posted by Rhio.kim
사용자 삽입 이미지

IE 8의 대응이 시작된 듯 합니다.  하지만 여전히 브라우저계의 미운새끼 오리라고 여겨지는 이유가 뭘까요??
몇가지 변화에 대한 소개입니다.

Ajax 향상
  1. Ajax Navigation :
Ajax 네비게이션은 예전과 같은 네비게이션 없이 Ajax 어플리케이션 자체에서도 이용할 수 있다고 합니다.  이는 현재 다른 브라우저(FF, Opera, Safari)에서 처리하는 방식처럼 window.location.hash 값을 셋팅하므로써 페이지내에서 이벤트를 발생해서 이동한 경로는 설정하고 이동 로그를 남김
   

  2. DOM Storage
Hash 구조의 key/value의 pair data를 사용자 PC에 session/presisted 방식으로 저장해놓게 됩니다.  이는 일종의 Storage역활을 하게 됩니다. 이 역시 FireFox(SessionStorage)에서 이미 지원되는 녀석들.   아마 Safari 최신 버전에서도 지원되는 거거나 HTML5 spec 이 추가되면 자동으로 생길 기능으로 알고  있습니다.

사용자 삽입 이미지
아무튼 이 기능은 좋은 기능이기는 하나 각 브라우저마다의 메커니즘이 조금씩 틀리다면 이 역시 크로스 브라우징을 신경 써야하는 UI 개발자들에게는 무용지물 이라는 것!!


  3. Connectivity events
대충 내용은 웹 사이트에 접속한 사용자의 커넥션 상태의 변화를 체크할 수 있다라는 것 같은데 정확하게는 모르겠습니다.  이게 된다면 좋은데...

  4. Six connetions per host
IE 에서 정책이 바뀌었나봅니다.  커넥션 수를 2개로 꾸준히 오다가 이번에 대폭 6개로 늘렸네요.  다른 브라우저 Firefox, Opera, Safari 의 경우 8개... MS는 6개가 최적이라고 생각했나 봅니다.
아무튼 그래도 6개로 늘었다는 것은.. 글로벌 서비스에서 Ajax 요청은 네트워크 대역폭에 따라 적잖은 데이터에서 병목 현상이 발생할 수 있는데..  2개였을 때 보다는 아무래도 더 쾌적한(?) Ajax 어플리케이션을 만들 수 있겠다 싶다..

 5. XHR Enhancements
timeout 속성이 포함되었다는 것..
이 부분 정말 칭찬하고 싶다. 어떤식으로 제어할 수 있는지 궁금해집니다.
사실 지금 고민하고 있는 것이 XHR Request Management 에 대한 고민을 하고 있는데..
이부분이 나온다면 특별히 개발자들도 고민하지 않아도 될 부분이다..


사용자 삽입 이미지
이 부분 XHR을 사용하는 개발자라면 한번쯤 깊이 고민해볼 부분이 있습니다.
XHR은 아시다시피 비동기 통신으로 네트워크 상태에 따라 Response가 늦게 오는 경우가 발생합니다.
이때 사용자는 그런걸 모른체 UI에서 계속적인 요청을 하게 됩니다.

그렇게 되면 Request는 계속 쌓이게 되고 쌓였던 Request는 네트워크 상황에 따라 모두 Abort 날 수도 혹은 병목이 풀리면서 수천 수만건의 Request가 집중되는 현상이 발생합니다. 

이때 XHR Management를 해 주어야 하는데 이에 timeout 메커니즘이 포함된다니 좋습니다.

그 다음 XHR 에서 가장 이슈가 되었던 크로스 도메인 XHR인데요..  어떻게 처리 될 것인지 궁금하네요.
아시다 시피 Firefox 3에서는 이미 적용되어 있습니다. 이에 IE 8에서도 좋은 기능으로 내놓았네요.
브라우저의 기능이 아닌 HTTP Spec을 적용시켰다고 봐야겠군요..

Cross-domain Request(XDR) 이 가능해 졌고.
HTML 5 Spect 에 있는
Cross-Document Messaging(XDM) 기능도 추가 되었나 봅니다.

이 녀석의 브라우저 메모리 관리에 대해서는 어떻게 할꺼야.... 라고 생각하는 찰나.. 가장 밑에 부분에...

And we also have other features such as less memory leaks!

사용자 삽입 이미지
이렇게 남겨져 있네요..  여기서 다운로드 받은 PDF.. 메모리 릭 마이그레이션 전략 -_-;;
결론은 뭐 개발자들이 잘 개발해야죠 뭐... 킁.



신고
Posted by Rhio.kim
TAG IE 8, XDM, XDR
사용자 삽입 이미지

YSlow 0.9.2 릴리즈 소식입니다.

참 좋은 녀석입니다.  크게 2가지의 기능이 추가 되었습니다.
Components 부분에 기존에 없던 Ajax Request 정보와 Image beacon과 같은 DOM Object가 아닌 것들도
정보를 볼 수 있습니다.

개발자에게는 좀더 강력한 Web 2.0 개발의 디버깅 및 테스트 보안에 좀더 보완할 수 있게 되었습니다.

그리고 하나는 페이지 내의 느릿느릿한 iframe 나 frame 의 컨텐츠를 분석할 수 있도록 되었습니다.
국내에서는 iframe 이나 frame을 거의 쓰지 않기 때문에 설명은 하지 않습니다.

또 여러가지 버그가 수정되었고 다른 몇몇 기능 중 404 not found 강조, CSS 구문의 접근, Javascript 최소화
YSlow 판넬에 검색기능이 포함되었습니다.

이번 릴리즈로 고 성능의 Web2.0 어플리케이션 개발을 위한 더 강력하게 바뀌였네요.

좀더 정확한 릴리즈 정보는 여기서
신고
Posted by Rhio.kim
사용자 삽입 이미지
사이트 소개 합니다.

사이트 : http://www.cachefile.net/


요즘 프로젝트의 생산물의 최적화를 위해서 여러가지 자료 수집을 하고 있습니다.

HTML Document를 HTTP Request를 통해 받아오는 시간은 해당 URL의 전체 페이지를 렌더링 즉 사용자가 볼 수 있는 상태까지 만드는데 응답 시간 비율은 20 : 80입니다.

HTML Document 를 받아오는 시간은 평균적으로 전체 시간에 20% 이구요 페이지를 구성하는 요소들
이미지 JS, CSS, IMG 등등 을 받아오는데 걸리는 시간은 80% 정도 됩니다.

더군다나 국내 사이트는 외국 사이트에 비해 이미지량이 더욱 많기 때문에 그 시간에 대한 비율은 정확하지 않을 수 있습니다. ^^

제가 위의 사이트를 소개하는 이유는 웹에서 빈번히 사용되는 리소스(Javascript 프레임웍들
혹은 이미지들)등을 캐시를 통해 사이트 구성시 HTTP Request를 없애고 캐시에서 직접 받아올 수 있는
솔루션을 제공하는 사이트 입니다.

우선 그 사이트에서 제공하는 목록은 사이트에 접속하시면 바로 볼 수 있구요.

직접 URL은 JS의 경우 http://www.cachefile.net/scripts,
그래픽적인 요소의 경우 http://www.cachefile.net/graphics 입니다.

<script type="text/javascript" src="http://www.cachefile.net/scripts/dojo/1.0.0/dojo/dojo.js
?expires=Thu,+01+Jan+2009+00:00:00+GMT"></script>
 



이런 방식으로 사용하면 됩니다. 참 간단하죠..

웹 사이트의 퍼포먼스를 높이기 위해서는 서버단에서 즉 웹서버에서 페이지를 구성하는 요소들에 Header 정보를 필해 기재하여야 합니다.

그에 자주 바뀌지 않는 리소스에 대한 캐시 적용을 위해서는 "컨텐츠 만료일자"를 꼭 설정해 주어야 합니다.

이 부분을 보안하여 만든 서비스 입니다.
신고
Posted by Rhio.kim
TAG Cashe
원본출처 : http://www.microsoft.com/technet/sysinternals/utilities/processexplorer.mspx

Process Explorer v11.04  By Mark Russinovich

좋은 tool 하나를 소개합니다.
사용자 삽입 이미지

현재 실행 중인 Process를 한눈에 볼 수 있습니다.
또한 다양한 프로세서 정보(네트워크 사용, 사용 DLL, Memory 사용량, I/O)

바이러스 걸렸는지 찾아볼 수도 있구요. 

저는 이 툴을 Ajax 통신할때 간혹 테스트 합니다.
또한 메모리 체킹할 때 자주 사용합니다.  Ajax 개발에 있어 필수 요소는 메모리 체크 입니다.

잘못된 개발은 각 브라우저의 메모리 점유율을 무한 급수적으로 상승시켜 사용자의 PC를 다운로드
시킬 수 있습니다. 또한 잘못된 Ajax 통신은 시스템 성능 저하를 불러 일으킬 수도 있습니다.

이는 개발자의 자질의 문제^^;;  이런일은 거의 없겠지만 이제 브라우저 의존적인(Client-side) 웹 어플리케이션들이 많이 나오고 더 많이 나올것입니다.

이에 대비하여 개발하는 웹 어플리케이션의 메모리에 대한 대비하는 스킬을 쌓아가야할 것입니다.

사용자 삽입 이미지


신고
Posted by Rhio.kim
사용자 삽입 이미지
야후에 있는 스티브(Steve Souders)의 구굴에서의 강연 내용입니다.
좌측에 있는 이미지는 스티브씨가 쓴 "고성능 웹 사이트"에 대한 규칙을
14가지로 자세히 쓰여진 책입니다.

지금 이 책을 개인적으로 번역중에 있는데요.  많은 도움이 됩니다.
알고 있는 내용들도 있지만 사용하지 않는 내용들이 종종 있습니다.
대부분 모르는 내용이기는 하지만요...

그는 그동안 야후에서 최고의 퍼포먼스를 추구해왔던 만큼 강연을 통해 뛰어난 퍼포먼스에 대한 내용을 보여줬습니다.

스티브씨의 책과 노동의 열매를 살펴보았고 이 책은 YSlow 그 자체였습니다.  스티브씨의 책의 모든 내용을 YSlow 하나에 담았습니다.

실제로 FireFox 에 Firebug 를 설치하고 YSlow 를 깔게 되면
웹 페이지를 구성하는 모든 컴포넌트들에 대한 YSlow Rule 에 적용되지 않는 내용들은 원인과 함께 디스플레이 해줍니다.

저희 회사에서도 이로 인해 상당한 퍼포먼스 향상을 가져왔습니다.
하지만 14가지 Rule을 모두 지키기에는 어려움이 있습니다.. ^^ 한국의 실정일지 아니면 다른 이유가 있을지는 모르겠습니다.

국내 몇몇 대형 포털을 YSlow Rule 얼마나 잘 따르고 있는지 봤지만 ^^... 궁금하시면 해보세요..


위 강연 내용은 실제로 스티브씨의 책의 내용을 요약해 놓은 코어 컨텐츠 입니다.
PDF와 PPT로 많이 돌고 있구요. 

주된 내용은 YSlow 도구를 통해서 14가지 Rule 에 대해 가발자가 자신이 개발한 사이트에 얼마나 규칙을 잘 따르고 있는지 체크해보라는 내용이구요.

지난 강연 내용도 있네요..   [지난강연],
신고
Posted by Rhio.kim
그 동안 ActiveX의 보안상의 문제 (자동실행)등으로 IE에서 ActiveX는 한번의 클릭을 통해서
활성화 된 이후에 사용할 수 있었습니다.

플래쉬도 그랬구요. 기타 Applet, Object, Embed 등
2006년 4월 이후부터 클릭을 통해 활성화 된 이후에 비로소 ActiveX를 제어 컨트롤 할 수 있었는데요.

플래쉬에서는 SWFObject 를 사용하거나 DOM 메서드를 이용해서 document.write 를 통해서 해결하고는 했습니다.  하지만 이제 그렇지 않아도 된다는 소식입니다.

아래 이미지는 그간 이부분에 있었던 타임라인이구요..
사용자 삽입 이미지

2008년 부터는

HTML에 바로 사용하더라도 상관없다고 되어있네요..

다음 버전인 Vista SP1 에서와 XP SP3 에서 적용될 예정이구요.. 2008년 4월 경에는 모든 사용자가
이 문제로 골치 안아파도 된다고 하네요..

어플리케이션 개발에도 레지스트리를 컨트롤 해서 이 부분이 문제가 된다면
FEATURE_ENABLE_ACTIVEX_INACTIVATE_MODE 속성의 DOCHOSTUI flag 값을사용하면 해결할 수 있다고
합니다.
신고
Posted by Rhio.kim
사용자 삽입 이미지

괜찮은 도구가 있어 올려봅니다.
CSS 속성에 따라 IE와 FF에서 어떻게 적용되는지 비교 분석할 수 있습니다.


100% 완벽하지는 않지만 크로스 브라우징 대비에 필수(?) 도구가 되겠네요.
원본출처 : http://litmusapp.com/labs
다운로드 : http://litmusapp.com/cssvista/cssvista.msi
신고
Posted by Rhio.kim
사용자 삽입 이미지

“RIA Cowboy” 자칭하는 James Ward 는 최근에 그의 RIA data 로딩 벤츠마킹을 정보를 업데이트 하였습니다.
텍스트 스트림에 대한 Gzip 압축에 대한 부분도 추가되었습니다. 그리고 이 테스트는 꾀 신뢰성있습니다.
다양한 방식으로 경유해서 오는 데이터의 퍼포먼스를 측정하였습니다.

이 테스트의 목적은 다양한 데이터 로딩 방법에 따라서 퍼포먼스, 데이터량 와 클라이언트 메모리 사용량을 측정해 입증하기 위함입니다. 또한 편견없고 신뢰성에 겨냥하고 있습니다.

아래 추가한 그래프는 James Ward 가 Flex 로 개발한 테스트 App입니다.
상당히 신뢰성 있다고 자부하고 있는것 같습니다.

JSON 을 사용하고 있어서 JSON 에 대한 부분의 퍼포먼스에 관심이 있었는데 기대치 만큼보이네요.


원본 출처 : http://www.jamesward.org/wordpress/2007/08/15/census-ria-benchmark-updated-with-gzip-and-laszlo/
벤츠마킹 : http://www.jamesward.org/census/

신고
Posted by Rhio.kim
Joe Walker 웹 어플리케이션 보안 Ajax 사용에 있어 비표준에 대해 언급하고 있다.

그는 이 슬라이드에 그의 이야기를 포스트 했고 훌륭한 몇몇 리소스를 제공되고 있다.

신고
Posted by Rhio.kim
IIS관리자>웹사이트 등록정보>서비스>정적파일압축체크 작업과

cmd상에서 아래의 명령을 실행한 후

 cscript.exe adsutil.vbs set W3Svc/Filters/Compression/GZIP/HcFileExtensions "htm" "html" "txt" "js" "css"
cscript.exe adsutil.vbs set W3Svc/Filters/Compression/DEFLATE/HcFileExtensions "htm" "html" "txt" "js" "css"

C:\WINDOWS\system32\inetsrv\MetaBase.xml 파일 수정

예를 들면 domain.tv, www.domain.tv, www1.domain.tv 를 동시에 서비스하는 123.123.0.123서버에서는 www도메인을 서비스할 경우

상당히 많은빈도수로 gzip이 적용되지 않습니다.

이경우에는 C:\WINDOWS\system32\inetsrv\MetaBase.xml 파일의

<IIsCompressionScheme Location ="/LM/W3SVC/Filters/Compression/gzip"
 HcCompressionDll="%windir%\system32\inetsrv\gzip.dll"
 HcCreateFlags="1"
 HcDoDynamicCompression="TRUE"
 HcDoOnDemandCompression="TRUE"
 
HcDoStaticCompression="TRUE"
 HcDynamicCompressionLevel="0"
 HcFileExtensions="htm
  html
  txt
  js
  css"
 HcOnDemandCompLevel="10"
 HcPriority="1"
 HcScriptFileExtensions="html htm js txt css"
>
</IIsCompressionScheme>

위부분의 빨간색부분을 TRUE로 수정하시고 IISreset하시면 됩니다.

파일 수정이 안될 경우 IIS STOP시키고 수정한 후 IISRestart합니다.

윈도우2000서버에서는 위와 같은 경우가 자주 발생하지 않았습니다만, 2003에서는 위과정을 거쳐야 압축이 제대로 적용됩니다

신고
Posted by Rhio.kim
원본출처 : http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage
사용자 삽입 이미지

Safari 계열에서도 클라이언트 사이드 데이터 베이스 스토리지를 지원하는군요. HTML5 표준이 나오면.. 기대 됩니다.

클라이언트 사이트 스토리지 개념을 대부분의 브라우저가 도입하고 있는데 IE에서만 소식을 못 접하고 있네요.

사파리에서도 원본출처로 가시면 관련 기사를 볼 수 있습니다.

몇일 전에 파이어 폭스에 대해서도 기재한 적이 있는데요. 파이어 폭스에서는 현재도 sqlite 라이브러리를 이용해서

globalStorage(지속성을 갖는 스토리지) 와 sessionStorage(일회성을 갖는 스토리지) 로 분류하여 지원하고 있습니다.

현재 클래스화하여 사용할 수 있도록 만들 구 있습니다.  조만간 공개 토록하겠습니다.

뭐 거창한것은 아닙니다. 아래 소스와 같이 쿼리문을 날리고 그런 정도의 지원이 아닙니다.

FF의 글로벌 오브젝트로 지원되는 것이구요. 그래도 Ajax개발에 있어서는  절실히 필요한 부분임은

확실합니다. 하루 속히 IE에서도 지원되고 Opera에서도 지원을 했으면 좋겠네요.


var database = openDatabase("Database Name", "Database Version");

database.executeSql("SELECT * FROM test", function(result1) {
  // do something with the results
  database.executeSql("DROP TABLE test", function(result2) {
    // do some more stuff
    alert("My second database query finished executing!");
  });
});


신고
Posted by Rhio.kim

사용자 삽입 이미지


Companion.JS adds the useful Firebug "console" feature to Internet Explorer.

You can use "console.log(), console.debug(), ..." the same way you used it with Firebug.

Not all the functions are implemented so far on the version 0.2. The following functions are not yet implemented :

console.dir, console.trace, console.group, console.groupEnd, console.profile, console.profileEnd

console.log(object[, object, ...])

Logs the message on the console, all arguments joined by space. The first argument may be a string with a "printf"-like format.
Recognized patterns are :

%s String
%d , %i Integer (numeric formatting is not yet supported)
%f Floating point number (numeric formatting is not yet supported)
%o Object hyperlink

console.debug(object[, object, ...])

console.info(object[, object, ...])

console.warn(object[, object, ...])

console.error(object[, object, ...])

Log messages with custom icon depending on the function used.

console.assert(expression[, object, ...])

Test if the expression is true. If so, the info is logged in the console.

console.dirxml(node)

Log the HTML source if the requested node.

console.time(name)

console.timeEnd(name)

Stops a timer created by a call to console.time(name) and writes the time elapsed.

신고
Posted by Rhio.kim