Microsoft Expression Design을 사용해 보신 분이 있으신지요?

저는 개인적으로 WPF를 매우 좋아합니다. 뭔가 좀 더 예쁘게 만드는 것을 좋아하는 저에게는 최고의 개발 프레임워크라고 할 수 있습니다.

가끔씩은 WPF에 들어갈 벡터 그래픽을 제가 직접 그리는 일도 있습니다. 회사에 디자이너가 따로 없기도 하고, 대부분의 그림들이 외주를 줄 정도의 복잡도가 없었기 때문에 간단한 기본 도형들을 기반으로 합치기, 빼기, 교차 등의 조합 연산을 이용해서 직접 그릴 때가 종종 있습니다. 그럴 때마다 저는 무료로 쓸 수 있는 Microsoft Expression Design 4와 Inkscape를 주로 사용하곤 했습니다.

특히 Expression Design은 아주 심플하게 접근할 수 있고, Visual Studio의 WPF 디자이너와 클립보드가 호환되기 때문에 더 자주 사용하는 편입니다. 물론 Blend for Visual Studio도 좋지만, 개인적인 경험상 그림 자체를 관리하는 도구로서 Expression Design을 더 편리하게 쓴 것 같습니다.

저에게는 너무나 편리한 도구지만, 어디까지나 개개인의 익숙함의 차이일 수도 있습니다. 어떤 분들은 Inkscape가 더 익숙할 수도 있겠지요. 하지만 XAML 기반 UI 개발자 분들에게 감히 추천할만하다고 생각합니다.

그 이유는 Ctrl + Shift + C 단축키를 이용한 XAML 복사 기능이 있기 때문입니다.
예를 들면 다음과 같이 여러 색상으로 된 벡터 그래픽을 만들고 나서,

여러 객체를 동시에 선택하고,

Ctrl + Shift + C 단축키를 누른 후 메모장에 붙여넣기 해보면,

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="레이어_1_15" Width="128" Height="128" Canvas.Left="0" Canvas.Top="0">
    <Path Width="90" Height="70" Canvas.Left="19" Canvas.Top="29" Stretch="Fill" Fill="#FFD0FDFF" Data="F1 M 28,29L 100,29C 104.971,29 109,33.0294 109,38L 109,90C 109,94.9706 104.971,99 100,99L 28,99C 23.0294,99 19,94.9706 19,90L 19,38C 19,33.0294 23.0294,29 28,29 Z "/>
    <Ellipse Width="16" Height="16" Canvas.Left="39" Canvas.Top="38" Stretch="Fill" Fill="#FFFFEF56"/>
    <Path Width="70.3179" Height="35.1406" Canvas.Left="19" Canvas.Top="63.8594" Stretch="Fill" Fill="#FF6DFFA4" Data="F1 M 28,99L 89.3179,99L 44.9445,66.0155C 40.9554,63.0502 34.3444,63.1567 30.1784,66.2534L 19,74.5628L 19,90C 19,94.9706 23.0294,99 28,99 Z "/>
    <Path Width="87.6653" Height="43.1406" Canvas.Left="21.3347" Canvas.Top="55.8594" Stretch="Fill" Fill="#FF22D566" Data="F1 M 109,90L 109,74.4102L 86.9445,58.0155C 82.9554,55.0502 76.3444,55.1567 72.1785,58.2534L 21.3347,96.0477C 22.9811,97.8612 25.3576,99 28,99L 100,99C 104.971,99 109,94.9706 109,90 Z "/>
</Canvas>

이렇게 XAML 코드로 나타납니다. 디자이너 지원이 미흡한 .NET Rider나 Visual Studio Code, WinUI 3, Avalonia UI 등으로 개발할 때도 꽤 유용하게 사용할 수 있을 듯 합니다.

Expression Design은 원래 Microsoft Expression Studio에 포함되어 있었지만, 언젠가 갑자기 Microsoft Expression Studio가 단종되고, 2012년쯤에 Microsoft Expression Design 4가 무료로 풀리게 되었습니다.

예전에는 Microsoft 웹사이트에서 다운로드 받을 수 있었는데 이제는 Microsoft에서 관리를 하지 않고 있는 것 같습니다. 대신 Lee Englestone라는 분이 무료 버전 설치 파일을 다운로드 받을 수 있도록 개인 사이트를 운영 중입니다. 아무래도 저처럼 Expression Design의 광팬인 것 같습니다.

참고로 위 사이트에서는 영문 버전만 있고 한국어 버전을 받을 수는 없습니다. ‘어? 설마 한국어 버전을 나만 가지고 있는 것은 아닌가?’ 하는 생각에 혹시라도 한국어 버전을 사용해 보고자 하실 분들을 위해 공유해봅니다. 참고로 설치 패키지에 한국어로 된 도움말 파일도 제공하고 있습니다.

Design_Trial_ko.exe

블로그 원문: XAML 기반 UI 개발자의 벡터 그래픽 편집 도구에 대한 고찰

8개의 좋아요

WPF로 복잡한 디자인, 특히 아이콘이나 Shape 작업하다보면 디자이너가 작업한 AI 파일에서 가져와야 한다던지 하는 경우에 XAML로 변환할 수 있다는 점에서 매우 좋은 프로그램입니다. 저는 오래 전부터 아주 잘 사용해오고 있네요.

