2013년 6월 16일 일요일

웹폰트 설정

웹폰트를 설정할 때 크로스브라우징을 위하여 font 타입이 여러가지가 존재 한다.
  • eof : 익스플로러 4~8,
  • woff : 표준 Web Open Font Format,
  • otf : opentype,
  • ttf : truetype,
  • svg : Scalable Vactor Graphoics
폰트가 ttf파일을 제공하므로 ttf파일을 eot와 woff파일로 변환하여야 한다.

1. ttf > eot 변환하는 방법

2. ttf > woff로 변환하는 방법
sfnt2woff.exe을 다운받아 sfnt2woff.exe에 드래그앤드롭하면 woff로 변환!

3. 폰트설정

 @font-face{
font-family: 'NG';
font-style: normal;
font-weight: normal; 
src: url('font/NanumGothic.eot'); 
src: url('font/NanumGothic.eot?#iefix') format('eot');
src: local('☺'), 
url('font/NanumGothic.woff') format('woff'),
url('font/NanumGothic.ttf') format('ttf'),
url('font/NanumGothic.svg#webfontFHzvtkso') format('svg');
}



 






4. IE호환성 모드에서 eot폰트를 로딩할 때 실패하는 경우가 있다. 이때 위에 표현한대로
src: url('font/NanumGothic.eot');
src: url('font/NanumGothic.eot?#iefix') format('eot');
이와 같이 설정하여 주거나, meta 태그를 추가하여 익스플로러가 호환성 모드에서 빠져나오게 강제로 지정한다.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

2013년 5월 8일 수요일

김지현 다음 신규사업 이사 "3년후 물건-물건 연결 인터넷 시대 온다"

본문은 제목과 다르지만,
기사를 보던 중 세계적으로 주목을 받고 있고 블루오션으로 떠오른 M2M/IoT 영역에 대한 소개차 내용 올립니다.
 
-----------------------------------------------------------------------------------------------------------
 
화분에 심어 놓은 센서가 꽃이 목마르다는 걸 전자 물뿌리개에 알리고 자동으로 물이 뿜어 나오게 한다. 강아지 목에 달린 센서가 강아지의 배고픈 상태를 파악해 주인에게 메시지를 전송하고 먹이통을 통해 일정량의 사료를 내준다. 바로 한국전자통신연구원(ETRI)이 장기 과제로 추진 중인 연구사업이다. 

사람끼리 정보를 주고받던 시대가 이제 사람과 사물, 나아가 사물과 사물끼리 인터넷으로 소통하는 시대로 진화하고 있다. 바로 `사물 간 인터넷(Internet of Things)` 시대다. 

2015년에는 150억개 기기들이 인터넷에 연결될 것이란 전망이 나왔다. 사물 지능 통신이라고도 불리는 `사물 간 인터넷`은 기기 사이에서 정보를 주고받아 동작을 제어하는 것을 의미한다. 우리 주변 사물들이 `커넥티드 디바이스(Connected Deviceㆍ연결형 기기)`로 변신해 일상생활 패러다임을 바꾸는 것이다. 

`사물 간 인터넷`은 가정, 산업, 국가 등 다양한 영역에서 각광받을 것으로 예상된다. 
42338 기사의  이미지
집에서 이용 빈도가 높은 냉장고를 예로 들어 보자. 인터넷과 연결된 냉장고 앞에 다가서면 디스플레이가 켜진다. "스파게티"라고 말하면 화면에 요리법이 일목요연하게 나타난다. 

이어 현재 냉장고 안에 보관 중인 재료와 구매해야 할 재료 정보가 눈앞에 펼쳐진다. 

스크린에서 `구매` 버튼을 터치하면 인근 슈퍼마켓으로 주문이 들어간다. 

요리법을 알기 위해 노트북을 켠 다음 인터넷을 검색할 필요도 없고 재료를 사기 위해 매장을 찾아야 할 번거로움이 사라진다. 냉장고가 알아서 사람이 필요한 정보와 주문까지 `원스톱`으로 해결해주기 때문이다. 

삼성전자를 비롯한 글로벌 IT 기업들은 홈 디바이스에 인터넷을 접목시키는 연구를 수년 전부터 진행해 오고 있으며 관련 제품 상용화를 준비 중이다. 

비단 냉장고뿐 아니라 먼지가 쌓이면 알아서 작동하는 청소기, 빨랫감 상태를 파악해 물살과 세제량을 조절해주는 세탁기 등이 조만간 선보일 것으로 업계는 내다보고 있다. 

미국 자동차 메이커인 제너럴모터스(GM)가 개발한 `온스타`는 대표적인 사물 지능 통신이다. 

스마트폰이 자동차와 무선통신을 할 수 있기 때문에 사고나 도난시 바로 신고가 들어간다. 스마트폰으로 자동차 위치와 상태를 확인하고 시동도 걸 수 있다. 거시적으로는 지능형 전력망(스마트그리드)을 이용해 실내 공기ㆍ에너지를 자동으로 조절해주는 스마트 빌딩과 적군의 위협을 감지하고 방어 태세를 갖추는 안보 시스템 등도 사물 통신 기술 발달로 정교해지고 있다. 

