wit studio

벤처스퀘어 영문기사로 소개된 'Codinator' 2.0

채은석 — Fri, 20 Jan 2012 17:57:47 +0900

http://venturesquare.net/1884

"Codinator 2.0 will be an independent and cross-platform version of the software which can be installed on both Windows and Mac computers."

벤처스퀘어에서 해외용으로 작성하는 영문기사에 저희 코디네이터가 소개되었네요.
하루 빨리 개발하여 많은 분들께 선보이고 싶습니다

자꾸 기사만 나오는 것 같아 죄송스럽지만 그만큼 기대도 크다는 것 으로 받아 들이고 열심히 만들고 있습니다. ^_^
'GUI 디자인 전용 툴' 코디네이터 2.0 많은 기대 부탁드립니다.

사용자의 편리성을 고려한 모바일 어플리케이션 디자인 -`버튼` 편

가람유 — Wed, 11 Jan 2012 03:05:37 +0900

안녕하세요. 가람유입니다.
경험이 없을 초창기에는 모바일 어플리케이션을 디자인 하면서 난항을 겪는 부분이 있기 마련입니다.
그 중 한가지가 바로 '버튼의 크기'인데요. :)

iOS에서 기본으로 제공하는 버튼을 사용하는 경우는 예외지만, 대체로 디자인을 하다보면 새로 버튼을 디자인 하기 마련입니다.
하지만, 막상 예상치 못하게 크기가 너무 크거나 작은 경우가 있지요.
과연 사용자가 편리하게 사용할 수 있는 버튼의 크기는 어떻게 고려해야 할까요?
몇 가지 어플리케이션으로 살펴봅시다 (!)

* 버튼의 크기는 모두 직접 측정하였으며, Shadow나 기타 Stroke에 외부 요인을 일부 배제하고 실질적인 버튼 영역만 계산하고자 하였습니다.
실질적인 개발과정을 고려해 치수를 대부분 짝수로 맞추고자 하였습니다. (!)
+ dpi 72의 640x960 기준입니다.

- 아이폰 어플리케이션 디자인을 하시는 분 들은 실제로 비교해 보시면서 감을 잡으시면 될 것 같네요. :)

'다음' 어플리케이션입니다. 실제 기기로 보시면 텍스트로 이루어진 버튼들은 작은 편 입니다.

그린 몬스터의 Flava 앱입니다. Flava는 대체로 아기자기 하기 보다는 큼직큼직한 버튼들이 눈에 확 들어옵니다. :)

개인적으로 SNS 앱 중 디자인이 가장 예쁘다고 생각하는 Path 입니다. 아기자기함이 바로 매력이라고 생각하는데요.
기기에서는 마냥 아기자기 해보였는데 , 예상외로 수치상으로는 작지 않은 편이네요. 최소한 이 정도 선은 고려하여 디자인 해야하지 않을까 합니다.

이건 아마 거의 모르실 텐데, VoteSpot 이라는 미국 앱스토어의 어플리케이션입니다.
기기로 보면 버튼이 굉장히 작게만 느껴집니다. (수치상으로 옮겨보니 평균 이네요.)
예전에 이 앱을 써보고 나서 대체 버튼 크기는 어떻게 고려 해야 할까? 라는 의문점이 들었지요. :)

좀 감이 오시나요?
갑자기 이러한 분석을 하게 된 이유는, 어플리케이션 디자인을 하다가 문득 막상 버튼을 만들었는데 "너무 작아서 누르지도 못하면 어떡하지?"
라는 생각이 문득 들었기 때문인데요. 그 해답을 다른 어플리케이션들은 어떻게 해결 했는지 알아보기 위함이였습니다.

참 신기한점은, 막상 수치상으로는 비교적 작지만 구조상으로 조화를 이루며 사람들이 편하게 사용하는 버튼들도 많다는 거예요.

