You mean that...

JSP 보드 솔루션 - 유니콘3

(Jason Lee) — Tue, 07 Sep 2010 10:27:42 +0900

지인의 부탁으로 JSP 개발자가 아님에도 불구하고, 요즘 유니콘3라는 JSP 보드를 사용하고 있습니다.
PHP의 그누 보드 같은 것인데 아직 자세히 살펴보지는 못했지만, 기능적으로 파악되기로는 그누의 서브셋 정도로 여겨집니다.

그런데, 왜 여기에 포스팅을 할까요?
특별히 유니콘3 모듈을 설명하기 위함, 분석한 내용을 공유하기 위함, 장.단점을 논하기 위함도 아닙니다.
다만, 유료 프로그램을 배포하시는 분의 불성의함을 좀 언급하고자 위함입니다.
저도 프로그램으로 밥벌어먹고 사는 사람 입장에서 이것저것 많은 무료 배포 프로그램도, 유료 배포 프로그램도 사용해 봤지만, 이런경우는 처음입니다.

도메인당 50만원정도의 가격을 받고 있는걸로 알고 있는데, 더군다나 호스트 네임만 달라도 별도의 동일 라이센스 비용을 받습니다.
50만원이라는 가격이 합당하냐는 문제를 논하지는 않겠습니다.
어쨌든, 유료이건 무료이건 솔루션을 배포 한다는 것은 해당 모듈에 대해서 어느정도의 지원을 감수한다는 의미로 저는 생각을 하고 있습니다.
더군다나 무료로 배포하시는 분들도 여지껏 제가 느낀 바로는
'저걸로 밥먹고 사는것도 아닌데 힘들겠구만~~~' 하는 느낌이었습니다.

그런데, 도데체 이놈의 유니콘3는 그런 느낌을 어느 구석에서도 받을수 없습니다.
첫번째로, 다운받은 모듈에서도, 퍼블리싱 웹사이트에서도 어디에서도 매뉴얼을 찾을수가 없습니다. 이게 도데체 말이 되는건지 모르겠습니다. 유료 프로그램인데도 말입니다. 퍼블리싱 웹사이트에 가면 매뉴얼이라는 항목이 있기는 합니다. 근데 정말 이걸 매뉴얼이라고 올리신건지....프론트 관련 내용은 전혀 있지도 않고, 관리자 페이지 캡쳐 받아서 항목에 타이틀들만 달아놨습니다.ㅋㅋ 저도 이번에 작업을 진행하면서 JSP 보드 솔루션을 전혀 찾을수가 없어서 울며겨작먹기 식으로 사용을 하고는 있습니다만, 이런 마인드로 배포되는 솔루션을 구매해야 한다는것이 너무 한심하다는 생각이 들뿐입니다.
두번째로, 웹사이트에 올라온 FAQ 및 질답에 피드백이 상당히 불충실합니다. 앞에서도 언급했지만, 실제 이용할수 있는 매뉴얼 조차도 없다면 이러한 질답 게시판들에 좀더 신경을 써야 할텐데, 역시 매한가지입니다. 어떠한 상황에 대해서 해답을 제시하는 경우가 별로 없습니다. 그냥 사용자들이 하다가 '자답, 잘 처리되었어요. 감사합니다.' 이렇게만 올라가 있는 해결이 대부분입니다. 도데체, 무엇이 감사한걸까요?ㅋㅋ

제가 이야기 하고자 하는것은 유니콘3 프로그램의 퀄리티에 대한 부분이 아닙니다. 또한, 전 JSP 개발자가 아니기 때문에 해당 부분에 대해 이슈를 제시할 만큼의 지식을 가지고 있지도 못합니다.
JSP 보드 솔루션 시장의 열악한 환경이나 여러가지 어려운 상황을 극복하고 해당 솔루션을 제공할수 있었던것은 물론, 개발자 및 배포자(회사?)의 노력과 인내로 산출되었을것임에는 틀림없었을 것이라 생각도 합니다.
그렇지만, 지금과 같은 유니콘3의 배포 마인드는 정말 어이없는 수준이라고 밖에 생각이 되질 않습니다. 유료로 프로그램을 배포한다는 것은 프로그램 뿐만이 아니라 어느정도의 추가적인 업데이트 및 지원도 함께 포함해서 가격이 책정된다고 생각을 합니다. 그러한 면에서 해당 개발자 및 배포자분들은 좀더 많은 각성을 하셔야 하지 않을까 싶습니다.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

