Saturday, August 8, 2009

서버 - 사이드 자바 스크립트 표준 라이브러리

009년 1월 29일 - 21:58 - 크리스 Zumbrunn
Kevin Dangoor asks what Server Side JavaScript needs and launches more talk about a standard library for Javascript on the server-side. 케빈 Dangoor 서버 사이드 자바 스크립트로 무엇을 요구하고 서버 - 측면에 자바 스크립트에 대한 표준 라이브러리에 대한 자세한 이야기가 시작됩니다.
Having a unified API for libraries in different environments would in 서로 다른 환경에서 도서관에 대한 통일된 API를하는 것이 my opinion be nice especially because it would allow higher level 특히 내 의견을 허용하기 때문에 더 높은 수준의 것이 좋은가 modules to be shared between different server-side javascript 모듈을 다른 서버 - 쪽 JavaScript 사이에 공유할 수 environments. 환경. One problem that has slowed this from happening in the 에서 일어나는 일들이 더뎌지고있다는 한 가지 문제 past has been that in Java-based environments like Helma , Sling and 과거가있다는 Helma, 슬링과 같은에서 Java - 기반 환경 Xjs , Rhino makes the direct scripting of Java packages so easy, that Xjs, Rhino를 자바 스크립트의 직접 만들어 그렇게 쉬운 패키지 some stakeholders don't believe the added burden of maintaining an 일부 투자자 믿지 못하는 유지의 추가 부담 additional API layer in javascript is reasonable for the benefit they 자바 스크립트 API를 레이어의 추가 이익을 위해 합리적인 사람들이 would get from it. 에서 얻을 것이다.
Some pointers to current server-side javascript library 현재 서버에 어떤 포인터 - 사이드 자바 스크립트 라이브러리 projects in the realm of the Helma project and to other efforts for a the Helma 프로젝트의 다른 영역에서 사업을하고 노력을 standard library for JS: JS에 대한 표준 라이브러리 :
The current Helma 1 versions come with two libraries containing 현재 Helma 1 버전을 포함하는 두 개의 라이브러리를 같이 several modules. 여러 가지 모듈을 제공합니다. The HelmaLib provides modules for core functionality 이 HelmaLib 핵심 기능에 대한 모듈을 제공합니다 such as Database, File, Ftp, Http, Smtp and SSH, some that extend 데이터베이스, 파일, FTP를는 HTTP, SMTP 및 SSH를, 같은 일부가 연장 built-in prototypes, and a few others. 내장 - 프로토 타입에, 그리고 몇 가지 다른. The Jala library adds further 이 Jala 라이브러리 추가에 추가 modules such as DNS, MP3 and XML-RPC and utility modules such as i18n, DNS를, MP3와 같은 모듈는 XML - RPC와 유틸리티 모듈 i18n 등 image manipulation, captcha, HtmlDocument, RemoteContent, Podcast, Rss 이미지 조작, captcha를, HtmlDocument, RemoteContent, Podcast를했고, RSS and other XML related modules. 그리고 다른 XML 관련 모듈을 제공합니다.
Modules are included either via a configuration file or at runtime via 모듈은 런타임에 구성 파일을 통해 또는를 통해이 포함되어있습니다 a method call. 수있는 방법을 전화. A module is only loaded once, even if included multiple 한 모듈을 단 한번에 여러 개 포함된 경우에도 로드된 times. 번. In the context of Helma 1, modules are loaded into the global Helma 1의 맥락에서, 모듈은 세계적으로로드된다 scope and they need to be nice and restrict themselves to a save 친절하게 범위와 그들이 필요로하고 있음을 스스로 제한할 namespace. 네임 스페이스.
For Helma NG , the way modules are included is changed to eliminate any possible namespace conflicts. Helma NG를 들어, 모듈을 포함하는 방법은 가능한 모든 네임 스페이스의 충돌 방지를 변경됩니다. Each module in Helma NG lives in its own 각 모듈은 자신의 삶에 Helma NG를 scope and can selectively import other modules or portions thereof into its scope. 범위선택의 범위를 다른 모듈 또는 그 일부를 가져올 수있습니다. Here again, when modules are imported in different 여기에 또 다른 모듈을 수입하는 경우 scopes, each module is only actually loaded once. 스코프 유일한 사실은 한 번 읽어 각 모듈입니다.
There has been some discussion with the goal of a unified library/ 거기 통일 도서관의 목표로 논의를하고있다 / modules architecture between different projects over in the Helma NG the Helma 넘는 NG를 서로 다른 프로젝트간에 모듈 아키텍처 group. 그룹. One of the major goals in Peter Michaux's xjs project is to provide a standard library and a shared module loading mechanism. 한 피터 미쇼의 xjs 프로젝트의 주요 목표의 공유 모듈 로딩 메커니즘 표준 라이브러리를 제공하는 것입니다.
29.1.2009, 19:58 2009년 1월 29일, 19:58

