스타벅스 모바일 어플리케이션 Open PSD!

Tutorial/GUI 2012/01/05 20:38 |

TAG : app design, application design, codinator, Design, mobile app, PSD, Wit, wit studio, 디자인, 모바일앱, 앱 디자인, 어플리케이션

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

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

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

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

아쉽게도 스타일링은 많이 담고있지 않고, 기존 UI에서 많이 벗어 나가있어서 공부 하시는데에 적합하지 않으실 수도 있지만

어플리케이션 디자인 공부하시는 분들께 조금이라도 도움이 될 수 있기를 바라는 마음입니다. ^^;

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

starbucks application.psd

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

Trackback 0 : Comment 6

Codinator v1.0이 정식 출시되었습니다!

Codinator® 2011/05/25 22:37 |

TAG : codinator, SilverLight, windowsphone7, Wit, WP7, wpf, 위트스튜디오, 코디네이터

안녕하세요 김대욱입니다! 그동안 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/download/)에서 무료로 다운로드 받아 사용해보실 수 있습니다.

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

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

Trackback 0 : Comment 6

ScrollViewer Zoom And Panning Behavior

Tutorial/WPF 2011/05/05 14:39 |

TAG : C#, MouseWheel, panning, SilverLight, Wit, witstudio, wpf, zoom, 드래그, 확대축소

Introduction

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

Create ZoomAndPanning Behavior

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

public class ZoomAndPanning : Behavior<ScrollViewer>
{
    static ZoomAndPanning();
    public ZoomAndPanning();

protected override void OnAttached();
    protected override void OnDetaching();
    private void OnContentChanged();

protected override void OnPropertyChanged(DependencyPropertyChangedEventArgs e);
    private static object CoerceZoomRate(DependencyObject Target, object Value);
    private double GetCoerceZoomRateValue(double ZoomRate);

private Point GetCenterOfViewport();
    private Point GetContentMousePosition();

private void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e);
    private void OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e);
    private void OnMouseMove(object sender, MouseEventArgs e);
    private void OnPreviewMouseWheel(object sender, MouseWheelEventArgs e);
    private void OnScrollViewerScrollChanged(object sender, ScrollChangedEventArgs e);

protected bool CanPadding { get; }
    protected bool CanZooming { get; }
    protected FrameworkElement ContentElement { get; }
    private Point? LastCenterOfViewport { get; set; }
    private Point? LastContentMousePosition { get; set; }
    private Point? LastDragPoint { get; set; }
    public double MaximumZoomRate { get; set; }
    public double MinimumZoomRate { get; set; }
    public Cursor PanningCursor { get; set; }
    public Key PanningKey { get; set; }
    public Key ZoomingKey { get; set; }
    public double ZoomRate { get; set; }
}

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

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

WIT.WPF.Sample.ZoomAndPanningBehaviorExample.zip

Trackback 0 : Comment 0

ListView Sorting And Filtering Sample

Tutorial/WPF 2011/01/20 15:51 |

TAG : C#, Filtering, listview, Sorting, Wit, wpf, 위트, 위트스튜디오

Introduction

ERP 관련 Application을 제작할때 자주 사용되는 컨트롤 중의 하나가 ListView입니다. 많은 양의 데이터를 손쉽게 출력하기에는 용이하지만 컨트롤 자체적으로 데이터의 정렬이나 필터링등의 기능을 제공하고 있지 않기 때문에 이부분을 직접 구현하거나 상용 컴포넌트를 구입해서 사용해야 합니다. 이번시간에는 ListView의 Column을 클릭해 데이터를 정렬하거나 필터링 하는 방법에 대해 소개합니다. 아래는 이번시간에 구현하게 될 내용의 데모 동영상입니다.

이번 예제의 경우 한번의 포스팅에서 다루기 힘든 양의 소스코드이기 때문에 이번시간에는 기본적인 부분만 설명하고 나머지 부분은 추후 다시 포스팅을 하거나 소스코드를 보시고 이해가 안되신다고 하시는 부분을 위주로 먼저 설명 드리겠습니다.

ListView Sorting

ListView의 데이터를 정렬하기 위해서는 CollectionView의 SortDescriptions을 이용합니다. ListBox나 ListView와 같이 ItemsPresenter를 사용하는 컨트롤의 경우 화면에 출력될때 CollectionView를 이용해 출력될 데이터를 구성하는데 이때 SortDescription을 지정해주면 간단하게 데이터를 정렬 할 수 있습니다. 아래는 정렬 기준 속성이름과 정렬방향 그리고 ItemsSource를 통해 화면에 출력될 데이터를 정렬하는 방법입니다.

ListView Filtering

데이터 필터링도 마찬가지로 CollectionView를 이용해 간단히 구현 할 수 있습니다. CollectionView에는 Predicate<object>형식의 대리자를 통해 해당 요소가 화면에 출력될 때 필터링 되야 하는지 여부를 결정하는데 하나의 Predicate<object>에서 여러개의 필터링 규칙을 지정하는 것은 효율적이지 않기 때문에 아래와 같은 PredicateList<T>를 생성해 여러 상황의 Filtering 기준을 지정 할 수 있습니다.

public class PredicateList<T> : List<Predicate<T>> { public bool Predicate(T obj) { foreach (Predicate<T> Predicate in this) { if(Predicate(obj) == false) return false; } return true; } }
아래는 이번시간에 사용된 전체 소스코드입니다.

WIT.WPF.Samples.ListViewSortAndFilterSample.zip

※ 이번 시간 이후로 등록되는 포스팅의 소스코드를 열기 위해서는 VisualStudio2010버전이 필요합니다.