'MSP'에 해당되는 글 12건

  1. 2008/07/03 C# Destructor & Garbage Collector
  2. 2008/07/02 XAML #2 - User Interface
  3. 2008/07/01 XAML #1 - WPF != XAML
  4. 2008/06/30 C#을 사용한 Raw Bitmap 열기 (7)
  5. 2008/06/29 WPF Overview #2 (1)
  6. 2008/06/27 WPF Overview #1
  7. 2008/06/27 [준비운동]User Interface Trends
  8. 2008/06/26 [준비운동]User Experience (3)
  9. 2008/06/25 WPF로의 여행 (1)
  10. 2008/05/18 Microsoft Silverlight VS Adobe Flex (2)
C#2008/07/03 22:10

사용자 삽입 이미지
오늘은 C# Destructor에 대에서 알아보도록 하겠습니다. 대부분 알고 있는 계념이라 생각하지만서도, 쉽게 혼동 할 수 있는 부분이 있으므로 정리 해보았습니다. 이미 알고 계신분들은 다시한번 복습의 시간을, 잘 모르셨던 분들은 새로운 내용을 습득하시는 계기가 되었으면합니다.

일반적으로 Desturctor는 소멸자라는 뜻을 가지고 있으며, 생성자와는 반대의 개념으로 사용됩니다. 소멸자는 클래스의 객체가 소멸될 때 호출되어집니다. 객체 생성시 할당했던 메모리를 소멸자로 하여금 회수하도록 하는 것입니다.

C++과 마찬가지로 소멸자는 매개변수를 가질수 없을 뿐더러 접근 제한자를 가질수 없고, 명시적으로 호출을 될 수도 없습니다. 소멸자는 생성자의 호출 순서와는 반대 되는 순서로 호출이 되어지는데요, 아래 예제 코드를 통해 살펴보도록 하겠습니다.
소멸자는 자신이 만든 클래스면 앞에 ~를 붙여 함수를 구현 합니다. 예를들어 사용자가 구현한 클래스의 이름이 MyClass일 경우 다음과 같이 구현 할 수 있습니다.

~ MyClass()
{
   // 이부분에 메모리를 회수하는 작업을 구현합니다.
}


간단한 예제를 통해 소멸자에 대해 좀더 알아보도록 하겠습니다.

    using System;
    class A
    {
        public A()  { Console.WriteLine("Creating A");   }
        ~A()        { Console.WriteLine("Destroying A"); }
    }

    class B : A
    {
        public B()  { Console.WriteLine("Creating B");   }
        ~B()        { Console.WriteLine("Destroying B"); }

    }
    class C : B
    {
        public C()  { Console.WriteLine("Creating C");   }
        ~C()        { Console.WriteLine("Destroying C"); }
    }
    class App
    {
        public static void Main()
        {
            C c = new C();
            Console.WriteLine("Object Created ");
            Console.WriteLine("Press enter to Destroy it");
            Console.ReadLine();
            c = null;
            Console.Read();
        }
    }


위와 같이 3개의 A,B,C라는 클래스가 존재한다고 할때 실행 결과는 어떻게 될가요?

정답은 알아 내셨나요?? 정답을 공개하자면 아래와 같은 결과가 나타납니다.

사용자 삽입 이미지

정답은 맞추셧나요? 한번에 정답을 맞추셧다면, C#의 특성 & OOP의 개념을 잘 이해하고 계신 분이십니다.
(아래 이유를 정리 해 놓았으니 보시고 이해한 답과 맞는지 비교해 보시기 바랍니다.)
그리고 틀리셨다면, 그 이유는 무엇일까요??

몇몇 분들에게 질문을 드려봤었지만, 정답을 틀리신 대부분의 사람들은 아래와 같은 결과를 예상했었는데요. New를 통해 객체를 생성하고, 이를 다시 NULL로 없애 버렸기 때문에 소멸자가 호출된다. 라고 생각을 하셨기때문입니다.

사용자 삽입 이미지


그렇다면 왜 저렇게 나오는 것일가요? New를 호출 했는데 Delete를 안해서 소멸자가 호출되지 않은걸가요??
(C++을 주로 사용하시는 분들께서는 이렇게 대답을 하시지만, 정답이 아닙니다.)

C#에서는 소멸자 호출 시점이 고정되어 있지 않기 때문입니다, C#에서는 효율적인 메모리 관리를 위해 가비지 콜렉터(Garbage Collector)라는 기능을 제공하고 있습니다. 가비지 콜렉터란 쉽게 생각해서 쓰레기 처리기 정도로 생각을 하실 수가 있는데요. New등을 통해 선언된 메모리가 더이상 사용되지 않는 쓰레기 상태가 되었을때 알아서 없애 준다는 계념입니다. (이때 소멸자가 호출이 되는거죠,)

이로인해 개발자는 메모리를 할당 놓고 사용만 하면되고, 해제하는데에 일일이 찾아 해제를 하지 않아도 자동으로 해제가 된다는 것입니다. 그럼 어떻게 가비지 컬렉터가 작동을 하는 것일가요?

제가 예전에 김역욱 MVP님 세미나를 들으면서 가비지 컬렉터에 대한 내용을 들은적이 있는데 재미있는 내용같아 이야기 해드리겠습니다.

메모리를 하나의 기숙사라고 생각합시다. 그리고  그 기숙사에 살고있는 사람들이 우리가 생성해놓은 객체라고 하겠습니다. 그리고 마지막으로, 기숙사생들을 관리하는 사감이 있습니다. 보통 우리는 어떤 할일이 있을때는 깨어있고, 할일이 없으면 잠을 잡니다. 그리고 사감은 현재 기숙사의 상황을 체크하기 위해서 기숙사를 돌면서 자고 있는 사람들을 체크합니다.

