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


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


 
저작자 표시
신고
지난시간에 Windows환경에서 Iphone App.을 개발할 수 있는 DragonFire SDK에 대한 간단한 소개와 DragonFire SDK를 다운로드 받는 방법에 대해 간단하게 살펴보았습니다. 원래 예정이라면 이번시간에 DragonFireSDK의 기능과 동작 원리 등에 대해 알아볼 예정이 었지만.. 너무 기대했었던 탓일가요? DragonFireSDK를 처음 받아보고, 살펴본 결과 생각했었던 수준에 비해 많이 부족하다는 느낌이어서 조금더 개선되었으면 하는 마음으로 몇가지 아쉬웠던 부분들에 대해서만 포스팅 하겠습니다.

부족한 기능

가장먼저 DragonFireSDK를 처음 실행시켜보면 "설마 기능이 이게 다야?" 라는 느낌 입니다. 현재 버전에서 약 45가지 정도의 기능을 제공하고 있지만, 비슷한 내용의 기능들을 묶어 살펴보면 텍스트, 이미지, 뷰, 사운드, 파일, 타이머, 터치를  지원합니다. 없어선 안될 중요한 요소 들인건 확실하지만 위에 나열한 기능이외의 기능들은 제공을 하고 있지 않습니다.

텍스트 출력을 지원하긴 하지만, 이미지 폰트를 기반으로한 텍스트 출력만 지원하기 때문에 텍스트 출력또한 자유롭지 못합니다.. 가장 아쉬운 부분은 IPhone에서 사용가능한 기본 컨트롤(TextBox, ScrollView ...)등을  사용할 수 없기 때문에 사실상 App을 개발한다기 보다는 화면에 무언갈 그린다는 느낌이 강합니다.

※ DragonFireSDK에서 제공하는 내용은 http://www.dragonfiresdk.com/help/DragonFireSDKHelp.html 에서 확인 할 수 있습니다.

필요 없는 기능

제공되는 기능이 많지 않았기에 몇몇 눈에 띄는 기능들에 대한 Description을 확인해 봤습니다. 그중 DeckShuffle이라는 메서드가 있는데 설명을 보니 "Shuffle a deck of 52 cards" 라고 설명되어 있습니다. 이기능이 왜 여기에 포함되어 있는지 알수는 없습니다. 그런데, DragonFireSDK 홈페이지에서 "Proven Technology" 라며 소개한 카드게임을 보고 의문이 풀렸습니다. 아마도 카드게임에서 사용된 코드를 기반으로 SDK를 구현한게 아닌가 싶은 생각이 듭니다.

SDK 릴리즈를 하기에 앞서 제공되는 메서드들을 다시한번 체크했으면 하는 아쉬움이 남습니다.

황당한 빌드

윈도우에서 VisualStudio와 DragonFire SDK를 이용해 개발을 하고 빌드를 하게 되면, 위 그림과 같이 DragonFire SDK에서 제공하는 아이폰 모양의 스킨(?)에 개발한 SDK를 이용해 개발한 App이 동작을 합니다. 당연히 Windows환경에서 VisualStudio를 이용해 빌드 되었기 때문에 확장자는 EXE로 빌드 되었으며 윈도우 에서만 동작합니다.

만약 이렇게 개발한 App을 아이폰에서 테스트 하고 싶다면 소스코드를 DragonFireSDK의 Build Server에 업로드 하여 빌드해야 한다고 말하고 있습니다. 즉, 소스코드를 업로드하면, Mac OS X가 설치된 컴퓨터에서 빌드해서 보내주겠다는 건데, 일단 빌드를 위해 소스코드를 업로드 하는 과정이 필요하다는 점이 불편 할 수 있으며, Windows 환경에서 나타나지 않던 오류가 Mac 환경에서는 나타날 수 있다는 점이 가장큰 문제 일것 같습니다.

그리고 소스코드 업로드시 반드시 하나의 파일만 업로드 가능하기 때문에 규모있는 App을 개발 해야 하는 개발자라면 몇만줄짜리 코드를 관리해야 할 수도 있습니다.

마무리

아직 DrafonFireSDK가 범용적인 SDK로 활용되기에는 완성도 면에서 다소 아쉬운 부분이 있어 보입니다.  하지만 아직 초기 단계고 앞으로 더 발전 할 수 있다 생각하기에 새로운버전이 출시되었을때 좋은 내용으로 다시 포스팅 할수 있기를 기대합니다.

신고

Background

간혹 지인들은 제가 아이폰을 사용하고 있는걸 보면 아이폰용 App.을 개발 하는줄알고 이것저것 질문을 하지만, 사실전 Mac OS X에서 인터넷 서핑조차 힘들어하는 사람중에 한명입니다. AppStore가 한참 떠들석 했을 때 "App. 개발을 해보고 싶다." 생각은 했었지만 아이팟 터치가 없었지만, 그것보다 Mac OS X에서 개발해야만 한다는 이야기를 듣고 미루고 미루고 미루다가 오늘에 이르게 되었습니다.

그런데 한달정도 전에 우연히 한 외국 업체가 Windows 환경에서 IPhone App.을 개발 할 수 있는 SDK를 제공한다는 소식을 접했습니다. 처음에는 반신반의 했지만, 어쩃든 그동안 생각만 해왔던 내용들을 익숙한 환경에서 시작 해 볼 수 있다는 생각에 해당 업체 홈페이지에 접속했습니다. 홈페이지 주소는 http://dragonfiresdk.com/ 입니다.

DragonFire SDK라는 이름으로 서비스 되고 있는 이 SDK는 홈페이지 메인 화면에서 바로 확인 할 수 있듯이 Windows에서 Microsoft C/C++을 이용해 IPhone 개발을 할수 있다고 소개하고 있습니다. 홈페이지를 살펴보니 DragonFire SDK를 다운로드 받기 위해서는 $49.95를 주고 구입하거나 이메일 주소로 신청(베타테스터 신청)하면 DragonFireSDK를 간단하게 테스트해볼 수 있는 버전을 제공 해주고 있습니다.

이메일주소를 입력하고 Submit을 하면 이메일로 DragonFire SDK를 제공받을 수 있다고 합니다. 그럼 저도 신청을 하고 다음시간에 DragonFire SDK에 대해 더 살펴보도록 하겠습니다.

신고