전자신문에서 코디네이터를 만드는 저희 위트스튜디오의 소식을 전해 주었습니다.

기사에도 밝혀져 있듯이 코디네이터 최신버전(1.1)은 현재 전세계에서 사용중이고, 프로젝트 생성건만 35000여건을 넘어서고 있습니다.

플랫폼을 가리지 않고 동작하는 코디네이터 2.0이 나오면 더 좋은 반응이 예상됩니다. 많이 많이 사랑해 주세요~

(인터뷰 사진이 너무 엄하여 자체 모자이크 처리 하였...-_-...)


기사원문보기






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

안녕하세요. 가람유입니다! 오랜만에 인사드립니다. :)


아이폰 모바일 어플리케이션을 디자인을 할때 가장 고민 되는 것은 네비게이션 스타일링과 버튼 스타일링입니다.

작은 요소로 보이지만, 그 두가지 요소가 어플리케이션의 전체 분위기와 색상을 좌우하는 만큼 UI 스타일링시 크게 고려되어야 할 부분인데요.


포토샵으로는 원하는 텍스쳐를 통해 스타일링을 하기가 쉽지 않지요. 

GUI에 특화된 wit studio의 Codinator를 쓴다면 이러한 스타일링쯤이야 10초면 뚝딱 완성할 수 있을텐데 말이예요. ;_;


몇 가지 스타일링 된 네비게이션과 버튼 PSD를 준비해 보았습니다. 원하는 색상을 넣어 무궁무진한 스타일로 사용하실 수 있어요.

영리 목적, 비영리 목적의 사용이 모두 가능합니다~



navigation (all).psd


저작자 표시
신고


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


예전에 한창 모바일 앱 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. 사용자의 가독성을 고려한 어플리케이션 디자인
 


 
저작자 표시
신고

호응에 힘입어 벌써 4번째 세미나를 개최하게 되었습니다.
UI 디자인을 쉽고 효율적으로 할 수 있는 방법을 알려드릴 예정이오니 많은 참석 부탁드립니다.

일시 : 2011년 8월 17일 (수) 19시 00분 ~ 21시 00분
장소 : 강남 토즈2호점


코디네이터 (쉽고 빠른 UI 디자인 툴)

http://codinator.co.kr

코디네이터는 고품질의 UI 디자인을 아주 쉽고 빠르게 제작할 수 있는 디자인솔루션입니다.
개발자, 디자이너 누구나 몇번의 클릭만으로 나만의 UI 디자인과 테마를 아주 높은 퀄리티로
제작할 수 있는 방법이 바로 여기에 있습니다.
(최근 1.1로 버전 업데이트가 되면서 퍼포먼스가 향상되었습니다.)

 ※ 제품의 버전이 1.1로 업데이트 되면서 '무료'로 결정되었습니다.
세미나 당일날 크로스플랫폼 버전과 관련한 '무료'정책의 배경을 설명해 드립니다. 

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

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

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

Codinator 소개 동영상 : http://www.youtube.com/watch?v=hpy2yhDJksU





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



기사 링크 : http://www.ilovepc.co.kr/bbs/board.php?bo_table=software&wr_id=603

PC사랑 6월호에 코디네이터가 소개되었습니다. 내용은 간단한 제품 소개 및 사용방법입니다.
자세한 내용은 PDF 원본 파일을 참고하세요~!
(중간 중간 오타 및 실수가 눈에 띄네요 ㅜ_ㅜ)




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