JavaScript , jQuery , AJAX 강의 모음


AJAX 가 웹 기술의 대세로 떠오르면서, Javascript 언어에 대해 새로운 접근들이 시도되고
다양한 AJAX 및 자바스크립트 라이브러리들이 출시되었습니다.
많이 쓰이니까 쉽게 쓸 수 있도록 하는 방법들이 나오는 건 당연하겠죠.

Script.aculo.us, Prototype.js , MooTools , jQuery, YUI ( Yahoo UI Library ) 등등..

수 많은 Javascript 라이브러리중 최근의 대세jQuery - http://jquery.com/ 입니다.

Google Trends를 통해서 위의 Script 라이브러리들을 비교해보면 이렇습니다.

http://google.com/trends?q=jquery+%2C+script.aculo.us+%2C+prototype.js+%2C+yui+%2C+mootools&ctab=0&geo=all&date=all&sort=0


그래프만 봐도 딱 보이시죠. 이렇게 jQuery 가 인기를 끌어가는데.. Microsoft 가 강펀치를 하나 날려줍니다.
위에 E 부분에 보면.. Microsoft 가 jQuery 를 Visual Studio 에 내장하겠다고 발표한게 보이실겁니다.
이제 ASP.NET 의 AJAX 프레임워크에서 jQuery 를 기본으로 내장하고 활용하게 되었습니다. - Microsoft to ship jQuery with Visual Studio

또한 Nokia 역시, 그들이 만들고 있는 Web Kit 기반의 Web-Runtime에서 jQuery를 사용할 것이라고 발표하였습니다.
http://jquery.com/blog/2008/09/28/jquery-microsoft-nokia/


Javascript 와 jQuery 공부하기


이제 Javascript 를 이용한 AJAX개발은 모든 웹 기반 개발의 기본기술이 되었습니다. 모바일 환경에서도 사용되는건 물론이구요.
한번 Javascript, AJAX와 jQuery 를 익혀보지 않으시겠습니까 ?
공부하시는데 도움이 될만한 강의 문서들을 링크해 드립니다.



다소 좀 때늦은 포스팅이긴 하지만, 사내 메일링리스트에 보내느라 정리해둔게 있어서 늦게나마 기록차원에서 올려둡니다.


[출처] http://xguru.net/blog/503.html

Thursday, August 6, 2009

성공하는 웹사이트 이름의 비밀 : 검지손가락으로 입력하는 알파벳으로 시작하기


성공하는 웹사이트 이름의 비밀 : 검지손가락으로 입력하는 알파벳으로 시작하기


애플 컴퓨터의 이름이 a로 시작했기 때문에 미국 전화번호부의 맨 앞에 올 수 있었고, 그 때문에 성공할 수 있었다라는 검증되지는 않았지만 그럴싸한 이야기도 있고, 캐나다의 국가대표 하키선수 중에 유난히 1~2월생이 많다는 이야기(아웃라이어), 그리고 우리나라의 성씨 중에 김씨가 가장 많은 점 등등... 아주 우연하고 사소한 차이에서도 운명이 좌우되는 케이스가 많이 있죠.

그러다 웹사이트 이름에도 이런 비밀이 숨어있지 않을까 하고 생각하다가 이런 생각을 했죠.

