VIDEO
INFORMATION
http://lab.cmiscm.com/bold/
Control font weight in HTML5 Canvas
Control font weight in HTML5 Canvas
Project Hangeul #1 – The mimetic words of Hangeul
RUNNING ON IPAD
LOGO
DESIGN
DESCRIPTION
Hangeul is the Korean alphabet. Instead of being written sequentially, like English, Hangeul is grouped into blocks that represent individual syllables. In this way, it can be used to write most sounds.
The Mimetic Words of Hangeul is an art project that attempts to visually represent onomatopoeic and mimetic words according to their meaning.
The project was made using HTML5, especially Canvas, and it works beautifully on both desktop and tablet.
The Mimetic Words of Hangeul is an art project that attempts to visually represent onomatopoeic and mimetic words according to their meaning.
The project was made using HTML5, especially Canvas, and it works beautifully on both desktop and tablet.
URL
CREDIT
Solo work
A special thank you to Justin Earley who helped with the English copy.
A special thank you to Justin Earley who helped with the English copy.
FFF project on Google Chrome advertisement
PRESS
http://www.youtube.com/watch?v=Jzxc_rR6S-U
Google Chrome Advertisement - May 2013
Form Follows Function
Google Chrome Advertisement - May 2013
Form Follows Function
[Interview] Computer Arts – FFF project
ARTICLE
인터랙티브 웹 프로젝트 FFF 제작기
뉴욕에서 인터랙티브 개발자이자 디자이너로 활동하고 있는 김종민은 개인 프로젝트로 인터랙티브한 사용자 경험을 제공하는 웹 FFF(Form Follows Function) 프로젝트를 진행했다.
Designer 김종민
김종민은 소스코드를 완벽하게 짜고 뿌듯해하는 스타일의 개발자는 아니다. 오히려 코드보다는 디자인과 인터랙션을 더 중요시한다. 현재는 뉴욕에서 인터랙티브 개발자이자 디자이너로 활동하고 있다. 미니멀리즘과 황금비율, 타이포그래피에 관심을 갖고 있으며, 현재도 진행 중인 데스크 프로젝트를 통해 FWA 오늘의 사이트(Site Of The Day)에도 선정된 바 있다. 이번에 진행한 FFF 프로젝트는 FWA의 오늘의 사이트(Site Of The Day)와 오늘의 모바일(Mobile Of The Day)에 선정되었으며, 어도비의 TCEA(The Cutting Edge Award)를 수상하였고, 웨비 어워드(Webby Awards)에 Nominee 되었다.
포트폴리오 사이트 cmiscm.com
포트폴리오 사이트 cmiscm.com
블로그 blog.cmiscm.com
데스크 프로젝트 desk.cmiscm.com
FFF 프로젝트 fff.cmiscm.com
Comment
“가끔 어떤 기술을 배워야, 제가 만든 인터랙티브한 사용자 경험을 만들 수 있냐고 묻는 사람들이 있어요. 개인적으로 기술은 중요한 것이 아니라고 생각해요. 특히 웹에서의 기술은 빠르게 변하기 때문에 한 가지 기술에 의존하려는 것은 위험한 발상인 것 같아요. 배우고 싶은 프로그래밍 언어가 있다면 시중에 나와 있는 책을 통해 몇 개월이면 누구나 어느 정도 다룰 수 있어요. 중요한 것은 그런 기술이 아니라 디자인과 인터랙션이에요. 만약 좋은 인터랙티브 개발자가 되고 싶다면 프로그래밍 언어를 하나 더 배우기보다는 디자인과 인터랙션 감각을 키우는 걸 추천해요. 같은 것을 만들어도 디자인 감각이 있는 사람과 그렇지 않은 사람은 결과물부터 확연히 다르니까요.”
김종민은 그동안 많은 개인 프로젝트를 진행했다. 그에게 개인 프로젝트란 어떤 목적이나 계기를 통해 시작하는 것이 아니라, 단지 재밌어서 시작하는 것이다. “어릴 때부터 뭔가를 만드는 것을 좋아했어요. 그 버릇을 아직 고치지 못한 것 같아요.” 그가 말한다. 그는 모든 개인 프로젝트들과 포트폴리오 사이트를 즐겁게 만들었다. “항상 개인 프로젝트를 진행할 때면 제가 좋아하는 것을 주제로 삼았어요. 데스크 프로젝트의 경우 다른 사람들의 방이나 책상 등, 인테리어 사진을 보는 게 좋아서 만든 것이었어요.” 물론 이는 FFF 프로젝트의 경우도 마찬가지였다. “FFF 프로젝트의 경우는 여러 개의 좋아하는 것들에서 영감을 얻었어요.” 미니멀 디자인, 타이포그래피, 우주, 시간, 고흐, 앤디워홀, 르네 마그리트, 사진 등에서 영감을 받아 거기에 HTML5의 인터랙션을 추가했다.
형태는 기능을 따른다
처음 기획 의도는 코드를 사용해서 인터랙티브한 사용자 경험을 만들고, 그 인터랙션에 걸맞는 디자인을 입히고, 포스터를 디자인하는 것이었다. 회사동료와 이런 개인 프로젝트 기획에 대한 이야기를 나누다 우연히 나온 말이 이 프로젝트의 제목을 결정하게 되었다. “회사 동료가 기획에 대한 이야기를 듣더니, ‘그럼 형태는 기능을 따른다(Form Follows Function)네?’라고 되묻더라고요.” 그 즉시 그는 평소 좋아하던 문구인 ‘형태는 기능을 따른다(Form Follows Function)’로 프로젝트의 이름을 결정했다.
구급상자 속 라벨
프로젝트의 첫 화면에 등장하는 포스터 디자인의 경우, 처음엔 각각의 인터랙티브 디자인에 맞는 다양한 스타일의 디자인으로 만들려고 했다. 하지만 막상 만들고 보니 통일감도 떨어지고 어딘가 부족한 느낌이 들었다.
“여기에 재밌는 일화가 있는데요. 포스터 디자인으로 고민하던 중, 와이프가 요리를 하다가 손을 다치게 되었어요. 그래서 급하게 응급처치를 하느라 구급상자를 열었는데요. 그 구급상자 안의 일관성 있는 라벨 디자인이 눈에 들어오더라고요.” 그는 여기서 영감을 받아 포스터 디자인을 일관성 있는 라벨처럼 디자인했다. “다행히 크게 다치진 않아서 지금은 괜찮아졌고요. 와이프는 본인이 다친 덕분에 좋은 디자인이 나왔다며 생색을 내고 있어요.”
미술작품의 인터랙션화
14 더 스크림(The Scream)은 뭉크의 <절규>에서 느껴지는 감정을 어지럽고 복잡한 선을 덧칠하는 것으로 표현했다. “자동으로 정신없이 그려지고 있지만, 마우스를 클릭하면 원하는 곳에 그려지도록 인터랙션을 구성했어요.”
12 플랜트 트리(Plant Trees)와 10 레이닝 맨(Raining Men)은 르네 마그리트의 작품들에서 영감을 받아 제작했다. “플랜트 트리는 르네 마그리트의 <엠파이어 오브 라이트(Empire of Light)>라는 작품에서 영감을 받았어요. 하늘은 낮인데 거리는 밤인, 낮과 밤이 공존하는 작품이죠.” 플랜트 트리는 낮으로 표현되는 밝은 배경에선 나무들이 밤처럼 어두운 색을 띠고, 밤으로 표현되는 어두운 배경에선 오히려 나무들이 밝고 화려한 색을 띠도록 만들었다. “레이닝 맨은 르네 마그리트의 <겨울비(Golconde)>를 ‘우산을 쓴 신사’라는 저만의 아트웍으로 재가공해보았어요.” 레이닝 맨은 마우스의 움직임을 바람으로 설정해 비 내리는 방향을 조절할 수 있다.
07 휴 블랜딩(Hue Blending)과 02 캠벨 스프(Campbell’s Soup) 3D는 앤디워홀의 작품에서 영감을 받았다. “휴 블랜딩의 경우, 뉴욕의 Moma 박물관에서 본 앤디워홀의 <캠벨 스프 캔(Campbell's Soup Cans)>을 미술관 전시상태 그대로 액자까지 웹으로 옮겨보았어요. 거기에 다양한 색상이 변화하는 앤디워홀 고유의 스타일을 인터랙션으로 구성했고요. 캠벨 스프 3D는 앤디워홀의 영향으로 슈퍼에서 스프 캔 하나를 사서 책상에 놔두는 것만으로도 앤디워홀의 작품을 하나 가지고 있는 것 같다는 생각을 하게 되었어요. 거기서 영감을 받아, 캠벨 스프를 3D 모델로 표현했어요. 단지 그뿐이지만, 마치 앤디워홀의 작품을 3D로 표현한 것 같은 느낌을 주는 것 같아요.”
04 컬러 픽셀레이티드(Color Pixelated)는 그가 고흐의 작품을 볼 때마다 느꼈던 색상에 대한 강렬한 인상을 크리에이티브로 풀어낸 섹션이다. “고흐의 그림에서 색을 추출해서 모자이크화 시키고요. 그림의 크기에 따라 달라지는 모자이크의 느낌을 볼 수 있도록 리사이즈되는 인터랙션을 구성했어요.”
시간과 공간
그는 자신이 좋아하는 주제 중 하나인 시간과 공간의 개념을 사용해 몇 섹션을 구성했다. 08 플립 클락(Flip Clock)은 시간을 표현했는데, 아날로그 느낌의 플립시계의 디테일한 움직임에 신경썼다. 03 유니버스 파노라마(Universe Panorama)는 공간을 표현한 섹션으로, 360도 3D를 사용해 우주의 방대함을 나타냈으며, 마우스 드래그를 통해 방향을 조절하는 인터랙션을 구성했다.
공간에 대한 관심은 그가 살고 있는 뉴욕에 대한 관심으로도 전해진다. “09 리플스 온 더 그린(Ripples on the Green)은 제가 살고 있는 뉴욕에서 영감을 얻은 섹션으로 물에 비치는 뉴욕의 모습을 표현했어요. ‘+’, ‘-’ 버튼으로 물결의 흔들림을 조절할 수 있어요. 06 트라이앵글레이션(Triangulation)은 이미지를 변형하는 다양한 방법 중 하나인 삼각형 이미지화를 통해 뉴욕에서 찍은 사진들을 보여주고 있어요. 마우스 드래그를 통해 삼각형 모자이크 위치를 조절할 수 있고요.”
또한 그는 도쿄 여행 중 찍었던 사진에서 영감을 받아 01 보케(Bokeh) 섹션을 구성했다. “도쿄 여행 중 비오는 날 유리창에 비친 색색의 빛방울들을 찍은 사진이 있는데요. 거기서 영감을 받아 빛이 합쳐지면 밝아지는 원리를 적용해서 빛방울을 표현했어요.”
기술과 소프트웨어
FFF 프로젝트는 컴퓨터 뿐만 아니라 아이패드와 같은 태블릿에서도 동일하게 보이면 좋겠다는 생각으로 HTML5의 Canvas, CSS Transition, CSS Translate3d 등의 기술을 사용해서 만들었다. 제작은 PhpStorm 에디터를 주로 사용하고 코딩하고, jQuery, TweenMax, Sammy.js, Edan’s 3D library 같은 자바스크립트 라이브러리를 사용했다.
이미지 캡션
01 FFF 프로젝트의 메인화면.
02 각 섹션별 포스터들은 구급상자 속 일관성 있는 라벨 디자인에서 영감을 받아 디자인했다.
03 FFF 프로젝트의 몇 가지 섹션은 윈도우용과 맥용 화면보호기를 제공한다.
04-05 웹뿐만 아니라 아이패드와 같은 태블릿에서도 같은 인터랙티브가 구현될 수 있도록 HTML5를 사용해 제작했다.
06-07 “와이퍼 타이포그래피(Wiper Typography)는 비 오는 날 버스 창문과 타이포그래피 포스터에서 영감을 얻은 섹션이에요. 움직임과 디자인은 구상했는데, 실제로 표현할 코드가 짜지질 않아서 3일간 실제로 어떻게 움직임을 줄 것인지 고민했는데, 어느 날 아침, 잠이 덜 깬 상태에서 갑자기 아이디어가 떠올라 출근하기 전에 30분 만에 완성했어요. 저한텐 굉장히 신기한 경험이었고, 그래서 가장 애착이 가는 섹션이에요.”
08 “스파이럴(Spiral)은 나선모양의 작품으로 유명한 로버트 스미슨(Robert Smithson)의 작품에서 영감을 받아서 표현한 섹션이에요. 로버트 스미슨을 소개하는 글을 나선형으로 회전시키는 효과를 구성했어요.”
09 서페이스 웨이브(Surface Waves)는 출렁이는 물결을 마우스 드래그를 통해 체험할 수 있는 섹션이다. 물결의 움직임에 따라 색이 변화한다.
10-11 컬러 픽셀레이티드(Color Pixelated)는 고흐의 그림에서 색을 추출하고 이를 모자이크화시키는 모습을 보여준다.
PRESS