Ubuntu on Windows 10으로 GTK# 응용프로그램 개발해보기

Windows 10의 대규모 업데이트에서 개발자들에게 주목을 받고 있는 기능들이 여러가지가 있습니다. 그중에서도 Ubuntu on Windows 10에 대한 관심이 많이들 있으실텐데, 이번 아티클에서는 저 나름대로 찾아본 Ubuntu on Windows 10을 이용한 GTK# 기반의 클라이언트 응용프로그램 개발 방법을 소개해보려고 합니다.

왜 Ubuntu on Windows 10인가?

VM을 사용할 때의 이점은 완전히 독립된 환경을 만들 수 있다는 것이지만, 달리 표현하면 관리해야 할 컴퓨터의 숫자가 늘어난다는 것을 의미하기도 합니다. Ubuntu on Windows 10이 돋보이는 이유는 바로 간편성에 있습니다.

Ubuntu on Windows 10은 Subsystem for Linux 라는 새로운 기능 위에서 작동합니다. 과거에 서버용으로는 Subsystem for Unix라는 기술이 있었는데, 이 때와는 다르게 Windows 운영 체제의 환경과는 분리된 샌드박스된 환경 위에서 실행되고, 바이너리 수준의 호환성을 보장한다는 것이 차이점입니다. 그렇기에 실용적으로 기능을 활용할 수 있고, 호스트로 실행되는 Windows 운영 체제의 안정성을 해칠 만한 상황을 최소화할 수 있어 마음놓고 사용할 수 있습니다.

Ubuntu on Windows 10으로 할 수 있는 일

Ubuntu on Windows 10은 실제 Ubuntu Linux와는 다릅니다. 어디까지나 User Mode에서 실행되는 바이너리 파일에 대한 실행 환경만을 보장할 뿐, 프로덕션 환경에서 실행될 서버를 띄우거나, Windows Shell을 대체하기 위한 목적, 혹은 커널 드라이버 개발 등의 목표를 가지고서는 사용이 쉽지 않고 불편합니다.

VM 없이 Ubuntu Linux에서 실행해볼 필요가 있는 응용프로그램을 사용하거나 테스트하기 위한 용도로만 초점이 맞추어져야 하며, 아티클에서 다루는 모든 내용은 “개발과 테스트”를 전제로 합니다.

준비할 사항

Ubuntu on Windows 10을 시스템에 이미 설치하셨다는 것을 전제로 이 아티클을 참조하여 주십시오. 자세한 설치 방법은 이곳을 참조하여 주십시오.

이 글을 작성한 2016년 8월 현재, Windows 10의 1주년 업데이트가 정식으로 나온 현 시점까지도 Ubuntu on Windows 10과 서브 시스템은 베타 상태에 있습니다. 그리고 이와 관하여 한국어 지원 역시 완전하지 않습니다.

Subsystem을 설치한 후에 Ubuntu on Windows 10을 lxrun으로 처음 설치하실 때에는 Windows 사용자 계정 이름이 영어로 되어있는 것을 춴합니다. 또한 콘솔에서 한국어 출력이 자연스럽지 않은데, 개인적으로는 로캘 설정을 시스템 기본 설정 대신 영어와 UTF-8 인코딩 셋으로 변경하시는 것을 권해드립니다. 변경하려면 bash 셸을 실행한 다음 아래 명령어를 입력합니다.

sudo update-locale LANG=en_US.UTF8

입력한 다음 bash 셸을 종료하고 다시 시작하면 모든 표시 언어가 미국 영어로 변경되어 나타나게 될 것입니다.

Mono 설치하기

.NET Core의 런타임이 RTM이 출시되었지만 그동안 크로스플랫폼 기반 .NET 개발의 중추적인 역할을 담당하고 있었던 것은 Mono 프레임워크였습니다. 현재까지도 우리가 필요로 하는 대다수의 기능은 .NET Core가 아니라 여전히 Mono 기반이며, .NET Core에서도 자체 런타임 대신 전체 버전의 .NET Framework가 필요한 경우 Mono을 사용하므로 여기서는 Mono의 설치를 먼저 다루도록 하겠습니다.

Ubuntu on Windows 10에 제공되는 Ubuntu Linux는 14.04 (trusty) 버전이며, 버전을 확인해보면 다음과 같습니다.

root@DESKTOP-R1OP5CI:/mnt/c/Users/rkttu# lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 14.04.4 LTS
Release:        14.04
Codename:       trusty

14.04 버전을 기준으로 Mono를 설치하는 과정을 진행해보도록 하겠습니다. Mono 최신 버전은 운영 체제가 제공하는 패키지 저장소가 아닌 자체 저장소를 통해서 다운로드해야 설치가 가능한데, Ubuntu 계열 운영 체제를 위한 저장소를 사용한 설치 방법 안내 페이지는 이곳을 참조합니다.

아래 명령어를 실행하여 외부 패키지 저장소를 시스템에 등록합니다.

sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF
sudo echo "deb http://download.mono-project.com/repo/debian wheezy main" | sudo tee /etc/apt/sources.list.d/mono-xamarin.list
sudo echo "deb http://download.mono-project.com/repo/debian wheezy-apache24-compat main" | sudo tee -a /etc/apt/sources.list.d/mono-xamarin.list
sudo apt-get update

그 다음, mono-complete, referenceassemblies-pcl, monodevelop 그리고 xinit 패키지를 아래 명령어를 실행하여 설치합니다. X-Windows 환경도 이 과정에서 종속성 체인에 의하여 모두 설치가 이루어지므로 디스크 공간 사용량이 크게 늘어나니 주의해야 합니다.

sudo apt-get install mono-complete referenceassemblies-pcl monodevelop xinit -y

긴 설치 과정이 모두 끝나면 다음 명령어를 실행하여 mono와 mcs 컴파일러가 최신 버전으로 설치되었는지 확인합니다.

rkttu@DESKTOP-P834HKI:/mnt/c/Users/rkttu$ mono --version
Mono JIT compiler version 4.4.2 (Stable 4.4.2.11/f72fe45 Fri Jul 29 09:58:49 UTC 2016)
Copyright (C) 2002-2014 Novell, Inc, Xamarin Inc and Contributors. www.mono-project.com
        TLS:           __thread
        SIGSEGV:       altstack
        Notifications: epoll
        Architecture:  amd64
        Disabled:      none
        Misc:          softdebug
        LLVM:          supported, not enabled.
        GC:            sgen
rkttu@DESKTOP-P834HKI:/mnt/c/Users/rkttu$ mcs --version
Mono C# compiler version 4.4.2.0

MonoDevelop 실행을 위한 설정

이제 개발 환경의 준비는 모두 마무리했고, X Window를 실행하기 위한 준비를 해야 합니다. Windows OS에서는 Xming 서버라는 X Window 호환 서버를 설치할 수 있으며 Ubuntu on Windows에서 쉽게 연결할 수 있습니다.

