한국 Microsoft의 김대우 입니다. UX와 Silverlight에 대한 소개에 이어, 이번 시간에는 디자이너/개발자 협업을 지향하는 새로운 Microsoft의 디자인 솔루션을 소개해 드리려고 합니다. Silverlight 글에서 약속 드린 것처럼, Microsoft Expression Studio를 이용해 디자이너의 창조물을 그대로, 개발자가 어떻게 사용 가능한지, 이 작업의 전체적인 흐름과 절차가 어떻게 되는지 소개해 드리는 시간도 갖도록 하겠습니다.

디자이너와 개발자는 분명 같은 우리말을 합니다. 하지만, 이 글을 보고 계신 디자이너 분께서 느끼시는 것처럼, 실제 프로젝트를 진행할 경우에는 분명히 디자이너와 개발자가 같은 “우리말”을 쓰지만, 소통이 되지 않는 경우가 많다는 것을 느끼고 계실 것입니다. 왜 이런 상황이 발생하게 될까요? 디자이너는 창조의 산출물인 “디자인”으로 소통하려 하고, 개발자는 어플리케이션을 조직화 시키는 “로직”인 코드로 소통하려 하기 때문입니다. 앞의 글에서 잠시 설명 드린 것처럼, 디자이너의 “디자인”이 코드에서 처리되기 위해서는 다시 해체되어야만 하고 개발자의 “로직”에 의해서 재조립되는 형태로 구성되어야만 하는 것이 현재까지의 디자이너와 개발자의 어려운 협업이었습니다. 디자인 해체와 조립. 이 과정에서 디자이너와 개발자간 소통의 문제가 발생하고 프로젝트를 진행하면 할수록, 화면(페이지)이 많아지고 코드가 복잡해 질수록 디자이너와 개발자는 점점 더 멀어지게 되고 소통하기 어려워지는 상황이 발생하게 되는 것입니다.

“디자인”과 “코드”, 이 둘은 분리될 수 없는 것일까요?

디자인과 코드를 분리하기 위한 시도는 계속되어 왔습니다. 하지만, 분리의 정도는 잘 알고 계신 것처럼, CSS와 HTML의 분리, 데스크탑 응용프로그램의 경우 코드 로직(Code Behind)과 리소스(Resource)의 분리와 같은 많은 시도가 있었지만, 디자이너의 창조적인 결과물은 결국 어떤 형태로든 해체되어 조립 되는 것이 지금까지의 현실이었습니다. 또한, 디자이너의 창조적이고 감성적인 시도는 결국 기술과 툴의 “한계”에 막혀 응용 프로그램에 제대로 반영되지 못하는 문제가 있었지요.

바로 이러한 구조 입니다.

디자이너의 최초 디자인이 기술과 툴의 한계에 막혀 최초 의도한 디자인과는 전혀 다른 결과물을 받을 수 밖에 없었던 것이 지금까지의 현실입니다. 기술과 툴의 한계라는 것은 다르게 말씀 드려서, 디자인과 코드가 완전하게 분리되지 못했기 때문이기도 합니다. 다시 우리의 화두인 디자이너가 디자인한 결과물을 “그대로” 코드에 반영하는 방법은 없을까요? 디자이너의 “창조적인 노력”이 사용자에게 그대로 전달되기 위한 방법은 없는 것일까요?

XAML을 쓰시면 가능합니다.

바로 XAML이 이러한 디자인과 코드의 완전한 분리를 가능하게 하고, 디자이너와 개발자간 협업 해결책을 제시합니다.

디자이너의 디자인 화면입니다. 이 화면을 아래처럼 XAML로 표현 가능합니다.

디자이너의 디자인이 XAML로 표현된 화면

