코디네이터 오픈베타 출시를 알리기 위한 티저 영상을 공개합니다.

문제를 해결하고자 하는 의지, 끝없는 고민, 발빠른 실행력 그리고 그 결과물의 탄생...

제품의 대서사시를 한편의 영상안에 담았습니다! ^_^

 

 

 

저작자 표시 비영리 변경 금지
신고

 

안녕하세요. 위트스튜디오 코디네이터 팀입니다.

현재 코디네이터 2.0 CBT 1차가 2주째 지나고 있습니다. 테스터분들의 소중한 피드백 덕분에 점점 더 멋진 툴로 성장해 나가고 있습니다!

 

이제 부터 코디네이터의 기본 개념부터 기능을 서서히 하나씩 풀어 정보를 제공해 드리고자 합니다.

코디네이터가 왜 '앱 디자인(GUI) 전용 툴'인지 그 강력한 기능을 꼼꼼히 차례대로 상세히 알려 드리겠습니다.

 

그 첫번째 순서로 코디네이터에서의 디자인 작업을 하는 방법에 대해 그 개념을 알려드리고자 합니다.

코디네이터는 기본적으로 모양(Shape)과 스타일(Style)이 분리되어 있습니다. 즉 먼저 모양을 그리고 그 위에 스타일을 입혀 디자인을 완성하는 방식입니다. 스타일을 입히는 방법은 굉장히 쉬운데요, 마테리얼이라고 불리우는 '디자인 재료(Material)'를 마치 레고 조립 하듯이 추가하면 그만입니다. 그림과 함께 설명을 드리자면 다음과 같습니다.

 

 

 

1. 캔버스 위에 Shape Tool을 사용하여 사각형의 모양을 먼저 그려 보았습니다. 그러면 우측의 Properties Dock에서 Stylist 라는 그룹에 자동으로 Fill이라는 기본 디자인재료가 자동으로 추가되어 있습니다. 

 

 

2. 그 이후는 간단합니다. 그저 원하는 디자인 재료를 추가하고 조절하면 그만입니다. 여기서 한가지 놀라운 사실은 동일한 디자인 재료라도 원하는 만큼 추가할 수 있다는 점입니다. 즉, 레이어 한개로 원하는 스타일을 마음껏 구현할 수 있다는 것을 의미합니다. 

 

 

 

3. 사용자가 추가하고 싶은 모든 효과는 디자인 재료(Material)에 모두 있습니다. 기본적인 Fill, Stroke, Drop Shadow 뿐만 아니라 Blur, Level, Texture, Pattern 등 GUI 디자인 작업에 필요한 모든 재료가 준비되어 있습니다. 또한 디자인 재료(Material)을 모두 수치값을 보존하고 있기 때문에 언제든지 수정이 가능합니다. 

 

 

 

4. 이미지를 불러와 작업하는 것도 물론 가능합니다. 이미지를 불러들일 수 있는 디자인 재료(Material)를 추가하고, 지금껏 해오던 방식 그대로 스타일링을 하면 됩니다. 

 

 

 

소개된 것과 같이 코디네이터는 레고블럭 조립방식과 동일한 스타일링 방법을 갖고 있기 때문에 굉장히 직관적인 디자인 작업이 가능하며, 얼마든지 쉽게 추가하고 제거할 수 있는 유동성까지 갖추고 있습니다.

 

  

 

 

 

 

 

 

 

 

저작자 표시 비영리 변경 금지
신고


안녕하세요. 가람유입니다.
오늘은 제 작업물중 하나인 스타벅스 모바일 어플리케이션 PSD를 공유하고자 합니다. :)
프로그래머 분들이 코드를 공유하는 하시는 사이트는 본적이 있는데 국내 디자이너분들이 PSD를 공유하는 사이트는 본적이 없는 것 같아요.  
반응이 좋으면 앞으로 더 많은 공유를 할게요. :)