https://sourceforge.net/projects/xming/ 에서 최신 버전의 Xming 서버를 우선 설치하도록 합니다. 설치 후에는 직접 Xming 서버를 한 번 실행하여 아래 그림과 같이 트레이에 실행 중인 모습을 확인해야 합니다.

Xming 서버와 연결하는 설정을 현재 세션에서만 사용하려면 터미널에서 다음 명령어를 입력하면 됩니다.

export DISPLAY=:0

그리고 위의 명령어를 현재 로그인한 사용자에 대해서만 항상 적용하려면 아래 명령어를 실행하여 bashrc 파일에 내용을 저장하고 bash 셸을 다시 시작합니다.

nano ~/.bashrc

설정을 적용한 다음에는 아래 명령어를 실행합니다.

monodevelop

잠시 기다리면 아래 그림과 같이 Windows 10에서 리눅스 버전으로 실행되는 MonoDevelop의 화면이 보입니다.

계속하기 전에, 사용 상의 편의를 위하여 단축 키 바인딩과 글꼴을 Visual Studio에 가깝게 변경해보겠습니다. Edit – Preference 메뉴를 선택한 다음, Environment – Key Binding에 가서 Visual Studio 템플릿을 선택하고, Font에서 원하는 서체와 크기를 지정합니다.

만약 나눔고딕코딩 같은 서체가 필요하다면 다음의 명령어를 실행하고 MonoDevelop을 다시 실행하여 서체 목록을 보면 목록에 표시될 것입니다. D2Coding과 같은 서체는 수동으로 OTF나 TTF 파일을 설치하는 방법을 설명하는 가이드를 참고하시면 되겠습니다.

sudo apt-get install fonts-nanum fonts-nanum-coding -y

첫 GTK# 프로젝트 만들고 실행해보기

MonoDevelop이 실행되었으니 GTK# 프로젝트를 한 번 만들어보겠습니다. Visual Studio를 사용하시는 것이 어느정도 익숙하다는 전제에서 출발하겠습니다.

새 솔루션 만들기 메뉴를 선택하면 다음과 같이 화면이 나타날 것입니다. GTK# 2.0 프로젝트 템플릿을 선택합니다. (VB.NET 언어는 제대로 지원되지 않습니다.)

프로젝트 생성 시 Location에서 사용자 홈 디렉터리 아래로 경로를 한 번 선택해주는 것이 좋습니다.

프로젝트를 만든 다음에는 User Interface 트리 아래의 MainWindow를 더블 클릭하여 엽니다.

그러면 디자이너가 열립니다. 여기서 화면 오른쪽의 Toolbox 탭을 더블 클릭하면 우리가 아는 Windows Forms나 WPF 디자이너와 마찬가지로 팔레트가 나타납니다.

GTK#은 Windows Forms와는 다르게, 혹은 WPF처럼 컨테이너라는 부모가 있는 것을 전제로 하며, Windows Forms 처럼 디자인하려면 우선 Fixed 컨테이너가 배치되야 합니다. Fixed 컨테이너를 배치하고 그 위에 버튼을 올려보면 위의 그림과 비슷하게 됩니다.

버튼을 선택하고, Properties 탭을 더블 클릭한 후, Signals 탭을 선택하면 버튼에 대해 지정할 수 있는 이벤트들이 표시됩니다. Button Signals를 펼치고 Clicked 항목을 더블 클릭하면 코드 비하인드에 자동으로 지금 선택한 버튼에 대한 처리기 메서드가 추가됩니다.

이제 디자이너 하단의 Sources 버튼을 클릭하고, 방금 추가했던 이벤트 처리기에 코드를 작성합니다. (메서드 이름은 상황에 따라 다를 수 있습니다.)

  protected void OnButton2Clicked (object sender, EventArgs e)
    {
        MessageDialog md = new MessageDialog (null, DialogFlags.Modal, MessageType.Info, ButtonsType.Ok, "test");
        md.Run ();
        md.Destroy ();
    }

이제 F5키를 눌러 프로젝트를 빌드하고 디버거에 연결합니다. 화면이 나타나면 버튼을 클릭했을 때 다음과 같이 표시될 것입니다.

덤으로, 지금 이 상태가 작업 관리자에서는 어떻게 표현되고 있을까요? Mono 4.x 이후부터 공식적으로 채택된 SGEN을 런타임으로 사용하기 때문에 macOS에서 mono 기반 응용프로그램을 돌릴 때와 마찬가지로 mono-sgen 프로세스가 실행 중인 상태인 것을 볼 수 있습니다.

결론

Windows 10에 Linux 서브 시스템이 도입되었다는 것은 시사하는 바가 무척 많으며, 보신 것과 같이, GTK#을 Windows OS로 포팅하지 않고, 네이티브 리눅스와 유사한 환경에서, MonoDevelop으로 쉽게 개발할 수 있는 상태가 되었습니다.

MonoDevelop은 GTK# 만이 아니라 콘솔 프로그램, 그리고 ASP.NET 개발 환경도 지원합니다. 애석하게도 XSP4는 지금 이 아티클을 작성하는 시점에서 제대로 작동하지 않고 있지만 곧 업데이트가 이루어질 것이라고 생각합니다.

또한 MonoDevelop은 NuGet 패키지 설치도 지원하므로 필요한 패키지가 있으면 쉽게 설치할 수 있습니다.

이후에 TCP Listener를 기반으로 하는 서버 애플리케이션이나 ASP.NET Core 실행 사례도 추가 아티클 상에서 살펴보겠습니다.

Electron으로 크로스 플랫폼 데스크톱 앱 만들기 #1 – 프로젝트 스캐폴딩

요즈음 모바일 앱은 Xamarin, Cordova 등 다양한 프레임워크를 이용하여 개발하는 사례가 매우 많습니다. 하지만 상대적으로 Desktop App은 이제 막 크로스플랫폼 앱 개발에 대한 논의가 시작되는 단계여서 상대적으로 정보가 많이 적고, 사용할 수 있는 리소스가 모바일 크로스플랫폼 개발에 비해서는 적은 편입니다.

연속되는 아티클 시리즈를 통하여 데스크톱 앱을 크로스플랫폼으로 개발하려고 할 때 시작할 수 있는 유용한 선택지인 Electron과 EdgeJS의 결합 시나리오에 대해 살펴보려고 합니다. 이번에는 그 중 가장 기초가 되는 처음 Electron 프로젝트를 만드는 과정을 살펴보려고 합니다.

Electron에 대하여

