웹앱스콘 2008을 다녀와…



첫 회인 작년이 기억난다.  그때엔 기대반 관심반 뭔가 얻어보기 위해서 참여하게 되었었는데 매우 뜻 깊은 시간이였다.  올해는 작년보다는 뭔가 좀더 성숙한 분위기가 있었던 것 같지만 기대가 컷던 만큼 아쉬움은 남는다.

첫 세션부터 참여한 많은 사람들도 눈빛에서 열의가 느껴졌다. ( 경품을 향한 열의였을지도.. ^^; )  많은 분들이 조엘 스폴스키를 보기 위해서라고 할 정도로 조엘 스폴스키의 강연에 대한 기대는 그 이상이였던 것 같다. (모두 알아들을 수 있었다면 ^^;)

일단 후기에 앞서 장소에 대한 의문이 들었다.  이번엔 왜? 코엑스가 아닐까?  작년의 경제 상황과 현재의 경제 상황은 매우 다르지만 그런 것도 작용한건가?  아니면 좀더 많은 참여자를 위한 배치였을까 다양한 생각이 들었었지만 글의 의도와 벗어나니…

Front-end 에 대한 각 세션별 후기

Back-end 기술 대비 Front-end 기술에 대한 관심도는 역시 웹 앱스콘의 성격에 좀더 가까워서 인지 참여율이 더욱 높았다. 오전 9시가 시작임에도 불구하고 매우 많은 분들이 웹 개발이 아닌 기술에 대한 관심도가 매우 높음을 느낄 수 있었다.  

사용자 삽입 이미지


Front-end 1 session 웹 사이트 성능 튜닝

첫 세션 스피커(Speaker)인 박경훈님은 “웹 사이트 성능 튜닝” 이라는 타이틀로 스티브 사우더스(Steve Souders)의 저서인 High Performance Web SItes국내 번역서를 최근 출간하였고 그 책의 내용을 바탕으로 한 성능 튜닝에 대한 내용을 선보였다.  책의 내용을 모르는 분들과 웹 사이트의 퍼포먼스 향상에 대한 관심이 높은 분들에게는 더 없이 좋은 주제가 아닐까 생각을 합니다.

다만 아쉬웠던 점은 거의 모든 내용의 책을 바탕으로 하고 있었고 그렇다 보니 사례 또한 국외의 사례 뿐이여서 크게 와 닫지 않았을 수도 있다는 생각이 들었다.  사실 국내의 인프라가 상대적으로 워낙 좋다 보니 그간 웹 퍼포먼스에 대한 생각은 네이버, 다음과 같은 거대 포털에서나 심도있게 고민할 내용이였고 많은 웹 개발자들이 알더라도 실무에 적용할 만한 가치와 어떤 식으로 접근해야 할지에 대해 많은 국내 사례가 있었으면 어떠하였을까라는 생각을 해봅니다.

예를 들어 네이버의 실시간 검색어의 이미지 맵(월)의 활용 예시(1,2,3,4,5,6,7,8,9,10 의 순서를 표현하는 이미지를 하나의 이미지로 만든 이유와 실제 적용에 대한 효율) , 구글 코리아 메인에 있는 이미지 애니메이션에 대한 예시 등
사용자 삽입 이미지

책의 내용은 야후에서 실제로 퍼포먼스 향상을 위해서 검증 받은 내용들을 기준으로 많은 룰들을 제시하고 있으며 이 룰은 크게는 서버, 네트워크, UI 3가지로 나눠 분류해 주고 있다.  위에서도 언급했지만 드넓은 외국의 땅의 인프라와 국내의 인프라는 확연히 차이가 나 웹 사이트 퍼포먼스에 관심과 연구가 필요하지만 국내에는 그에 비해 그렇지 않고 있었다.  그래서 이번 세션을 통해 개발자들에게도 웹 사이트의 퍼포먼스에 대한 관심뿐만 아닌 웹 사이트 퍼포먼스 향상을 위한 좀더 나은 방법을 제시할 수 있는 방향으로 발전해 갔으면 한다.

참고로 Steve Souders 는 현재에도 웹 퍼포먼스 향상을 위해 몇 가지 룰을 더 정립하였고 검증을 통해 블로그와 YDN을 통해서 계속 발표하고 할 예정이라고 합니다.


사용자 삽입 이미지

Front-end 3 session 웹 애플리케이션 디자인 방법론

UXFactory 블로그는 최근에 알게 되어 매우 다양한 정보를 얻을 수 있었고 블로그 글들에서 느껴지는 UX에 대한 관심과 정보성에 감탄을 했었다.

RIA 개발을 하며 사용자의 경험에 대한 중요성을 절실히 느끼고 있던 터라 매우 관심가는 세션이였다.

하지만 시작하기 전 세션명에는 작은 혼동이 왔었다.  “웹 애플리케이션 디자인 방법론” 과연 여기에서 말하는 디자인이 개발을 위한 설계인지 Visual한 요소로 표현하기 위한 디자인인지 혼동스러웠다.  하지만 발표의 내용은 극히 개발을 위한 설계의 일부분도 극히 Visual한 요소를 표현하기 위한 것도 아닌 사용자 관점에서 본 정보를 표현하고, 동작하도록 하는데 있어서의 디자인이였다.

“ 단순함과 복잡성은 서로를 필요로 한다 – John Maeda “  