결국 결론적으로, 가장 중요한 것은 바로 요 두가지가 아닐까 합니다.
버튼을 버튼답게 스타일링 하는 것과 최소한의 크기는 고려 하는 것(가로, 세로 30 pixel 이상) - 단지 제 소견일 뿐입니다. :)

+ 추가
애플의 iOS 휴먼 인터페이스 가이드 라인 문서가 있더군요. !
http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html

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

가람유 — Thu, 05 Jan 2012 20:38:59 +0900

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

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

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

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

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

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

starbucks application.psd

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

메리크리스마스 :)

채은석 — Thu, 15 Dec 2011 20:10:17 +0900

즐거운 연말 되세요~ :)

사용자의 가독성을 고려한 어플리케이션 디자인 - '서체' 편

가람유 — Sun, 27 Nov 2011 16:25:38 +0900

안녕하세요. 가람유 입니다~

예전에 한창 모바일 앱 UI 디자인에 빠져있을 때, 스스로 흡족해 했던 작품들을 디자인했던 적이 있었어요.
하지만 왠걸, 실제 아이폰에 옮기고 나니까 총체적 난국의 상황이 펼쳐지더군요.

오밀조밀 한것이 노트북 화면에서는 예뻤던 글씨들과 아이콘들 모두, 어플리케이션을 사용하는 사용자 입장에서 고려되지 않은 크기였고, 이는 디바이스 내에서의 가독성을 엉망으로 만들었습니다. 저는 이를통해 최악의 UI 디자인을 접할 수 있었구요. -_-; 노트북 화면에서 보이는 것이 다라고 생각했던 아주 초보적인 실수였던 거죠.

그 후로 저에겐 연구과제가 생겼습니다.

모바일 어플리케이션에서, 사용자가 한 눈에 식별할 수 있는 최적의 글씨 크기는 몇 인가?

노트북과 모바일 화면에서의 폰트 크기를 비교해 봅시다. 이는 나눔고딕을 기준으로 했습니다.
분명 노트북에서는 21~23 pt 사이즈가 정확히 식별이 되고 있는 것을 확인하실 수 있는데요. 하지만 모바일 상에서는 다르네요. 물론 식별은 됩니다. 하지만 사용자 입장에서의 가독성으로 따져봤을 때 매우 좋지 못하군요. 그나마 25 pt 이상부터가 괜찮은 가독성을 보여주고 있습니다.
여기서 가독성의 기준은 '사용자가 문자나 기호를 얼마나 쉽게 인식하고 판독하는지에 대한 능률의 정도` 입니다.

자 그럼 확대해서 보도록 하죠.

역시 29 pt가 가장 시원시원한 가독성을 보여주고 있네요.

여기서 한가지 의문점을 품어봅시다.

" 29 pt가 가장 시원한 가독성을 보여주고 있으나, 역시 컴퓨터 화면에서는 너무 큰 것 아니냐. 디자인시에 너무도 많은 공간을 서체에 할애 해야하는 것 아닌가? 25 pt 면 어떻고 27 pt 면 어떤지?"

이러한 의문점을 해결하기 위해 많은 사람들이 사용하고 있는 대표적인 어플리케이션들을 분석해 보았습니다.

<Facebook 모바일 어플리케이션>

보시는 바와 같이 모바일 페이스북인데요. 과연 페이스북은 몇 pt의 서체 크기를 반영하고 있을까요?
페이스북은 본문에 29 pt를 사용하고 있습니다,

이를 23 pt로 바꾸어 보았을 때, 가독성엔 어떤 변화가 있는지 테스트 해보죠.

(차례로 29 pt, 23 pt입니다.)

(차례로 23 pt, 29 pt입니다.)

가독성의 차이가 느껴지시나요? 사진상에서 보았을때랑 디바이스상에서 보았을때는 차이가 커서 이렇게 비교하는 방법은 옳지 않지만, 어느정도의 느낌은 받으실 수 있을겁니다. 디바이스 상에서의 차이는 훨씬~ 심하구요.

