안녕하세요 김대욱입니다! 그동안 wit studio에서 준비해왔던 Codinator의 첫 정식 버전이 이번 주를 기준으로 정식 릴리즈가 되었습니다. 지난 12월 실시되었던 베타테스트 서비스를 끝으로 약 5개월간의 피드백 반영 기간을 거쳐 출시된 이번 정식버전에서는 보다 쉽고 빠르게 UI디자인을 할 수 있도록 다양한 기능들이 추가되었습니다.

Codinator의 간단한 소개를 드리자면 수준 높은 GUI Design을 쉽고 빠르게 제작할 수 있는 GUI 디자인 툴(컴포넌트)로서 간단한 마우스 조작만으로 다양한 형태의 Application을 디자인 하고 구현 할 수 있는 제품입니다. 현재 Codinator는 Microsoft의 Expression Blend에 Add-in으로 동작하고 있으며 WPF, Silverlight 그리고 WindowsPhone7의 개발환경을 지원하고 있습니다.


※ 정식 버전 Codinator는 Codinator 홈페이지(http://codinator.net/)에서 무료로 다운로드 받아 사용해보실 수 있습니다.


이제막 출시된것이다 보니 제품의 장점들을 검증하기 위해 여러 레퍼런스 케이스가 필요한 상황인데요. 기회가 된다면 저희 제품이 적용될 수 있는 곳에 테스트(or 프로젝트)를 진행해보고자 하는데 주변에 새로운 GUI의 필요성을 느끼고 있는 곳이나 관련 기술을 사용하는 곳이 있다면 소개좀 부탁드리겠습니다. :D


오랜 시간동안 개발한 저희 wit studio의 첫 제품이라 애정이 깊고 긴장되는데요, 아무쪼록 많은 관심 가져 주시고 도와주시면 감사드리겠습니다. 코디네이터에 대한 자세한 설명과 활용방법은 조만간 다시 포스팅하도록 하겠습니다 감사합니다.

신고

Introduction

WPF의 경우 이미지나 드로잉객체를 바둑판형식으로 출력하기 위한 TileBrush를 제공하고있지만 Silverlight에서는 TileMode를 지원하고 있지 않아 Shader를 이용하거나 여러개의 객체를 생성하여 바둑판형식의 출력을 구현해 사용했습니다. 하지만 Windows Phone7과 같이 Shader등을 사용할 수 없는 제약 적인 환경에서는 다른 방법으로 구현해야 합니다.

여러개의 객체를 바둑판식으로 배열하는 방법에 대해 생각해 볼 수 있겠지만, 이는(동적으로 생성했다 할지라도) 렌더링에 필요한 모든 과정(레이아웃,렌더링 등)의 연산이 매번 필요하기 퍼포먼스나 관리 측면에서 효율적이라 하긴 어렵습니다. 이번시간에는 이와같은 환경에서 동적으로 Tile Image를 생성하여 바둑판식 출력을 구현하는 방법에 대해 소개합니다. 아래는 이번시간에 구현하게될 결과물이며 WindowsPhone7에서 동일한 코드로 사용이 가능합니다.

Create Tile Image Generator

먼저 Tile Image를 생성할때 필요한 요소들에 대해 정리해보면 아래와 같습니다.

1. Source Image : Tile Image를 생성할때 사용할 소스 이미지 입니다.
2. Tile Size(Width, Height) : Tile Image를 생성할때 Tile 하나의 크기 입니다.
3. Margin XY : Tile 간의 간격을 지정합니다.
4. Result Size : 최종적으로 생성될 Tile Image의 크기입니다.

위와 같은 내용을 파라미터로 받아 타일이미지를 생성하는 메서드를 구현하면 아래와 같이 구현할 수 있습니다.

Create Tile Panel

위에서 Tile Image를 생성했으면 이제 입력받은 데이터들을 이용해 UI에 출력할 수 있는 TIle Panel을 아래와 같이 구현할 수 있습니다. 각 Property들은 값이 변경되었을때 OnPropertyChanged를 호출하게 되며 이때 UpdateTile을 호출하여 TileImage를 생성하게 됩니다.


이상으로 이번시간 포스팅을 마치며 기타 궁금하신점이나 문의 사항은 메일이나 댓글로 남겨주시면 답변드리도록 하겠습니다. 아래는 이번시간에 사용한 전체 소스코드입니다. 감사합니다.

신고