bobozzang.

인포그래픽을 시도해 본 사람이라면 안다. 주제를 정하고, 주제에 맞는 자료를 모으는 일. 또 그 자료를 재구성해 아름답게 디자인한다는 것이 얼마나 손이 많이 가고 어려운 일인지를. 하지만 지금 소개하는 스튜디오 네 곳은 흥미로운 주제 선택에서부터 각각의 개성이 있는 비주얼까지 정보를 보기 좋게, 그리고 재미있게 만드는 능력을 가졌다. 현재 인터넷과 잡지, 기업의 연간 보고서에 가장 ‘핫’한 인포그래픽을 제공하는 스튜디오와 그 작업물들을 추려보았다. 미국에서 한국까지, 국적은 불문이다. 에디터 | 최동은(dechoi@jungle.co.kr) 디자인 | 임보경 * 이미지를 클릭하시면 원본 사이즈로 보실 수 있습니다.

네덜란드의 Studio Brandstof는 정보 디자인을 주로 하는 그래픽 디자인 에이전시다. 이들은 그래픽 디자인, 일러스트레이션을 통해 정보를 재미있고 유익한 방법으로 전달한다. 네덜란드 Zuyd 대학에서 인포그래픽 석사 학위를 취득한 디자이너 Gordon Hatusupy이 이끌고 있다. 시작한지 얼마 되지 않은 신생 디자인 스튜디오만의 아기자기하고 재기 넘치는 그래픽이 특징이다.

디자이너 고든이 살고 있는 Zuid- Limburg 지방은 네덜란드에서도 외곽에 위치해 있어 종종 사람들의 무시를 받기도 한다. 그래서 Brandstof는 이 아름다운 지역의 셀프 프로모션의 일환으로 인포그래픽 포스터를 만들었다. 면적, 인구 수 같은 기본적인 정보뿐만 아니라 지역 내 영화관 개수까지 흥미로운 정보들을 담았다.

벨기에 사람들의 자동차 문화를 담은 인포그래픽. 고든은 12만명의 벨기에 사람들이 디젤 구동 자동차를 원하지만, 정작 어디서도 구할 수 없다는 사실이 가장 흥미로웠다고 이야기 한다. 자동차 회사가 보아도 충분히 흥미로운 주제다.

Khlim 대학 매거진에 들어가는 인포그래픽 페이지. 이 학교의 다양한 장학제도와 스포츠에 대한 정보를 담았다.

캐나다의 FFunction은 데이터 시각화와 UI를 전문으로 하는 디자인 스튜디오다. 이들은 오늘날과 같은 정보 과잉의 시대에는 정보를 이용 하는 올바른 도구와 인터페이스를 만드는 것이 무엇보다도 중요하다고 이야기한다. FFuntion의 디자인 컨셉은 ‘Less is More’. 미니멀하고 기능적인 그래픽, 그리고 무엇보다도 니즈에 정확히 들어맞는 인터페이스와 비주얼을 제공한다.

일곱 대륙에서 가장 높은 산을 뽑아 그 높이를 인포그래픽으로 나타낸 ‘일곱 개의 정상(7 summits)’. 산을 삼각형 도형으로 단순화 시키고, 밋밋하지 않도록 그래픽 대신 사진을 집어 넣은 점이 참신하다.

식품 패키지에는 텍스트들이 가득하다. FFuction이 제안한 우유팩 컨셉은 건강과 영양 정보에 대해 알고 싶어하는 이 시대 소비자들의 요구를 반영한 것이다. 영양 성분, 칼로리 등이 한 눈에 보기 쉽게 정리되어 있다. 미국의 재정위기는 미국 국민들이 정부 예산 편성에 대해 의문을 품게 만들었다. 2011년 4월 구글은 미국 연방의 예산에 대해 더 나은 아이디어를 내는 공모전 ‘Data Viz Challenge’를 진행했다. FFuction은 미국의 Online Schools의 의뢰로 웹 어플리케이션 ‘Visualize your taxes’를 제작해 공모전에서 파이널리스트에 올랐다. 이 애플리케이션을 이용해 국방, 사회 복지, 교육 등에 주요 세금 지출 항목의 우선 순위를 정하고, 본인의 소득과 가족 구성을 입력하면 자신의 예산과 2010년 미국이 실제 집행한 예산을 비교하여 볼 수 있다. 다양한 차트 형태와 컬러로 구성된 그래프들이 복잡한 데이터 속에서 길을 찾을 수 있게 해준다. http://ffctn.com/a/datavizchallenge