이번엔 트위터 공식 어플리케이션으로 비교해 봅시다.

<Twitter 모바일 어플리케이션>

트위터는 무려 서체의 크기를 30 pt 로 반영하고 있습니다. 트위터의 특성답게 최대 140자로 제한되어 있는 만큼 가독성은 뛰어난 편입니다!

마지막은 서체 크기 조절에 실패했던 제 예전 작품입니다. 데스크탑에서 예쁘게 보이면, 당연히 기기에서도 예쁘게 보일줄 알았어요.

아이폰에서 봤을 때 정말 테러블 그 차제였습니다. 글씨들과 아이콘, 버튼들은 모두 작아서 제대로 된 식별 불가능 했구요.
결국 재차 디자인을 해야만 하는 상황에 치닫았죠.

결론을 내려봅시다.

사용자가 한 눈에 식별할 수 있는 최적의 글씨 크기는? = 최소 23 pt, 최적화를 위해서는 29 pt가 적당하다.
(한글 기준)

저 같은 실수 하지마세요.... 우리 모두 즐거운 모바일 앱 디자인 라이프 합시다!

(+) iOS 디자인 파트별로 사이즈를 정리해 보았습니다. :)

<즐거운 모바일 앱 디자인 라이프 시리즈>

1. 클라우드를 이용한 모바일 어플리케이션 디자인
2. 사용자의 가독성을 고려한 어플리케이션 디자인

위트스튜디오가 벤처기업인증을 받았습니다.

채은석 — Fri, 25 Nov 2011 16:40:04 +0900

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

클라우드를 이용한 모바일 어플리케이션 디자인

가람유 — Mon, 21 Nov 2011 20:55:40 +0900

안녕하세요! 인사드립니다~
저는 wit studio에서 디자인 인턴을 맡고 있는 가람유입니다! (으악 성이 가씨는 아니예요. -_-!;;)
~~고3이죠. -_-...으아 좋지 않아....~~

앞으로 여러분들에게 모바일 어플리케이션 디자인을 하면서 터득한 여러가지 팁을 전해드리고자 합니다! :)

오늘 준비한 포스팅은 '클라우드를 이용한 모바일 어플리케이션 디자인'인데요.

모바일 어플리케이션을 데스크탑 내에서 하기엔 많은 한계점이 존재하게 됩니다.

컴퓨터내에서 보는 해상도와, 모바일 화면에서 보는 해상도는 확연히 다를 뿐더러, 아무리 컴퓨터 화면 내에서 오목조목 예쁘게 구성하더라도 막상 모바일 기기에서는 매우 오밀조밀하며, 개체의 크기가 확연히 작게 나타나므로 사용자가 실제로 사용하는데엔 적합하지 않은 UI가 되는 경향이 있습니다. ;_;

이를 어떻게 하면 효과적으로 해결할 수 있을까 고민 하다가 찾은 해결책이 바로 '클라우드' 였습니다.
기기에 직접 넣어보지 않고는, 컴퓨터 화면과 모바일 화면의 디테일한 차이점을 알 수 없구나라는 결론이 내려졌기 때문인데요.

<사진 1-1> 매우 잘못된 어플리케이션 디자인의 예.
노트북 화면에서만 잘 보이고 있죠. 아이콘의 크기, 글씨의 크기 모두 꽝입니다. 제대로 식별이 되지 않고 있어요.

'클라우드 서비스' 를 이용하면 이를 매우 쉽게 확인할 수 있습니다. :)

아이폰 화면에서 어떻게 보일지 궁금하다면!

방법은 매우 간단합니다. 아마 '클라우드'라는 말만 듣고도 '아~' 하신 분들도 있을거라 추측되는 만큼...
포토샵에서 저장시에 아이폰 레티나 해상도인 '640x960'에 맞추어 저장을 해주세요.