.Net UTF-8과 EUC-KR 데이터 전달

(Jason Lee) — Tue, 31 Aug 2010 13:34:21 +0900

.Net으로 웹사이트를 구성하면 기본적으로 UTF-8 인코딩을 사용하고 변경이 힘든걸로 알고 있습니다. (앞에서 이야기하는 부분은 파일의 인코딩 부분이지 html Character Set을 의미하지 않습니다.)

하지만, 우리 나라 대부분의 인프라 - 예를들면, 빌링, 실명 인증등 - 는 아직까지 EUC-KR만을 지원하는 경우가 많습니다. 이번에 저희 서비스를 구축중에도 빌링과의 연계중 UTF-8을 지원하지 않는 경우가 발생해서 애를 먹기도 했습니다. 궁극적으로는 인프라서 서비스들이 UTF-8을 지원하는 방향으로 나아가는 것이 좋겠지만, 현재로서는 이로한 인코딩의 문제를 해결할 방법을 찾아야 하는 상황입니다.

이번에 서비스 구축중에 적용한 해결 방법에 대해서 간단히 열거 하겠습니다.

1. UTF-8 (자체 서비스) --> EUC-KR (빌링 서비스) 데이터 전송
위과 같이 UTF-8 서비스에서 EUC-KR 페이지로 데이터를 전송(페이지 호출)할 경우는 생각보다 간단히 처리가 가능합니다. .Net에서 전송 인코딩을 지정하는 방법을 제공하기 때문입니다.
헤더에 아래와 같이 ResponseEncoding 키워드를 적용하면 문제없이 데이터 전송이 가능합니다.

<% Page Language="C#" ResponseEncoding="EUC-KR"
AutoEventWireup="true" CodeBehing="~~~~" Inherits="~~~~" %>

2. EIC-KR (빌링 서비스) --> UTF-8 (자체 서비스) 데이터 전송
EUC-KR 서비스로 부터 UTF-8로 데이터를 전송 받을 경우 Request 객체로 부터 전달 받은 데이터들의 인코딩을 여러 방법으로 변경해 보았으나 가능한 방법을 찾지 못했습니다.
이와 같은 경우 데이터를 Binary 형태로 전달 받은 후에 인코딩을 변경하고 Split을 통해서 파라미터들을 적용해야 합니다.
아래에 샘플 코드를 첨부합니다.

샘플 코드
// Binary 데이터를 전달 받고 인코딩을 변경한후에 Dictionary에 저장 반환하는 펑션
private Dictionary<string, string> GetRequestArray(byte[] breq)
{
string allstr = HttpUtility.UrlDecode(breq, Encoding.GetEncoding("euc-kr"));

Dictionary<string, string> req = new Dictionary<string, string>();

string[] arrstr = allstr.Split('&');

foreach (string item in arrstr)
{
string[] arritem = item.Split('=');
req.Add(arritem[0].ToString(), (arritem[1] != null && arritem[1].ToString() != "" ? arritem[1].ToString() : ""));
}

return req;
}

// 펑션을 호출해서 전달값을 얻어오는 부분
byte[] buffer = Request.BinaryRead(Request.TotalBytes);
Dictionary<string, string> req = GetRequestArray(buffer);

참고로, 해당 내용은 다른분의 블로그에 있던 내용을 참고로 작성된 것입니다만, 당시에 적용에 정신이 없어 북마킹을 하지 못하고, 지금 찾으려고 하니 어느 분이었는지 찾기가 쉽지 않았습니다. 참고 경로를 명기하지 못해 죄송합니다.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

CSS Background-Position을 이용한 롤오버 버튼 작성

(Jason Lee) — Tue, 31 Aug 2010 12:37:59 +0900

Html 작성을 하다보면 수도 없이 Rollover(롤오버) 버튼의 제작 이슈에 당면하게 됩니다.
저같은 경우는
자바스크립트를 이용해서 이미지의 onmouseover/onmouseout 이벤트에 이미지 경로를 바꿔서 보여주는 형태를 많이 취했습니다. 하지만 이러한 방법의 경우는 각 이미지의 모든 태그에 해당 이벤트에 대한 코딩을 해야하고, 수정이나 변경 이슈가 있을 경우 소스들을 찾아가며 노가다를 뛰어야 하는 경우가 많았습니다.
그리고, 또 다른 방법으로는
a태그에 display 속성을 block으로 설정하고, backgournd-image를 이용하여 CSS에서 a:hover를 정의해 background-image경로를 바꾸어 주는 방식도 또한 사용해 보았습니다. 이 방법 또한 한가지 문제를 가지고 있는데, 브라우저 종류, 버전에 따라서 깜박임 현상이 심하게 발생되는는 문제가 있었습니다. 이 부분은 아무리 찾아봐도 처리할 방도가 없더군요.