컬럼 파이브는 현재 미국에서 가장 많은 인포그래픽을 제작하는 회사 중 하나다. 특히 웹 상에서 떠돌아 다니는 인포그래픽 중 훌륭한 디자인을 선보이는 것들은 거의 컬럼 파이브의 것이라고 봐도 무방할 정도다. 이들은 인포그래픽 뿐만 아니라 소셜 PR, 컨텐츠 전략 수립까지 총체적인 프로세스를 진행하는 만큼, 웹진부터 일반 기업까지 다양한 분야의 클라이언트를 두고 있다. 디자인은 인포그래픽을 의뢰하는 매체마다 다르긴 하지만 대체적으로 깔끔하게 각이 떨어지는 그래픽과 개성 있는 타이포그래피, 독특한(때로는 못생긴) 인물 일러스트레이션이 특징. 특히, 미국에서 인포그래픽을 주목하게 한 디자인 매거진 GOOD과 정기적으로 진행하는 인포그래픽 시리즈는 내용과 디자인, 모든 면에서 훌륭하다.

GOOD 매거진의 TRANSPARENCY 섹션에 실린 인포그래픽. 분쟁 지역인 팔레스타인의 국경이 근 100년간 분쟁으로 어떻게 변화해 왔는지 보여준다. 100년간의 경과를 크게 5번의 사건으로 나눠 그래픽으로 표현했고, 나머지 사건들은 아이콘과 함께 아래 연표에 짤막하게 표현했다.

최근 미국의 게이머들이 페이스북과 같은 소셜 네트워크나 모바일 앱 게임을 하면서 가상 아이템을 구매하기 시작했다. 이 인포그래픽은 마케팅/광고 분야의 웹진 BuySellAds의 의뢰로 디자인한 것. 가상 구매의 붐이라고 까지 부를 수 있는 이 현상을 마케터들이 어떻게 보고 있는지, 또 봐야 하는지를 정리했다.

그린 하우스를 만들기 위한 공동구매 사이트 1BOG의 의뢰로 제작한 인포그래픽. 지붕에서 바닥까지 집안 자재를 바꿈으로써 절약할 수 있는 돈과 구매에 드는 비용을 차근차근 비교했다. 굉장히 단순화한 그래픽임에도 이해가 쉽다.

바이스 버사(Vice Versa design studio)는 수많은 인포그래픽 스튜디오 사이에서도 단연코 반짝이는 토종 인포그래픽 디자인 스튜디오다. 한국예술종합학교 디자인과에서 인터랙션 디자인을 전공한 두 디자이너 김묘영, 정다은은 국내 최초의 인포그래픽 디자인 스튜디오를 설립하기로 결심하고 이름을 ‘Vice Versa’라 지었다. ‘거꾸로 뒤집어도 같다’는 뜻으로 정해진 틀에서 벗어나 새로운 형식의 디자인을 하고자 하는 두 사람의 신념을 나타낸 것이다. 영상, 그래픽, UX 등 영역을 제한하지 않는 정신도 정신이지만 바이스 버사의 인포그래픽에는 우리의 문화적 특성이 담겨 있어 더욱 흥미롭다.