뇌가 없는 사물이 인터넷과 접목되면 사물 간 소통하는 과정에서 엄청난 데이터가 쏟아져나올 것으로 예상된다. 시장조사기관 IDC에 따르면 2020년께 생성되는 디지털 데이터 규모는 40ZB(제타바이트)에 이른다. 

이는 전 세계 해변 모래알 수(7해50경개)의 57배에 해당하며 40ZB를 저장한 모든 블루레이 디스크는 니미츠급 항공모함 424대의 무게에 달한다. 이 때문에 수많은 비정형 데이터를 모아 의미 있게 분석해주는 기술인 빅데이터가 각광받을 것으로 보인다. 
42338 기사의  이미지
빅데이터 시장이 형성된 지 5년이 채 되지 않았지만 빅데이터 활용은 기업을 중심으로 빠르게 확산되고 있다. 의류전문 업체 자라(ZARA)는 빅데이터를 통해 소비자 패션 트렌드를 분석하고 유행 디자인을 선보이는 회사다. 요즘에는 각 매장 판매ㆍ재고 현황에 대한 빅데이터 분석으로 효율적인 경영 관리를 하고 있다. 

2010년 도요타는 인기 중소형 차종에 대해 대량 리콜을 실시한 후 빅데이터 시스템을 도입했다. 처음에 불량 원인을 파악하지 못했던 도요타는 분석툴로 전 공정에 대한 데이터를 확보하고 분석해 문제점을 발견할 수 있었다. 

정보보안 업체인 시만텍은 빅데이터를 활용한 보안 분석 비즈니스를 하고 있다. 

자사 인터넷 보안 위협 데이터 수집 시스템인 `글로벌 인텔리전스 네트워크`를 활용해 해킹 정보를 수집하고 대응 방안 컨설팅을 지원한다. 미국 월마트는 소비 패턴 데이터를 활용해 유통 효율을 12%나 높였다. 

데이터 빅뱅 시대를 맞아 글로벌 기업들은 데이터를 비즈니스에 맞게 분석하는 전문가들을 키우고 있다. 인터넷 경매업체인 이베이는 임직원 1만7000여 명 중 `데이터 사이언티스트`를 포함해 약 6000명이 데이터 관련 업무를 맡고 있다. 세계 최대 전자상거래 업체인 아마존은 데이터 중심 조직 문화를 캐치프레이즈로 내걸고 있다. 창업자인 제프 베조스는 "우리는 어떤 데이터도 버리지 않는다"고 강조한다. 

하지만 국내에는 아직 빅데이터를 제대로 요리할 분석가들이 턱없이 부족한 실정이다. 소셜 네트워크상 데이터나 제조 공정 데이터를 분석하는 수준에 머물러 있다. 

`21세기 석유`와 같은 `빅데이터` 시장이 눈앞에 펼쳐진 가운데 빅데이터 전문가 양성이 시급하다는 목소리가 높아지고 있다. 

최준균 카이스트 IT융합연구소장은 "인터넷과 접목된 사물과 빅데이터가 시너지를 내는 과정에서 3차 산업혁명이 일어날 것"이라며 "유의미한 데이터를 뽑아내고 분석하는 것을 넘어 사물 자체가 지능적으로 데이터를 활용할 수 있는 기술까지 개발할 수 있도록 국가적 차원에서 인재 양성에 박차를 가해야 할 때"라고 강조했다. 
42338 기사의  이미지
모바일을 중심으로 사물끼리 인터넷을 통해 소통하는 시대가 됐다. 사진은 GM의 지능형 사물 통신 서비스인 온스타(On-Star)로 자동차 연료량을 점검하는 모습. <사진 제공=GM>

2013년 4월 30일 화요일

비즈니스 사고를 촉진하는 'fast track' 생각정리 툴킷



