Life is Dynamic

리플렉션을 이용한 동적 코드 생성

맨날맑음 — Mon, 1 Nov 2010 15:09:45 +0900

안녕하세요? 맨날맑음입니다.

닷넷의 리플렉션(Reflection)을 이용하면 어셈블리의 메터데이터 정보를 알아올 수 있고, 이를 이용해 지연바인딩(Lazy Binding)이나 동적으로 코드를 생성할 수 있습니다. 이번 포스팅에서는 리플렉션을 이용한 동적 코드생성에 대해 알아 보도록 하겠습니다.

간단한 예제를 통해 동적 코드생성에 대해 알아 볼 텐데요. 예제는 어셈블리를 동적으로 생성/실행하는 콘솔어플리케이션 프로젝트(App)와, 동적으로 코드를 생성하는 클래스 라이브러리 프로젝트(CodeGenerator)로 구성 됩니다.

CodeGenerator 클래스에서는 동적으로 DynamicAssembly를 생성하고, DynamicClass, DynamicMethod를 만들어 그 안에 "Dynamic Method Call"이라는 메시지를 프린트하는 코드를 작성하게 만들도록 하겠습니다.

파일 -> 새로 만들기 -> 프로젝트를 선택하여 빈 솔루션을 생성합니다.
솔루션 탐색기의 솔루션 탭을 마우스 오른쪽 클릭하여, 콘솔어플리케이션 프로젝트(App)와 클래스라이브러리 프로젝트(CodeGenerator)를 생성합니다.
Programe.cs 와 Class1.cs의 이름을 각각 App와 CodeGenerator로 변경합니다.

#1. CodeGenerator 클래스 작성

CodeGenerator.cs에 다음의 코드를 입력합니다.

public class CodeGenerator
{
    public Type DynamicType { get; private set; }
    public CodeGenerator()
    {
        //현재 어플리케이션 도매인을 가져온다.
        AppDomain currentDomain = AppDomain.CurrentDomain;
        //생성하려는 어셈블리의 이름을 설정한다.


        AssemblyName assemName = new AssemblyName("DynamicAssembly");
        //어셈블리를 생성
        AssemblyBuilder assemBuilder = currentDomain.DefineDynamicAssembly(assemName, AssemblyBuilderAccess.Run);


        //모듈 생성
        ModuleBuilder moduleBuilder = assemBuilder.DefineDynamicModule("DynamicModule");
        //클래스 생성
        TypeBuilder typeBuilder = moduleBuilder.DefineType("DynamicClass", TypeAttributes.Public);
        //메서드 생성
        MethodBuilder methodBuilder = typeBuilder.DefineMethod("DynamicMethod", MethodAttributes.Public, null, null);
        //동적 코드 생성
        ILGenerator msil = methodBuilder.GetILGenerator();
        msil.EmitWriteLine("Dynamic Method Call");
        msil.Emit(OpCodes.Ret);
        //타입 정보 저장
        DynamicType = typeBuilder.CreateType();
    }


}

DynamicType이라는 필드가 있고, 이 필드는 동적으로 생성 할 Class의 Type을 저장하는 용도로 쓰입니다. 생성자에서는 동적으로 코드를 생성하기 위한 단계를 진행하는데요. 어셈블리->모듈->클래스->메서드->코드 생성의 단계로 진행을 하게 됩니다. 마지막에 보이는 ILGenerator 클래스를 이용하여 msil코드를 생성 할 수 있게 됩니다. 예제에서는 간단히 EmitWriteLine 메서드를 이용하여 "Dynamic Method Call"이라는 문자열을 화면에 뿌리는 코드를 생성 하였습니다.

#2. App 클래스 작성

App프로젝트로에서 CodeGenerator 프로젝트를 참조 추가 합니다.

App.cs 에 다음의 코드를 추가합니다.

class App
{
    static void Main(string[] args)
    {
        //CodeGenerator클래스 생성
        CodeGenerator.CodeGenerator codeGenerator = new CodeGenerator.CodeGenerator();
        //동적으로 추가 한 Type을 얻어옴
        Type DynamicType = codeGenerator.DynamicType;
        //Activator 클래스를 이용하여 인스턴스 생성
        object obj = Activator.CreateInstance(DynamicType);
        //동적으로 생성한 메소드를 얻어옴
        MethodInfo methodInfo = DynamicType.GetMethod("DynamicMethod");
        //실행
        methodInfo.Invoke(obj, null);


    }
}

Main메서드의 로직은 간단합니다. 우선 CodeGenerator 클래스의 public 필드인 DynamicType에서 동적으로 생성한 Class의 Type을 얻어옵니다. Activator 클래스를 이용하여 클래스의 인스턴스를 생성하고, MethodInfo 클래스로 미리 생성한 DynamicMethod를 얻어와 실행합니다.

실행결과는 Dynamic Method Call이 나오면 의도한 결과이겠죠?

이상 동적으로 코드를 생성하고, Reflection을 이용하여 동적으로  인스턴스를 생성 / 실행하는 방법이었습니다.

감사합니다.

ReflectionSample.rar

소스코드 빌드 환경 : Windows7 x64, Visual Studio2010, .NET Framwork4.0

실버라이트와 HTML 엑세스 하기

맨날맑음 — Mon, 4 Oct 2010 23:07:53 +0900

안녕하세요? 맨날맑음입니다.

일반적으로 실버라이트 프로젝트를 생성하면 위와 같이 두 개의 프로젝트가 생성됩니다. 하나는 실버라이트 프로젝트이고, 하나는 [프로젝트명].[Web]이 붙은 프로젝트인데요. Web이 붙은 프로젝트를 살펴보면 ASP.NET 프로젝트 인 것을 알 수 있습니다. 웹 프로젝트의 .aspx(웹폼)의 소스를 살펴보면 Active-X 처럼 object 태그를 이용하여 실버라이트를 웹 페이지에 로딩하는 것을 볼 수 있습니다.

이와 같이 실버라이트는 웹에서 동작하는 응용프로그램이고, 프로젝트의 상황에 따라 전체 페이지를 실버라이트로 만들 수도 있지만, ASP.NET으로 웹 페이지를 구성하고, 비주얼한 영역만 실버라이트로 제작하는 것이 일반적입니다.

이렇게 실버라이트를 웹 페이지의 특정 영역에 올려놓을 경우 실버라이트와 HTML간의 정보교환이라는 이슈가 생기기 마련인데요. 이번 포스팅에서는 실버라이트 <-> HTML 간의 엑세스 방법에 대해 알아보려 합니다.

#1. 실버라이트에서 HTML 접근

우선 실버라이트에서 HTML의 요소에 접근하는 방법을 알아 보기 위해서, 간단하게 HTML과 실버라이트에 컨트롤을 배치합니다.

위쪽의 흰색 배경이 HTML영역이고 아래쪽에 푸른 배경이 실버라이트 영역입니다. 위쪽 HTML영역의 글을 텍스트박스에 입력하고, Silverlight 영역의 버튼을 누르면 HTML의 정보를 실버라이트 텍스트박스에 넣는 시나리오 입니다.

-MainPage.xaml-

public partial class MainPage : UserControl
{
     public MainPage()
        {
            InitializeComponent();
        }
     private void btnGetHTML_Click(object sender, RoutedEventArgs e)
     {
         HtmlDocument htmlDocument = HtmlPage.Document;
         HtmlElement htmlElement = htmlDocument.GetElementById("htmlInputBox");
         string text = htmlElement.GetAttribute("value");

         if(text!=null)
         {
             this.txtHTML.Text = text;
         }
     }

-MainPage.xaml.cs-

<form id="form1" runat="server" style="height:100%">
<h2>HTML영역</h2>
텍스트 입력 : <input type="text" id="htmlInputBox" style="width:400px;" /><hr />
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

……

-HTMLBridgeTestPage.aspx-

XAML에는 컨트롤의 배치가 선언 되어있고 btnGetHTML이라는 이름을 가진 버튼의 Click이벤트 핸들러가 정의되어 있습니다.비하인드 코드가 중요한데요. HtmlDocument 객체를 가져와서 GetElementById 메서드를 이용하여 HTML의 텍스트박스를 얻어 올 수 있습니다. HtmlElement 객체의 GetAttribute는 HTML요소의 속성값을 읽어 올 수 있습니다. 또한 SetProperty와 SetAttribute 메서드를 이용하여 값을 설정 할 수 있습니다.

실행시켜 보면 위와 같은 결과를 얻을 수 있습니다.

또한 HTML의 이벤트도 실버라이트에서 컨트롤 할 수 있는데요. AttachEvent메서드를 이용하면 됩니다.

public MainPage()
{
    InitializeComponent();
    HtmlDocument htmlDocument = HtmlPage.Document;
    HtmlElement htmlElement = htmlDocument.GetElementById("htmlInputBox");
    htmlElement.AttachEvent("onkeyup", new EventHandler(this.OnChange));


}




private void OnChange(object sender, EventArgs e)
{
    HtmlDocument htmlDocument = HtmlPage.Document;
    HtmlElement htmlElement = htmlDocument.GetElementById("htmlInputBox");


    string text = htmlElement.GetAttribute("value");








    if (text != null)
    {
        this.txtHTML.Text = text;
    }
}


private void btnGetHTML_Click(object sender, RoutedEventArgs e)


{



    OnChange(null, null);



}

- MainPage.xaml.cs -

테스트를 위해 AttachEvent 메서드를 이용하여, 생성자에 HTML의 텍스트 박스의 KeyUp 이벤트를 설정하였고, 이벤트 핸들러에서는 요소에서 가져온 텍스트를 실버라이트의 텍스트 박스에 설정합니다.

실행결과 HTML 텍스트박스의 글자가 바뀔 때 마다 실버라이트의 텍스트박스에 나타납니다.

#2. HTML에서 실버라이트 접근

HTML에서 실버라이트에 접근하는 시나리오를 위해 위와 같이 기존 .aspx에 버튼을 추가하고, 실버라이트 object요소에 id값을 추가합니다. 그리고 버튼의 클릭 속성에 자바스크립트 함수를 넣어줍니다.

<h2>HTML영역</h2>
    텍스트 입력 : <input type="text" id="htmlInputBox"   style="width:300px;" /> 	
<input type="button" id="htmlButton" onclick="CallSilverlight()" 
       value="버튼을 누르면 실버라이트에 접근" /><hr />
<div id="silverlightControlHost">
   <object id="ObjSilverlight" data="data:application/x-silverlight-2," 
            type="application/x-silverlight-2"
............

- HTMLBridgeTestPage.aspx -

실버라이트에 접근하려면 자바스크립트를 사용해야 하는데요. 버튼을 누르면 실버라이트의 텍스트박스에서 값을 가져와 HTML의 텍스트박스에 집어 넣도록 하겟습니다. 아래와 같이 자바스크립트를 <head>태그 안에 추가합니다.

<script type="text/javascript">
        function CallSilverlight() {
            var ObjSilverlight = document.getElementById("ObjSilverlight");
            var text = ObjSilverlight.Content.REG_SILVERLIGHT.SilverlightMethod();
            document.getElementById("htmlInputBox").value = text;
        }
    </script>

- HTMLBridgeTestPage.aspx –

자바스크립트를 살펴보면 document객체의 getElementById 함수에 실버라이트 Object태그의 id값을 넣어 실버라이트 객체를 얻어옵니다. 그 다음줄에서 ObjSilverlight.Content.REG_SILVERLIGHT.SilverlightMethod();와 같은 코드가 보이는데요, 이것이 핵심입니다.

자바스크립트를 통해 실버라이트에 접근하기 위해서는 RegisterSCriptableObject아래와 같이 객체를 등록 하여야 합니다. 객체를 등록하기 위해서는 객체에 [ScriptableMember]가 있어야 하고, 이 속성이 붙은 메서드는 자바스크립트에 노출됩니다.

 public MainPage()
 {
     InitializeComponent();
     ……
     HtmlPage.RegisterScriptableObject("REG_SILVERLIGHT", this);
 }