금연일 수에 따라 무엇을 살 수 있는지 표현한 인포그래픽. 아이유의 미모와 전자 담배를 살까 말까 하는 직장인들의 무한 클릭으로 SNS 에서 가장 뜨거운 반응을 얻었다. 디자인 은 말보로 담배를 모티브로 한 것으로, 붉은색과 금색을 사용해 디자인 했다. 새삼 알게 된 사실이지만 금연 20년이면 차 한대를 뽑는다니 당장이라도 금연해야겠다는 마음이 들게 한다.

무엇보다도 주제가 가장 재미있는 인포그래픽이다. 해외의 인포그래픽에서는 절대로 찾아볼 수 없는 대한민국의 치킨산업을 조명했다. ‘전쟁 중’이란 타이틀에 맞게 회색을 기본으로 한 디자인과 철모를 쓴 닭의 모습이 재미있다.

디자이너라면 한번씩 봐야 할 인포그래픽. 척박한 환경에서 최선을 다해 일하는 한국의 디자이너를 ‘슈퍼히어로’로 표현했다. 힘든 현실 속에서도 인적 역량 중심 경쟁력 지수로 세계 1위를 기록한 한국의 디자이너들. 당신들이야 말로 진정한 슈퍼 히어로! 출처 : http://magazine.jungle.co.kr

http://sabo.joongang.co.kr/article.asp?arid=9948

후배가 하고 있는 까페 [코] 기사로도 나와서 더 뿌듯하네..... 사진도 감상하고 커피도 마시고
	권혁재 기자는 카페 코의 설립 취지에 뜻을 함께하며 자신이 수년간 찍어온 ‘B&W’ 시리즈를 선뜻 내놓았다. 그의 작품은 특별한 커피 맛과 더불어 이곳의 자랑거리가 됐다.

권혁재 기자 ‘카페 코’서 전시, 흑백모드 작품 21점 눈길 끌어

서울 도심에서 복잡함과 분주함에서 자유로울 수 있는 몇 안 되는 곳, 종로구 재동. 봄꽃이 흐드러지게 핀 헌법재판소 오른쪽 골목으로 들어서면 이국적인 하얀 벽면의 카페가 나타난다. 이층 양옥을 개조해 만든 이곳 이름은 ‘카페 코’다.

이곳에선 권혁재 중앙일보 사진전문기자의 작품을 만날 수 있다. 권 기자는 그동안 “왜 개인전을 안 하느냐”는 주변의 성화에 “기자를 그만두면 그때 하겠다”고 말해왔다. 혹시 그 사이 마음이 바뀐 것일까.

카페 코와 권 기자가 엮이게 된 데는 남다른 사연이 있다. 이곳은 권 기자의 지인인 소설가 서해성씨와 제자들이 모여 만든 공간이다. 제자 중에는 코리아중앙데일리의 김소향 사우도 있다. 각자의 재능을 모아 함께 할 수 있는 자리를 만들겠다고 시작했지만 초기에는 많은 난관을 겪었다. 가정집을 카페로 바꾸고 손수 인테리어를 꾸미고 메뉴를 정해야 했다. 오픈을 며칠 앞뒀을 때 손님에게 감동을 줄 수 있는 작품을 전시하자는 아이디어가 나왔다. 지난해 영국 크리스티 경매에서 권 기자의 작품이 낙찰된 그즈음이었다.

이때 서씨와 김 사우는 권 기자의 작품을 카페에 걸자고 제안했다. 권 기자는 자신의 작품 21점을 내놨다. 카페 코는 작가에 대한 예우로 무한 커피와 비밀 아지트를 제공했다. 그는 “제작비를 따지자면 수백만원이지만 돕고 싶은 마음에 그냥 주게 됐다”고 말했다. 권 기자는 “그 집 커피가 워낙 맛있다”며 웃었다.

사실 권 기자는 사진을 줄 때 “소문내지 말라”는 조건을 걸었다. 그런데 개업을 축하하러 간 자리가 권 기자의 전시회 오픈식처럼 변했다. 카페를 찾은 손님들과 ‘작가와의 대화’도 진행했다. 이제는 그리스 산토리니의 집 같은 하얀 카페와 권 기자의 사진이 어울려 매력 있는 전시공간으로 자리잡았다.