기숙사에서 생활하고 있는사람들 한명 한명 한명 돌아가면서, "야~ 자냐~?" 하고 물어봅니다.
(당연히 자고 있는 사람이라면 대답을 하지 않겠죠??ㅎ) 만약에 그렇게 물어봤는데 "나지금 안자요~" 라고 대답을 한다면, 넘어가고 쥐죽은듯이 자고 있는 사람들은 기록을 합니다.

그리고 다음번에 체크를 할 때는, 아까 자고 있던 사람들 한테만 가서 또  같은 방법으로 "야~자냐~?" 라고 물어봅니다. 이와 같은 방법으로 약 3번정도 물어본 뒤 진짜로 자고 있는 사람들은 가차없이 "죽여" 버립니다. -_-

조금 섬뜩한 내용이긴 하지만, 이와 같은 방식으로 현재 사용중인 메모리와 비 사용중인 메모리를 구분 지음으로서, 불필요한 메모리 사용을 줄이게 되는 것입니다.

다시 코드로 돌아와서, 코드를 살펴 보겠습니다.

C c = new C();
Console.WriteLine("Object Created ");
Console.WriteLine("Press enter to Destroy it");
Console.ReadLine();
c = null;
Console.Read();

위 코드를 보시면,
c = null;
이라는 부분을 찾을 수 있는데요, 맨 윗줄 new C()를 통해 변수 c에 새로운 객체 C가 저장되었지만, null이 들어옴과 동시에 이전에 저장되어 있던 객체가 방황을 하게 됩니다. -_- (나는 누구인가..) 그러다가 할일이 없으면 잠이 들겠죠? 하지만 잠이 들었다고 해서 바로 객체가 소멸하는것이 아니라, 위에서 설명 했듯이 가비지콜렉터가 자는 메모리를 죽여(-_-)줘야지만 소멸자가 호출됩니다.

그래서, null이 들어간 직후에는 소멸자가 호출이 되지 않은 것입니다.
그렇다면 소멸자를 호출하게 만드는 방법은 없을가요?

네 있습니다. 바로 가비지 컬렉터를 직접 호출하도록 해주는 방법인데요, .Net Framework에서는 가비지 컬렉터를 GC라는 이름의 클래스로 제공 사용합니다. 직접 가비지 컬렉터를 호출 해주기 위해서는 GC 클래스에 Static으로 선언된 Collect 함수 호출을 통해 가비지 컬렉터의 동작을 명령 할 수 있습니다.

그럼 코드를 살짝 바꿔 아래와 같이 작성해 보겠습니다.

            C c = new C();
            Console.WriteLine("Object Created ");
            Console.WriteLine("Press enter to Destroy it");
            Console.ReadLine();
            c = null;
            GC.Collect();
            Console.Read();
null을 대입한 이후 바로 Collect를 호출함으로서 쓸모 없는 메모리를 해제 하게끔 합니다.
위와 같이 코드를 살짝 변경한 뒤 실행 한 결과는 아래와 같습니다.
사용자 삽입 이미지

조금 이해가 되셨나요? 가비지 컬렉터는 메모리를 알아서 관리 해주기때문에, 편리하기도 하지만, 그렇다고 너무 가비지 컬렉터에 의존하다 보면 오히려 프로그램의 성능을 저하 시킬 수 있으니 유의하시기 바랍니다.
(메모리가 커지면 커질 수록 관리 대상 메모리가 많아짐으로 성능저하를 유발할 수 있습니다. )



김대욱(kdw234@naver.com) http://kdw234.tistory.com


크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 곡스
WPF2008/07/02 21:28

이번시간에는 WPF에서의 User Interface에 대해 소개 해 드릴건데요, 지금까지 너무 숨가쁘게(?)뛰어 온것 같으니, 동영상 하나 보고 시작하기로 하겠습니다. 아래 동영상은 전혀 WPF와 관련이 없는 동영상이니 그냥 긴장하지 마시고 가볍게 재생 버튼을 클릭해주시면 됩니다. ^_^ ㅋ




-_-....


영상은 재밌으셧나요??? ㅎㅎ

그렇다면 여기서 문제!!!!!
동영상에서 나오는 인물들의 공통 점은??






-_-.....





눈치 빠르신 분들 or 스크롤을 미리 내려보신분은 이미 알고 계시겠지만,
정답은 "DCInside 합성겔러리 필수요소" 들이죠??ㅎ
갑자기 쌩뚱맞게 이런 동영상을 준비한 이유는 지금 소개해 드릴 내용때문인데요
(위에선 관련 없다더니 갑자기 왠말이냐!! -_-ㅋ)

사용자 삽입 이미지

어떤 무엇이든간에 그것을 구성하는 필수요가 있기 마련입니다. 예를들어 노래방-탬버린, 소주-새우깡, 가요계-동방신기 등이 있죠? 그렇다면 UI의 필수요소는 무었일까요?
 (.... 어떻게든 동영상을 괜히 넣었단 말 안들으려고 엄청난 끼워 맞추기를 진행중입니다.)

사용자 삽입 이미지

여러가지가 있겟죠? 위 그림에서만 찾아보더라도, Button,Label,TextBox,ScrollBar 등등등.. 여러가지 UI객체를 찾아볼 수 있는데요, 그 중에서 이게 없으면 아무것도 안된다!! 하는 킹왕짱 중요한게 있다면 무엇일까요?

사용자 삽입 이미지

정답은 Page 또는 Window입니다.(너무 쉬웠나요??) UI객체를 붙일 일종의 도화지라고도 할 수 있겠죠?
우리가 보통 Win32나 MFC, WinFrom등을 사용해서 UI를 구현 하면 대부분 Window방식으로 구현합니다.
Window 방식이란 일반적으로 우리가 사용하는 Form기반 Application이라고 생각하시면 되는데요,

