강의 컨설팅 트레이닝 무료진단 무료책자 마케팅편지 마케팅정보공유 다이어리 서비스제휴 고객센터

Digital로 표현된 수묵이 번지는 효과- Cel.. 글 : 김기병(주식회사 ECO 디자인팀 대리, 경인여대 출강)
작성자 : 99 단국강토
등록날짜 : 2009.01.12 09:54
3,391
글 : 김기병(주식회사 ECO 디자인팀 대리, 경인여대 출강)
이소정(All communication 디자인2팀장)
사이트: www.cellgraphic.com
blank.gif
Digital로 표현된 수묵이 번지는 효과- Cell graphic
tiptiptip_03_01.gif
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를 열고
바로 작업할 수는 없는 일이다.
먹물 그림 소스가 있어야 하는데 딱히 입맛에 맞는 샘플을 구하기가 어려워서 직접 만들어서 쓰기로 했다.
사실 노가다에 무슨 특별한 비법이 있겠는가? 몸으로 떼우는 수밖에... 당장에 화방으로 달려가서
제일 싼 먹물 하나와 후진 붓 하나와 좀 좋은 화선지 여러장을 샀다. 그런후엔.... 무작정
화선지에 먹물을 떨어뜨렸다.
아래의 그림은 그때의 노가다 흔적이다.




tiptiptip_03_02.gif
2) Step 2 Stream Line을 이용해서 먹물 따기

가장 쉽게 먹물 번지는 느낌을 표현하는 길은 하나의 먹물 Object를 Motion Tweening으로 만드는 것이다.
문제는 이렇게 할 경우에 자연스러운 느낌은 제로가 되며 이웃집 초등학생도 1시간만 배우면
따라한다는 것이다. 이러한 평범한 표현을 제외하고 프로패셔널한표현을 하려고 밤잠을 설치면서 고심했다.
사실 먹물을 떨어뜨리는 순간까지도 별로 좋은 아이디어가 떠오르질 않았다. 무작정 먹물을 떨어뜨리면서
먹물을 관찰해보니 이럴수가.... 먹물은 단순히 일률적으로 퍼지는것이 아니라 먹물의 농담별로 퍼지는
속도가 다른 것이다. 단순한 사실이지만 이러한 것을 확인하니 표현의 방법이 떠올랐다.
플래시에서 Layer를 사용해서 농담별로 Motion Tweening 속도를 다르게 하면 자연스러운 느낌이
나올것 같았다.
그런데 또 한가지 문제는 3개 정도의 먹물을 Bitmap 이미지로만 겹칠 수는 없다는 것이다
용량도 용량이지만 투명도있게 처리하는데도 한계가 있기 때문이다.
그래서 생각해낸 방법이 메인으로 쓸 먹물 이미지 하나만
Bitmap이미지로 하고 나머지 2개의 이미지는 Adobe사의 Stream Line 이라는 프로그램을 이용해서
먹물의 농담이 어느정도 표현된 Vactor이미지로 변환하여 쓰기로 했다.

tiptiptip_03_03.gif

3) Step 3 Flash에서 Motion Tweening 시키기

Flash에서의 여러가지 표현들은 생략하고 오직 자연스러운 먹물표현만을 가지고 설명하겠다.
작업중 Flash에서 가장 많이 쓴 것은 Movie Clip이었다. (물론 이것 때문에 로딩시간이 길어지는
피해를 봤지만 특별히 기술력이 없는 나로선 최선의 선택이었다.)
위의 3개의 그림들을 Flash에서 Import하여 각각의 Layer 3개를 만어 오브젝트를 Graphic Symbol로
변환한 후 3개의 Movie Clip으로 만들었다.

tiptiptip_03_04.gif

각각의 Movie Clip 들은 크기의 변화가 미묘하게 나타나도록 하였고 알파값을 이용해서 농담도 조절하였다.
tiptiptip_03_05.gif

1차적으로 작업한 Movie Clip들은 다시 한곳에 모아서 퍼지는 속도와 농담을 각각
조절해서 자연스러운 느낌이 나도록 밤이 세도록 테스트하여 완성했다.
여러분들도 이처럼 미묘한 표현은 직접 해보면서 느껴햐 한다.
기본적으로 먹물을 처음 떨어뜨릴때 진한색은 급속히 퍼지고 거기서약하게 삐져나와서 번지는
연한색은 천천히 퍼진다. 이러한 차이를 알고 작업에 임한다면 훨씬 쉬울 것이다.

보너스로 하나 더 Motion Tweenig을 이용한 노가다의 결과물을 소개하도록 하겠다.
사이트에서 처음 로딩할때와 Site Link에서 쓰이는 움직이는 풀쪼가리(정식명은 '부들'이다)를 살펴보면
이것 또한 죽어라 Movie Clip을 이용하여 완성했다. 순전히 노동의 산물이다. 정말로 특별한 기술은 없다.
각각의 풀쪼가리를 각각 다른 속도로 움직이도록 Movie Clip을 하나씩 만든 후 한곳에 모아서
Movie Clip 종합편으로 완성했다.
tiptiptip_03_06.gif

Epilogue