권 기자가 내놓은 작품은 그가 “평생 가져가야 할 주제”라고 말한 ‘B(black)& W(white)’ 시리즈다. 세상을 있는 그대로 보지 않고 흑백으로 가르는 사회에 던지는 메시지다. 과거 새만금 방조제가 전 사회적 이슈였던 적이 있었다. 현장을 취재하러 간 그는 어제까지 친구였고 형제였던 이들이 양쪽으로 갈려 싸우는 모습에 충격을 받았다. 이것이 ‘B&W’ 시리즈의 시작이었다.

그는 사진을 통해 “흑백이 아닌 그 사이의 ‘&(그리고)’를 보자”고 말한다. 그리고 그 해답은 자연에서 찾고 있다. “내 사진이 치유제 역할을 하길 바란다”는 것이 그의 바람이다. 사진이 품고 있는 검고 흰색은 일부러 흑백으로 찍은 것이 아니라 자연 그대로의 색이다. 권 기자는 자신이 들려주고 싶은 이야기를 위해 산천을 누비며 발품을 팔았다.

한 주에 7개의 섹션을 진행하며 엄청난 작업을 소화하고 있는 권 기자지만 시간 날 때마다 찍은은 사진이 모여 어느새 수백 장이 됐다. 카페 코에서 그의 역작을 구경할 수 있다.

정고은나래 기자

<권혁재 사진전 ‘B&W’ 전시회>
장소: 카페 코(종로구 재동 36-2, 02-766-0909)
기간: 상설전시(매일 오전 11시~오후 10시)

‘카페 코’로 오세요 카페 코에 들어서면 문간의 대형 로스팅 기계에 시선을 빼앗긴다. 직접 볶은 원두를 핸드 드립으로 내려 마시니 향과 맛이 일품이다. 애플 샌드와 바나나 샌드는 어머니가 만들어 주시던 간식을 떠오르게 한다. 입구에 있는 빨간 쪽문은 비밀 공간이다. 주변 눈치 안 보고 시끄럽게 수다떨기에 안성맞춤이다. 예닐곱 명은 너끈히 들어갈 수 있어 소규모 파티를 열어도 좋을 듯하다.

http://sabo.joongang.co.kr/article.asp?arid=9678

클라이언트들은 터무니없는 말을 하곤 한다. 예전에 누군가가 말했다. “고객이 바보 같이 작은 스마트폰 화면으로 우리 사이트에 방문할 일은 없을 것이다.” 필자는 깜짝 놀랐다. “정말?” 그리고는 되물었다. “만약 식사를 하면서 회의 중이고, 고객이 자신의 상사에게 제품의 사양을 보여주고 싶다면?” 아니면 “만약 고객이 당신의 전화번호를 찾으려 한다면?”

클라이언트들은 종종 스마트폰, 태블릿, 그 외의 모바일 기기들이 웹에 접속하는 방식을 얼마나 빠르게 변화시키고 있는지를 무시한다. 더욱 슬프게도, 극소수의 웹 개발자만이 자신의 클라이언트에게 이런 현실을 알려준다.

그래픽 디자이너들은 아직도 자신들의 작업 결과물이 종종 더 자그마한 화면에서 보여진다는 사실을 간과한 채, 애플 시네마 디스플레이 모니터를 캔버스 삼아 자신들의 사이트를 그려 나간다. 그리고 코더(coder)들은 자신들이 HTML과 CSS의 복잡한 내용과 한계를 이해하고 있어야 함에도 불구하고, 만들어진 디자인을 맹목적으로 구현한다.

그 결과로, 너무 많은 웹사이트들이 여전히 진부한 UI 상의 실수들을 범하고 있으며, 태블릿과 스마트폰 사용자들이 사이트를 사용하지 못하도록 만들고 만다. 여기 몇 가지 예를 제시한다.

웹 UI 실수 1 : 롤오버(rollover) 사용