저런 복잡한 화면도 모두 XAML로 표현이 가능합니다. - 복잡한 화면뿐만이 아닙니다. 우리가 눈으로 볼 수 있는 모든 시각적인 처리를 XAML로 표현 가능합니다. 2차원 그래픽뿐 아니라, 3차원 그래픽까지, 모두 다 XAML로 표현이 가능합니다.
즉, XAML을 이용하면 모든 종류의 표현(Presentation)을 표준 XML구조의 텍스트 파일로 기술 가능하며, 개발자가 이 코드를 전달받아 개발 툴에서 이용 할 수 있다면? 완전한 디자인과 코드의 분리가 가능하고 우리 디자이너의 창조적인 결과물을 그대로 최종 결과물에서 사용 가능하게 됩니다. – 더 이상 디자이너와 개발자간 소통의 문제는 발생하지 않습니다!!!

XAML은 현재 소개해 드리는 Silverlight 뿐 아니라, WPF라는 현재 가장 향상된 UX를 제공 가능한 데스크탑 응용 프로그램을 구현 하실 때에도 마찬가지로 사용 가능합니다. 즉, Silverlihgt과 WPF는 물론, 앞으로 계속해서 구현될 응용 프로그램은 이 XAML을 통해 디스플레이 표현이 제작될 것이고 디자이너의 디자인이 그대로 어플리케이션에 적용 될 수 있다는 것을 의미 합니다. 타 업체들의 다양한 노력도 계속되고 있습니다. 현재 다양한 그래픽 소프트웨어나 CAD소프트웨어, 2D그래픽이나 3D 그래픽을 모두 XAML로 표현가능하기 때문에 프리젠테이션으로 구현되는 응용프로그램들이 대부분 XAML로 변환 가능합니다. 현재 나와있는 XAML로 변환 가능한 변환 소프트웨어(Converter)가 나와 있으며 Adobe Illustrator와 같은 툴은 물론이고, Maya, 3DS, DWG/DXF, Flash(대부분의 그래픽 표현), Fireworks, ZAM 3D, LightWave 3D와 같은 주요한 그래픽 포맷들이 모두 XAML로 변환 가능하며 Silverlight이나 WPF와 같은 응용 프로그램 개발에서 사용 될 수 있습니다. 또한, XAML은 Microsoft의 Expression이나 Visual Studio로 디자인 및 개발만 가능한 게 아닙니다. XAML은 XML형태의 Text데이터로 표현되며 명세서가 이미 웹에 공개되어 있고 표준화 절차가 진행 중입니다. XAML의 가능성을 먼저 예측한 다양한 업체에서 XAML 디자인 및 개발 툴을 구현하고 있으며 Aurora XAML Designer(완성된 상용 XAML 디자인 툴)은 이미 개발이 완료되어 상용화가 되어 있습니다. 특정 비즈니스나 디스플레이에 특화된 XAML 디자인 툴까지 계속 발표되고 있으며 다른 모든 그래픽스나 설계, 디자인 업체 역시 XAML을 지원하기 위해 노력하고 있습니다.

네, 어플리케이션 디자인과 표현의 패러다임이 XAML로 한 단계 더 진화한 것입니다. 그렇습니다. 분명, XAML을 이용한 디자인과 코드의 분리는 지속적으로 XAML과 새로운 어플리케이션 개발 방법의 발전을 이끌어 나갈 것으로 저는 믿고 있습니다.

XAML의 가치와 장점, 그리고 미래에 대해서 간단히 말씀 드렸습니다. 그렇다면, 다음으로는 Microsoft Expression Studio를 이용해 어떻게 효율적으로 디자인을 생성하고, XAML을 넘어 디자이너의 창조적인 디자인을 개발자에게 전달 가능한지 설명 드리도록 하겠습니다.

혁신적인 벡터 드로잉 아트웍
유연한 Vector 드로잉과 강력한 Bitmap 이미지 처리를 Expression Design에서 하나의 디자인으로 작성 가능합니다. 현존하는 다양한 그래픽 툴들과 비교해도 손색 없을 정도로 강력하고 다양한 기능들을 모두 지원합니다.

다이나믹한 이펙트 효과 제공
다양한 동적이고 화려한 효과들을 사용 가능합니다. 특히, Bevel, Emboss, Gaussian Blur 효과 등을 Vector 드로잉이나 Bitmap 이미지에 모두 처리 가능합니다.

