Another Boy's egloo http://kuimoani.egloos.com 이상한 놈의 이상한 세상 ko Tue, 28 Oct 2008 16:16:56 GMT Egloos Another Boy's egloo http://pds5.egloos.com/logo/200702/23/64/e0009164.gif http://kuimoani.egloos.com 80 80 이상한 놈의 이상한 세상 <![CDATA[ 티스토리로 이사갔습니다. ]]> http://kuimoani.egloos.com/2111115 http://kuimoani.egloos.com/2111115







http://kuimoani.tistory.com 로 이사갑니다.












]]> ┏ gossip http://kuimoani.egloos.com/2111115#comments Tue, 21 Oct 2008 08:46:33 GMT 귀뫄뉘 <![CDATA[ 오즈(아르고폰)용 지도, 오디야 v1.0 ]]> http://kuimoani.egloos.com/1949811 http://kuimoani.egloos.com/1949811 KRNIC의 데이터를 읽어와서 분해하고 조립하고 꿍짝꿍짝...
당시 사무실에서 테스트 했었을때 약 1km 오차로 거의 맞아떨어져서....

이야~ GPS도 필요없구나!!!! 라고 탄성을 지르고 맘놓고 개발하길 3일째..
거리 오차가 어느정도 되나 측정해보려고 퇴근길 지하철에서 열심히 새로고침을 해봤는데...
일산에 다 도착하도록 "논현동"은 변함이 없었다...

으헉!!!

하필 LG데이콤이 울회사 근처에 있었다니... 어쨌든 엄청난 삽질을 한 셈이고.. 여태까지 만들어놓은 지도 기반 서비스는 버리기 아깝고... 결국 걍 잡기능이나 넣어서 혼자 쓰기 좋게 커스터마이징 하였다. 덴장... ㅠㅠ



어쨌든 "오디야"라고 거창하게 이름지은 요놈에 대해 흔적을 남겨 보도록 하겠습니다.
주소는 요고... 캡처한 사진은 PC에서 캡처한거라 아르고에서 본거랑 다릅니다.

http://giman.hosting2003.co.kr/Odiya

아르고폰 브라우저로 접속하면 휴대폰마다 고유한 번호를 알수 있기땜시 첫 접속 여부를 묻습니다.
전화번호는 아무거나 입력해도 되지만.. 원활한 서비스를 위해 자제해주세요 ㅎㅎ



번호를 입력했으면 다음부턴 이 화면부터 뜨게됩니다.
네이버 지도기반이구요 (야후맵을 쓰고싶었는데 아르고폰에서 안돌아가더군요 ㅠㅠ)
지도 이동은 이동하고싶은 방향으로 지도를 클릭하면 됩니다.



상호명칭 등을 입력하고 [지역]을 클릭하면 관련 리스트들이 나오고..
결과물이 많을경우 같은 단어라도 계속 검색하면 다른 결과 페이지가 나오게 됩니다.
그리고 상호명을 클릭하면 지도에 위치가 표시됩니다.


버스번호를 입력하고 [버스번호]를 클릭하면 버스노선 정보와 실시간 버스위치가 나옵니다.
지도에 표시도 하고싶었는데.. 너무 작업도 많아지고 아르고폰도 뻗을거같아서 걍 놔뒀습니다.. ㅎㅎ



[정류장] 버튼으로 정류장명이나 정류장번호로 검색도 가능합니다....만 시간이 없어서 잠시 보류중입니다 ㅋㅋ



자주쓰는 키워드를 위해 태그클라우드 기능을 넣었습니다.
1달동안 클릭이 없으면 자동으로 없어지고, 클릭하면 할수록 점점 커집니다. 므흣~!(왜??)


GPS기능이 되면 야심차게 만들려고 했던게 이 기능인데.. 허접해졌지만 걍 놔뒀습니다.
[내 위치 알리기]를 클릭하고 지도를 클릭하면 사진처럼 위치변경 일자와 전화번호가 뜹니다.


다른 이용자가 그 근방의 지도를 탐색중이면 사진처럼 본인의 정보가 표시됩니다.
아~~~~ GPS 아까워라~~~~~~~ 이거론 부족하잖어 ㅠㅠ





뭐 기능은 이렇습니다. 이것저것 더 넣고싶은게 많았지만 아르고폰이 못버티는게 몇개 있어서 다 뺐습니다. ㅋㅋㅋㅋ ㅠㅠㅠㅠ
아르고폰 유저가 된만큼 다음에도 아르고폰에 유용한 프로그램을 몇개 더 만드려 합니다.