그래서 다른 방법을 찾다보니,
예전에 어플리케이션 버튼 제작시에 사용하던 방법처럼 background-image의 위치를 변경해서 롤오버 효과를 나타내는 방법이, 위에서와 같은 여러 문제점의 처리와 장점들을 가지고 있어서 계속해서 사용하고 있습니다.

아래에 해당 방법에 대해서 간단히 기술하겠습니다.

1. background image
- 상위 이미지 : 평상시 배경, 하위 이미지 : 롤오버시 배경

2. style 정의

3. html 코딩

<a href="#" class="rolloverbtn" onclick="alert('클릭');">롤오버버튼</a>

4. 실제 코딩 예제

롤오버버튼

5. 설명
- 위 버튼중에서 특별히 체크할 사항은 background-position 뿐이니, 아래를 참조하십시오.

background-position

Value:	[ [<percentage> \| <length> ]{1,2} \| [ [top \| center \| bottom] \|\| [left \| center \| right] ] ] \| inherit
Initial:	0% 0%
Applies to:	block-level and replaced elements
Inherited:	no
Percentages:	refer to the size of the box itself
Media:	visual
JSS:	document.getElementById('objId').style.backgroundPosition

<percentage> <percentage>
With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
<length> <length>
With a value pair of '2cm 2cm', the upper left corner of the image is placed 2cm to the right and 2cm below the upper left corner of the padding area.
top left and left top
Same as '0% 0%'.
top, top center, and center top
Same as '50% 0%'.
right top and top right
Same as '100% 0%'.
left, left center, and center left
Same as '0% 50%'.
center and center center
Same as '50% 50%'.
right, right center, and center right
Same as '100% 50%'.
bottom left and left bottom
Same as '0% 100%'.
bottom, bottom center, and center bottom
Same as '50% 100%'.
bottom right and right bottom
Same as '100% 100%'.

http://www.dhtmlgoodies.com/scripts/css-lookup/css-lookup.html 에서 참조

- 사이트를 작성하다보면, 비슷한 형태의 버튼들을 템플릿으로 작성해 두고 그때그때 이용할 필요가 있습니다. 이와 같은 버튼의 형태를 필요에 따라 정의해 두고 사용을 한다면, 사용성이나 유지보수에도 상당히 용이한 방법이라 생각이 됩니다.

많이들 이용해 보세요.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

CSS Hack 관련 정리

(Jason Lee) — Thu, 29 Apr 2010 18:14:53 +0900

CSS핵(hack)에 대해서 깔끔하게 정리해서 포스팅 해주신 분이 있어서
링크를 걸어둡니다.

http://www.nmindplus.com/2006/06/28/css-hack/

IE뿐만 아니라, 파폭, 사파리, 오페라등에 대한 내용도 담겨 있습니다.

사실 제가 참고하려고 비공개 포스팅을 하려 했으나,
다른 분들도 참고하시라고 원문에 댓글 달고, 공개로 포스팅합니다.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

HTML5

(Jason Lee) — Mon, 01 Feb 2010 20:00:39 +0900

HTML5에 대한 기사들이 공공연히 노출되고 있습니다.
웹개발자로서 이에 대해 눈길이 쏠리지 않을수가 없군요.

어도비측에서 애플사에 아이폰/아이패드에 플래시 기능을 연동시켜달라는 요청이 있었고,
이에 대한 애플(스티브잡스)의 입장 표명이 있은후에 좀더 HTML5에 대해서 찾아보게 되었습니다.

아래는 스티브잡스의 대응 기사입니다.
http://media.daum.net/digital/view.html ··· Dinews24

그리고, 아주 간단히 정리된 HTML5에 대한 요약 기사는 아래에서 확인 가능합니다.
http://www.dt.co.kr/contents.html?artic ··· 69744001

위 내용에서 정의한 HTML5의 가장 큰 특징은