UX에 대한 많은 자료와 정보는 UXFactory를 통해 좀더 상세히 알아볼 수 있을 것이고 강연의 내용은 더 없이 좋은 내용이였던 것 같다. 아쉬운점 블로그 홍보가 다른 세션에 비해 많았다..




Front-end 4 session 웹 접근성 테스트 기반 개발 방법

Hooney.net의 운영자인 조훈님을 처음 멀리서 뵙게 되는 곳이였는데 사진과는 사뭇 다른 모습이였다.  먼발치에서 봐서 그런지 얼굴이 보이지는 않았다.
사용자 삽입 이미지

결론부터 말하자면 너무 자세한 PT와 자세한 예시 때문에 짧은 시간동안 많은 자료를 발표하는데 있어서 매끄럽지 못했던 것 같았다.  하지만 이미 웹2.0과 함께 웹 표준에 대한 관심은 매우 높아져있고 그에 관련하여 실무에서 웹 표준을 지키기 위한 무성한 이론들을 실무에서 적용할 수 있는 테스트 개발 방법론에 대해서 제시해 주어서 웹 표준에 관심있는 개발자들과 디자이너 혹은 기획자까지 그 관심과 기술이 확산되리라 예상해 본다.

요약 Front-end 세션은 오전 시간으로 사뭇 인원이 적고 피곤함에 열의가 부족할 줄 알았지만 그 관심도는 매우 뜨거웠던 것 같다. 또한 Speaker로 발표하신 분들 또한 짧은 시간 기술에 대한 많은 정보를 공유하려 힘쓰셨던 모습에 감사한 마음을 전합니다.
 

이렇게 오전 세션은 막을 내렸고 오후 세션부터는 매우 무겁지만 진보적인 웹에 대한 Keynote 발표 시간이였습니다. 

오후 첫번째 세션으로 “대형 웹 서비스를 위한 아키텍쳐 관점에서의 과제” 라는 주제로 NHN의 함종민 본부장님의 발표가 있었습니다.

역시 전반적인 웹의 흐름에 대한 요약과 현재 NHN과 같은 거대 웹 서비스의 SOA에 대한 과제에 대한 내용은 무거웠다.  중간 PT 자료 중 아들의 학교 시험문제의 답변 내용인 “어른이 될수록 필요한 것이 많아진다” 라는 답변 현재의 상황을 절묘하게 표현하여 모든 관객으로부터 웃음을 터트리게 하였다.  
사용자 삽입 이미지

무거운 내용이였던 만큼 발표 자료를 이용해주세요. ^^;



SHOWME : StoryBlender 해외 도전기
오전 세션 오후 세션의 시작으로 연달아 거친 남성분들의 음성을 듣다 고진영님의 목소리는 분위기가 몹시도 화사해지는 듯한 느낌을 들었다.  본인 뿐만 아니라 그렇게 느끼신 분들이 더러 있을 듯 했다.  
사용자 삽입 이미지

SHOWME는 브랜드의 경험에 대한 홍보를 위한 세션이였다.  StoryBlender의 성공을 위한 도전기를 파노라마처럼 간단 명료하게 잘 설명해 주셨습니다.  (발표 자료를 이용해주세요)



다음은 “향후 10년간 인터넷 서비스 전망” 이라는 주제로 다음 커뮤니케이션 손경완 CPO님의 Keynote에 대한 발표였다.  (발표 자료를 이용해주세요.)



사용자 삽입 이미지

PANEL을 모시고 “위젯, 웹 개발자의 신천지 인가?” 라는 주제로 발표한 위자드웍스, 오페라 소프트 코리아, 다음 커뮤니케이션의 각기 다른 생태를 지향하는 3곳의 발표는 매우 흥미 진진했다.  미래의 위젯에 대한 기대치가 매우 높아졌던 시간이였다.  

최근 Wizard Factory를 오픈한 위자드웍스는 순수한 웹을 지향하는 위젯 서비스,  오페라 소프트웨어 코리아,  역시 한달 전에 오픈한 다음 위젯 뱅크는 각각 추구하는 방향이 틀리며 그중 오페라 소프트웨어 코리아의 조만영님은 이미 오페라 소프트웨어에는 1300여개의 위젯을 보유하고 있으며 이 위젯은 데스크탑이던 모바일 기기이던 한가지 서비스를 위한 형태가 아닌 다양한 플랫폼에서 활용될 수 있는 위젯 플랫폼을 지향하고 있고 위젯에서 발생하는 수익은 개발자에게 돌아 갈 수 있다 라고 말씀하셨다. 

반면 다음(daum)의 경우는 위젯을 활용하여 2300만명의 카페 이용자, 400만명의 다음 블로그 이용자, 20만 여명의 Tistory 블로그 운영자를 위한 웹 위젯 환경을 제공하려는 목적을 두고 있는 듯 했다.  현재 다음 위젯 뱅크는 오픈 1달여가 지나고 있지만 개발자들의 참여가 부족함을 어필했다.  아직 오픈한지 1달여 밖에 지나지 않았고 국내 개발자들 사이에서 위젯에 대한 관심도는 그다지 높지 않을까 라는 생각을 했었다. 