그리고 클라우드 서비스를 이용해서 업로드를 하면 되는데요. (모바일 어플리케이션 또한 존재하는 서비스로...)
저는 '다음 클라우드'를 이용하고 있고 이 외에도 '네이버 N드라이브', 'Dropbox'등이 있지요.

클라우드에 파일을 업로드 한 뒤 (데스크탑용 어플리케이션을 사용하시면 더욱 편합니다. -_-b!!)

모바일 어플리케이션으로 접속하여 확인 후 저장을 하시면 됩니다. :) (그 전에 모바일에도 앱을 깔아주세요 ;ㅁ;)
그럼 모바일 클라우드 보관함 뿐만 아니라 사진첩에 또한 저장이 되기 때문에 매우 편리하죠!

끝! 간단하죠! :) 실제로는 1분도 걸리지 않는답니다. 바로바로 확인하면서 스스로 피드백을 줄 수 있다는 점이 최대 강점인듯 해요.

함께 알고 있으면 더 즐거운 모바일 디자인 라이프가 될 것 같아서 준비해 보았습니다!

세계최초의 UI 디자인 전용툴이 개발되고 있습니다. (코디네이터 2.0)

채은석 — Tue, 08 Nov 2011 22:48:18 +0900

'코디네이터' 1.0을 성공적으로 런칭한 후 저희 제품을 이용한 약 2만여건의 프로젝트 생성, 그리고 2천여 다운로드를 기록하는 성과를 이루어 내었습니다. 국내보다 해외에서 더 많은 사용자들이 사용한 사실도 확인하였구요. 하지만 꾸준하게 단점으로 지적받았던 '플러그인 형태'와 'MS플랫폼 종속'의 문제는 계속 저희의 발목을 잡곤하였죠. 그리고 제품의 컨셉이 좋아 다른 플랫폼으로의 확장도 좋겠다는 의견도 많았었구요.

결국 '코디네이터'의 새로운 버전인 2.0 부터는 '독립툴'로서 개발하자는 결론에 이르렀고, 프로그램 개발에 매진하여 연내 베타테스트를 실시를 계획에 두고 있습니다.(윈도우, 맥 지원)

기존의 옷을 벗고 새로 태어날 코디네이터는 완전한 'UI 디자인 전용툴'이며, 앞으로 더 많은 사용자들에게 의미있는 프로그램이 될 수 있도록 끊임없이 노력하겠습니다. 많은 사랑 부탁드립니다! '0'

------------------------------------------------------------------------------------------------------------------------

앞으로 꾸준히 제품의 개발 과정과 기능 소개 등을 공유하겠습니다. :)

먼저, 현재 약 80% 정도 완성된 화면을 공유합니다.
기존의 디자인 재료, 컬러휠, 색맹/색약 시뮬레이터 등의 기능이 모두 포함되었고, 다양한 해상도에 곧바로 대응할 수 있는 레이아웃 기능과 이미지 자동 내보내기및 GUI 가이드 관련 기능(좌표/크기 출력 및 수치 계산 등)이 추가되었습니다. 기능에 대한 더 자세한 이야기는 다음에 소개하겠습니다.

위트스튜디오가 이코노미스트에 소개되었습니다.

채은석 — Mon, 07 Nov 2011 13:51:23 +0900

창업관련 특집기사로 저희 위트스튜디오의 공동 창업자가 이코노미스트 표지를 장식!
모비틀, 애드투페이퍼, 스타일쉐어의 대표님들도 함께하였습니다.
10년후에도 모두 저렇게 웃으며 함께할 수 있기를...

온라인 기사 : http://news.naver.com/main/hotissue/read.nhn?mid=hot&sid1=101&cid=671015&iid=11920906&oid=243&aid=0000002089&ptype=011

Productivity Future Vision (2011)

채은석 — Mon, 31 Oct 2011 18:47:26 +0900

Microsoft OfficeLabs' latest productivity of the future film. "Watch how future technology will help people make better use of their time, focus their attention, and strengthen relationships while getting things done at work, home, and on the go." (Published: Oct. 2011)