특히 일러스트레이터와 같이 디자인 쪽에 더 중점을 두고 작업하는 경우 AI와 비슷하게 사용할 수 있어서 좋습니다. 이게 왜 중요하냐면 숙련된 디자이너 분이시라면 Expression Design 사용법은 금새 배우실 수 있기도 하고, 디자이너가 아닌 개발자도 디자인 센스만 좀 있다면 기존 디자인 리소스와 조합하여 예쁜 xaml을 만들어낼 수도 있죠.

WPF 3부터 해와서 그런지 Expression Design으로 디자인 시안 및 아이콘 등을 만들어서 xaml화 하고, Expression Blend로 디자인 및 애니메이션 작업하고, Visual Studio로는 코드를 만든 형태로 작업을 하고 있고, 이 방식에 익숙해져서 Visual Studio 2022를 포함한 모든 Visual Studio 버전에서 이렇게 작업하고 있습니다.

6개의 좋아요

덧붙임 1. 혹시나 해서 찾아봤는데, Expression 시리즈는 Visual Studio 구독에서도 현재 내려간상태라, 구하기 어려운게 확실한 것 같습니다. :sob:

덧붙임 2. 이런 포지션의 OSS 프로그램은 Gimp Inkscape가 있긴한데, 개인적으로 Windows용 Gimp는 macOS 버전에 비해 유난히 성능이 떨어진다는 느낌이 있어서 매우 아쉬운데, Expression Design이 정확히 여기에 대응이 되는 것 같습니다.

덧붙임 3. Windows 11 ARM64 환경에서도 매우 잘 작동합니다. 애플 실리콘 맥북 쓰시는분들께서는 패러렐즈 안에 윈도우 VM 만들어서 쓰셔도 잘 쓰실 수 있을겁니다. :smiley:

3개의 좋아요

네 맞습니다. 블로그 글에는 적어놨는데 여기서는 빼먹었네요. ㅎㅎ
.ai 파일을 불러오는데 생각보다 안정적으로 불러와집니다.
가끔은 좀 더 고급 디자인 기능을 쓰기 위해 Inkscape를 쓸 때도 있는데, Inkscape에서는 오류가 나던 .ai 파일이 Expression Design에서는 정상적으로 불러오는 경우도 있었습니다.
그만큼 잘 만들어진 프로그램인데 Microsoft에서 더 이상 관리를 안 해줘서 좀 아쉽습니다.
뭣보다, 패스 조합 연산에 대한 단축키가 있으면 정말 좋겠다는 생각이 들어서요… ㅎㅎ

1개의 좋아요

무료로 풀린 지 10년도 넘어서 이제는 희귀품이 되어버린 것 같습니다… :cry:

제 개인적인 생각으로는 Gimp 보다는 Inkscape가 좀 더 가깝지 않을까 합니다.
래스터 그래픽에 강력한 포토샵은 Gimp가 대신하고,
벡터 그래픽에 강력한 일러스트레이터는 Inkscape가 대신하는 것 처럼요. ㅎㅎ
Expression Design는 벡터 그래픽 저작 도구에 더 가깝다고 생각됩니다.
물론 Gimp처럼 Inkscape도 약간 무거운 감이 있지요… :grinning:

3개의 좋아요

궁금한게 있습니다.

  1. 벡터 그래픽은 어떻게 그리시는지 알수있을까요 ?
  2. Expression Design4 에서는 img 파일을 path 나 vector data 추출하는게 안되는게 맞나요 ?

이전에 gimp나 inkscape 에서는 이미지 내에서 path 추출을 했었던 기억이 있어서 문의 드립니다.

ctrl+shift+c 의 기능은 정말 써보고싶어져서용

1개의 좋아요

제 경우는 보통 사각형과 타원 같은 기본 도형을 회전하거나 해서, 합치기, 빼기, 교차 등의 작업으로 그린 후에, 점을 직접 선택하여 수정하거나 펜 툴로 점을 추가해서 수정하기도 합니다.
닫기나 취소 버튼에 들어갈 × 모양을 만든다고 치면, 모퉁이를 약간 깎은 길쭉한 사각형 하나 그려 놓고 45도 회전, 하나 더 복사해서 -45도 회전한 후 합치기 정도가 되겠습니다.

네, 안됩니다. 그런 경우에는 Inkscape에서 추출한 뒤 WMF(Windows 메타파일)로 저장하고 Expression Design에서 WMF 파일을 불러와서 쓰고 있습니다.
이것도 블로그 글에 적어 놨는데 여기에는 요약해서 적느라 빼먹었네요… ㅎㅎ

정정합니다. 되긴 됩니다. 웬만하면 직접 그리는게 버릇이라 저도 헷갈렸습니다. ㅋㅋㅋ

참고하세요~ㅎㅎ

3개의 좋아요

Inkscape가 맞습니다. 햇갈렸네요 ㅋㅋㅋ

Inkscape가 macOS와 Windows의 성능 차이가 매우 심하게 나는걸 경험했었습니다. ㅎㅎ

3개의 좋아요

이런 거 직접 그리시는 분들 보면 신기하고 존경스럽습니다.

5개의 좋아요