버그나 좋은 아이디어 있음 알려주세요~~ ^^
]]> ┣ work http://kuimoani.egloos.com/1949811#comments Thu, 14 Aug 2008 22:02:10 GMT 귀뫄뉘 <![CDATA[ [Silverlight1] Inner XAML방식으로 시계 만들기 ]]> http://kuimoani.egloos.com/1635766 http://kuimoani.egloos.com/1635766 Silverlight는 닷넷플랫폼 뿐만아니라 JS, HTML 기반에서도 넘나들 수 있어 매우 넓은 확장성을 제공한다.

다음 소스는 HTML파일 하나만으로 Silverlight 1로 실시간 시계를 표현한다.
MS에서 제공하는 Silverlight.js 기본 스크립트가 필요하며 시계의 동작 처리부는 캡슐화를 위해 Javascript Class 형식으로 만들었다. 

<html>
<head>
	<script type="text/javascript" src="Silverlight.js"></script>
</head>
<body>
	<div id="silverlightControlHost"></div>
	<!-- Define XAML content. -->	
	<script type="text/xaml" id="xamlContent">
		<?xml version="1.0"?>
		<Canvas xmlns="http://schemas.microsoft.com/client/2007">
			<Rectangle Width="220" Height="30" Stroke="#CCCCCC" RadiusX="5" RadiusY="5">
				<Rectangle.Fill>
					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
						<GradientStop Color="#FFFFFFFF" Offset="0"/>
						<GradientStop Color="#FFAAAAAA" Offset="1"/>
					</LinearGradientBrush>
				</Rectangle.Fill>
			</Rectangle>
			<TextBlock Name="tbDate" Canvas.Left="10" Canvas.Top="5" FontSize="15" Foreground="#DD000000" FontFamily="Verdana"/>
		</Canvas>
	</script>
</body>
</html>
	<script type="text/javascript">
		//Clock 기능 정의
		var Clock = {
			content : null,
			Load : function(sender, eventArgs) {
				Clock.content = sender.content;
				Clock.content.findName("tbDate").addEventListener("MouseLeftButtonDown", Clock.handleMouseDown);
				Clock.SetDate();
			},
			handleMouseDown : function (sender, eventArgs) {
				alert("http://kuimoani.egloos.com/");
			},			SetDate : function() {
				var date = new Date();
				var year = date.getYear();
				var month = (date.getMonth() + 1) < 10 ? "0" + (date.getMonth() + 1) : (date.getMonth() + 1);
				var day = date.getDay() < 10 ? "0" + date.getDay() : date.getDay();
				var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				var min = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				var sec = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				var datestring = year + "-" + month + "-" + day + "  ";
				if(date.getHours() <= 12)
					datestring += "AM "
				else {
					datestring += "PM "
					hour -= 12;
					hour = hour < 10 ? "0" + hour : hour;
				}
				datestring +=  hour + ":" + min + ":" + sec;
				Clock.content.findName("tbDate").text = datestring;
				setTimeout("Clock.SetDate()", 1000);
			}
		};
		//Clock Silverlight Object 생성
		Silverlight.createObjectEx({
			source: '#xamlContent',
			parentElement:document.getElementById("silverlightControlHost"),
			id:'objClock',
			properties:{
				width:'220',
				height:'30',	
			inplaceInstallPrompt:false,
				background:'#FFFFFFAA',
				isWindowless:'false',
				framerate:'6',
				version:'1.0'},
			events:{
				onError:null,
				onLoad:Clock.Load},
			initParams:null,
			context:null});
	</script>

컴파일이 필요없고 HTML 내에서 조작이 가능하므로 현재 개발방식도 나름 편리하지만, Javascript 쌩으로 개발하는것 보다 쉽지도.. 그렇다고 강력한 기능을 제공하고 있지도 않다.

사실상 Silveright(XAML) + Javascript 의 원활한 개발을 하려면 JavaScript Framework(JQuery, Prototype...)을 도입해야하는데, 현재 Silverlight의 기능은 JavaScript Framework + CSS 를 적절히 활용하면 다 구현 가능한 정도 밖에 없다.

기존 알고있는 기술로도 충분히 개발 가능한것을 굳이 Silverlight를 또 공부해 구현할 필요가 있을지는 아이러니다.