WPF에서는 이런 Window 방식 이외에 Page방식을 제공합니다. Page방식이란, 우리가 인터넷을 할때 하이퍼링크를 통해 Page단위로 화면을 이동합니다. 마치 Application에도 이와 같은 방식을 지원하는게 Page인데요, Window 단위로 정보를 표현해야만 했던 기존 방식보다 하나의 화면에 동적으로 다양한 정보를 표현 가능하다는 장점이 있습니다. (그렇다고 Window방식이 쓸모 없다는 것은 아닙니다.)

사용자 삽입 이미지

WPF에서 사용하는 XAML은 XML을 기반으로 표현하기 때문에, XAML(or CLR)로 표현한 UI는 위 그림과 같이 트리 형태로 표현 될 수 있습니다. 이 말은, 최소객체를 제외한 나머지 모든 객체는 자식 객체를 가질수 있다는 말로, 버튼 객체위에 이미지를 올려놓는다던지 하는 부분도 쉽게 구현 할 수 가 있습니다. (이부분에 대해서는 뒷부분에서 자세히 다룰 예정입니다.)


오늘 포스팅은 여기까지로 하고, 내일은 XAML에서의 Layout Control에 대해서 알아보도록 하겠습니다.
내일부터는 본격적으로 XAML을 사용한 실제 코딩과 관련된 부분을 다룰 예정이니, XAML을 작성하고 테스트 해볼 수 있는 환경을 구축 하시고 따라해보시기를 권장합니다.

김대욱(kdw234@naver.com) http://kdw234.tistory.com


크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 곡스
TAG MSP, SSM, UI, WPF, XAML
WPF2008/07/01 20:55
사용자 삽입 이미지

이번시간에는 XAML이 무엇인지에 대해 조금더 알아보는 시간을 갖도록 하겠습니다. 길지 않은 내용이니 살짝 보시고 다음 내용으로 넘어가시면 될것 같습니다. 전 시간에 WPF에서 UI를 표현하는데 XAML을 사용한다고 했습니다. 그런데 많은 사람들이 XAML 이 WPF고 WPF가 XAML이다라고 잘못 생각하시는 분들이 많습니다. 저도 사실 처음 WPF를 접했을때 이와 같이 생각을 했었는데요,

결론적으로 말하면 XAML 는 WPF가 아닙니다. XAML은 응용프로그램의 객체를 표현 하는 XML 기반의 선억적 프로그래밍 모델이기 때문에, XAML은 XAML대로의 기능을 가지고 있는 것이죠.

사용자 삽입 이미지

XAML은 XML 과 CLR을 더한 것이라 할 수 있습니다. 다른 말로는 CLR객체를 XML형태로 표현 하는것이라고 할 수 도 있는데요, XML을 사용해 CLR 객체를 선언하고 이를 XAML Parser가 CLR로 변환 해주는 과정을 통해 우리가 사용하는 CLR 언어인 C#이나 VB.Net과 연결 하여 사용이 가능한 것입니다.

WPF는 CLR의 일부분이므로, 굳이 XAML을 사용하지 않아도 기존의 CLR을 사용하여 UI를 구현할 수 있는거죠,
하지만, XAML을 사용하여 UI를 구현하는 것이 보다 직관적이고, 관리가 용이해짐으로, 꼭 필요한 부분(동적 생성등)을 제외하곤 XAML을 사용해 코딩하는것이 바람직하다 할 수 있습니다.


김대욱(kdw234@naver.com) http://kdw234.tistory.com

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 곡스
TAG MSP, SSM, WPF, XAML
C#2008/06/30 01:38
안녕하세요. 벌써 하루가 꼴딱 지나가 버렸네요 -_- ㅋ
방학을 해서인지 하루종일 방에서 딩굴딩굴 거리다가 아차 포스팅 해야지 ! 하는 생각에 블로그에 접속했습니다.
원래 계획 대로라면 오늘 WPF와 XAML에 대한 내용으로 포스팅 할 계획 이였지만, 내일로 미루도록 하겠습니다.(죄송합니다 ㅜ_ㅡ;)

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

자 어쨋든 오늘 시간에 소개해 드릴 내용은 "C#을 사용해서 RawBitmap 파일을 여는 방법"입니다.
뭐 방법이야 수없이 많겠지만, (API를 쓴다 Bitmap으로 변환한다 등등등등) 이번에 소개해 드릴 방법은 순수(?)하게 .Net Framework에서 제공하는 기능만을 가지고 구현 하는 방법입니다.

별로 어려운 내용이 아니니 한라인 한라인 따라가시면 쉽게 이해 하실 수 있을겁니다.
먼저 코드를 보여드리면,

사용자 삽입 이미지

위와 같이 표현 할 수 있습니다.

이제 한줄 한줄 설명 들어가도록 하겠습니다.

public Bitmap CreateBitmap(int Width,int Height,Byte[][]RawData)
함수 헤더 인데요, Bitmap 객체를 반환하고, 가로(Width),세로(Height), 그리고 실제 RawData가 저장되어있는 Byte 2차원 배열을 Parameter로 전달 받습니다.

Bitmap Canvas = new Bitmap(Width, Height,PixelFormat.Format8bppIndexed);
그리고 입력 받은 크기에 맞는 빈 Bitmap객체를 생성합니다. 제가 가지고 있는 데이터가 8Bit Raw Image라 Pixel Format을 Format8bppIndexed로 지정 했지만, 상황에 맞는 PixelFormat을 지정하시면 됩니다.
Format24bppRgb,Format16bppRgb555,Format16bppRgb565 등 대략 20가지정도 되는 Format을 지원합니다.