‘패스트 트랙’은 총 15단계에 맞추어 비즈니스 아이디어를 빠르게 정리할 수 있도록 설계되어 있습니다. 비즈니스를 이끄는 리더이자 열정가로서 창업에 대한 자신의 꿈과 출사표를 적어두는 페이지부터 시작해서 마지막으로 패스트 트랙을 통과하면서 느낀점들과 배운점들을 정리하는 페이지까지 하나의 비즈니스 아이디어가 어떠한 과정을 통해서 비즈니스 모델로 바뀌어갈지 직접적인 작성을 통해 체험해볼 수 있도록 구성되어 있습니다. ‘패스트 트랙’과 함께 15단계를 뛰어 올라가 볼까요?
  1. 당신의 아이디어는 어디에서 오는가 ? – 아이디어가 갖는 기회/위험, 그리고 아이디어에 내재된 창안자의 확신과 실패에 대한 요인과 가능성을 확인하는 일은 아이디어를 좀더 확장하기에 앞서 대면해야할 가장 힘든 부분이 될 것입니다.
  2. 아이디어의 가치와 차별화 포인트는 무엇인가? – 다른 이들의 아이디어와 무엇이 다른지, 아이디어의 어느 곳에 가치가 있는지를 찾아보고, 그런 아이디어가 어떻게 세상과 사람들에게 영향을 미칠지 생각해봅니다.
  3. 고객군을 정의해 볼까? – 비즈니스 아이디어라면, 그 아이디어에 가치를 느끼는 고객들을 만나는 일은 언제나 신나는 일입니다. 그 고객이 누구인지, 고객의 속성들과 니즈들을 정리해봅니다.
  4. 고객들에게 어떤 기능들이 제공되어야 할까? – 고객들을 속성과 특징에 맞추어 분할하고, 각각의 고객군들에게 어떤 기능들이 제공되면 좋을지 생각해봅니다. 모든 고객들에게 공통적으로 제공되는 기능들도 함께 정리해봅니다.
  5. 상품/서비스와 고객제공 기능들을 연결하면? – 기능들이 정의되었다면, 그들을 잘 결합하여 고객이 필요로하는 상품/서비스와 어떻게 연결할지를 생각해봅니다. 
  6. 상품/서비스에 적합한 채널들은 무엇일까? – 상품과 서비스들을 고객들에게 알리고, 경험할 수 있도록 하는 효과적인 접점들을 생각해보면서 어떤 채널들이 유효한지 정리해봅니다.  
  7. 어떤 파트너들이 함께해야할까?  – 비즈니스에서는 다양한 이해관계자들이 있습니다. 비즈니스를 시작하면서 어떤 파트너사나 제휴사들, 혹은 주변의 다른 스타트업들과 관계를 만들어야할지 고민해봅니다.
  8. 경쟁사분석을 통해 아이디어를 보강해볼까? – 비즈니스에서 다른 서비스/제품과 다른 점이 무엇일지 생각해보는데 있어서 시장에서 이미 경쟁하고 있거나 높은 성과를 내는 기업들/스타트업들을 참고하면 도움이 됩니다. 타사의 장점들, 시장에서의 높은 지위를 차지하고 있는 사례들을 조사해보고, 벤치마킹해봅니다.
  9. 상품,서비스의 가격과 순수익을 정해볼까 ? - 상품과 서비스의 가격을 정하는 일이 쉽지 않지만, 잘 생각해보면 비즈니스의 큰 수익원을 결정하는 일인지라 많은 노력이 필요합니다. 단계적으로 상품에 덧붙여질 부가가치들을 중심으로 상품이나 서비스의 가격을 설정해봅니다.  
  10. 비즈니스의 년간 매출을 추정해볼까? – 상품과 서비스의 가격이 결정되었다면, 이제 년간 기준으로 매출들을 추정해봅니다. 상품/서비스의 판매 이외에 용역, 라이센스등의 추가 매출원들이 있다면 년간 매출은 더 커질 수 있습니다. 
  11. 비즈니스의 년간 비용을 추정해볼까? – 매출을 위한 활동이나 경영활동등에는 비용을 수반합니다. 년간을 기준으로 어떤 비용들이 어디에 소요되는지 추정해봄으로서 현실적인 비용계획을 수립할 수 있습니다. 
  12. 비즈니스 실행계획 마일스톤을 만들어볼까 ? – 비즈니스의 주요 진척단계들을 타임라인을 기준으로 작성해봅니다. 언제 어떤 단계의 서비스와 제품을 시장에 출시할지, 그리고 어떤 이벤트와 마케팅으로 고객들에서 제품과 서비스를 알릴지 잠정적인 계획을 수립해봅니다.
  13. 고객/시장은 얼마나 증가할까? – 비즈니스가 성장하는 모습을 스스로 그려봅니다. 향후 3년동안 고객들은 어느정도 증가할지, 시장에서 어느정도의 시장점유율을 차지하면 좋을지 그려보면서 현실적인 기준들을 생각해봅니다.
  14. 매출/비용항목들을 간단히 분석해 볼까 ? –  1년을 기준으로 매출과 비용에 대해서 어느정도 추정이 완료되 면, 비용항목들을 기준으로 그룹핑해보고 각각의 항목군별로 어느정도의 비중을 차지하는지 정리해봅니다. 이를 통해서 매출구조를  앞으로 어떻게 바뀌어갈지, 비용중에서 어느부분들을 줄여야할지 생각해볼 수 있습니다.
  15. 무엇을 배웠는가 ? - 짧은 시간동안 아이디어를 비즈니스로 바뀌어보는 과정동안 알게된 내용들을 정리하는 내용들을 중심으로 정리합니다. 으로 구성되어 있습니 다. 비즈니스에서 누락되거나 미처 고려되지 못한 부분들, 부족한 부분들을 정리 해보고, 다른 한편으로는 비즈니스의 현실적 실행을 위해서 해결할 과제들과 고려사항들을 생각해봅니다. 

2013년 4월 24일 수요일

[번역] 모바일앱을 만들때 하는 10가지 실수

1. 플로우맵(Flowmap) 없이 와이어프레임이나 디자인을 시작하지 마라