혹시 가장 많이 사용하는 검지 손가락에 위치하는 알파벳으로 시작하는 웹사이트를 사용자들이 더 자주 찾지 않을까?
라는 의문이 떠올라서 머리 속에 떠오르는 웹사이트 이름을 몇개 맞춰보았더니...

Google = g(왼손 검지)
Twitter = t(왼손 검지)
Facebook = f(왼손 검지)
Baidu = b(왼손 검지)
Flickr = f(왼손 검지)
Tistory = t(왼손 검지)
Gmarket = g(왼손 검지)
Youtube = y(오른손 검지)
Yahoo = y(오른손 검지)
Naver = n(오른손 검지)
Hangame = h(오른손 검지)
Nexon = n(오른손 검지)
Netmarble = n(오른손 검지)
me2day = m(오른손 검지)
Hanrss = h(오른손 검지)
...

그러고보니 uxfactory도 u(오른손 검지)로 시작하네요. 이 업계에 왜 유난히 N모사가 많은지에 대한 이유도 이 때문일까요? 그런 점에서 live.com을 최근에 bing.com으로 바꾼것도 잘 한 것 같아요.

검지손가락은 우리가 어딘가를 가리킬 때 가장 많이 사용하는 손가락이기도 하고(독수리타법으로 치기에 가장 빠르게 칠 수 있는 키이기도), 시각적으로도 키보드의 중앙에 위치해서 손바닥에 가리지 않고 가장 찾기 쉬운 위치에 있어요. 저도 굉장히 오랫동안 키보드를 사용해 왔지만 검지 손가락에 위치한 키를 입력하는 것이 여전히 가장 편하기도 하고요. 아마도 사용하는 키도 다른 손가락에 비해 2배이상 많고, 마우스 등을 사용하면서 상당히 많이 단련되어 있기 때문일 거에요.

그런데, 이런 경향은 키보드라는 인터페이스에 특화되어 있는 것이기 때문에 터치 환경으로 간다면 이러한 경향은 조금 달라질지도 모르겠네요. :)

Wednesday, August 5, 2009

[JSP] 톰캣에서 get방식으로 한글전달 할 때 문자 깨지지 않게 하기

톰캣서버에서 jsp를 돌릴 때,
get방식으로 전달된 한글이나 기타문자(2바이트 문자)가 깨질 때 아래와 같이 톰캣서버의 파일을 수정하면 된다.
(톰캣설치폴더)\conf\server.xml 의 파일을 열어 아래와 같은 부분을 추가해주면 된다.

<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443"/>
또는
<Connector port="8080"
maxThreads="150" minSpareThreads="25" maxSpareThreads="75"
enableLookups="false" redirectPort="8443" acceptCount="100"
debug="0" connectionTimeout="20000"
disableUploadTimeout="true"/>

부분에 아래와 같이 URIEncoding="euc-kr"과 같이 사용할 인코딩을 설정해주면 된다(S-JIS,UTF-8등)

<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" URIEncoding="euc-kr"/>

Monday, August 3, 2009

Whatever:hover : 익스플로러 CSS의 hover이벤트 지원

최근에 나온 대부분의 웹브라우저들은 모든 html요소에 :hover 선택자를 지원합니다. :hover 선택자를 사용함으로서, Javascript없이, 단지 CSS 만으로도 테이블의 한 행에 마우스를 올려놓을 경우에 대한 효과를 적용할 수 있습니다. 하지만 인터넷 익스플로러의경우, 사용자가 사용하는 브라우저의 버전에 따라서 :hover의 사용가능여부가 달라집니다.

Whatever:hover는 인터넷 익스플로러 6,7,8버전의 :hover, :active, :focus 선택자의 기능을 개선하도록 제작된 스크립트이며, 이 스크립트를 통하여 인터넷 익스프로러에서도 선택자를 사용하여, 다른 브라우저에서 나타나는것과 동일한 효과를 볼 수 있습니다. 버전 3의 경우 ajax를 지원함으로서, 자바스크립트를 사용하여 삽입된 html태그에 대해서도 위의 선택자들을 사용할 수 있게 되었습니다.

