보관물

Posts Tagged ‘Design’

개발뉴스 : 1월 25일 (2013년)

– 깔끔하게 게이지를 표시할 수 있는 javascript plug-in – ‘justGage’ (MIT 라이센스)
홈페이지 : justGage.com / 코드 소개 블로그 : http://goo.gl/XsDdo
justGage 샘플

– Canvas 태그를 사용에 대한 간단한 아티클 : http://goo.gl/KuGxF
Canvas 태그 사용

– 모바일 디자인 패턴 사이트들을 모아둔 아티클 : http://goo.gl/vcjkZ

Advertisements

개발 뉴스 : 8월 8일 (2012년)

– jQuery Mobile을 이용하는 방법을 샘플 기반으로 간단하게 소개한 영문 아티클. 초급이신 분들이게 권합니다. : jQuery를 이용한 5분 가이드

– 웹페이지의 이미지를 전체화면으로 볼 수 있도록 처리하는 jQuery 예제. 영문 아티클이지만 소스코드만 쭉 훑어 보아도 이해가 갑니다. : jQuery full-screen images

– HTML5 튜토리얼 중에서 15가지를 모아둔 영문 아티클. 몇가지 괜찮은 것이 있습니다. 특히, Grid기반 웹 디자인 하는 부분, 음악과 같이 보여지는 슬라이드 예제 등을 초급자들도 활용이 가능해 보입니다. : 15 Most useful HTML5 tutorials

– flip counter를 포함해서 jQeury를 이용해서 flip 효과를 주는 예제 모음 영문 아티클. : 10+ Best jQuery flip effect plug-in

– javascript에 디자인패턴을 일부 적용하고, OOP와 유사한 형태를 만드는 내용의 아티클. javascript에 대한 이해와 패턴에 대한 이해가 있는 중급 이상 개발자에게 유용해 보입니다. 역시, 영문자료. : Scalable javascript application design

– HTML5 Canvas에 격자를 그려넣는 매우 짧은 아티클. 간단하게 Canvas에 대한 감을 잡고, 응용에 활용하기 좋은 샘플. : Drawing a grid on HTML5 canvas

개발 뉴스 : 4월 20일

– 모바일 디자인 자료 모아둔 곳입니다. 영문자료지만 이미지 중심으로 되어 있어 보기 편합니다. : http://goo.gl/ronPn http://goo.gl/Br4MK http://goo.gl/JNbs3

– 페인트용 jQuery 플러그인. 성능 검증은 안 했지만 사용법도 간단히 있습니다. : http://goo.gl/oVH0m

– HTML5가 포함된 일종의 템플릿 모음. 처음 시작하는 프로젝트에서 필요한 요소들을 모아 두었다고 하네요. 개발 처음 시작할 때 한번 검토해 볼만… : http://html5boilerplate.com/

모바일 앱 – 안드로이드 디자인

최근에 모바일 개발자들 사이에 화제가 되었던 뉴스 중에 하나가 바로 안드로이드 디자인 입니다. 물론, 기존에도 안드로이드의 UI에 대한 가이드가 전혀 없던 것은 아니지만, iOS의 Human Interface Guidelines에 비해 매우 단순하여 제공하는 컨트롤 사용법을 설명하는 수준이였다고 해도 무방합니다. 이번 발표로 많은 전문가들은 구글이 ICS(Android 4.0)를 통해 최초로 플랫폼 완성도에 자신감을 갖고, 이제는 디자인과 사용성에 집중하려 한다고 평가하기도 합니다.
안드로이드 디자인
그런데, 제가 이 가이드에서 인상적으로 본 부분은 PATTERNS에 포함되어 있는 Pure Android 입니다. 해당 페이지의 서문은 아래와 같습니다.
안드로이드 .vs. iOS