하여간 아직은 더욱 가야할 길이 멀기만 하다...

추가로 Silverlight 2는 개발이 더욱 편해지고 기능도 많아졌지만 C#과 VB를 제외한 언어에 대한 유연성은 떨어진것 같다..
SVG에 대한 경계인가? 흠.. ]]> ┣ programming http://kuimoani.egloos.com/1635766#comments Tue, 22 Apr 2008 11:27:37 GMT 귀뫄뉘 <![CDATA[ [JS] Javascript로 Class 구현해 상속받기 ]]> http://kuimoani.egloos.com/1272779 http://kuimoani.egloos.com/1272779
따라서 기존 Javascript로 Class와 상속을 구현해 보도록 하겠습니다. (IE, 모질라 다 됩니다.)

 function BaseClass () {
    this.name = "base name";
    this.type = "base type";
    this.Run = function () {
        alert("Run Base = " + this.name);
    }
    this.Exec = function () {
        alert("Exec Base = " + this.name);
    }
}






function SubClass () {
    this.base = new BaseClass();
    this.name = "sub name";
    this.Run = function () {
        alert("Run Sub = " + this.name);
        this.base.Run();
    }
}


SubClass.prototype = new BaseClass();
var a = new SubClass();
alert(a.name);               // print "sub name"
alert(a.type);                  // print "base type"
a.Run();                        // print "Run Sub = sub name" , "Run Base = base name"
a.Exec();                        // print "Exec Base = sub name"

클래스 구현 방법이 여러가지 있지만
개인적으로 상속구조를 위해선 위의 방법이 가장 심플하고 의도한대로 출력값이 나오는 것 같습니다.
(단 a.Run();에서 "Run Base = base name" 대신 "Run Base = sub name"이 출력되는 결과였음 더 좋을뻔 했습니다..)

그럼 이만~

================================================================================================================
더 확실한 상속을 위해 상속 메소드를 만들어봤습니다. 상위클래스의 메소드를 호출할땐 함수명 앞에 $만 붙여주면 됩니다.


function Base(){
    this.name = "base";
    this.type = "human";
    this.getName = function () {
        return this.name + " is base";
    }
}
function Child(){
    this.name = "child";
    this.getName = function () {
        this.name = "child2";
        return this.name + " " + this.$getName() + " " + this.type;
    }
}
function Extend(child, base) {
    child.prototype = new base();       //상속
    var objBase = new base();
    var objChild = new child();    //base 객체 생성
    for(var item in objBase) {
        if(typeof(objBase[item]) == "function")
            objChild["$" + item] = objBase[item];
    }
    return objChild;
}
var obj = Extend(Child, Base);
alert(obj.getName());
//alert : child2 child2 is base human....
]]> ┣ programming http://kuimoani.egloos.com/1272779#comments Fri, 11 Jan 2008 02:48:00 GMT 귀뫄뉘 <![CDATA[ [JS] Custom Alert 띄우기 ]]> http://kuimoani.egloos.com/1030414 http://kuimoani.egloos.com/1030414 Javascript의 alert을 예쁘게(?) 띄우는 스크립트 입니다.

*.js파일이나 헤더 스크립트 영역에 다름 함수를 선언합니다.
        //경고창 레이어로 띄우기
        var AlertCallBackFunctions;
        function Alert(msg, func)
        {
            AlertCallBackFunctions = func;
            var divAlertForBlind = document.getElementById("divAlertForBlind");
            var divAlert = document.getElementById("divAlert");
            var divAlertMsg = document.getElementById("divAlertMsg");

            if(divAlertForBlind != null && divAlert != null)
            {
                divAlertMsg.innerHTML = msg;

                divAlertForBlind.style.display = "block";
                divAlert.style.display = "block";
                document.oncontextmenu = function () {return false;};
                document.onselectstart = function () {return false;};
                document.ondragstart = function () {return false;};
                document.onkeydown = function () {
                    if(event.keyCode == 13 || event.keyCode == 32) //Enter or Space Key Event
                    {
                        AlertHide();
                        return false;
                    }
                };
            }
        }
        //경고창 지우기
        function AlertHide()
        {
            var divAlertForBlind = document.getElementById("divAlertForBlind");
            var divAlert = document.getElementById("divAlert");
            if(divAlertForBlind != null && divAlert != null)
            {
                divAlert.style.display = "none";
                divAlertForBlind.style.display = "none";
                if(AlertCallBackFunctions != null)
                    AlertCallBackFunctions.call();
                document.oncontextmenu = null;
                document.onselectstart = null;
                document.ondragstart = null;
                document.onkeydown = null;
            }
        }
