코디네이터가 1.0에서 1.1로 업데이트를 하였습니다.
릴리즈 내용과 업데이트와 관련한 자세한 이야기는 다음에 다루겠습니다.


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

포토샵으로 디자인된 작업을 모두 끝내도 애플리케이션 개발을 하기 위해서는 개발자에게 각 이미지를 모두 잘라주거나 PSD 파일을 넘겨야 합니다. 이 과정에서 간혹 실수를 하는 경우를 보았는데 Blend Mode의 잘못된 사용입니다.


먼저 아래와 같은 Application Design 작업물을 개발 환경으로
보내기 위해 모든 이미지를 알파패널을 포함한 PNG 파일 포맷으로
잘라내어야 한다는 가정을 해보겠습니다.












이미지를 모두 잘라 실제 개발화면에 적용해 보니 아래와 같은 결과가 나왔습니다. 좌측이 원본 PSD파일의 이미지이고, 우측이 개발 환경에 적용된 모습인데 뭔가 어색한 모습이죠. 바로 하단 영역의 Bar 부분과 Play 버튼의 컬러가 전혀 다른 모습으로 개발화면에 나타나고 있는 부분인데 작업 과정에서 적절하지 못한 부분에 Blend Mode를 사용했기 때문입니다.




아래 보이는 것처럼 Play 버튼의 레이어에 Blend Mode를 적용시켜 디자인을 완성했는데 보기에는 별 문제가 없어 보입니다.



하지만 문제는 각 이미지를 PNG파일 포맷으로 자르는 순간 드러납니다. Blend Mode는 하위 레이어에 어떤 컬러가 적용되어 있는가에 따라 서로 다른 컬러표현을 보여주는 기능이기 때문에 하위 레이어의 컬러가 다르다면 전혀 다른 모습을 나타냅니다. 그렇기 때문에 이미지를 자르기 위해 하위 레이어의 눈을 잠시 끄는 순간 Blend Mode는 무용지물이 되는 것이죠.



하단 Bar 부분도 마찬가지 입니다. Layer Style에서 Blend Mode 기능을 적용하였기 때문에 이미지로 자르려고 하는 순간 전혀 다른 컬러로 잘려지게 됩니다.




Blend Mode는 적재적소에 사용하면 다양하고 풍부한 느낌을 낼 수 있는 기능이지만 이런 사소한 실수를 유발할 수도 있으니 주의하세요! 

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


지난 첫번째 코디네이터 설명회(모비틀과 공동 개최)의 성원에 힘입어 2번째 공동 설명회를 개최합니다.
UI 디자인을 쉽고 효율적으로 할 수 있는 방법을 알려드릴 예정이오니 많은 참석 부탁드립니다.

일시 : 2011년 7월 14일 (목) 19시 00분 ~ 21시 00분
장소 : 강남 토즈2호점


http://onoffmix.com/event/3292





코디네이터 소개 (www.codinator.net)

코디네이터는 고품질의 UI 디자인을 아주 쉽고 빠르게 제작할 수 있는 디자인솔루션입니다.
개발자, 디자이너 누구나 몇번의 클릭만으로 나만의 UI 디자인과 테마를 아주 높은 퀄리티로
제작할 수 있는 방법이 바로 여기에 있습니다.


※ Microsoft의 Windows Phone 7, WPF, Silverlight의 개발환경을 완벽하게 지원하고
서로간의 디자인 공유도 가능합니다.

 1. 누가 들으면 좋은가?
- 홀로 앱을 개발하는 개발자
- 윈도우즈폰 앱을 남과 다른 느낌으로 디자인하고 싶은 디자이너
- UI 디자인을 효율적인 방법으로 제작하고 싶은 개발자와 디자이너

 2. 코디네이터는 무엇이 좋은가?
- 마우스 클릭 몇번으로 UI 디자인이 완성됩니다.
- 포토샵 수준의 수준 높은 디자인을 쉽게 제작할 수 있습니다.
- 다양한 색감의 테마를 쉽게 만들 수 있습니다.


 3. 코디네이터만의 특장점
- 자신만의 디자인 프리셋을 저장하고 언제든지 재사용할 수 있습니다.
- 컬러휠 기능으로 전체적인 분위기를 빠르게 변환할 수 있습니다.
- 데스크탑, 모바일, 웹 개발환경에 동일한 디자인을 적용하고 교환할 수
있기 때문에 N스크린 개발환경에 적합합니다.


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

wit studio

Company/About 2011.06.22 00:00 |



저작자 표시 비영리 변경 금지
신고
지난 5월 초, 일본 도쿄의 오다이바에 위치한 SONY 과학 박물관에 전시할(현재 전시중) 안드로이드 앱 프로젝트를 진행하였습니다.
소니 과학박물관은 3달에 한번 정도 하나의 주제를 잡고 매번 새로운 전시물을 선보이는데 이번 주제는 AR(증강현실)이었습니다.

저희 wit studio는 디자인 팀 Crever와 함께 AR과 관련한 기획 일정을 짜서 소니측에 제안하였고, 소니측에서 이를 받아들여 프로젝트를 진행하게 되었는데요, 저희가 제안한 기획은 증강현실을 이용해 사용자가 직접 해저에 뛰어들어 고대 해저 생물체를 직접 잡아보며 체험하는 아이디어였습니다. 일정이 매우 빠듯하여 조금 고생하였지만 다행히 결과물이 좋았고, 소니측에서도 매우 만족한 반응이어서 다음 전시에도 다시 한번 손을 잡고 프로젝트를 진행하기로 하였습니다.

가장 힘들었던 점은 안드로이드의 메모리 문제였습니다. 증강현실 프로젝트지만 규모가 작은 모바일 앱이기에 3D 모델링을 그대로 얹힐 수는 없었고, 모두 PNG파일로 변환 후 프레임 애니메이션으로 적용하기로 했습니다. 하지만 안드로이드의 악명 높은 메모리 문제가 굉장히 속을 썩이더군요! 결국 이미지의 크기와 프레임수를 줄이며 온갖 조율끝에 가장 최적의 상태로 앱을 제작할 수 있었습니다.

- 소니 과학박물관 홈페이지 : http://www.sonyexplorascience.jp/contents/event.html

※ 실제 구동화면


 


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