Digital로 표현된 수묵이 번지는 효과- Cel.. 글 : 김기병(주식회사 ECO 디자인팀 대리, 경인여대 출강)
작성자 : 단국강토
등록날짜 : 2009.01.12 09:54
3,392
| 글 : 김기병(주식회사 ECO 디자인팀 대리, 경인여대 출강) 이소정(All communication 디자인2팀장) 사이트: www.cellgraphic.com | |
| Digital로 표현된 수묵이 번지는 효과- Cell graphic | |
 |
| Prologue 처음으로 나만의 사이트를 만들려고 시도하면서 한가지의 목표를 세웠다. 회사에서 돈을 받고 만드는 여타의 홈페이지들과는 차별화를 두기로... 그래야지만 내가 하고 싶었던 작업들을 할 수 있을 것이고 나만의 디자인을 만들고자하는 갈증을 어느정도 해소할 수 있을 것이라고 생각했기 때문이다. 웹디자인 작업을 하면서도 "왜 웹사이트들은 하나같이 Digital화된 표현뿐인가? "라는 의문이 항상 내 안에 잠재되어 있었다. 분명 웹디자인이라는것이 디지털의 힘을 빌어 만들어지고 보여지지만 그렇다고 Visual에서까지 디지털임을 나타낼 필요는 없는것이 아닌가? 디지털은 표현의 수단일 뿐이지 목적이 아니라는 것이다. 그래서 앞으로의 개인 사이트 작업은 일관되게 디지털 이미지를 배제한 철저히 감성적인 표현들로 가기로 했다. 더불어 내안의 변화하는 감성을 표현하기 위해서 최소한 매년 하나의 사이트를 개발하기로 했다. 생각해보라, 매년 하나면 10년 후엔 10개의 사이트가 생기고 자연스럽게 개인의 디자인 변화를 볼 수 있으니 그 얼마나 가슴벅찬 일인가? 2000년에 Vol. 1을 시작으로 현재의 Vol.2 까지 단 두개의 사이트만을 만들었지만 두개의 사이트만 보더라도 정체하지않고 조금은 발전된 나를 보는것 같아 흐뭇해 진다. 이야기가 자꾸 곁길로 가는것 같다. Site Concept Vol.2 사이트의 기본적인 컨셉은 "Sensibility"다. 여기에 적당한 표현수단으로 한국인의 정서를 반영한 먹물이 퍼지는 느낌을 기본으로 한국의 정원에 있는 작은 연못을 생각해냈다. 무미건조할 수 있는 먹물의 번짐에 살아있는 물고기(비단잉어)를 첨가하여 생명력있는 연못으로 표현할 수 있었다. 작지만 많은 유기체를 수용하는 연못처럼 비록 보잘것 없는 디자이너지만 다양한 생각과 표현을 하고싶은 욕구를 담아냈다. 사이트를 방문하는 사람들에게는 봄비가 부슬부슬 내리는 한가로운 오후에 인사동의 분위기있는 전통찻집에서 좋은 음악과 더불어 여유로운 시간을 보내는 느낌을 주고 싶었다. 그야말로 편안한 느낌을 말이다. Expression 많은 사이트방문자들이 나에게 물어오는 것이 있다. "먹물이 자연스럽게 번지는 효과는 어떻게 내나요?" 그럴때마다 말로 설명하려니 잘 안되고 그렇다고 그림을 그려서 보내줄 수도 없어서 성의없는 답변으로 일관했었는데 이러한 기회를 빌어 자세하게 설명할 수 있어서 무척기쁘다. 사실 난 웹디자인 경력이 1년 6개월 밖에 되지 않는다. 그전 4년 동안은 그래픽 디자인의 기본이랄 수 있는 CIP(Corporate Identity Program)회사에서 일했다. 이러한 이유로 Flash를 배웠지만 깊게 공부하지 못했기 때문에 Vol. 2 사이트 제작 당시에는 Action Script를 이용한 화려한 표현들은 거의 구사하지 못했다. 기술이 없으니 할 수 있는 것이라곤 성실한 작업(이하, 노가다)밖에 더 있겠는가. 자! 그럼 부끄럽지만 본격적으로 나의 성실한 작업 내용중 핵심인 먹물표현을 공개하기로 하겠다. 1) Step 1 화선지에 먹물 떨어뜨리기 자연스럽게 먹물이 번지는 효과를 표현할 수 있는 방법은 Digital Camcorder를이용해 동영상으로 촬영하는 것이다. 그런데 웹사이트에 적용하기에 동영상은 속도문제와 해상도 문제로 어렵기에 Flash를 이용해서 최대한 자연스럽게 만들어보고자 시도하게 되었다. 그렇지만 무작정 Flash를 열고 바로 작업할 수는 없는 일이다. 먹물 그림 소스가 있어야 하는데 딱히 입맛에 맞는 샘플을 구하기가 어려워서 직접 만들어서 쓰기로 했다. 사실 노가다에 무슨 특별한 비법이 있겠는가? 몸으로 떼우는 수밖에... 당장에 화방으로 달려가서 제일 싼 먹물 하나와 후진 붓 하나와 좀 좋은 화선지 여러장을 샀다. 그런후엔.... 무작정 화선지에 먹물을 떨어뜨렸다. 아래의 그림은 그때의 노가다 흔적이다. |
 |