html body 영역에 Alert 레이어 HTML디자인을 합니다.
        <!-------------------- Alert Layer 시작 -------------------->
        <div id="divAlertForBlind" class="AlertForBlind"></div>
        <div id="divAlert" class="Alert">
            <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#50596E;border: 1px solid #1D2028;">
                <tr>
                    <td class="title2" style="padding:3px;background-color:#2C2C2C; border-bottom:solid 1px #595959;">
                        <img src="/images/icon_confirm.gif" width="22" height="21" hspace="6" align="absmiddle">Alert Message
                    </td>
                </tr>
                <tr>
                    <td style="padding:10px;" align="center"><div id="divAlertMsg" class="title3"></div></td>
                </tr>
                <tr>
                    <td height="35" align="center">
                        <img onclick="AlertHide();" style="cursor:hand;" src="/images/btn_ok_off.gif" width="124" height="32" border="0" onmouseover="this.src='/images/btn_ok_on.gif'" onmouseout="this.src='/images/btn_ok_off.gif'" alt="확인"/>
                    </td>
                </tr>
            </table>
        </div>
        <!-------------------- Alert Layer 끝 -------------------->
Alert창을 호출할땐 다음과 같이 실행합니다.
//경고창의 [확인]버튼을 누른후의 동작을 두번째 인자에 스크립팅합니다.
//첫번째 방법
Alert("경고입니다.", function() {history.back();});




//두번째 방법
function CallBackFuncs()
{
     history.back();
}
Alert("경고입니다.", CallBackFuncs);
이건 CSS Style 코드... 입맛에 맞게 바꾸면 되겠죠.

.AlertForBlind 
{
    cursor:default;
    text-align:center;
    display:none;
    width: 100%;
    height: 100%;
    z-index: 100;
    position: absolute;
     left: 0px;
    top: 0px;
    background-color:Black;
    filter:Alpha(Opacity=50);
}

.Alert
{
    cursor:default;
    background-color:#959FB9;
    padding:5px;
    display:none;
    width: 300px;
    z-index: 200;
    position: absolute;
     left: expression(document.body.offsetWidth / 2 - 150);
    top: expression(document.body.offsetHeight / 2 - this.offsetHeight + 50);
}


IE7에서만 테스트했으므로 다른 브라우저에서도 잘 될지는 모르겠네요. 걍 간단히 사용할때만 쓰시면 될거같고
제대로된 플랫폼에서 사용하시려면 YUI (Yahoo UI Script Frameword입니다.)의 Panel Component를 사용하시는게 깔끔할겁니다. ]]> ┣ programming http://kuimoani.egloos.com/1030414#comments Thu, 22 Nov 2007 04:21:19 GMT 귀뫄뉘 <![CDATA[ 개발방법론 고찰 그리고 혼란 ]]> http://kuimoani.egloos.com/724656 http://kuimoani.egloos.com/724656
1. 프로그래밍을 처음 시작했을때에는 그저 실행만 잘 되면 좋았고,
2. 조금 경력을 쌓다보니 각종 개발방법론들에 열광하다가,
3. 이제는 현실의 상황과 저의 무식함을 깨닫고는 각종 개발방법론에 회의를 느끼는 단계에 접어 들었습니다.

갈수록 실용주의프로그래머 라던가, XP나 애자일 등이 종종 귀에 들리는것도 대부분 실무 개발자들이 비슷한 생각을 가져서 인지도 모르겠습니다.

뭐 하여간 그동안 신봉해왔던 (혹은 남들도 신봉해왔기 때문에 협업시 표준을 지킬수 밖에 없는) 기존 개발방법론들이 다시 생각되어지고 있다는건 좋은데, 그렇다고 해서 또 다른 개발방법론들이 대안으로 쏟아져 나오는것도 맘에 안든다 이겁니다.

따라서 몇년 안된 경험이지만 그동안 일하면서 생각해왔던 여러가지 룰을 정리하고 제 나름의 개발(?)방법론으로 정리해보고자 합니다.

* 참고로 웹개발쪽을 주로 참여했으므로 국내 웹개발 시장에서 발생하는 SI 혹은 SM에서만 해당되지 않을까 생각되네요..