언젠가부터, 웹 개발자들은 사용자가 화면의 특정 부분에 마우스를 올려놓았을 때 내용을 보여주거나 컨트롤을 강조하는 것을 매우 좋아한다. 이것이 스마트폰과 태블릿에 일으키는 문제는 명확하다. 마우스 커서가 없으면, 컨트롤 위에 마우스를 올려놓을 방법이 없다.

그렇다고 모든 롤오버 효과를 없애야 한다는 것은 아니다. 하지만 터치스크린 사용자를 위하여, 모든 마우스 오버 이벤트에 대해 그와 같은 기능을 하는 클릭 이벤트가 있어야 할 것이다. 마우스만을 위해 디자인된 메뉴 때문에, 스마트폰 사용자들이 매번 페이지를 다시 로딩하는 일은 없어져야 한다.

웹 UI 실수 2 : 커스텀 위젯과 컨트롤 사용

디자이너들은 버튼과 다른 위젯들에 고유의 모양과 느낌을 주는 것을 좋아한다. 하지만 UI 표준은 플랫폼에 따라 서로 다르며, 컨트롤을 모든 기기에서 동일하게 알아보고 사용할 수 있도록 하지 않으면 웹사이트의 사용 편의성이 나빠진다.

커스텀 스크롤 바는 가장 나쁜 사례 중 하나이다. 때때로 디자이너들은 기본 컨트롤을 없애고, 자바스크립트를 이용한 매끈하고, 얇고, 더 매력적인 위젯으로 대체하려 한다. 태블릿 사용자들이 직면하는 문제는 두 가지이다. 자그마한 위젯들은 손가락으로 건드리기가 힘들 뿐 아니라, 태블릿 사용자들은 스크롤바를 이용하지 않는다(화면을 손가락으로 끌어서 스크롤을 한다). 따라서 커스텀 컨트롤을 강요하는 것은, 사용자 인터페이스를 혼란스럽게 할 뿐이다.

마찬가지로, 마우스를 제외한 다른 입력장치가 당연히 있을 것이라고 여기면 안된다. 예를 들면, 팝업 대화창은 항상 눈으로 확인할 수 있는 닫기 버튼이 있어야 한다. 스마트폰이나 태블릿은 키보드 입력기를 가지고 있을 수 있지만, Esc 키를 입력할 수 있는 경우는 별로 없다.

웹 UI 실수 3 : 너무 많은 스크롤 영역 보유

작은 터치스크린을 통해 웹사이트를 보다 보면, 종종 전체 페이지를 보기 위해 스크롤을 해야 할 때가 있다. 하지만 앞서 언급했듯이, 태블릿 사용자는 손가락으로 화면을 끌어서 스크롤한다. 디자이너가 웹페이지를 여러 면으로 나누어 각각에 스크롤바를 배치하면, UI가 금방 지뢰밭이 되어버린다.

화면 상에서 사용자 손가락의 위치에 따라, 처음 끌기를 하면 특정 부분의 내용이 스크롤되다가 다시 한 번 더 끌기를 하면 다른 부분이 스크롤될 수도 있다. 가능하면 레이아웃을 단순하게 만드는 것이 좋으며, 그러지 못하더라도 최소한 사용자가 전체 페이지를 스크롤할 지 아니면 특정 부분을 스크롤할 지를 결정할 수 있도록 충분한 크기의 여백을 두어야 한다.

웹 UI 실수 4 : 경직된 텍스트 레이아웃

많은 그래픽 디자이너들이 정확한 픽셀 치수와 타이포 그래피 원칙을 통해 자신들의 웹사이트 레이아웃을 설명했다. 이런 방식이 웹 디자인을 위한 좋은 길이 아니기도 하지만(웹 상에서 사용자들은 브라우저 창이나 글자의 크기를 마음대로 조절할 수 있다), 스마트폰에서 볼 수 있는 사이트를 만들 때에는 특히 잘못된 방법이다.