| 2) Step 2 Stream Line을 이용해서 먹물 따기 가장 쉽게 먹물 번지는 느낌을 표현하는 길은 하나의 먹물 Object를 Motion Tweening으로 만드는 것이다. 문제는 이렇게 할 경우에 자연스러운 느낌은 제로가 되며 이웃집 초등학생도 1시간만 배우면 따라한다는 것이다. 이러한 평범한 표현을 제외하고 프로패셔널한표현을 하려고 밤잠을 설치면서 고심했다. 사실 먹물을 떨어뜨리는 순간까지도 별로 좋은 아이디어가 떠오르질 않았다. 무작정 먹물을 떨어뜨리면서 먹물을 관찰해보니 이럴수가.... 먹물은 단순히 일률적으로 퍼지는것이 아니라 먹물의 농담별로 퍼지는 속도가 다른 것이다. 단순한 사실이지만 이러한 것을 확인하니 표현의 방법이 떠올랐다. 플래시에서 Layer를 사용해서 농담별로 Motion Tweening 속도를 다르게 하면 자연스러운 느낌이 나올것 같았다. 그런데 또 한가지 문제는 3개 정도의 먹물을 Bitmap 이미지로만 겹칠 수는 없다는 것이다 용량도 용량이지만 투명도있게 처리하는데도 한계가 있기 때문이다. 그래서 생각해낸 방법이 메인으로 쓸 먹물 이미지 하나만 Bitmap이미지로 하고 나머지 2개의 이미지는 Adobe사의 Stream Line 이라는 프로그램을 이용해서 먹물의 농담이 어느정도 표현된 Vactor이미지로 변환하여 쓰기로 했다. |
 |
| 3) Step 3 Flash에서 Motion Tweening 시키기 Flash에서의 여러가지 표현들은 생략하고 오직 자연스러운 먹물표현만을 가지고 설명하겠다. 작업중 Flash에서 가장 많이 쓴 것은 Movie Clip이었다. (물론 이것 때문에 로딩시간이 길어지는 피해를 봤지만 특별히 기술력이 없는 나로선 최선의 선택이었다.) 위의 3개의 그림들을 Flash에서 Import하여 각각의 Layer 3개를 만어 오브젝트를 Graphic Symbol로 변환한 후 3개의 Movie Clip으로 만들었다. |
 |
| 각각의 Movie Clip 들은 크기의 변화가 미묘하게 나타나도록 하였고 알파값을 이용해서 농담도 조절하였다. |
 |
| 1차적으로 작업한 Movie Clip들은 다시 한곳에 모아서 퍼지는 속도와 농담을 각각 조절해서 자연스러운 느낌이 나도록 밤이 세도록 테스트하여 완성했다. 여러분들도 이처럼 미묘한 표현은 직접 해보면서 느껴햐 한다. 기본적으로 먹물을 처음 떨어뜨릴때 진한색은 급속히 퍼지고 거기서약하게 삐져나와서 번지는 연한색은 천천히 퍼진다. 이러한 차이를 알고 작업에 임한다면 훨씬 쉬울 것이다. 보너스로 하나 더 Motion Tweenig을 이용한 노가다의 결과물을 소개하도록 하겠다. 사이트에서 처음 로딩할때와 Site Link에서 쓰이는 움직이는 풀쪼가리(정식명은 '부들'이다)를 살펴보면 이것 또한 죽어라 Movie Clip을 이용하여 완성했다. 순전히 노동의 산물이다. 정말로 특별한 기술은 없다. 각각의 풀쪼가리를 각각 다른 속도로 움직이도록 Movie Clip을 하나씩 만든 후 한곳에 모아서 Movie Clip 종합편으로 완성했다. |
 |
| Epilogue 장황하게 설명했지만 막상 노가다한것 밖에는 별다른 노하우도 없는것 같다. 이처럼 벗겨보니 별볼일 없는나의 치부가 드러난것 같아서 부끄럽다. 하지만 이러한 창피를 감수하면서까지 기고를 하는 것은 그래도 나름대로는 열심히 했기 때문이다. 만약 정말로 Flash의 모든 기술을 두루 섭렵한 후에 사이트를 제작하려고 했다면 난 아직도 공부만 하고 있었을 것이다. 그래도 내가 알고 있는 한도내에서 최선을 다하여 완성하려고 노력한 것이 나름대로 좋은 평가를 받는것 같다. 요새 웹디자이너들을 보면 기술자들은 많은데 진정한 의미의 디자이너들은 별로 눈에 띄지 않는다. 모두 다 유행을 쫒다보니 자신만의 표현을 개발하기 보다는 쉽게 다른 사이트의 디자인을 그대로 도용한다던지 Action Script만을 긁어 쓴다든지 등으로 편하게 작업을 끝내버린다. 그러다보니 무미 건조하고 작업자 본인도 이해하지 못하는 디자인이 되어버린다. 개성이 없고 무미건조한 기술보다는 비록 장시간의 노가다를 거쳐서 완성했지만 개성있는 사이트들에게 많은 박수를 보내고 싶다. 물론 화려한 기술로 개성이 강한 디자인을 한다면 그보다 더 좋을 수는 없겠다. 나 또한 그러한 디자이너가 되기 위해서 항상 노력하고 있지만.... 한가지 더 얘기하자면, 많은 디자이너들이 디지털 느낌의 이미지만을 추구하는것 같다... 물론 디지털 이미지의 디자인도 있어야 한다. 그러나 음식의 섭취에 있어서도 편식이 좋지 않듯이 웹디자인에 있어서도 디지털적인 이미지들로만 채워질 것이 아니라 그에 반하는 정말로 감성적인 디자인들도 많이 나오기를 갈망해 본다. |
"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기, 각종 광고, 영업, 판매, 제안서, 전단지 반응율 3배×10배 이상 높이는 마법의 8단계 공식" |
|
| ☞자세히보기 |
|
|
|