*역주: 인터넷 익스플로러 6버전에서는 a태그를 제외한 다른 모든 태그에서 hover가 먹지 않는다..

사용 방법 :
whatever:hover를 body영역에 넣으면 설정이 완료됩니다. 참고로, behavior에 들어가는 URL은 css파일이 아닌, html파일에 대하여 상대적인 주소가 들어갑니다. 아래와 같이 사용하세요,
body {
behavior: url("csshover3.htc");
}

작동 원리 :
모든 브라우저들은 자바스크립트를 사용하여 스타일시트의 규칙을 확인하거나, 새로이 규칙을 추가할 수 있도록하는 방법을 제공하고 있습니다. 보통, 익스플로러의 경우 지원하지 않는 모든 항목에 대하여 "unknown"이라는 값을 반환합니다. 예를 들어서 "div p:first-child"의 경우, "div p:unknown"로 변환되고, "p a[href]"의 경우는 "unknown"으로 변환되게 됩니다. 하지만 다행히도 익스플로러는 :hover 선택자를 인지하고 (그에대한 수행은 하지 않은 채) 그대로 놔두게 됩니다.

익스플로러는 또한 동/정적으로 미리 저장되었거나, htc나 hta 확장자를 가진 파일을 통해서 사용자가 직접 만들 수 있는 behavior라는 기능을 제공합니다. behavior는 스타일시트를 통해서 html에 링크되며, 지정된 behavior를 통해서 규칙지정자는 하나의 노드에 대해 더욱 향상된 기능을 제공할 수 있습니다.

위에 적어놓은 사항들을 사용하면, 익스플로러가 지원하지 않는 스타일 규칙을 찾는 behavior를 만들 수 있을 뿐만 아니라, 사용자가 지정한 방식으로 스타일 규칙을 처리할 수 있습니다. 이것은 다음과 같은 과정을 거치게 됩니다.

1. 익스플로러가 지원하지 않는 모든 :hover에 대한 스타일시트를 찾는다.
2. 새로운 클래스명을 사용하여 익스플로러가 지원하는 새로운 규칙을 생성한다.
3. 새로운 클래스명을 위한 스크립트 이벤트를 설정한다.

이러한 방식으로, :hover, :active, :focus는 익스플로러에서 지원될 수 있습니다. 그리고 개발자는 모든것이 자동으로 처리되기 때문에 behavior를 추가하는것으로서 모든 문제가 해결됩니다.

버전 1,2와 달리, 버전 3은 동적으로 추가된 html에 대해서도 지원을 합니다. 1,2버전과 와 3버전이 다른 점은 1,2버전의 경우 페이지를 로드할때에만 해당하는 요소에 대해서 위의 과정을 실행했지만, 3버전에서는 표현식을 사용함으로서 노드들이 그들자신에게 다시 콜백할 수 있게 하였다는 것입니다. 더 자세한 사항은 주석처리된 파일을 참고하세요.


=============================
오래전에 이 문제를 겪어서 whatever:hover를 발견했었는데, 이번에 다시 동일한 문제에 봉착했다. 문제는 역시 IE6상에서 a태그 이외의 태그는 hover가 적용이 안된다는것. 기억이 가물가물해서 인터넷을 한참 헤매다가 마침내 그때 발견한 솔루션을 발견하였다.. 역시 블로그의 장점은. 기록해놓으면 나중에 찾기 쉬워진다는 점이다. behavior에 관련한 한국어로 된 문서가 너무 없어서 다음에 공부하는 셈치고 한번 글을 작성해보는것도 좋을거같다.


아 그리고 출처는 여기! csshover3.htc 파일 다운로드도 여기에서!
csshover3.htc 소스파일을 분석해보니 꽤 신기했다. 이것도 글로 작성하고 싶은데... 시간은 없다...ㅠㅠ
http://www.xs4all.nl/~peterned/csshover.html