이번 패널 토론을 통해서 본인도 느꼈지만 위젯에 대한 미래는 밝아질 것이라 예상해 봅니다.  또한 부족했던 부분은 개발자들에게 좀더 위젯에 가까이 접할 수 있는 방법론 제시가 있었더라면 좀더 낫지 않았을까라는 아쉬움도 남는다.


사용자 삽입 이미지

SHOWME “지도 서비스의 현황과 미래”
  Google MAP? 국내에서는 다음과 Sky View와 Street View가 있다.  간단한 데모 영상이 기억에 남는다.   현재 구굴의 맵에 비해 2배에서 3배 확대된 국내 항공사진이 이번 Sky View의 데이터로 활용된다고 한다.
  아마 이 서비스를 보게 된다면 국내에서 만큼은 구굴맵을 활용하지 않아도 될지도 모르겠다.  기대치가 너무 높은 서비스입니다..  이에 추가로 Street View역시 구굴의 Street View 서비스를 그대로 국내화 시킨 서비스인데 데모 영상에서는 화질이 좋지 않았지만 이 역시 구굴의 Street View 보다 못지 않은 서비스로 오픈하리라 본다.



사용자 삽입 이미지

오픈 API 해커문화라는 주제 상당히 매력적이였다.  Yahoo!에 Technology Evangelist 로 활동하고 계시는 정진호님의 몇몇 강연을 다녀 보았지만 늘 재미와 호기심을 자극하게 합니다.  늘 세미나 전 후에는 카메라를 들고 이곳 저곳을 카메라에 담으신다.  
본론으로 들어가 API 해커 문화라 하여 해킹과 정보보안에 대한 정보를 얻을 수 있을까라는 생각을 했었지만 다루는 내용은 달랐다.
Yahoo의 Hack Day는 24시간 먹을 것을 먹여가며 각 개발자들이 그동안 생각해온 아이디어로 개발하는 날이라고 한다.  이때 나온 작품들을 통해 Yahoo는 특허출원을 한다고 한다. 특히나 Yahoo Korea는 가장 많은 특허출원을 하였고 특허중 60%가 이 Hack Day에서 나온 것들로 이뤄진다고 한다.  또한 우수작에 대해서는 다양한 혜택도 주어지니 개발자를 위한 좋은 날이 아닐까 싶다.
외국의 경우 Hack Day가 매우 다양하게 있어 이런 경험을 많이 할 수 있어서 좋을 것 같다.  이런 문화는 국내 NHN의 경우에도 Burning Day라 하여 유사한 문화가 있다고 한다.


국내의 폐쇄적이였던 웹도 대형 포털의 움직임으로 오픈 형태로 바뀌어 가고 있습니다.  이렇게 오픈된 웹에서 개인들의 실세계의 활동이 가상 세계로 옮겨와 동일하게 동작할 수 있는 환경들이 속속 갖춰가고 있습니다.  또한 최근 성공한 국외 서비스들도 분명 이와 비슷한 태생을 갖고 있다는 것을 느낍니다. (어떤 Speaker의 말 일부인용 : 기억이 나질 않아서^^;)

사용자 삽입 이미지

마치며...
2007년에 비춰본 2008 웹 앱스콘은 미래 기술에 대한 정보 공유의 관점이 아닌 현재 기술의 진보할 방향이라고 하고 싶다.  2007년의 발표 내용들은 발표 이후부터 약 1년여간 국내의 웹 패러다임을 바꿔놓을 정도의 파워라고 생각했었는데 이번 웹 앱스콘에서는 그런 부분은 매우 미약한 감이 있었다.

현재의 기술은 단지 이미 크레이티브함은 찾아보기 힘든 외국 기술의 전파라는 느낌이 강하게 든다.  정보화 시대는 이미 글로벌화가 되었고 블로거 스피어와 다양한 매체를 통해 다양한 루트로 기술 전파는 이미 이루어지고 있기 때문에 좀더 나은 컨퍼런스가 되기 위해서는 좀더 도전적인 무엇인가 필요하지 않을까?

조엘 스폴스키의 강연 내용은 다른분의 후기에서....

컨퍼런스 사이트 : http://www.webappscon.com/



사용자 삽입 이미지

한국도 올해 매쉬업 경진대회가 얼마 남지 않았을 텐데요.
일본에서도 어제 19일 매쉬업 경진대회에 대한 결과가 발표 되었다고 합니다.

이번 부분 최우수상을 받은 "ChaMap"은 Kentaro 씨가 구굴 맵 API를 활용하여 지도상에서
채팅도 하고 지도상에 표시된 위치에 메시지를 입력할 수 있고 음성 기능을 통해 메세지를 입력해
넣을 수도 있습니다.

또한 특정 지역을 확대/축소의 레벨에 따라 음식점등의 아이콘이 표시되고 구매 정보와 함께 메세지를 남길 수 있습니다.

일본의 IA(Information Archtecture)성 컨텐츠와 달리 이쁜 UI 덕분에 가산점을 받았다고 합니다.

서비스의 가장 큰 특징은 지도상에 정보를 공유하면서 커뮤니케이션 할 수있는 것인데요.
참 독특한 아이디어인것 같습니다.

즐겨 사용하는 네이버 지도 검색에도 업체 정보에 간단한 댓글 형식의 메세지는 남길 수 있는데 이에 반해 "ChaMap"은 Map을 이용하여 커뮤니케이션을 왕성하게 할 수 있게 되겠네요. 