HTML5의 가장 큰 특징은 별도의 플러그인 없이 웹 애플리케이션 기능을 구현할 수 있다는 것입니다. 액티브X를 설치하지 않아도 동일한 기능을 구현할 수 있고 특히 플래시나 실버라이트, 자바FX 없이도 웹 브라우저에서 화려한 그래픽 효과를 낼 수 있어 기존 RIA 업체들에게 위협이 될 것이라는 전망이 있습니다. 또한 액티브X는 모바일 웹 브라우징의 최대 걸림돌이었다는 점에서 HTML5가 확산되면 휴대용 단말기를 통해서 웹을 즐기는 것도 더욱 용이해질 것으로 기대됩니다.

과 같이 정리할수 있을듯 합니다.

좀더 자세한 내용은(아주 기술적인 내용은 아니고 방향성에 대한 이야기입니다.)
디지털데일리 기사에서 확인할수 있었습니다.

1. 차세대 웹 언어 'HTML5', 글로벌 IT 업계 동요
2. HTML5, 모바일 웹의 대세될까
3. HTML5, 국내 웹환경 바꿀까

내용을 정리해 보면 아래와 같습니다.

1. 액티브X, 플래시, 실버라이트, 자바FX등의 플러그인 기술을 적용하지 않고도 HTML5의 자체로 동영상을 재생할수 있다.
2. 파이어폭스, 구글 크롬, 사파리, 오페라등의 브라우저에서 HTML5의 기능을 지원할 예정이다. 단, IE에서는 지원계획이 없다.
3. 모바일 환경 적용에 제한이 있던 플러그인을 제거함으로써 모든 환경(PC, 모바일 etc)에 단일 웹어플리케이션으로 서비스를 제공할수 있다.
4. 국내의 대형 서비스(포탈:네이버,SK컴즈)에서도 HTML5 웹어플리케이션 제공에 긍정적이다.

그런데, 위 첫번째 링크에 살짝 HTML5가 적용된 구글 YouTube의 이미지가 보이는군요.
한번 들어가봤습니다.
1. HTML5 활성화 페이지
   - http://www.youtube.com/html5
   - 현재는 구글 크롬에서만 적용된다는 메세지가 뜹니다.
   - 파란색 링크로 "HTML5 베타를 사용하세요."를 클릭하면 활성화가 됩니다.
2. YouTube 홈으로 들어갑니다.
   - http://www.youtube.com/watch?v=PhvZplOGNXY&feature=popular
   - 소녀시대의 Oh! 뮤직비디오가 뜹니다.
   - 페이지의 빈공간에서 오른쪽 클릭-요소검사를 수행합니다.
3. 생성된 DOM 객체들을 확인
   - 생성된 DOM 객체들을 펼처서 동영상을 찾아들어가 봅니다
   - 아래와 같이 동영상 재생에 대한 태그를 확인할수 있습니다.

- embed 태그와 포맷으로 동영상을 포함하고 있습니다.
- 좀더 확인을 해보면 해당 동영상을 콘트롤 하는 소스들도 확인할수 있습니다.

이상으로 우연히 HTML5에 대한 기사를 접하고 간단히 리뷰를 해본 내용입니다.
마이크로소프트의 비지원 및 플러그인 업체들의 대항으로 인해서,
HTML5의 포지셔닝이 어떻게 전개될지는 알수 없는 부분입니다.
다만, 개념적으로 접근할때 옳은 방향을 보고 있다면,
결국은 계속해서 그 기술의 영역을 넓혀가는것은 당연히 받아들여지는 현상이라 생각이 됩니다.
플랫폼의 호환성 및 단일 솔루션에 대한 기대는 여러가지 요인으로 당연히 받아들여 지는 부분이고,
그러하다면 언젠가는 플러그인들을 뽑아내는 시대가 오지 않을까 싶습니다.

좀더 기술적인 리뷰가 되었다면 좋겠지만,
저 역시도 극히 일부분에 소식으로만 접하다 이제 막 들여다보게 되었으니 이정도로 만족해야 할듯 합니다.

다른 좋은 정보들 어디서 찾을까요? ^^

추가로 참고할 만한 곳이 있어 추가 합니다.

1. HTML4와 HTML5의 차이점 : http://channy.creation.net/project/html ··· ences%2F
2. HTML5 Guide : http://www.vtiger.kr/mediawiki/index.php/HTML5
3. HTML5 Guide 문서 :

html5-guide.pdf

HTML5 Guide

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.