디시인사이드 갤러리

초개념 갤러리

갤러리 이슈박스, 최근방문 갤러리

갤러리 본문 영역

구글에서 입사 제의 받은 포트폴리오

webcm갤로그로 이동합니다. 2020.07.06 18:28:01
조회 26428 추천 256 댓글 153

viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73ded8ffa11d028313550f9fb3f9dac8b24082c81cb595a46c41c36a062d692a2bb9dff9d9291422ca2db72db48e6a43593d8f76f91c7f6834732681fa831



안녕하세요.


제가 했던 '돈안되는' 쓸데없는 개인작업중에 하나를 소개해드리려고 합니다.


2012년에 런칭했던 Form Follows Function이라는 프로젝트인데, 


메인에 원형으로 돌아가는 카드가 있고, 


각각의 카드를 클릭하면 HTML5로 이루어진 다양한 인터랙션을 경험할 수 있는 웹사이트입니다.






카드를 클릭하면 나오는 각각의 콘텐츠들은 제가 좋아하는 것들에서 영감을 받았습니다. 


몇개만 소개해드리면,





viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73ded8ffa11d028313550f9fb3f9dac8b24082c81cb595a46c41c36a062d692a2bb9dff9d9291422ca2db72db48e6a43593d8ff66c896a5840eae5cf6d5f3



일본 여행 중에 비가 왔는데 시부야 쪽에 유리 벽이 있는 육교에서 사진을 찍었더니 이런 사진이 나왔었어요. 


여기서 영감을 얻어서  보케라는 섹션을 만들었습니다.




viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73ded8ffa11d028313550f9fb3f9dac8b24082c81cb595a46c41c36a062d692a2bb9dff9d9291422ca2db72db48e6a43593d8f56ac690f88b3ac2194eed34



보케란 사진을 찍을 때 초점이 맞지 않아 흐려진 부분의 빛이 맺힌 모양을 말하는데 흔히 빛 망울이라고 부르기도 합니다. 


HTML5 캔버스에 랜덤으로 움직이는 공을 만들고 캔버스의 globalCompositeOperation 속성을 조절해서 


공들이 겹치는 부분이 밝아지는 효과를 적용해 빛처럼 보이게 했습니다.














viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73ded8ffa11d028313550f9fb3f9dac8b24082c81cb595a46c41c36a062d692a2bb9dff9d9291422ca2db72db48e6a43593d8f569c495f38af377ee4052cc



개인적으로 앤디 워홀의 작품을 좋아하는데요, 


그중에 Campbell's Soup는 그냥 집에 사놓으면 앤디 워홀의 작품을 전시한 것 같은 허세감을 느끼게 합니다.





viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73ded8ffa11d028313550f9fb3f9dac8b24082c81cb595a46c41c36a062d692a2bb9dff9d9291422ca2db72db48e6a43593d8f26ac592a7d23685f11ffeaf



여기에 영감을 얻어 Campbell’s Soup을 3D로 표현한 것뿐이지만, 


앤디 워홀의 작품을 3D로 표현한 것 같은 이중적인 느낌을 주는 섹션을 만들었습니다.


마우스나 손가락의 이동 방향에 따라 회전하고 기울어지는 인터랙션을 추가해서 재미를 더했습니다.













viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73ded8ffa11d028313550f9fb3f9dac8b24082c81cb595a46c41c36a062d692a2bb9dff9d9291422ca2db72db48e6a43593d8a03a9593f3d196963a6712c1



뉴욕에 있는 MoMA 뮤지엄에 갔을 때 이 작품을 본 적이 있는데요. 


여러 장의 Campbell's Soup 그림이 각각 액자에 담겨 하나의 큰 작품을 이루고 있는 건데, 


이게 참 멋져 보이더라고요.




viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73ded8ffa11d028313550f9fb3f9dac8b24082c81cb595a46c41c36a062d692a2bb9dff9d9291422ca2db72db48e6a43593d8a768c5c4a4818740a67468e4



그래서 그 나무 액자 전시 상태 그대로 웹으로 만들어봤어요. 


CSS3의 3D를 사용해 나무 액자를 만들어서 시점에 따라 액자가 입체감 있게 보이도록 했습니다.


앤디 워홀의 특징이라면 실크스크린 기법을 이용한 대량생산인데 


이것이 공장에서 물건을 대량생산하는 것과 같다고 해서 팩토리라고 부르는 스튜디오를 짓기도 했습니다. 