와이어프레임이나 디자인을 시작하기 전에 잘 고민한 사용자 흐름도가 준비되어 있어야 합니다. 단순한 애플리케이션이라고 할지라도 잘 생각한 흐름도는 논리적이고 이성적인 네비게이션 구조를 줍니다.
또 중요하게 생각해야 할 점은 중요 기능의 화면이 숨어있는 것이 아니라 메인 화면에 근접해 있어야 한다는 점입니다. 많은 레벨의 네비게이션 요소들 속에 있으면 안되는 것이지요. 흐름도를 무시하고 화면을 그리게 된다면 사용자는 혼란스러워 하며 서비스를 종료시켜 버릴 것입니다.

2. 개발 공수를 무시하지 마라

디자이너가 만든는 모든 것은 개발자의 손을 거쳐야지만 생명을 얻게 됩니다. 가끔은 아주 단순한 디자인의 변경이 개발 시간을 아주 늘릴 수도 있습니다. 디자인을 하는 동안 기능에 대해 많은 생각을 해야 합니다.
다른말로, 디자인이 단순히 기능을 표현데만 그치면 안된다는 점입니다. 예를들어, 앱에 검색창이 있어야 하는데 어떤 디자이너가 쿼리가 입력되는 즉시 검색결과가 나오는 기능을 생각했을 수 있습니다. 하지만 이 기능은 상당히 많은 개발 시간과 노력을 필요로 합니다. 디자이너만 어떤 결정을 내리는 사람이 되어서는 안됩니다.

3. 낮은 해상도로 시작하지 말고 비트맵을 지양하라

레티나 디스플레이, 고해상도, 고밀도의 스크린에 맞게 먼저 디자인하여야 합니다. 당연한 이야기일 수 있지만 꼭 기억해야 합니다. 모바일 디바이스는 아주 많은 종류의 해상도를 가지고 있으며 점점 그 종류는 늘어나고 있습니다.(iOS 만 하더라도 4가지 종류의 해상도가 있습니다.) 높은 해상도에서 시작하여 그 스케일을 낮춰가는 것이 맞습니다. 거기에 디자인을 벡터로 작업하는 것이 래스터 이미지로 하는 것보다 훨씬 더 좋습니다.

4. 터치 영역을 작게 하지 마라

사용자의 검지 손가락끝의 크기는 1.6 에서 2cm 정도임을 기억해야 합니다. 더불어 사용자들이 빠르게 움직이며 작은 화면을 터치해야 한다는 것도 기억해야 합니다. 많은 기능과 버튼을 화면에 넣는 것은 어려운 일이 아닙니다. 하지만 버튼이 충분히 커야지만 쉽게 탭핑할 수 있습니다.

5. 아무 이유없이 인트로 애니메이션을 쓰지 마라

앱을 켰을 때 나오는 애니메이션들은 재밌습니다. 하지만 그것을 과용하면 안됩니다. 이런 애니메이션(예를 들어 Path 나 Thrillist’s JackThreads 와 같은 앱의 인트로)은 사실 기술적으로 앱이 로드되는 준비를 하기 위해 사용되는 것입니다. 그래서 사용자가 앱에 접근하는 시간을 늦추게 하는 것이지요. 만약 당신이 이런 애니메이션을 사용하고자 한다면 아주 빠르게 그리고 사용자가 기다릴만한 가치가 있도록 만들어야 합니다.
앱이 로드되면 애니메이션에서 변형된 스틸 이미지가 끊김없이 나타나야 합니다. 갑자기 스틸 이미지로 변화하는 것은 좋지 않습니다.

6. 사용자가 그냥 기다리게 놓아두지 마라

앱이 로딩하는 시간 동안 사용자를 그냥 두는 것은 사용자에게 앱이 잘 작동하고 있지 않다고 생각하게끔 합니다. 아주 나쁜 경험이지요.
빈 화면에서 사용자가 기다리게 하지 말아야 합니다. 로딩 인디케이터를 사용하거나 애니메이션을 주어 앱이 현재 작동하고 있다는 것을 알려주어야 합니다. 프로그레스 인디케이터라면 더 좋겠지요. 하지만 개발자에게 문의해서 이것이 가능한지 알아보아야 합니다.

7. 다른 운영체제에서 스타일을 카피하지 마라

모든 모바일OS 는 각자의 스타일을 가지고 있습니다. 아이폰, 안드로이드, 그리고 윈도폰7 모두 다른 미학과 휴먼 인터페이스 가이드라인을 가지고 있지요. 예를 들어 아이폰에서 윈도폰7의 블록 레이아웃과 네비게이션 스타일을 사용한다면 사용자에게 혼란을 줄 수 있습니다.
모든 앱을 OS 생산자의 것과 비슷하게 만들 필요는 없지만 해당 플랫폼에 맞지 않는 모습으로 만들면 안됩니다.

8. 고해상도의 화면에 지나치게 많이 집어넣지 마라

높은 PPI 화면을 디자인할때 더 많은 인터페이스를 넣고 싶은 욕구가 들 수 있습니다. 픽셀이 많기 때문에 말이죠. 특히 당신이 큰 화면으로 디자인을 리뷰할때는 더욱 그러합니다. 모든 작업물은 반드시 해당 디바이스에서 확인하세요. 디바이스의 갤러리앱이 어느정도의 갭을 주더라도 말이죠.
지나치게 많은 것을 넣으려다보면 네비게이션이 힘들어지고 어수선해 집니다. 글이 잘 안보이게 될 수도 있구요.

