앱디자인 전용 툴 '코디네이터' 2.0 이 9/1 부터 약 한달간 클로즈베타 서비스를 시작합니다.

 

1.1 버전 이후로 더욱 강력하고 놀라운 기능으로 돌아온 코디네이터에 많은 관심을 부탁드립니다. ^0^

클로즈베타 테스트를 통해 중점적으로 기본 사용성을 테스트하고 테스트 결과에 따라 부분적인 기능을 추가하거나 사용성을 개선하여 오픈베타 버전을 런칭할 예정입니다.

 

전세계 디자이너들이 쾌적하고 효율적인 디자인 작업을 할 수 있도록, 그리고 누구나 열정만 있다면 손쉽게 앱디자인 작업을 할 수 있도록 좋은 툴을 만들어 가겠습니다.

 

 

 

www.codinator.net

(문의 사항은 service@codinator.net 으로 부탁 드립니다.)

 

 

 

 

 

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

도쿄의 인공섬인 오다이바에 위치한 소니과학관에 반영구전시될 태블릿용 안드로이드 애플리케이션을 제작하였습니다.

고대/현대 시대를 넘나들며 바닷속 생물을 캐치하며 정보를 얻는 교육용 애플리케이션으로 원통형으로 설치된 구조물 안에서 증강현실을 이용하여 체험하는 방식입니다. 설치 후에 일본 아이들이 '우왓' 혹은 '스고이~"라며 좋아하는 모습을 보니 재밌고, 괜히 뿌듯하더군요! 혹시나 도쿄에 갈일이 있으신 분들은 오다이바 아쿠아시티에 위치한 소니과학관에 들러 Ocean Scope를 체험해 보시길 바랍니다!

 

기기는 Sony Tablet S를 사용했으며 클라이언트 앱은 Android환경 위에서 동작하고 있습니다. 그리고 사용자의 이용 패턴들을 수집하고 처리하기 위해서 서버측 부분에서는 Windows Server 2008과 WCF REST를 이용해 구현되었습니다.

 

 

 

 

 

 

 

 

 

 

마지막 서비스 컷으로...

시부야를 점령하고 있었던 아이유!!

 

 

 

 

 

 

 

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




연말에 기분좋은 소식을 전해 드립니다. :)
위트스튜디오의 메인 서비스 '코디네이터'의 혁신성과 기술성을 인정받아 법인설립 5개월만에 벤처기업인증을 받았습니다!!
저희 위트스튜디오는 국내 스타트업으로써는 흔하지않게 Tool개발을 하고 있습니다. 꼭 세상에 좋은 의미로 남을수 있는 Tool이 될 수 있도록 '제대로' 만들어 보겠습니다.

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

포토샵으로 디자인된 작업을 모두 끝내도 애플리케이션 개발을 하기 위해서는 개발자에게 각 이미지를 모두 잘라주거나 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는 적재적소에 사용하면 다양하고 풍부한 느낌을 낼 수 있는 기능이지만 이런 사소한 실수를 유발할 수도 있으니 주의하세요! 

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



레티나 디스플레이의 등장으로 더 정교하고 똑 떨어지는 GUI 디자인이 요구되고 있고, 더불어 크기 변경 이슈가 자주있기 때문에 보통 Path를 기반으로 한 Rectangle Tool를 자주 사용합니다. 하지만 이 과정에서 많은 분들이 번거로워 하는 부분이 있는데 Path가 Pixel에 딱 맞아 떨어져 그려지지 않는 것입니다.


보통 이런식으로 픽셀에 딱 맞지 않고 애매하게 그려집니다.



이런 애매한 상황의 경우 보통 확대를 한 후 화살표키로 Path 한땀 한땀 위치 이동을 시켜 픽셀 정리를 하는 것을 많이 보았습니다.




이런 작업조차 하지 않는다면 아래와 같은 상황이 일어나겠죠. 좌측과 우측의 네모가 확연히 차이 납니다. Path 조정을 하지 않은 좌측 박스의 경우 경계선이 흐릿합니다. 조정을 마친 우측 박스의 경우 경계선이 또렷하죠.


레이어 스타일 조정을 통해 스타일링 작업을 하니 더 확연히 차이나는 모습입니다.



한번에 그렸을 때 아래처럼 정확히 그려지는 것이 가장 좋은 케이스겠죠.
포토샵 내부적으로 픽셀에 딱 맞아 떨어져 그려지도록 하는 옵션이 있습니다.



Rectangle Tool이 활성화 된 상태에서 상단 부분을 보면 작은 '화살표 버튼'(1)이 하나 있습니다. 그 버튼을 누르면 Tool의 옵션 사항이 나타나는데 여기서 'snap to pixel'(2)을 체크하면 그 이후로는 정확히 픽셀에 맞게 똑 떨어지는 느낌으로 그려집니다.



다른 모양을 그릴때도 여러가지 옵션이 있는데 응용 방법에 따라 얼마든지 다양한 모양을 구현해 낼 수 있습니다.


 

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