1. IT를 모르는 사람과는 일하지 말아라.
그동안 여러 프로젝트에 참여하면서 나름대로 성공적이었다고 느껴진 프로젝트는 전부 고객 혹은 고객사의 컨텍포인트가 IT에 대해 잘 아는 사람들이었습니다. 잘 알기에 환경과 현실에 맞게 요구사항도 정확했고 업무의 끝맺음도 명확했으니까요. 거기다 고급기술 등에 대한 비용처리도 명확하다는거죠. 반대로 잘 모르는 사람과 일했을 경우 개발초기 요구사항 자체가 뜬구름인 경우가 많으며, 개발이 완료되고 실제 운영이 한참 지난 후에서야 결과물이 이렇게 돌아가는지 느끼고는 수정사항을 제시하기 일쑤였습니다. 게다가 고급기술에 대한 비용을 인정해 주지도 않죠. 모르니까....

2. 업무 진행 내용을 고객에게 매일 같이 알려라.
이건 제 성격상 거의 항상 고객과 다이다이 붙어서 일을 진행하는데, 눈만 마주치면 개발하면서 발생한 여러가지 이슈들을 거침없이 얘기합니다. 물론 그 사람들은 100%이해는 못하지만 뉘앙스에서 대충 일이 몇% 진행되었고 여러가지 개발적인 이슈들을 함께 점검할 수 있습니다. 실제로 이런방식으로 일해온 프로젝트가 결과물적으로 다 성공적이거나 한 건 아니었지만, 고객본인은 스스로 개발에 참여했다는 느낌이 있어서인지 만족도 자체는 높은편이었고, 개인적인 친분관계로도 인맥을 쌓는 계기도 되었습니다. 여태까지 이건 개인적인 성격때문에 생긴 장점이 아닌가 했지만, 오픈마루의 애자일 경험에 대해 설명한 포스트 중 "짝프로그래밍"에 대한 내용이 있는데, 이걸 보는순간 함께 일한다는 것에 대한 장점은 누구나 느끼는 것이라는 확신이 들더군요...

3. 히스토리를 관리하라.
업무에 참여한 시작부터 모든 히스토리를 기록하세요. 기록해야할 정보는 되도록이면 많은것을 기록하되, 가장 우선할것은 고객과 주고받은 대화나 데이터를 모두 기록하는 것입니다. 여러가지가 있겠지만 개인적으로 겪어본 경험중 히스토리의 장점은 비지니스 혹은 개발 이슈 때문에 어떤부분이 심하게 복잡해지거나 꼬이게 되는 경우가 많은데, 이 원인을 몇 년 후에도 쉽게 찾아 볼 수 있어 삽질의 반복을 줄일 수 있다는 점입니다. 어느정도 규모의 SI나 에이전시라면 보통 고객용 프로젝트 사이트는 운영하고 있으며, 요즘엔 trac이나 sharepoint등도 많이 사용하고 있는데.. 개인적으론 sourceforge나 codeplex, googlecode 등의 프로젝트 관리 사이트 카피본을 설치해 쓰면 이슈트래킹과 버전관리도 함께 할 수 있어서 좋다고 생각되네요.

4. 경영과 운영을 고려하여 개발하라.
시스템이 우선인 소프트웨어는 거의 없습니다. 비지니스 룰의 변화는 시스템 환경을 고려하지 않습니다. 고객의 요구는 언제나 빠르게 적용되길 바라며, 코드의 난잡함에는 관심이 없습니다. 개발자의 불만은 항상 여기서 터져 나오지만, 우리 개발자들은 현실을 직시해야합니다. "우리는 영원히 [갑]이 되지 못한다는 걸" 
따라서 우리는 스파게티 코드와 짬뽕 데이터에 대한 해결책을 스스로 떠안고 해결책을 생각해내야만 합니다. 여기에 대한 해결책으로 하위분류를 해보겠습니다.

4-1. ERD 특히 논리ERD는 무조건 그리되, 확장성을 제1순위로 고려하라.
비지니스 룰을 분석하고 데이터의 흐름을 따라 가는데 있어서, 논리ERD만큼 명쾌한 문서가 없습니다. 뭐 문서라면야 있으면 좋은 문서들이 수도 없이 많지만 가장 코드에 가까우면서도 고객과 의견교환을 할 수 있는 문서는 역시 ERD만한게 없죠. 그리고 설계시에 "절대 변하지 않는 테이블"은 절대 없다는 것을 명심하고 항상 확장성을 염두에 두고 설계하라는 겁니다. 4번에 경영과 운영을 고려하여 개발해야 하니 비지니스 룰이 밥먹듯이 변화하고, 이에 따라 데이터의 변화는 필수불가결하기 때문이죠.