혁신적인 디자인 환경
다양한 기존의 Vector 기반 아트웍이나 그래픽 툴의 결과물, 다양한 포맷의 Bitmap 이미지를 Import하거나 Export해 사용 가능하며, 새로운 Presentation 레이어 구현을 위한 XAML로 Export가 가능해 디자이너가 만든 디자인을 아무런 손실 없이 개발 툴과 통합 가능한 Expression Blend로 전달하면 즉시 개발자와 협업 진행이 가능해 다음 세대의 응용 프로그램 디자인을 손쉽게, 아무런 디자인 손실 없이 구현 가능합니다.
이 Expression Design을 이용하시면 이렇게 기존의 디자인 툴들이 제공하는 다양한 기능들을 하나의 툴에서 모두 구현 가능해 기존의 제품들보도 더 빠르고 손쉬운 방법으로 디자인 결과물을 생성 가능합니다. 추가적인 핵심 기능으로, 구현한 디자인을 XAML로 내보내기(Export)가 가능하기 때문에 Expression Blend 제품에서 XAML을 조합하는 작업도 수행 가능합니다.

다양한 컨텐츠 결합으로 창조적이고 인터렉티브한 어플리케이션 디자인
다양한 Bitmap 이미지나 Ventor 드로잉, 비디오 동영상, 오디오, 텍스트, 정의된 컨트롤뿐 아니라 3D 컨텐트와 애니메이션 조합해 창조적인 사용자 인터페이스를 제작 가능한 툴입니다.

코드 작성이 필요 없는 인터렉티브 디자인 환경 제공
특히, 디자이너를 위한 “Codeless”코드 작성이 필요 없는 인터렉티브 디자인 환경을 구현 가능하며 디자이너가 컨트롤들을 손쉽게 조합해 생성하는 것도 지원하며 개발자가 작성한 코드나 컨트롤을 드래그 앤 드롭으로 Expression Blend에서 인터렉티브 디자인에 추가가 가능합니다. 또한, 외부의 데이터나 인터페이스도 그대로 가져와 연결이나 통합이 가능하고 다양한 스크린 크기에 맞는 인터렉티브한 어플리케이션 인터페이스 제작도 지원합니다.

효율적인 디자이너 개발자간 협업 지원
Expression Design 툴에서 가져온 XAML을 이용해 Expression Blend에서 조합하고 개체들에 대한 동작이나 다양한 속성들을 구현합니다. 마찬가지로 Expression Blend도 XAML로 이 기능들을 구현합니다. Expression Blend는 개발자와의 완전한 협업작업을 지원하며 XAML을 Visual Studio와 공유하기 때문에 디자이너의 디자인을 아무런 손실 없이 그대로 개발자에게 전달 가능합니다. 또한 Visual Studio와 완전히 같은 프로젝트 구조를 사용하기 때문에 다른 추가 작업 없이 지속적인 개발자간 협업이 가능합니다. 바로 XAML과 Expression 디자인 솔루션이 디자이너와 개발자간 완전한 협업을 가능하게 하는 것입니다.

최상의 UX 구현을 위한 디자인 환경 제공
또한, 궁극적으로 최적의 사용자 경험(UX)를 전달하기 위한 다양한 인터렉티브 기능이 추가 되어 있고, 전세계의 사용자를 위한 글로벌화 기능 역시 기본적으로 탑재되어 최적화된 사용자 경험을 사용자에게 전달 가능합니다.

비주얼 카탈로그 기능 지원
미디어는 더 이상 단순한 비디오 동영상이나 음악을 의미하지 않습니다. 미디어는 이제 회사의 가장 중요한 자산이 되어 가고 있습니다. Expression Media를 이용하시면 100개가 넘는 다양한 미디어 포맷을 통합해 효과적으로 미디어 자산을 관리 하실 수 있습니다. 또한, 미디어들에 대한 전체화면 미리 보기나 다양한 저장소 선택 및 전달이 가능하며 전달 과정을 추적하는 작업도 가능합니다. 또한 미디어가 네트워크에 존재하고 있으나, 시스템의 연결이 단절될 경우에도 Expression Media의 Visual Catalog 기능을 이용해 브라우징, 검색, 미디어 자산 주석 기능을 사용 가능합니다. 대용량 미디어에 대한 작업을 위해 미디어들을 다양한 형태로 검색, 정렬, Batch를 이용한 변환, 스크립팅을 통한 유연한 작업을 지원합니다.

