안녕하세요.
루리웹에 해외 아이피가 막혀서 못들어 왔었는데, 오늘 드디어 풀렸나보네요.
저는 개발자인데 디자인을 취미로 하고 있어요.
제가 취미로 했던 개인작업중에 하나를 소개해드리려고 합니다.
2012년에 만든 Form Follows Function이라는 프로젝트인데,
메인에 원형으로 돌아가는 카드가 있고,
각각의 카드를 클릭하면 HTML5로 이루어진 다양한 인터랙션을 경험할 수 있는 웹사이트입니다.
카드를 클릭하면 나오는 각각의 콘텐츠들은 제가 좋아하는 것들에서 영감을 받았습니다.
몇개만 소개해드리면,
일본 여행 중에 비가 왔는데 시부야 쪽에 유리 벽이 있는 육교에서 사진을 찍었더니 이런 사진이 나왔었어요.
여기서 영감을 얻어서 보케라는 섹션을 만들었습니다.
보케란 사진을 찍을 때 초점이 맞지 않아 흐려진 부분의 빛이 맺힌 모양을 말하는데 흔히 빛 망울이라고 부르기도 합니다.
HTML5 캔버스에 랜덤으로 움직이는 공을 만들고 캔버스의 globalCompositeOperation 속성을 조절해서
공들이 겹치는 부분이 밝아지는 효과를 적용해 빛처럼 보이게 했습니다.
개인적으로 앤디 워홀의 작품을 좋아하는데요,
그중에 Campbells Soup는 그냥 집에 사놓으면 앤디 워홀의 작품을 전시한 것 같은 허세감을 느끼게 합니다.
여기에 영감을 얻어 Campbells Soup을 3D로 표현한 것뿐이지만,
앤디 워홀의 작품을 3D로 표현한 것 같은 이중적인 느낌을 주는 섹션을 만들었습니다.
마우스나 손가락의 이동 방향에 따라 회전하고 기울어지는 인터랙션을 추가해서 재미를 더했습니다.
뉴욕에 있는 MoMA 뮤지엄에 갔을 때 이 작품을 본 적이 있는데요.
여러 장의 Campbells Soup 그림이 각각 액자에 담겨 하나의 큰 작품을 이루고 있는 건데,
이게 참 멋져 보이더라고요.
그래서 그 나무 액자 전시 상태 그대로 웹으로 만들어봤어요.
CSS3의 3D를 사용해 나무 액자를 만들어서 시점에 따라 액자가 입체감 있게 보이도록 했습니다.
앤디 워홀의 특징이라면 실크스크린 기법을 이용한 대량생산인데
이것이 공장에서 물건을 대량생산하는 것과 같다고 해서 팩토리라고 부르는 스튜디오를 짓기도 했습니다.
이런 제작 방식으로 인해 하나의 작품에 여러 가지 다른 색을 사용해 찍어낼 수 있었는데
앤디 워홀의 작품엔 같은 그림이지만 색상만 다른 작품을 볼 수 있는 이유입니다.
이런 앤디 워홀 고유의 스타일에서 영감을 얻어
마우스의 이동에 따라 그림의 색상이 변하는 인터랙션을 추가했습니다.
개인적으로 좋아하는 초현실주의 작가인 르네 마그리트의 작품은 많은 아티스트들에게 영감을 주는데
특히 양복을 입은 신사가 비처럼 내리는 Golconda라는 그림은 영화 매트릭스의 한 장면의 모티브가 되기도 했습니다.
여기서 영감을 얻어 우산을 쓴 신사라는 그래픽으로 비 내리는 모습을 표현하고,
비 내리는 움직임을 마우스의 움직임에 따라 바람의 방향이 바뀌는 인터렉션으로 만들었습니다.
같은 르네 마그리트의 작품 중에 The Empire of Lights라는 작품이 있는데
거리는 밤인데 하늘은 낮인 낮과 밤이 공존하는 그림입니다.
MoMA에서 이 작품을 보고 영감을 얻었는데 밝은 배경에 어두운 물체, 혹은 그 반대의 역설적인 느낌을
나무가 자라는 알고리즘과 결합해서 표현했습니다.
화면에 마우스를 클릭하면 나무가 자라는데
밝은 배경의 낮에는 어두운 나무가 자라고,
어두운 배경의 밤에는 화려한 색을 가진 밝은 나무가 자라게 했습니다.
빈센트 반 고흐의 작품을 안 좋아하시는 분은 아마 거의 없을 거라고 생각되는데요,
고흐의 작품을 볼 때마다 독특한 붓 터치와 색상에 강렬한 인상을 받았었는데
그것을 저만의 아트웍으로 풀어낸 섹션입니다.
고흐의 그림에서 색상을 추출해 모자이크처럼 픽셀화시키는데요,
단순히 원본 이미지와 픽셀화된 이미지 두 장을 보여주는 것이 아니라,
실시간으로 픽셀화하고 있다는 것을 나타내기 위해서 리사이징 효과를 추가했어요.
고흐 섹션은 네덜란드에 있는 빈센트 반 고흐 뮤지엄에 전시되기도 했는데요.
뮤지엄 정문에 설치된 인스톨레이션 작품에 세계 여러 나라의 아티스트가 만든 고흐의 작업 중 하나로 보이기도 했습니다.
점토로 만든 인형을 움직이는 클레이 애니메이션은 제가 좋아하는 영화 장르인데,
그중에서도 월레스와 그로밋은 가장 좋아하는 작품 중 하나입니다.
영화 내용 중에 양털을 모두 빼앗긴 아기 양이 추위에 부들부들 떠는 장면이 있는데
사실 클레이 애니메이션이 각 프레임을 손으로 움직임을 연출해서 찍는 거라
이렇게 빠르게 움직이는 장면은 굉장히 손이 많이 갑니다.
95년에 이 양이 떠는 장면이 나왔을 때
많은 사람이 클레이 애니메이션의 한계를 뛰어넘은 연출이라는 평을 내렸었습니다.
이런 놀라운 연출에 존경의 뜻을 전하고자 만든 것이 바로 이 섹션 입니다.
화면에 양들이 걸어가고, 그중에 한 마리를 잡으면 잡아먹지 말라고 부들부들 떱니다.
Wiper Typography는 FFF의 대표 아트웍인데요.
비 오는 날 버스 창문과 타이포그래피 잡지에서 영감을 얻었는데,
타이포그래피를 빗방울로 만들려는 구상은 대충 떠올랐는데,
어떤 방식으로 표현을 할지 떠오르지 않더라고요.
그렇게 며칠을 고민하다가 어느 날 아침에 잠에서 깼는데 갑자기 아이디어가 떠올랐어요.
그래서 출근하기 전에 30분 만에 완성한 섹션입니다.
저는 한 가지를 생각하다 보면 꿈에서도 그걸 생각하기도 해요.
이런 특별한 경험인 만큼 제가 유난히 좋아하는 아트웍인데요,
일본의 매거진에 광고 디자인을 요청받았을 때 사용하기도 했고요,
제분야의 시조새 같은 분인 디자이너 존 마에다 씨가 본인의 트위터에 올리기도 하셨고요,
그리고 제 책 표지 디자인에도 사용했습니다.
그리고 최근에는 테슬라 모델3의 스크린에 풀로 띄워서 이렇게 구동 영상을 촬영하기도 했습니다.
저는 이렇게 쓸데없는 짓을 많이 하는 편인데요,
이런 쓸데없는 짓이 저를 부지런하게 만드는것 같아요.
저는 개인적으로 일 외엔 따른 취미생활이 없어요. 게임도 안하고 티비도 안봅니다.
그냥 일하는게 제일 재미있는것 같아요.
그래서 이런 쓸데없는 개인작업을 많이 하는 편인데,
이런 돈도 안되고,
또 실제 프로젝트에 사용하기에는 힘든 기술과, 디자인이지만,
이런걸 만들어봄으로써 배우는게 참 많은것 같습니다.
그리고 그렇게 배웠던 것들이 나를 성장 시키고 실제 프로젝트에도 유용하게 쓰였던 적이 많았어요.
그리고 이 작업을 보고 구글에서 입사제의가 와서 지금까지 구글에서 일을 하고 있는데요.
만약에 제가 이런 개인 작업을 하지 않고 회사 일만 했었다면,
세상 누구도 내가 어떤 개발자/디자이너인지, 뭐를 잘하는지 몰랐을 겁니다.
나는 어떤 일을 하고싶어 라고 말로만 하기보단,
내가 하고싶은 디자인을 개인작업으로라도 포트폴리오를 계속 쌓는게 중요하다고 생각해요.
그렇게 쌓은 포트폴리오는 나라는 디자이너를 정의하는데 아주 중요한 역할을 합니다 :)
움짤로 만들었더니 용량이 너무 크고 fps가 끊겨 보여서 그냥 이미지로 캡쳐했습니다.
움직이는 모습과 더 자세한 내용은 영상에서 보실 수 있습니다 :)
와우.. IT 시대의 아티스트네요. 심지어 지금 만들었다고 해도 놀라울 영감과 기술의 작품을 2012년에 만들었다니. 그때 HTML5라는것이 이렇게 잘 알려진것도 아니었는데.
글을 끝까지 안읽었나보네요. 이미 구글에 입사해서 일하고 있답니다.
와오... 른쪽에서 뵙겠습니다!
다른것보다, 일하는게 재밌어서 취미는 딱히 없다는게... 뭐랄까 부럽네요
와오... 른쪽에서 뵙겠습니다!
우와...아직도 예술이 뭔지 잘 모르겠지만, 이런게 예술 아닐까 생각되네요...
멍멍이랑 야옹이랑
-찐-
멍멍이랑 야옹이랑
와! 대단하십니다. 이런 것보면 예술은 항상 가까운데 있는 것 같아요.
부럽당
와우.. IT 시대의 아티스트네요. 심지어 지금 만들었다고 해도 놀라울 영감과 기술의 작품을 2012년에 만들었다니. 그때 HTML5라는것이 이렇게 잘 알려진것도 아니었는데.
[삭제된 댓글의 댓글입니다.]
철인87호
글을 끝까지 안읽었나보네요. 이미 구글에 입사해서 일하고 있답니다.
잠에서 깨며 아이디어가 떠올랐다는데에서, 평소에 얼마나 애정을 가지고 프로젝트를 생각해왔는지 느껴집니다. 존경스럽습니다.
어제 디시인이라고 올라온걸로 봤는데 ㅎ 역시 다른분은 뭐가 다르네요 ^^
비범하시네요. 이런 분들을 아티스트라고 하겠죠. 좋은 작품 많이 만들어주시고 루리웹에서도 가끔씩 좋은 작품 보여주세요. ^^
이쪽 계열을 지망하시는분들한테는 귀중한 자료가 될듯
와 미디어 아티스트가 여기 계셨네요. 스크랩해갑니다. 감사합니다.
알파고 직장동료
디자이너?? 아니면 아티스트이신가요? 거의 예술작품 같습니다
잘봤습니다. 무언가를 그리고 칠하고 채우는것만 디자이너는 아니죠. 이미 충분히 디자이너십니다. 인터렉션이 참 좋네요. 디자인부터 개발까지 참 부럽습니다.
과정과 결과물들을 떠나 말씀 참 겸손하게 하신다..
개발도 하시고 디자인도 하시다니 대단하시네요! 중간에 나오는 3D나 자라나는 나무같은 것들은 webgl도 사용하신건가요?
역시 디자인과 예술을 하려면 다양한 경험이 필요하네요 멋있어요
예술가는 달라 역시
멋집니다.. 더욱 많은 쓸데없는(?) 작품활동 펼쳐주세요 정말 잘봤습니다
https://fff.cmiscm.com/#!/main 사이트가 지금은 없는줄 알았는데 있네요
와...정말 멋지네요. 저도 이분야에 흥미있어서...님께서 쓰신 책 찾아봤는데요. 지금은 아쉽게도 절판이네요..ㅠㅠ
다른것보다, 일하는게 재밌어서 취미는 딱히 없다는게... 뭐랄까 부럽네요
취미도 일이되면 지겨워지는데 대단하것 같네요.
부지런한것 같아 부럽습니다. 한편으로 반성하게 되는군요. 아... 생각은 많은데 실천하거나 진도가 느린 절 보면서요. 빈둥거리고 게임하느라 바뻤지만...ㅋㅋㅋ
하... 너무 멋집니다.....디자인계열에서 일하고 있지만 가끔 현타올때가 많은데 자극 많이 받습니다 감사합니다.
디자인 하시는분들 보면 멋지네요
ㅊㅊ드립니당
저는 개인적으로 일 외엔 따른 취미생활이 없어요. 게임도 안하고 티비도 안봅니다. ------ 거짓말...루리웹 하시면서.
글쓴이 분 책 고등학교때 산게 어제같은데 ㅠ.. 그때도 되게 이쁜 디자인 이라고 생각했는데 다시보니 더 좋아보이네요
으아아아...양들이 멈추지 않아요!!!! 정말 재미있는 작업이네요. 물론 결과물이 재미있다는 말입니다. 엄청나게 큰 의미가 있는건지는 잘모르겠지만 재미있고 관심이가는 결과물같습니다. 싸이트 재미있네요...
능.력.자 대단하십니다;
글 쓰신것만 봐도 정말 삶 자체가 영감을 얻을 수 있는 수많은 경험으로 생각하시면서 사신다는게 느껴지네요. 디자인이나 미술 쪽에 문외한인 제가 봐도 결과물들이 하나같이 정말 멋집니다. 핸드폰이나 태블릿처럼 제가 쓰는 제품에 이런 느낌의 테마가 적용되면 멋지겠다는 느낌이 들어요.
멋지십니다
제 머릿속에선 못 나올 것들이 너무 많다
HTML5로 저런 것들이 가능하다니 놀랍네요. 소름이 쫙 돋는데.. 구글 입사 제의 납득이 갑니다.
와 이럴수가.. 제가 2012년도에 처음 디자이너로 회사생활 시작했을때, 퍼블리셔쪽도 공부하고 싶어 기웃 기웃 레퍼모으다 감탄하고, 한국분이란걸 알아서 두번 감탄했던.. 그 작품을 여기서 다시보고, 심지어 만드신분 본이이 올리시다니 그저 신기할따름입니다 ^^ 심지어 그게 구글 입사용 포플이 되었다는데 또 놀랍습니다.
지금봐도 와... 소리밖에 안나오는...
개인작업 하는게 중요할 듯 합니다... 그런데... 최근 코로나 때문에 쉬는 날 많이 준다고 했는데.. 아직까지 일시키고 있는 (......)
구글은 어떤 사람들이 입사하나 궁금했는데 이런 분들이 일하시는군요. ㄷㄷㄷ
세상에.. 픽셀고흐는 저도 어디선가 봤는데 루리웹 유저의 작품이었다니 충격이네요! 정말 훌륭합니다 멋져요
맨날 루리웹하는애들이 어쩌고 수준이어쩌고 이러지만 온갖능력자 하이퀄리티레벨의 사람들 부자들이 포진해있는 커뮤..
믓지네요.
뭐야;; 이런분 무서워
될성부른나무는 떡잎부터 알아본다는게 딱. 이분을!
허미.. 2012년에 HTML5로 ㄷㄷㄷ
다른 커뮤에서 봤는데 볼때마다 놀랍네요 잘 보고 갑니다 : )
이게 디지털 시대의 예술...
ㅎㄷㄷ
김종민씨를 여기서 보네요. 책 잘 봤습니다. :)
와.. 취준생으로서 취업은 아직 멀었다는 느낌이 드네요.
ㅎㄷㄷ 다 읽고 영상보니 내용이 똑같네요 그럴줄알았으면 처음부터 영상볼껄😆 본문 글씨에 색을 넣으셨는지 다크모드에서 글씨가 거의 보이지 않네요.
선생님 너무나도 훌륭합니다. 추천드립니다.
다양한 걸 접하고 보고 느끼고 생각하면서 받아들여야 새로운 무언가가 나올 수 있다고 생각합니다. 옛 그림이나 각종 예술품은 가릴 게 아니라고 생각 됩니다. 메제드를 보면 도대체 어떻게 그 시절에 이런 그림이 나올 수 있었던건지 참 신기하더군요. 그 정체가 무엇이든.
멋집니다.
천재야
역시 구굴은 이런사람들이 입사하는군요
"그래서 이런 쓸데없는 개인작업을 많이 하는 편인데..." 라고 하셨지만 처음 몇 작품 보고나서 든 생각이 '난 여지껏 뭘 하면서 살아왔을까..?' 였습니다. 이미 실력을 보상받고 계시지만 정말 멋집니다. 제가 구글HR이었어도 스카웃 했을 껍니다. 앞으로도 승승장구 하시길...
소름돋고가서 간만에 댓글추천박고갑니다
고졸에 유학 경험 없이 경력 4년 만에 구글 입사라니..대단하신 분이네요
와 이런분들을 보면 성공하는 사람은 성공할 만한 이유가 있는거같아...
하나하나만 봐도 엄청난 퀄리티인데 이걸 전부다 만드셨다고요?
저도 개발은 8년정도 했었지만 디자인적인 감각이 꽝이라 꿈도 못꿨던 경지네요~~ 대박..
재밌게 잘 봤습니다~
이 분 작년인가 TV 프로그램에 실리콘밸리 인재로 나왔던 분 같은데... 맞나요? 되게 인상적이서 기억에 남네요
FWA에서 예시로 많이 봤던 페이지인데 제작자가 여기계시다니 ㄷㄷ
좋네여
책 재판좀 해주세요.
시대를 앞섰다
이해 못함 ㅋㅋㅋ
8년전 작품이라는게 충격적!
멋진 작품입니다 댓글달려고 새계정로그인까지 하게 됐습니다 대단하신분이네요~!!
디시에도 올리시더니 ㄹㄹ도 하시네요 ㅎㅎ
잘 모르지만 뭔가 대단하다라고만 느끼는중 ~
뭔지 몰라서 일단 좋아요(추천) 누름..
아니, 이런 분이 왜 ㄹㄹ웹에.. .. 있으셔서 기분 좋습니다. 추천!
와 12년도 당시에 이정도 기술과 영감이라니...멋집니다!!! 난 그떄 뭐했더라 ㅠㅜ
디자인감각 늘리는데는 어떤게 가장 도움이 될까요!!?
와 댓글 남기려 로그인 합니다. 저와 취향과 영감받은 작가와 작품들.. 업무했던 분야 등 대부분 겹치네요! 다만 다른 점이 있다면... 저는 구상에 끝났다는 것. 님께선 구상한바를 표현하고 디자인으로 승화했다는 것. 진심으로 박수 보냅니다. 웹모션 일 하면서 사장되어가던 플래시의 디자이너도 아니고 프로그래머도 아니고 퍼블리셔도 아니면서 모든걸 다해야하는 이도저도 아닌 입장에서 대학에서 배운 디자인과는 괴리가 심한 상황만 한탄하며 현실 삶에 별로 도움도 안되는거같은 업계를 떠난지가 벌써 ㅎㅎ 10년 ㅎㅎ 님의 영상보고 예전에 제가 하고 싶었던 것들이 뭐였는지 떠올랐네요 ㅎㅎ 추억소환에 추천박고 갑니다~
디자인을 취미로 하신다니..디자이너인 제가 부끄럽네요..ㅜㅜ멋집니다!
다른 사이트에서도 보고 여기서도 보네요 ㅎㅎ 대학생 시절 우연히 서점에서 책을 보고 너무 감명깊어서 학교 도서관에 책을 신청해서 엄청 재밌게 읽었습니다. 대학생 시절 책은 읽고 싶은데 대학생 신분이라 가난하여 도서관의 희망도서 구매 신청을 많이 이용했습니다. 정말 감명깊게 읽은 책이라 실물로 사야지~ 해놓고 까먹었는데 이렇게 다시 보네요. 항상 응원합니다 정말 멋지세요.