HTML, CSS, Javascript 설명및 태그 색인및 도움말 묶음(도움말 항목 형태)

HTML, CSS, Javascript 설명및 태그 색인및 도움말 묶음(도움말 항목 형태)

동적으로 Javascript 추가하기

HtmlElement script = HtmlPage.Document.CreateElement("script");
script.SetAttribute("type", "text/javascript");
script.SetProperty("text", "function BuyOne{0}(value) { alert(value); slobj.Content.{0}.PushFlickrToken(value) }");
HtmlPage.Document.Body.AppendChild(script);

밑에 적어드린 객체가 HtmlDOM 에 포함 되어 있는지를 체크 하고나서 Javascript가 필요하다면 위와같은 방법으로 만들어 주면 됩니다. 참~ 쉽죠잉~ (-_-;;... 하지만 전 완전 몰랐었던....이팀장님이 알려주셔서 포스팅을 ㅠ_ㅠ )

Sunday, August 2, 2009

보이는 UI, 보이지 않는 UX

 
MEGA NEWS Brand Site : ZDNet Korea | GameSpot Korea
2009.08.03.(월)

  *
  *
  *
  *
  *
  *
  *

  * 최신뉴스
  * |
  * 방송/통신
  * |
  * 컴퓨팅
  * |
  * 홈&모바일
  * |
  * 인터넷
  * |
  * 반도체
  * |
  * 게임
  * |
  * 과학
  * |
  * 포토
  * |
  * 인사/부음/동정
  * |
  * 인터뷰

  * 로그인
  * 회원가입
  * RSS

>>홈>뉴스>컴퓨팅
  
 
20개 기사를 저장할 수 있습니다.
 
  
폰트크기
 
[칼럼]보이는 UI, 보이지 않는 UX
옥상훈한국SW아키텍트연합 공동의장 okgosu@gmail.com
2009.07.28 / PM 06:23
ux

[패널토의 동영상보기] 전문가 5인이 말하는 ‘국내 앱스토어의 미래’
[지디넷코리아]얼 마 전 국내 IT기업들이 사상 최대의 흑자라는 실적 발표가 나왔다. IT기업들의 제품들은 반도체, 휴대폰 등 정보통신 기기들이다. 우리나라는 눈에 보이는 기계는 세계적으로도 손색이 없을 만큼 잘 만든다. 하지만 그 기계들 안에서 작동하는 눈에 보이지 않는 SW는 세계적인 것으로 꼽을 만한 것이 별로 없다.

 
세계적인 게임기 닌텐도의 성공이 SW보다는 HW만 잘 만들면 된다고 믿는 사람들이 많다는 것이 씁쓸함을 더한다. 뿐만 아니라 애플 아이폰의 경쟁력을 오만가지의 SW의 다양성으로 비교하지 않고 하드웨어 스펙만으로 비교하는 것을 보면 우리나라 기업은 눈에 보이지 않는 가치보다는 눈에 보이는 것만 바라보는 수준에 머무른 기업들이 많다.

 
■ 보이는 UI 보이지 않는 UX

SW 처럼 눈에 보이는 HW에 가려서 보이지 않는 것이 있다면 UI에 가려진 UX라고 할 수 있다. 그래서 UX를 다루는 사람들이 가장 경계해야 하는 것은 눈에 보이는 것만 디자인하려고 하고 인정하려는 자세다. 제목에 이미 나타나 있듯이 UI는 눈에 보이는 실체이지만 UX는 눈에 보이지 않는 것이기 때문이다. 다만 UX는 UI 디자인이라는 것으로 실체화되어 일부가 눈에 보일 뿐이다. UX의 실체가 무엇이길래 눈에 보이지 않는단 말인가?

 
■ 러브액츄얼리식 프로포즈가 먹혔던 이유