미디어에 대한 인코딩 기능 지원
이미지나 비디오에 대한 편집 기능도 기본적으로 제공하며 전문적인 출판 비즈니스에서 사용 가능한 전문적인 양식과 사용자 정의 스타일도 지원하며 동영상 미디어의 경우 Silverlight에서 즉시 사용 가능한 형태의 변환 작업 역시 수행 가능합니다.

표준 기반 웹사이트 제작이 가능하며, 지원하지 않는 태그에 대한 자동 오류 보고 기능 제공
표준 기반 웹사이트 제작이 가능한 새로운 Microsoft의 웹페이지 저작 도구 입니다. CSS기반, XHTML1.0 기반 웹사이트를 기본적으로 지원합니다. 손쉬운 배포와 유지 관리가 가능한 장점이 있으며 HTML/XHTML/Strict/Transitional/Frameset and CSS 1.0/2.0/2.1을 기본적으로 지원하고 브라우저 특화 스키마 역시 지원합니다. 웹사이트에 대해서 자동적으로 CSS나 호환성 기능 등, 다양한 로직을 검사하는 루틴이 포함되어 있어서 표준 웹사이트 제작을 손쉽게 진행 가능한 장점이 있습니다. 특히 CSS 저작기능 강화로 최신 스타일의 CSS 레이아웃을 구현 가능하고, css의 속성들을 드래그 앤 드롭 기능으로 빠른 적용이 가능합니다. CSS가 적용된 페이지 디스플레이 및 저작 기술도 향상되어 새롭게 적용되거나 변경된 CSS를 페이지에서 직접 보면서 작업도 가능합니다.

ASP.NET의 데이터 바인딩 기능을 웹 페이지 저작에서 통합한 화면
또한, 풍부한 데이터 표현 기술이 추가되어 표준 데이터를 드래그 앤 드롭으로 빠르게 비주얼한 형태의 데이터 표시가 가능하며, XPath Expression Builder를 이용해 복잡한 XPath 질의와 XSLT를 통한 XML 데이터 디스플레이를 지원합니다.
ASP.NET과 같은 서버측 기술과 연동되어 인터렉티브한 웹 어플리케이션 개발이 가능합니다. ASP.NET의 서버측 컨트롤들을 페이지에 바인딩할 수 있으며, ASP.NET의 Master 페이지를 이용해 동적이고 양식화된 웹사이트 개발이 가능합니다.

이번 글에서는 Expression Studio 제품들에 대해서 알아 보았습니다. Expression Design을 이용해 디자인 요소를 만들고, 작성한 디자인 요소들을 Expression Blend에서 그대로 사용하거나, 여러 요소들을 조합 할 수 있습니다. 또한 Blend에서 개체에 대한 동작이나 속성도 코드 작성 없이 구현이 가능한 장점이 있습니다. 이렇게 만들어진 Expression Blend의 프로젝트는 Visual Studio 개발환경과 완전히 통합되기 때문에 디자이너와 개발자의 완전한 협업을 가능하게 합니다.
추가적으로, Expression Media를 이용하시면 미디어 자산의 다양한 조직화를 구현 가능해 효율적인 미디어 관리가 가능하며, 동영상 미디어도 손쉽게 다양한 형태로 변환 가능합니다. 끝으로 Expression Web 제품은 표준 CSS기반 웹사이트 저작에 사용되는 툴이며 표준 기반 웹사이트 구현 및 데이터 처리를 전문 개발 툴 없이 Expression Web 저작 툴에서 구현 가능한 장점이 있습니다.


UX에 대한 소개에 이어 Microsoft Silverlight 기술과 Microsoft Expression 디자인 솔루션에 대해서 설명 드렸습니다.
다음은 “웹을 넘어 Service로, 소프트웨어 + 서비스(Software + Service)”에 대한 글로 인사 드리도록 하겠습니다.