자세한 정보는
http://msdn.microsoft.com/en-us/library/system.drawing.imaging.pixelformat(VS.85).aspx
를 참고 하시기 바라며 계속 하겠습니다.

BitmapData CanvasData = Canvas.LockBits(new Rectangle(0, 0, Width, Height), ImageLockMode.WriteOnly, PixelFormat.Format8bppIndexed);

생성된 Bitmap 객체의 메모리를 독점 하하기 위해서 Bitmap객체 시스템 메모리를 잠그는 과정입니다.
LockBits 함수를 호출하면 BitmapData객체를 반환 하는데 이 객체를 사용해 Bitmap객체의 메모리에 접근 할 수 있습니다.

BitmapData의 자세한 정보는 아래 URL을 참고 하시기 바랍니다.
http://msdn.microsoft.com/ko-kr/library/system.drawing.imaging.bitmapdata(en-us,VS.85).aspx

그리고 unsafe 키워드를 사용해 포인터를 사용가능한 공간으로 설정합니다. 그리고 Bitmapdata의 Scan0 속성을 Pointer로 변환하여 Byte* 변수에 기록합니다.이후 RawData에 저장된 내용을 메모리에 기록하면 됩니다.

기록이 모두 완료되면 메모리 접근을 위해 잠갓던 것을 UnLockBits함수를 사용해 다시 해제 해줍니다.


그리고 맨 아랫줄 SetGrayscalePalette 함수는 8bit Image를 위해 필요한 색상 표로 24 bit image를 사용하시는 분들을 필요 없는 부분이며, 참고적으로 SetGrayscalePalette함수의 내용은 아래와 같습니다.

사용자 삽입 이미지

이상으로 이번 시간을 마치며, 질문이나 샘플 코드가 필요하신 분께서는 리플 달아주시면 올려드리도록 하겠습니다. 그럼 이만!



김대욱(kdw234@naver.com) http://kdw234.tistory.com


크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 곡스
TAG c#, MSP, RAW
WPF2008/06/29 03:47
요즘 온라인게임에 빠져서 포스팅이 살짝(? 대략 3시간정도...??ㅠ) 늦엇네요. 죄송합니다.

저번시간에 이어 WPF Overview 2번째 시간입니다. 저번 시간에는 WPF가 어떻게 구성되었고 어떻게 작동되는것인가에 대해 알아보았는데요, 처음 접하시는 분들께서는 다소 어려운 감이 있을수도 있습니다.

이번시간에는 좀더 가벼운 주제로,
왜 WPF를 사용해야 하는가 그리고 WPF를 사용하면 왜 좋은가?
에 대해서 알아보도록 하겠습니다.

사용자 삽입 이미지

보통 우리는 디자인이 요구되는 프로젝트를 할때 디자이너와 함께 작업을 합니다.
(최근 UX가 발전하면서 Application의 UI 디자인은 필수요소라고 할 수 있죠.)
디자이너는 Photoshop이나 Illustrator, Powerpoint 등을 사용해서 디자인을 제작합니다. (그림 가장왼쪽)
그리고나서 각각의 세부항목들을 잘라서 JPG,PNG,PPT등의 포멧으로 변환하여 개발자에게 넘겨주죠?
(간혹가다 잘라주지 않고 '통이미지'로 보내주는 사람이 있는데.. 이건뭐.... 직접 잘라다 쓰란소리죠 ㅠ )
뭐 어쨋든 개발자는 이렇게 이미지 파일을 받으면 C++,C#, VB(주로 사용하는 언어가 없다고 미워하진 마세요ㅠ 떠오르는것들만쓴겁니당)와 같은 언어를 사용해 UI를 구현하게 됩니다.

많은 개발자 분들이 느끼시겠지만, 개발의 한계를 이해 하지 못하는 디자이너 분들의 환상적인 디자인 때문에, 수많은 삽질과 노가다를 시작합니다. 현실은 언제나 그렇듯이 냉혹합니다ㅠ
열심히 한다고 원하는 결과가 뚝딱 나오는건 아니죠ㅜ

엄청난 삽질과 노가다를 통해 디자이너의 요구대로 구현을 하다보면 실제로 구현하기 너무 힘든 부분이 발생하는 경우도 있습니다. 위에서 예시를 든 콤보박스를 보면..

간지가 좔좔 흐르는 콤보 박스에 각각 아이템들에는 체크박스도 포함되어 있네요..
체크박스도 보통 체크박스는 아닌듯 하고.. 위와 같이 구현을 하려면 보통은 콤보박스를 새로 구현을 해야합니다.
체크 박스따로 만들고 체크박스포함된 콤보박스 아이템 만들고 거기다 콤보박스 틀에 내부 기능까지...
해야 할 일이 너무 많습니다. ( 이럴경우를 보고 배보다 배꼽이 크다고 하죠.) 

개발자 입장에서는 이것도 해보고 저것도 해보다가 결국 타협을 하기 시작합니다. 이건 기술적으로 안되, 저거 하려면 시간이 너무 오래걸려 이렇게 자신과의 타협을 하면서 나온결과물은 그림 오른쪽, 기존 콤보박스와 별다른 차이가 없죠.

이제부터 디자이너와 개발자의 싸움이 시작됩니다. 디자이너는 왜 자기가 디자인 해준데로 구현을 못하냐고 소리치고, 개발자는 그게 말처럼 쉽게 되는게 아니니까 니가 해봐라 하고, 그럼 가능한선에서 예쁘게 만들라고 합니다. 이말은 마치 디자이너가 어느정도 컨셉을 정해주면 개발자가 알아서 개발이 가능한 형태로 새로 디자인해서 개발을 해라 라는 말과 같죠..

그럼 개발자들은 이렇게 말합니다.

사용자 삽입 이미지