 [ScriptableMember]
 public string SilverlightMethod()
 {



     return this.txtHTML.Text;
 }

-MainPage.xaml.cs-

즉 위의 자바스크립트의 코드는 등록 된 실버라이트 객체의 ScriptableMemeber를 호출하는 코드입니다.

테스트를 해보니 HTML버튼을 누르면 자바스크립트가 호출되어, 실버라이트의 메서드를 호출하는 것을 알 수 있습니다.

HTMLBridge.zip

실버라이트를 처음으로 접할 때 프로젝트를 생성해 보셨을 것입니다. 프로젝트의 구조를 살펴보고, ASP.NET이나 HTML위에 실버라이트가 Object태그로 추가되는 것을 보고, 한번쯤 둘간의 상호작용을 어떻게 할지에 대해 궁금하셨을 것입니다. 오늘은 가장 기본이 되는 실버라이트와 HTML간의 엑세스 방법에 대해 알아 보았습니다. 이 방법은 ASP.NET과 자바스크립트 기술을 이용하는 것이고 이것을 이용하여 실버라이트가 addOn된 멋진 페이지를 작성 할 수 있습니다.

Visual Studio2010 Copy & Paste 한글 깨짐 현상 해결

맨날맑음 — Wed, 15 Sep 2010 18:25:43 +0900

안녕하세요? 맨날맑음 입니다.

Visual Studio 2010 정식 버전이 나온 지 꽤 시간이 흘렀고, 저는 선물로 받은 MSDN Subscriptions을 이용하여 사용하고 있습니다. 블로그를 운영하는 개발자라면 포스팅 내용 중에 소스코드를 넣는 일이 많이 있으실 텐데요. 블로그에 소스코드를 넣는 것은 단순히 Copy & Paste하는 방법이 있겠지만 이렇게 되면 소스코드의 색이 일괄적으로 검은색으로 나타나서 보기 불편하게 됩니다.

Google code의 SyntaxHighlighter와 같은 스크립트를 이용하는 방법이 있지만 저처럼 MS Word나 Live Writter를 이용하여 포스팅 하는 경우에는 포스팅 이후에 다시 수정하여, 소스코드 부분에 스크립트를 붙여 주어야 하기 때문에 불편한 점이 많은 것이 사실입니다.

그래서 제가 사용하는 방법은 MS Word를 이용하여 포스팅 하는 것 인데요, 그림을 붙여 넣기 하기도 편하고, 워드 프로그램의 특성 상 글을 편집하고 관리하기도 편리합니다. 그런데 Visual Studio 2010을 사용하면서 문제점이 생겼습니다. 소스코드를 붙여넣기 하면 주석에 포함된 한글이나 소스코드에 포함된 한글은 모두 깨져서 붙여지는 현상인데요.

protected void btnRegister_Click(object sender, EventArgs e)

{

switch (MemberAuthenticate.MemberCheck(tbID.Text, tbPassword.Text))

{

case -2:

lblInfo.Text = "이I미öI 가Æ¢®입O된ìE 아ú¨¡이I디ì©£ 입O니¥I다¥U";

return;

case -3:

lblInfo.Text = "아ú¨¡이I디ì©£와¯I 패¡¨¢스ö¨¬워¯o드ìa를¬| 정¢´확¢ç히¡À 입O력¤A하I세ù¨ù요¯a";

return;

}

해결 방법은 VS2010 플러그인을 설치하시면 됩니다.

-Fig1. Visual Studio2010 확장 관리자-

VS2010에서 새롭게 추가된 기능인 확장 관리자는 VS에 추가되는 여러 기능을 손쉽게 설치할 수 있도록 도와주는 메뉴입니다. [도구 -> 확장 관리자]를 선택하면 확장 관리자를 볼 수 있는데요. 왼쪽의 메뉴에서 온라인 갤러리를 선택하시면 다양한 플러그인을 볼 수 있습니다. 한글 깨짐을 해결 하기 위해서는 Productivity Power Tools를 설치 하시면 됩니다. 마우스 더블클릭만으로 손쉽게 설치되어 편리하게 사용 할 수 있습니다.

다른 방법으로 Productivity Power Tools를 설치 하시려면 여기에서 다운로드 받아 설치 하시면 됩니다.

-Fig2. Productivity Prower Tools 다운로드 페이지-

설치하니 소스코드의 한글이 무사하군요! 사소하지만 모르면 완전 불편한 팁이었습니다!

private void listView1_DragDrop(object sender, DragEventArgs e)
{
    string[] dropFiles = e.Data.GetData(DataFormats.FileDrop) as string[];
    if (dropFiles != null)
    {
        foreach (string fileName in dropFiles)
        {
            //파일에서 아이콘 추출
            Icon icon = Icon.ExtractAssociatedIcon(fileName);
            //이미지리스트에 아이콘 추가
            imageList.Images.Add(icon);
            //리스트뷰에 파일명과 인덱트 추가
            listView1.Items.Add(fileName.Substring(fileName.LastIndexOf("\\") + 1), listView1.Items.Count);
        }

}

마우스 드래그를 이용한 사각형 그리기

맨날맑음 — Mon, 13 Sep 2010 21:51:27 +0900

안녕하세요? 맨날맑음 입니다.

이번 포스팅은 WPF에서 마우스 드래그를 이용한 간단한 사각형 그리기입니다. 이 예제를 응용하면 원이나 선도 그릴 수 있고, 자료구조를 이용하면 윈도우 그림판과 같은 기능도 쉽게 만들 수 있습니다.

-Fig1. 사각형을 그리는 WPF 어플리케이션-

Fig1에서 보는 바와 같이 마우스의 현재 좌표를 왼쪽 상단에 표시해 주며, 드래그를 이용하여 사각형을 그리는 기능을 합니다. WPF에서 제공하는 InkCanvas객체를 이용하면 더 간단하게 구현도 가능 하겠네요^^; 하지만 이번에는 Grid에 사각형을 그리는 방법으로 구현해 보겠습니다.

#1. 마우스 이벤트

-Fig2. WPF Window의 마우스 이벤트-

WPF의 컨트롤은 마우스 이벤트를 가지고 있습니다. 마우스 다운이나 업, 마우스 무브, 마우스 휠 등 이벤트를 지원하는데요. 우리 예제에서는 MouseLeftButtonDown과 MouseMove, MouseLeftButtonUp 세 가지 이벤트를 사용합니다. 마우스 이벤트 핸들러에서는 MouseEventArgs 객체가 인자로 넘어오고 이 이벤트객체를 이용하면 현재 마우스의 상태정보를 알 수 있습니다.

	이름	설명
	Device	이 이벤트를 시작한 입력 장치를 가져옵니다. (InputEventArgs에서 상속됨)
	Handled	라우트된 이벤트가 경로를 따라 이동할 때의 현재 이벤트 처리 상태를 나타내는 값을 가져오거나 설정합니다.
	LeftButton	마우스 왼쪽 단추의 현재 상태를 가져옵니다.
	MiddleButton	마우스 가운데 단추의 현재 상태를 가져옵니다.
	MouseDevice	이 이벤트와 연결된 마우스 장치를 가져옵니다.
	OriginalSource	부모 클래스에서 Source를 조정하기 전에 순수 적중 테스트에 의해 결정되는 원본 보고 소스를 가져옵니다.
	RightButton	마우스 오른쪽 단추의 현재 상태를 가져옵니다.
	RoutedEvent	이 RoutedEventArgs 인스턴스와 연결된 RoutedEvent를 가져오거나 설정합니다. (RoutedEventArgs에서 상속됨)
	Source	이벤트를 발생시킨 개체에 대한 참조를 가져오거나 설정합니다. (RoutedEventArgs에서 상속됨)
	StylusDevice	이 이벤트와 연결된 스타일러스 장치를 가져옵니다.
	Timestamp	이 이벤트가 발생한 시간을 가져옵니다. (InputEventArgs에서 상속됨)
	XButton1	첫 번째로 확장된 마우스 단추의 현재 상태를 가져옵니다.
	XButton2	두 번째로 확장된 마우스 단추의 현재 상태를 가져옵니다.

- MouseEventArgs 의 속성 (출처 : MSDN)-

이벤트 객체의 속성을 통해 마우스의 현재 상태정보를 알 수 있으며, GetPosition() 메서드를 이용하면 마우스 포인트의 좌표를 얻어 올 수도 있습니다.

#2. Shape객체

WPF에서 Rectangle, Ellipse, Polygon과 같은 모든 도형의 기본 클래스는 Shape입니다. Shape는 UI 요소이므로 패널이나 대부분의 컨트롤에서 사용 할 수 있습니다. Stroke 속성을 사용하면 도형의 테두리(윤곽선)의 색상을 지정 할 수 있고, StrokeThickness 속성을 이용하면 도형의 테두리 두께를 설정 할 수 있습니다. 또한 Fill 속성을 이용하면 도형의 표면 색상을 설정 할 수 있습니다.

-Fig3. 여러 속성을 적용하여 랜더링 된 원의 모습-

#3. 코드 구현

코드가 간단하여, 대부분의 설명은 주석으로 코드설명을 대신합니다. WPF 프로젝트를 생성하고, 다음과 같은 코드를 넣어 줍니다.

-Code1. MainWindow.xaml-

 
public partial class MainWindow : Window
 {
     /// 
     /// 드레그를 시작한 마우스 좌표;
     /// 
     Point prePosition;
     /// 
     /// 현재 그려지는 사각형
     /// 
     Rectangle currentRect;

     public MainWindow()
     {
         InitializeComponent();
         //이벤트 핸들러 생성
         this.root.MouseLeftButtonDown += new MouseButtonEventHandler(root_MouseLeftButtonDown);
         this.root.MouseMove += new MouseEventHandler(root_MouseMove);
         this.root.MouseLeftButtonUp += new MouseButtonEventHandler(root_MouseLeftButtonUp);
         
         // 좌표를 나타내는 TextBlock을 최상위로 ...
         Grid.SetZIndex(this.tbPosition, 99999);
     }

     /// 
     /// 마우스 클릭 해제 이벤트 핸들러
     /// 
     /// 
     /// 
     void root_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
     {
         //마우스 캡춰를 제거한다.
         this.root.ReleaseMouseCapture();
         SetRectangleProperty();
         currentRect = null;
     }

     private void SetRectangleProperty()
     {
         //사각형의 투명도를 100% 로 설정
         currentRect.Opacity = 1;
         //사각형의 색상을 지정
         currentRect.Fill = new SolidColorBrush(Colors.LightYellow);
         //사각형의 테두리를 선으로 지정
         currentRect.StrokeDashArray = new DoubleCollection(); ;
     }

     /// 
     /// 마우스 이동 이벤트 핸들러
     /// 
     /// 
     /// 
     void root_MouseMove(object sender, MouseEventArgs e)
     {
         
         //현재 이동한 마우스의 좌표를 얻어온다
         Point currnetPosition = e.GetPosition(this.root);
         //좌표를 표시한다.
         this.tbPosition.Text = string.Format("마우스 좌표 : [{0},{1}]", currnetPosition.X, currnetPosition.Y);
         //마우스 왼쪽 버튼이 눌려있으면
         if (e.MouseDevice.LeftButton == MouseButtonState.Pressed)
         {
             if (currentRect != null)
             {
                 //사각형이 나타날 기준점을 설정한다.
                 double left = prePosition.X;
                 double top = prePosition.Y;
                 //마우스의 위치에 따라 적절히 기준점을 변경한다.
                 if (prePosition.X > currnetPosition.X)
                 {
                     left = currnetPosition.X;
                 }
                 if (prePosition.Y > currnetPosition.Y)
                 {
                     top = currnetPosition.Y;
                 }
                 //사각형의 위치 기준점(Margin)을 설정한다
                 currentRect.Margin = new Thickness(left, top, 0, 0);
                 //사각형의 크기를 설정한다. 음수가 나올 수 없으므로 절대값을 취해준다.
                 currentRect.Width = Math.Abs(prePosition.X - currnetPosition.X);
                 currentRect.Height = Math.Abs(prePosition.Y - currnetPosition.Y);
             }
         }
     }

     /// 
     /// 마우스 왼쪽 버튼 클릭 이벤트 핸들러
     /// 
     /// 
     /// 
     void root_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
     {
         //마우스의 좌표를 저장한다.
         prePosition = e.GetPosition(this.root);
         //마우스가 Grid밖으로 나가도 위치를 알 수 있도록 마우스 이벤트를 캡처한다.
         this.root.CaptureMouse();
         if (currentRect == null)
         {
             //사각형을 생성한다.
             CreteRectangle();               
         }
     }

     private void CreteRectangle()
     {
         
         currentRect = new Rectangle();
         currentRect.Stroke = new SolidColorBrush(Colors.DarkGreen);
         currentRect.StrokeThickness = 2;
         currentRect.Opacity = 0.7;
         //사각형을 그리는 동안은 테두리를 Dash 스타일로 설정한다.
         DoubleCollection dashSize = new DoubleCollection();
         dashSize.Add(1);
         dashSize.Add(1);
         currentRect.StrokeDashArray = dashSize;
         currentRect.StrokeDashOffset = 0;
         //사각형의 정렬 기준을 설정한다.
         currentRect.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
         currentRect.VerticalAlignment = System.Windows.VerticalAlignment.Top;
         //그리드에 추가한다.
         this.root.Children.Add(currentRect);
     }
 }

-Code2. MainWindow.xaml.cs-

마우스를 드래그하는 동안은 그림판이나 포토샵에서와 같이 점선으로 사각형의 모양을 표시 해 줄 필요가 있기 때문에 테두리의 속성을 변경 할 필요가 있습니다. 테두리를 점선으로 표시하는 속성은 Rectangle객체의 StrokeDashArray를 사용하여 설정 할 수 있으며, XAML에서는 다음과 같이 표현 할 수 있습니다.

-Fig4. StrokeDashArray 속성이 적용 된 Ellipse-

DragSample.zip

DragSample.exe

소스 빌드 환경 : VisualStudio2010, .NET Framework4.0

쿠키(Cookie)와 세션(Session)

맨날맑음 — Thu, 9 Sep 2010 20:20:23 +0900

작성중

일반적으로 동적인 웹 사이트 개발 시 상태관리(State Management)가 필요 합니다. 이번 포스팅에서는 상태관리가 무엇인지와 우리가 일반적으로 많이 사용하는 쿠키(Cookie)와 세션(Session)에 대해 자세히 알아 보도록 하겠습니다.

#1. 웹 서버 동작 원리

웹 사이트 상태관리의 필요성을 알기 위해 웹 서버와 클라이언트(웹 브라우저)가 어떠한 방식으로 동작 하는지를 먼저 알아 보겠습니다.

-Fig1. 정적 웹 서버 동작 원리-

Fig1을 보면 아주 간단한 원리로 동작 하는 것을 알 수 있는데요. 클라이언트가 HTTP 프로토콜을 사용하여 웹 서버로 요청(Request)을 하게 되면 웹 서버는 해당 하는 HTML을 웹 브라우저로 전송 해 주고 웹 브라우저는 응답(Response) 받은 HTML을 파싱하여 사용자에게 보여주게 됩니다. 여기서 ‘요청’이란 우리가 웹 브라우저의 주소 표시줄에 http://crynut84.tistory.com이라고 입력 하는 행위나 웹 사이트의 링크를 마우스로 클릭하는 행위 등을 말합니다.

웹 사이트는 다시 정적인 웹 사이트와 동적인 웹사이트로 나눌 수 있습니다. 정적인 웹 사이트는 웹 서버에서 .HTML 파일을 완성된 .HTML 파일을 가지고 있다가 클라이언트의 요청이 있을 시 해당하는 .HTML 파일을 돌려 주는 형태입니다. 당연히 HTML 페이지의 내용들은 이미 결정 되어있어 있으므로 클라이언트의 상태, 방문정보, 시각등의 내용에 관계없이 항상 동일한 HTML 페이지를 보여줍니다. 요즘은 이런 웹사이트는 거의 없을 듯 합니다.

동적인 웹 사이트는 사용자의 액션에 따라 웹 사이트가 다르게 동작 하는 것을 말합니다. 예를들어 요즘 웹 사이트는 거의 로그인이라는 인증 과정을 거치게 되고, 로그인을 하면 ‘전호진님 환영합니다’라고 환영 인사도 해줍니다. 또한 게시판은 검색어에 따라 다른 결과를 보여주게 되고, 사용자 입맛에 맛게 정렬도 할 수 있습니다. 이와같이 요즘 일반적으로 볼 수 있는 사용자와 웹사이트가 서로 상호작용을 하는 웹 사이트를 동적인 웹사이트라고 합니다.

동적인 웹사이트를 만드는 기술은 ASP.NET, JSP, ASP, PHP, CGI등 여러 가지가 있습니다. 마이크로소프트의 동적인 웹사이트를 만드는 기술인 ASP.NET의 동작 원리(Fig2)를 보면 정적 웹사이트와 조금 다른 것을 알 수 있는데요.

-Fig2. 동적 웹 서버 동작 원리-

클라이언트가 요청하게 되면 웹 서버는 요청에 대한 적절한 HTML을 새롭게 생성 합니다. 요청에 대한 일련의 처리(로직 수행)를 수행하게 되고 처리 결과를 다시 클라이언트에 돌려 주게 되는데 동적인 웹 사이트라고 해도 클라이언트가 받는 최종 응답은 정적인 HTML 페이지입니다. 예를들어 게시판에 여러 게시글이 있는데 사용자가 ASP.NET을 검색어로 입력하고 검색 버튼을 누르게 되면 이 요청을 웹서버가 받아서 게시글 중 ASP.NET이 들어간 결과만 찾아서 형식에 맞는 HTML을 구성하게 되고 클라이언트에 응답하주게 되는 것입니다. 이렇게 동적인 처리를 위해 ASP.NET과 같은 웹 기술이 필요하게 되고, 모든 처리는 웹 서버에서 수행되며, 클라이언트의 입장에서는 정적인 웹 사이트와 동일하게 웹 서버에 요청을 하고 응답받은 결과를 파싱하여 보여 주게 됩니다.

#2. 상태 관리(State Management)

웹 사이트를 사용하는 사용자는 HTTP GET방식이나 HTTP POST방식을 사용하여 웹 서버로 페이지를 요청하게 되고, 웹 브라우저는 웹 서버에서 응답받은 HTML을 파싱하여 렌더링하게 됩니다. 이러한 일련의 주기를 ‘라운드트립(Round Trip)’ 이라고 합니다.그런데 HTTP 프로토콜은 상태를 저장 할 수 없는 프로토콜입니다. 이 말은 클라이언트의 요청이 왔을대 웹 서버는 해당 요청에 대한 응답인 HTML을 보내주고 연결을 끊어버린다는 것입니다. 그렇기 때문에 라운드트립 시 페이지에 있는 컨트롤의 사용자 입력정보나 페이지의 정보들이 모두 손실 되게 됩니다. 예전에 사용하던 정적인 웹사이트(일방적으로 보기만 하는 웹사이트)에서는 문제가 되지 않지만 동적인 웹사이트에서는 사용자의 요청이나 컨트롤의 입력정보를 유지할 필요가 있기 때문에 ASP.NET은 상태 관리를 할 수 있는 여러가지 기능을 제공합니다.

상태관리의 정보를 저장하는 장소에 따라 두가지로 분류 할 수 있는데, 웹 서버에 저장하는 경우와, 클라이언트에 저장하는 경우가 있습니다.

▶ 상태 정보를 클라이언트에 저장하는 방식

뷰 상태(View State)
컨트롤 상태(Control State)
숨겨진 필드(Hidden Field)
쿠키(Cookie)
쿼리 문자열(Query String)

▶ 상태 정보를 웹 서버에 저장하는 방식

응용 프로그램 상태(Application State)
세션(Session)
프로필 속성(Profile Property)
데이터베이스(Database)

두가지 방식은 장단점이 존재 하는데요. 일반적으로 데이터가 작고, 중요하지 않은(보안 등의 이유)정보는 클라이언트 측에서 관리하고, 나머지는 웹 서버에서 관리 하는 것이 좋습니다. 여러가지 상태관리 기능 중 Cookie와 Session에 관해 자세히 알아보겠습니다.

#3. 쿠키(Cookie)

-Fig3. 맛있는 쿠키-

쿠키는 요청 및 응답하는 과정에 포함되는 텍스트 정보이고 쉽게 구현하여 사용 할 수 있는 방법중에 하나입니다. 일반적인 브라우저에서 최대 4KB의 텍스트 정보를 담을 수 있으며 하나의 사이트는 20개만 허용되며, 모든 사이트를 통틀어서 300개로 제한 됩니다. 만약 이 범위를 넘어 더 많이 저장 하려고 할 경우에는 가장 오래된 쿠키부터 삭제되므로 사용의 주의해야하고, 4KB로 비교적 작은 크기만을 저장하기 때문에 적은 양의 데이터나 ID, 최근 읽은 글, 최근 본 상품과 같은 식별자를 저장할 때 사용하는 것이 적합합니다.

1. 쿠키의 동작 방식

쿠키는 서버에서 생성하여 클라이언트의 브라우저에서 관리하기 때문에 요청시 쿠키를 생성하고 브라우저를 닫을때 쿠키를 파괴합니다. 응답을 통해 얻어온 쿠키는 만료시간 여부에 따라 클라이언트의 PC에 파일로 저장하게 됩니다.

-Fig4. 웹 사이트를 처음 요청 할 경우 쿠키 생성 -

쿠키의 생성 주기를 살펴보면처음으로 페이지를 요청 할 경우 웹 서버에서는 쿠키를 생성하게 되고, 페이지를 돌려 줄때 HTTP 헤더에 쿠키를 포함하여 돌려 주게 됩니다. 이렇게 넘겨 받은 쿠키는 클라이언트에서 관리 하고 있다가, 다음번 요청때 쿠키를 함께 전송하게 되고, 서버에서는 쿠키 정보를 읽어 이전 상태 정보를 알 수 있게 됩니다. 이때 웹 서버는 Fig5에서 처럼 정보를 변경 할 필요가 있을때 쿠키를 업데이트하여 다시 변경된 쿠키와 함께 응답하게 됩니다.

-Fig5. 쿠키를 가지고 있을 경우 쿠키 활용-

2. ASP.NET에서 쿠키 사용

쿠키는 서버로 부터 응답받은 사항이기 때문에 HttpResponse 객체를 통해 클라이언트로 전송 됩니다. 쿠키에 정보를 저장하는 방법은 두가지가 있습니다. Page클래스의 Response 객체를 사용하는 것과 HttpCookie 클래스를 사용하는 방법입니다.

//Response 사용 
Response.Cookies["쿠키명1"].Value = "쿠키 예제;
Response.Cookies["쿠키명1"].Expires = DateTime.Now.AddMinutes(30); 

//HttpCookie 클래스 사용 HttpCookie cookie = new HttpCookie("쿠키명2");
cookie.Value = "쿠키 예제";
cookie.Expires = DateTime.Now.AddSeconds(30); 
Response.Cookies.Add(cookie);

-Code1. 쿠키 저장-

쿠키명1과 쿠키명2라는 이름을 사용하는 쿠키를 생성 하였고 각각 Value 속성을 통해 상태유지에 필요한 값을 넣어 주었습니다. Expires 속성은 만료 기간인데, 이 속성을 설정하면 쿠키가 클라이언트의 컴퓨터의 파일의 형태로 저장됩니다. 만료기간을 설정하지 않은 쿠키는 브라우저의 메모리에서 관리됩니다. Code1에서 쿠키명1은 30분후에 쿠키를 지우며, 쿠키명2는 30초 후에 쿠키를 지우도록 설정 하였습니다. 만료시간이 지난 쿠키는 클라이언트가 쿠키를 생성한 웹 사이트에 다시 요청을 보낼때 삭제됩니다.

Windows Form에서 WPF Window Application 호출하기

맨날맑음 — Mon, 28 Jun 2010 12:41:22 +0900

안녕하세요? 맨날맑음 입니다.

Windows Form Application에서 WPF로 만든 Windows Application을 호출하려 합니다.
WPF의 Control을 윈폼에 호스팅 하기 위해서는 ElementHost를 사용하면 되는데요(이에 관한 강좌는 추후에 포스팅 하겠습니다.)
오늘은 윈폼에서 WPF의 창(Window)를 띄우려고 합니다.

#1. 프로젝트 생성

우선 Windows Forms 응용프로그램 프로젝트와 WPF 사용자 정의 컨트롤 라이브러리 프로젝트 2개를 생성합니다.

#2. DLL 참조

윈폼에서 WPF 윈도우를 호출하기 위해 WPF 프로젝트의 DLL(wpfControlLibrary1)과 윈폼에서 WPF 사용을 위한 DLL을 참조 합니다.

Windows Form에서 WPF를 사용하기 위한 DLL 목록
PresentationCore
PresentationFramework
System.Xaml
WindowsBase

#3. WPF 윈도우 호출
이제 Windows Form의 소스코드에 WPF 윈도우 호출 코드를 넣습니다.(저는 간단히 버튼을 누를 때 WPF 창이 나오도록 하겠습니다)

private void button1_Click(object sender, EventArgs e)

{

Window1 WPF_Wnd = new Window1();

WPF_Wnd.Show();

}

#4. 결과 확인

Sample01.zip

간단한 방법으로 Windows Form에서 WPF 윈도우를 호출 할 수 있습니다. 감사합니다.

[HOONS닷넷 세미나] Advanced Rich Experience

맨날맑음 — Wed, 23 Jun 2010 15:23:44 +0900

HOONS.NET 제22회 정기세미나 UX 뽀뽀뽀

맨날맑음 — Tue, 23 Mar 2010 10:25:27 +0900

- 일시 : 2010년 03월 25일(목) 19시 00분
- 장소 : 포스코센터 5층 (한국마이크로소프트)
- 참가비 : 삼천원+α (수익금 전액은 후원처 요셉의원에 기부됩니다.)
- 세미나 신청: http://www.hoons.kr/Seminar/Join.aspx

세미나 Agenda

19:00~19:30	등 록
19:30-20:10	실버라이트 4를 통해 보는 RIA의 미래 / 공인석
20:10~20:20	휴식
20:20-21:00	선구언니와 함께하는 익스프레션 블렌드 4 / 김선구, 이은아, 장미연
21:00~21:10	휴식
21:10-21:40	누구도 얘기해주지 않았던 WPF 4 이야기, 그리고 그 비밀 / 전호진, 이동규
21:40~	Q&A / 경품추첨

발표 내용 소개

실버라이트 4를 통해 보는 RIA의 미래 / 공인석
매년 열리는 MIX의 꽃은 바로 실버라이트죠. 올해, MIX10에서도 실버라이트 4가 베타 딱지를 떼고 RC로 공개되었습니다. 해마다 지칠줄 모르고 발전을 거듭하는 실버라이트! 이 세션에서는 실버라이트 4의 주요 기능을 소개하고 향후 리치 애플리케이션의 환경에 어떤 영향을 미칠지 예측해 봅니다.
선구언니와 함께하는 익스프레션 블렌드 4 / 김선구, 이은아, 장미연
실버라이트와 WPF 프로젝트를 수행할 때 블렌드는 선택이 아닌 필수가 되었습니다. 이번 MIX10에서 공개된 블렌드 4는 그 동안 디자이너 혼자서는 할 수 없었던 많은 기능이 추가되었습니다. 이제 블렌드로 더욱 인터랙티브한 애플리케이션을 만들 수 있습니다. 이 세션에서는 블렌드 전문가로서 디자이너에게 꼭 전해주고 싶은 기능과 활용법을 소개합니다.
누구도 얘기해주지 않았던 WPF 4 이야기, 그리고 그 비밀 / 전호진, 이동규
차세대 윈도우 리치 클라이언트 애플리케이션 개발을 지원하는 강력한 도구인 WPF 4! 아무도 해주지 않았던 WPF 4의 '비밀'스러운 이야기를 풀어봅니다. 쉿!

진행자 소개

	공인석 / 실버라이트 시삽 HOONS닷넷 실버라이트 분야 시삽을 맡고 있고, 실버라이트가 소개된 이래로 실버라이트에 매진해 왔다. 유령회사 공도소프트라는 블로그를 통하여 기술 자료, 컬럼, 강좌 등을 진행하고 있으며 훈스닷넷을 비롯한 실버라이트 관련 커뮤니티 활성화에 기여하고 있다.
	김선구 / 익스프레션 시삽 웹디자이너, 액션스크립터로 일해 왔다. 일찍이 UX 디자인의 중요성을 깨달아 ,Silverlight의 베타시절부터 Silverlight와 WPF 와 같은 기술로 향상된 UX 구현을 하는 인터랙티브 디자이너로 일하였고, 다수의 교육 및 강의을 진행하였다. 하얀코코의 예제로 배우는 익스프레션 블렌드 & 실버라이트(www.whitecoco.net) 를 운영중이며 마이크로소프트의 MVP이고 닷넷엑스퍼트의 UX컨설턴트로 일하고 있다.
	장미연 / 익스프레션 시삽 Microsoft Blend MVP로 활동하고 있고 HOONS닷넷의 Expression 시삽을 맡고 있으며 각종 세미나와 교육을 진행하고 있다. 현재 바이널(http://www.vi-nyl.com/) 인터렉티브 사업부 VLab에서 근무하고 있으며 디지털교과서를 비롯하여 다양한 WPF & Silverlight 프로젝트를 진행하였다. "짱묜"이라는 닉네임으로 블로그(http://zzangmyon.com/)를 운영중이다.
	이은아 / 익스프레션 시삽 현재 d'strict 에서 UX Designer로 서피스 프로젝트에서 디자인 구현을 하고 있다. Expression MVP이며 , HOONS닷넷에서는 Expression 파트의 시삽으로 활동하고 있다.
	전호진 / WPF 시삽 현재 HOONS닷넷 커뮤니티 WPF시삽으로 활동하고 있으며 닷넷 전반적인 기술에 관심이 많다. 아는것은 설명하면서 늘어난다는 생각으로 개인블로그(Life is dynmic :: http://crynut84.tistory.com)를 운영하고 있으며, 특히 최근에는 동영상 압축(Codex)과 영상처리에 집중하고 있다. 또한 항상 긍적적인 마인드를 가지고자 '맨날맑음'이라는 닉네임을 사용한다.
	이동규 / WPF 시삽 현재 MSP(Microsoft Student Partners)로 활동중에 있으며, 닷넷 기술에 매우 많은 관심을 가지고 있다. 새로운 신기술을 굉장히 좋아하며 그것을 바로 활용하여 새로운것을 만드는것을 좋아한다.

세미나 장소

한국 마이크로소프트 - 포스코 센터 5층

경품안내

Calmee Space 콤보 Plus
공인석 MVP 협찬

영화예매권 * 2
한진수 MVP 협찬

아이폰커버
Elecom 협찬

?

상사에게 사랑받을 수 있는 절대 아이템
공인석 MVP 협찬

* 경품은 사정에 의해 동급의 다른 제품으로 제공될 수 있습니다.

스폰서안내

HOONS.NET 20회 정기 세미나 RIA(Rich Interactive Application)

맨날맑음 — Thu, 25 Feb 2010 01:36:13 +0900

- 일시 : 2010년 02월 25일(목) 19시 00분
- 장소 : 포스코센터 5층 (한국마이크로소프트)
- 참가비 : 삼천원+α (수익금 전액은 후원처 요셉의원에 기부됩니다.)
- 세미나 신청: http://www.hoons.kr/Seminar/Join.aspx

세미나 Agenda

19:00~19:20	등 록
19:20-19:40	다시 생각해보는 UX와 RIA / 공인석
19:40-20:40	포토라이트 시즌2: 웹캠과의 만남 / 최다은, 김동욱
20:40~20:55	휴식
20:55-22:00	WPF 3D 기초부터 활용까지 / 전호진 이동규
22:00~	Q&A / 경품추첨

발표 내용 소개

다시 생각해보는 UX와 RIA / 공인석
2007년 무렵으로 기억합니다. WPF가 발표되고 WPF/E가 실버라이트로 이름을 바꾸어 발표되면서 마이크로소프트도 본격적으로 RIA시장에 뛰어들게 된 시기였죠. 물론 그 때까지도 UX란 단어와 RIA라는 단어는 수도 없이 많이 사용되었고 갑론을박이 많았지만 닷넷 세상에서는 바로 이 즈음이 시작이었습니다. 그 당시에는 제목에 RIA를 달고 나온 세미나가 참 많았는데, 어느 순간부터 세미나에 RIA란 단어가 사라지고 그 자리를 UX가 채우기 시작했습니다. 이제는 UX나 RIA란 단어를 모르면 트렌드에 뒤처지는 사람으로 취급 받을지도 모른다는 생각도 듭니다. 그런데, 우리는 과연 이 단어의 의미를 생각하면서 사용하고 있을까요? 최근에는 UX와 RIA라는 용어를 전혀 의미에 맞지 않게 사용하는 경우를 상당히 자주 보면서 이런 질문을 떠올려 봅니다. 이번 세션에서는 2010년, 실버라이트가 발표된지 벌써 햇수로 4년이 지난 이 시점에서 UX와 RIA를 다시 한번 조명하고 향후 RIA 개발과 UX에 대해 간단하게 브리핑해 봅니다.
포토라이트 시즌2: 웹캠과의 만남 / 최다은, 김동욱
이용자의 정보 생산ㆍ선택능력, 정보 소비 욕구가 커지면서 블로그 등 개인미디어 서비스 이용이 크게 증가하고 있다. 네티즌들이 블로그 및 미니홈피에 게재하는 글이나 사진 컨텐츠 제작이 용이해진 이유중 하나로 디지털카메라, 카메라 폰, 웹캠의 보급 등 배포도구의 간편화를 들 수 있다. 이번에 출시된 실버라이트 4는 웹캠기능을 추가함으로써 인터넷이라는 미디어 환경에서 사용자에게 더욱 편하면서도 풍성한 WEB문서의 작성을 지원하고 있다. 이에 이번 세미나에서는 실버라이트 4에서 어떻게 웹캠기능을 구현 할 수 있는지, "포토라이트 시즌2"를 통해 살펴보고자 한다.
WPF 3D 기초부터 활용까지 / 전호진, 이동규
최근들어 게임, 에니메이션, 영화분야에서도 3D를 사용한 사례가 점점 늘어나면서 사람들의 관심도 점점 높아지고있다. 이에 3D 어플리케이션 개발도 활발해 지고 있다. 3D에 대한 관심은 많지만 비교적 어려운 개념으로 인해 정작 3D 인터페이스를 활용한 응용프로그램은 찾아보기 힘들다. 또한 기본적인 3D 개념을 이해하고 WPF 3D를 유연하게 다루는 개발자는 많지 않아 보인다. 이번 섹션에서 WPF 3D의 기본 개념부터 차근차근 짚어 보고 실전에서 활용 할 수 있는 방법을 알아 본다.

진행자 소개

	공인석 / 실버라이트 시삽 HOONS닷넷 실버라이트 분야 시삽을 맡고 있고, 실버라이트가 소개된 이래로 실버라이트에 매진해 왔다. 유령회사 공도소프트라는 블로그를 통하여 기술 자료, 컬럼, 강좌 등을 진행하고 있으며 훈스닷넷을 비롯한 실버라이트 관련 커뮤니티 활성화에 기여하고 있다.
	최다은 / 실버라이트 시삽 HOONS닷넷 실버라이트 시삽이며, 야간학부 3학년에 재학중으로 셀러던트의 길을 걷고 있는 중이다. Asp.net 개발 경력을 계속 쌓아 왔으며, Nunit을 이용한 단위테스트에 관심이 많다. 실버라이트로 다양한 어플리케이션을 만들어 보는것이 목표이다. 부족한 내공을 쌓기 위해 늘 노력하는 자세를 잊지 않으려고 한다. 밤하늘을 바라보며 수많은 별들을 사진으로 담는 여행가를 꿈꾸기도 한다.
	김동욱 / 실버라이트 시삽 Silverlight를 통해 다양한 프로젝트를 개발해 왔으며 HOONS닷넷에서는 커뮤니티 시삽을 맡고 있다. 지금은 개발자들이 쉴수 있고 또, 편히 놀수 있는 공간과 만남을 위해 노력하고 있다
	전호진 / WPF 시삽 현재 HOONS닷넷 커뮤니티 WPF시삽으로 활동하고 있으며 닷넷 전반적인 기술에 관심이 많다. 아는것은 설명하면서 늘어난다는 생각으로 개인블로그(Life is dynmic :: http://crynut84.tistory.com)를 운영하고 있으며, 특히 최근에는 동영상 압축(Codex)과 영상처리에 집중하고 있다. 또한 항상 긍적적인 마인드를 가지고자 '맨날맑음'이라는 닉네임을 사용한다.
	이동규 / WPF 시삽 현재 MSP(Microsoft Student Partners)로 활동중에 있으며, 닷넷 기술에 매우 많은 관심을 가지고 있다. 새로운 신기술을 굉장히 좋아하며 그것을 바로 활용하여 새로운것을 만드는것을 좋아한다.

세미나 장소

한국 마이크로소프트 - 포스코 센터 5층

경품안내

확정 후 업데이트 예정

YUV Player 만들기

맨날맑음 — Tue, 9 Feb 2010 22:26:03 +0900

안녕하세요? 맨날맑음 입니다.

YUV 시퀀스를 재생하기 위해서 Raw Data Displayer(RDisp)라는 프로그램을 사용 하였습니다. 카이스트에서 한국사람이 개발한 프로그램인데요. 여러개의 파일을 동시에 재생하고, 여러가지 YUV 포맷을 지원하여 매우 잘 사용하고 있었습니다.

- Fig1. RDisp -

저도 몇달전쯤 심심하던차에 YUV Player를 만들어 보려고 시도해 보았습니다. 사실 Color Space에 대한 명확한 이해와 레퍼런스가 부족하여 몇일을 걸려 완성했는데요..(사실 아직 문제점이 많습니다) 만들면서 발생한 문제점과 만드는 방법을 포스팅하려 합니다.

#1. YUV Plyaer를 만들기 위한 준비

개발환경

IDE : Microsoft Visual Studio 2008

언어 : Visual C#

프레임워크 : .NET Framework 2.0

출력 형식 : Windows Form

제가 닷넷을 선택하고 윈폼으로 프로젝트를 한 이유는 간단합니다. MFC나 기타 다른 방법이 있을 테지만 닷넷이 제일 익숙하기 떄문이었습니다. –_-; 그냥 플레이어의 알고리즘만 익히자는 취지도 이 선택에 한 몫 했습니다.

막상 Player를 만드려고 보니 YUV를 어떻게 화면에 뿌려줄까? 라는 의문이 들었습니다. YUV를 바로 화면에 뿌릴 수 있는 방법은 애당초 없습니다. 컴퓨터 화면은 RGB포맷을 사용하기 때문이죠. 그렇습니다. YUV를 RGB로 바꿔야 합니다.

YUV Player의 프로세싱 과정

1. YUV 데이터를 읽어 온다.
2. RGB로 변환한다.
3. RGB에 Bitmap 헤더 정보를 입혀 Bitmap으로 변경한다.
4. Bitmap을 fps에 따라 적당한 속도로 화면에 뿌려준다.

대충 위와같은 과정을 거치게 됩니다.

YUV와 RGB에 관한 지식이 필요합니다. 이전 포스팅 중 http://crynut84.tistory.com/56를 참고 하시면 관련 내용을 알 수 있습니다.그리고 위키(http://en.wikipedia.org/wiki/YUV)를 보시면 좀 더 자세한 정보를 얻을 수 있습니다.

#2. YUV –> RGB

public Color YUVtoRGB(int Y, int U, int V)

{

return Color.FromArgb(Clippiing((76284 * (Y - 16) + 104595 * (V - 128)) >> 16),

Clippiing((76284 * (Y - 16) - 53281 * (V - 128) - 25625 * (U - 128)) >> 16),

Clippiing((76284 * (Y - 16) + 132252 * (U - 128)) >> 16));

}

byte Clippiing(int data)

{

return (byte)((data < 0) ? 0 : ((data > 255) ? 255 : data));

}

위와같은 방법으로 YUV를 RGB로 변경 할 수 있습니다. YVUtoRGB 메서드의 인자에 YUV를 넣으면 Color 객체로 return 하게 되어있습니다. Clipping 메서드는 단순히 0~255값을 가지는 RGB요소가 범위를 벗어 났을 경우 범위안으로 넣어주는 역할을 합니다.

#3. YUV4:2:0 포맷의 이해

제가 가장 많은 시간이 걸린 부분입니다. YUV4:2:0 비트스트림에 대한 정확한 이해가 없었기 때문에 RGB로 변경하여 화면에 뿌렸을 경우 계속해서 Color성분이 이상하게 나오는 것이었습니다.

- Fig2. YUV4:2:0의 개념-

위 부분을 정확히 이해해야지만 RGB로 컨버팅 하였을때 원하는 영상을 얻을 수 있습니다. 4:2:0이면 Y성분4개가 U,V성분을 하나씩 공유해서 쓴다는 것은 쉽게 알 수 있습니다. 하지만 저는 Y0,Y1,Y3,Y4의 성분이 U0을 공유하여 쓰는 줄 알았습니다. 이걸로 거의 하루의 시간을 버리게 되었죠;;

위의 Fig2에서 알 수 있다 싶이 크기가 Width : 8, Height : 4인 프레임이 있을 때, Y0,Y1,Y8,Y9가 U0과 V0을 공유하게 됩니다. 요걸 알고 부터, 기본개념을 정확히 익혀야 하는 것을 다시한번 절감하였습니다.

즉. Y0부분을 RGB로 바꾸고 싶으시면 Y0, U0, V0의 값을 YVUtoRGB 메서드에 인자로 넣어주면 Y0자리의 Color(RGB)가 나오게 됩니다. 그림에 보면 색깔로 자신의 짝을 구분해 놓았습니다.

#4. 타이머 셋팅 영상 플레이

여기까지 만들었다면 다음은 간단합니다.해당하는 영상을 얼마의 속도로(fps) 재생할지 결정하여 PictureBox컨트롤에 해당하는 Bitmap을 보여주기만 하면 됩니다. 저는 1초에 30프레임 정도로 셋팅하였습니다.

#5. 문제점

기본적으로 재생하는데는 문제가 없습니다. 하지만 YUV 시퀀스를 로딩하는데 엄청난 시간이 소요됩니다. 또한 CPU 점유율 또한 엄청 잡아 먹게 됩니다. 각 픽셀을 RGB로 만드는데 많은 연산이 필요하여 그런 것 같은데요.. BackgroundWorker를 사용하여 쓰레드를 이용하여 처리했음에도 로딩 시간이 필요하게 됩니다.

이 문제가 사실 제일 큰 문제인데요.. 혹자는 어셈블리 코딩으로 퍼포먼스를 높여야한다고 하고, 닷넷을 선택한 것 자체가 문제라는 소리도 있고, 또.. 제 프로그램의 프로세스 자체가 애초에 틀렸는지도 모르겠습니다.

가장 의심되는 부분은 YUV->RGB 변경시 많은 연산때문이라고 여겨 지는데요.. 검색하다보니 RGB Look up table사용하는 방법으로 해결 될 수도 있겠다는 생각도 듭니다.(하지만 정작 테이블 자료는 없더군요..)

향후 이 문제가 개선되면 RDisp 못지않은 기능을 가진 Player도 만들어 보고 싶군요..

제 소스코드와 실행파일을 첨부 합니다. 혹여 YUV 플레이어를 만드시는 분께는 조금이나마 도움이 되길 바라고, 제가 가진 문제점에 대해서는 많은 피드백이 있었으면 좋겠습니다. 아직 완성단계가 아니기 때문에 예외처리와 소스 구조는 고려하지 않고 작성하였습니다.

YUV Player (ver1.0) : OS에 .NET Framework2.0이 설치되어 있어야 합니다. 실행후 YUV 시퀀스를 드래그 앤 드롭 방식으로 끌어오거나 마우스 오른쪽 버튼을 이용하면 메뉴를 이용 하실 수 있습니다.

YUV Player.exe

소스코드 : Microsoft Visual Studio 2008에서 제작 하였습니다.

YUV Player.zip

Player 실행에 필요한 시퀀스는 이곳에서 다운로드 받으실 수 있습니다. 현재 YUV4:2:0 포맷과 CIF Size만 지원됩니다.

2010년 정보처리 기사 시험일정!

맨날맑음 — Thu, 28 Jan 2010 21:33:32 +0900

안녕하세요? 맨날맑음 입니다.

혹여 올해 시험 보시는분 계신가요? 제가 2009년에 후회되는 일 중 하나가 게으름에 정보처리기사 시험을 3번 신청만 하고 전부 시험장에도 가지 못했어요ㅜ (시험이 일요일인데 항상 토요일에 술 약속이 있었던 것도 한 몫했죠!)
이제 물러설 수 없습니다. 개발자에게 필수인 정보처리기사 올해는 꼭 따야겠죠? ㅎㅎ 올해는 기필코 1회 접수해서 다이렉트로 다다다다~ 따버려야겠어요!!

일단 제 일정에 마추어 시험 접수부터 잘해야 합니다.

- Fig1. 2010년 기사/산업기사 검정시행 일정 (출처:http://www.q-net.or.kr) -

시험 접수는 Q-NET 이라는 사이트에서 온라인으로 가능하여 매우 편리합니다!!
저는 작년에 사서 펴보지도 않았던 2009년 정보처리기사 필기 책이 있으니 이걸로 공부해야겠네요. 1회 시험 준비하시는 분들은 슬슬 책장 넘길때가 왔네요.. 올해 시험 보시는 분들 모두 합격 하세요^^ 화이팅~!

[H.264] Quantization(양자화)과 Zig-zag scanning

맨날맑음 — Wed, 20 Jan 2010 15:08:13 +0900

#1. [H.264] 동영상 압축의 기본 개념
#2. [H.264] 동영상 압축의 기본 개념 – RGB, YCbCr, 서브샘플링
#3. [H.264] Block-based Motion Estimation(ME)
#4. [H.264] Discrete Cosine Transform(DCT) 이산 코사인 변환
#5. [H.264] Quantization(양자화)과 Zig-zag scanning

안녕하세요? 맨날맑음 입니다.

지난시간(4번째)에 DCT에 관해 배워 봤습니다. 이번에는 Quantization과 Zig-zag scanning에 관해 알아보려 하는데요. 그 전에 전체 코딩 프로세싱 과정을 조금 살펴 볼까 합니다.

전체적인 그림을 보시면 지금 배우는 것이 ‘코딩과정 중 이부분 이구나’ 라는 걸 알 수 있으실 것입니다.

#1. H.264 Coding Processing

- Fig1. Hybrid Coding Algorithm -

Fig1은 H.264 코덱의 코딩 과정을 나타냅니다. 왼쪽부터 화살표를 따라가 보면 배운대로 MB(매크로블럭) 단위로 이미지를 처리하는 것을 알 수 있지요?

그리고 Intra Mode와 Inter Mode로 나누어 지는 것을 알 수 있습니다. 두개의 차이는 나중에 자세히 짚어 보겠지만, 일단은 Intra는 현재 프레임만을 이용해 코딩하는 것이고, Inter는 현재프레임과 또 다른 프레임(레퍼런스)를 이용하여 코딩하는 방법이라고 간략히만 알고 넘어 갑니다.

우리가 배워온 방법은 Inter이므로 Inter-silce쪽 화살표를 따라 갑니다. Intra pred.를 만나게 되네요. 아직 배우지 않은 내용이므로 Inter모드에서 Intra를 사용 하는구나.. 라고만 알고 넘어 갑니다. (나중에 설명 할 것이므로) 다른 화살표를 따라가니 Inter Pred.가 나옵니다. 바로 프레임과 프레임사이의 유사성을 이용하는 우리가 3번째 시간에 배운 ME에 관한 내용이군요.

Intra라는 것은 잘은 모르겠지만 Inter-Silce 모드에서는 Intra pred.과 Inter pred.(ME)를 하여 둘중에 작은값을 취한다는 것을 쉽게 알 수 잇습니다.

다음 과정을 보도록 하겠습니다. 둘중 작은 값의 Residual 이미지와 Motion Vector(MV)정보를 취하게 됩니다. 그것을 다시 지난시간에 배운 DCT를 하여 주파수 도메인으로 바꿔주게 되구요.. 주파수 도메인으로 바꾸게 되면 DC성분에 에너지가 집중된다고 하였습니다. 그 다음 과정이 QT/Zig-zag입니다. 바로 오늘 배울 내용이죠^^

예전에 어떤분이 ME과정에서 데이터의 감소가 일어나지 않는다고 잘못되었다고 하였는데요. 오늘 내용을 잘 습득하시면 모든 의문은 사라질 것입니다. 자자.. 각설하고 오늘의 본론으로 들어가도록 하겠습니다.

- Fig2. Video Model의 코딩 과정(빨간색은 오늘 배울 내용) -

#2. Quantization?

퀀타이제이션.. 말도 어렵습니다. 한국말로 양자화라고 한다고 하네요..참 코덱쪽은 생소한 언어들 때매 처음에 고생하는 면도 있는것 같습니다. 여튼 우리모두의 백과사전인 위키백과에서 검색해보면.

물리학에서 양자화(quantization)는 연속적으로 보이는 양을 자연수로 셀 수 있는 양으로 재해석하는 것을 이야기한다. 즉, 어떤 물리적 양이 연속적으로 변하지 않고 어떤 고정된 값의 정수배만을 가지는 것을 '그 양이 양자화 되었다.'고 한다. 예를 들면 전하는 연속적으로 변하는 양이 아니고 어떤 기본량. 즉 전자의 전하 e=4.8x10^-10 (esu)의 정수배로 되어 있다. 따라서 전하는 양자화 된 양이라고 할 수 있다.
정보 이론에서 양자화는 아날로그 데이터, 즉 연속적인 값을 디지털 데이터, 즉 띠엄띠엄한 값으로 바꾸어 근사하는 과정을 뜻한다.

- 표1. 출처 : 위키백과( http://ko.wikipedia.org/wiki/%EC%96%91%EC%9E%90%ED%99%94 ) -

요렇게 친절히 설명해 줍니다. 먼 말인지는 잘 모르겠네요 ㅠ 두번째 정의가 좀 코덱의 Quantization 과 일치해 보입니다.

지난시간에 배운 내용중 DCT를 수행하면 DC쪽에 에너지가 집중되고, AC는 덜 집중된다고 하였습니다. 또한 화질의 차이는 DC성분의 변화에는 민갑하지만 AC 성분의 변화에는 덜 민감한 편이지요. 즉 AC성분은 좀 생략해도 화질의 차이는 별로 나지 않는다..라는 건데요. 바로 이 원리를 이용하는 것입니다.

- Fig3. DCT후의 데이터 변화 -

결국 8×8블럭의 64개의 픽셀들 중 DC가 아닌 AC영역(0.0을 제외한 영역)의 값을 좀 줄여 주자는 것입니다. 왜냐하면? AC는 좀 없어져도 사람들이 화질의 변화를 잘 못느낀다는 거죠!!(대신 데이터는 줄어드니 압축은 되는거죠)

하지만 이방법은 결국 화질의 손실을 가져오게 됩니다. 사람마다 화질을 보는 차이가 틀리기 때문에 제가 차이 안난다고 느껴도 어떤사람은 차이가 나게 보일 수 도 있는거죠.. 그래서 이러한 압축 방법을 손실 압축이라고 합니다. 그러니 AC값을 적당히 날려줘야지 확 날리면 화질의 차이가 확 나게 됩니다. 오늘 마지막에는 소스코드로 이 과정을 구현해서 직접 눈으로 확인도 해보도록 하겠습니다.

#3. Quantization 좀 더 자세히 들여다 보면..

그럼 어떠한 방법으로 Quantization을 하는지 보겠습니다. AC 성분을 화질의 저하는 별로 없으면서(잘 느끼지 못하면서) 데이터는 적당히 줄어드는(압축되는) 정도로 날려주어야 하는데.. 대체 그게 어떤 값인가는 참 애매합니다. 그래서 이미 많은 전문가들이 실험적으로 만들어 놓은 Quantization Matrix가 존재합니다. 여러번의 실험 끝에 이정도 값이면 화질의 저하도 별로 없으면서 적당히 압축되 된다는 것이지요.. FIg4를 보시면 휘도(Luminance)와 색(Chrominance)에 관한 행렬을 볼 수 있습니다. 사실 이 Matrix는 Jpeg에서 사용하는 테이블이구요.. H.264에서는 사용자가 Quantization 정도를 옵션으로 조정 할 수 잇게 구성 되어있습니다. 이 수치를 QP(Quantization parameter)라고 합니다. H.264를 인코딩 하실때 QP를 조정해 보시면 화질의 차이를 느낄 수 있습니다.

- Fig4. Quantization Matrix (8×8 Block) in jpeg-

여기서 포인트! 바로 위에서 DCT후의 블럭이 DC 성분쪽에 큰 값이 몰린다고 하였습니다. AC쪽에는 비교적 작은 값들이 들어 있지요. 그래서 AC 성분을 적당히 없애 줘서 압축을 한다고 하였습니다. 이제 Fig4의 값을 천천히 보는게 되면. DC에는 작은 값이 DC와 멀어 질 수록 점점 큰값이 쓰여있죠?

DCT를 수행한 블럭을 Quantization Matrix로 나누어 주는 것입니다. 그럼 어떻게 될까요? 큰 값으로 나눈 곳은 데이터가 없어질 것이고, 작은 값으로 나눈곳은 적당히 남아 있을 것이라는 것이죠!

이해 가시나요? AC를 줄이기 위해 Quantization Matrix를 실험적으로 만들었고, 그 Matrix로 나누면 AC의 값이 적당히 없어 진다는 것입니다. 아래의 Fig5에서 보면 대부분의 AC 성분은 0으로 변한 것을 볼 수 있습니다. 그렇습니다. AC성분이 날아간 것이지요.

- Fig5. DCT->Quantization 수행 후 Block data의 변화(8×8) -

#4. Zig-zag scanning

다음 인코딩 과정은 Zig-zag scanning입니다. Quantization한 후 MB(메크로블럭)의 값을 살펴 보면 AC쪽은 거의 0으로 변한 것을 볼 수 있다고 하였습니다. Zig-zag scanning은 별게 아니지만 멋진 아이디어 입니다. 여러분이라면 저 데이터를 어떤식으로 구성 하시겠습니까? 2차원 배열이라 생각하고, (0,0), (0,1), (0,3)… 인덱스 순서대로 데이터를 구성 하실건가요?

- Fig6. H.265 8×8 Zig-zag scanning -

가만히 관찰해보다보니 왼쪽위에는(DC 근처) 데이터가 있지만 다른곳은 거의 데이터가 0이라는것을 알 수 있습니다.(물론 간간히 보이기는 합니다) Fig6에서 같은 순서로 데이터를 저장한다면 어던 차이가 있을까요? 처음에는 값이 들어가지만 스캐닝 할수록 0만 연속적으로 나오게 되겠지요?

이쯤대면 센스 만점인 여러분은 왜 지그제그를 하는지 눈치 채셨을 것입니다. 예를들어 스캐닝을 해보니 180,3,2,4,73,0,3,1,6,0,0,0,0,0,0,0……0…0 이런 데이터가 생겼다고 한다면 처음 데이터만 써주고 그다음 수많은 0에 대해서는 0이 몇개인지만 써주므로써 데이터를 줄 일 수 있게 되는 것입니다.(지그제그는 그냥 값을 얻어오는 순서만들 나타내고 0이 몇개인지 카운터하여 줄이는 것은 다음 시간에 알아볼 Run Length라고 합니다.) 코덱에서는 이과정을 지나서 Entropy coding을 통해 다시한번 데이터를 줄이게 됩니다. 너무 길어지니 그 과정은 다음 강좌로 넘기도록 할게요.

#5. 마치면서

오늘은 코덱의 전체적인 인코딩 프로세스를 한번 훝어 보았구요. Quantization과 Zig-zag scanning에 대해 알아 보았습니다. 여기서 개념을 이해하는 것도 중요하지만, ME->DCT->Quantization->Zig-zag로 이루어 지는 과정을 한데 묶어서 이해하는 센스가 필요합니다.

ME를 수행 할때 정확한 MV(motion vector)를 찾아서 잔류 데이터가 거의 없는 Residual image를 얻어 낸다면, 당연히 DCT의 값도 크지 않게 나타날 것입니다. Quantization을 하게되면 거의 모든 값들은 0이 나오게 되겠지요. 그렇다는것은 0의 갯수를 카운터하는 방식(Run length)으로 표현하면 ‘DC의 값은 100이고 나머지 AC의 값인 0이 63개다’ 라고 표현 할 수 있다는 것이고 그만큼 바이너리 코드도 더 줄일 수 있다는 것이죠.

다음 시간에는 Entropy coding에 관해 설명하고, H.264에서 사용하는 개념들을 좀 짚어 보려고 합니다.

Microsoft Office Object를 이용한 PPT Viewer 만들기

맨날맑음 — Mon, 18 Jan 2010 02:06:06 +0900

안녕하세요? 맨날맑음 입니다.

이번에 만들어 볼 내용은 Microsoft Office Object를 이용한 간단한 PPT Viewer를 만드는 것입니다.

제가 2010년 HOONS.NET WPF 시삽으로 활동하게 되면서 어플리케이션은 WPF로 만들어 보겠습니다.

이 방법의 대략적인 과정을 살펴보면 다음과 같습니다.

1. Microsoft Office 12.0 Object Library를 참조한다.(Office 2007 버전에 경우 12.0)

2. ApplicationClass 객체를 이용하여 PPT 파일을 읽어온다.

3. Presentation 객체를 이용하여 슬라이드를 그림 파일로 하드에 저장한다.

4. 그림 파일을 로딩하여 마치 PTT Viewer인척(?) 한다.

전체적인 과정에서 보듯이 PPT파일을 읽어드려 하드에 그림파일로 저장한 것을 띄우는 방식이기 때문에 PPT에 들어있는 애니메이션 효과를 기대하기는 어렵습니다. 그래서 PTT Viewer인척(?)이라고 한 것 이구요.

#1. 관련 어셈블리 참조하기

우선 PPT Viewer를 구현하기 위해 두가지 객체가 필요합니다.

COM으로 이루어진 Microsoft Office 12.0 Object Library에 포함된 ApplicationClass 객체가 필요하구요. .NET 어셈블리중 Microsoft.Office.Interop.PowerPoint 12.0에 포함된 Presentation 객체가 필요합니다. 두가지 어셈블리를 참조하고 using도 추가해 줍니다.

using Microsoft.Office.Interop.PowerPoint;
using Microsoft.Office.Core;

- Fig1. 관련 어셈블리 참조 -

#2. 소스 구현

string Path;

Presentation PPT;

private void ReadPPTfile()

{

ApplicationClass app = new ApplicationClass();

PPT = app.Presentations.Open(Path, MsoTriState.msoTrue, MsoTriState.msoFalse, MsoTriState.msoFalse);

app.Quit();

}

private void MakePPTIamge()

{

string myPicturesPath = Environment.GetFolderPath(Environment.SpecialFolder.MyPictures);

for (int i = 0; i < PPT.Slides.Count; ++i)

{

PPT.Slides[i + 1].Export(string.Format("{0}\\temp{1}.jpg", myPicturesPath, i), "JPG",

(int)PPT.Slides[i + 1].Master.Width, (int)PPT.Slides[i + 1].Master.Height);

}

소스는 간단합니다. ReadPPTfile()에서 ApplicationClass 객체를 이용하여 ppt 파일을 Open하고 Presentation 객체를 return 받아 놓습니다. MakePPTIamge()에서 PPT.Slides.Export() 메서드를 호출하여 적당한 경로에 jpg 파일(다른 포맷도 지정 가능)로 저장하는 방법입니다! PPT.Slides.Count를 이용하여 읽어들인 슬라이드 갯수도 알 수 있습니다.

이제 동작에 따라 적당한 그림파일을 로딩하여 사용하면 초간단 PPT Viewer 완성입니다^^;

#3. 마치면서..

요방법의 단점을 좀 생각해 보면. 앞서 이야기한 애니메이션 효과는 사용 할 수 없다는 것과.. 많은양의 슬라이드를 로딩할 경우 오래 걸린다는 단점이 있습니다. 하지만 간단한 방법으로 구현 할 수 있고, 웹으로 뷰어를 제공 할 경우 더 어울리는 방법 일 것 같네요.

TinyPPT.exe

윈폼 파일 드레그하기.

맨날맑음 — Tue, 29 Dec 2009 23:19:49 +0900

안녕하세요? 맨날맑음 입니다.

정말 오랜만에 블로깅이네요. 3개월 정도 지난거 같네요. 바쁘다는 핑계로 블로깅도 미루고, 덕분에 블로깅 할 주제는 많이 생겨서 좋은건가요?

- Fig1. 곰플레이어에서 파일 Drag&Drop을 이용하여 실행시키는 장면 -

많은 어플리케이션이 위와같이 파일을 Drag&Drop만으로 열 수 있는 기능을 제공해 주고있습니다. 실제 파일을 다루는 어플리케이션을 개발하다보면 빠지면 서운한 기능일텐데요. .Net WinForm에서는 아주 쉬운방법으로 위와 같은 기능을 구현 할 수 있습니다.

#1. Windows Forms 프로젝트 생성.

- Fig2. Windows Forms 프로젝트 생성 -

#2. ListBox 추가

- Fig3. Form에 ListBox를 추가한 모습 -

여기서 ListBox는 Form위로 드레그 되어 들어온 파일의 정보를 보기위한 간단한 용도입니다.

#3. 드레그 드롭 관련 지식

public virtual bool AllowDrop { get; set; }
- 사용자가 컨트롤로 끌어 온 데이터가 컨트롤에서 허용되는지 여부를 나타내는 값을 가져오거나 설정.
- 반환 값: 끌어서 놓기 작업을 수행할 수 있으면 true이고, 그렇지 않으면 false, 기본값은 false

Controls의 AllowDrop 프로퍼티를 이용하면 Control에 Drag로 데이터를 끌어올 수 있는지 없는지 설정 할 수 있습니다. 이말은 즉 Controls를 상속받는 많은 WinForm과 Control들이 AllowDrop 프로퍼티를 사용 할 수 있다는 말입니다.

Drag&Drop 관련 이벤트
Controls.DragDrop : 드레그 작업이 완료되면 발생.
Controls.DragOver : 드레그한 개체가 컨트롤 위로 올라오면 발생.
Controls.DragEnter : 드레그한 개체가 컨트롤 범위 안으로 들어오면 발생.
Controls.DragLeave : 드레그한 개체가 컨트롤 범위 밖으로 나가면 발생.

4개의 이벤트가 있는데요. 우리가 사용 할 이벤트는 DragDrop과 DragOver 두개 입니다.

DragEventHandler의 DragEventArgs
X : 화면 좌표로 나타난 마우스 포인터의 x좌표.
Y : 화면 좌표로 나타난 마우스 포인터의 Y좌표.
Data.GetDataPresent : 인스턴스에 저장된 데이터가 지정된 형식과 관련 있는지 확인.
Effect : 드레그한 개체에대한 마우스 커서를 결정.

이벤트관련 클래스의 사용법도 알아보았으니 이제 구현을 해봅니다!

#4. 코드 구현

using System.Windows.Forms;

namespace DragSample

{

public partial class Form1 : Form

{

public Form1()

{

InitializeComponent();

//드레그를 허용

this.AllowDrop = true;

//Drag관련이벤트 연결------------------------------------------------

this.DragOver += new DragEventHandler(Form1_DragOver);

this.DragDrop+=new DragEventHandler(Form1_DragDrop);

}

//드레그한 개체가 폼위로 올라올때--------------------------------------

void Form1_DragOver(object sender, DragEventArgs e)

{

//드레그하는 개체가 파일이면

if (e.Data.GetDataPresent(DataFormats.FileDrop))

{

//마우스 커서를 Copy모양으로 바꿔준다.

e.Effect = DragDropEffects.Copy;

}

else

{

//아닐경우 커서의 모양을 θ 요런 모양으로 바꾼다.

e.Effect = DragDropEffects.None;

}

//드레그한 개체를 폼위에 올려 놓았을때----------------------------------

void Form1_DragDrop(object sender, DragEventArgs e)

{

//객체들의 이름을 string 배열에 얻어온다.

string[] files = e.Data.GetData(DataFormats.FileDrop) as string[];

if(files!=null)

{

foreach (string file in files)

{

//끌어온 파일명을 리스트박스에 달아준다.

listBox1.Items.Add(file);

}

간단한 소스라 따로 설명은 없어도 될 것 같습니다. 유의 할 점은 e.Data.GetData(DataFormats.FileDrop)에서 반환값이 string 배열이라는 점입니다.

DragSample.exe

DragSample.zip

이와같은 방법을 응용하면 ListBox간 아이템 이동이라던지, 대부분의 Drag&Drop 기능은 구현 가능 할 것 같습니다.

화살표 그리기(.NET Pen Class)

맨날맑음 — Thu, 22 Oct 2009 19:12:00 +0900

안녕하세요? 맨날맑음입니다.

화살표를 그려야 할 일이 생겨서 어떻게 그릴까 생각하다가, Line을 여러개 그려서 화살표를 만들려고 했습니다.
선의 각도에 따라 화살표 머리 부분의 각도가 변하기 때문에 수학을 못하는 저로써는 화살표 그리는 것 조차도 힘든일이 었습니다.

하지만! .NET의 Pen 클래스는 Line의 끝점들의 모양을 변경시켜 주는 기능을 제공합니다.
Pen 클래스의 좀더 자세한 설명은 아래의 MSDN 도움말을 참조 하시면 됩니다.
http://msdn.microsoft.com/ko-kr/library/system.drawing.pen(en-us,VS.85).aspx

MSDN에서 Pen 클래스의 속성을 보면 StartCap 과 EndCap이 있습니다. 이것이 선의 끝모양을 지정하는 속성입니다. 그럼 선의 시작과 끝 모양을 화살표로 바꾸어 보겠습니다.

Pen pen = new Pen(Color.Blue, 6);
pen.StartCap = LineCap.ArrowAnchor;
pen.EndCap = LineCap.ArrowAnchor;

위의 소스에서 처럼 Pen 객체를 생성하고, 해당하는Cap 속성을 바꿔주는 아주 간단한 방법으로 끝모양을 바꿔줄 수 있습니다. LineCap 사용을 위해서는 using System.Drawing.Drawing2D;을 해주셔야 합니다.
화살표 모양 이외에도 여러 모양을 지정 할 수 있습니다. LineCap 을 살펴 보면 열거형으로 되어 있습니다. 각각의 멤버의 의미를 보면 다음과 같습니다.

Flat : 일직선 형태의 끝 모양을 지정합니다.
Square : 정사각형 형태의 선 끝 모양을 지정합니다.
Round : 둥근 선 끝 모양을 지정합니다.
Triangle : 삼각형 선 끝 모양을 지정합니다.
NoAnchor : 앵커를 지정하지 않습니다.
SquareAnchor : 정사각형 앵커 선 끝 모양을 지정합니다.
RoundAnchor : 둥근 앵커 끝 모양을 지정합니다.
DiamondAnchor : 다이아몬드 앵커 끝 모양을 지정합니다.
ArrowAnchor : 화살표 모양의 앵커를 지정합니다.
Custom : 사용자 지정 선 끝 모양을 지정합니다.
AnchorMask : 선 끝 모양이 앵커 모양인지 여부를 검사하는 데 사용되는 마스크를 지정합니다.

아래와 같이 간단하게 Windows Form 프로젝트를 생성해서 Paint 이벤트 핸들러에서 화살표를 그려 보겠습니다.

using System.Drawing;
using System.Windows.Forms;
using System.Drawing.Drawing2D;
namespace WindowsFormsApplication1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            this.Paint += new PaintEventHandler(Form1_Paint);
        }

        void Form1_Paint(object sender, PaintEventArgs e)
        {
            Pen pen = new Pen(Color.Blue, 6); //Pen 객체 생성
            pen.StartCap = LineCap.ArrowAnchor; //Line의 시작점 모양 변경
            pen.EndCap = LineCap.ArrowAnchor; //Line의 끝점 모양 변경
            e.Graphics.DrawLine(pen, 20, 50, 300,50); //Line 그리기
        }
    }
}

이와같이 복잡한 화살표 알고리즘 없이 Pen 클래스의 속성 변경 만으로도 간단하게 화살표를 그릴 수 있습니다.
참 쉽죠잉~

2PM 재범 탈퇴(네티즌탓? 언론탓!)

맨날맑음 — Wed, 9 Sep 2009 21:57:48 +0900

안녕하세요? 맨날맑음 입니다.

나름 개발자 기술 블로그에 이런 글은 어울리지 않을 수도 있지만, 이번 사건을 보면서 느낀점을 써볼까 합니다.

(그림1. 출처 : http://blog.naver.com/gksksla2761?Redirect=Log&logNo=100075692226 )

요즘 연예계 가장 큰 이슈 중 하나는 잘나가는 2PM이라는 아이돌 그룹의 멤버인 재범의 한국 비하와 그로인한 탈퇴 / 미국행입니다. 저는 26살 먹은 남자로 2PM의 팬도 아니고, 2PM이란 그룹은 알고 있지만 박재범이라는 이름까지는 알지 못하는 그런 평범한 학생입니다. 물론 소녀시대나, 원더걸스 같은 여성 그룹의 재롱이 더 좋아질 나이라고 생각합니다.

언제나처럼 네이버 메인기사를 훝어보다가 '재범 한국 비하'라는 언론들의 기사를 보았습니다.

2PM 재범 한국 비하 발언 파문 "나는 한국이 싫다"
“2PM 재범, 양키 고 홈”… 가요 팬들 ‘한국 비하’에 뿔났다
2PM 재범, "한국 역겹다" 비하발언 공식 사과

제목만 보아도 굉장히 '강한 표현'을 사용해서 연예계 기사는 관심 없는 저도 클릭해 보게 만들었습니다.

이 기사들을 보면서 저는 박재범이 나쁘구나 생각했습니다.
대부분이 박재범은 한국에 대해 모욕적인 발언을 했고, 한국을 비하했다는 내용의 보도 였습니다. 그 내용들이 사실이기도 했습니다.(물론 해석의 차이에서 생기는 것 일수도..)

박재범군이 연습생 시절(어린나이의)에 자신의 미래에 대한 불안과, 문화의 차이에 대한 불안이 대부분 이었습니다. 이 시점에 지인으로 부터 온 '재범이 불쌍해..'라는 문자에 저는 '그놈은 한국을 무시했어'라고 응답할 만큼 반감을 가지게 되었습니다.

한편으론 4년전.. 미래가 불확실 할때 저지른 행동이 이런 파장을 일으킨대 대한 동정심도 있었습니다. 일반인이라면 누구나 할 수 있는 '대한민국에 대한 비평'을 우리가 과민 반응한다는 생각도 했습니다.

그러면서 네티즌들의 일반적인 반응이었던(2PM 팬들을 제외) '2PM에서 탈퇴해라.', '양키는 미국으로 돌아가라' 라는 반응은 좀 너무하다고 생각했습니다.

재범은 당시 어린나이였고, 누구나 이런 생각을 할 수 있다고 생각했습니다.
현재.. 재범이 2PM을 탈퇴하고, 미국으로 돌아간 시점에 올라온 기사를 보면 어처구니가 없습니다.
대부분의 기사는 네티즌의 마녀사냥으로 재범이 2PM을 탈퇴하고 미국으로 갔다는 기사였습니다. 재범을 동정하는 기사지요..
'2PM' 탈퇴 박재범, 시애틀 공항 도착해 어머니 안고 '눈물'
스물 둘 재범의 선택, 남은건 눈물과 ‘돌아오라’는 팬들의 메아리 뿐
2PM 재범, 어머니 품에 안겨 ‘오열’ 팬들은 구명운동 나서

이 기사를 보면서 저는 재범이 불쌍하다고 느꼈습니다. 제가 문제라고 생각한것은 이것입니다. 대부분의 네티즌은 기사를 믿을 수 밖에 없습니다.

지금 현실을 보면 재범이 네티즌의 마녀사냥의 희생양이고, 네티즌이 재범을 2PM에서 탈퇴 시키고, 미국으로 가게 만들었다는 뉘양스로 쓰여 있는게 사실입니다.
제가 강조하고 싶은 부분은 언론이 사람들을 선동했다는 것입니다. 2PM에 별 관심이 없는 저 조차 이렇게 느끼게 되는데, 다른 사람들도 저와 같은 생각일 것이라는 것입니다.

나쁜놈이라고 보도하던 기사들이 재범이 미국으로 돌아 간 후 부터는 네티즌이 그렇게 만들었다고 선동하고 있습니다. 과연, 언론의 이런 자극적인 제목의 기사가 없었다면 이렇게 까지 생각하게 됬을까요?

물론 저만 이런 생각이 들 수 도 있습니다. 허나 저는 이번 사태는 앞다투어 자극적인 제목으로 가쉽거리를 만들어낸 언론의 힘도 무시 할 수 없다는 겁니다. 세상..참 무섭습니다. 어떤 기사에는 '파시즘'을 들먹이며, 군중심리에 대해 표현하고 있더군요.. 과연 이런 군중 심리를 일으킨 주범은 누구일지.. 생각하게 되는 사건입니다.

ps.. 글을 쓰던 도중 술자리가 생겨, 조금 횡설 수설하게 된 면이 있군요.. 제가 강조하고 싶은 것은 지금의 사건을 군중심리, 네티즌 때문이라 보도하는 언론이 자신들의 보도 때문이라는 생각은 하지 않는 데 있습니다. 초기 기사엔 재범이 나쁘다는 것만 강조해온 언론이 이제는 네티즌의 속칭 '마녀사냥 ' 때문에 이런일이 일어났다고 보도한다는 거지요..

좀 더 생각해봐야 할 일인것 같습니다. 안타깝네요. 한국을 욕했다고 배척하기 보단.. 그걸 고칠 수 있도록 포용하는 방법도 좋은 생각이라는 생각이 듭니다.

[H.264] Discrete Cosine Transform(DCT) 이산 코사인 변환

맨날맑음 — Mon, 24 Aug 2009 16:04:00 +0900

안녕하세요? 맨날맑음 입니다.

이전 포스팅에서 동영상을 압축하기 위한 프로세싱 과정중 ME(Motion Estimation)에 관해 알아 보았습니다. 이번에는 DCT(Discrete Cosine Transform)에 관해 알아보도록 하겠습니다.

#1. Discrete Cosine Transform 개요

Discrete Cosine Transform(이하 DCT)는 무엇일까요? 번역해 보자면 이산 코사인 변환이라고 합니다. 이전 시간에 배운 ME는 프레임간 유사성을 이용하여 영상을 압축 할 수 있는 기법이었는데요. DCT는 해당하는 프레임(Picture)만을 이용해서 영상을 압축 할 수 있도록 하는 기법이라 할 수 있습니다. 그렇기 때문에 사진을 압축하는 JPEG에서 쓰이는 방식입니다. 동영상 코덱에서는 H.261, H.263, H.264.. MPEG등 에서 이 방식을 사용하여 영상을 압축하게 됩니다.

대체 DCT란 놈이 어떤 것인지 좀더 자세히 알아보도록 하죠. 혹시 신호처리를 알고 계신 분은 좀더 쉬울 수 있겠습니다. 저는 신호처리를 모르는 관계로 처음 배울 때 잘 이해가 가지 않더군요.

- Fig1. DCT 변환 -

영상을 DCT 변환하면 Fig1에서 처럼 공간 영역(Spatial Domain)에서 주파수 영역(Frequency Domain)으로 변하게 됩니다. 그림을 잘 살펴보면 주파수가 낮은 쪽으로 데이터(신호)가 몰려 있는 것을 볼 수 있습니다. 이와 같이 DCT를 하면 신호성분이 낮은 주파수에 몰리게 되는 ‘에너지 집중 현상’이 나타납니다.

#2. DCT를 하는 이유

- Fig2. DCT Coefiicients -

그럼 코덱은 압축을 위해서 왜 DCT를 수행 하는 것일까요? DCT는 공강영역을 주파수 영역으로 변환한다고 하였습니다. 영상을 관찰하다 보면 인접한 픽셀간에는 비슷한 색상인 경우가 많이 있습니다. 즉 8×8 블럭을 DCT하였을 경우 64개의 픽셀중에 같은 색상이 낮은 주파수(DC)로 몰리게 됩니다. 그리고 색상의 변화가 있는 경우 높은 주파수(AC)으로 위치하게 됩니다.

DCT를 수행하게 되면 대부분의 이미지는 Fig1에서 와 같은 결과가 나오게 됩니다. 빨간색으로 우뚝 솟은 부분(DC)이 제일 큰 신호 값이며, 파란색은 울퉁불퉁 하긴 하지만 높은 주파수 영역으로 갈 수록 평평한 것을 볼 수 있습니다. 즉 위에서 설명 했듯이 8×8 블럭의 색상 평균값이 DC성분이 되며, 나머지 평균값과 틀린 부분이 AC 성분이 되는 것입니다. 눈으로 보아도 DC에 값이 많이 몰린 것을 알 수 있죠? 이 의미가 바로 인접한 픽셀간은 거의 비슷한 색상으로 이루어 져 있기 때문에 DC의 값이 크다라고 생각하시면 됩니다.

그런데 사람의 눈 또한 낮은 주파수 성분(DC)에는 민감하게 반응 하지만, 높은 주파수 성분(AC)에는 민감하지 않기 때문에 높은 주파수 영역(그림에서 파란색)을 좀 생략 한다고 해도 화질의 차이를 잘 느끼지 못하게 됩니다. 이것이 압축이 되는 원리 입니다.

그림1 에서 보는 것과 같이 DCT변환 전에는 8×8 블럭 이므로 64개의 데이터가 필요 하지만 DCT를 하여 높은 주파수 성분(AC)을 좀 버려서(화질의 차이는 크지 않으므로) DC에서 가까운 10개의 데이터만 가지게 된다면, 그만큼 압축이 되는 것 입니다. 사실 DCT는 이렇게 주파수 성분으로 바꾸는 작업만을 이야기 하며 다음시간에 이야기할 Quantization과 Entropy coding과정을 거쳐야 실질적인 압축이 일어납니다.

#3. Discrete Cosine Transform(DCT)

위의 개념이 이해가 가시나요? 어떻게 영상을 주파수 영역으로 변환하는지에 관해 알아 보겠습니다.

DCT도 ME와 마찬가지로 블럭 단위로 수행하게 됩니다. 그 이유는 블럭 사이즈가 커지면 시간이 엄청 걸리기도 하지만, 전체 프레임을 한번에 처리하기 위해서는 어마어마한 메모리도 필요 하게 됩니다. 그래서 일반적으로 JPEG, H.261, H.263, MPEG에서는 8×8 블럭 단위로 DCT를 수행하게 됩니다. (H.264는 기본 4×4에 변형이 가능합니다.)

그럼 어떻게 공간 영역을 주파수 영역으로 바꿀 수 있을까요?

아래는 2D-DCT를 수행하기 위한 수식입니다.

- Fig3. 2D-DCT -

V는 DCT를 수행하여 주파수 도메인으로 바뀐 , C는 DCT수행에 필요한 메트릭스(Fig4 참조), X는 원본 블럭, CT는 C 메트릭스의 가로 세로를 변환한 메트릭스 입니다.

- Fig4. N×N Cosine Transfrom Matrix C={c(k,n))} -

Fig4는 DCT 수행에 필요한 Matrix를 어떻게 생성하는지를 나타냅니다. k는 행을 n은 열을 나타내고 N은 Matrix의 크기를 나타냅니다. 우리는 8×8 DCT를 수행할 것이므로 N은 8이 됩니다. 이렇게 생성된 Matrix를 이용하여 V=CXCT 라는 수식으로 DCT가 된 데이터를 가져올 수 있습니다. 아래 Fig5는 DCT후의 데이터 변화를 나타냅니다. 숫자로 확인하여도 DC성분에 값이 집중된 것을 알 수 있습니다.

- Fig5. DCT후의 데이터 변화 -

아래에 있는 Fig6에서도 마찬가지로 높은 값들은 DC쪽에 집중되어 분포하게 되는 것을 알 수 있습니다.

-Fig6. Matlab으로 확인해본 DCT후의 데이터 분포-

#4. Inverse DCT는 어떻게?

DCT를 하여 주파수 도메인으로 변환 할 수 있다는 것을 알았습니다. 그럼 다시 공간 도메인으로 변경 하려면 어떻게 해야 할까요?

- Fig7. 2D-Inverse DCT -

위와 같은 공식으로 원래 블럭을 복원 해 낼 수 있습니다. 물론 복원한 블럭은 오리지날과 100% 동일하게 됩니다.

#5. 끝마치며

이번 시간에는 코덱의 인코딩 과정중 하나인 DCT의 개념과 DCT를 왜 해야하는지 알아 보았으며, DCT된 블럭을 원래대로 되돌리는 것 까지 알아 보았습니다. 다음 시간에는 Quantization에 관해 알아보고 전체적인 인코딩 프로세싱도 살짝 짚어 보려구 합니다.

제가 전체 그림을 제시하고 세부 강좌를 만들었어야 하는데, 세부적인 설명부터 하다보니 좀 오해가 생기는 부분이 있는 것 같아서요. 그럼 좋은 주말 저녁 되세요^^

오늘부터 금연입니다.

맨날맑음 — Sun, 23 Aug 2009 13:48:02 +0900

안녕하세요? 맨날맑음 입니다.

예전부터 하려고 했지만 약해빠진 의지로 인해 못하고 있던 금연을 하려고 합니다. 휴가도 다녀왔고 가장 스트레스가 없는 방학기간이며(일주일 남았지만) 요즘 들어 '급' 안좋아진 몸을 보며 이번엔 꼭 금연을 해야 겠습니다.

이런 쓸때없는 글을 올리는 이유는 금연 수칙 첫번째인 '나의 금연 사실을 모두에게 알려라!'를 실천하기 위한 것입니다. 오늘 영결식을 하는 故 김대중 대통령님 또한 하루 3갑을 피는 '골초' 였지만 금연을 하신것 처럼 저도 이번에야 말로 꼭 금연을 하고야 말아야 겠습니다.(금단현상으로 이상한 말을 하는군요'')

벌써 9년째 거의 매일 한갑씩 피웠는데.. 잘 할 수 있겠죠? ㅠ

의지가 약해질 때 마다 보려고 금연을 하는 이유도 좀 써봅니다.

#1. 담배를 피울 때 마다드는 자괴감을 없앨 수 있다.
#2. 요즘 들어 부쩍 나빠진 몸 상태가 걱정된다.
#3. 하루 2,500원이면, 10일이면 25,000원 100일이면 250,000원 Olleh!!
#4. 아침마다 상쾌하게 일어나서 하루를 시작 할 수 있다.
#5. 어무니께 냄새난다고 구박 받는 일도 이젠 안녕~

이번엔 꼭 성공 할 수 있겠죠!! 아자아자 화이팅! 난 할 수 있다.
따스한 200원짜리 밀크커피와 담배는 이제 안녕~~(더불어 하루 4-5잔 먹던 커피도 끊을 수 있겠군요..)
이것은 1석 2조, 꿩먹고 알먹고, 도랑치고 가재잡고!!

나는 비흡연자..원래부터 담배 따윈 몰랐던 비흡연자.. (자기 최면중ㅠㅠ)

[H.264] Block-based Motion Estimation(ME)

맨날맑음 — Fri, 14 Aug 2009 13:38:13 +0900

안녕하세요? 맨날맑음 입니다.

가장 덥다는 말복이 바로 어제 였습니다. 다들 ‘삼계탕’은 맛있게 드셨는지 모르겠네요; 저는 이마트의 닭이 매진되어 삼계탕은 못 먹고 말았네요 ㅠ_ㅠ 그 큰 마트에서 매진이라니..말복 때 죽음을 맞이한 수많은 닭들에게 감사할 때 입니다;

이번 포스팅에서는 동영상 압축의 핵심이라 할 수 있는 Block-based Motion Estimation(이하 ME)에 관해 알아 보려고 합니다.

본 내용으로 들어가기 전에 ME에 관해 간단히 소개하자면, 지난 시간에 프레임과 그 인접한 프레임은 거의 비슷한 형태로 이루어 져 있다고 하였습니다. 만약 프레임1과 프레임2가 있을 때 프레임2는 1과 거의 비슷하기 때문에 굳이 모든 데이터를 가지고 있을 필요 없이, 1의 어느 부분과 비슷하다..라고 표시만 해주는 방법으로 데이터의 양을 줄이게 됩니다. 이렇게 하기 위해서 ME를 하여, 프레임1(Reference Frame) 에서 어느 부분과 가장 일치하는지 찾아주는 과정이라고 할 수 있습니다. 아래에서 자세히 알아보도록 하죠.

#1. Block-based?

위에서 Block-based Motion Estimation라고 했습니다. 굳이 번역하자면 블럭 기반의 움직임 추정(?)이라고 하면 될 것 같습니다. 그럼 블럭 기반이라는 말부터 살펴 보면 ME를 할때 프레임 전체를 한번에 하는 것이 아니라 하나의 프레임을 잘게 잘라(8×8, 16×16 or 32×32) 사용하게 됩니다. 기본적으로는 16×16의 매크로 블럭(Macro-Block)을 사용하게 됩니다.

-그림1. 16×16 Macro Block으로 나눈 모습-

#2. Motion Estimation

-그림2. Motion Estimation 개념도-

그림 2가 이해 가시나요? Frame(t)(현재 프레임)에서 3번째 매크로 블럭을 처리하고 있다고 가정 합니다. Frame(t-1)(이전 프레임)에서 매크로 블럭과 가장 비슷한 곳을 찾는 모습이죠. 저 빨간색 사각형은 Frame(t-1)에서 비슷한 곳을 찾을 Search Range(검색 범위) 입니다. 눈으로 보아도 분홍색 화살표가 가르키고 있는곳이 현재 매크로 블럭과 많이 일치하는 것을 알 수 있습니다. Search Range는 임의로 정할 수 있지만 일반적으로 Block Size의 ±7을 사용하게 됩니다.

그럼 그림처럼 현재 매크로 블럭이 이전 프레임과 가장 일치하는 최고의 매칭 포인트를 어떻게 찾게 되는지 매우 궁금 해 집니다. 비밀은 바로 SAD 방정식에 있습니다. SAD 방정식을 사용하여 최고의 매칭 포인트를 찾아 내는 것이지요.

-그림3 SAD equation-

수식을 보니 갑자기 머리가 아파옵니다. 저 같이 수식 알러지가 있으신 분들을 위해 친절하게 그림으로 설명해 드리죠.갑자기 제가 친절한 금자씨(?)라도 된 것 같습니다;

-그림4. Motion Estimation 과정(1)-

그림 4를 보면서 설명 하겠습니다. 이 그림은 이전 프레임(frame t-1)을 나타냅니다. 사각형 하나는 하나의 픽셀입니다. 빨간색 사각형으로 Search Range(검색 영역)가 있습니다. Cerrent block이 바로 현재 프레임의 매크로 블럭입니다. (원래 16x16으로 해야 하지만 그림 그리는 것도 만만치 않습니다)

-그림5. Motion Estimation 과정(2)-

그림 5에서 보는 것 처럼 Search Range를 매크로 블럭으로 탐색 하면서 Frame(t-1) - Cerrent block 를 계산하여 그 ‘절대값’을 Origin에 저장하게 됩니다.

-그림6. Motion Estimation 과정(3)-

이렇게 계산된 값들 중 그림 6에서 처럼 가장 작은 값을 찾는 것이죠. 숫자 22가 들어있는 좌표(6.5)가 최소값을 갖는 바로 Current Block과 가장 일치하는 이전 프레임의 좌표인 것입니다. 이 지점을 Motion Vector라고 합니다. 즉 이전 프레임에서 현재 블럭과 가장 일치하는 지점을 말합니다.

-그림7. Motion Vector-

이렇게 Search Range의 모든 좌표를 전부 검색하는 방법을 Full Search라고 합니다. 이러한 ME의 과정은 코덱이 영상을 압축하는 과정에서 많은 비트 수를 감소 시켜 주게 됩니다. 그림7의 단순한 프레임과의 차이와 ME를 사용한 차이를 보시면 확연하게 그 차이를 알 수 있습니다.(흰색이 데이터가 있는 부분입니다) ME를 했을 경우는 잔여 데이터가 거의 없는 것을 볼 수 있습니다.

-그림8. 단순한 프레임간의 차와 ME를 수행 했을 때의 차이-

그런데 ME는 전체 인코딩 과정중에 가장 많은 부하(?)를 일으킵니다. ME를 통해 데이터의 양은 많이 감소하게 되지만 Search를 하는 계산 과정이 있기 때문에 속도는 많이 떨어지게 되는 것이죠. 실제 H.264에서는 Full Search외에 여러 가지 Search 방법(예. 다이아몬드 서치)을 통해 속도 향상을 할 수 있도록 하고 있습니다.(이런 방법들은 차차 소개하도록 하겠습니다)

글이 많이 길어지는군요.. ME를 간단하게 요약 해 보자면.

현재 프레임(t)의 처리 할 매크로 블락을 만든다.
이전 프레임(t-1)에 Search Range를 설정한다.
Search Range를 SAD 방정식으로 Search 하여 그 결과 값을 저장한다.
결과값 중에 가장 작은 값(Motion Vector)을 찾는다.
Moton Vector의 매크로 블럭과 현재 매크로 블럭의 차이의 절대값을 결과(Residual) 데이터에 저장한다.

#3. 디코더(Decoder)의 데이터 복구

지금까지 인코더(Encoder) 측에서 ME를 통해 데이터를 줄이는 방법을 상세하게 설명 했습니다. 그렇다면 디코더에서는 어떻게 Residual 데이터를 가지고 원본 데이터를 복원해 나갈까요?

-그림9. 디코더는 어떻게 원본 이미지를 복원 할 수 있을까?-

정답은 ME의 과정을 반대로 수행 하면 될 것입니다. 디코더 또한 현재 프레임을 되 살릴 때 매크로 블럭 단위로 복원하게 됩니다. 그렇다면 디코더가 매크로 블럭을 복원하기 위해 가지고 있는 데이터는 무엇이 있을까요? 디코더는 바로 이전에 처리한 이전 프레임의 원본 이미지(사실 조금의 손실이 있는..)와 현재 프레임의 Residual 데이터를 가지고 있을 것 입니다. 이 두 가지를 가지고 현재 복원 할 매크로 블럭의 Residual 데이터와 이 Residual 데이터가 이전 프레임의 어디에 위치하였는지(Motion Vector)정보를 이용하여 둘을 합하여 현재 블럭을 복원 하는 것입니다. 그림 10과 같이 이러한 방법을 반복하여, 프레임 전체를 복원 하게 됩니다.

-그림10. 디코더의 이미지 복원 과정-

#4 . 실습

ME의 과정이 이해 가시나요? 설명 만으로는 100% 자신의 것으로 만들기 어렵습니다. C나 C++을 이용하여 프로그램을 만들어 보면 확실하게 이해가 될 것 입니다.

준비물.

각자 익숙한 개발 툴(저는 Visual Studio 2008)
실습에 필요한 YUV 파일 Download(http://trace.eas.asu.edu/yuv/)
- 저는 football_sif.yuv 사용
결과를 확인하기 위한 YUV 플레이어

RDisp.exe
- 이 플레이어를 열고 마우스 오른쪽 버튼을 누른 후 셋팅에서 화면의 해상도와 Color 타입을 조정하여 사용하면 됩니다.

준비가 되었으면, ME를 작성 해 보시면 됩니다. 그런데 가장자리를 Search 하기 위해서는 Search Range가 –인덱스가 나오는 경우가 발생 하므로, 저는 학습의 편의상 동영상의 가장자리 16은 ME의 대상에서 제외 하도록 하였습니다.

아래에 제가 만들어본 프로그램을 올려 놓지만, 꼭 자신이 만들어 보아야 자신의 것이 됩니다.

프로그램을 컴파일 한 후, Debug 폴더안의 실행파일을 실행 시켜 ME를 수행 할 수 있으며, 결과는 Root 폴더의 Me_sample에서 residual.foo 파일을 열어 보면 확인 가능 합니다

Motion Estimation .zip

#. 마치면서

이번 포스트에서는 동영상 압축의 핵심인 ME에 대한 자세한 소개와 디코더 쪽에서 데이터를 복원하는 방법을 알아 보았습니다. 다음번에는 DCT를 이용하여 데이터의 비트 수를 줄이는 방법에 대해 자세히 알아 보겠습니다.

장애인 웹 접근성 평가를 위한 Focus Explorer

맨날맑음 — Fri, 14 Aug 2009 00:10:08 +0900

안녕하세요? 맨날맑음 입니다.

이 프로젝트는 우리학교 교수님은 아니고, 모 대학교의 교수님의 의뢰로 제가 처음으로 돈을 받고 만든 프로젝트 입니다. 페이를 받았으므로, 자세한 기술은 소개하지 못하고, 프로그램을 간략히 소개하려고 합니다.

#1. 장애인 웹 접근성이란?

웹 접근성은 장애인(노인)이 웹사이트에서 제공하는 정보를 일반인과 동등하게 제공 받고 이해할 수 있도록 보장해 주는 것입니다. 이처럼 장애인이 웹을 ‘잘’ 사용하게 하는 데에는 여러 방법이 있을 수 있습니다. 예를 들어 손이 불편하여 마우스는 조작이 힘들고, 키보드만 사용 할 수 있는 사람이 있을 수 있겠고, 색깔을 잘 구분 하지 못 할 수도 있습니다. 또한 시각 장애인의 경우 소리로 현재 포커스 된 곳의 글자를 읽어 줘야 하는 경우도 있을 수 있습니다.

웹 접근성에 대한 더 자세한 정보는 웹 접근성 연구소에서 보실 수 있습니다.

#2. 프로젝트 소개

Focus Explorer은 이러한 웹 접근성 중 키보드만으로 웹을 조작하기 편리 하게 되어있는지를 평가 하기 쉽도록 도움을 주는 도구 입니다. 키보드는 사용하여 웹을 사용 하려면 [Tab]키를 사용 하여, 컨트롤을 이동 하여야 합니다. 프로그램에도 탭 인덱스(Tab Index)가 있듯이, 웹 사이트를 제공하는 쪽에서는 사용자가 예상할 수 있는 경로로 포커스가 이동해야 합니다. 예를 들면, 탭의 이동은 좌에서 우로, 위에서 아래쪽으로 이동해야 하는 것이죠.

이러한 탭 키에 의한 포커스의 이동을 평가하는 측에서 쉽게 인지 할 수 있도록 각 컨트롤 별로 사각형 표시와, 이동 경로를 화살표로 표시 해 주게 됩니다.

-그림1. 프로그램 구성도-

이 프로그램은 그림1 처럼 .Net Framework 2.0 기반의 메인 응용과, Win32 Api Hooking, OleAcc Event Hooking을 사용하여 구현된 DLL들로 구성 되어 있습니다.

#3. 프로그램 기능

설치와 제거
- 프로그램을 손쉽게 설치하고 제거 할 수 있도록 Install과 Uninstall을 지원합니다.

-그림2. Focus Explorer 설치 화면-

탭 키에 의한 포커스 이동을 사각형과 화살표로 표시 합니다.
- 포커스의 이동이 정방향일 경우 파란색(디폴트) 역방향일 경우 붉은색으로 표시합니다.

-그림3. 포커스 이동경로 표시 화면-
화살표의 색상 두께 및 여러 속성을 변경 할 수 있는 환경설정을 제공합니다.

-그림4. 환경설정-
이동 결과를 나중에 활용 할 수 있도록 그림파일과, 로그 화일(txt)로 제공합니다.

-그림5. 로그 확인 창-

#. 마치면서

앞으로 웹 뿐 아니라 어플리케이션 에서도 장애인의 접근성이 중요하게 평가 될 것 같습니다. 저는 웹 개발은 할 줄 모르지만 웹표준이라던지, 이러한 접근성의 고려도 해보아야 할 것 같네요.

[H.264] 동영상 압축의 기본 개념 - RGB, YCbCr, 서브샘플링

맨날맑음 — Wed, 12 Aug 2009 00:47:11 +0900

안녕하세요? 맨날맑음 입니다.

이전 포스팅에서는 동영상의 정의와, 동영상을 압축하는 기본적인 방법에 대해 간단히 살펴 보았습니다.
이번 시간에는 동영상을 압축하는 자세한 방법을 알아보기 전에 색공간 RGB, YUV(YCbCr) 그리고 YUV 서브샘플링에 대해 알아 보도록 하겠습니다.

본론으로 들어가기 전에 간단하게 색공간(Color Space)에 관해 알아 보도록 하겠습니다.
위키의 설명에 보면 색공간은 색표시계를 3차원으로 표현한 공간 개념이라고 나와있습니다. 즉 색을 표현하는 방법은 여러가지(RGB, CMYK, HSV, CIE, YCbCr 등)가 있는데 각각이 색을 표현하는(담는) 방법이라고 생각해도 될 것 같습니다.

#1. RGB 색공간

-그림1. RGB 채널의 원리 -

빛의 삼원색(빨강, 녹색, 파랑)을 이용하여 색을 표현하는 방법 입니다. 원색 신호라고도 불립니다. 일반적으로 TV나 모니터, HTML의 색상표현에 쓰이며, 컴퓨터의 모니터는 RGB방식을 사용하므로, 우리가 영상을 화면에 디스플레이 하기 위해서는 RGB로 변화 하여야만 합니다. 각 값들은 0~255까지의 값(8bit)을 가지고 있으며, 각 값들을 가산 혼합하여 색상을 표현합니다.

#2. YCbCr 색공간

-그림2. YCbCr 이미지의 구성요소-

YCbCr에서 Y는 휘도(빛의 양)이고, Cb와 Cr은 색차(크로마)를 나타냅니다. 색차 신호라고도 불립니다.이 방식은 RGB보다 색상의 분리 및 전달 효과는 약하지만, 적은 데이터로 보다 많은 색상을 나타낼 수 있는 장점을 가집니다.

YUV를 사용하는 대표적인 기계는 텔레비전입니다. 지금은 전부 칼라 텔레비전이지만, 예전 흑백의 경우 휘도(밝기)만을 가지고, 방송을 하다가, 컬러TV는 CbCr성분을 더해서 방송을 하기 때문에 지금에 와서도, 흑백 TV를 볼 수 있는 이유입니다. Y 성분만 뽑아 쓰면 되니까요.

이 방식에서 흑백을 표현하기 위해서는 Y 성분만 있으면 됩니다. 사람이 물체를 인식하는데 휘도(밝기)에 민감하지 그 외 Color 성분은 별로 민감하지 않습니다. 이것은 눈의 특성을 보면 알 수 있는데요, 사람의 눈에서 휘도를 구분하는 ‘간상세포’는 눈 전체영역에 분포하게 되고, 색을 구분하는 ‘원추세포’는 눈의 중심부에만 분포하여, 사람의 눈은 색상보다는 밝기에 민감하게 됩니다.

이렇게 때문에 사람이 민감하지 않은 모든 색상정보를 전부 포함해야 하는 RGB방식에 비해서, 적응양의 데이터(약 2/1)로도 비슷한 화질을 낼 수 있게 됩니다. (아래 설명 할 서브샘플링을 하였을때..)

영상장치가 영상을 만들 때, 빛을 인식하여(RGB)를 YUV로 바꿔 주게 되며, YUV를 압축하기 위해 서브샘플링을 하여 데이터를 줄이고, 저장장치에 저장하게 됩니다. 계속 알아야 할 개념이 늘어나고 있습니다. 다음은 서브샘플링에 관해 알아보겠습니다.

#3. YbCbCr 서브샘플링

동영상(Image)의 크기를 줄이기 위해 YbCbCr을 그대로 사용하기 보다는 압축하는 것이 효율 적입니다. 앞서 설명처럼 인간은 색차 보다는 밝기에 더 민감하기 때문에 샘플링에서도 이러한 기법을 사용함으로써 데이터를 압축 할 수 있습니다. 쉽게 말해 Y성분을 CbCr보다 많이 할당 함으로써 데이터를 줄이는데 감소한 데이터에 비해서 시각적인 차이는 거의 없게 됩니다.

이러한 샘플링 기법은 Y Cb Cr의 각각의 비율에 따라 조금씩 다르게 나누어 집니다. 인코딩에서 사용하는 샘플링 비율은 아래의 3개의 비율을 사용합니다.

YCbCr 4:4:4 format

- 그림3. YCbCr 4:4:4 format -
각 픽셀당 Y Cb Cr이 각각 4개가 들어가게 됩니다.

YCbCr 4:2:2 format
- 그림4. YCbCr 4:2:2 format -
각 픽셀당 2개의 블럭을 기준으로 Y 4개 CbCr 2개를 공유하여 사용합니다.
YCbCr 4:2:0 format (YCbCr 4:1:1)
- 그림5. YCbCr 4:2:0 format -
이 방식이 동영상 인코딩시 표준으로 쓰입니다. 그림5를 보면 YCbCr 4:1:1로 표현하는 것이 맞지만 표준화 기구에서 정한 이름이 4:2:0이라고 합니다. 저도 처음에 이름 때문에 좀 개념이 해깔렸습니다. 각 픽셀당 Y 4개 CbCr 1개를 공유하여 사용합니다.

내용 추가 '09.09.02
YCbCr (4:2:0) 와 YCbCr (4:1:1) 의 차이는 같이 사용하는 자료들도 있고 다르게 구분하는 자료들도 있는 것 같군요. 그래서 제 생각에는 YCbCr (4:2:0) 와 YCbCr (4:1:1)이 유사하다고 생각하면 댈 것 같습니다. 실제로 많은곳에서 같은 서브샘플링 개념으로 사용되고 있는 것도 사실이니까요.

#4. YCbCr 4:2:0 video format일 경우 데이터 구조는 어떠할까요?

데이터의 Type은 Byte이고 값은 0~255의 값이 들어갑니다. 그리고 중요한 것은 YCbCr의 경우 파일의 정보를 표시하는 ‘헤더’는 존재 하지 않습니다. 그래서 다음과 값은 데이터 구조를 가지게 됩니다.

-그림6. YCbCr 4:2:0의 데이터 구조-

빨간 점선은 프레임의 구분을 의미 합니다. 즉 한 프레임에 해당하는 Y정보가 먼저 나오고, 뒤를 이어 Cb Cr의 정보가 파일에 쓰여 있습니다. 예를 들어 해상도가 10X10이고, 10개 Frame으로 구성된 동영상의 경우 Y 100개, cb 25개, Cr25개의 정보가 쭉 이어 나오고 또 Y 100개, cb 25개, Cr25개의 정보가 쭉 이어 나오는 식으로 총 10개(10 프레임이므로)가 나열 됩니다.

생각보다 간단한 구조입니다. 이렇게 생각해 보면 파일에서 100Byte를 읽어오고 50Byte 건너뛰고 또 100Byte를 읽고 50Byte를 건너뛰는 방법으로 파일을 읽어 새롭게 저장하면, 원래 영상에서 흑백영상을 뽑아 올 수도 있습니다.

이번엔 RGB, YCbCr의 색공간에 대해 살펴 보았고, 서브샘플링에 관해서도 살펴 보았습니다. 다음 번에 어떠한 내용부터 올려야 할지 아직 잘 모르겠네요. 일단은 Motion Estimation 기법에 관해 올리려고 생각 중에 있습니다.

-------------------------------------------------------------------------------------------------------------------------------------------

# 마치면서..(좀더 알아볼 점)

YCbCr에서 Y는 어떤(? 정확히 모르겠어요) 용어와 해깔리지 않기 위해 Y’라고 표현해야 맞다고 합니다. 즉 Y’CbCr입니다. 대강 설명하자면 아날로그 인코딩과 디지털 인코딩 방식의 차이라고 알고 있습니다.
YUV와 YCbCr이 같은 거처럼 글을 썻지만, 사실 비슷하지만 조금 다른 개념인 것 같습니다. 저는 인코딩에 필요한 개념으로 용어에 따른 차이가 있을 수 있겠습니다.

참고 사이트 : http://www.fourcc.org/

[H.264] 동영상 압축의 기본 개념

맨날맑음 — Tue, 11 Aug 2009 16:18:46 +0900

안녕하세요? 맨날맑음 입니다.

#0. 들어가며..

방학을 이용하여, H.264 코덱을 공부하는 것을 목표로 해서 동영상의 인코딩, 디코딩에 관해 배워 나가고 있습니다.

이 내용들은 제가 세미나를 통해 배운 내용을 나름대로 정리하여 잊어 버리지 않게 하는 것이 용도이고, 저도 세미나 도중 이해 가지 않는 부분이 있으므로, 제가 올린 내용이 틀릴 수 있습니다. 내용에 틀린 점이 있을 시 지적해 주시면 즉시 내용을 수정 하도록 하겠습니다.

#1. 동영상이란?

동영상 압축의 기본을 알기 위해선 우선 동영상이 무엇인지 알아야 합니다.

-그림1. 동영상의 구조-

위의 그림에서 알 수 있듯이 동영상은 정지된 사진(프레임)이 시간을 축으로 여러 장 모여 있는 것입니다. 즉 주어진 시간 동안 연속으로 촬영된 사진이라 볼 수 있습니다.(사실 여기서 소리도 포함 되야 하지만, 소리는 별도의 인코딩 과정을 거친 후 먹싱 되므로 소리는 빼고 생각해 보겠습니다.)

그렇다면 동영상(RGB 비디오)의 데이터 크기는 어떻게 될까요? 프레임은 그림파일(Image)와 같습니다. 예를 들어 512×512의 동영상이 있다고 하면, 이 동영상의 한 프레임을 기준으로 가로 : 512, 세로 : 512개의 점(픽셀)으로 구성되어있으며, 1픽셀은 8bit(256 levels)입니다. 그 중에서 회색이 차지하는 비율만 생각해 보면, Width×Height×Bit(512×512×8)가 됩니다. 그리고 3개의 Color들로 구성 되어있으므로, RGB의 경우 Width×Height×Bit×Color(512×512×8×3)이 되어 6291456bit가 됩니다. 6291456(bit) == 6144(kbit) == 6(mbit) 입니다.

512×512라는 비교적 작은 사이즈의 동영상도 무 압축일 경우, 한 프레임에 6메가라는 큰 사이즈가 되는 것입니다. 동영상서비스를 제공 할 경우 적어도 초당 24프레임을 보장해야 한다고 하니 1초의 동영상에 144메가라는 큰 용량이 필요한 것입니다. 이것이 우리가 동영상 압축을 공부해야 하는 이유이기도 합니다.

네트워크 기술이 많이 발달하였지만, 이런한 무 압축 비디오까지 실시간으로 전송 하는 데는 역부족 입니다. 더군다나 요즘 많이 보급된 FullHD의 경우 1920×1080의 해상도를 지원해야 하기 때문에, 어마어마한 데이터 양이 될 수 밖에 없습니다. 또한 네트워크 대역폭이 이 정보를 전부 전송해 줄 수 있다고 하더라도, 동영상의 크기를 줄여, 그 남는 대역폭을 이용하여 여러 다른 서비스를 제공 해 줄 수도 있을 것입니다.

#2. 동영상 압축 기법(동영상 압축을 위한 기본적인 방법)

이러한 동영상을 압축 하려면 어떻게 해야 할까요?

동영상 압축에는 크게 세 가지 기법이 사용 됩니다. 첫번째는 프레임 간의 상관관계 (temproal correlation)이고, 두번째는 공간적인 상관관계(spatial correlation)입니다. 세번째는 저주파 성분에 민감한 시각의 특성을 이용합니다 (DCT 변환).

-그림2. 프레임 9- -그림3. 프레임 10-

먼저 프레임간의 상관관계를 알아보도록 하겠습니다. 그림 2와 3은 각각 같은 동영상(football_sif.yuv)의 9번과 10번 프레임입니다. 마치 같은 그림처럼 닮아있습니다. 근접한 프레임은 거의 비슷한 이미지로 이루어져 있다는 아이디어를 이용하여, 영상의 크기를 줄일 수 있습니다.

-그림 4. Image의 공간적인 중복-

그림 4에서 보는 것과 같이 한 장의 이미지에도 인접한 픽셀간의 정보는 거의 중복 된다는 것을 알 수 있습니다. 이방법으로도 영상의 크기를 줄 일 수 있을 것입니다.

Temporal correlation(프레임간의 상관관계)은 그림 5,6처럼 현재 프레임(t)의 하나의 픽셀(x,y)은 이전 프레임(t-1)의 비슷한 위치(x,y)에 있을 가능성이 높고, 또한 두 필셀 사이에는 유사성이 높다는 것입니다.

-그림 5. Frame(t)- -그림 6. Frame(t-1)-

이렇게 프레임(t)에서 프레임(t-1)과의 차를 계산해 보면 중복 데이터가 사라지고, 차이인 그림 7이 나오게 됩니다.

-그림 7. Frame(t) 와 Frame(t-1)의 Difference -

이번에 간단한 동영상의 정의와, 동영상을 압축하는 기본적인 방법을 알아 보았습니다. 다음에는 RGB와 YUV를 알아보고, 위에서 간단히 소개한 압축의 기법들을 자세히 소개하는(주파수 도메인(DCT)을 이용한 방법, Motion Estimation 등) 순으로 진행 할 예정이며, 기본적인 지식을 갖춘 후, H.264에 대해서도 알아 보도록 하겠습니다.

블로그 스킨 & 글꼴 변경

맨날맑음 — Sat, 8 Aug 2009 16:43:19 +0900

안녕하세요? 맨날맑음 입니다.

다른 사용자의 블록를 돌아다닐때 마다 멋진 블로그가 많아 새롭게 블로그를 좀 꾸며 보려고 했는데; 역시 웹지식이 너무 없는 관계로 쉽지 않군요..(특히..CSS)

스킨 변경한다는 핑계로 포스팅을 멈추었는데;; 이제 다시 포스팅을 하고, 스킨은 HTML과 CSS, 스크립트를 좀 공부해가면서 천천히 변경해 보아야겠습니다.

티스토리 초대장 나눠 드려요(매진)

맨날맑음 — Thu, 6 Aug 2009 01:33:22 +0900

i n v i t a t i o n

티스토리 초대장

+ 남은 초대장 수 : 00

안녕하세요!

티스토리에 보금자리를 마련하시려는 여러분께 초대장을 배포해 드리려고 합니다.

나만의, 내 생각을, 내 기억을 담는 소중한 블로그를 만들고 싶다면 티스토리로 시작해보세요!

티스토리 블로그는 초대에 의해서만 가입이 가능합니다. 원하시는 분은 댓글에 E-mail 주소를 남겨주시면 초대장을 보내드립니다. 남겨주실 때에는 꼭 비밀댓글로 남겨주세요!

선착순으로 초대장 배포합니다^^

티스토리 이래서 좋아요!

1. 이미지, 동영상, 오디오, 파일까지! 무한 용량과 강력한 멀티미디어를 올릴 수 있어요!

2. 스킨위자드로 스킨을 내맘대로~ 거기에 기능 확장 플러그인까지!

3. 내가 원하는대로 myID.com으로 블로그 주소를 만들 수 있어요!

주민등록번호 유효성 검사하기!

맨날맑음 — Wed, 5 Aug 2009 22:06:47 +0900

안녕하세요? 맨날맑음 입니다.

회원가입 기능을 구현하다 보면, 주민등록번호가 올바른지 체크해야 하는 경우가 생기게 됩니다.
우선 주민등록번호가 어떠한 형태(?)로 이루어 졌는지 알아 볼 필요가 있습니다.

주민등록번호는 총 13자리 숫자로 구성되어 있습니다.
모두 아시는 바와같이 앞의 6자리는 태어난 날의 년, 월, 일을 나타냅니다
뒤의 7자리는 조금 복잡한데요.
# 1번 자리 : 성별 (ex. 남자 : 1또는3, 여자 : 2또는4)
   - 3과 4는 낮설겠지만 00년 이후 출생자부터는 남자는 3 여자는 4입니다.
# 2~5번 자리 : 출생 신고 당시의 거주지 관할 동사무소의 지역코드
# 6번 자리 : 출생 신고 날짜
# 7번 자리 : 검정 코드
  - 7번 자리가 매우 중요합니다. 이것은 앞의 12자리의 유효성을 검증해 줄 매직넘버(?)로 쓰이게 됩니다.

주민등록번호의 유효성을 알아 보기 위해서는 각 자리수의 미리 지정된 값을 곱하여, 곱한 결과를 전부 더하고,
그 값을 11로 나눈 후, 그 결과 값(나머지)11에서 빼어 13번째 자리수인 검정 코드와 일치하면 유효하게 됩니다.
참.. 말로 할려니 쉽지 않습니다.

주민등록번호가 123456 - 1234567 이라고 예를 들어 보겠습니다.
# 1. 아래와 같이 검정 코드인 7을 제외한 각자리에 미리 지정된 값(234567892345)을 각각 곱하여 줍니다.

# 2. 각 자리에서 곱한 결과를 모두 더해 줍니다.

# 3. 더한 결과(206)을 11로 나누어 줍니다(% 나머지 연산).

# 4. 11에서 나머지의 결과를 빼줍니다.

# 5. 나머지 3과 검증코드 7이 같은지 확인 합니다. 같으면 유효한 주민등록번호입니다. 이 경우 11에서 10을 뺀다던지, 1을 빼면 2자리의 결과가 나오게 됩니다. 그럴때는 뒤의 1자리만 취하여 비교하시면 됩니다. (이와같은 이유로 4번의 결과에 % 연산으로 10을 한번 더해주면 뒤의 1자리만 취할 수 있겠죠?)

# 결론 . 주민등록번호 123456 - 1234567는 틀린 주민번호 입니다!

C# 코드로 만들어 보겠습니다.

코드 작성시 고려 사항
# 1. 주민등록번호가 13자리 인가?
# 2. 13자리 모두 숫자인가?
# 3. 위의 공식에 부합하는가?

bool IsAvailableRRN(string RRN)

{

//공백 제거

RRN = RRN.Replace(" ", "");

//문자 '-' 제거

RRN = RRN.Replace("-", "");

//주민등록번호가 13자리인가?

if (RRN.Length != 13)

{

return false;

}

int sum = 0;

for (int i = 0; i < RRN.Length - 1; i++)

{

char c = RRN[i];

//숫자로 이루어져 있는가?

if (!char.IsNumber(c))

{

return false;

}

else

{

if (i < RRN.Length)

{

//지정된 숫자로 각 자리를 나눈 후 더한다.

sum += int.Parse(c.ToString()) * ((i % 8) + 2);

}

// 검증코드와 결과 값이 같은가?

if (!((((11 - (sum % 11)) % 10).ToString()) == ((RRN[RRN.Length - 1]).ToString())))

{

return false;

}

return true;

}

윈도우간 도킹 기능(자석 윈도우)

맨날맑음 — Thu, 16 Jul 2009 20:27:57 +0900

안녕하세요? 맨날맑음 입니다.

몇몇 프로그램을 보면, 윈도우끼리 도킹 기능으로 서로 일정거리 만큼 가까워지면 딱 달라붙게 만들어진 것을 볼 수 있습니다. 이런 기능의 명칭을 정확히 몰라서; 일단 제목은 '자석 윈도우'라고 정해 보았는데요;

밑의 예(이스트소프트의 알송)에서 볼 수 있듯이 각 윈도우끼리는 가까이 가면 달라 붙고, 제일 위의 윈도우를 이동하면 붙어있는 윈도우도 따라서 이동하게 됩니다.

이런 기능을 간단하게 Windows Form을 이용하여 만드는 방법을 알아보려 합니다. 이런 기능을 제공하는 Class Library가 있을까 찾아 보다가 결국 찾지는 못하고, 한 외국 사이트에 이와같은 소스를 발견하였습니다. 현재 출처를 정확하게 기억 나지 않습니다. 그래서 완성된 소스는 올리지 않습니다.(필요하신분은 요청하세요)
Form1.cs

 private void Form1_Move(object sender, EventArgs e)
        {
            if (isForm2Docked)
            {
                tempForm2.SetDesktopLocation(tempForm2.Location.X + (this.Location.X - prevLoc.X),
                    tempForm2.Location.Y + (this.Location.Y - prevLoc.Y));
            }
            prevLoc.X = this.Location.X;
            prevLoc.Y = this.Location.Y;
        }

메인이 되는 폼의 Move 이벤트에서는 현재 서브폼이 붙어있는지 확인하여, 붙어있으면 위치를 함께 옮겨줍니다.

Form2.cs

private void Form2_Move(object sender, EventArgs e)
        {
            bool amIDocked = false;
            Point newPoint = GetNewFormPosition(this, passedInForm, out amIDocked);
            this.SetDesktopLocation(newPoint.X, newPoint.Y);
            ((Form1)passedInForm).isForm2Docked = amIDocked;
        }

        public Point GetNewFormPosition(Form thisForm, Form parentForm, out bool isDocked)
        {
            int[] xRange = new int[2] { parentForm.Location.X, parentForm.Location.X + parentForm.Width };
            int[] yRange = new int[2] { parentForm.Location.Y, parentForm.Location.Y + parentForm.Height };
            int xGap = Math.Abs(thisForm.Location.X - parentForm.Location.X);
            int yGap = Math.Abs(thisForm.Location.Y - parentForm.Location.Y);
            int leftGap = Math.Abs((thisForm.Location.X + thisForm.Width) - parentForm.Location.X);
            int rightGap = Math.Abs(thisForm.Location.X - (parentForm.Location.X + parentForm.Width));
            int topGap = Math.Abs((thisForm.Location.Y + thisForm.Height) - parentForm.Location.Y);
            int bottomGap = Math.Abs(thisForm.Location.Y - (parentForm.Location.Y + parentForm.Height));
            int xNew = thisForm.Location.X;
            int yNew = thisForm.Location.Y;
            isDocked = false;

            if ((leftGap <= dockGap) && (((thisForm.Location.Y >= yRange[0]) && (thisForm.Location.Y <= yRange[1])) ||
                ((thisForm.Location.Y + parentForm.Height >= yRange[0]) && (thisForm.Location.Y + parentForm.Height <= yRange[1]))))
            {
                xNew = parentForm.Location.X - thisForm.Width;
                if (yGap <= dockGap) yNew = parentForm.Location.Y;
                isDocked = true;
            }
            if ((rightGap <= dockGap) && (((thisForm.Location.Y >= yRange[0]) && (thisForm.Location.Y <= yRange[1])) ||
                ((thisForm.Location.Y + parentForm.Height >= yRange[0]) && (thisForm.Location.Y + parentForm.Height <= yRange[1]))))
            {
                xNew = parentForm.Location.X + parentForm.Width;
                if (yGap <= dockGap) yNew = parentForm.Location.Y;
                isDocked = true;
            }
            if ((topGap <= dockGap) && (((thisForm.Location.X >= xRange[0]) && (thisForm.Location.X <= xRange[1])) ||
                ((thisForm.Location.X + parentForm.Width >= xRange[0]) && (thisForm.Location.X + parentForm.Width <= xRange[1]))))
            {
                yNew = parentForm.Location.Y - thisForm.Height;
                if (xGap <= dockGap) xNew = parentForm.Location.X;
                isDocked = true;
            }
            if ((bottomGap <= dockGap) && (((thisForm.Location.X >= xRange[0]) && (thisForm.Location.X <= xRange[1])) ||
                ((thisForm.Location.X + parentForm.Width >= xRange[0]) && (thisForm.Location.X + parentForm.Width <= xRange[1]))))
            {
                yNew = parentForm.Location.Y + parentForm.Height;
                if (xGap <= dockGap) xNew = parentForm.Location.X;
                isDocked = true;
            }
            return new Point(xNew, yNew);
        }

서브폼에서 좀 복잡해 보이긴 하지만, 메인폼의 영역을 알아와, 현재 서브폼의 위치가 달라 붙어야하는 위치라면 붙여 주고, 메인폼에 그 사실을 알리는 역할을 합니다.
이 소스를 응용하면, 상용프로그램처럼 윈도우간 도킹 기능을 만드는 것도 어렵지 않을 것 같습니다.

ps. 좌표를 일일이 비교해가며 구현하는 방법 외에 Class Library나 다른 방법을 아시는 분은 꼭 피드백을 부탁 드립니다!!

현재 실행중인 프로그램 목록 얻어오기

맨날맑음 — Thu, 16 Jul 2009 11:24:33 +0900

안녕하세요? 맨날맑음 입니다.

윈도우에서 [Ctrl + Alt + Del]키를 누르면 아래와 같이 Windows 작업관리자를 볼 수 있습니다. 응용 프로그램 탭을 보면 현재 실행 중인 프로그램의 목록을 확인 할 수 있는데요. 이와같이 프로그램을 만들다 보면 특정한 프로그램을 선택하는 창을 제공해야 할 때가 있습니다.

이런 기능을 만들기 위해서는 Win32 API의 도움을 받아야합니다.(.net class library에서 지원해 주는지는 잘 모르겠습니다. 아시는분은 꼭 알려주시길..) 잡설이지만 .NET의 Windows Form 개발시 자꾸만 Win32 API를 사용하게 되는군요'' 분명 그에 매칭하는 .NET Class가 있을꺼라는 생각이 드는데요(일부 크리티컬한 기능 제외);

Win32 API의 EnumWindows 함수는 현재 실행중인 프로세서들의 목록을 얻어올 수 있는 기능을 제공합니다.
http://msdn.microsoft.com/en-us/library/ms633497(VS.85).aspx 이 링크에서 보다 자세한 MSDN 도움말을 확인 할 수있습니다.

C#에서 사용시에는 다음과 같이 선언 해 주어야 하는데, 한가지 고민되는 사항은 첫번째 인자가 callback 함수의 '함수포인터'를 넣어야 되는 것입니다. 두번째 인자의 의미는 사용자 임의의 데이터를 넘길 때 사용합니다.
[DllImport("user32.dll", CharSet=CharSet.Auto, SetLastError=true)]
public static extern bool EnumWindows(EnumWindowsCallback callback, int extraData);
그런데 C#에는 함수포인터가 없기 때문에 이를 대체하기 위한 수단으로 'Delegate'를 사용해야 합니다.

그래서 아래과 같이 EnumWindows의 Callback 함수와 형식이 일치하는 Delegate를 선언해 줍니다.

public delegate bool EnumWindowCallback(int hwnd, int lParam);

배웠으니 시험도 해볼겸 간단한 예제를 만들어 보겠습니다. Windows Form 프로젝트를 생성합니다.
Form위에 프로그램의 목록과 아이콘을 띄워줄 ListView를 가져다 놓습니다.

각자 입맛에 맛게 속성을 조정해 줍니다. 저는 Form크기에 맞게 딱 붙도록 Dock속성을 Fill로 변경해 보았습니다.
코드(form.cs)로 가서 아래의 코드를 추가합니다.

using System;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using System.Runtime.InteropServices;

namespace Sample
{
    public partial class Form1 : Form
    {
        public delegate bool EnumWindowCallback(int hwnd, int lParam);
        
        [DllImport("user32.dll")]
        public static extern int EnumWindows(EnumWindowCallback callback, int y);

        [DllImport("user32.dll")]
        public static extern int GetParent(int hWnd);

        [DllImport("user32.dll")]
        public static extern int GetWindowText(int hWnd, StringBuilder text, int count);

        [DllImport("user32.dll")]
        public static extern long GetWindowLong(int hWnd, int nIndex);

        [DllImport("user32.dll")]
        public static extern IntPtr GetClassLong(IntPtr hwnd, int nIndex);

        const int GCL_HICON = -14; //GetWindowLong을 호출할 때 쓸 인자
        const int GCL_HMODULE = -16;
        ImageList imgList;//ListView의 Image로 쓸 리스트
               

        public Form1()
        {
            InitializeComponent();
            imgList = new ImageList();
            imgList.ImageSize = new Size(16, 16);
            listView1.SmallImageList = imgList;
            listView1.View = View.List;
            //CallBack 델리게이트 생성
            EnumWindowCallback callback = new EnumWindowCallback(EnumWindowsProc);
            EnumWindows(callback, 0);

        }
       
        public bool EnumWindowsProc(int hWnd, int lParam)
        {            
            //윈도우 핸들로 그 윈도우의 스타일을 얻어옴
            UInt32 style = (UInt32)GetWindowLong(hWnd, GCL_HMODULE);
            //해당 윈도우의 캡션이 존재하는지 확인
            if ((style & 0x10000000L) == 0x10000000L && (style & 0x00C00000L) == 0x00C00000L)
            {
                //부모가 바탕화면인지 확인
                if (GetParent(hWnd) == 0)
                {
                    StringBuilder Buf = new StringBuilder(256);
                    //응용프로그램의 이름을 얻어온다
                    if (GetWindowText(hWnd, Buf, 256) > 0)
                    {
                        try
                        {
                            //HICON 아이콘 핸들을 얻어온다
                            IntPtr hIcon = GetClassLong((IntPtr)hWnd, GCL_HICON);
                            //아이콘 핸들로 Icon 객체를 만든다
                            Icon icon = Icon.FromHandle(hIcon);
                            imgList.Images.Add(icon);                            
                        }
                        catch (Exception)
                        {
                            //예외의 경우는 자기 자신의 윈도우인 경우이다.
                            imgList.Images.Add(this.Icon);
                        }
                        listView1.Items.Add(new ListViewItem(Buf.ToString(), listView1.Items.Count));
                    }
                }
            }
            return true;
        }    
    }
}

소스가 좀 많아 보이긴 하는데, 복잡하진 않습니다. Win32API들을 사용하기 위해 EnumWindows, GetParent, GetWindowText, GetWindowLong, GetClassLong을 선언해 줍니다.
ListView의 Image를 넣기 위한 ImageList도 추가합니다.

생성자에서는 ImageList와 ListView의 초기화를 하고, Delegete를 생성하여, EnumWindows를 호출해 줍니다.
그럼 OS는 현재 실행중인 프로세서를 EnumWindowsProc으로 전달해 주게 됩니다. 단 EnumWindowsProc으로 전달되는 것은 프로세스 목록(전체)이 아니라 한번에 하나씩 들어오게 됩니다.

EnumWindowsProc에서는 첫번째 매개변수로 들어온 윈도우 핸들을 이용하여 GetWindowLong을 호출해 윈도우의 스타일을 얻어오고, 해당윈도우의 캡션이 존재하는지 확인합니다.

그 다음으로 부모가 바탕화면인지 확인하여, 이것이 최상위의 윈도우인지 확인하게 됩니다. GetWindowText함수를 이용하여, 윈도우(응용프로그램)의 이름을 얻어온후, GetClassLong을 사용하여 해당 윈도우의 HICON 아이콘핸들을 얻어오게 됩니다(.net에서 사용하기 위해 IntPtr 사용), 이렇게 얻어온 아이콘핸들을 이용하여 .net의 Icon 클래스의 static메소드인 FromHandle을 이용하여 Icon 객체를 생성합니다.

예외처리 구문은 자기 자신의 윈도우일 경우 Icon을 못얻어오는 경우가 생겨서, try를 사용하였습니다.
EnumWindowsProc의 return은 true로 해주셔야, 계속하여 호출하게 됩니다. 상황에따라 원하는 윈도우를 찾은다음에 false를 return하면 되겠습니다. 실행시켜 보니 잘되는군요!

Sample.zip

사실, API의 EnumWindows를 사용하지 않고 .net의 Process 클래스를 사용해도 현재 사용중인 프로세스의 목록을 얻어, 바탕화면이 부모인지 확인하고 MainWindowTitle을 확인하여 이와같은 기능을 만들 수 도 있습니다.(하지만 탐색기 같은 일부창의 경우 윈도우의 이름을 얻어올 수 없는 문제가 있습니다.) 아래는 Process를 이용하는 간단한 예제입니다.

Process[] pro = Process.GetProcesses();            
for (int i = 0; i < pro.Length; i++)
{
     if (pro[i].MainWindowHandle != IntPtr.Zero)
     {
          if (pro[i].MainWindowTitle == "")
              continue;
       //To do..
     }
}

SystemParametersInfo() 트레이 주위에 윈도우 생성 하기

맨날맑음 — Tue, 7 Jul 2009 23:09:45 +0900

안녕하세요? 맨날맑음 입니다.

네이트온을 사용하다 보면 친구가 로그인 했더나 대화 요청이 들어올때 트레이 아이콘 주위에 알림창이 뜨는것을 볼 수 있습니다.

이와 같이 트레이창의 위치를 윈도우 주위로 위치하는 것은 .NET에서도 Win32API의 SystemParamete
rsInfo를 사용하면 간단하게 구현 할 수 있습니다.

.NET에서 Win32API를 사용하기위해 우선 using System.Runtime.InteropServices; 이 필요합니다.
또한 SystemParametersInfo에 대한 아래와 같은 선언도 필요합니다.

[DllImport("user32.dll", CharSet = CharSet.Auto, SetLastError = true)]
public static extern int SystemParametersInfo(int uAction, int uParam, out RECT lpvParam, int fuWinIni);

SystemParametersInfo 함수를 호출하여 작업표시줄의 영역을 뺀 화면의 크기를 얻어 오기 위하여 RECT 구조체가 필요 하기 때문에 아래와 같이 임의로 RECT 구조체를 정의해 줍니다.

[StructLayout(LayoutKind.Sequential)]
public struct RECT
{
        public int left;
        public int top;
        public int right;
        public int bottom;
}

사실 SystemParametersInfo는 매우 다양한 기능을 수행하는 API입니다. 여러가지 시스템 정보를 설정하거나 가져 올 수 있습니다. 예를들어 바탕화면 이미지를 변경한다던지, 작업영역의 크기를 알아낼 수 도 있고, 화면보호기의 동작 유무를 제어 할 수도 있습니다. 인자에 따른 기능이 너무 많아서 좀더 자세한 기능을 알고 싶다면 아래의 링크에서 MSDN 도움말을 확인 하시면 됩니다.
http://msdn.microsoft.com/en-us/library/ms724947(VS.85).aspx

위에 그림에서 보듯이 작업표시줄의 트레이 아이콘 위에 윈도우를 띄우려면(무언가 보여주고 싶다면...) 작업표시줄의 영역을 제외한 윈도우의 실질적인 작업영역의 크기를 얻어오면 됩니다.

        [DllImport("user32.dll", CharSet = CharSet.Auto, SetLastError = true)]
        public static extern int SystemParametersInfo(int uAction, int uParam, out RECT lpvParam, int fuWinIni);

        private void SetFormLocationToTray(Form form)
        {
            int SPI_GETWORKAREA = 0x0030; //작업영역을 알아오는 Flag
            RECT r = new RECT();
            SystemParametersInfo(SPI_GETWORKAREA, 0, out r, 0);
            Size s = form.Size;
            Point p = new Point(r.right - s.Width, r.bottom - s.Height); 
            form.Location = p;
        }

SetFormLocationToTray 함수는 인자로 들어온 Form 객체의 위치를 Tray 주위로 옮겨 주는 역할을 합니다.
SystemParametersInfo의 첫번째 인자중 0x0030(SPI_GETWORKAREA)을 넣으면 작업표시중을 뺀 작업영역의 크기를 3번째 인자의 RECT 구조체에 얻어오게 됩니다.
알아온 작업영역의 크기로 위의 소스에서 보는것 처럼 현재 폼의 크기에 따라 계산을 하여 폼의 location을 변경하여 네이트온처럼 트레이 주위에 윈도우가 뜨게 할 수 있습니다.

.NET 중복 실행 방지

맨날맑음 — Tue, 7 Jul 2009 21:30:34 +0900

안녕하세요? 맨날맑음 입니다.

어플리케이션을 개발 하다 보면 같은 프로그램이 두번 실행 되지 않아야 하는 경우가 종종 생깁니다.
이를 해결 하기 위해 여러 방법이 있지만.. 이번 포스팅에 소개 할 내용은 커널 동기화 객체 중 하나인 뮤텍스(Mutex)를 이용하여 해결하는 방법을 소개하려 합니다.

Mutex는 .NET의 System.Threding 네이스페이스에 포함된 클래스 입니다. 사실 둘이상의 스레드가 동시에 공유될 수 있는 리소스에 접근 할때 데드락의 위험이 있으므로 동기화 매커니즘이 필요하게 되는데요. Mutex는 리소스에 대한 단독 엑세스 권한을 하나의 스레드에만 부여하여 동기화하는 기본형식 입니다.
같은 리소스에 접근 할때 하나의 스레드가 Mutex를 걸고 어떠한 일을 수행 할 경우 다른 스레드는 먼저 수행하고 있는 스레드가 Mutex를 해제 할때까지 기다리게(일시중지) 되게 됩니다.
Mutex에 관한 자세한 설명은 아래의 링크에서 MSDN 도움말을 확인 할 수 있습니다.
http://msdn.microsoft.com/ko-kr/library/system.threading.mutex.mutex.aspx

테스트 하는 어플리케이션으로는 Windows Form 프로젝트를 예로 들겠습니다.
WinForm 프로젝트를 생성하면 Program.cs 가 생성 됩니다.
Main 함수에 다음과 같은 코드를 추가 시켜 주면 메세지 막스가 뜨면서 해당하는 프로그램이 중복 실행 되었다는걸 알릴 수 있습니다. 매우 간단하죠?

static class Program
    {
        /// 
        /// 해당 응용 프로그램의 주 진입점입니다.
        /// 
        [STAThread]
        static void Main()
        {
            bool createdNew;
            Mutex dup = new Mutex(true, "Focus Explorer Mutex", out createdNew); //Mutex생성
            if (createdNew)
            {
                Application.EnableVisualStyles();
                Application.SetCompatibleTextRenderingDefault(false);
                Application.Run(new MainForm());
                dup.ReleaseMutex(); //Mutex 해제
            }
            else // 프로그램이 중복 실행된 경우
            {
                MessageBox.Show("이미 프로그램이 실행중입니다.","Focus Explorer");
            }
        }
    }

우선 Mutex를 생성하고, 생성자에 두번째 인자에 뮤텍스 이름을 지정합니다.
세번째 인자로준 bool 값이 false일 경우 이미 뮤텍스가 걸리있는 상태이기 때문에.. 해당 프로젝트가 이미 생성되었다고 생각하고 프로그램이 실행중이라는 메세지 박스를 띄우고, 프로그램을 종료합니다.

이상 간단한 Mutex를 사용한 프로그램 중복 방지 방법이었습니다.

.NET 배포 프로젝트를 만들어 보자.

맨날맑음 — Tue, 7 Jul 2009 12:37:43 +0900

안녕하세요? 맨날맑음 입니다.

.NET 으로 프로젝트를 만들고, 배포를 하는 방법은 Click Once같은 방법도 있지만 이번에는 Windows Installer 배포에 대해 알아보겠습니다. 기존에 .Net으로 프로젝트 개발만 해보았지, 배포는 신경을 쓰지 않아 잘 모르다가, 이번에 VS2008에서 기본으로 제공되는 배포 프로젝트의 사용법을 알아 보았습니다.
아래 링크를 따라가면 배포프로젝트에 관한 MSDN 도움말을 보실 수 있습니다.
http://msdn.microsoft.com/ko-kr/library/206sadcd(VS.80).aspx

우선 배포할 프로그램을 준비합니다. 저는 간단한 윈폼 프로젝트로 하겠습니다.

VS2008에서 새 프로젝트를 추가 하고, 기타 프로젝트 형식 -> 설치 및 배포 -> 설치프로젝트를 선택합니다.

다음과 같이 배포 프로젝트가 생성됩니다.

솔루션 탐색기와 속성 창을 보면 아래와 같이 프로젝트와, 여러 속성이 보이게 됩니다.

이제 이 속성들의 의미를 하나하나 알아보겠습니다.
▷AddRemoveProgramIcon : 제어판 -> 프로그램 추가/제거에 표시될 아이콘을 등록합니다.
▷Author : 프로젝트 작성자의 이름을 등록합니다.
▷Desciption : 설치 관리자에 관한 설명을 등록합니다.
▷DetectNewerInstalledVersion : 프로그램 설치시 버전 비교를 통해 새 버전인지 확인 해 줍니다. 이미 설치 되있을 경우 설치 되어있다고 알려주기도 합니다.
▷Keyword : 설치 관리자를 검색하는데 사용 할 키워드를 지정합니다.
▷Localization : 로케일을 적용한다고 하는데, 글로벌 프로그램이 아니라면 신경 안써도 될 듯 합니다.
▷Manufacturer : 제조업체의 이름을 지정합니다
▷MunufacturerUrl : 제조업체의 홈페이지 링크를 지정.
▷PostBuildEvent : 배포프로젝트를 빌드한 후에 실행 할 명령줄을 지정합니다.
▷PreBuildEvent : 배포프로젝트를 빌드하기 전에 실행 할 명령줄을 지정합니다.
▷ProductCode : 응용프로그램의 고유 식별자(GUID)를 지정합니다.
▷ProductName : 프로그램의 공개 이름을 지정합니다.
▷RemovePrevionsVersions : 설치시 이전버전을 삭제 할지를 지정합니다.
▷RunPostBuildEvent : PostBuildEvent 속성에서 지정된 명령줄을 실행할 시기를 결정합니다.
▷SearchPath : 개발 컴퓨터의 어셈블리, 파일 또는 병합 모듈을 검색하는 데 사용되는 경로를 지정합니다.
▷Subject : 프로그램을 설명하는 추가정보를 지정합니다.
▷SupportPhone : 전화번호를 지정합니다.
▷SupportUrl : 마찬가지로 추가 설명을 하는 웹사이트 주소
▷TargetPlatform : 프로그램이 실행될 플랫폼을 지정.
▷Title : 설치 관리자의 제목을 지정합니다.
▷UpgradeCode : 프로그램 버전이 여러가지 일때 고유식별자를 지정합니다.
▷Virsion : 버전을 지정합니다.

속성 참 많네요.. 정작 중요한건 ProductName, Title, Author, MAnufacturer 정도 입니다.

이제 파일시스템 탭으로 이동하여 대상 컴퓨터의 파일 시스템 -> 응용 프로그램 폴더를 선택한 후 속성창을 확인합니다.

DefalutLocation이라는 속성에 [ProgramFilesFolder][Manufacturer]\[ProductName] 라고 되어 있습니다. 인스톨시 프로그램이 설치될 폴더 인데요. 이 설정으로 하게 되면 프로그램파일 폴더 밑에 제조회사명 밑에 프로그램 이름 폴더 안에 깔리게 되겠습니다. 맘에 드는 폴더로 변경 하시면 됩니다.

이제 파일을 추가 해 보겠습니다. 응용 프로그램 폴더에서 마우스 오른쪽 버튼을 누르면 파일이나 폴더등을 추가 할 수 있습니다. 미리 만들어 놓은 샘플 어플리케이션을 추가 하겠습니다.

이렇게 하면 앞서 지정된 설치 폴더에 MainApp.exe가 설치 됩니다. 명색이 인스톨 프로그램인데 이것만 지정하면 안되겠죠? 위에 사용자 바탕화면과 사용자 프로그램 메뉴가 보입니다.
말 그래로 사용자 바탕화면은 바탕화면에 설치 될 파일을 지정 할 수 있고, 사용자 프로그램 메뉴는 [시작]->[프로그램]의 폴더나 파일을 지정 할 수 있습니다.
바탕화면과 프로그램 메뉴에 MainApp.exe의 바로가기를 넣어주면 클라이언트가 아주 편리 할 것 같습니다.

MainApp.exe를 마우스 오른쪽 버튼으로 클릭하여 바로가기를 만듭니다. 저는 두개를 만들어 이름을 원하는데로 변경한 후 하나는 사용자 바탕화면으로 끌어다 놓았고, 사용자 프로그램 메뉴에는 [새폴더]를 하나 추가 하여, 그 안에 넣었습니다. 그리고 아이콘 파일(.ico)도 하나 추가하여 바로가기의 속성중 Icon에 연결 시켜 줍니다. 그럼 바로가기가 우리가 지정한 아이콘으로 생성 됩니다.

이제 언인스톨 기능을 하는 바로가기도 지원해 주어야 좀 더 있어보일 것입니다.
바탕화면에서 텍스트문서(txt)를 하나 추가해서 확장자를 bat로 바꾸어 줍니다. 편집기로 파일을 열어 Msiexec /x {ProductCode} 를 추가 해 줍니다. 여기서 ProductCode는 위에 프로젝트 속성중에 있던 코드 입니다. 지금 예제 대로 하면 Msiexec /x {A1715BBB-A953-4F01-B788-168542ED2BC3} 이 되겠네요.

현재 배포하는 샘플 프로그램이 매우 간단하여 파일이 하나이지만, 대부분의 응용은 여러 DLL을 포함하고 있을것입니다. 그리고 각 파일마다 설치하고 싶은 경로가 다를 수 있는데, 파일시스템 탭의 대상 컴퓨터의 파일 시스템을 오른쪽 버튼으로 누르면 특수폴더 추가에서 원하는 폴더를 추가 할 수 있습니다.

이제 이 파일을 응용프로그램 폴더에 포함 시켜주고, 마찬가지 방법으로 바로 가기를 만들어서 원하는 곳에 추가 시켜 줍니다. 프로젝트를 다시 빌드 하고 테스트 해보겠습니다. 프로젝트 폴더의 Relese 폴더에 들어가니 파일이 두개 보입니다.(Relese모드로 빌드 했을 경우, Debug 모드 일경우 Debug 폴더에 생성)
Setup.exe를 더블 클릭하니 설치가 잘 됩니다.

설치시 생긴 바로가기 아이콘으로 Uninstall도 잘되는지 확인해 보겠습니다.

정상적으로 잘 되는걸 볼 수 있습니다. 쓰다 보니 스크롤의 압박이군요;
만약 설치 대상컴퓨터(클라이언트)에 .Net Framwork가 없을때 자동으로 설치되게 하는 것 까지 쓰려고 했는데,
다음편으로 넘겨야 할 것 같습니다. 다음편에는 이같은 기능을 해주는 Boot Strapper에 관해 포스팅 하겠습니다.