4-2. IT시장에 가장 많은 인력이 관리 할 수 있는 수준으로, 확장성을 고려하여 시스템을 구축하라.
사실 대부분 개발자들이 자신이 보유한 기술의 자부심이 대단해서, 온갖 화려한 기술들을 실무에 적용하고자 하는 일종의 장인정신(?)이 있습니다. 게다가 IT쪽 인력시장이 이직이 매우 높아서, 한 프로젝트에 각자 한가닥 하시는 분들이 소스에 화려한 실력들을 자랑해 놓은것을 보고 경악해본 경험이 모두 한번쯤은 있을 겁니다. 그리고는 또 이직의 반복... 역시 경영과 운영 측면에선 손해가 극심합니다. 실례로 제가 예전에 포스트한 웹2.0에 대한글에 보면 이베이의 사례가 있는데, 기술력의 선구자라 해도 경영논리에 의해 짤리는 현실을 느꼈던 사례였습니다. 예전에 볼랜드 투게더 세미나에 갔을 때도 KAIST교수가 MDA에 대해 설명하면서 80%정도의 코드퀄리티지만 누구나 개발에 참여할 수 있어 경영적은 측면에서 도움이 된다는 강연을 듣고 "이제 개발자 몸값 떨어지겠구나 ㅠㅠ"라고 생각한 적도 있었습니다. 뭐 여기에 대해 부가로 하고 싶은 말이 많지만 지면상(?)생략 하도록하고.. 하여간 개인적으론 전산과 갓 졸업한 신입사원이 1달정도 놀면서 공부해서 실무개발 할 수 있어야 한다는게 개인적인 생각입니다.

4-3. 코드나 데이터의 일관성을 유지하라.
상당히 많은 의미로 해석될 수 있는데, 네이밍룰이나 개발방식 등을 항상 일관성 있게 유지하라는 뜻입니다. 초기에 잡은 네이밍룰이나 설계가 틀렸더라도 일단 일관성 있게 개발해왔다면 언제든지 일괄작업으로 한번에 변경 가능하기 때문입니다. 그리고 가독성 측면에서도 일관성이 유지된 데이터가 훨씬 좋다는건 뭐 말할필요도 없겠죠.



생각나는건 많은데 정작 정리된건 거의 없었네요.