장황하게 설명했지만 막상 노가다한것 밖에는 별다른 노하우도 없는것 같다. 이처럼 벗겨보니 별볼일
없는나의 치부가 드러난것 같아서 부끄럽다. 하지만 이러한 창피를 감수하면서까지 기고를 하는 것은
그래도 나름대로는 열심히 했기 때문이다. 만약 정말로 Flash의 모든 기술을 두루 섭렵한 후에
사이트를 제작하려고 했다면 난 아직도 공부만 하고 있었을 것이다. 그래도 내가 알고 있는 한도내에서
최선을 다하여 완성하려고 노력한 것이 나름대로 좋은 평가를 받는것 같다.

요새 웹디자이너들을 보면 기술자들은 많은데 진정한 의미의 디자이너들은 별로 눈에 띄지 않는다.
모두 다 유행을 쫒다보니 자신만의 표현을 개발하기 보다는 쉽게 다른 사이트의 디자인을 그대로
도용한다던지 Action Script만을 긁어 쓴다든지 등으로 편하게 작업을 끝내버린다.
그러다보니 무미 건조하고 작업자 본인도 이해하지 못하는 디자인이 되어버린다.
개성이 없고 무미건조한 기술보다는 비록 장시간의 노가다를 거쳐서 완성했지만 개성있는
사이트들에게 많은 박수를 보내고 싶다. 물론 화려한 기술로 개성이 강한 디자인을 한다면
그보다 더 좋을 수는 없겠다. 나 또한 그러한 디자이너가 되기 위해서 항상 노력하고 있지만....

한가지 더 얘기하자면, 많은 디자이너들이 디지털 느낌의 이미지만을 추구하는것 같다...
물론 디지털 이미지의 디자인도 있어야 한다. 그러나 음식의 섭취에 있어서도 편식이 좋지 않듯이
웹디자인에 있어서도 디지털적인 이미지들로만 채워질 것이 아니라 그에 반하는 정말로 감성적인
디자인들도 많이 나오기를 갈망해 본다.
 
"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기,
각종 광고, 영업, 판매, 제안서, 전단지
반응율 3배×10배 이상 높이는 마법의 8단계 공식"
자세히보기

Comments

번호 제목 글쓴이 날짜 조회
열람중 Digital로 표현된 수묵이 번지는 효과- Cel.. 글 : 김기병(주식회사 ECO 디자인팀 대리, 경인여대 출강) 99 단국강토 01.12 3392
3044 하드,CPU,RAM 지원표 M 최고의하루 12.18 3392
3043 웹프로그래밍 언어별 데이터베이스연결 (ASP편) 13 김영철 01.23 3390
3042 띠 구하는 함수 13 김영철 01.14 3390
3041 제약조건(1) M 최고의하루 12.20 3386
3040 DOS창에서 비디오카드 모델명 확인 하기 2 천진난만 02.20 3382
3039 [mysql] mysqladmin 사용법 13 김영철 01.29 3371
3038 익스플로러(IE)플러그인ActiveX액티브엑스활성화특허침해에따른 설계변경패치에대한 개발코딩간편변경방법 13 김영철 01.14 3370
3037 체크박스 배열을 edit 수정페이지로 불러오기 M 최고의하루 01.12 3369
3036 MSSQL Server DBA 가이드-5 M 최고의하루 12.26 3368
3035 옷주름만들기 10 액션쟁이 01.12 3363
3034 PHP 환경 설정을 변경하는 방법 13 김영철 01.14 3361
3033 AJAX관련 IE 버그. -1072896658 13 김영철 01.29 3361
3032 포토샵 cs4에서 레이어가 살아있는 gif파일 열기 2 핑크 01.20 3358
3031 내 PC IP 아는 간단한 방법 댓글1 2 성공맨 04.03 3356
3030 색보정,칼라링^^ 10 액션쟁이 12.31 3355
3029 총알자국 10 액션쟁이 01.12 3355
3028 select BOX 동적으로 선택하기 13 김영철 01.15 3355
3027 register_global 가 off 되어 있을때 사용방법 13 김영철 01.15 3354
3026 간단한 PHP Class예제 (DB Class) 13 김영철 01.13 3353
3025 마우스 On 시에 표 색상 바꾸기 99 단국강토 02.10 3351
3024 CPU 점유율 점검 및 CPU최적화 기초 기법 99 단국강토 12.30 3348
3023 [CSS]링크 위에 마우스커서 올라가면 누른 효과 99 단국강토 02.05 3347
3022 php에서 유니코드 인코딩하기 13 김영철 01.13 3347
3021 특수문자 입력 방지하기 99 단국강토 02.19 3341
3020 input box꾸미기 99 단국강토 01.19 3340
3019 windows 2003 MySQL 서비스 프로그램 등록 1067 에러 13 김영철 01.29 3340
3018 저항(전자회로) 읽는 프로그램 2 춘몽 11.22 3335
3017 [JS] 자바스크립트 typeof[(expression]] 99 단국강토 02.16 3331
3016 메트로놈 입니다.. 2 춘몽 11.22 3323
마케팅
특별 마케팅자료
다운로드 마케팅자료
창업,경영
기획,카피,상품전략
동기부여,성취