9. 모든 사람들이 당신이 쓰는 것처럼 앱을 사용할 것이라고 확신하지 마라

사용성 테스트는 반드시 해야 합니다. 클로즈 베타를 특정 그룹에게 제공해 볼 수도 있습니다.
다른 방법으로 크레이그리스트와 같은 사이트를 이용하여 포커스 그룹을 위한 사용자를  모을 수도 있습니다. 적은돈과 식음료를 제공하여 대학생들을 모을 수 있지요.

10. 제스쳐를 잊지마라, 하지만 과용하지 마라

모든 기능 요소들이 화면에 보여야 하거나 쉽게 접근해야할 필요는 없습니다.
아이폰의 메일앱에서 메시지를 스와이프하면 삭제 버튼이 나타나는 것이 좋은 예입니다. 이 제스쳐는 ‘편집’버튼을 누르고 메시지를 선택한 후 ‘삭제’ 버튼을 누르는 복잡한 과정을 단순화 시켜 줍니다. 하지만 균형이 있어야 합니다. 스와이프 제스쳐를 알지 못하는 사람을 위해 ‘편집’ 버튼에도 같은 삭제 기능을 제공하는 것이지요. 또한 여러개의 메시지를 삭제하거나 표시할 때 필요한 기능이 있어야 하구요.
다른말로 하자면, 제스쳐를 기억하되 과하게 의지해서는 안된다는 것입니다. 제스처로만 접근 가능한 메뉴나 기능은 피해야 합니다.

결론

비판적으로 그리고 완전히 당신의 방법에 대해 생각해야 합니다. 사용자가 무엇을 얻으려 하는지 생각하고 디자인이 그것을 알려주도록 해야 합니다. 대충하지 않고 테스트 과정을 뛰어넘지 말아야 합니다. 자신의 포트폴리오에 넣지 않을 디자인을 하지 마세요.

TIME이 선정한 iPad Apps 50종 "50 Must-Have iPad Apps"

50 Must-Have iPad Apps



Read more: http://techland.time.com/2013/04/15/50-must-have-ipad-apps/slide//#ixzz2RLAZkI50

2013년 4월 18일 목요일

N-Screen을 고려한 UI 제작 가이드 - 3. 멀티디바이스 레이아웃 패턴

1. 반응형 웹디자인과 그리드시스템 :
  • 반응형 웹디자인이란?
  • 그리드시스템이란?
  • 그리드시스템을 웹 사이트 레이아웃에 사용해야 하는 이유
를 소개하였습니다.

2. 그리드시스템 적용 방법 :
  • 설계 단계
  • 디자인 단계
  • 퍼블리싱 단계
에서 반응형 웹디자인을 제작할 때 그리드시스템을 적용하면 얼마나 더 효율적인지에 대해서 설명드렸습니다.

이번 글에서는 모바일퍼스트로 유명한 LukeW의 Multi-Device Layout Patterns을 설명드리겠습니다.


세번째, LukeW의 Multi-Device Layout Patterns

모바일퍼스트로 유명한 LukeW의 Multi-Device Layout Patterns은 mediaqueri.es의 반응형 사이트들을 다음과 같이 총 5가지의 패턴으로 분류하고 있다.

Mostly Fluid


가장 인기있고 심플한 패턴으로,
유동형 그리드,
유동형 이미지 의존하며,
데스크 탑에서 좌우 여백과 함께 여러 컬럼으로 배치되고,
화면 폭이 작아지면 컬럼을 수직로 배열한다.
- 예제 site : 좌] Princess Elisabeth Antarctica, 우] Trent Walton


Column Drop


또 다른 인기있는 패턴으로,
다양한 컬럼 레이아웃과,
일관된 레이아웃으로 최소 크기의 컬럼 폭 유지하고,
화면 폭이 작아지면 중앙 컬럼을 중심으로 컬럼을 수직 배열한다.
- 예제 site : 좌] Owltastic, 우] Festival de Saintes


Layout Shifter


다양한 화면의 전체 크기에 적용되지 않습니다. (100% Layout)
크게 대, 중, 소로 나누어 다른 레이아웃을 사용하며,
가장 혁신적인 디자인이 많이 일어나는 패턴으로,
본질적으로 많은 작업과 높은 기술을 필요로 하기 때문에,
앞의 두 패턴보단 인기가 적다.
- 예제 site : 좌] Performance Marketing Awards, 우] Food Sense


Tiny Tweaks


멀티 디바이스 적용이 가장 단순한 형태이지만,
가장 인기가 없는 패턴이다.
대부분 하나의 컬럼에서 몇 가지 요소(이미지, 글꼴 등)로 구성된다.
멀티 디바이스 적용은 글꼴 크기와 이미지 크기조정으로 이루어 진다.


Off Canvas


위 패턴들은 다양성이 있지만 몇 가지 공통적인 특징도 있습니다.
다양한 구성 요소들이 작은 화면에서 수직 배열을 한다는 점 이다.
Off Canvas 패턴은 새로운 트랜드이며,
보여지지 않는 스크린(Off Screen)을 활용하며,
네비게이션을 숨기는 레이아웃을 가장 많이 사용한다.
사용자 액션에 의해 화면 공간을 제어한다.
- 예제 : Facebook, Path, Google


2013년 4월 15일 월요일

N-Screen을 고려한 UI 제작 가이드 - 2. 그리드시스템 적용 방법

반응형 웹디자인과 그리드 시스템 에 이어 그리드시스템을 설계, 디자인, 프론트앤드개발까지 적용 방법에 대해서 설명하겠습니다.


두번째, 그리드시스템 적용 방법

웹에서의 그리드시스템은 다양한 방법이 소개되고 있지만,
기획, 디자인, 개발과 통일된 그리드를 사용하기 위해 가장 빈도수가 높은 960그리드시스템의  12컬럼방식을 사용합니다.
960 Grid System
Column 12
16
24

설계단계의 그리드시스템 적용

어도비 에지 리플로우(Adobe Edge Reflow)

“사용자들이 HTML 콘텐츠 스타일링을 위한 표준인 CSS를 이용해 레이아웃과 시각적인 디자인을 작성할 수 있도록 돕는 응답 속도가 빠른 웹 설계 툴. 이 툴로 반응 웹 디자인이 훨씬 용이하고 빠르게 작업될 수 있을 것으로 기대된다.” 라고 소개되고 있습니다. 리플로우의 결과물은 HTML파일로 제작되어 설계된 화면이 웹에서 어떻게 구현될 지 확인 할 수 있습니다.
- 제작 영상 : 링크

디자인단계의 그리드시스템 적용

Adobe Edge Reflow를 통해 제작된 설계화면에서 최적의 화면을 선택해 디자인 작업을 합니다.

Nathan Smith의 960 그리드시스템

Nathan Smith의 사이트에 가시면 그리드시스템을 적용할 수 있는 다양한 템플릿을 다운로드 할 수 있습니다.
HTML파일은 물론이고, 스케치 할 수 있는 화면도 제공하고 있으며,
각 프로그램(Corel draw, Fireworks, Flash, illustrator, indesign, photoshop등)의 기본 그리드시스템 화면 제공하고 있습니다.


프론트앤드 개발단계의 그리드시스템 적용

Bootstrap framework

Bootstrap은 아래와 같이 소개 되고 있다.
“빠르고 쉬운 웹 개발을 위한 매끈하고 직관적이며 강력한 프레임워크.”

부트스트랩은
  • IE7 지원이 가능하며,
  • 12컬럼 반응형그리드,
  • 수십개의 구성요소(Component),
  • 자바스크립트 플러그인,
  • 폰트(Typography),
  • 나만의 부트스트랩 만들기(Customizer)
등을 제공합니다.


12컬럼반응형그리드


- 기본 그리드 시스템(Default Grid System)
반응형 기능을 활성화 하지 않으면 940px의 레이아웃을 만듭니다.
반응형css를 추가하면 그리드는 화면 해상도에 따라 724px과 1170px 폭에 맞춥니다.
767px이하의 해상도에서는 컬럼은 유동적으로 되고 세로로 나열 됩니다.

- 유동 그리드 시스템(Fluid Grid System)
컬럼의 폭을 픽셀이 아닌 퍼센트를 사용합니다.
기본그리드시스템과 같은 반응형 기능이 있으며, 주요 화면 해상도와 기기에 대해 적절한 화면 비율을 제공합니다.


- 해상도 분기점(Resolution Break Point)과 컬럼(Column)
화면 해상도에 적절하게 대응할 수 있도록 여러 개의 미디어 쿼리를 지원합니다.
Label Layout width Column width Gutter width
(컬럼 사이 공간)
큰 화면 1200px 이상 70px 30px
기본 980px 이상 60px 20px
세로형태블릿 PC 768px 이상 42px 20px
스마트폰, 태블릿 PC 767px 이하 유동컬럼, 고정폭 아님
스마트폰 480px 이하 유동컬럼, 고정폭 아님


- 반응형 Class
화면 해상도에 따라 컨텐츠를 자유롭게 숨기거나 보여줄 수 있다.
Class Phones
767px 이하
Tablets
979px 이상768 이하
Desktops
Defult
. visible-phone Visible Hidden Hidden
. visible-tablet Hidden Visible Hidden
. visible-desktop Hidden Hidden Visible
. hidden-phone Hidden Visible Visible
. hidden-tablet Visible Hidden Visible
. hidden-desktop Visible Visible Hidden


Components

퍼블리싱이 필요 없는 다양한 컨퍼넌트들을 제공한다.

제공되는 Component 종류
  • Dropdowns
  • Button groups
  • Button dropdown menus
  • Nav: tabs, pills, and lists
  • Navbar
  • Breadcrumbs
  • Pagination
  • Label and badges
  • Typography
  • Thumbnails
  • Alerts
  • Progress bars
  • Misc


- 드롭다운 메뉴(Dropdowns)