경험적 측면에서 적어본 글인 만큼 이 포스트도 앞으로 더 경험해 나가며 업데이트 해나가야 될것 같습니다.
역시나... 고객(나)의 요구는 상수가 아니라 항상 변수니까요... ]]> ┏ gossip http://kuimoani.egloos.com/724656#comments Fri, 07 Sep 2007 16:42:23 GMT 귀뫄뉘 <![CDATA[ SSL없이 무료로 쉽게 보안서버 구축하기 (SST v1.0) ]]> http://kuimoani.egloos.com/334437 http://kuimoani.egloos.com/334437 Simple Secure Transfer v1.0
  • 개요
    2005년 시행된 "정보통신망 이용 촉진 및 정보보호 등에 관한 법률" 및 "개인정보의 기술적,관리적 보호조치 기준" 법안에 따라, 영리목적의 모든 사이트에서는 개인정보(비밀번호 혹은 주민번호, 전화번호 등 개인신상정보)의 보안을 위해 보안서버를 구축해야합니다.
    이에 따라 한국정보보호진흥원(KISA)에서는 보안서버 구축을 위해 SSL과 응용프로그램(예를들어 ActiveX)방식중 한가지는 설치되어야 한다고 권고하고 있습니다.
    보안수준으로선 키로거까지 보안 가능한 응용프로그램방식이 우수하나, 구축비용이 비싸며 ActiveX설치를 기피하는 유저성향때문에 SSL을 이용한 보안서버 구축이 많은 관심을 받고 있습니다. 하지만 SSL역시 호스팅계정을 이용중인 영세 사이트에서 구축하기엔 만만치 않은 비용과 불편함을 감수해야합니다.
    따라서 본 프로그램은 SSL보호수준의 데이터 암호화 송수신을 인증서 설치 없이 구현할 수 있도록 만들어졌습니다.


  • 환경
    SSL의 암호화 수준에 최대한 근접하기 위하여 전자서명에서 많이 사용중인 RSA 비대칭 암호화 알고리즘(기본 512bit)을 사용하였습니다.
    암호화 모듈 (JavaScript)
    복호화 모듈 (ASP.NET 2.0 - C#)


  • 동작원리

    본 프로그램의 예제소스처럼, 아이디와 패스워드를 입력한 후 버튼클릭시 정보를 서버에 전송하는 화면을 기준으로 프로세스를 설명하도록 하겠습니다.

    1.보안이 필요한 데이터를 암호화 - 사용자가 아이디와 패스워드를 입력한 후 "전송"버튼을 클릭하면 JavaScript를 통해 WebServer에 있는 공개키(PublcKey)를 XML로 읽어와, 공개키를 이용하여 아이디와 패스워드를 암호화하고 HiddenField에 입력합니다. (이때 원본 TextBox의 값을 공백처리하여 암호화되지 않은 데이터가 전송되지 않게 주의하십시오.)

    2.암호화된 데이터 전송 - 1번에서 문제없이 암호화가 완료되었다면 Form Submit을 발생시켜 암호화된 데이터가 서버로 전송됩니다.

    3.암호화된 데이터를 복호화 - 비밀키(PrivateKey)를 이용하여 클라이언트로부터 전송받은 암호화된 HiddenField의 값을 복호화하여 원하는 처리를 합니다.


  • 예제파일안내
    /Web.Config공개키와 비밀키파일 경로를 세팅합니다.
    /Default.aspx로그인폼으로 디자인된 예제파일입니다.
    /GenerateKey.aspx공개키와 비밀키를 생성하는 파일입니다. (생성된키를 PublicKey.xml과 PrivateKey.config파일에 각각 저장해 주십시오.)
    /SST/SST.js클라이언트에서 사용하는 암호화 스크립트 파일입니다.
    /SST/SimpleSecureTransfer.cs서버에서 사용하는 복호화 클래스 파일입니다.
    /SST/PublicKey.xml클라이언트에서 사용하는 공개키 XML파일입니다.
    /SST/PrivateKey.config서버에서 사용하는 비밀키 XML파일입니다.(외부접근을 막기위해 .config확장자로 구성되었습니다.)
    참조RSA복호화를 위해 System.Security를 추가참조해야 합니다.


  • 소스다운로드
    http://giman.hosting2003.co.kr/SimpleSecureTransferV1/SimpleSecureTransferV1.zip
    기타 프로그램에 관한 질문이나 건의는 http://kuimoani.egloos.com에 해주십시오.


  • 예제

 

Creative Commons License이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
]]> ┣ work http://kuimoani.egloos.com/334437#comments Fri, 22 Jun 2007 10:44:05 GMT 귀뫄뉘 <![CDATA[ 싸이월드캐릭터채팅 - 싸이미니미월드 ]]> http://kuimoani.egloos.com/255352 http://kuimoani.egloos.com/255352

 

티스토리로 이사갔습니다~~~

]]> ┣ work http://kuimoani.egloos.com/255352#comments Sun, 27 May 2007 00:23:56 GMT 귀뫄뉘 <![CDATA[ Flash에겐 독, Flex에겐 약... ActionScript3.0 ]]> http://kuimoani.egloos.com/251493 http://kuimoani.egloos.com/251493

Flex가 나온지 1~2년쯤 된것 같다. 하지만 직접 사용해본것은 이제 겨우 1달째이다.
이유인즉슨, Flash가 AS3를 지원하는데 너무도 오래걸렸기 때문이다.

2007년초에 드디어 수많은 말썽만 낳았던 Flash9Alpha가 FlashCS2란 이름으로 릴리즈 되었다.
이전에 블로깅핸 FlashCS2 프리뷰에서도 말했었지만 별로 달라진 기능은 없었고 AS3.0을 지원한다는것이 가장 큰 변화였다.

그렇다면 Flash는 AS3.0 지원으로 인해 무엇을 얻었을까??

