레이아웃의 사전적 의미를 검색해 보면 "디자인 ·광고 ·편집에서 문자 ·그림 ·기호 ·사진 등의 각 구성요소를 제한된 공간 안에 효과적으로 배열하는 일, 또는 그 기술" 이라고 나옵니다. 책이나 신문, 잡지 등의 인쇄매체 외에 우리가 자주 접하는 웹사이트에도 레이아웃이 적용되어 있으며 게임, 플레이어, 프로그램 등과 같은 애플리케이션에서도 레이아웃은 꼭 필요한 작업입니다.

잘 만들어진 레이아웃은 사용자로 하여금 컨텐츠를 더욱 효과적으로 이해할 수 있도록 도와주고 때로는 새로운 경험을 제공하기도 합니다. 사용자를 배려하지 않은 레이아웃은 컨텐츠를 이해하는데 어려움을 주고 사용자를 떠나가게 하는 최악의 상황을 만들 수도 있습니다. 

우리가 애플리케이션을 제작하는 것은 우리의 디자인 감각만을 펼치는 예술을 하기 위해서가 아닙니다. 우리가 제공하려는 컨텐츠와 메세지를 잘 전달하고 사용자와 잘 소통하는 것이 첫번째 목적이라 할 수 있습니다. 물론 레이아웃 뿐만 아니라 사용자와의 상호작용, 디자인적인 측면, 기능적인 측면 등 다른 중요한 부분도 많지만 레이아웃은 애플리케이션을 실행하고 사용하는데에 가장 기본적이면서도 제일 중요한 부분입니다. 다음은 실버라이트로 구현된 사이트의 레이아웃 입니다.

<실버라이트 사이트의 레이아웃>

http://www.silveos.com/


http://live.clientui.com/


그러나 이 강좌에서는 사용자를 배려하여 레이아웃을 어떻게 잘 만들것인가를 학습하지는 않을 것입니다. 이렇게 중요한 레이아웃 이라는 것을 애플리케이션에 적용할 때에 기능적으로 어떻게 사용하는 지에 대하여 학습할 것입니다. 익스프레션 블렌드에는 레이아웃을 구성하기 위해 지원되는 여러가지 레이아웃 컨트롤이 들어있습니다. 이 레이아웃 컨트롤들은 각각 다른 속성을 가지고 있기 때문에 레이아웃이 어떤 기능을 하느냐에 맞추어 적절한 레이아웃 컨트롤을 사용해야 합니다.

이번 세션에서는 레이아웃을 구성하기 위해 지원되는 레이아웃 컨트롤에는 어떤 것들이 있는지 살펴보고 다양한 상황에 맞는 컨트롤 사용법에 대해서 학습하도록 하겠습니다.
Posted by 짱묜
안녕하세요? 짱묜입니다. :) 지난주에 3회 스터디가 진행되었는데 이제서야 후기를 쓰네요.

이번 스터디에서는 컨트롤의 스타일에 대해서 알아보았습니다. 스타일을 배우기 전에 리소스를 선언하는 범위에 대해서 학습하였습니다. 리소스를 선언하는 범위는

1.애플리케이션 전체에 선언
2.해당 도큐먼트에 선언
3.도큐먼트 안 컨트롤에 선언

하는 방법들이 있었습니다. 어느 곳에 선언하느냐에 따라서 스타일을 적용할 수 있는 범위가 달라졌던것 다 기억하시죠?
그리고 이 외에 리소스 딕셔너리로 선언하여 다른 테마로 분리하는 방법도 알아보았습니다.

각자 준비해 온 버튼 디자인을 가지고 스타일 작업을 해 보았습니다. 이미지 타입의 경우에는 버튼의 기본 템플릿을 만든 다음 작업을 하였고 벡터 타입의 경우에는 기본적으로 제공되는 버튼 컨트롤의 템플릿 안의 요소를 바꾸어 작업했습니다.
Visual State Manager(VSM)을 이용하여 버튼의 상태값(Normal,Over,Pressed 등)에 따라 다른 애니메이션을 적용해 보았습니다.

다음 시간에는 트리거와 비헤이비어, 퍼스펙티브3D 등에 대해서 배우도록 할 것입니다. 내일이네요 -_-;;
그럼 오늘도 우리 스터디 멤버들의 열심히 하는 모습을 올려볼께요!



다음 후기때 뵈요! 뿅!!

Posted by 짱묜
안녕하세요? 짱묜입니다! 지난 화요일에는 2회 스터디가 진행되었습니다.

이번 스터디에서는 스토리보드를 이용하여 애니메이션을 만드는 방법에 대해서 알아보았습니다. 스토리보드를 생성한 후에 타임라인에 개체의 상태가 변화하는 시점이 될 키프레임을 생성하고, 키프레임 부분에서 개체의 크기변환, 색상변환, 각도변환,위치변환 등 다양한 속성 변경을 해 보았습니다.

기초적인 내용은 빨리 진행을 하고 예제를 따라해 보았습니다.

1.공 튕기기
공이 아래로 낙하할때 가속도가 증가하고, 위로 튀겨질때 감속하는 애니메이션을 만들어 보았습니다.
2.텍스트 애니메이션
플래시에서 많이 사용되는 텍스트 애니메이션! 글자가 순차적으로 날아오는 애니메이션을 만들어 보았습니다. 텍스트 레이어를 동시에 선택해서 효과를 적용한 후에 프레임을 이동하여 시간차를 주었던 것 기억하시죠?
3.현재값을 상속받는 애니메이션
이것은 하얀코코님이 자주 사용하셨던 예제로 야구의 1루,2루,3루를 그려서 해보았습니다. 스토리보드의 초기값을 설정하지 않으면 현재의 값을 상속받게 되어서 그 값에서 이어져 스토리보드가 실행이 되었습니다.
4.클리핑을 이용한 애니메이션
클리핑을 이용하여 텍스트에 그라데이션을 이동하는 애니메이션과 파워포인트의 블라인드 효과 애니메이션을 만들어보았습니다. 화면에 보여줄 개체와 패스를 클리핑하여 클리핑 패스의 노드를 이동하여 효과를 냈습니다.

처음이라 쉽지 않았겠지만 그래도 모두 열심히 잘 따라오셨어요!! 다음시간에는 컨트롤의 스타일에 대해서 스터디를 진행하도록 하겠습니다. 다음 시간까지 스타일에 들어갈 버튼의 디자인을 해오라고 말씀드렸어요. 블렌드에 넣기 좋은 벡터타입으로 디자인을 해 오시고, 꼭 포토샵으로 작업한 디자인이 필요하신 분들은 이미지 타입으로 해오셔도 됩니다.

자~ 오늘도 열심히 하시는 모습 투척!! 보정..같은건 없습니다 ㅠㅠ)


다음주까지 즐거운 한주 되세요!!
Posted by 짱묜