필자의 예전 컬럼에서 ‘UX는 러브액츄얼리식 프로포즈’라고 했다. 영화에서 그러한 프로포즈가 먹힌 이유가 무엇일까? 그 남자가 잘생겨서? 돈이 많아서? 아니면 스케치북 그림을 잘 그려서? 핵심은 프로포즈하는 ‘과정’에 있다.

 
진실한 자세로 그 여자의 마음에 한발한발 다가간 것이 그녀의 마음의 문을 열리게 한 것이다. UX는 프로포즈와 같은 과정이다. 스케치북과 같은 아이템은 UX를 실체화하는 과정에서 사용한 디자인적 도구일 뿐이다.

 
■ UX의 대상

UI는 보이는 것을 디자인하지만 UX는 보이지 않는 것도 디자인한다. UX는 어쩌면 보이지 않는 부분이 빙산처럼 더 클 수도 있다. 그래서 UX의 대상은 대체로 다음과 같이 정리해볼 수 있다.

 
1) Interaction: 사용자와 시스템 간의 상호 작용

 
2) Communication: 사용자와 시스템간의 소통 경로

 
3) Process: 작업 절차

 
4) Response: 사용자 조작에 대한 시스템의 메시지, 경고, 알림

 
5) Method : 인터페이스에 대한 사용 방법
- 출처: 2009.7, 제2회 한국SW아키텍트대회, UX의 X인터넷 적용 발표 中, 옥상훈

 
따라서 그러한 보이지 않는 것들로부터 것들을 UX를 실체화하기 위해서는 사용자의 행동을 많이 관찰해야 하고 여기서 최적화된 패턴을 도출해내는 작업이 필요하다.

 
예 를 들면 수도꼭지 하나라도 물을 나오게 하는 방법, 물의 양을 조절하는 절차, 물의 온도에 따른 적절한 경고 메시지 등의 다양한 고려사항들이 존재한다. 이러한 것들이 수도꼭지와 관련된 UX의 인터렉션, 커뮤니케이션, 프로세스, 리스판스, 메쏘드에 해당한다.

 
■ 올바른 과정에서 올바른 결과가 나온다

‘방망이 깎는 노인’에서 보았듯이 충분한 시간을 두고 올바른 과정을 거쳐야 제대로 쓸만한 방망이가 나온다. 설렁탕 국물도 10분 동안 전자레인지에 데워 나온 것과 10시간 넘게 푹 끓여서 나온 국물 맛은 말할 것도 없다.

 
어 떤 일이든 과정을 무시하면 그 무시한 것들이 어떻게든 잘못된 결과로 나타나게 되어있다. 급하다고 해서 과정을 무시하고 결과가 중요하다고 해서 과정은 아무렇게나 해도 된다는 생각을 가진 사람에게는 UX는 보이지 않는 허상일 뿐이다.

 
■ UX는 식스센스

영 어 속담 중에 ‘Seeing is Believing’이란 말이 있다. 하지만 UX에서는 이러한 속담은 다음과 같이 고쳐야 맞을 것 같다. ‘Seeing invisible is creative’ 즉 보이지 않는 것을 보는 것은 창조적인 것이다. 영화 식스센스처럼 세상은 보이지 않는 곳에서 보이지 않는 것들간의 인터렉션으로 만들어지는 현상들이 얼마든지 있다.

 
UX 도 단순히 눈에 보이는 아름다운 디자인이라고 간주하는 사람들에게는 시각적인 것에 즐거움에 불과하지만 보이지 않는 인터렉션을 발견하려고 하면 UX를 보는 새로운 식스센스가 움트기 시작할 것이다. 그리고 이 식스센스는 비즈니스적 가치를 발굴해내는 탐지기로 작용할 것이다.

 
[필자 소개]
97년에 한양대 생물학과를 졸업하고 자바개발자로 IT 무림에 입문한 12년차 IT 맨으로, 자바크래프트닷넷, 자바스터디 운영자로 활동했으며 한국 자바개발자 협의회 (JCO, JavaCommunity.Org)의 회장을 역임했다. 현재는 한국 소프트웨어 아키텍트 연합의 공동 의장을 맡고 있으며, 매크로미디어 컨설턴트를 거쳐 한국어도비시스템즈에서 RIA 아키텍트를 맡았었다. 현재 ‘okgosu.tistory.com’ 블로그를 운영중이다.