Electron은 Github의 크로스플랫폼 에디터인 Atom을 위하여 처음 개발되었고, 그 이후로 많은 발전을 거쳐 여러 애플리케이션의 기반 프레임워크로 현재는 널리 사용되고 있습니다. 최근 큰 주목을 받고 있는 Visual Studio Code는 물론, Slack, 잔디 등 국내외 여러 최신 소프트웨어들이 Electron을 기반으로 하이브리드 + 크로스플랫폼 소프트웨어를 개발하고 있습니다.

Electron의 생태계

Electron은 기술적으로 NodeJS의 기능과 Chromium의 렌더링 엔진을 모두 사용할 수 있습니다. 이 덕분에 Node Package Manager (NPM)과 Bower의 기능을 모두 사용할 수 있어 UI는 익숙하게 사용할 수 있는 jQuery, jQuery UI 및 jQuery Mobile이나 최근 유행하고 있는 Angular 2, React 등을 택할 수 있고, 비즈니스 로직 부분은 TypeScript나 CoffeeScript 등을 활용하여 개발할 수 있습니다.

Electron의 확장성은 여기서 그치지 않고 .NET과의 상호 운용 기능을 제공하는 EdgeJS와도 연동도 제공하고 있습니다. EdgeJS는 Windows에서는 .NET Framework 4.5 이상, Linux와 macOS에서는 Mono 4.x 이상의 프레임워크와 연동되며, C#, F# 등 다양한 언어와의 바인딩과 기존 클래스 라이브러리의 재사용을 모두 소화할 수 있습니다. 기존에 개발했던 Windows Forms나 WPF 기반의 Desktop App을 크로스플랫폼으로 전환하는 것을 염두에 두고 계시다면 현실적인 선택지 중 하나가 될 수 있습니다.

마지막으로, 데스크톱 앱을 수익화하기 위한 방법에서도 Electron은 이제 완벽한 선택지라고 할 수 있습니다. Windows의 경우 이 글을 작성하는 현재 2016년 여름에 Windows 10 Anniversary Update를 통하여 Native App을 스토어에 공식적으로 게시할 수 있게 됨에 따라 Electron App을 스토어에 등록할 수 있고, Linux의 경우 다양한 경우의 수가 있겠지만 데스크톱에서 가장 널리 쓰이는 Ubuntu Software Store에 등록할 수 있으며, Mac App Store로의 Electron App 등록은 이전부터 계속 가능했습니다.

이러한 생태계 아래에서 기존의 Native Application이나 .NET Managed Application을 Electron을 기반으로 리뉴얼을 고려해보실 수 있습니다.

첫 Electron 프로그램 만들기

Electron 기반의 개발 환경은 Windows, Linux, macOS 플랫폼이면 쉽게 구축이 가능합니다. 그 중에서도 이번 아티클에서는 Visual Studio Code를 기반으로 구축하는 예를 들어보려고 합니다.

Visual Studio Code, NodeJS, NPM, Bower를 시스템에 이미 설치한 상태임을 가정하고 진행해보도록 하겠습니다.

작업 디렉터리를 새로 하나 만들고, 해당 디렉터리에서 아래 명령을 실행하여 package.json과 bower.json을 만들어 프로젝트 기준점을 잡도록 합니다.

npm init
bower init

그 다음, electron-prebuilt 패키지를 개발 종속성 패키지로 설치하여 개발 과정 중에 Electron에 연동하여 사용할 수 있게 합니다.

npm install --save-dev electron-prebuilt

Bower를 이용하여 jQuery Mobile 패키지를 설치하겠습니다. 패키지 이름이 jquery-mobile-bower인 것을 설치해야 즉시 사용 가능한 jQuery Mobile 패키지가 설치되니 이름에 주의하여 주십시오.

bower install --save jquery-mobile-bower

이제 Electron 엔진을 사용하여 창을 띄우고 첫 UI를 표시하도록 코드를 조금 추가해보겠습니다.

package.json 파일을 만들 때, 시작점이 되는 JavaScript 파일의 이름을 따서 새 JavaScript 파일을 만듭니다. 예를 들어, package.json 파일이 아래와 같이 되어있다면 index.js 파일을 새로 만듭니다.

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron-prebuilt": "^1.2.2"
  },
  "dependencies": {
    "electron-edge": "^5.0.3-pre1"
  }
}

index.js 파일을 다음과 같이 만듭니다.

const electron = require('electron');
// Module to control application life.
const {app} = electron;
// Module to create native browser window.
const {BrowserWindow} = electron;

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;

function createWindow() {  
  // Create the browser window.
  win = new BrowserWindow({width: 800, height: 600});

  // and load the index.html of the app.
  win.loadURL(`file://${__dirname}/index.html`);

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null;
  });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow();
  }
});
위의 코드에서 index.html 파일을 로드하도록 하였으므로, index.html 파일을 아래 코드와 같이 만듭니다. 아래 코드의 자세한 내용은 jQuery Mobile 튜토리얼을 참고하시면 이해하기 쉽습니다. (맥락을 정확하게 유지하기 위하여 jQuery Mobile에 대한 내용은 다루지 않겠습니다.)
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="Stylesheet" media="all" type="text/css" href="bower_components/jquery-mobile-bower/css/jquery.mobile-1.4.5.css" />
    <style type="text/css" media="all">
    body { cursor: default; }
    </style>
    <script type="text/javascript" src="compat.js"></script>
    <script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="bower_components/jquery-mobile-bower/js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page" id="start">
        <div data-role="header">
            <h1>Welcome To My Homepage</h1>
        </div>
        <div data-role="main" class="ui-content">
            <p>I Am Now A Mobile Developer!!</p>
            <a href="#lastStep">Go to Next Page</a>
        </div>
        <div data-role="footer" data-position="fixed">
            <h1>Footer Text</h1>
        </div>
    </div>
    <div data-role="page" id="lastStep">
        <div data-role="header">
            <h1>Welcome To My Homepage</h1>
        </div>
        <div data-role="main" class="ui-content">
            <a href="#confirmDialog">End</a>
        </div>
        <div data-role="footer" data-position="fixed">
            <h1>Footer Text</h1>
        </div>
    </div>
    <div data-role="page" data-dialog="true" id="confirmDialog">
        <div data-role="header">
            <h1>Welcome To My Homepage</h1>
        </div>
        <div data-role="main" class="ui-content">
            <a href="#start">Go to Start page</a>
        </div>
    </div>