'Most developers want to distribute their apps on multiple platforms. As you plan your app for Android, keep in mind that different platforms play by different rules and conventions. Design decisions that make perfect sense on one platform will look and feel misplaced in the context of a different platform. While a "design once, ship anywhere" approach might save you time up-front, you run the very real risk of creating inconsistent apps that alienate users. Consider the following guidelines to avoid the most common traps and pitfalls.
(대부분 개발자들은 자시의 앱이 여러 플랫폼에서 배포되기를 원합니다. 안드로이드 플랫폼 앱을 계획하고 있다면, 플랫폼 별로 다른 관행과 규칙이 있다는 것을 명심하세요. 하나의 플랫폼에 완벽한 디자인 결정은 다른 플랫폼에는 이질적으로 느껴지게 됩니다. '한번 디자인해서 여러 플랫폼에서 사용한다.'는 접근 방식으로 시간 절약을 하는 것은 앱 사용자들에게 소외감을 주는 일관성 없는 앱을 만들 위험을 감수해야 합니다. 아래 가이드라인을 고려해서 이런 잠재된 위험에 빠지지 않도록 고려하시기 바랍니다. - 필자 의역 * 오류가 있으면 알려주세요!)'

pure Android에서는 대표적인 5가지 가이드라인을 표시하면서 iOS와 비교하고 있습니다. 실질적으로 iOS의 UI와 유사하게 사용하지 말 것을 권유하는 것입니다.

그러나, 실제로 개발하는 과정에서 개발자나 기획자 그리고 발주처 모두 이런 부분을 간과하는 경향이 있습니다.
대표적인 이유는 아래 두가지라고 생각됩니다. 그리고, 이유에 대한 개인의견을 같이 적어 보았습니다. (지탄의 대상이 될지도…)

  • iOS앱과 안드로이드앱의 UI가 다르면 사용자가 혼란스럽다.(사용에 불편하다 등) : 실제로 개발/테스트/검수하는 과정에서만 이 두 플랫폼을 같이 사용합니다. iOS사용자는 iOS UI에 익숙하고, 안드로이드 사용자는 안드로이도 UI에 익숙하죠. iOS 같이 만든다면 안드로이드 사용자는 더 혼란스러울지 모릅니다. (서문에 밝힌것 처럼)
  • 두벌의 이미지 설계에 비용이 많이 든다. : 안드로이드와 iOS는 화면 비율부터 다릅니다. 특히, 안드로이드의 다양한 화면 비율을 제대로 맞추지 못할 것이라면 표준 UI가 더 세련되고 잘 보여집니다. 컨텐츠 영역 위주로 디자인하는 것은 어떤가요?

이상 안드로이드의 디자인에 대한 내용과 생각을 적어 보았습니다.
앞으로 더욱 아름다운 안드로이드 플랫폼을 기대해 봅니다.

참고 URL
* Android Design
* Pure Android

HTML 5 뉴스 : 5월 16일.

주말 동안 정리를 안 햇더니. 이것 저것 정리해 둘게 많습니다.

– Sencha의 API에 대한 소개도 있었는데, 이번에는 Animator 입니다. CSS3 기반으로 만들어주는 툴을 베타 공개하고 있습니다. : http://goo.gl/j23dm

– CSS3 학습이나 개발 시에 도움을 받을 만한 툴을 소개한 아티클입니다. : http://www.catswhocode.com/blog/?p=4280

– 미디어쿼리를 이용해서 작업하는 간단한 설명과 그 예제를 담고 있는 아티클. 사용법 설명이 간단해서 짧게 익힐 때 간편할 듯합니다. : http://goo.gl/y2GUX

– HTML5에서 사용자 위치정보를 활용하는 방안에 대한 소개. 많은 부분은 이미 알고 있는 것이지만 연속적으로 확인하는 것은 나중에 활용해 보아야 겠군요 : http://goo.gl/c5rwM

– Change URL hash without page jump – 간단한 팁 : http://wp.me/proQm-gZ

– Paypal 개발자 네트워크에서 제공하는 튜토리얼. 실시간 경매 시스템을 GAE, Paypal API를 이용해서 만드는 HTML5 내용입니다. : http://goo.gl/90UMi

– HTML5로 제작된 웹사이트 모음. 간단하게 볼 만하군요. 특히, Single frame design 맘에 듭니다. : http://mustified.com/?p=925

– 아이폰 기반의 웹앱을 만들때 사용할 수 있는 팁.
1. 홈버튼 만드는 방법
2. 로딩 이미지 넣기 <- 이건 몰랐네요..!
3. 모바일 사파리 UI 없애기
4. 화면 확대, 축소 지정
5. 화면 회전 체크하기
6. 전화걸기 문자보내기
내용이 있습니다. : http://j0kers.tistory.com/132

%d 블로거가 이것을 좋아합니다: