아이폰용 앱을 위한 프로토타이핑 앱

프로토타이핑의 중요성이야 아무리 강조해도 지나치지 않습니다만, 막상 iOS나 Android용 프로토타입을 만드려고 하면 아무래도 막막하죠. 특히나 개발경험이 없는 기획자나 디자이너들은 더 막막하지요. iOS용 프로토타이핑 방법은 HTML을 활용하거나 Keynote를 사용하는 방법에서부터 Xcode, Interface Builder로 살짝 코딩해보는 방법까지 다양합니다. 개인적으로는 Keynote나 HTML을 사용하곤 했는데, 이보다 쉽고 효과적인 앱을 하나 소개해보고자 합니다. 저도 이 앱을 만드는데 도움을 조금 드린 입장이라 살짝 편파적이기는 하겠네요. :)

이미지 기반의 프로토타이핑 앱, "앱필"입니다. 말그대로 이미지만 몇 장 만들면 이 앱이 각 이미지들을 서로 서로 연결하도록 도움을 줍니다. 프로토타이핑 툴 자체가 앱으로 만들어졌기 때문에, 앱이 돌아가야하는 환경에서 작업이 되고 시뮬레이션되어서 즉각적으로 디바이스에서 어떻게 보여질지 알 수 있다는 점이 큰 장점입니다.

프로토타입 목록

앱을 실행하면 샘플로 들어있는 "Demo" 프로토타입이 보입니다. 좌측상단의 + 버튼을 누르면 새로 프로토타입을 생성할 수 있습니다.

이미지 불러오기

iTunes에서 이미지 폴더를 싱크시키면 사진앨범으로 들어갑니다. 그 다음에 사진앨범에서 이미지를 불러올 수 있습니다. 하지만 이것도 실제 디자인작업을 해보면 조금씩 수정한다음에 반복적으로 디바이스에서 확인을 해볼 필요가 생기기 때문에 여간 번거롭지 않습니다. 앱필에서는 Dropbox와 Picasa에서 이미지를 불러올 수 있습니다. 둘 다 충분한 기본 저장 공간을 제공하기 때문에 무료 계정만 사용하셔도 편리하게 이미지 불러오기를 하실 수 있습니다. 그리고 이미지 불러오기를 할 때 이미지 폴더를 선택하면 폴더를 통째로 불러오기 때문에 디자인작업을 할 때 버전별로 폴더를 만드시면 더욱 편리할 수 있습니다.

편집 - Drag & Drop으로 이미지 순서 정렬

일단 이미지가 다 불러지고난 후, "완료"를 누르고 "프로토타입 실행"을 누르면 바로 프로토타입을 실행해볼 수 있습니다. 기본적으로 각 페이지를 탭하면 다음페이지로 이동하는 기능이 제공됩니다. Liner flow로만 use case를 검증하거나, 대략적인 앱의 컨셉을 검증하는 수준 혹은 high fidelity design이 디바이스에서 어떻게 보이는지 확인하는 정도라면 이렇게만 쓰셔도 충분하리라 예상됩니다.

하지만, 역시 프로토타이핑을 해보다보면 욕심이 나기 마련이죠. :) 내비게이션바도 달고, 탭바도 달고 싶고, 화려한 트랜지션도 좀 넣어보고 싶고 등등... 앱필은 iOS에 제공하는 기본적인 내비게이션을 모두 지원합니다.

상세 페이지

각 상세페이지에 보면, 페이지에 링크를 걸거나 페이지가 이동될 때 어떠한 전환 효과를 줄지 설정할 수 있게 되어 있습니다.

페이지 전환 효과 선택

내비게이션바와 탭바의 상세 설정

앱필의 또다른 장점은 페이지가 긴 경우에 자동으로 스크롤이 가능하도록 설정을 해준다는 점입니다. 저도 전에 아이폰에서 디자인이 어떻게 되는지 보려고 사진앨범에 넣어봤었는데요, 사진앨범의 문제는 전체 이미지가 다 보이도록 자동 리사이징을 한다는데 있습니다. 스크롤이 필요한 긴 페이지는 사진앨범으로 보는데 한계가 있죠. 이 자동 스크롤 세팅은 내비게이션바나 탭바를 사용했을 때 진가를 발휘합니다. 내비게이션바와 탭바의 설정을 On으로 하면 화면 상단과 하단에 각각 내비게이션바와 탭바가 항상 보여지면서 페이지는 여전히 스크롤이 가능합니다.

이 정도 기능이면, 커스텀UI를 많이 쓰지 않는 이상 실제와 거의 유사하게 프로토타입을 만드는데 별문제가 없을 것 같네요. 특히 Use case를 검증하는 용도라면 더할나위 없이 좋은 앱인 것 같습니다. 무료로 배포되고 있습니다만, 무료버전은 프로토타입 생성개수에 제한이 있습니다. 유료버전은 $4.99.

커피한잔 가격으로 이정도 수준의 프로토타입을 만들어 볼 수 있다면, 충분히 투자해볼 가치는 있는 것 같네요.
app.eal - Prototype Your App Idea - 아이튠에서 보기

만우절 조크 뒷이야기

만우절 즐거우셨나요?

구글도 해년마다 재미있는 장난을 준비하는데요, 오늘은 뒷얘기를 좀 해볼까합니다. :)
올해는 저도 보물지도에 참여했었습니다. 국회의사당에서 태권브이가 나오고 싸이가 강남에 출현하지요. 정확히는 강남역입니다. 그리고 태권브이가 국회의사당에서 나오는 멋진 장면의 원조는 아래의 동영상에서 찾아보실 수 있습니다.



구글의 만우절 조크는 전세계 오피스에 있는 지원자들의 참여에 의해 만들어집니다. 100% 자원봉사지만 다들 엄청난 열정을 가지고 서로 재미있는 장난을 만들기 위해서 경쟁한답니다.  조크의 스케일과 심각성(?)에 따라 다르지만 최소한 한 달전에는 아이디어를 보여줄 수 있는 데모가 만들어집니다. 아이디어들은 일련의 심사를 통과해야하는데요, 심사라는 건 얼마나 웃기느냐보다는 특정 문화나 집단에서 문제가 발생할 소지가 있느냐 법적인 문제가 있느냐를 중점적으로 리뷰합니다. 이런 문제만 없다면 무엇이든지 OK인셈이죠.

보물지도에 보시면, 세계의 다양한 랜드마크들이 있습니다. 건물이나 랜드마크임에도 불구하고 경우에 따라서 copyright 이슈가 있는 경우들이 있습니다. 에펠탑의 특정뷰에는 저작권이 있다면 믿으시겠습니까? :) 그래서, 각 조크를 만드는 팀에는 법무/홍보 관련 지원자도 포함됩니다.

서울 오피스에서도 보다 재미있는 걸 해보자는 취지에서 태권브이와 싸이가 후보로 올라왔습니다. 당연히 이 둘은 저작권 및 초상권이 있구요, 다행스럽게 신씨네와 YG 엔터테인먼트의 적극적인 도움이 있어 구글 지도에 올릴 수 있었습니다. 대부분의 만우절 조크는 100% 수작업으로 이루어지는지라 한달전부터 준비한다고 하더라도 시간에 쫓겨 많은 부분이 스펙아웃되곤 합니다. 한국 랜드마크 디자인하는 작업도 생각보다 시간이 엄청나게 들더라구요. YG에서 도움을 주지 않으셨다면 싸이가 구글맵에 못올라올뻔 했구요, 태권브이는 누구한테 저작권이 있는지 몰라서 엄청 방황했답니다. :)

마지막으로 만우절 조크를 아우르는 스토리라인이 결정되고 영상이 제작됩니다. 여기 꽤 많은 자원과 비용이 소요됩니다. 보물지도 프로젝트도 잠수부와 많은 사람들이 동원되죠. 구글 냄새 검색 조크 홍보 영상에는 실제 UX designer들이 출연합니다. 매우 능청스럽게 서비스의 작동원리와 개념을 설명하죠. 배우해도 되겠어요. 참고로 영상에 나오는 이름과 job title은 모두 가짜입니다. 검색해도 그런 사람 안나옵니다. ^^;

만우절 조크 이벤트는 구글에서 경험할 수 있는 독특하고 재미있는 문화 중 하나임에는 틀림없습니다. 꽤 높으신 분들도 기꺼이 홍보영상에 출연하고, 정말 있을 법하고 제대로 웃기기 위해서 많은 시간과 돈을 아낌없이 지원하는 문화를 다른 데서는 찾기 어려울 것 같네요. 내년에는 서울 오피스가 리드하는 박진감 넘치는 조크를 선보이길 기대해봅니다. :)

덧, 북한에도 랜드마크가 있습니다. 찾아보세요.
덧2, 위에서 언급한 것처럼 태권브이와 싸이는 저작권과 초상권이 있습니다. 캡춰해서 다른데 쓰시면 안되요.

Google Treasure Map

와우!

http://google-latlong.blogspot.kr/2013/03/find-treasure-with-google-maps.html

한국지도에서 더 많은 보물을 찾을 수 있어요!

Responsive Design

정말 오래간만이네요.

구글 코리아로 자리를 옮기고 폭풍과 같은 프로젝트에 밀려 떠다니다보니, 반년이 후딱 가버렸네요. 종종 포스팅하려고 글감을 찜해놓고 써야지했다가 막상 쓰려고 하면, 이미 흘러가버린 주제가 되어버려서... 글쓰기가 참 쉽지 않네요. 각설하구요...

Responsive Design이라는 컨셉도 막떠오르는 핫한 키워드는 아닙니다. 하지만, 많이 또 제대로 알고 계시는 분도 많지 않은 것 같아서 한 번 정리해보려 합니다.

Image from "Responsive web design and web analytic"

 Responsive Design에 대한 사전적인 설명은 이미 위키에도 잘 정리되어 있습니다. 다양한 정의가 있지만 간단히 말하자면 "하나의 페이지만 만들되, 다양한 디바이스에서 잘 보이도록 하겠다"는 것입니다.  (Responsive Web Design이라고 쓰고, RWD라고 줄여서 말하기도 합니다만... 개인적으로는 그냥 Responsive Design이 더 좋습니다. 대상이 Web이냐 아니냐가 별로 중요한게 아니니까요...)

별로 특별한 컨셉은 아닙니다. 이러한 시도는 이미 Mobile Web Design에서 하고 있었던 것입니다. 근데 이게 CSS3의 Media Query를 만나면서 봇물이 터지듯이 유명세를 타고 있는 것이죠. Mashable은 "2013년이 Responsive Web Design의 해가 될 것이다"라고 언급하기도 했고, 2013년의 디자인 키워드 20에 첫번째로 들기도 했습니다.



HTML5와 CSS3는 정말 많은 걸 바꿔놓았습니다. 약간의 코딩 능력만 있다면 JQuery를 살짝 더해서 이전에는 많은 코드로 해결해야했던 걸 단순화시켜주거나 Flash와 같은 저작툴로 해결했던 걸 쉽게 해결해주고 있습니다. Responsive Design은 Media Query에 전적으로 의존하고 있는데요, Media Query는 사용자가 사용하고 있는 디바이스가 무엇인가에 따라서 적용하는 스타일시트를 변경해주는 역할을 합니다. Media Query가 워낙 영특해서 사용자의 디바이스가 뭔지 확인하는 건 아니구요, 디바이스가 가진 디스플레이의 가로 세로 사이즈를 확인해서 조건에 맞으면 스타일 시트를 변경하는 역할을 합니다.  예를 들자면 아래와 같습니다. (CSS tricks에서 빌려옴)

@media screen and (max-width: 699px) and (min-width: 520px) {
  #sidebar ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

 위를 해석하면, "브라우저 내의 창 가로너비가 520px보다 크고 699px보다 작으면 아래의 CSS를 실행한다"입니다.  특정 Class나 ID의 스타일을 정의할 수 있기 때문에, Float만 잘 사용한다면 브라우저 사이즈에 따라서 요소들을 다르게 배치할 수 있습니다. 구글의 예를 본다면 아래와 같습니다. 브라우저 가로 너비를 조금씩 작게 줄여보세요. 이미지의 사이즈가 변하거나 (혹은 사라지거나) 레이아웃이 변경되는 것을 알 수 있습니다.

• http://picasa.google.com/
• http://www.google.com/about/
• http://www.google.com/goodtoknow/
• http://www.google.com/intl/en/chrome/business/
• http://www.google.com/culturalinstitute/home
• http://www.google.com/intl/en/+/learnmore/

Media Query를 사용할 때는 각 디바이스가 가지고 있는 디스플레이의 사이즈를 알 필요가 있습니다. 경험적인 가이드를 드리자면...

• 가로 978px - 데스크탑 & 큰 화면의 타블렛 (10인치대)
• 가로 600px - 타블렛 (킨들 파이어나 넥서스7등의 7인치대)
• 가로 480px - 스마트폰
• @media only screen and (device-width: 768px) - 요렇게 정의하면 iPad만

자세한 디바이스별 가이드는 여기서 볼 수 있습니다. 그럼 모든 브라우저가 Media Query를 지원할까요? 대답은 "예"입니다. 보다 정확히는, 현재 최신 브라우저에서 모두 지원합니다. 안타깝게도 IE는 9.0에서부터 지원합니다. (하지만 세상에는 꼼수는 많으니 걱정은 마시고...)

그러면 왜 Media Query를 사용해야할까요? 확실히 일반적인 웹페잊를 마크업하는 것보다 많은 노력과 주의가 필요할 것은 사실인데요, 그걸 감수할만한 효과가 있을까요?

• 컨텐츠 유지보수
  컨텐츠가 자주 업데이트되는 페이지라면 당연히 여러 페이지를 관리하는 것보다 한 페이지를 관리하는 것이 효율적입니다. 
• SEO (Search Engine Optimization)
  데스크탑용 페이지를 잘 만들고 Media Query를 잘 활용해서 모바일 지원을 한다면 굳이 모바일용 페이지에 SEO 하는데 특별한 노력을 하지 않아도 됩니다. 이미 SEO를 잘 해두었다면 지원 디바이스를 하나 추가할 때마다 들여야하는 비용을 많이 절약할 수 있겠죠.
• 다양한 디바이스를 지원
  만일 다양한 디바이스를 지속적으로 지원해야한다면 개별 페이지를 만드는 것보다 몇 줄의 코드를 적어 넣는게 훨씬 경제적입니다. 또, 특정 디바이스만 타게팅해서 특정한 컨텐츠를 보여줄 수도 있습니다. (예, 아이패드 사용자에게만 아이패드 앱을 다운받으라는 프로모션을 노출) 

이런 장점이 많은 디자인 방법인것은 확실한데, 다양한 디바이스에서 실제로 정상 작동하는지 확인도 해봐야하고 은근히 손이 많이 가는 것은 사실입니다. 경제적으로 잘 판단한다음에 충분히 시간과 노력을 투자할 가치가 있다고 판단이 된다면, 해볼만한 가치는 있을 것입니다.

팁! Media Query를 사용했는데도, 스마트폰에서 보면 CSS 변경이 되지 않은 경우가 발생합니다. 이건 Viewport를 함께 사용해야하는 이슈인데요, 스마트폰들이 매우 스마트해서 마음대로 전체 페이지를 줌아웃해서 보여주기 때문이죠. 디바이스 사이즈에 맞춰서 1:1로 보여달라라고 정의를 하셔야 합니다. 아래의 태그를 메타태그 영역에 삽입해주시면 간단히 해결됩니다. 

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

 더 볼거리
http://alistapart.com/article/responsive-web-design
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/an-introduction-to-the-css3-multiple-column-layout-module/
http://vimeo.com/27484362
http://css-tricks.com/box-sizing/

Designing beautiful apps without designer

지난 17일에 있었던 Google HackFair에서 제가 발표한 자료입니다. 찾아와주신 모든 분께 감사드립니다.

발표 내용을 간략하게 요약하면

• 제대로 된 서비스를 만드려면 "한가지만 잘 할 것"
• 디자이너 리소스가 없다면, 디자이너와 점심을 함께 할 것
• 조직 내에 디자인 리소스가 전혀 없다면, 잘 만들어진 디자인 가이드의 Principles를 잘 읽어볼 것

https://docs.google.com/file/d/0ByZGJ926FVmTeXZpbmZWS1Z0VEU/edit?usp=sharing

Google HackFair

이번 11월 17일과 18일에 Google HackFair가 열립니다. Engineer 중심의 이벤트이기는한데, 여차저차하여 저도 speaker로 참여하게 되었습니다. 약 30분 가량의 질의응답도 마련되어 있습니다. 구글 Designer 포지션에 대해서 궁금하신 분들은 오셔서 얘기 나눠도 좋겠네요. :)

Chinese style web design?

중국에서 consumer facing product들을 디자인하면서 종종 드는 생각은 "중국 스타일의 웹디자인" 혹은 "딱, 중국인들에게 먹히는 디자인이 따로 있는 걸까?"입니다.

많은 리서치들이 동양인은 보다 전반적인 내용과 각 관계에 치중하고 서양인은 목적지향적이라는 행동패턴을 보인다고 얘기합니다만, 처음에는 그럴 듯하다고 생각했지만 해를 거듭할 수록 "진짜?"라는 의문이 드네요. 동양인과 서양인이 정말 문화적인 차이로 인해서 다른 온라인 사용행태를 보일까요? 제 얘기는 각 국가의 시장의 성숙수준과 특성에 기인한 서비스의 차이와 문화적인 특성에서 오는 선호하는 디자인의 스타일은 구분할 필요가 있다는 것입니다. 전자로 인해 각 국가들은 독특한 비즈니스 모델이나 서비스들을 가지고 있지만, 후자로 인해서 온라인 서비스 디자인이 이래야 한다는 가이드는 찾기 어렵다는 이야기입니다.

달리 말하면, 디자인에 대한 호불호가 국가별 사용자에 따라 다를 수 있지만 이게 온라인 세상에서는 100% 그대로 반영되지는 않는다는 이야기죠. 일단 중국에서 유행하는 사이트들만 봐도 이제는 많이 서양의 사이트들과 많이 유사하다는 것이 그 예가 될 수 있겠습니다. 제가 중국에 막 왔을 때(2007년)만 해도 텍스트만 가득찬 사이트들이 많았으나 (물론 지금도 많기는 합니다만), 지금은 어떠한 지향점을 가지고 서양의 사이트들과 많이 닮아가고 있다는 생각이 듭니다.

지금하고 있는 생각은 사이트의 디자인은 국가별로 달라야 한다기 보다는 해당 서비스가 맞닥드리고 있는 시장의 특성에 따라서, 또 서비스군에 따라서 달라져야 한다는 것입니다. 요컨대, 중국인에 대해서 이해하기 보다는 중국 시장을 이해해야 한다는 거죠. 중국 서비스를 디자인하고 있는 한국인 디자이너로서 힘이 나는 결론입니다. :)

최근에 중국의 최대 온라인몰인 타오바오가 리뉴얼했습니다.

많이 정리되고 깔끔해보이죠? 재미있는 것은 디자인하신분이 한국인이라는 것입니다. :)

Google의 Google+도 초반 작업은 한국인 디자이너분이 리드하셨었죠.

그리고 최근 Google China가 재미있는 서비스를 내놓았습니다. 중국은 공동구매 사이트가 엄청나게 많은데요, 중국 전역에 걸쳐 6,000여개에 달합니다. 하루에 쏟아져나오는 공동구매만 해도 수천개에 달하죠. 그래서 내놓은 서비스가 공동구매 검색사이트입니다. 이 사이트의 디자인도 다분히 구글스럽고, 어떻게 보면 중국에서 쉽게 찾기 어려운 Ajax로 도배한, 살짝은 공격적인 디자인을 가지고 있습니다.


우측 상단에 있는(아래 보이는) 버튼을 누르면 목록뷰와 지도뷰가 전환됩니다. 페이지가 스르륵 열리면서 말이죠!

쑥스럽지만, 제가 디자인했습니다. :) 이 디자인이 중국시장에서 먹힐지 100% 장담은 못합니다만, 현재까지 반응은 좋은 편입니다. 중국 사용자에 대해서 고민하기 보다는 원하는 공동구매 상품을 잘 찾을 수 있도록 도와준다는 목표를 달성하는 쪽에 더 치중했습니다. 뭐 좀 더 지켜봐야겠죠. 화이팅!

글을 쓰고 보니 한국인 디자이너 얘기가 되어버렸군요. :)