通过

디자인과 로직 분리하기 - WPF, Sparkle, 그리고 등등등

  • 项目

윈도우 Vista - Longhorn 과 함께 많이 나돈 얘기중 하나가 WPF - Avalon 이다. 뭐 나 처럼 그냥 쓰는 사람으로썬 애플 처럼 멋진 그래픽을 OS에서 볼수 있다는것 자체만으로도 Avalon - WPF 은 매력적이기만 하다. 사실 뭐 성능 향상이나, 내부적인 구조 보다, 외적으로 멋진게 더 눈을 끄는건 사실이니까 말이다. 연기 잘하는 배우 나오는 영화 보다, 이쁜 배우 나오는 영화 포스터에 더 눈길이 가듯이 ...

하여간, 그렇게 외적인 거에만 신경을 쓰다, 갑자기 정확히 Avalon - Windows Presentation Foundation - 이 뭘까 하는 생각에 오늘 이것 저것 좀 읽어 봤다.

일단, 읽고 나니, 흐.. 이거 꽤 물건이다 ㅡ.ㅡ

일단 WPF 는 윈도우 어플리케이션을 Web 어플리케이션 만들때 처럼 UI를 보다 쉽게, 보다 멋지게, 보다 효과적으로 만들기 위한 Framework다. 그럼 단순히 여러가지 미리 만들어진 쿨한 그래픽 툴셋이냐. 그건 또 아니다. WPF는 멋진 UI를 만들기 위한 Framework일 뿐 아니라, 또한 디자인과 로직을 분리시키기 위한 기본 뼈대를 제공해 준다.

일단 WPF로 만들어진 데모를 한번 보기 바란다. 죽이지 않나?

일반적으로 이런 프로그램을 만들기 위해선, 보통 프로세스가, 스토리 보드를 만들고, 디자이너가 디자인을 하면, 프로그램머가 그 디자인을 코드로 재현하고, 스토리 보드에 따라 진행시킨다. 여기서 디자이너가 만든 디자인을 프로그램머가 코드로 재현 하는것도 작은 일이 아니다, 많이 봐줘서 그래도 여기 까진 좋다, 그런데 만약, 스토리 보드가 바뀌거나, 다자이너가 디자인을 바꾸면, 프로그램머는 한마디로 뺑이 까게 된다.

이유는 프로그램머가 다른 사람들이 하는 모든 일을 다시 해야 하기 때문이다. 다시 말하면 코드와 그 외의 것들이 너무 타이트하게 접목 되어 있어서, 일단 프로그램머가 손을 대고 나면, 프로그램밍 지식이 없는 사람들은 건들지는 못하게 된다.

WPF는 이런 문제를 해결할 실마리를 제공한다. 그 중심에는 XAML이라는 언어가 있다. 이건 프로그램밍 언어 라기 보단 presentation 언어이다. HTML과 비슷하다고 보면 된다.

하여간 이 XAML을 중간 매체로, 기획자, 디자이너, 프로그램머가 서로 독립적으로 일할수 있게 되는거다.

WPF를 이용해서 프로그램밍을 하는 순서를 기존 방법과 비교를 하면, 스토리 보드를 만들고 - 여기서 각 컴포넌트와 이펙트를 정의 한다 - 디자이너가 디자인을 하고, 프로그램머가 이펙트 혹은 로직을 프로그램밍하게 된다. 이렇게만 보면 비슷한거 같지만, 일단 프로그램머가 디자이너가 만든 디자인을 코드로 재현 하지 않아도 되고, 프로그램머가 디자인을 건들지 않으므로, 디자이너가 디자인을 고칠때 프로그램머의 도움이 필요 없어진다. 다시 말해, 모든 사람들이 독립적으로 일 할수 있게 되는거다.

Web 프로그램밍을 해 본 사람들 중에 Template 베이스 혹은 component 베이스 웹 프로그램밍을 해본 사람들은 무슨 말인지 알꺼라 생각한다. 하지만 역시 말만하면 잘 이해가 안가니, 실제 제품을 예를 들어 설명을 하면,

WPF와 같이 발표 되는 제품중에 Expression 이라는 제품이 있다. 이 제품군은 사용자가 XAML을 직접 손으로 쓸 필요 없이  플레쉬와 비슷한 개발툴을 제공하여 전문 디자이너들이 UI를 개발하고 테스트 할 수 있게 해 준다. 일단 전문 디자이너 - 예를 들어 플래쉬 디자이너 - 가 디자인을 끝내면, 그 디자인을 XAML로 저장한다.

프로그램머는 그 XAML을 WPF에서 제공하는 기능을 통해 읽어 들이는 것만으로 디자이너가 위의 제품에서 디자인한것과 똑같은 UI를 프로그램에서 구현할수 있게 된다. 따라서 프로그램머는 Logic에 더 포커스를 둘수 있게 된다. 실제 코드와 XAML은 Binding을 통해 서로 메세지를 주고 받고, event를 보내고 받게 된다.

만약 디자인이 수정 되면, 단순히 다시 XAML을 읽어 들이고, 달라진 부분만 새로 Binding 시키는 것 만으로 디자인 수정은 끝나게 된다.

아직도 이해 안가면, 위에 Expression 링크에 가서 함 읽어 보기 바란다.

그럼 오늘은 여기 까지 수고.

Comments

  • Anonymous
    January 21, 2007
    좋은 자료 감사합니다 참고 하도록 하겟습니다.