예를 들면 안드로이드 브라우저는 기본적으로, 페이지의 CSS 스펙과는 상관없이, 텍스트의 단 폭을 기기의 화면 폭에 맞도록 축소시킨다. 이를 미리 고려하지 못하고 모든 디자인 요소들이 데스크톱 브라우저에서와 같이 배열될 것이라고 생각한다면, 이는 결국 스마트폰 사용자에게 커다란 빈 여백과 함께 컨트롤을 볼 수 없게 만들어 사용자 인터페이스를 어렵게 한다.

웹 UI 실수 5 : 특정 화면 형태에 대해 가정하기

한 웹 디자이너는 기술에 뒤처지지 않으려 하며, 사이트를 현대적인 와이드스크린 LCD에 최적화시켜서 필자를 흡족하게 만들었다. 하지만 오래된 모니터를 사용하는 사람들을 소홀히 하더라도, 모바일 사용자를 무시하면 기술의 최전선에 설 수 없다.

대부분의 스마트폰은 사용자가 기기를 들고 있는 방향에 따라, 자동적으로 수직(portrait)과 수평(landscape) 모드를 전환할 수 있다. 어떤 사용자들은 이런 자동 방향 전환(auto-pivot) 기능을 싫어하고 해제해 놓는다. 이런 경우에는 사용자가 디자인과 같은 모드를 사용하길 비는 것 외에는 방법이 없다. 페이지 형태에 대해서 미리 가정하는 것은 인쇄물 시장에서는 아무 문제가 없었지만, 사이즈를 미리 알 수가 없는 웹에서는 형편없는 선택이다.

웹 UI 실수 6 : 너무 많은 이미지를 미리 읽기

불쌍한 스마트폰 사용자에게 안타까움을 표한다. 인터넷 속도가 유선만큼 빠르지 않을 뿐 아니라, 통신업체들은 데이터 사용량에 상한선을 정하고 추가 사용에 대해 요금을 부과하고 있다. 게다가 스마트폰은 메모리가 한정되어 있다.

자바스크립트를 이용해 슬라이드쇼 이미지들을 미리 읽는 것이 데스크톱 브라우저에서는 괜찮을지도 모르지만, 스마트폰 이용자들에게는 조금 거슬릴 수 있다. 특히 사용자의 마우스가 특정한 컨트롤 위에 놓여졌을 때(태블릿 사용자들은 이를 사용할 방법이 없다) 그 이미지들이 나오도록 되어 있다면, 더욱 그렇다.

웹 UI 실수 7 : 플래시 사용

이런 말을 하고 싶진 않지만, 어도비 플래시는 여전히 모바일 기기에 발붙일 곳이 없다. 널리 알려진 대로, 애플의 iOS 기기들은 플래시 콘텐츠를 전혀 지원하지 않으며, 안드로이드 스마트폰조차도 좋지 않은 성능만을 제공한다.

더 슬프게도, 플래시 애플리케이션은 일반적인 HTML 사이트보다 훨씬 자주 UI 문제를 일으킨다. 어도비 팬에게는 유감이지만, HTML5의 출현과 함께, 웹 상에서 플래시를 볼 날은 얼마 남지 않았다.

물론, 이런 UI 문제를 회피할 다른 방법들이 존재한다. 모바일 기기를 위한 특별한 커스텀 버전의 사이트를 독립적으로 만들 수도 있다. 아니면 커스텀앱을 제작할 수도 있다. 하지만 이런 방법들은 나름대로의 문제를 가지고 있다. 기기에 묶여 있고, 미래가 보장되어 있지 않다. 여러 기기, 여러 플랫폼에서 같이 사용할 수 있는, 다시 말해 크로스 플랫폼, 크로스 디바이스 온라인 애플리케이션을 만들 수 있는 HTML의 잠재력을 얕보면 안된다. 최소한 지금 하는 디자인이 어떻게 보일지는 알고 있어야 할 것이다. editor@idg.co.kr

출처 : http://www.idg.co.kr/newscenter/common/newCommonView.do?newsId=65003