개발만으로도 할일이 태산같은데, 디자이너가 할일까지 해야 하겟냐는거죠..
WPF는 이런 상황에 놓인 개발자들을 위한 해결책이라 할 수 있습니다.
아래 그림을 살펴보도록 하겠습니다.

사용자 삽입 이미지

아까와 비슷한 그림이지만 잘 살펴보면 이번에는 개발자의 콤보박스가 디자이너가 요구한데로 그대로 구현이 되어있다는걸 확인 하실 수 있습니다. WPF를 사용한 결과인데요, 어떻게 된일일까요?

눈에 띄는것을 보면, 이전에 Photoshop이나 Illustrator를 JPG,PNG등의 포멧으로 전달 햇던 작업이 딸랑 XAML이라는 것하나로 해결된것을 확인 할 수 있습니다. XAML이란 WPF에서 UI를 표현하기 위한 언어로 디자이너와 개발자가 모두 사용가능한 형태의 중간 언어라고 할 수 있습니다.

"중간 언어" 라고 표현을 했는데, 그렇다면 디자이너들은 그럼 우리가 언어를 배워야 하는거 아니냐 라고 말할 수 있겟죠? 배워서 남주는건 아니니 배운다고 나쁠건 없지만, 배우기 싫으면 굳이 배우지 않아도 언어를 충분히 다룰 수 있습니다. Exression Studio와 같은 Tool을 사용해 디자인을 하고, XAML으로 저장만하면 되기 때문이죠.

사용자 삽입 이미지

XAML은 디자이너의 디자인을 객체단위로 XML로 표현하는 방법이라 할 수 있습니다. 개발자는 이렇게 XML형태로 만들어진 디자인을 가져다가 그대로 사용하면 되는것이죠.  정리하면 디자이너가 위와 같은 버튼을 하나 그렷다고 가정을 해보겠습니다.

그럼 XAML(왼쪽)으로 표현될것이며, 개발자가 버튼을 을만들면 C#,VB.NET(중앙,오른쪽) 과 같이 코드로 표현하게 됩니다. 차이점은 코드를 통해 UI를 구현 할 경우 디자이너가 보내준 그림을 기준으로 개발자가 새로 구현 해야하지만, 디자이너가 만들어준 XAML을 사용하면 개발자가 UI를 새로 구현할 필요 없이 내부 Logic만 구현하면 바로 사용이 가능 하다는거죠.

아직까지는 살짝 애매할 수 도 있는 부분이지만, XAML에 대한 이야기와 디자이너와 협력 부분은 뒷부분에서 더 자세히 다루도록 하겠습니다. (지금은 일단 XAML이라는게 있구나 라고 만 이해해 두시면되겠습니다.)


사용자 삽입 이미지

XAML은 Expression Designer나 Expression Blend와 같은 Tool에서 쉽게 제작이 가능하며 Expression Studio에서 만들어진 XAML은 곧바로 VisualStudio에서 사용이 가능합니다. 한가지 덧붙이자면, VisualStudio에서 개발한 프로젝트를 Expression Blend에서 불러와 디자인 작업을 할 수 도 있고, Expression Blend에서 작업한 프로젝트를 Visual Studio에서 불러와 사용할 수있습니다.

여기서 중요한 점은 바로, UI와 Logic의 분리 입니다.
이제 디자이너는 디자인만 하고, 개발자는 내부 Logic만 구현하면 되는 시대가 된거죠.

일단 이번 시간은 여기까지로 하고, 다음 시간부터는 XAML과 WPF에 대해 조금더 알아보도록 하겠습니다.
지금 시간이 대략 새벽 4시가 가까워지고 있는데 ㅠ
너무 졸려서 인지 쓰면서도 내가 맞는 말을 하고 있는가 싶습니다. ㅠ
일단 일어나서 한번더 읽어보긴 하겠지만, 혹시나 읽으시다가 잘못된 부분이나 질문은 사정없이 태클 걸어주시기 바랍니다.  그럼 전 꿈나라로~~



보. 너. 스.!!!!
XAML이 국내에 소개되면서 많은 개발자들 사이에서 논란이 되었던 XAML에 대한 발음에 대해 말씀드리겠습니다. 이건 지극히도 개인적인 의견이며 정답이 아닐 수도 있으니 100%신뢰 하지는 마시길 바랍니다.

제멀,제믈,제블,젬얼,젬블,젬을 등등등..


개인적으로 생각하는 XAML에 대한 발음은....!!!

사용자 삽입 이미지

죄송합니다. -_-; 졸려서 미쳣나봐요.


김대욱(kdw234@naver.com) http://kdw234.tistory.com

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 곡스
TAG MSP, SSM, WPF, XAML
WPF2008/06/27 16:39

이제 본격적으로 WPF에 대해 알아보도록 하겠습니다.
이번시간에는 WPF가 어떻게 구성되어 있으며 어떻게 작동하는 지에 대한 소개를 하겠습니다.

사용자 삽입 이미지
.Net Framework 2.0에서 3.x로 업그레이드 되면서 위 그림과 같이, WPF,WCF,WF,Cardspace와 같은 기술이 추가되었습니다. .Net Frmaework의 버전을 3.x로 표현한 이유는 .Net Frmaework 2.0 이후 버전 부터는 하위 호환성을 가지고 있기 때문입니다. 2.0에 조금 기능을 추가해서 3.0이 만들어지고 조금더 추가해 3.5가 만들어진것이죠.이 말은, 만약 개발자가 2.0으로 개발을 하고 있었다 하더라도 아무런 문제 없이 3.x로 버전업이 가능하다는 뜻입니다.