맵과 커뮤니티?? 어울리지 않을 것 같으면서도 어울리게 구현했군요.

사용자 삽입 이미지

저는 Chamap에 들어가 Dokdo in Korea 라고 남겨 보았습니다. ;)


URL : http://chamap.net/
Mashup Award : http://mashupaward.jp/
참여작 : http://mashupaward.jp/winner/
원문 : http://codezine.jp/article/detail/3189


이제 20대도 100일도 남지 않았다.  괜히 슬퍼진다. 
이미 20대를 넘어서 이 글을 보시는 분들 저를 보면 한마디씩 하시거나 댓글로 한마디 하고 싶어질 지 모릅니다.  하지만 슬퍼지는 건 현실입니다.

남은 100여일 동안 추억에 남고 기억에 남는 일을 만들 계획을 세웠습니다.
일주일이란 시간동안 나에게 자유가 주워지는 시간은 금요일 밤부터 월요일 아침까지이다.  그외의 시간에는 회사와 미래의 웹 기술에 대한 기술 연마에 힘써야한다.

최근에는 주말도 마다하고 몇 개월간의 스터디를 두어개 씩 진행해 왔었다.
그만큼 애인(愛人)에게 소홀했었다.

나의 연애생활의 히스토리는 참 깊고 감사할 일이 너무 많다.
8년차 연애생활 동안 여러가지 기억이 자리 잡혔고 이제 20대의 마지막 기로에서 애인을 위해 좋은 추억을 남겨주고 가려는 계획도 20대의 마지막 100일의 계획중에 하나로 잡혀있다.

작지만 오늘은 작은 재료를 모아서 요리를 해보았다. 
최근에 멋진인생님 블로그의 스파게티를 보고 블로그에 요리 레시피에 대한 글을 올려보고 싶었다. 전혀 블로그의 성격과 맞지는 않지만 ;)

주말에 가끔 요리를 하지만 특별히 올려보자는 생각으로 만든 것들은 아니였었다.


요리의 완성 작품부터 올려본다.
요리명은 포테이토. 햄과 맛살의 삼각관계
결과는 매우 성공적 애인(愛人)에게 맛있다는 소리를 들었고 그 결과는 잠시 후 사진을 통해서 공개하려 한다.

간단히 포테이토. 햄과 맛살의 삼각관계 레시피에 대해서 소개를 할까 한다.

주  재료 : 감자(포테이토), 햄, 맛살
추가재료: 청량고추2개, 대파 1/2(파란 부분과 뿌리 부분), 양파 1개, 다진 마늘 작은 1큰 술, 간장, 소금

모든 재료를 마트에서 대략 5,000원이면 모두 구매할 수 있다. 


레시피

1.    일단 감자를 잘 깎아서 채를 썰듯이 썰어 불에 잠깐 행궈 준다. (전분 때문에 요리할 때 감자 채가 눌러 붇거나 위에 사진처럼 빨리 그슬려져서 검게 타는 경우가 많다.)




2.    적당한 기름과 물에 행궈 뺀 감자를 후라이팬에 잘 볶는다.

3.    한 5~10여분 굽다보면 감자가 노릇노릇 익어가는 것 같으면 채 썰은 양파를 잘 흩어 뿌린다.   양파를 너무 빨리 넣는 것 같기는 하지만 말랑말랑한 양파도 너무 좋아한다.




4.    두가지 재료가 적절히 익어가면 간장을 일반 숟가락으로 가득 두 수푼을 넣어준다.  그러면 완성된 요리처럼 색깔이 맛깔스러운 색갈로 변한다.




5.    간장을 감자와 양파와 잘 섞고 바로 햄과 맛살을 넣는다.  잘 섞고 2~4분 정도 더 잘 저어 준다.




6.    마지막 2~4분의 끝 1분 쯤에 잘게 썰은 대파와 청량고추를 흩어 뿌리고 역시 잘 섞어주면 된다. (이것은 맛과 향도 중요하지만 붉은 빛의 햄과 맛살에 대조적인 푸르른 채소가 썩이면서 더욱 맛깔스러워지기 때문이다.  꼭 파와 청량고추가 아니여도 깻잎이나 부추와 같이 푸른색을 추가하면 더욱 좋습니다.)