- 버튼 그룹(button groups), 드롭다운 버튼(button dropdowns)



- 네비 : 탭, 리스트(Nav : tabs, pills, and lists)



- Pagination



- Progress bars



- Media object

- component자세한 예제 : 링크


자바스크립트 플러그인

퍼블리싱이 필요 없는 다양한 컨퍼넌트들을 제공한다.

제공되는 자바스크립트 플러그인 종류
  • Modal
  • Dropdown
  • Scrollspy
  • Tab
  • Tooltip
  • Popover
  • Alert
  • Button
  • Collapse (accordion)
  • Carousel


- Modal



- Scrollspy



- Tooltip



- Popover



- Carousel

- component자세한 예제 : 링크


나만의 부트스트랩 만들기(Customize)

사용하고 싶은 component와 plugin을 고를 수 있으며, 각 component의 스타일을 원하는 대로 변경하여 다운로드 할 수 있다.

사용가능한 항목
  • Choose components
  • Select jQuery plugins
  • Customize variables
  • Download
- customize 자세한 예제 : 링크

2013년 4월 2일 화요일

N-Screen을 고려한 UI 제작 가이드 - 1. 반응형 웹디자인과 그리드시스템

플립커뮤니케이션즈 스마트미디어그룹에서는 2011년부터 핫 이슈였던 반응형 웹 디자인을 IBK모바일웹에서 시작해 당사 홈페이지 개편까지 많은 프로젝트를 적용하였습니다.
반응형 디자인은 퍼블리싱이나 그래픽 디자인에 국한되있는 부분이 아닌 기획부터 테스트에 이르기까지 프로젝트 전반에 고려되어야 하는 문제로 여러가지 해법을 고민하고 있습니다.
여러 국, 내외 자료를 검토하여 N-Screen을 고려한 UI 제작 가이드에 대한 내용를 포스팅 하도록 하겠습니다.


첫번째, 반응형 웹디자인과 그리드시스템


반응형 웹디자인 이란?

데스크탑, 모바일 폰, 타블렛 PC, 스마트 TV 등 N-Screen의 시대로 불리는 다양한 디바이스의 환경에 맞춰 사이트의 레이아웃을 동적으로 변환하는 것.
- 이미지 출처 : Media Queries





반응형 웹디자인의 조건
  • 첫째, 사용자에 대해 면밀히 조사하고,
  • 둘째, 모바일 우선주의에 맞는 철학으로,
  • 셋째, 디자인과 개발의 유기적인 협업방식이라고 할 수 있습니다.

반응형 웹디자인을 프론트앤드 레이아웃 관점에서 바라보면
  • 가변적인 그리드 기반의 레이아웃
  • 가변적인 이미지와 미디어
  • 미디어쿼리(CSS3 명세 모듈)
- 출처 :<반응형웹디자인> 이단 마콧

그리드시스템이란?

그리드(Grid)는 주관적이고 감각적인 요소들을 객관적이고 과학적으로 정리하여 모듈화 시키는 시스템으로, 사전적인 의미는 격자(格子), 바둑판의 눈금 등을 말한다. 그리드는 디자인 작업의 출발점이며 지면을 작은 필드(Field)로 나누거나 공간을 작은 면으로 분할하고, 공간의 일정한 넓이를 결정한다. 즉, 세로 단(Column)이나 행간(Space), 페이지 여백(Margin) 등을 세밀하게 계산하여 구획 지어 놓은 것이라 할 수 있다. 이것은 일반적으로 글줄의 단을 나누기 위한 수직 컬럼과 사진 등 이미지의 크기를 결정하기 위한 수평 공간으로 면이 분할된 것을 의미하며 평면이나 공간에 있어서의 시각적 문제를 해결하기 위하여 사용된다. 그리드는 디자인의 모든 요소, 즉 타이포그래피, 사진, 그림들을 서로 융화시킬 수 있으며 디자인에 질서를 도입하는 하나의 수단이며, 작업의 능률을 올리기 위한 수단이다. 디자인에 있어서 어떤 목적을 위해 비례개념을 적용시킨 유기적 조직체를 구성하여 디자인 요소들을 서로 융화시켜 응집력, 통일감, 지속성을 부여해주는 하나의 틀이라고 할 수 있다.
그리드 시스템의 사용을 요약해 보면
  • 정보를 조직화, 명백화 시키고,
  • 본질을 간파하고 집중시킬 수 있고,
  • 주관성 대신 객관성을 기르며,
  • 창조적이고 기술적인 생산 과정을 합리화할 수 있고,
  • 칼라와 형태, 물질적 요소들을 통합할 수 있으며,
  • 평면과 공간 위에 건축상의 통제를 가능하게 한다.
그리드 시스템으로 작업한다는 것은 보편적인 확실성의 법칙에 준한다는 것을 의미한다. 틀이 잡혀 있는 그리드는 디자인 과정을 보다 명료하고 간단하게 해주며 디자인 작업을 신속하고 편리하게 해 준다. 즉, 그리드 시스템은 디자인 방법의 하나로 보다 객관적이고 합리적으로 작업할 수 있도록 해 주는 보조수단이며, 비주얼 레이아웃에 있어 시각적 질서와 일관성을 유지시켜 주는 것이라 할 수 있다.