아이러니하게도 AS3.0은 Flash에게 엄청난 비생산성을 안겨주었다.
어쩌면 이것은 당연한 예견이었는지도 모른다. FlashIDE방식에 어울리는 AS1.0 AS2.0의 코딩방식은 무비클립을 넘나드는 접근방식으로 인해 "화면"을 컨트롤하기엔 매우 편했다. 하지만 OOP를 지원한다는.. 아니, 강제한다는 AS3.0은 Flash를 위한 Script를 짜기엔 너무나도 많은 클래스와 코드를 남발해야한다. 실제로 AS2.0으로 제작된 Flash프로젝트 3개 정도를 strict모드인 AS3.0으로 컨버젼해본 결과  코드량이 2배에서 3배가량 늘어났다. 더 문제인것은 거의 모든 코드의 수행이 비동기적인 실행으로 발행하므로 비동기 실행에서 생길수 있는 잠재적 오류들을 항상 염두에 두고 프로그래밍 해야한다는것은 너무나도 큰 스트레스를 가져다주었다.

하 지 만

Flex의 AS3.0은 정말 놀랄만한 생산성을 가져다 주었다. 경험부터 먼저 얘기해보자면, Flash로 1달 걸렸던 코딩이 Flex로는 1주일에 가능했다. 그것도 화면과 코드의 분리가 거의 완벽하게 된 상태로 말이다.. Flash에서의 AS3.0경험담으로 Adobe자체에 실망한 후 곧바로 맛본 이 Flex의 효율성은 정말 놀랄만한 것이었다. 하지만 Flex의 이 엄청난 효율성은 Flash를 너무도 초라하게 만들어 버렸다. 왜냐하면 엔터프라이즈급 솔루션 개발에서의 Flash는 그저 그림그리기용 도구일뿐일테니까!! 물론 Flash도 개발이 가능하지만 그건 VS2005로 개발을 할것이냐 메모장으로 개발을 할것이냐 비교하는것처럼 엄청난 차이가 있다.

개발자가 항상 고민해오던 프리젠테이션에 대한 고민들.. 이제 Flex뿐만 아니라 곧 다가올 WPF나 JavaFX가 릴리즈된다면 개발자들에게 더욱 다양하고 강력한 옵션을 제공해줄 것이 분명하다. 물론 강력한 기능만큼 해야할것도 많아져 개발자들을 더욱 피곤하게 만들지도 모른다. 하지만 고객의 UI개선 요구사항에 보다 유연하게 집중 할수 있다는 점에서 개발자와 고객 모두가 환영할만한 기술이 아닐까 기대해본다...

]]> ┏ gossip http://kuimoani.egloos.com/251493#comments Fri, 25 May 2007 12:10:55 GMT 귀뫄뉘 <![CDATA[ 미술을 포기한 이유... 혹은 변명 ]]> http://kuimoani.egloos.com/244392 http://kuimoani.egloos.com/244392
출처 : 싸이 플클 - 김형섭옹의 글


위 글을 보고 갑자기 생각 났는데, 나는 원래 만화가 지망생이었다.
Flex와 C#으로 몇주째 씨름하며 생각지도 못했던 것들,
그건 내 꿈들이었다.
유치원시절 봤던 "보물섬"과 "만화로 보는 과학"시리즈를 보고 하나 둘씩 따라 그리던게, 어렸던 나의 꿈은 당연히 만화가였다.

교실 맨 앞 혹은 맨 뒤에서 친구들 얼굴을 그려주기도 하고 당시 유행하는 만화캐릭터나 연예인을 그려주기도 했더랬다.
글쎄, 그림을 잘 그렸다기보담 메세지를 담고 있는 그림을 그리기 원했다랄까

하지만 어려운 집안형편에 만화 혹은 미술이라는것은 너무 큰 사치였다. 고등학교 미술선생님이 미술부로 오라고 몇번 권유하신적도 있지만, 아버지의 강력한 반대에... 아니, 솔직히 미술학원을 다닐 수 없는 형편때문에 포기하고 말았다.

그런데 내가 미술을 꿈으로 간직했던 몇%는 오래된 수첩에서 찾은 "아버지의 그림" 때문이기도 하다는걸 아버지는 아실까?






이 새벽에,
전혀 엉뚱한 이유로 내 지난 길을 돌아보게 될 줄이야....
지금 이 순간 생각하건데,
지금 나는 원래의 꿈에서 별로 멀어지지 않았다..
"내 생각을 창초한다"는 것은 변함이 없으니까..


라고 변명하니까 위안은 된다... ]]> ┏ gossip http://kuimoani.egloos.com/244392#comments Tue, 22 May 2007 16:46:32 GMT 귀뫄뉘