이렇게 완성된 요리와 애인(愛人)에게 밥상을 차려 주었다.  그다지 감동을 하지는 않았다. 
당연히 해줘야 하는 것 아니냐는 눈초리였다. ;(


완성 품


하지만 먹고나서 한마디  “양요리사 올~~~”
저렇게 넉넉히 했던 요리가 1주일은 먹겠지 생각하고 있었는데 그게 아니였다.

한끼 식사로

요거 밖에 남질 않았다. ;(


한끼 식사였지만 애인에게 맛난 음식을 만들어 줄 수 있어서 좋았다.  제발 20대의 마지막 요리가 되길 바란다. ;)

JavaScript Library | Posted by Rhio.kim 2008/10/15 01:50

Good bye alert(); - JavaScript Library

심플한 라이브러리를 소개할까 합니다.  최근에 라이브러리 소개를 하지 않았는데 오랜만에 ^^..
소개하는데도 당연히 이유가 있겠죠.



Blackbird 라는 라이브러리 입니다.

일단 사이트에 접속을 하면 큰 글자로 이렇게 적혀있습니다.


Blackbird 에게는 "만나서 반가워" 이라고 말하고 alert() 에게는 "이만 안녕" 이라 말하라고 합니다. 
그래서 무엇인고 봤더니 log와 profiler로 활용하기 좋은 rich application을 JavaScript로 구현을 해 놓았군요.
이런 라이브러리야 이미 YUI에도 유사한 모양으로 있고 firebug에서도 강력하게 지원을 해주고 있는데...

깜직한 아이콘은 둘째 치고 개발자 편의를 위해 단축키까지 처리해 놓은 것을 보면 참. 많은 것을 느낍니다.

이미 나온 Blackbird 라이브러리는 누구나가 만들 수 있지만... 처음 나온 Blackbird 라이브러리는 처음 만든 개발자의 스킬과 마인드에서 밖에 나올 수 없는게 아닐까 생각해봅니다.

alert() 에게 "이만 안녕" 이라 말 할만 한가요?

Library : http://www.gscottolson.com/blackbirdjs/
Google : http://blackbirdjs.googlecode.com/
JavaScript | Posted by Rhio.kim 2008/10/11 14:10

JavaScript Injection Attack

JavaScript Injection Attack - 자바스크립트 인젝션 공격

JavaScript 보안 관련 자료가 있어 번역하여 올립니다.
웹 기술의 변화와 관심이 달라지는 만큼 함께 신경써야 할 부분도 많아지고 그만큼 복잡해지나 봅니다.


최근 JavaScript 인젝션 공격이 유행하고 있습니다.  Malware 감염을 전파하는 효과적인 수단으로 이러한 종류의 공격을 활용하는 악성웨어들이 늘고 있다.

불과 1 년 전만해도 악의적인 공격자가 의지하고 있던 것은 공격용 Web 사이트를 가리키는 이메일, 검색 링크 또는 인스턴트 메시징 웜 등의 연결로 사람들을 유도하는 방식이었다.

지금은 JavaScript 인젝션 공격을 이용하여 Web 사이트의 방문자를 "납치"하고 만다. 이 공격은, 이른바 어둠 세계의 해커들이 악성웨어가 만연하도록 하는데 사용하는 맥가이버 칼과도 같다.


예시


우리는 다수의 높은 트래픽을 보았고, 합법적인 웹 사이트들은 이 기술을 이용해 공격을 받았다.  최근  알렉사 랭크 3172의 미국의 매우 유명한 게임 포털인 MegaGame도 하나의 예이다. 자바스크립트 인젝션 공격은 MegaGame 서버 중 하나의 서버에 몇 줄의 코드를 성공적으로 추가하였고 이 추가는 아무것도 모른체 웹 사이트를 접속한 방문자들을 악의적인 유럽 사이트로 이동시키고 악성웨어에 감염시키려 시도되었다.

그 악의적인 사이트는 두 가지 다른 방법을 통해 방문자들에게 공격을 시도하였다.  첫 번째는 Microsoft MDAC RDS.Dataspace ActiveX Control Remote Code Execution Vulnerability (MS06-014).
를 시도했다.

 


이 공격은 Microsoft's Internet Explorer (IE) 브라우저를 사용하는 방문자에게만 성공할 수 있었다.
왜냐하면 이 Web 사이트는 기본적으로 ActiveX 컨트롤의 사용을 요구하고 ActiveX 컨트롤 및 IE 간의 상호 작용에 존재하는 허점 (루프 홀)을 통해 원격으로 컴퓨터를 공중 납치하기 때문이다.

두 번째 공격은 다운로드 시 실행되고 IE뿐만 아니라 "Firefox"버전 1.0이 2.0이 대상이다. 이 공격에서는 JavaScript를 사용하여 Web 브라우저 종류를 확인하고 그 후에 미국 어도비 시스템의 Flash의 악용을 통해 공격에 대한 바이너리 파일을 PC에 다운로드하고 실행한다.

 


MegaGames의 Web 사이트는 여전히 감염된 상태. 불행히도 이것이 바로 현재의 상황을 말해 준다

인터넷 이용자의 대부분은 "pr0n"(포르노) 나 "warez"(와레즈 : 불법 복제 소프트웨어) 와 같은 계시의 위험이 높다.  (dodgy: 자못 의심스러운) Web 사이트를 방문한 경우 감염도 없다고 생각하고 듯하지만,  불행이도 그것은 잘못된 생각이다.

Malware 수법은 이전보다 성공화되고 있으며, 현재는 제대로 된 뉴스 사이트 및 비즈니스 관련 사이트도 감염되어있을 가능성이 있다.

"안전한 Web 사이트는 존재하지 않는다"는 것을 보여주는 또 경우가 BusinessWeek.com이다.  아주 정통으로 접근할 수가 많은 이 사이트가 SQL 주입 공격 타겟이 됐다.  이 같은 SQL 인젝션 공격이  JavaScript 인젝션 공격으로 연결 된다.

출처 : http://www.f-secure.com/weblog/archives/00001502.html


포스팅하려고 준비해 둔 JavaScript Injection 공격에 대한 자료를 첨부합니다.
상세한 자료는 아니고 아웃라인(흐름)에 대한 내용입니다.


생활/사진/인맥 | Posted by Rhio.kim 2008/10/08 09:40

회사 막내 동료의 첫 월급 선물

회사 막내 동료의 첫 월급 선물 마시마로 쿠션!!

너무 고마운 마음에 아침에 보자마자.
감사를 표하고 카메라로 찍었다.

이제 처음 시작하는 초년생의 월급 그다지 넉넉치 않겠지만 그것보다 이 쿠션을 샀던 마음
그 마음을 포장해 내게 준것에 너무 고맙고 감사함을 표합니다.

나의 초년생때는 단지 내 씀씀이에 월급을 소비하는데 바빴는데..


애디군 고마워요. ^-^
올해 Ajax Experience 에서 Oliver Steele 의 JavaScript 발표 자료입니다.
JavaScript의 예제 중심의 키 포인트를 집어주고 있네요.

JavaScript의 언어적 특징을 이해하는데 도움이 되겠네요.

블로그 : http://osteele.com/
페이지 : http://osteele.com/talks/ajaxian-2008/samples/
프리젠테이션 : http://www.slideshare.net/osteele/oliver-steele-functional-javascript-presentation
PDF : http://osteele.com/talks/Oliver_Steele_Functional_JavaScript_v2.pdf
JavaScript Study | Posted by Rhio.kim 2008/10/07 00:31

jQuery의 현재 그리고 미래


jQuery의 무서운 돌진…

jQuery의 MS와 Nokia이 adopting 소식과 존 레식 블로그의 컨퍼런스에 대한 소개 자료를 살펴보다.  약간의 번역과 요약정리 해봅니다.

jQuery 창시자이자 리더 개발자인 존 레식은 보스턴에서 열린 Ajax Experience에서 3일간의 행사 기간중 2개의 패널에서 아홉 가지의 이야기를 했습니다.  조만간 컨퍼런스의 발표 내용에 대한 것들은 비디오 자료와 함께 곧 포스팅 할 예정이라는데 언제 올라 올른지…

State of jQuery `08
급속한 성장을 보여준 jQuery에 대한 변화에 대한 프리젠테이션.  간략하게 요약하자면 jQuery 사이트의 UV와 PV의 향상, Google Trend에서도 확인할 수 있지만 2008년도의 jQuery의 변화를 보여주는 자료입니다.

아래 구글 트랜드의 그래프 자료를 보더라도 2분기에 오면서 꾸준한 유저층을 유지해오던 Prototype과 2007년 후반기부터 갑작스레 높아졌다 2008년 1분기에 급속한 하락한 Dojo에 반해 jQuery는 꾸준히 상승하고 있습니다.

비교그래프

Google Trend 자료



2008년 3월에 이미 Prototype과 비슷한 사용자층을 유지하고 있습니다.  Script.aculo.us가 있기는 하지만 ^^ 4월에서 6월의 기간 동안에는 Designer와 Ruby Dev 그룹에서는 이미 jQuery가 앞서가는 모습을 보입니다.

2008년에 다양한 기능 업그레이드와 퍼포먼스 향상의 대표적인 부분들에 대해서 알려주고 있었고 이에 대한 기술적인 다양한 방법으로 공개하였고 이로 jQuery의 트래픽이 꾸준히 상승한 것이 아닌가 추측해봅니다.

그리고 2009년에도 jQuery의 노력은 헛되지 않으리라 봐지는 다른 부분은 MS와 Nokia의 jQuery 탑재에 대한 소식도 빼놓을 수 없을 것 같습니다.  (Microsoft and Nokia are both adopting jQuery)

Nokia의 Phone 에 들어가는 웹 런터임(Webkit)에 사용될 포팅 어플리케이션의 작동을 위해 jQuery를 사용하고 새로운 Phone 에도 적용될 예정이라고 합니다.

Microsoft의 경우 그들의 개발 플렛폼 일부분에 jQuery를 만들었고 Visual Studio .NET에 탑재되었습니다. 그리고 jQuery를 이용한 다양한 컴포넌트를 제작하였습니다.

참조 : http://www.slideshare.net/jeresig/state-of-jquery-08-presentation/


jQuery Internals + Cool Stuff
이 프리젠테이션 자료에는 jQuery의 내부 기술과 쿨한 재료들에 대한 소개입니다.  Wrapping과 다른 사용자와 프레임웍들 간의 코드 충돌이 일어 나지 않도록 처리한 기술, Element에 Data 바인딩 및 캐시 활용 기술 등에 대한 소개,  jQuery의 Selector는 타 프레임웍과는 달리 비 종속적 동작으로 다른 프레임웍(Prototype이나 Mochikit)하고 함께 사용 가능하다는 것과 동작 원리에 대한 소개,  Event System 에 대한 소개, 브라우저 Sniffing 에 대한 기술.  마지막으로 TDD(Testing Driven Development) 를 위한 Suite 와 Profiling에 대한 소개가 있었습니다.

참조 : http://www.slideshare.net/jeresig/jquery-internals-cool-stuff-presentation/


JavaScript Library Overview
  90분 동안 발표한 자료로 다양한 라이브러리의 Overview는 각 라이브러리들 간의 비교를 쉽게 파악할 수 있도록 꾀 많은 자료 매우 다양한 방면에서 비교, 분석해 놓았네요. 

참조 : http://www.slideshare.net/jeresig/javascript-library-overview-presentation/
Ajaxian : http://ajaxian.com/archives/thinking-about-the-difference-between-frameworks


존 레식의 활동과 jQuery의 개발팀의 열정만큼이나 2008년도에 JavaScript 프레임워크는 MS와 Nokia의 adopting으로 2009년에는 더 많은 유저층과 트래픽을 유지하지 않을까 짐작해봅니다.    

또한 다양한 RIA 개발을 위한 다양한 플랫폼들과 대등한 관계에서 경쟁구도를 형성하리라 본다.  Silverlight의 최대 라이벌은 Adobe Systems 의 Flash가 아닌 JavaScript(http://live-kj2164.tistory.com/?page=2)라는 전문가들의 말처럼 jQuery 뿐만 아니라 모든 JavaScript 프레임웍들이 2009년도에는 좀더 다양한 기술로 발전할 수 있었으면 하는 바램입니다.


자료 출처 : http://ejohn.org/blog/jqueryembraceextend/

'JavaScript Study' 카테고리의 다른 글

jQuery의 현재 그리고 미래  (0) 2008/10/07

Find Equal게임이란?
  간단히 같은 이미지 찾기를 JavaScript로 개발한 게임입니다.

모티브
  외국 사람들도 JavaScript, SVG, Canvas를 이용해서 게임을 만드는데 국내 개발자도 알고리즘과 아이디어로 게임을 만들 수 있다는 것을 보여주고 싶어설까? 

  한가지 본연의 동기부여를 추가한다면 Ajax/Rich Application을 개발할 때 HTML 구조, CSS, JavaScript의 DOM과의 작동에 대한 잘된 설계와 UX(사용자 경험)가 잘 혼합된다면 어플리케이션의 성능 향상과 실 사용자(end user)에게 분명 유용한 서비스 혹은 어플리케이션이 된다는 것을 보여주고 싶어서입니다.

왜 그런지는 다음 설명들을 통해서 살펴 보겠습니다.


요구
1.    게임용 이미지 리소스는 요소별로 따로 관리하지 않고 게임에 필요한 리소스를 하나의 파일로 관리한다.
2.    HTML, CSS, JavaScript의 완벽한 구분을 꾀한 Unobtrusive JavaScript를 지향한다.
3.    DOM, CSS 제어를 위해 Prototype.js Framework를 사용한다.


구현 방식
요구사항
A.    게임을 구동하고 사용자가 사용함에 필요한 기본 리소스는 초기 HTML과 함께 로딩한다.
B.    초급자, 중급자, 고급자별 Game Panel의 요소의 개수는 변할 수 있다.
C.    다양한 이미지로 화면이 리프래쉬 되거나 유저에 의해 reset 버튼을 이용할 경우에 다양한 이미지를 제공하여 식상하지 않도록 한다.
D.    틀린 그림 찾기 게임의 룰을 만족시킨다.

첫번째 요구사항은 매우 간단합니다. 하지만 왜 이렇게 하는 이유는 알아야겠네요.

<img src=”image_resource.jpg” style=”display:none;” />


  이렇게 html 페이지에 위와 같이하게 되면 이미지 리소스는 화면상에 노출되지 않은 채 로딩됩니다. 이는 유저에 의해서 게임을 할 때 이미지 리소스를 가져오거나 잘못된 CSS Background-Image 속성을 사용하게 되면 동일 한 이미지를 캐시를 활용하지 못할 수가 있기 때문입니다.  그래서 미리 HTML에서 로딩을 하게 되면 캐시를 활용할 수 있어 게임 동작 시 성능을 향상할 수 있습니다.

사용자 삽입 이미지


  두번째 요구사항을 만족하기 위해서는 위의 Game Panel을 Table구조나 Div 구조로 개발되어야 합니다.  하지만 틀린 그림 특성상 Table 구조도 적합하기 때문에 Table 구조를 선택하였고 동적으로 n*n(cel * row) 의 table을 생성할 수 있도록 하였습니다.

  자! 지금부터 설명할 부분이 이 게임을 구현하는데 있어서 필수적인 요소가 되겠습니다.  위에서 언급한 개발 시 요구사항 부분에서 언급한 내용처럼 이미 게임의 동작을 위한 Image Resource는 미리 제작되어 있습니다.  이것은 위의 Game Panel의 TD에 들어갈 요소들로 요소 별 하나의 이미지가 아닌 이 게임(틀린 그림 찾기)에서 사용될 수 있는 모든 요소 이미지를 하나의 이미지로 만들었습니다.  다음 그림과 같아집니다.

 
사용자 삽입 이미지


  흐름과 틀리지만 예를 들어 위의 Game Panel의 Table을 동적으로 만들 때 TD에 blank 이미지를 설정해 놓고 클릭할 때 해당 blank 이미지에 JavaScript를 이용해 src 속성에 이미지의 위치를 지정하는 방식도 있습니다. 하지만 그렇게 하면 다양한 요구사항을 받아들이기가 어려워지고 원격지의 이미지를 HTTP를 통해 가져오는 동안 문제가 발생하는 경우 표시를 못하게 되거나 다양한 문제점이 게임 진행중에 발생할 수 있습니다.

  그래서 위의 이미지 리소스와 같이 하나의 이미지 파일에 다양한 요소를 지정해 놓았습니다.  적어도 게임이 진행중에는 오류로 인한 문제는 최소화 해야 하기 때문입니다.  만약 초기 로딩 시 이미지를 가져오지 못한 경우에는 체크해서 사용자에게 알려주어 게임 진행에 대한 상황을 사용자에게 전달 할 수 있습니다.

  그러면 이 하나의 이미지를 어떻게 Game Panel에 표시할 것인가가 문제입니다.  큰 문제는 아닙니다. 누구든지 아는 부분일 것입니다.

  이미 로딩된 Image Resource를 Game Panel의 각 요소(TD)에 Style 제어를 통해서 표시할 수 있습니다.
각 TD에 style.backgroundPosition = ‘-0px -0px’; 와 같은 방식으로 부여를 하면 됩니다.

 
사용자 삽입 이미지


  위의 좌표처럼 TD에 backgroundImage는 Image Resource로 설정해주고 backgroundPosition을 제어하면 하나의 이미지 리소스로 다양한 위치를 각 요소에 설정할 수 있습니다.

  마지막 요구사항은 각 요소에 표시될 이미지가 순차적이라면 틀린 그림 찾기의 게임 룰을 만족할 수 없기 때문에 이미지 리소스에 있는 이미지 요소들을 랜덤으로 Game Panel에 설정하는 부분만 처리하면 유저가 게임을 할 수 있는 기본적인 설정이 갖춰집니다.

랜덤 설정은 알고리즘이니 조금만 고민하면 위의 조건들을 만족하는 렌덤 배열을 생성할 수 있을 것입니다.

랜덤 배열 범위 = ( ImageResource 가로요소 개수 * ImageResource 세로요소 개수) – 1;

 
사용자 삽입 이미지


랜덤 배열의 범위 즉 [0, 1 ,…, 195] 를 random 알고리즘을 이용하여 뒤섞어 줍니다.

_random: function(arr){
	var i = arr.length;
	if (i == 0) 
		return false;
	
	while (--i) {
		var j = Math.floor(Math.random() * (i + 1));
		
		var ti = arr[i];
		var tj = arr[j];
		arr[i] = tj;
		arr[j] = ti;
	}
		
	return arr;
}


 섞여진 배열(return arr)은 Image Resource의 index를 가리킵니다.  즉 TD의 backgroundPositon 을 제어할 때 바로 이 섞여진 배열을 통해서 지정하게 됩니다.  하지만 틀린 그림 찾기는 위의 섞여진 배열로만은 이용할 수 없습니다. 

  Arr = [ 28, 13, 99, 2, 84, 50, 38 ];
  Arr = [ 28, 13, 99, 2, 84, 50, 38, 28, 13, 99, 2, 84, 50, 38 ];
  Arr = [ 84, 28, 38, 13, 2, 13, 84, 50, 2, 38, 28, 99, 99, 50 ];

위의 과정을 거치면 정말로 틀린 그림을 찾기의 배열 요소가 갖춰집니다.  이 배열을 이용해 Game Panel의 각 구성 요소에 Image를 지정할 때 Image Resource의 이미지 index와 매칭하여 Position을 TD의 CSS Style로 부여합니다.


요약
여기까지는 게임을 만들면서 생겼던 주요 이슈에 대한 정리입니다.  대단한 건 아니지만 여러 가지 이유는 숨어있습니다. 

요약해보자면 HTML에 미리 <img> 를 이용하여 Image Resource를 로딩한 이유 또한 이미지를 하나의 파일에 넣어둔 이유, CSS Style 제어를 통해서 이미지를 렌더링 한 이유 좀더 찾아보면 몇 가지가 더 있겠네요.

구현의 초점은 게임을 즐기는 유저에게 게임을 즐기는 동안에는 최대한의 성능과 오류가 발생할 요인을 최대한 줄이는데 있습니다.  간단한 게임을 가지고 복잡하게 설명한 건 아닌지.


웹 서비스도 마찬가지 입니다.  Ajax/Rich Application 개발 시에 간과해서는 안될 상황들이 매우 많습니다.  아시다시피 크로스 브라우징부터 검색에 노출에 대한 부분,  HTTP에 대한 이해, 다국어 지원 여부,  Embeding 에 대한 부분… 나열하자면 매우 많겠네요.

그만큼 단순 요구사항에 대한 구현이 아닌 웹 서비스에서는 다양한 환경과 사용자 경험에 대한 바탕으로 설계가 일차적으로 되고(머리 속의 설계도 좋을 것 같습니다.) 개발이 되어진다면 좋지 않을까요?

사용법
이미 TFindEqual.js 파일에 기본 설정값이 지정되어 있어서 4*6의 게임이 자동으로 생성됩니다. 개수를 늘리거나 줄이고 싶으면 row와 cel 속성을 수정해주면 됩니다. 나머지 속성은 고정된 속성입니다.
//기존 소스
var FindEqual = new TFindEqual(this);
Event.observe(window, 'load', FindEqual.set.bind(FindEqual));

//이렇게
var FindEqual = new TFindEqual(this, {
            target: 'panel', //Game Panel이 그려질 target 엘리먼트 id
            row:    4,    //게임 row 개수
            cel:    6,    //게임 cel 개수
            bgrow:    14,  //Image Resource 가로 개수
            bgcel:    14,  //Image Resource 세로 개수
            width:    57, //이미지 너비
            height:    56 //이미지 폭
        });
Event.observe(window, 'load', FindEqual.set.bind(FindEqual));


작성된 게임 소스와 작성된 PDF를 첨부합니다.