다시 본론으로 돌아가서 우리가 공부할 WPF는 .Net Framework 3.x에 추가된 새로운 기술중 하나로,
Windows Vista의 새로운 UX를 제공하기 위해 탄생 했습니다. 기존의 UI제작 방식과 달리, XML을 기반으로한
XAML이라는 언어를 통해 UI를 구현하며, 하드웨어 가속 을 통해 성능을 최적화 할 수 있습니다.
(Windows Vista를 위해 탄생했다고 했는데, Windwos XP SP2이상의 OS면 모두 사용가능합니다.)

사용자 삽입 이미지

조금더 내부를 살펴보면, Media Integration Layer에 다양한 Engine이 포함되어있다는 사실을 확인 할 수 있습니다. 기본적인 Imaging 과 Effect이외에 2D, 3D, Audio, Video, Animation 등의 엔진을 자체적으로 제공하여, 개발자가 쉽게 원하는 효과를 구현 할 수 있도록 돕고 있습니다.

사용자 삽입 이미지
위 그림에서 빨간색 박스 부분이 WPF에서 사용하는 부분입니다. .Net Framework 를 기반으로 작동되기 때문에,
CLR위에 Presentation Framework와 Presentation Core가 있다는 것을 확인 하실 수 있습니다.
여기서 한가지 중요한 점은 milcore라는 것인데, milcore는 WPF의 보다 나은 성능을 위하여,
기존의 응용프로그램과 달리 GDI+를 사용하지 않고 DirectX에 직접 접근 하도록 돕는 레이어 입니다.
milcore는 DirectX를 통해 kernel에 직접 접근 함으로, 어쩔수 없이 unmanaged Code로 작성되어 있습니다만,
일반 개발자입장에서 milcore를 직접 다룰일이 흔치 않으므로, 이정도 까지만 알고 있으면 될것 같습니다.


오늘 포스팅은 여기까지로 하고 내일은,
WPF Overview 2번째 시간으로 왜 WPF를 사용 하면 좋은가에 대해서 말씀드리도록 하겠습니다.
질문은 메일이나 리플달아주시면 답변드리도록 하겠습니다. ^^


김대욱(kdw234@naver.com) http://kdw234.tistory.com

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 곡스
TAG MSP, SSM, WPF
WPF2008/06/27 16:14
저번 시간에 이어 WPF에 대해 알아보기 전에 준비운동으로,
이번시간에는 User Interface Trends에 대해 알아 보도록 하겠습니다.
사용자 삽입 이미지

User Interface는 지금까지 크게 3번의 과정을 통해 진화 되었습니다.
먼저 가장 간단하면서도 실용적인 PUI(Physical User Interface)가 있는데요,
PUI란 말 그대로 물리적인 UI를 뜻합니다. 일상생활에 가장 많이 접할 수 있는게 아마 PUI가 아닐가 싶은데요,
집안의 전등을 켜고 끈다거나 TV를 켜고 끈다거나 이렇게 단순한 작업을 하기 위해서 주로 사용됩니다.

그리고 PUI에서 조금더 발전 시켜 탄생한것이 CUI(Character User Interface)입니다.
CUI는 PUI의 단순 작업에서 벗어나, 사용자로 하여금 다양한 텍스트 입력을 허용하고,
이에 맞는 작업을 가능하도록 하는 방식입니다.
Dos나 Linux와 같은 방식이 CUI인데요, PUI보단 더 다양한 작업이 가능해 졌지만,
어떠한 작업을 수행하려고 할때 필요한 명령어를 모두 기억해서 일일이 타이핑 해줘야 하는 문제가 있습니다.

PUI와 CUI의 문제를 해결 하기 위해 보다 직관적이고 실용적인 GUI(Graphic User Interface)가 탄생합니다.
GUI는 현재 우리가 사용하고 있는 가장 대표적인 UI로 기능을 Graphic으로 표현 함으로서,
보다 직관적이고 다양한 정보를 전달 할 수 있습니다.

그렇다면, GUI다음의 UI는 어떤 형태일가요? 아래 그림을 통해 예측 해 볼 수 있습니다.

사용자 삽입 이미지

위 그림에서 보이는 Hardware Application의 경우 대부분 PUI를 가지고 있습니다.
그리고 Desktop Application의 경우 CUI 또는 GUI 를 가지고 있는데,
미리 설계된 형태 UI만 제공하기 때문에 이부분에서 정적이라고 볼 수 있지만,
매우 견고하고, 다양한 기능을 제공하고 있습니다.
마지막으로 Web Application은 Page단위로 UI가 변하면서,
Desktop Application보다 훨씬 동적인 UI를 구현 할수 가 있습니다.
하지만, Internet을 통해 Page를 다운로드 받아 사용자에게 표현하므로,
부하가 적은 간단한 정보를 동적으로 표현하기 위해 사용되고 있습니다.

사용자 삽입 이미지

WebApplication의 경우 HTML이나 ASP와 같은 언어를 사용하여 비교적 쉽게 개발 할 수가 있기 때문에,
개발자이 생산성이 높은 편이지만, Web이라는 공간내에서 표현할 수 있는 정보의 한계가 있기때문에,
풍부한 UX를 고려하기에는 무리가 있는 편입니다.
DesktopApplication은 Win32와 Direct3D를 사용하여 다양한 방법으로 정보를 포현 할 수 있지만,
Web과 비교해 볼때 높은 수준의 기술로 개발자의 많은 노력이 필요합니다.

WPF는 Web의 생산성과, Desktop의 풍부한 UX를 고려한 개발 플랫폼이라 할 수 있으며,
Web과 Desktop에 제한 없이 자유롭게 UX를 표현 할 수 있는 것이 특징이라 할 수 있습니다.

다음 시간 부터는 본격적으로 WPF에 대해 살펴보도록 하겠습니다.