- 출처 :<웹디자인 스타일의 포뮬러화를 통한 그리드시스템 활용에 관한 연구 : 인터넷 웹사이트 메인페이지를 중심으로> 동양대학교 학위논문(석사) 손기훈


그리드시스템을 웹 사이트 레이아웃에 사용해야 하는 이유


- 출처 : NALDZ GRAPHICS

1. 레이아웃의 사전 개념을 제공합니다.
웹 사이트의 레이아웃에 대해 클리이언트와 말할 때, 이미 마음 속에서 설계를 형성합니다.
이때 그리드를 사용하는 경우, 레이아웃에 대해 미리 생각해 볼 수 있어 실제로 작업을 시작하기 전에 디자인에 대해 몇 가지를 개선 할 수 있습니다.

- Site : Dynamit

2. 레이아웃의 균형을 맞출 수 있습니다.
신문이나 잡지의 레이아웃이 동일하듯이, 웹 사이트의 레이아웃도 균형이 있어야 합니다.
그러면, 사용자가 내용을 편하게 읽을 수 있게 될 것입니다.
균형 잡힌 레이아웃은 사용자의 신뢰를 높일 수 있습니다.


- Site : Eric Steuten

3. 좋은 구조를 만듭니다.
그리드를 사용해 좋은 구조를 만드는 것은 전체 웹 사이트를 더 잘 보이게 하고, 가용성과 가독성을 높이고 더 많은 사용자에게 친화력을 줍니다.
사이트의 좋은 구조를 만드는 것은 사이트 전체에 영향을 미칩니다.


4. 사이트의 느낌을 향상시킬 수 있습니다.
균형 잡힌 레이아웃은 사용자의 신용과 신뢰를 만듭니다.
리더는 전문적이고 신뢰할 수 있는 잘 설계된 사이트를 고려합니다.
그리드를 사용하면 디자이너는 좋은 느낌을 가진 웹 사이트를 만드는데 도움이 됩니다.



5. 디자이너가 설계를 실현하는 데 도움이 됩니다.
그리드의 도움으로, 디자이너는 리더가 보고 싶어 하는 방법으로 완벽하게 표현된 디자인을 만들 수 있습니다.
그것은 동시에 사용자를 고려한 사이트의 요소 정렬 설계 방식을 연구하는데 더 쉽게 도와줄 것입니다.


- Site : Elliot Lepers

6. 사이트의 위치 요소(배열)에 대한 가이드 역할을 합니다.
웹 사이트에서 그래픽, 텍스트, 비디오 및 기타를 비롯한 다양한 요소가 있습니다.
이 모든 요소가 적절하게 배치되어야 합니다.
그렇지 않은 경우, 사이트는 복잡하고 비조직적으로 보입니다.
그리드는 이러한 요소가 좋은 배치를 할 수 있게 도움이 될 것 입니다.
또한 디자이너가 사이트의 모든 내용을 정렬할 수 있습니다.


- Site : 30 Elm

7. 그리드시스템은 사이트를 보다 매력적으로 보이게 합니다.
물론, 웹 디자이너 및 모든 웹 사이트 사용자가 매력적인 웹 사이트를 선호합니다.
모든 사람은 항상 매력적인 무언가를 보고 싶어합니다. 그리드를 사용하면 사용자에게 매력적인 모습을 더 어필 할 수 있습니다.  


- Site : Richbrown

8. 타이포그래픽의 무결성을 유지하는 데 도움이 됩니다.
타이포그래픽은 웹 사이트의 중요한 요소입니다.
타이포그래픽을 사용하는 웹 사이트의 중요한 부분을 설명하고 표시하는 것이 중요합니다.
그리드를 사용하여 당신의 유형에 맞는 적절한 영역을 사용할 수 있습니다. 전체 웹 사이트는 제목, 배너, 컨텍스트, 및 기타에 사용할 텍스트 크기가 균형을 찾습니다.
그리드는 당신의 유형에 맞는 가이드 역할을 할 수 있습니다.


- Site : UX Mag

9. 균일성과 일관성을 보여줍니다.
그리드 간격으로 균일하게 분포되어 있기 때문에 분명히 웹 사이트는 균일성 있게 표현 될 것입니다.
균일한 라인과 요소의 적절한 분배가 웹 사이트를 보기 좋게 할 것 입니다.


- Site : 42 Angels

10. 디자이너가 공백의 사용을 관찰 할 수 있습니다.
여백 또는 공백은 디자이너가 항상 명심해야 하는 일입니다. 여백은 모든 디자인 요소에 대한 호흡 공간을 제공하기 위한 디자인에 적용해야 합니다. 여백없는 사이트는 읽기 어렵습니다. 모든 요소가 접근해있는 사이트를 읽는 상상을 해보십시요. 확실컨데 당신은 내용을 해독할 수 없으면 당신은 그 사이트를 떠나게 됩니다. 사용자 눈에 편안한 레이아웃을 위해 충분한 여백과 공백을 사용합니다.
- Site : Wolff Olins