</body>
</html>
앞의 단락에서 이야기한 것처럼, Electron은 NodeJS와 통합된 실행 환경을 사용하고 있습니다. 이렇게 하면서 module 프로퍼티가 일반 웹 브라우저와는 다르게 미리 정의가 되는데, 이 때문에 jQuery가 전역 객체로 설정되지 않습니다. (https://blog.outsider.ne.kr/1170 아티클의 내용을 보고 도움을 얻을 수 있었습니다.)
이런 동작은 버그가 아니고 By-Design 사항입니다. 물론 필요에 따라 Chromium의 JavaScript 컨텍스트만 사용하도록 제한할 수 있지만 이렇게 할 경우 Electron의 강력한 기능을 활용할 수 없으므로 이 방법 대신 아래 코드를 compat.js로 저장하여 HTML 페이지에서 먼저 참조하고 그 다음에 jQuery를 로드하도록 수정하여 jQuery와 NodeJS 모듈을 동시에 사용할 수 있게 하려고 합니다.
window.nodeRequire = window.require;
window.nodeExports = window.exports;
window.nodeModule = window.module;
delete window.require;
delete window.exports;
delete window.module;
위의 코드를 사용하여 require, exports, module 프로퍼티를 nodeRequire, nodeExports, nodeModule로 이동시키고, jQuery가 정상적으로 초기화될 수 있게 합니다. 나중에 electron과 연동을 할 때에는 새 이름으로 정의된 객체를 사용하도록 하여 어렵지 않게 연동이 가능하게 됩니다.
이렇게 코드를 구성하고, 아래와 같이 명령을 작업 디렉터리 내에서 실행하면 앱이 실행됩니다.
node_modules/.bin/electron .
001
Production 버전으로 패키지를 만든 것이 아니고, 메뉴 등이 그대로 표시되므로 Developer Tool을 이용할 수 있습니다. Developer Tool을 View – Toggle Developer Tool 메뉴로 켜고 끌 수 있으며, 실행하면 창 하단/우측에 붙어서 나오거나 아래 그림처럼 별도의 창으로 띄울 수도 있습니다.
002

다음 아티클에서는

다음 아티클에서는 Visual Studio Code와 통합 디버깅 환경을 설정하는 방법과 JavaScript 디버깅을 손쉽게 수행할 수 있는 방안을 살펴볼 에정입니다.

[팁] MySQL Workbench에서 닫은 탭이 다음번에 다시 열리는 현상 해결하기

MySQL 서버를 사용하신다면 MySQL Workbench를 통해서 MySQL 서버 관리를 하거나 데이터베이스 응용프로그램 개발에 활용하는 등 여러모로 자주 사용하시게 될텐데요, 특이하게도 작업 중에 닫았던 탭의 내용이 지워지지 않고 나중에 그대로 복원되는 문제가 보입니다.

이 현상은 MySQL Workbench의 작업 공간 데이터 파일이 탭 닫기 기능을 통해서 정상적으로 삭제되지 않아서 발생하는 것으로 보입니다. 따라서 문제를 해결하려면 수동으로 작업 공간 데이터 파일을 백업하여 다른 곳으로 이동시키거나 필요하지 않은 파일을 삭제하는 해결 방법을 적용해야 합니다.

작업 공간 데이터 파일의 위치는 Windows의 경우 아래 폴더 경로에 있습니다.

%userprofile%AppDataRoamingMySQLWorkbenchsql_workspaces

이 폴더에 들어가면 접속했던 서버 별로 폴더가 나뉘어져있으며 각 폴더에는 쿼리를 수행했었던 데이터 파일들이 남아있습니다. Workbench 프로그램을 종료한 다음 각 데이터 파일을 백업하거나 삭제하는 등의 작업을 수행한다음 다시 접속하면 데이터 파일들에 의해서 모든 탭들이 다시 열리는 문제가 해결됩니다.

구관이 명관 – 어느 위치에서 실행하든 경로를 유지하는 배치 파일 만들기

오랫만에 구관이 명관 시리즈를 업데이트해봅니다. 이번 아티클은 작지만 확실히 유용한 팁 하나를 소개해볼까 합니다. 배치 파일을 작성하고 배포할 때 가장 큰 문제가 되는 것이, 배치 파일이 의도하지 않은 디렉터리 경로 상에서 실행된다는 점일 것입니다.


 


 


예를 들면 배치 파일을 명령어나 다른 프로그램을 이용하여 실행하면 배치 파일이 있는 경로가 아닌 호출한 프로그램의 현재 디렉터리 경로 위에서 실행되어서 문제가 될 때가 있습니다. 물론 배치 파일의 이런 특성을 활용해야 하는 경우도 있겠습니다만, 보통은 배치 파일을 실행할 때 정확히 해당 경로 상에서 어떤 작업을 하도록 의도한 것이 많으므로 이런 특성은 불편할 수 있습니다.


이 문제를 수정하려면 배치 파일의 경로를 항상 정확하게 알 수 있어야 하는데, 이럴 때 %~dp0 환경 변수를 사용하면 쉽게 문제를 해결할 수 있습니다. 하지만 무작정 cd 명령을 사용하면 배치파일이 끝나고 난 다음에 디렉터리 위치가 원래대로 돌아오지 않는 문제가 남습니다.


이런 문제를 해결하기 위하여, 새로 작성하는 배치 파일의 시작과 끝을 아래의 코드처럼 작성하도록 하면 편리할 것입니다.
@echo off
pushd “%~dp0”


rem 여기에 배치 파일 본문을 작성합니다.


:exit
popd
@echo on



 


내용은 단순합니다. 실행하는 명령줄이 보이지 않게 @echo off로 감추고, pushd 명령을 사용하여 스택에 현재 디렉터리 경로를 push하고 새 위치로 이동한 다음 원하는 일을 하는 것입니다. 그리고 나중에 종료할 때에는 popd 명령을 사용하여 직전에 저장한 디렉터리 경로를 꺼내와 그 위치로 다시 이동하고 @echo on으로 (심미성을 위하여 @echo on이라고 썼습니다.) echo 상태를 복원합니다. 여기서 :exit 라벨은 프로그램 내에서 탈출 조건을 만났을 때 편리하게 활용할 수 있도록 하기 위한 것입니다.


위의 예제를 활용하면 다음과 같이 응용할 수 있습니다.


@echo off
pushd “%~dp0”



if not exist %windir%system32runas.exe. (
    echo RUNAS.EXE 프로그램을 찾을 수 없습니다.
    pause
    goto exit
)


for /r “%~dp0” %%v in (test.cmd) do (
    if exist “%%v” (
        echo %%v 진행 중…
        call “%%v”
        rem 다른 배치 파일을 호출하고나면 echo on 상태가 되므로 다시 @echo off로 꺼줍니다.
        @echo off
    )
)


:exit
popd
@echo on



 


위와 같이 활용한다면 배치 파일을 어디서 실행하든 원하는 경로로 들어갔다가 다시 쉽게 원래 위치로 되돌아올 수 있으므로 일반 프로그램처럼 배치 파일을 작성하는 것이 좀 더 쉬워집니다.

Visual Studio 테스트, 어렵지 않아요

Visual Studio에서 제공하는 테스트 도구에 NUNIT을 결합해서 사용할 수 있다면 정말 유용할 것입니다. 이번 웹 캐스트는 Visual Studio에서 제공하는 테스트 도구와 NUNIT 간의 연동을 도와주는 NUNIT Test Adapter의 사용 방법과 함께, Windows Forms 기반 응용프로그램에서 Visual Studio와 NUNIT Test Adapter를 결합하여 테스트를 진행할 수 있는 방법을 소개합니다.


(비디오 콘텐츠로 올렸던 게시물이었으나 아티클로 조만간 복원할 예정입니다.)

Visual Studio 2013에서 ASP.NET 프로젝트가 만들어지지 않는 경우

Visual Studio 2013에서는 One ASP.NET이라는 새로운 형태의 프로젝트 생성 방식을 제공하고 있습니다. 이전에는 ASP.NET MVC, Web Form, Web Page, Web API가 각기 다른 프로젝트로 분리되어있어서 구성하기에 불편한 점이 많았습니다만 2013부터는 한 위치에서 동시에 여러 ASP.NET 웹 스택을 선택하고 조합할 수 있게 되었으며, 인증 시나리오도 Windows Identity Foundation, 기본 인증, 소셜 네트워크 기반 인증 등을 지원할 수 있는 옵션이 추가되었습니다.


그런데 이러한 특성 때문에, 처음부터 NuGet 패키지 관리자에 대한 의존성이 필수가 되었습니다. 그래서 간혹 어떤 컴퓨터에서는 Visual Studio 2013으로 ASP.NET 프로젝트를 생성하려 할 때 다음과 같은 오류 메시지가 나타나기도 합니다.


지정된 파일을 찾을 수 없습니다. (예외가 발생한 HRESULT: 0x80070002) 



오류: 이 템플릿에서 구성 요소 어셈블리 ‘NuGet.VisualStudio.Interop, Version=1.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a’을(를) 로드하려고 했습니다. 이 문제에 대한 자세한 정보 및 이 템플릿을 활성화하는 방법에 대한 정보는 “프로젝트 템플릿 사용자 지정”의 설명서를 참조하십시오. 



위와 같은 오류 메시지가 나타나는 것은 NuGet Package Manager 애드인이 설치되어있지 않기 때문이며, ASP.NET 프로젝트 생성과 동시에 인터넷 상에서 NuGet Package Manager를 이용하여 프로젝트 구성에 필요한 각종 라이브러리들 (jQuery, ANTLRv3 등)을 내려받으려고 시도하기 때문입니다.


문제를 진단하기 위하여, Visual Studio에 현재 설치된 확장 및 업데이트 내역을 확인합니다. 메뉴에서 아래와 같이 실행하면 해당 항목을 찾을 수 있습니다.


도구(T) – 확장 및 업데이트(U) 클릭 



온라인 – Visual Studio 갤러리 선택 – 검색어에 nuget 입력 후 Enter 키 누름 – “NuGet Package Manager for Visual Studio” 선택 – 다운로드 버튼 클릭 



다운로드 진행 – EULA 동의 – 설치 – 아래와 같이 화면이 나타나면 하단의 “지금 다시 시작(R)” 버튼 클릭



이제 ASP.NET 프로젝트를 다시 생성하면 정상적으로 생성이 완료될 것입니다.

동일 IP 주소를 사용하는 가상 호스트를 로컬에서 테스트하기

안녕하세요. Windows Azure MVP 남정현입니다.


IIS나 Apache 등의 웹 서버를 사용하여 웹 사이트를 구축하고 운영하다보면 사이트에 발생하는 문제를 진단해야 할 경우가 종종 생깁니다. 규모가 크지 않은 경우 사이트 하나에 한 서버, 한 IP만을 이용할 수도 있지만 편의에 따라 맵핑된 도메인 주소에 따라 다른 웹 사이트를 내보내도록 가상 호스트를 구성한 경우 테스트하기 불편한 점이 있습니다.


이러한 불편함을 쉽게 해소하고 완벽하게 테스트할 수 있는 방법이 있어 소개합니다. 바로 HOSTS 파일을 수정하는 방법인데, 이 파일을 수정하여 가상의 호스트를 정의하고 해당되는 호스트 앞으로 사이트를 연결시키는 방법입니다. 이번 글에서는 IIS를 사용하는 경우를 예로 들어서 설명을 드리겠습니다.


1. %windir%system32driversetchosts 파일 편집하기


Windows + R 키를 이용하여 실행 대화 상자를 띄우거나 기타 여러가지 방법을 이용하여 %windir%system32driversetchosts 파일을 텍스트 편집기로 엽니다.



그러면 아래와 같이 텍스트 편집기 창이 열리는데 그림에서 보는 것과 같이 IP 주소와 가상 호스트 이름을 한 줄씩 입력합니다. 주석으로 표시할 내용은 각 줄 제일 첫 글자를 #으로 시작하면 됩니다.



예를 들어 127.0.0.1 tiger 라고 입력하고 저장한 다음 서버 내의 브라우저나 기타 인터넷 응용프로그램에서 접속을 시도하면 localhost와 마찬가지로 접속이 잘 됩니다. 그러나 IIS나 가상 호스트 개념을 사용하는 네트워크 서비스에서는 다른 호스트로 분리하여 처리할 수 있는 근거가 이 지점부터 유효하게 됩니다.


2. IIS에서 가상 호스트 설정 업데이트하기


IIS 관리자를 실행한 다음 여러 개의 웹 사이트가 있는 것을 확인합니다. 



1단계에서 지정한 가상 호스트와 연결할 웹 사이트 항목을 오른쪽 버튼을 클릭하고, 바인딩 편집 메뉴를 클릭하여 세부 설정으로 이동합니다. 



바인딩 편집에서 호스트 이름에 1단계에서 추가한 가상 호스트 이름을, 포트나 IP 주소 설정은 필요에 따라 변경합니다. 포트 번호나 IP 주소를 따로 변경하지 않아도 호스트 이름으로 구분하기로 하였으므로 로컬에서도 사이트 별로 분리된 상태에서 쉽게 테스트가 가능하게 됩니다. 



Live Connect Developer Center의 두 가지 다른 Application에 대한 이해

안녕하세요. Windows Azure MVP 남정현입니다.


오늘은 자세히 살펴보지 않으면 헛갈릴 수도 있는 세밀한 내용을 하나 다루어보려고 합니다. 이번에 Azure Camp @ 서울시립대 강의를 진행하면서 우연히 찾은 내용입니다.


Windows Azure Mobile Service는 Windows Live 이외에 Facebook, Twitter, Google이 제공하는 Client ID와 Client Secret을 내부적으로 보관할 수 있는 기능을 가지고 있고, 이들 아이디를 사용하여 Claim Authentication을 중간에서 릴레이해주는 유용한 기능을 가지고 있습니다. 나중에 App에서는 Windows Azure Mobile Service SDK를 개발하려는 플랫폼에 맞게 내려받아서 적용하기만 하면 손쉽게 소셜 네트워크 서비스들과 맥락을 같이할 수 있는 것이지요.


이전에도 종종 알려지곤 했었는데 dev.live.com이라는 별도의 관리 포털 사이트가 줄곧 있었습니다. 이 사이트에서도 사실 Application을 선언하고 만드는 것이 가능했었는데 최근에 여기에 Application을 등록할 수 있는 다른 대행 사이트가 하나 더 늘어났습니다. 바로 Windows 8 Developer Dashboard (dev.windows.com) 입니다. 여기서 앱의 이름을 예약하는 순간 자동으로 dev.live.com에서도 Application이 동시에 등록됩니다.


여기서 알아두시면 유용한 것이 두 가지가 있습니다.


첫 번째는 기존에 dev.live.com에서 같은 이름으로 선언한 Application 정의가 있다 하더라도 내부 클라이언트 ID와 시그니처값을 비교 대상으로 보는 관계로 Windows Store에서 앱 이름을 예약한 경우 또 다른 Application이 dev.live.com 상에서도 한 번 더 생성이 됩니다. 물론 둘 사이는 전혀 연관 관계가 없습니다.


두 번째는 dev.live.com에서 Application을 선언한 경우 Claim Authentication 목적으로 SDK에서 활용할 수는 있지만, Windows Store App 고유의 기능인 푸시 알림 서비스를 위한 Package SID가 dev.live.com에서 생성한 경우에는 지정되지 않고 수정이 되지 않기 때문에 사용할 수 없습니다. 당연한 이야기이지만 푸시 알림 서비스나 기타 Windows Store App 고유의 기능을 활용하려면 dev.windows.com을 통해서 앱 이름을 정확히 예약해야 합니다.


아래 이미지는 실제로 두 가지 다른 Application의 차이점을 설명하는 그림입니다. 왼쪽이 Store Dashboard에서 예약한 Application으로 Package SID 값이 할당되어있습니다. 반면 오른쪽은 dev.live.com에서 직접 예약한 이름으로 Package SID 표시도 없고 선택지도 없습니다.




이러한 특징이 있으므로 개발하려는 앱이나 웹 서비스가 향후 Windows 8 앱으로의 출시를 목표로 하시는 경우에는 앱의 이름을 사전에 미리 예약하는 작업이 필요합니다. 그리고 달리 말하면, dev.live.com에서 등록한 Application이 Windows Store App의 이름으로 쓰이지는 못한다는 것을 정확히 숙지하시는 것이 필요합니다.

ClickOnce의 문서화되지 않은 비관리 API 활용하기

안녕하세요. Windows Azure MVP 남정현입니다.


오늘 소개해드리려고 하는 내용은 ClickOnce용 패키지를 만들었을 때 유용하게 활용하실 수 있는 팁입니다. 보통은 같이 만들어지는 setup.exe 프로그램을 통해서 ClickOnce 패키지가 시작되도록 배포하는 것이 일반적이겠지만, 이 setup.exe를 대신하여 여러분만의 고유한 Bootstrapper를 제작할 수 있는 방법이 있습니다. 바로 ClickOnce의 주요 핵심 DLL인 DFSHIM.DLL 파일의 API 2개를 활용하는 것인데요, 지금 소개하려는 API를 보통은 rundll32.exe 프로그램을 이용해서 호출하는 것으로만 구글의 검색 결과에 보통 열거됩니다. 그러나 이 기능을 rundll32.exe 프로그램에 의존하지 않고 직접 프로그래밍 코드에서 호출할 수 있는 방법은 없을까요?


rundll32.exe로 호출하는 API에 대한 특성 이해하기


rundll32.exe 프로그램은 약간의 트릭과 암묵적인 규칙을 기반으로 동작하는 시스템 유틸리티로 다소 게으른(?) 면이 있습니다. 특수한 경우를 제외하고 일반적으로 DLL 파일은 직접 실행할 수 없고 반드시 다른 EXE 파일에 동적이든 정적이든 링크되어 사용되야만 합니다. 프로그램 개발 공수 관점에서 보면 DLL에 중요 컨텐츠를 포함시켜놓았을 경우 번번히 이런 컨텐츠를 위해서 별 의미없는 EXE 파일을 빌드해야 하는 셈인데, 이러한 낭비적 요소를 제거하기 위해서 일반화된 DLL 호스트 및 실행 프로그램을 넣게 됩니다. 그러나 잘 아시겠지만, 사실 이는 잠재적으로 보안 위협이 되는 부분도 있습니다.


다행히도 rundll32.exe는 무분별, 무절제하게 아무렇게나 들어오는 입력을 모두 받아들이는 것이 아닙니다. 이에 대한 상세한 규칙은 Microsoft KB164787 문서 (http://support.microsoft.com/kb/164787) 에 상세하게 기록되어있으며 내용을 요약하면, RUNDLL32.EXE로 호출할 수 있는 함수 시그니처는 대강 아래와 같은 형태로 제약됩니다.



  • void __stdcall <Function>W(HWND hwnd, HINSTANCE hinst, LPCWSTR lpszCmdLine, int nCmdShow);

  • void __stdcall <Function>(HWND hwnd, HINSTANCE hinst, LPCSTR lpszCmdLine, int nCmdShow);

  • void __stdcall <Function>(void);

이 글을 작성하는 현 시점에서 16비트 운영 체제는 일상적으로 사용되지 않고, 32비트 및 호환 운영 체제 가운데에서도 NT 커널을 계승하는 운영 체제가 주로 사용됨을 감안하였을 때, 보통 위와 같이 시그니처들이 있다고 볼 수 있습니다. W라는 접미사가 붙는 것은 세 번째 매개 변수가 문자열 버퍼를 포함하고 있기 때문에 적용되는 Windows 프로그래밍 환경에서의 Convention입니다. 이와 같이 Wide String을 지원하는 함수가 있다면 가장 적극적으로 먼저 쓰이게 됩니다. 그리고 해당되는 함수가 없다면 Ansi String을 지원하는 두 번째 후보가 차선책으로 쓰이게 됩니다. 만약 별도의 파라미터가 없이 불린다면 세 번째 시그니처에 해당되는 함수가 채택됩니다.


DFSHIM.DLL의 문서화되지 않은 API 두 가지


DFSHIM.DLL은 .NET Framework 2.0과 함께 배포되는 ClickOnce의 핵심 기능을 포함하는데, 확장자가 .application인 파일을 실행해주거나 ClickOnce와 직접 확장자를 연결시킬 경우 연결 프로그램으로서 실행해주는 등의 기능, 그리고 ClickOnce 캐시 저장소 초기화 등의 기능을 담당합니다. 인터넷 자료를 검색해보면 대개는 COM 기반의 API나 제한된 몇 종류의 API만을 이야기하는 것으로 이야기가 잘 보입니다.


그러나 공식적으로 사용되면서도 정확하게 문서화되어있지 않은 API가 두 종류가 있으며 사실은 더 사용하기 쉬운 API가 두 종류가 있습니다. 바로 ShOpenVerbApplication(W), CleanOnlineAppCache에 관한 것인데, 양쪽 모두 rundll32.exe로 실행하는 방법은 아래와 같다고 나오지만 실제 프로그래밍 언어에서 다루는 방법에 대한 문서가 거의 없습니다.



  • %windir%system32rundll32.exe dfshim.dll,ShOpenVerbApplication <.application 파일의 경로나 URL>

  • %windir%system32rundll32.exe dfshim.dll,CleanOnlineAppCache

위와 같이 실행하는 방법 말고 더 간단한 방법은 없을까요? 앞에서 소개한 내용을 바탕으로 시그니처를 대입하면서 맞추어보니 아래와 같이 정의할 수 있었습니다.



  • typedef void (WINAPI *ShOpenVerbApplicationWProc)(IN HWND, IN HINSTANCE, IN LPCWSTR, IN int);

  • typedef void (WINAPI *ShOpenVerbApplicationAProc)(IN HWND, IN HINSTANCE, IN LPCSTR, IN int);

  • typedef void (WINAPI *CleanOnlineAppCacheProc)(VOID);

위의 함수 포인터에 대한 선언을 활용하여 _UNICODE 매크로 선언 여부에 따라 동적으로, 그리고 선택적으로 호출할 수 있도록 만들 수 있었습니다. (Visual C++ 컴파일러 기준)


// 함수 포인터 선언
typedef void (WINAPI *ShOpenVerbApplicationWProc)(IN HWND, IN HINSTANCE, IN LPCWSTR, IN int);
typedef void (WINAPI *ShOpenVerbApplicationAProc)(IN HWND, IN HINSTANCE, IN LPCSTR, IN int);
typedef void (WINAPI *CleanOnlineAppCacheProc)(VOID);

// 조건부 매크로 선언
#ifdef _UNICODE
 #define ShOpenVerbApplicationProc ShOpenVerbApplicationWProc
 #define ShOpenVerbApplicationName “ShOpenVerbApplicationW”
#else // _UNICODE
 #define ShOpenVerbApplicationProc ShOpenVerbApplicationAProc
 #define ShOpenVerbApplicationName “ShOpenVerbApplication”
#endif // _UNICODE

// 변수 선언
 HINSTANCE hLibrary;
 ShOpenVerbApplicationProc pProc;
 CleanOnlineAppCacheProc pClearProc;

 // DLL 로드 시도 및 함수 검색 (DLL 로드에 실패한 경우 .NET Framework 설치를 유도할 수 이
 BOOL LoadDFSHIM(void) {
  hLibrary = LoadLibrary(_T(“DFSHIM.DLL”));

  if (hLibrary == NULL)
   return FALSE;

  pProc = (ShOpenVerbApplicationWProc)GetProcAddress(
   hLibrary,
   ShOpenVerbApplicationName);

  pClearProc = (CleanOnlineAppCacheProc)GetProcAddress(
   hLibrary,
   “CleanOnlineAppCache”);

  if (pProc == NULL || pClearProc == NULL) {
   pProc = NULL;
   pClearProc = NULL;
   FreeLibrary(hLibrary);
   return FALSE;
  }

  return TRUE;
 }


 // 프로그램 종료 시 호출하여 자원 할당을 해제
 VOID UnloadDFSHIM(void) {
  if (pProc)
   pProc = NULL;

  if (pClearProc)
   pClearProc = NULL;

  if (hLibrary)
  {
   FreeLibrary(hLibrary);
   hLibrary = NULL;
  }
 }


// ClickOnce application 시작 시 호출
if (this->hLibrary != NULL && this->pProc != NULL)
{
  this->pProc(NULL, NULL, _T(“ClickOnce .application 파일 경로 또는 URL”), SW_SHOW);
}

// 기존 Online 전용 App의 Cache를 삭제할 때 호출 (설치 시 문제가 있을 경우 활용 가능)
if (this->hLibrary != NULL && this->pClearProc != NULL)
{
  this->pClearProc();
}

위와 같이 C/C++ Application에서 간단하게 ClickOnce Online App 및 Offline App 설치를 호출할 수 있고, Online App Cache를 초기화할 수 있습니다.


결론


Windows Desktop App 가운데에서도 .NET으로 배포하는 App의 경우 설치 도입부부터 특별한 사용자 경험을 제공하기 위한 목적으로 위의 기능을 활용하면, setup.exe 파일 대신 여러분이 직접 디자인한 Setup Bootstrapper를 만들어 배포할 수 있고, 혹은 rundll32.exe 프로그램을 그대로 이용하여 바로가기 아이콘을 만드는데 활용할 수도 있습니다.


이 글에 대한 프리뷰 이미지 출처: http://hummingbird.tistory.com/3614

Photoshop 없이 PSD 파일의 레이어 추출하기

안녕하세요. Windows Azure MVP 남정현입니다.



오늘 소개하려는 내용은 개발자분들께 매우 유용한 팁이 될 것 같습니다. 요즈음에도 디자이너와 개발자 사이에는 협업을 하기 쉽지 않은 점들이 매우 많습니다. 특히 디자이너가 공들여 작업한 PSD 파일은 막상 개발자의 손에 떨어지면 아무 의미 없는 바이너리 파일이 되기 쉽습니다. 종국에는 개발자가 디자이너의 따가운 눈초리를 애써 무시하면서 레이어 파일들을 일일이 잘라달라고 부탁하지 않으면 안되는 상황이 되곤 하지요. 🙂


그러나 이러한 수고스러운 작업을 디자이너에게 요구하지 않고 개발자 스스로 PSD 파일을 레이어 별로 낱개의 투명 PNG 파일로 만들 수 있는 일련의 방법을 찾았습니다. 이를 위하여 Photoshop을 설치하거나 별도의 상용 유틸리티를 써야 하는 것은 더더욱 아니며 온전히 인터넷 상에서 구할 수 있는 도구와 플러그인, 그리고 Paint.net의 힘으로 도달할 수 있는 방법이므로 나름 추천해드릴만 하다고 생각합니다.


1단계: Paint.net 설치하기


Paint.net은 Rick Brewster가 개발한 프리웨어 기반의 Raster Graphic Editor 소프트웨어로 초창기에는 오픈 소스였지만 현재는 프리웨어로 전환한, C#으로 만든 멋진 그래픽 도구입니다. GIMP나 Photoshop을 대체하면서 Windows 환경에서 빠르고 가볍게 사용할 수 있는 그래픽 도구로 널리 알려져 있고 국내에서도 인지도가 제법 높은 편입니다.


Paint.NET은 http://www.getpaint.net/ 에서 최신 버전을 설치할 수 있습니다.


2단계: Paint.net PSD 플러그인 설치하기


Paint.net은 훌륭한 그래픽 편집 도구이지만 PSD를 직접 지원하지는 못합니다. 대신 PDN이라는 자체 파일 형식을 사용하기 때문에 Paint.net만 설치해서는 PSD 파일을 다룰 수 없습니다. 이를 극복하기 위하여 Paint.net PSD 플러그인을 http://psdplugin.codeplex.com/ 에서 최신 버전을 다운로드하고 설치해야합니다. 플러그인 ZIP 파일을 다운로드하면 PhotoShop.dll 파일을 확인할 수 있으며 이 파일을 아래와 같이 설치합니다.



  • 실행 중인 Paint.net 프로그램을 모두 종료합니다.

  • PhotoShop.dll 파일을 %PROGRAMFILES%Paint.NETFileTypes 폴더 아래에 복사합니다.

  • 다시 Paint.net을 실행하고 파일 열기 대화 상자에서 파일 유형을 선택할 때 아래와 같이 PSD 파일에 대한 필터가 등록되어있으면 정상적으로 설치된 것입니다.


3단계: PSD 파일을 PDN 파일로 저장하기


변환하려고 하는 PSD 파일을 PDN 파일로 저장해야 합니다. 일단 PSD 파일을 Paint.net에서 열었을 때 원본 PSD 파일과 차이점이 없는지 한 번 확인은 해야 합니다. 디자이너나 아트워크에 관여하는 다른 사람과 내용을 검토해본 다음 내용에 이상이 없으면 PDN 파일로 저장하여 4단계로 진행합니다.


4단계: PDN2PNG 명령줄 유틸리티로 레이어 별로 투명 PNG로 저장하기


PSD 파일을 PDN 파일로 변환한 다음 실제로 하려는 일은 각각의 레이어를 투명 PNG로 나누어 저장하는 일이 되겠지요. 이 작업 역시 Paint.net에서 직접 수행하는 것은 현재 매우 손이 많이 가고 번거로운 작업이기 때문에 자동화를 위하여 반드시 도구가 필요한데 Paint.net 없이 이를 처리해주는 도구가 PDN2PNG 입니다. http://forums.comsquare.ch/viewforum.php?title=pdn2png 에서 다운로드할 수 있으며, 별도로 제품화된 소프트웨어가 아닌 관계로 사이트에 접속되지 않을 가능성을 염두에 두어 제 SkyDrive에 파일 사본을 올려두었습니다. (문제가 될 경우 삭제하겠습니다.)


PDN2PNG 및 PSD Load Plugin 다운로드: http://sdrv.ms/VQfZyE


이 프로그램을 명령줄 도구로 찾기 쉬운 위치에 파일을 압축 해제하여 복사하거나 PATH 환경 변수 등으로 검색할 수 있도록 설치합니다.


PDN 파일이 정상적으로 렌더링되었을 때의 전체 모습을 PNG 파일로 바꾸려면 다른 스위치 없이 아래와 같이 명령어를 지정하면 됩니다.


pdn2png “PDN 파일 경로”


PDN 파일 안에 들어있는 각각의 레이어들을 모두 낱개의 PNG 파일로 바꾸려면 아래와 같이 /split 스위치를 사용하여 명령어를 지정하면 현재 작업 중인 디렉터리 앞으로 낱개의 PNG 파일들이 레이어의 이름을 사용하여 만들어집니다.


pdn2png /split “PDN 파일 경로”


전체 레이어 대신 특정 레이어 인덱스를 PNG 파일로 바꾸려면 아래와 같이 스위치를 지정합니다.


pdn2png /index=”인덱스 번호” “PDN 파일 경로”


5단계: 그림 자르기



pdn2png 명령의 /split 스위치를 사용하여 모든 PNG 파일들을 만들고 난 다음에 각 PNG 파일들을 살펴보면 분할은 되어있지만 여전히 프로그램에서 원하는 조각 그림의 형태에는 조금 거리가 있습니다. 디자인 아트워크 기준으로 정확히 제 자리에 아트워크가 변환되어있긴 하지만 불필요하게 여백이 많이 남는 것을 볼 수 있습니다. 이를 깔끔하게 제거할 수 있는 방법은 약간의 노동(?)을 요구합니다. 5단계의 작업을 위해서는 Paint.net 또는 다른 적절한 도구를 사용하면 되지만 여기서는 Paint.net으로 작업하는 요령을 소개하고자 합니다.



  • Paint.net으로 나누어진 PNG 파일을 엽니다.

  • Magic Wand 툴을 도구 모음에서 왼쪽 그림과 같이 선택합니다.

  • Magic Wand 툴의 경계선 감지 유연성을 아래 그림과 같이 0%로 설정합니다. 어차피 투명한 배경과 투명하지 않은 Object로 경계가 극명하게 구분된 상태의 이미지이기 때문에 정확히 이미지를 자를 것에만 신경쓰면 됩니다.

  • 이제 아래 그림과 같이 투명 배경을 Magic Wand로 선택합니다. 이렇게 선택하여 투명한 영역과 투명하지 않은 영역을 집합 관계로 봤을 때 차집합 관계로 설정할 수 있습니다.



  • 키보드 단축키 Ctrl+I 키를 눌러 영역을 반전시킵니다. 투명한 영역 선택에 대한 나머지 반전이므로 투명하지 않은 영역 모두를 선택하는 셈이 됩니다.



  • 이제 여기서 키보드 단축키 Ctrl+Shift+X키를 눌러 선택된 영역에 맞추어 캔버스의 크기를 아래 그림과 같이 줄입니다. 크기는 자동으로 산출되므로 이미지가 잘릴 걱정은 하지 않아도 됩니다.

    주의 사항: SnagIt의 경우 단축키로 Ctrl+Shift+X를 이미 전역적으로 바인딩하고 있기 때문에 이 동작이 Paint.net으로 전달되지 않고 무시될 수 있습니다. SnagIt 혹은 이 단축 키 조합에 의존하는 다른 프로그램이 있을 경우 작업하는 동안 잠시 프로그램을 종료해야 합니다.



  • 키보드의 Esc 키를 눌러 선택 영역을 해제하고 단축키 Ctrl+S 키를 눌러 아래 그림과 같이 최적의 이미지 옵션을 선택하여 저장합니다. 나머지 파일들도 같은 방법으로 계속 작업하면 됩니다.



이렇게 해서 디자이너가 개발자에게 가져다준 PSD 파일을 개발자가 원하는 PNG 파일로 성공적으로 변환할 수 있습니다. 디자이너와 개발자 모두 서로에게 도움이 될 수 있을 것입니다. 오늘 한 번 시험삼아 활용해보시는것은 어떨까요? 🙂