김대욱(kdw234@naver.com) http://kdw234.tistory.com
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 곡스
WPF2008/06/26 00:47
WPF에 대해 공부 해보기 전에 준비운동겸 해서 최근 화두가 되고 있는 UX란 단어에 대해 살펴보겠습니다.
UX란 User Experience의 약어로 직역하자면 사용자 경험을 뜻합니다.
여기서 말하는 사용자 경험이란 말그대로 사용자가 가지고 있는 경험들을 의미합니다.

사용자 삽입 이미지

한가지 예로 UX를 설명하자면, 우리에게 위와 같은 통조림 캔이 주어졌다고 합시다.
그렇다면 여러분은 통조림 캔을 따기 위해서 어떻게 할가요?

대부분의 사람들은 오른쪽 그림과 같이 캔을 매끄럽고 손쉽께 딸 수 있는 도구를 떠올릴 것입니다.
하지만, 저런 도구의 존재 또는 사용법을 모르는 사람들은 왼쪽 그림과 같이 열심히 칼로
난도질(?)을 해가면서 캔을 따기 위해 노력 하려고 할것입니다.

여기서도 UX가 포함되어 있습니다.
사람들은 어떠한 문제에 직면했을때 지금까지 생활하면서의 경험적 판단을 통해 문제를 해결 합니다.

사용자 삽입 이미지

Application 에서도 UX는 예외가 아닙니다.
사용자는 Application을 사용하면서 해당 어플리케이션에 적응을 하게 됩니다.
사람들은 대부분 "편리한건 그대로, 불편한건 편하게"라는 생각을 합니다.
그렇다 보니 혁신적인 틀 보다는 기존의 틀에서 조금씩 변형 되어 가는 형태를 띄게 됩니다.

MS-DOS시절 부터 Windows Vista까지 커다란 변화가 있었지만,
그안에는 모두 사용자의 경험이 그대로 녹아 있다 할 수 있습니다.
바꿔 말하면 Application을 통해 그시대 사용자들의 생활을 짐작 해 볼수도 있을것 같습니다.

사용자 삽입 이미지

정리하자면, 개발자 입장에서의 UX란 사용자가 Application을 보고 경험적 판단을 통해 쉽고 편리하게 사용 할 수 있는가를 의미한다고 할 수 있습니다.

다음시간에는 빠른 개발 주기와 높아져가는 사용자의 요구를 위해 UX 트렌드에 대해 살펴보도록 하겠습니다.

PPT를 사용해서 포스팅을 해보는건 처음이라 약간 어색하기도 하고
글재주가 없는터라, 발표할때와 달리 작성하다 보니 약간 두서가 없는 듯한 느낌도 있습니다. ㅜ_ㅜ
(그렇다고 발표를 잘한다는건 결코 아닙니다.)

뭐 어쨋든, 다음 시간에 뵙도록 하겠습니다. 이만 집으로 ㄱㄱ


김대욱(kdw234@naver.com) http://kdw234.tistory.com
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 곡스
TAG MSP, SSM, UX, WPF
WPF2008/06/25 23:12

사용자 삽입 이미지

이번에 삼성소프트웨어멤버십 회원들을 대상으로 WPF와 관련된 내용을 교육 할 수 있는 기회가 생겨
지난 23일 부산에 내려가 WPF교육을 하고왔습니다.

교육하면서 준비했던 Presentation 자료를 보다 많은 사람들에게 공유하기 위해서 WPF카테고리를 만들었습니다.
최소한 하루에 2~3페이지 정도(PPT 슬라이드 기준)의 내용을 포스팅 할 예정입니다.

많은 관심 부탁드리겠습니다. ^^

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 곡스
TAG MSP, SSM, WPF
knowledge2008/05/18 05:33


Microsoft Silverlight VS Adobe Flex Part #1


2008 5 17

김대욱(kdw234@naver.com)

http://kdw234.tistory.com


http://farm1.static.flickr.com/200/461502165_db5cd93b39.jpg

VS

http://www.onflex.org/images/Fx.png



날로 빨라지고 있는 개발 주기와 사용자의 경험(UX)을 동시에 만족시킬 수 있도록 고안된 RIA(Rich Internet Application) 시장에 그 동안 RIA시장의 80% 이상을 차지하고 있던 Adobe Flex(Flash)에 강력한 라이벌로 Microsoft Silverlight가 떠오르고 있습니다.


Microsoft Silverlight가 기존 개발자들에게 친숙한 환경제공으로 개발자들 사이에 빠른 속도로 보급될 것이라는 의견이 있지만 다른 시작에서는 Silverlight에 비해 일찍 시작한 만큼 안정된 성능뿐만 아니라 Flash 시절 때부터 이어온 인지도 덕분에 주도권을 계속 유지할 것이라는 시각도 있습니다.


이 글에서는 필자의 경험과 웹 상의 여러 자료들을 바탕으로 Silverlight Flex에 대해 비교해보고, 이를 통해 Silverlight Flex 둘 중 어떤 것을 공부 해야 할지 고민하는 개발자들에게 조금이나마 도움이 되었으면 합니다.


본격적인 비교에 앞서 RIA에 대해 간단하게 정리하고 시작하자면 기존의 Desktop Application의 기능과 특징을 구현한 Web Application으로 기존의 복잡한 조작을 할 수 없었던 WebBrowser 기반의 Application의 한계를 극복하고 풍부한 UX(사용자의 경험)를 겸한 Application이라 할 수 있습니다.


그럼 본격적으로 Silverlight Flash(Flex)에 대해 살펴보도록 하겠습니다.


개발자와 디자이너간의 협력 작업


개발자와 디자이너는 서로 다른 세계를 살아가는 사람같다.”

디자이너와 함께 팀을 이루어 개발을 해본 경험이 있는 대부분의 개발자들이 하소연 하듯 하는 말입니다. 서로의 문제를 바라 보는 관점 자체가 다른 사람들이 일을 하다보면 서로 의사소통이나 표현의 문제로 서로 대립되는 경우도 비일비재하게 발생할 수 밖에 없기 때문입니다.