스타벅스 어플리케이션을 사용하는 사용자들은 무슨 목적으로 사용할까어디에 매장이 있는검색해도 나올만한 단순한 정보를 원하진 않을 텐데.

모바일 카드를 사용하고자 하는 사용자들이 굳이 주문 도중 앱을   에도  번의 번거로운 터치를 해야만 할까? 

별 다른 뎁스 없이 바로 검색을 할 수 있는 편리함.
 매장과 메뉴를 검색 할 수 있는 검색창. 모바일 카드가 담긴 하단 바,  앱을 실행하자 마자 바로 꺼내어 쓸 수 있는 편리함. 마치 지갑에서 꺼내는 듯한 인상. 기존의 스타벅스 앱의 기능을 모두 수용하고 +a로 스벅 매니아들에게 메뉴를 자연스레 홍보할 있도록 구성해 보았다.

아쉽게도 스타일링은 많이 담고있지 않고, 기존 UI에서 많이 벗어 나가있어서 공부 하시는데에 적합하지 않으실 수도 있지만
어플리케이션 디자인 공부하시는 분들께 조금이라도 도움이 될 수 있기를 바라는 마음입니다. ^^;

(+) 여담이지만 희소식을 하나 알려드릴게요. 주목해주세요. +ㅅ+
wit studio 에서는 포토샵에서는 복잡하고 번거로운 GUI디자인을 쉽고 다양하게 도와줄 수 있는 
Codinator 2.0 를 개발 중 이랍니다. (!)
보고있나 adobe.....라고 wit는 패기가 넘칩니다. 힘썌고 강한 wit!


starbucks application.psd


영리적 사용을 절대 금합니다. 사진과 로고의 저작권은 스타벅스에게 있어요.
나쁜 용도로 이용하지 마시고! 열심히 디자인 공부 합시다! (+.+) 모두 화이팅! 
저작자 표시
신고

Introduction

일반적으로 Image Viewer 등과 같이 화면에 출력해야할 내용이 화면크기보다 클 경우 ScrollViewer를 이용해 내용을 스크롤할 수 있도록 구현을 하는데요, 이번시간에는 화면을 스크롤하기 위해서 스크롤바를 조작하지 않고 간단한 마우스조작으로 컨텐츠를 직접 드래그하는 방식으로 View를 조절하고 확대 축소할 수 있는 기능을 구현해보았습니다. 아래는 이번시간에 구현한 결과물 영상입니다.

Create ZoomAndPanning Behavior

Zoom 또는 Panning의 경우 자주 사용될 수 있는 기능이기 때문에 재사용을 용이하게 하기 위해서 Behavior의 형태로 작성했습니다. ZoomAndPanning Behavior의 기본적인 구성은 와래와 같습니다.

ScrollViewer의 기본적인 마우스 이벤트와 ScrollChanged이벤트를 수신하고 각 이벤트마다 적적할 처리를 진행 해줬습니다. 그리고 추가적으로 최대 확대배율이나 최소 확대배율, Zoom And Panning 단축키등을 통해 다양한 조작환경을 제공 할 수 있도록 구현됬습니다.

소스코드자체가 어려운 내용들은 아니기 때문에 이번시간에는 별도의 코드 설명은 생략하겠습니다. 아래는 이번시간에 사용한 전체소스코드 파일이며 VisualStudio 2010에서 작업되었습니다. 기타 질문이나 문의사항은 이메일이나 댓글남겨주시면 답변드리겠습니다. 감사합니다.

WIT.WPF.Sample.ZoomAndPanningBehaviorExample.zip

신고

안녕하세요 김대욱입니다! 그동안 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의 첫 제품이라 애정이 깊고 긴장되는데요, 아무쪼록 많은 관심 가져 주시고 도와주시면 감사드리겠습니다. 코디네이터에 대한 자세한 설명과 활용방법은 조만간 다시 포스팅하도록 하겠습니다 감사합니다.

신고