이런 제작 방식으로 인해 하나의 작품에 여러 가지 다른 색을 사용해 찍어낼 수 있었는데 


앤디 워홀의 작품엔 같은 그림이지만 색상만 다른 작품을 볼 수 있는 이유입니다. 


이런 앤디 워홀 고유의 스타일에서 영감을 얻어 


마우스의 이동에 따라 그림의 색상이 변하는 인터랙션을 추가했습니다.












viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73ded8ffa11d028313550f9fb3f9dac8b24082c81cb595a46c41c36a062d692a2bb9dff9d9291422ca2db72db48e6a43593d8f76ec894f0d1e9801eb06ea7



개인적으로 좋아하는 초현실주의 작가인 르네 마그리트의 작품은 많은 아티스트들에게 영감을 주는데 


특히 양복을 입은 신사가 비처럼 내리는 ‘Golconda’라는 그림은 영화 매트릭스의 한 장면의 모티브가 되기도 했습니다.




viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73ded8ffa11d028313550f9fb3f9dac8b24082c81cb595a46c41c36a062d692a2bb9dff9d9291422ca2db72db48e6a43593d8f566c491f3830acd2ea0500a



여기서 영감을 얻어 우산을 쓴 신사라는 그래픽으로 비 내리는 모습을 표현하고, 


비 내리는 움직임을 마우스의 움직임에 따라 바람의 방향이 바뀌는 인터렉션으로 만들었습니다.












viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73ded8ffa11d028313550f9fb3f9dac8b24082c81cb595a46c41c36a062d692a2bb9dff9d9291422ca2db72db48e6a43593d8a46bc09ca58121cc22eb4576



같은 르네 마그리트의 작품 중에 ‘The Empire of Lights’라는 작품이 있는데 


거리는 밤인데 하늘은 낮인 낮과 밤이 공존하는 그림입니다.




viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73ded8ffa11d028313550f9fb3f9dac8b24082c81cb595a46c41c36a062d692a2bb9dff9d9291422ca2db72db48e6a43593d8a73d9594a7d2a53ec4e93b21



viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73ded8ffa11d028313550f9fb3f9dac8b24082c81cb595a46c41c36a062d692a2bb9dff9d9291422ca2db72db48e6a43593d8fe6bc695f0d1e46b2f6dcc62



MoMA에서 이 작품을 보고 영감을 얻었는데 밝은 배경에 어두운 물체, 혹은 그 반대의 역설적인 느낌을 


나무가 자라는 알고리즘과 결합해서 표현했습니다. 


화면에 마우스를 클릭하면 나무가 자라는데 


밝은 배경의 낮에는 어두운 나무가 자라고, 


어두운 배경의 밤에는 화려한 색을 가진 밝은 나무가 자라게 했습니다. 












viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73ded8ffa11d028313550f9fb3f9dac8b24082c81cb595a46c41c36a062d692a2bb9dff9d9291422ca2db72db48e6a43593d8f369c7c4a3d2d0a5e7e2e4eb



빈센트 반 고흐의 작품을 안 좋아하시는 분은 아마 거의 없을 거라고 생각되는데요, 


고흐의 작품을 볼 때마다 독특한 붓 터치와 색상에 강렬한 인상을 받았었는데 


그것을 저만의 아트웍으로 풀어낸 섹션입니다.




viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73ded8ffa11d028313550f9fb3f9dac8b24082c81cb595a46c41c36a062d692a2bb9dff9d9291422ca2db72db48e6a43593d8f73d9497a28a6f192e7783b1



고흐의 그림에서 색상을 추출해 모자이크처럼 픽셀화시키는데요, 


단순히 원본 이미지와 픽셀화된 이미지 두 장을 보여주는 것이 아니라, 


실시간으로 픽셀화하고 있다는 것을 나타내기 위해서 리사이징 효과를 추가했어요. 





viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73ded8ffa11d028313550f9fb3f9dac8b24082c81cb595a46c41c36a062d692a2bb9dff9d9291422ca2db72db48e6a43593d8a739c197a5803e3b8738c402



고흐 섹션은 네덜란드에 있는 빈센트 반 고흐 뮤지엄에 전시되기도 했는데요. 


뮤지엄 정문에 설치된 인스톨레이션 작품에 세계 여러 나라의 아티스트가 만든 고흐의 작업 중 하나로 보이기도 했습니다. 












viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73ded8ffa11d028313550f9fb3f9dac8b24082c81cb595a46c41c36a062d692a2bb9dff9d9291422ca2db72db48e6a43593d8a36791c4f485b859e313a919



점토로 만든 인형을 움직이는 클레이 애니메이션은 제가 좋아하는 영화 장르인데, 


그중에서도 ‘월레스와 그로밋’은 가장 좋아하는 작품 중 하나입니다. 


영화 내용 중에 양털을 모두 빼앗긴 아기 양이 추위에 부들부들 떠는 장면이 있는데


사실 클레이 애니메이션이 각 프레임을 손으로 움직임을 연출해서 찍는 거라 


이렇게 빠르게 움직이는 장면은 굉장히 손이 많이 갑니다. 


95년에 이 양이 떠는 장면이 나왔을 때 


많은 사람이 클레이 애니메이션의 한계를 뛰어넘은 연출이라는 평을 내렸었습니다.




viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73ded8ffa11d028313550f9fb3f9dac8b24082c81cb595a46c41c36a062d692a2bb9dff9d9291422ca2db72db48e6a43593d8f468c296f4d70c134c158e58



이런 놀라운 연출에 존경의 뜻을 전하고자 만든 것이 바로 이 섹션 입니다. 


화면에 양들이 걸어가고, 그중에 한 마리를 잡으면 ‘잡아먹지 말라고' 부들부들 떱니다.










viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73ded8ffa11d028313550f9fb3f9dac8b24082c81cb595a46c41c36a062d692a2bb9dff9d9291422ca2db72db48e6a43593d8f367c690a2874381dfcbc652



Wiper Typography는 FFF의 대표 아트웍인데요. 


비 오는 날 버스 창문과 타이포그래피 잡지에서 영감을 얻었는데, 


타이포그래피를 빗방울로 만들려는 구상은 대충 떠올랐는데, 


어떤 방식으로 표현을 할지 떠오르지 않더라고요. 



그렇게 며칠을 고민하다가 어느 날 아침에 잠에서 깼는데 갑자기 아이디어가 떠올랐어요. 


그래서 출근하기 전에 30분 만에 완성한 섹션입니다. 


저는 한 가지를 생각하다 보면 꿈에서도 그걸 생각하기도 해요.





viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73ded8ffa11d028313550f9fb3f9dac8b24082c81cb595a46c41c36a062d692a2bb9dff9d9291422ca2db72db48e6a43593d8f26fc19cf584948769e3765b



이런 특별한 경험인 만큼 제가 유난히 좋아하는 아트웍인데요, 


일본의 매거진에 광고 디자인을 요청받았을 때 사용하기도 했고요, 


제분야의 시조새 같은 분인 디자이너 존 마에다 씨가 본인의 트위터에 올리기도 하셨고요, 


그리고 제 책 표지 디자인에도 사용했습니다. 


그리고 최근에는 테슬라 모델3의 스크린에 풀로 띄워서 이렇게 구동 영상을 촬영하기도 했습니다.









viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73ded8ffa11d028313550f9fb3f9dac8b24082c81cb595a46c41c36a062d692a2bb9dff9d9291422ca2db72db48e6a43593d8f76ec094a58b71be13cdf60f





저는 이렇게 쓸데없는 짓을 많이 하는 편인데요, 


이런 쓸데없는 짓이 저를 부지런하게 만드는것 같아요. 


저는 개인적으로 일 외엔 따른 취미생활이 없어요. 게임도 안하고 티비도 안봅니다. 


그냥 일하는게 제일 재미있는것 같아요. 



그래서 이런 쓸데없는 개인작업을 많이 하는 편인데, 


이런 돈도 안되고,


또 실제 프로젝트에 사용하기에는 힘든 기술과, 디자인이지만, 


이런걸 만들어봄으로써 배우는게 참 많은것 같습니다. 


그리고 그렇게 배웠던 것들이 나를 성장 시키고 실제 프로젝트에도 유용하게 쓰였던 적이 많았어요. 



그리고 이 작업을 보고 구글에서 입사제의가 와서 지금까지 구글에서 일을 하고 있는데요. 


만약에 제가 이런 개인 작업을 하지 않고 회사 일만 했었다면, 


세상 누구도 내가 어떤 디자이너인지, 뭐를 잘하는지 몰랐을 겁니다. 