Silverlight Flex를 개발하기 위해 Microsoft Adobe가 제공하는 Tool에 대해 살펴보도록 하겠습니다.



Microsoft

Adobe

Design Tool

Expression Design

Illustrator, Photoshop

Animation Tool

Expression Blend

Flash, Flex

Web Tool

Expression Web

Dreamweaver

Media Tool

Expression Media

Primer

Development Tool

Visual Studio

Eclipse

Language

XAML


여기서 주목해야할 점은 Microsoft 제품에 사용되는 XAML이라는 언어인데요, Adobe의 제품의 경우 각각의 Format을 가지고 있어 디자이너가 Design한 결과물을 Application까지 적용시키기 위해서는 여러 번의 포멧 변환이 필요하며 이 과정에서 디자이너가 생각했던 모습되로 적용되지 않는 경우가 발생합니다.


하지만 Microsoft의 제품의 경우 XAML이라는 통일된 언어를 사용하기 때문에 디자이너가 Design한 결과물(XAML)을 그대로 변환없이 사용 가능하기 때문에 디자이너의 요구를 만족 시킬 수 있습니다. Microsoft에서는 사용자의 편의성을 높여주기 위한 일련의 활동들을 UX(User Experience, 사용자 경험)라고 정의하고 있습니다.


Microsoft Design Tool이 아직까지는 Adobe Photoshop Illustrator에 비해 화려한 Design을 하기엔 다소 무리가 있지만, 아직 초창기 버전이고 더 발전 할 수 있음을 감안할 때, 개발자와 디자이너간의 협력 부분에서는 Microsoft Expression Studio가 우세하다고 할수 있습니다.


그리고 기존 Adobe제품을 사용하면서 Microsoft 제품을 사용하길 원한다면 아래와 같은 별도의 변환툴을 사용하면 유용합니다.


l  SWF to XAML Converter(http://www.mikeswanson.com/swf2xaml)

l  Adobe Illustrator to WPF/XAML Export Plug-In(http://www.mikeswanson.com/xamlexport)

같은 결과 다른 성능

Silverlight Flex 모두 같은 RIA기술을 사용하지만 그 성능은 같지 않습니다. 어쩌면 당연한 말이지만, 여러 가지 환경에서의 그 성능의 차이는 어떻게 다르게 나타나는지 http://bubblemark.com/에서 실시한 성능 비교 자료를 참고하여 두 기술의 성능 차이에 대해 말씀 드리겠습니다. 이 실험의 목표는 같은 기능을 수행하면서, 서로 다른 기술로 구현된 RIA가 서로 다른 Browser Framework에서 어떤 차이를 보여지는 측정하기 위함이며, 실험의 사용하여 단순한 2차원 애니메이션을 통한 성능 측정 방법입니다.


실험은 화면상에 여러 개의 공들이 표시되고 공들이 서로 부딪히면서 발생하는 Animation FPS를 측정하는 방법으로 진행되었습니다. 제가 실험에 사용한 환경은 아래와 같습니다.

l  CPU : Pentium 4 3.2Ghz Desktop

l  RAM : 2048Mb

l  OS : Windows Vista Enterprise English

l  Ball Count : 16 Balls

l  Internet Explorer 7


Requirements

CPU Usage

FPS

Javascript

32%

39


Requirements

CPU Usage

FPS

Silverlight 1.1

61%

51


Requirements

CPU Usage

FPS

Silverlight 2.0 Beta

69%

173


Requirements

CPU Usage

FPS

Flex

66%

34


Requirements

CPU Usage

FPS

Flex(Cashing)

-

64


Requirements

CPU Usage

FPS

WPF

21%

93


위 결과와 같이 IE 7에서 가장 최적의 성능을 발휘하는 RIA Silverlight 2.0 Beta로 구현한 Application이였습니다. Flex의 경우 Silverlight 2.0 Beta에 비해 현저히 떨어지는 것을 확인 했습니다.


실험에 사용된 컴퓨터에 설치된 Browser IE7밖에 없어 IE7로 밖에 확인을 해보지 못해 기타 Browser에 대한 내용을 http://metalinkltd.com/ 에서 실험한 결과로 말씀 드리겠습니다.

(테스트 환경이 구축 되는 데로 실험 결과를 블로그에 업데이트 하도록 하겠습니다.)


Browser

DHTML

Flex

Flex (caching)

Silverlight 1.1

WPF

IE 6.0

56

61

90

84

99

Firefox 2.0.0.1

55

52

60-90*

58

-

Opera 9.01

94

50

100

-

-


위 결과에서 알 수 있듯이 IE에서는 Silverlight Flex보다 역시 빠른 성능을 보이는걸 알 수 있습니다. 하지만, Flex는 어느 브라우저를 사용하든지 일정한 속도를 유지하지만 Silverlight의 경우 IE일 경우 일 때와 아닐 때의 속도차이가 많이 나거나 지원하지 않는다는 것을 알 수 있습니다.


결과적으로만 봤을 때 Silverlight가 성능상이나 활용 면에서 뛰어난 것은 사실이지만, Flex에 비해 안정성이나 Cross Platform 지원 등은 불완전 하다는 것을 알 수 있었습니다.


이번 시간의 비교는 여기까지로 하며, 2부에서는 RIA .Net Framework 그리고 Action Script라는 주제로 올리도록 하겠습니다. 궁금 하신 점이나 틀린 부분은 메일이나 블로그에 남겨주시면 참고 하겠습니다.


위 성능 평가에 사용한 소스코드 및 테스트 페이지는 http://bubblemark.com/ 에서 확인 하실 수 있습니다.


크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 곡스
TAG MSP, VS