나는 어떤 일을 하고싶어 라고 말로만 하기보단, 


내가 하고싶은 디자인을 개인작업으로라도 포트폴리오를 계속 쌓는게 중요하다고 생각해요.


그렇게 쌓은 포트폴리오는 나라는 디자이너를 정의하는데 아주 중요한 역활을 합니다 :)




움직이는 모습과 더 자세한 내용은 영상에서 보실 수 있습니다 :)





출처: 프로그래밍 갤러리 [원본보기]

추천 비추천

256

고정닉 79

28

댓글 영역

전체 리플 0
등록순정렬 기준선택

하단 갤러리 리스트 영역

왼쪽 컨텐츠 영역

갤러리 리스트 영역

갤러리 리스트
번호 제목 글쓴이 작성일 조회 추천
이슈 월간디시 8월호 : 반갑다 논란아 운영자 20/07/31 - -
223989 [시갤] 기추) 저렴이 38mm 판다 크로노그래프 [8] 빈붐안옴(119.200) 08.04 235 11
223988 [차갤] 영국맨의 륜돈가배기행 - Arabica London % [11] 유바히갤로그로 이동합니다. 08.04 602 11
223987 [등갤] 산티아고 순례길 프랑스 루트 사진 몇장 [2] ....(110.70) 08.04 512 10
223986 [낚갤] [에깅후기] 서울 촌놈들과 오징어사냥 [25] 이드기여갤로그로 이동합니다. 08.04 1076 34
223985 [레갤] 시붕이 둘의 블리츠 방패와 트위치드론 졸업사진(움짤,사진 많음) [68] SinoAlice갤로그로 이동합니다. 08.04 2112 103
223984 [모갤] 오래된 기차역 사진도 봐주나? [20] ㅇㅇ(121.130) 08.04 1614 71
223983 [카연] 초등학교때 팬티에 똥지릴뻔한 만화 [29] 춘춘춘갤로그로 이동합니다. 08.04 4452 87
223982 [레갤] 창작) 개쩌는 스파이더맨 디오라마 만들어옴 [22] 여러갤보러옴갤로그로 이동합니다. 08.04 1619 38
223981 [냥갤] 아 진자 바닥에서 안잘꺼라고 [28] 우쭈쪼뽀(221.161) 08.04 3021 167
223980 [주갤] [술담화] 서양술 마셨던 경험들 .. [22] 술담화갤로그로 이동합니다. 08.04 1628 21
223979 [사갤] (합짤/배경화면/1탄) 13,14편을쪄보았다.jpg [10] 공일이칠(112.145) 08.04 860 36
223978 [디갤] 얼마전 다녀온 백패킹사진 [9] Mutt_kim갤로그로 이동합니다. 08.04 861 12
223977 [기음] 다이어트 저녁 양배추 라자냐(콥샐러드 도시락) [51] 아토(119.205) 08.04 2080 40
223976 [파갤] 지난해부터 올해까지 틈틈이 독학한 클린 자세비교 [29] 짐웨맆빌런갤로그로 이동합니다. 08.04 1357 25
223975 [연뮤] 0801 미아 권용국과 용슈철 조금 (jpg) [10] ㅇㅇ(175.223) 08.04 667 23
223974 [파갤] 드디어 늒네 첫 레게입문 했다 ㅎ.ㅎ [20] 분식집아들갤로그로 이동합니다. 08.04 926 15
223973 [카연] 우갤문학) 달님은 누구의 꿈을 꾸는가 [62] ㅇㅇ(223.39) 08.04 2404 109
223972 [기음] (실시간) 중소기업의 흔한 바베큐파티.JPG [37] 혼밥맨갤로그로 이동합니다. 08.04 4168 51
223971 [팬갤] 개뱀양용에 이은 쀼캐 쓰리씨(Three Sea) 컨셉프로필 [74] ㅇㅇ갤로그로 이동합니다. 08.04 3226 277
223970 [트갤] 어스라이즈 스카이워프 & 썬더크래커 간단 리뷰샷 [7] 마고닉갤로그로 이동합니다. 08.04 850 14
223969 [동기] 아가토끼 2달만에 왔쩌염 뿌우 [27] ㅁㅁ(39.7) 08.04 1477 35
223968 [과빵] 현실적인 도쿄 빵가격 [39] 외노자(126.12) 08.04 2584 43
223967 [건갤] 프라모델 대소동2-1 [10] 나쁜사람임갤로그로 이동합니다. 08.04 832 15
223966 [과빵] 초코칩 샤브레 [13] 보이차빵갤로그로 이동합니다. 08.04 1189 25
223965 [디갤] 나도 점심밥모음 [44] 스텔라갤로그로 이동합니다. 08.04 1611 19
223964 [트갤] 그냥 알아보는 시즈 일어 성우들 [11] ㅇㅇ(175.223) 08.04 670 15
223963 [포갤] 비가내리는 오늘.. 귀여운 개구마르 클레이아트 만들어봤어요~ [25] Tapclay갤로그로 이동합니다. 08.04 1111 30
223962 [사갤] 영탁 아이돌그룹 노래 작곡함 [30] ㅇㅇ(223.39) 08.04 3938 108
223961 [사갤] (합짤/배경화면/2탄) 13.14편을쪄보았다.jpg [13] 공일이칠(112.145) 08.04 1084 37
223960 [파갤] 팔루 전후 비교 [18] 초보뉴트갤로그로 이동합니다. 08.04 737 12
223959 [한갤] 달숙남매 에필로그 나노분석ㅋㅋㅋㅋㅋㅋㅋㅋ [5] ㅇㅇ(14.37) 08.04 969 29
223958 [팬갤] 아무도 말하지 않았던 밀바 [28] ㅇㅇ(61.37) 08.04 2281 73
223957 [주갤] 주위리) 드로낙12, 포트샬롯 아일라발리 2011 [14] 빅맥세트갤로그로 이동합니다. 08.04 697 15
223956 [모갤] 철덕들아 기차 관련된건데 오래된 사진 받아주냐? [15] ㅇㅇ(121.130) 08.04 1330 64
223955 [냥갤] 다 죽어랏 feat.발페티시 [18] yy갤로그로 이동합니다. 08.04 2219 146
223954 [멍갤] 시바견 애국이 왔어요~~~ [32] 애국이(223.62) 08.04 1397 24
223953 [냥갤] 아이앀ㅋㅋㅋㅋㅋ [15] 뽀뇨갤로그로 이동합니다. 08.04 2034 115
223952 [필갤] 흑빽 자가스캔 해봤읍니다 [9] HNGN갤로그로 이동합니다. 08.04 590 11
223951 [야갤] 1호선이 위험한 이유 ㄷㄷㄷㄷㄷ.JPG [575] ㅇㅇ(121.139) 08.04 77087 2450
223950 [바갤] 태풍 지나가고 꼭 점검 받아야할 점검 세가지. [29] 김신조갤로그로 이동합니다. 08.04 2521 32
223949 [토갤] 이거 념글가능하냐?2(사진많음) [23] 오성재2갤로그로 이동합니다. 08.04 1533 17
223948 [동기] 나랑 4개월째 동거중인 녀석 (골든 햄스터) [9] 베라뉴갤로그로 이동합니다. 08.04 1245 33
223947 [프갤] [댕댕] 유진이 갈증 MV 움짤 12p [7] 벚꽃엔딩_48갤로그로 이동합니다. 08.04 776 20
223946 [레갤] 베니vs다스베이더 2차전 [16] 우광갤로그로 이동합니다. 08.04 769 18
223945 [기음] 국간장 새우젓 없어도 OK! 5분만에 계란국 끓이기.jpg [37] Kosmo갤로그로 이동합니다. 08.04 2161 32
223944 [토갤] 오버워치 그래피티 트레이서 나무 피규어 [29] LeDong갤로그로 이동합니다. 08.04 1952 50
223943 [사갤] 얘들아 이거봐봐;; 사진 뭔가 진짜 이상해 [16] dfda(121.169) 08.04 3887 31
223942 [한갤] 진짜 다재 포옹ㅠㅠ [12] 달콤상큼다재ing갤로그로 이동합니다. 08.04 1447 34
223941 [미갤] [완성]아빠기사 [9] E3264갤로그로 이동합니다. 08.04 667 11
223940 [N갤] 갤 정화짤 뿌립니다 들어와서 정화하세여 [19] ㅇㅇ(14.44) 08.04 2323 47
갤러리 내부 검색
전체게시물 정렬 옵션

오른쪽 컨텐츠 영역

이슈줌NEW

1/6

힛(HIT)NEW

그때 그 힛

1/3