BLUE STUDY :: 세계의 Top 10 뉴미디어 디자인 회사가 공개하는 잘.나.가.는. Site 만들기 비법 100가지

Graphic/Web Design2007/09/22 10:28

세계의 Top 10 뉴미디어 디자인 회사가 공개하는 잘.나.가.는. Site 만들기 비법 100가지

Digital Designer의 부차적인 취미 정도에 불과했던 Web Design은 지난 3-4년에 걸쳐 Design 산업의 핵심으로 부각되었다. 사실 Web Design은 이제 고유의 구조와 제작 과정, 윤리 기준을 가진 하나의 산업이 되었다고도 할 수 있다. 단순한 판촉 도구가 아니라 Business의 핵심으로, 단순한 Branding 전략의 한 부분이 아니라 Business의 생존에 결정적인 역할을 하고 있는 존재이다. 그런데 Online 산업은 현재의 경제적인 동향 속에서 압박감을 느끼고 있다. 많은 Web Contents 제작자들이 일자리를 잃었고 Designer들 역시 마찬가지로 불안한 실정이다.

경쟁력을 지니면서 동시에 고객의 경쟁력도 높여주려면 최대한으로 효율적인 Site가 되도록 Design 해야만 한다. <Computer Art>는 최고의 New Media Design 대행사에서 내놓은 100가지의 Web Design Tip을 모아 이번 호 특집 기사로 실었다. 이 Tip들은 Layout, Graphic, 정보 Design, Navigation, Anymation, 흡인력 있는 Contents, 음악과 Sound 효과, Streamming Media, 3D화 하기, 그리고 난해한 Back-End(사용자에게 직접 보여지는 화면 이외의 기술적인 부분)의 열 개 분야로 나뉘어져 있다. 이 주제들 중 자신 있는 한 분야에 대해 각각의 Agency가 열 가지의 Tip을 제공했다. 이 Tip들은 모두 어떤 한 Software에 국한되지 않는 것들이며, Site 구축의 전반에 적용될 수 있는 Design과 제작 과정에 관한 것들이다. 현재의 상황에 적용할 수도 있고, 미래를 위한 참고 자료로 남겨두어도 좋을 것이다. 고객이 언제 Streamming Media나 까다로운 Back-End를 요구할런지는 아무도 모르는 일이지만 Tip은 여기에 모두 들어있다.

Layout

단도직입적으로 말해 Layout은 Web Site Design의 핵심이다. Layout은 사용자의 지각 대상으로서 Web Site의 외관과 느낌을 결정하기 때문이다. 하지만 Site의 Layout을 정한다는 것은 Sketch를 하거나 제작 도구에서 Button이나 Graphic 등을 끌어다놓는 것 정도로 끝나는 일이 아니다. Layout은 기획과 Team Work, 창의력을 필요로 하는 창조적인 작업 과정인 것이다. New Media 대행사인 레이저피시의 London 지사에 근무하는 수석 Designer Richard Wallett이 효율적인 Site Layout을 위해 다음 열 가지 Tip을 내놓았다.

요점을 명확히 정리한 간단한 문서를 만든다. 자신이 이해할 수 있고, Team 전체와 고객에게 조리 있게 설명할 수 있는 것이어야 한다. 모든 결과물과 그 책임 소재를 분명히 정리한다. 이 문서는 Project 전반에 걸친 안내서가 되며, 이를 토대로 Project의 Check List를 만들게 된다. 고객의 요구사항이 변경될 경우를 대비하는 것이 될 수도 있다.
제작 일정. 마감에 맞추어 일을 진행하고, 제작 기간을 고려하여 일정을 정하며, 일정을 지킨다. 모든 팀원들에게 각자 책임지고 있는 부분을 숙지시키고, 쉬운 용어들을 사용한다. ('계층적 결과물들을 구조화하다.'가 무슨 뜻인지 도대체 누가 알 것인가?). Contents가 어디서 나오는지 확인한다. Team들에게 일을 분배하고 기한을 정한다. 좀 혹독하게 들릴 수도 있겠지만, 일이 매끄럽게 진행되기 위해서는 이런 것들이 꼭 필요하다.
Project의 영감을 얻으려면 잠시 일을 멈추고 자신이 무엇을 전달하려고 하는지에 관해 초점을 맞춘다. 어떤 단계에서든 모든 요소들을 고려하고 그것들을 순서에 맞게 준비한다. 고객들은 총체적인 Solution을 제공받는다는 느낌을 좋아한다.
총 문자 수를 정하고, 특정 Platform에서의 최적의 화면 Size를 기반으로 망을 만든다. 그리고 Test 해 본다. JPEG File의 한계를 고려하고 다시 Test 한다. Web Page의 넓이를 염두에 둔다. Dreamweaver나 Golive를 사용해 기본형을 만든다. 기본형을 작성하면 Contents가 어떻게 이동하는지 감을 잡을 수 있다. Flash나 Quick Time 등등의 다른 Media를 넣을 작정이라면 가로 세로 비율을 고려한다 (Tip 6번을 볼 것).
Illustration이나 사진에 투자한다. 이 요소들은 감성을 자극한다. 정해진 Layout 안에서 다양하게 실험해 본다. 좋은 Image는 그 안에 Story를 가지고 있다. '나는 (사용자는) 이것을 어떻게 받아들이는가?', 그리고 '시공간의 느낌이 들어있는가?'라는 질문을 스스로 해본다. 뭔가 신선한 것을 시도해 본다. 지나치게 화려한 모음집 이미지(stock images: 한 장, 혹은 여러 장의 CD에 연관된 Image들을 모아놓은 것으로, 한번 구매하면 반복해서 사용할 수 있다)의 사용은 자제하도록 한다.
Template를 만들면 시간도 절약될 뿐더러, Contents가 늦어지더라도 큰 문제가 생기지 않는다. 고객이 제공할 원고나 필요 자료 등이 늦어지게 되면 Project 일정이 묶여버린다. 이럴 경우를 각 Format들과 그 비율들을 (예를 들면 Quick Time Movie 에는 16:9/4:3의 비율) 알아두어 대비한다. 가로 세로 비율은 망을 작성하는 출발점이 되기도 한다. (Tip 4번을 볼 것). Layer의 사용도 좋은 대비책임을 염두에 둔다.
Color Palette. 216 Color에만 집착하지 말 것. 한 색은 투명하고 다른 한 색은 불투명하게 사용해보자. 이것은 Halftone Screens (신문 등의 인쇄에 쓰이는 망점. 두 가지 색을 작은 점들로 인쇄해서 중간 색으로 보이게 한다)과 유사한 기능을 해서 반투명한 느낌을 줄 수 있다. 투명도와 질감, 형태 등을 이용해 계층적으로 영역 구분을 할 수 있다. 사용자가 Web Page를 인쇄해야 할 경우를 고려해서 겹쳐진 부분이 회색이 되지 않도록 한다.
대화성 (Interactivity). 사용자의 입장이 되어서, 어떻게 정보를 찾아가게 될지를 생각해 본다. 세 가지의 Navigation System을 고려해보고, 기본형을 만들어 효율성을 체크한다. 고객이나 제작 Team 모두가 이 문제에 집중해야 하며, Navigation 구조를 정확히 보여주는 것이 매우 중요하다.
지금까지는 모두 너무 논리적인 이야기들이었다. 이제 여기에 진짜 한가지를 더해야 한다. 바로 당신이 '최고'가 되기 위해 필요한 것이다. 당신을 당신의 경쟁자들과 차별화시키는 요소 말이다.
확장성. Solution은 여기서 끝나서는 안된다. 고객에게 제공하는 Solution을 항상 전체적인 하나의 Pakage로 생각해야 한다. 인쇄물, Audio, Streamming Media, 방송, 광고 등등에 이르기까지... 그것이 고객이 당신을 다시 찾게 되는 이유이기도 하다.

Graphic

Web Graphic은 일종의 Irony 다. 쓸만한 Site를 방문한 사용자라면 훌륭한 Graphic과 매혹적인 환경을 원하겠지만, 한 Page에 많은 Graphic을 넣을 수록 Download 시간은 길어지고, 그렇게 되면 사용자는 참지 못하고 다른 Site를 찾아가게 된다. 훌륭한 Web Design이란 Graphic을 적절하게 사용하면서도 그것에서 최대한의 효과를 끌어내는 것이다. Hurb의 Designer들이 제안하는 Graphic/Image 압축에 관한 열 가지 지침을 소개한다.

이 Format이 적당한 Format 일까? JPEG Format은 사진이나 다양한 Color나 Tone의 Image에 적당하다. 수백만의 색을 지원하며 GIF Format보다 훨씬 다양한 단계의 압축을 지원하고, 화질을 유지하면서도 빨리 Download 된다.
GIF Format은 넓은 면이 한가지 색, 혹은 제한된 몇 가지의 색으로 이루어져 있을 경우 적합하다. GIF Format은 비손실 압축 Algorithm을 사용하므로, 경계선이 뚜렷하고 깨끗하게 나와야 하는 그림이나 글자의 경우 JPEG보다 효율적이다. GIF 포맷은 투명한 부분을 지정할 수 있다는 장점도 가지고 있다.
JPEG Format은 또렷한 Image보다는 흐릿한 Image를 잘 압축하므로, Image를 흐려 압축 한다. 대부분의 Web Design 도구에서는 단계적으로 흐리기 효과를 주는 기능이 있다. 미리보기와 File 크기를 고려해가며 적절히 조절한다. 이렇게 하면 화질에는 큰 영향 없이 File Size를 줄일 수 있다.
GIF File 정보는 왼쪽에서 오른쪽으로 기록된다. 따라서 이 방향으로 요소들이 반복되면 좀더 많이 압축될 수 있다. 즉, 수직이나 불규칙적으로 반복되는 경우보다 수평으로 동색이나 무늬 등이 반복되는 경우에 압축률이 더욱 좋아진다는 말이다.
GIF File로 몇 가지 색이나 사용할 수 있을까? 세 가지 색 Image를 256 컬러의 GIF로 저장한다면 File Size는 그만큼 커지게 된다. GIF File로 저장할 때는 Image의 질에 지장을 주지 않는 한도 내에서 최소한의 색만을 사용하도록 바꾸는 것이 좋다. Dithering을 줄여본다. Dithering을 줄이면 그만큼 Image 안에서 한가지 색으로 된 면이 늘어나게 되므로 압축률도 높아지고 File Size도 줄어든다.
Graphic Program의 최적화 기능을 최대한 이용하도록 한다. Adobe의 Image Ready 3 (Photosho 6와 함께 제공됨)에는 '차별적 Optimisation' 기능이 있어서, 한 Image 안에서도 부분마다 다르게 압축 수준을 지정할 수 있다. 이렇게 하면 화질은 최대로 보존하면서 File Size를 줄일 수 있게 된다.
PC에서는 Mac에서보다 Image가 훨씬 어둡게 보인다. Macromedia의 Fireworks스는 다른 System에서 Image가 어떻게 보이는지를 미리 볼 수 있다. Mac에서 Image가 어떻게 보일지 알아보려면 View > Mac Gamma를 선택한다. Mac의 경우, PC에서 Image가 어떻게 보이는지 보려면 View > Windows Gamma를 선택하면 된다. 양쪽 Platform에서 최적의 상태로 보여지도록 Image의 Level을 조절한다.
간혹 아주 큰 Image를 써야만 할 경우가 있다. 이럴 때는 점차적으로 보여지는 GIF이나 JPEG을 사용해 사용자가 기다리는 시간을 좀 더 짧게 느껴지도록 할 수 있다. 이 Format들은 처음에는 저해상도의 Image로 표시되고 점차 완전한 Image로 변하므로, 사용자가 완전히 빈 Page만 쳐다보고 기다리는 것보다는 덜 지루해 하게 된다.
큰 Image나 Image Map을 사용하려면, Image를 작게 자르도록 한다. 전송되는 시간은 같지만 Image 조각들이 각각 조금씩 전송된다.
Image Tag에 높이와 넓이를 써주도록 한다. Browser는 이를 인식해 Image가 들어갈 정확한 자리를 남겨놓고, 문자를 배열한다. 즉 사용자는 Image가 모두 나오기를 기다리지 않고도 Contents를 읽을 수 있게 되는 것이다.
Cache를 최대한 이용한다. 다른 Page에서 쓰였던 Graphic File들을 그대로 재사용하면, 이미 사용자의 Cache에 저장되어 있으므로 더 빨리 나오게 된다.

정보디자인

정보 Design은 부담스런 주제처럼 들리지만, 사실 상식 선에서 해결할 수 있는 문제이다. Designer들이 저지를 수 있는 가장 큰 죄악은 사용자를 혼란스럽게 하는 것이라고 생각들 하지만, 신경 쓰지 않은 Designer을 가지고는 사용자들에게 완전히 잘못된 내용을 주게 된다. 사용자의 관점을 고려하면서도 Site 구조가 사용자에게 어떤 종류의 내용을 보내고자 하는지를 알아야 하겠는데 정보 Design을 전문으로 하는 회사 블랙 아이디에게 열 가지 Tip을 부탁했다.

특정 기능을 수행하는 Site를 개발할 때 중요한 정보를 모호한 위치에 숨기지 않는 것이 중요하다. 규정이나 설명서 등은 디자인을 망친다는 이유로 종종 구석에 위치시키고는 한다. 절대 중요한 정보를 숨기지 말라.
정보 Design의 규칙 중 가장 유명한 것이 '세 번 Click으로 원하는 정보에 도달하도록' 하라는 것이다. 이 규칙은 무시하지 않는다. 사용자가 무엇인가 하려고 할 때 수많은 화면을 거쳐가야만 한다면, 그 사용자는 다른 곳으로 가버릴 것이기 때문이다.
사용자가 행동을 취하도록 하는 Button(calls to action)이 매 Page 마다 있어야 한다. 그렇지 않으면 사용자는 Page를 보고 나서 '그래서?'라고 생각할 것이다. 사용자가 회원 등록을 하거나 물건을 사거나 Site의 어떤 기능을 사용하도록 하려면, 가능한 모든 Page에 그것을 홍보해야만 한다.
Navigation 요소들이 페이지 내에서 한 눈에 들어오지 않는다면 사용자는 그것을 볼 수 없고 따라서 찾아가지도 않게 된다. Navigation 도구를 찾기 위해 Scroll하게 만드는 것은 절대 금물이다.
Site의 Design을 잘 하는 것은 중요하다. 하지만 사용자가 Page를 보고 난 후 이것이 무엇을 하려는 Site이며 자신이 무얼 해야 할지를 모른다면 그 Web Site는 실패한 것이다. 단순하고도 정확하게 사용자가 해야 할(할 수 있는) 것들을 표시해 주어야 한다.
모호한 제목은 처음 방문하는 사용자에게 혼란만 준다. Navigation 제목에는 간단한 단어를 사용하고, 제목을 보고 어떤 Page 인지 정확히 알 수 있도록 해야 한다.
많은 Site들이 방문객에 관한 정보를 수집하는 것을 목적으로 하고 있다. 장황한 양식으로는 이 목적을 달성할 수 없다. 작성해야 하는 양식을 짧고 간단하게 하고, 사용자가 자신의 정보를 제공할 만한 가치나 보상을 제공하도록 한다.
사람들은 Internet을 '읽지' 않는다. 읽어야 할 필요가 있을 때는 Print하게 마련이다. 긴 Text 대신 짧은 설명을 달고 사용자가 원할 때 기술적인 문서나 멋진 산문들을 Download해서 볼 수 있도록 하면 좋다.
사용자에게 신뢰감과 친근감을 주기 위해서는 Navigation과 Page Layout의 일관성이 필요하다. Page가 바뀔 때마다 Navigation이나 정보 Design을 찾아 헤매는 것은 혼란스럽고 짜증나는 일이다.
마지막 Tip은 정보 Design이기보다는 정보의 표시에 관한 것이다. Web Site에 엄청난 경비를 들이는 세계 최대의 기업 Site에서부터 침실에서 만들어지는 동호회 Site에 이르기까지, 이 모든 Site들이 문법이나 철자 오류를 가지고 있다. 이런 오류는 Site 전체의 질을 떨어뜨린다.

Navgation

Navigation 구조를 Design하는 것은 매우 재미있다. 우주선의 계기판 모양에서 동굴 벽화에 이르기까지 다양한 Navigation 구조들이 있어 왔다. Navigation을 잡는 것은 정보 Design 과정과 매우 흡사할 수도 있지만, Navigation은 사용자의 흥미를 끌기 위해 눈에 보이는 시각적 은유(metaphor) 까지를 사용한다. 영국에서 가장 잘 알려진 Web Design 대행사인 딥엔드에게 Navigation에 관해 물었다. 런던 딥엔드의 Tony Philips (Design Director), Jane Austin (Interaction Director), Victoria Jack (Interaction Designer), Laurence Thompson (Designer)에게 감사를 전한다.

방문객을 설정하라. 이 Site는 누구를 위한 것인가? 사용자의 유형을 정의함으로써, 사용자가 이 매체에 얼마나 친숙한지, 그들이 이 Site에서 얼마만큼의 시간을 보내는지, 그리고 Site의 기능을 얼마나 이해하고 있는지의 관점에서 그들에게 적합한 Navigation System을 만들 수 있게 된다.
기능을 설정하라. 이 Site는 무엇을 하는 Site인가? 사용자들이 Navigation에서 기대하는 것은 무엇인가? 사용자의 구매 의사를 이끌어내야 하는가? 혹은 Site를 둘러보거나 즐기게 만들 것인가? 초기에 Site의 기능을 정의하면 그에 따라 다른 것들을 결정할 수 있게 된다.
명확한 분류와 제목을 사용한다. 목표가 되는 사용자가 이해할 수 있는 용어와 언어를 사용하도록 한다. 시각 언어의 일관성 역시 중요하다. 서체의 선택, Color의 사용, 간단한 Roll Over 등에서 일관성을 줄 수 있다.
위치와 배열에 일관성을 지킨다. 모든 Page에서 Global Navigation (Site 전체에 걸쳐있는 Navigation)과 Local Navigation (어떤 Section이나 Page에만 존재하는 Navigation) 요소에다 일정한 위치와 순서를 정해 놓는다. 이렇게 하면 첫 Page에서 다른 Page로 이동한 사용자가 Contents의 범위를 정확하게 알 수 있고, 따라서 친숙함을 줌으로 원하는 정보와 대화의 경험을 느낄 수 있다.
다른 관련된 Contents로의 Link를 생각해 본다. Amazone Web Site가 좋은 예이다. 이 Site는 시각적으로는 매우 평범하지만 매우 효율적인 구조로 구성되어 있다는 것을 알 수 있을 것이다.
많은 Site들이 좀더 감성적인 사용자 경험(User Experience)을 이끌어내기 위해 상상력과 창의력을 동원해 Navigation System에 접근한다. Tango Web Site를 보자. 이 Site는 Contents와 Navigation 도구들에 장난스러운 그림이나 Character를 사용해 유머러스한 느낌을 주고 있다.
사용자로 하여금 Contents를 자신에 맞게 조정할 수 있도록 하는 것이 좋을 때가 있다. Typograchic 56 Web Site는 국제 Typographic Designer 모임(International Society of Typographic Designers)을 위해 만들어진 것으로, 사용자가 정보의 양과 순서를 선택할 수 있도록 되어있다.
가끔 색다른 시각적 메타포를 찾아보는 것도 흥미로운 결과를 만들어낸다. Beer is Life Site는 학생들을 위해 만들어졌는데, Navigation 요소의 하나인 '학생관'은 그들을 염두에 두고 Design 된 것이다. 다른 Web Site들은 기능과 Contents에 기반해서 은유적인 Navigation 구조를 만든다. Design과 Design and Art Direction Website에서 딥엔드는 '연필을 굴려서' 다른 Section으로 이동할 수 있는 Menu를 선보였다.
Navigation System은 종종 이야기의 형태를 띠기도 한다. French Connection Site은 이야기 중간에 사용자가 줄거리를 선택할 수 있고, 그에 따라 결과가 달라지게 되어 있다.
Navigation의 한계를 넘어, Interactive Sound를 사용하여 완전히 실험적인 Navigation System을 만들어내는 것도 가능하다. 새로 나온 Soft Drink, Carbon을 위해 딥엔드에서 제작한 Web Site 은 사용자가 Navigation 요소들을 발견하고 즐기도록 되어있다. 사용자는 시각적, 청각적인 Feedback을 해석하고 Menu를 선택할 수 있다. 또 하나 눈 여겨 봐 둘만한 Site로는 www.copyrightdavis.com이 있다.

Anymation

Anymation으로 인해 Web은 활기를 띠게 되었다. 하지만 Design이 잘된 Web Site라도 완성도가 떨어지는 Anymation이 들어가면 격이 떨어지게 마련이다. Anymation은 Download 속도를 느리게 하고 어떤 경우는 Plug In을 필요로 하기도 하며, 가장 나쁜 것은 몇 가지의 '단순하면서도 효과적인' Anymation Style이 Web Site 전반에 걸쳐 퍼져 있다는 점이다. 현재의 Web Anymation이 필요로 하는 것은 독특함이다. 마티니의 Multimedia 팀장인 Ben Adams의 조언을 들어보자. 일반적인 조언에서 시작해 아홉 가지의 Flash 관련 Tip을 제공한다.

Web Site를 제작할 때 가장 중요한 결정 사항이 있다면 'Anymation을 넣을 것인가 말 것인가'이다. 이것은 매우 결정하기 쉬운 문제인 것 같지만 개발 시 이 문제를 고려하지 않을 경우, 결과적으로 어지럽거나 구토를 유발할 것만 같은 Page에 말도 안 되는 Navigation이 나오는 경우가 허다하다. 신중히 생각하고 어떤 사용자들을 겨냥하고 있는지를 명확히 한 후 그들에게 어떤 시각적 경험을 선사할 것인지를 정한다. 속도와 Plug In, Browser, 그리고 시각적 효과와 파급 효과를 고려한다.
처음에 종이 위에 Story Board를 그려 주제를 강력하고 훌륭하게 발전시켜 나간다. 작은 크기로 대강 그려가면서 무대와 장면, Anymation을 기획한다. Idea를 위해 영화나 전통 TV Anymation Series들을 보는 것도 좋다. 영화나 전통 Anymation 작품들을 보는 것은 효과적인 Camera 각도나 편집을 위해 특히 유용하다.
기본적인 얘기이나, 처음 Movie를 제작할 때부터 Modify Movie Menu에서 초당 Frame 비율을 설정하도록 한다. 대개 초당 20이나 24 Frame을 쓴다. 단순한 Falsh Movie에서는 최소 12fps 정도를 주면 CPU의 부담을 줄이게 되어 낮은 Computer 사양에서도 재생할 수 있게 된다.
Flash에서 Symbol을 흐릴 때 Alpha 대신에 Tint로 변화시킨다. 이렇게 하면 CPU의 처리 시간을 줄일 수 있다. 예를 들어 엷거나 흰 배경 색에서 Symbol을 Fade Out 시킬 때 Tint를 흰색으로 주면 같은 효과를 얻을 수 있다. 대부분 Alpha를 사용하는 것보다 이 방법을 쓰는 것이 효과적이다.
Ease In & Ease Out(Flash의 Modify Menu에서 Frame Motion과 Tweening 부분에 있다.)의 차이를 알아야 한다. 움직임이나 중력을 표현할 경우 이 두 Option을 적절히 사용하면 큰 효과를 볼 수 있다. 간단히 말하면 Ease Out은 끝으로 갈수록 천천히 움직이는 것이고, Ease In은 천천히 시작되어 빨라지는 것이다.
Object의 움직임을 끝내거나 화면에서 Fade Out 시킬 경우 마지막에 빈 Frame을 넣어준다. 더 이상 쓰이지 않는 Object가 화면에 남아있으면, Zoom 효과를 주거나 다른 요소에 Twinning 효과를 줄 때 처리 속도에 영향을 주게 되어 Anymation의 재생 속도가 느려질 수 있다.
음향 효과 역시 훌륭한 Anymation의 중요한 요소인데, 종종 무시된다. Sound를 정확한 Key Frame에 위치시키는 것은 정말 큰 차이를 가져온다. 공들여 Sound를 편집하고 Anymation Event와 일치하는 Key Frame에 Sound를 넣는다.
BMP나 JPEG 위에서 형체를 Anymation화 할 때. 먼저 BMP(혹은 JPEG)를 Break Apart 해준다. Image를 선택하고 Group화 한 후 Symbol로 변환한다. Effects Menu에서 Alpha 값을 99% 이하로 낮춘다. 이렇게 하면 Vector Graphic이 움직일 때 Bitmap이 몇 Pixel씩 움직이는 현상이 없어지고 자연스럽게 된다.
Character Anymation. Character를 몇 개의 부분으로 나눈다. Character가 얼마나 정교하게 움직일 것인지를 결정한 후 화면상에서 어떤 부분들이 움직이거나 이동할지를 정한다. 예를 들어 Character를 눈 (깜빡일 때), 입과 턱 (립싱크 할 때), 머리, 몸통, 팔, 손, 다리, 등등으로 분리시킨다.
Out Line을 그리기 위해 Flash의 Line 도구를 이용할 때, 크기를 확대/축소하거나 Zoom 효과를 주면 경계선이 왜곡된다는 것을 알아야 한다. 가장 가는 선(hairline)의 경우 100%에서는 매우 자세하게 나타나지만 Image의 크기를 축소하면 선이 너무 굵어진다. 그러므로 작은 이미지는 너무 자세히 그릴 필요가 없다. 파일 크기만 커진다.

흡인력 있는 콘텐츠

'흡인력 있는 콘텐츠(Sticky contents)'라는 말은 오히려 다르게 해석될 의미가 있는 말이지만, 이제는 확실히 굳어진 Internet 용어 중의 하나가 되었다. Web Site에서 Game이나 재미있는 장치들을 제공해서 방문객들이 오랫동안 머물게 하고 재방문하도록 하는 수법은 몇몇 Web Design 대행사들 사이에서 거의 예술의 수준으로 끌어올려지고 있다. 이 분야의 유명한 선두 주자의 한 명인 Brendan Dawes는 전에 Subnet에서 일했고 지금은 맨체스터에 있는 마그네틱 노스의 제작 감독으로 있다. 그의 열 가지 Tip을 들어보자.

Contents를 자주 Update 한다. Contents가 항상 똑같다면 아무도 그 Site를 찾지 않을 것이다. 그러려면 헌신적인 편집자들로 이루어진 팀이 필요하다. 만약 작은 회사나 집단일 경우는 방대한 주제의 콘텐츠를 보유하고 있는 [w] www.moreover.com 등의 Site와 계약을 맺고 Contents를 제공받을 수도 있다.
방문객에게 회원 등록을 하게 하고 Site의 Update 소식을 E-Mail로 알려준다. 왜 회원 등록을 해야 하는지와 회원 등록을 할 경우의 이익, 그리고 회원의 E-Mail 주소를 다른 곳에 누출시키지 않는다는 것을 알려준다. 하지만 꼭 회원 등록을 하지 않아도 Site를 이용할 수 있다는 것을 확실히 해둔다. 그렇지 않으면 사람들은 Site를 외면한다.
Flash 기반의 Site를 만들 작정이라면, 첫 Page만은 빨리 뜨도록 하는 것이 좋다. 방문객들이 Contents에 흥미를 갖게 된 후 다른 Section들에 좀더 무거운 Contents를 올려도 된다. 방문객들이 뭔가 흥미를 느낄만한 것이 있다는 사실을 일찍 깨닫도록 하라는 것이다.
Site에서 Game을 제공한다면, 최고 점수를 보여주는 Page를 만들어서 Game에 들이는 사용자들의 노력을 기록할 수 있도록 한다. 이렇게 하면 사용자들은 그 Site에 다시 들어와서 자신이 몇 위나 되는지 확인하게 된다.
Site에 뭔가 독특한 것을 넣어서 사람들이 그 기능을 사용하기 위해 Site를 방문하도록 만든다. 이 방법은 Site가 Niche Subject(규모는 적지만 시기 적절함과 독특함으로 인해 수익 가능성이 있는 분야)에 관한 것일 때 특히 효과적이다. Site에서 제공하는 동시 Message Service나 Message Forum 같은 것이 부가 Service의 좋은 예이다. Site에 Message Forum을 넣는 것은 충분한 수의 고정 방문객이 있을 경우, 항상 새로운 읽을거리가 있다는 것을 의미한다.
다른 Site들에서 제공하는 Utility를 사용하면 Contents를 항상 새롭게 유지할 수 있다. [w] www.blogger.com에서는 멋진 Weblog Utility를 제공한다. 이 Utility를 자신의 Site에 붙일 수 있고, 지난 Log들을 관리할 수도 있다.
Contents에 쏟는 노력의 일부를 비슷한 성향의 사람들로 이루어진 Community를 구축하는데 들여보자. [w] were-here.com 같은 Site가 어떻게 Flash 세계에서 성장했는지를 살펴보라.
Site에 검색 기능을 넣는다. 사람들은 특정 Contents를 빨리 찾으려고 할 때 Main Navigation 도구를 사용하기보다는 검색을 선호한다. [w] www.atomz.com를 보라. 이 Site는 정말 훌륭한 Search Engine을 무료로 제공하는데, Flash File에 들어간 Text까지 검색할 수 있다.
사람들은 자신의 의견을 피력하는 것을 좋아한다. Web Site에 관련된 Issue에 대해 투표나 여론 조사 등의 기능을 넣어보라.
Web은 매우 Interactive(대화형) 매체라는 것을 기억하라. 즉, 어떻게 하면 사용자를 Site의 경험에 몰입하도록 할 수 있는지에 관해 항상 염두에 두고 있어야 한다.

음악과 음향 효과

Web Design에서 가장 간과되고 있는 부분이 바로 소리일 것이다. Designer들은 대개 시각적인 경험에만 초점을 두고 만다. 시각적인 경험이 가장 중요한 것은 분명하지만, Site를 정말 기억에 남도록 만드는 것은 음향 효과와 음악이다. 이 부분은 Site를 향상시키거나 완벽하게 만드는 한 방법이다. 훌륭한 Site들은 대부분 뛰어난 청각적 요소를 써서 사용자 경험을 마무리한다. 다음의 Tip들은 영화와 TV, Web을 위한 Sound Design을 전문으로 하는 아마데우스 미디어의 Robin Kershaw가 제공한 것이다.

왜 음악 혹은 소리를 사용하려는지 확실히 한다. 적절한 Sound는 Site의 분위기에 놀라운 효과를 주며 독특한 선율은 Site의 인지도를 높일 수 있다. Intel의 Logo와 Melody는 따로 떼어서 생각할 수 없다. 이런 것을 Audio Branding)이라고 한다.
Site에 Sound를 사용하는 것은 전체적 Design의 한 부분이라는 것을 명심하도록. Sound가 단순히 장식적으로만 쓰인다면 오히려 신경 거슬리는 것이 될 수 있다. 사용자 경험을 염두에 두도록 한다.
관객을 신중히 고려한다. Download 속도 때문에 사용자의 Modem 유형에 따라 Sound를 사용할 수 있는 범위가 달라진다. 관객의 연령대와 통계 수치 역시 고려해야 한다. 연금을 받는 사람들에게 Dance 음악을 트는 것은 아무 소용이 없다. 그들은 그 Site를 떠날 것이다.
Download 시간을 최소화하기 위해 Stereo를 Mono로 바꾸는 것을 고려해 본다. 말 그대로 File Size가 반으로 줄어든다. 하지만 어떤 종류의 음악은 다른 것들보다 음질이 더 많이 손상된다는 것에 주의해야 한다. 압축 정도에 따라서도 음질이 많이 달라진다.
음악 외에도, 멋진 화면 해설을 Site에 잘 결합한다면 Site의 가치를 더욱 높일 수 있다. 많이 들어갈 필요는 없고, 그저 Page가 Update 되었다던가 하는 발표 정도면 좋을 것이다 (그밖에도 상상의 나래를 마음껏 펼쳐보자).
화면과 소리를 어떤 방식으로든 동기화 할 필요가 있다면 Flash를 사용해야 한다. Flash에서 Sound를 사용하는 방법에는 두 가지가 있다. Event Sound와 Stream Sound 이다. Flash에서 Event Sound는 어떤 Key Frame에 도달하면 재생되기 시작해서 Anymation과는 전혀 무관하게 끝까지 재생된다. Stream Sound는 Frame 단위로 재생되므로 Preload 시간이 짧다.
Preloading(Event) Sound를 사용할 것인지 Streamming을 사용할 것인지 결정하기 위해서는 Site의 나머지 부분들을 살펴보아야 한다. Anymation을 어떤 식으로든 Preload 할 작정이라면 Sound 역시 Preload 해야 한다. Site의 첫 Page가 빨리 뜨기를 원하거나 또는 긴 음악을 넣고 싶다면 Stream Sound를 사용하라. 몇 초간의 Preloading 후에 음악이 재생되기 시작할 것이다. 하지만 Network이 혼잡할 경우 소리가 끊길 수도 있다는 점을 염두에 둘 것.
화면과 음악이 동기화되지 않아도 상관없다면 좀 더 진보된 압축 방법을 쓸 수 있다. MP3(Flash 최고의 Export Option 이다)가 가장 적당하지만 음악만 있을 경우 QDesign Music을, 목소리만으로 된 경우에는 Qualcom PureVoice를 써보는 것도 좋다.
상대적으로 Download 시간이 적게 걸리는 반복적인 음악의 경우 동기화된 Sound와 Stream Sound를 결합하는 것도 생각해볼 수 있다. Flash에서 Stream Sound는 Anymation 재생률을 떨어뜨릴 수 있으므로, 적절한 곳에 위치시키거나 분리된 Layer에 동기화된 Sound를 반복해서 사용하면 된다.
항상 전문가가 제작한 음악을 사용하도록 한다. 작곡가에게 곡을 구입하던가 기존의 Library 음악을 구입한다. 저작권을 갖지 않고 음악을 사용할 수는 없다. 음악을 도용하는 것은 여러 작곡가들을 죽이는 일이며, 나중에 값비싼 대가를 지불하게 될 수도 있다.

Streamming Media

최근 3년 동안 우리는 Broadband (廣帶域)의 가능성에 관해 들어왔고, 근사한 Web Video Solution의 미래를 믿어왔다. Online 관객들이 얼마나 빨리 Broadband Service로 전향하고 있는지는 미지수이지만, Design 관점에서 볼 때 작은 Video가 Site에 움직임과 컬러, 그리고 청각적인 재미를 가져다주는 큰 역할을 한다는 것은 확실하다. 관객을 지루하게 만들지 않고 영상을 제공하려면 Streamming Media를 써야 한다. 최대의 Online Entertainment Site인 아이필름이 말하는 Streamming Media에 관한 열 가지 Tip을 들어보자.

Source의 질이 낮으면 압축 결과도 좋지 않고, Web Site의 질 역시 떨어진다.
항상 최고 해상도에 최대 Frame Size, 최고 Frame 비율 (재생률)로 Capture한다. Video를 Capture 할 때 가장 좋은 기준은 720×480 Pixel의 해상도, 29.97fps로 DV FireWire 에서 Capture 받는 것이다.
아이필름이 추천하는 편집과 Capture Software는 Macintosh에서 사용되는 Final Cut Pro와, Macintosh과 PC에서 사용할 수 있는 Adobe Premiere 6.0이다. 압축용 Software로는 단연코 Terran의 Cleaner 5를 추천한다.
이제 Web에 올릴 Format을 결정해야 한다. 주요 Format으로는 Real Media, Quick Time (Sorenson 2, Version 3은 Beta Test 중), Windows Media가 있다. 이 Format들은 각각 장단점을 가지고 있다. 이 세 개의 Format을 모두 시험해본 후 어떤 것이 가장 좋을지 결정하는 것이 좋다.
잘리는 현상 (Cropping). 결과물을 보면 처음과 끝은 괜찮은 것 같은데 중간의 곳곳에서 일정치 않게 잘리는 현상이 발생하는 경우가 있다. 문제가 있으면 설정을 조절하든가 다른 Format으로 압축하는 것을 고려해본다.
화면의 가로 세로 비율을 염두에 둘 것. 만일 DV와 같이 일반 화면 비율이 아닌 Format의 영상을 Capture 했다면, 압축할 때 4:3의 비율에 맞게 크기를 조절해 주어야 한다. 표준 화면 비율은 640×480, 320×240, 240×180 등이 있다.
화질에 상관없이 File 크기를 줄일 수 있는 두 가지 방법이 있다. 첫째는 Frame 비율을 줄이는 것이다. 15-12fps 정도면 200-300k의 Streamming File이 나온다. 6-10fps로 낮추면 낮은 대역폭(56k Modem)에서 재생할 수 있을 정도의 크기인 100k 정도로 File 크기를 줄일 수 있다. 둘째 방법은 화면 비율/해상도를 줄이는 것이다. 320×240이나 240×180 Pixel 사이의 동영상은 200-300k 정도의 File 크기로 압축된다. 이것을 160×120이나 240×180 Pixel로 줄이면 File 크기는 100k 정도로 줄어든다. (화면 비율은 4로 나누어지는 숫자이어야 하며, 그렇지 않은 수를 지정했을 경우는 되지 않는다.)
56k용 Streamming File에서 압축 대역폭은 36k를 넘어서는 안된다. 대부분의 전화선은 56k Modem 사용자들에게 56k의 속도를 모두 지원하지 않기 때문이다.
Cleaner 5의 Black Restore Filter를 써보자. 이 Filter는 화질을 좀더 향상시켜주는 반면 어두운 부분의 세밀함은 손상시킨다. Audio 쪽에서는 Audio Reverb Filter를 쓰면 Audio 압축으로 인해 생기는 잡음들을 완화시켜준다.
56k용으로 압축할 때는 16k의 Low Pass Filter를 쓰면 고음 부분의 잡음이 줄어든다.

3D화 하기

Software 개발자들의 주장에 일리가 있다면, Web 3D는 세상을 구원(?)하고 만연해 있는 따분함을 치료할 것이며, 우리 모두는 영원히 가상의 즐거움이라는 Cyber 세계에서 살게 될 것이다. 이상에 가까운 얘기는 그만하고. 사실 Web 3D Solution을 선택하는 것은 Web Designer가 직면한 가장 어려운 문제 중의 하나이다. 어쨌든 몇몇 Designer들은 Web에서 훌륭한 3D 작품들을 선보이고 있다. 디지트 런던의 제작 감독인 Nick Cristea에게 Web 3D에 대한 조언을 들어보자.

적절한 근거에 의해 3D를 사용하라. 3D를 쓰는 것이 Web Site의 분위기를 돋구는 편한 방법인 것처럼 보일 수도 있지만, Site 전체에 꼭 필요한 부분이라고 판단될 때에만 3D를 사용해야 한다. 형편없는 Idea나 Contents의 부족을 메우는 방법으로 3D를 사용한다면, 그건 정당화될 수도 없고 팔릴 수도 없다. Project에 왜 3D를 사용해야 하는지를 대략 정리한다. 3D를 사용하는 것이 정말 최선의 방법인지 스스로에게 질문해 본다.
최적의 3D 도구를 선택한다. Real 3D이어야만 하는가? 특정 Plug In을 꼭 Download 해야만 하는가? 저작권 문제는 어떻게 되나? 그 작업을 위해 특정 개발자를 고용해야 할 필요가 있는가? 현재로서는 Flash가 가장 많이 쓰이는 유일한 Plug In이므로 가능하다면 Flash를 쓰는 것이 좋다. Internet에서 Action Scripts 3D Engine을 구할 수도 있고, Frame-by-Frame Anymation으로 3D 처럼 보이게 할 수도 있다. 시점을 움직이거나 Avatars를 바꾸거나 그림자나 조명을 실시간으로 바꾸어야 한다면 '진짜' 3D Plug In을 쓸 필요가 있다.
Design 초안을 만든다. 줄거리, 분위기, 배경, 속도, Drama 등은 3D 도구를 사용할 때 모두 중요한 요소들이다. 일관성 있고, 잘 고안된 상황을 만들어 방문객이 몰입할 수 있도록 해야 한다. 시각적인 요소들의 관계를 적절히 조합하고, Test 한다.
3D 작업의 장점은 단시간에 구도를 여러 가지로 바꿔볼 수 있다는 점이다. 단순한 Object를 만들어 구성과 Anymation을 Test 한다. Camera 각도를 이리저리 옮겨보거나 움직이는 속도를 바꿔보거나 한 장면 내의 Object들간의 관계를 다양하게 설정해 본다. 새로운 Idea를 발견하는데 이런 시도들이 유일한 방법일 때도 있다.
대략적인 Model을 사용해 구성과 줄거리의 감을 잡은 후 Web에서의 기본 원형을 만든다. 모든 종류의 Trial이나 Demo Plug In에서 작업한 시안이 구현 가능한지 Test 해 본다. 실제로 만들어보거나 기본 원형을 만들어보아야만 무엇이 가능하고 무엇이 불가능한지를 알 수 있다.
Model을 최적화한다. 3D Web Contents의 최종 결과물이 어떤 Forma t이든, 최적화의 규칙은 모두 같다. Model이 세밀하고 복잡해질수록 File Size는 커진다. 처음부터 Idea와 Design을 단순하게 하고, File Size를 계속 Check 한다.
3D 요소들을 내보낸다. 일부 Plug In은 Modeling 단계에서 특정한 방법을 써야 한다. 3ds Max는 현재까지 가장 많이 지원되고 있으며, 대부분의 Plug In 기술을 지원하는 고유 Add-On(특정 기능 보강을 목적으로 만든 보조 Software)들이 무료로 나와 있다. 하지만 비싸다. LightWave는 훌륭한 VRML 내보내기 기능을 가지고 있지만 특정 Plug In이 없다. Swift 3D나 Amorphium Pro는 저렴한 가격으로 3D SWF File을 만들 수 있는 좋은 Program들이다. 어떤 Software를 사용하든, Model을 내보내어 초기에 Test를 한 후, 한 장면을 좀더 작은 여러 개의 부분으로 나눈다.
최적화와 Site 구축. Site를 Streamming 할 수 있는 요소와 배경에서 Loading 될 요소, 그리고 필요할 때만 Loading 되는 요소 등, 몇 개의 Layer로 분리시킨다. 모든 Loading 시간을 계산하고 조절하여 되도록 사용자가 Loading 시간을 느끼지 못하도록 한다.
File 크기가 문제가 되거나 기술적으로 문제가 있을 때 창조적으로 접근하지 못하고 결과물의 질을 떨어뜨리는 경우가 있다. 사용하고 있는 도구를 충분히 Test하고 기능에 관해 잘 알아야 이러한 문제들을 해결할 수 있다. 단순한 Palette와 Shape, Texture Mapping을 사용하고, 하나의 Shape나 Object 들을 반복해서 쓴다.
한가지 도구로 모든 것을 해결할 수는 없다. 여러 도구를 결합해서 사용하면 좀 더 새롭고 흥미로운 결과물을 만들어낼 수 있다. 30일 짜리 Demo Version들을 잘 이용해서 최근의 도구와 기능들을 익혀 시대에 뒤떨어지지 않도록 한다.

난해한 Back-End

Database Server를 다루는 것과 그것을 Web Site와 연동시키는 것은 그리 재미있는 일은 아니다. 하지만 이 작업이 제대로 되면 Web Designer들의 작업 시간을 많이 줄일 수 있다. 효율적으로 설계된 Database를 기반으로 Contents가 자동으로 Update 되기 때문에 Design과 씨름하지 않아도 된다는 말이다. 어려운 것은 그 Database를 초기에 정확하게 설계해야 한다는 점이다. 이후에 변경이나 재구축하려면 시간 낭비가 막대하다. Database와 Site 구축 및 통합을 전문으로 하는 Web Design 집단인 콘챙고에게 마지막 열 가지 Tip을 들어보자.

Design과 개발을 분리시키지 말 것. 복잡한 Data 기반의 Site를 효율적으로 만드는 것은 훌륭한 Design이나 잘 짜여진 Code만으로 되는 것이 아니다. 두 부분이 긴밀하게 협력해야 한다. Designer들은 개발 팀과 함께 일해야 한다. 개발자들이 Designer의 의견을 무시하면 Site는 위험에 빠지게 된다.
Contents가 자동으로 바뀌는(Dynamic) Site는 최소한의 Design Template가 대부분의 Page들에 적용되는 경우에 한해서 가장 효율적으로 운영된다. 이 점이 창의력을 제한하는 것은 아니다. 개발 팀은 다르게 얘기하겠지만 Template는 딱딱한 망으로 짜여진 Layout을 의미하는 것은 아니다. Template는 여러 유형의 Page 들에 공통으로 쓰이는 요소들을 구분해주는 것이다.
Database에 필요한 Test Data를 가능한 빨리, 그리고 가능한 실제 Data에 가까운 것으로 받는 것이 좋다. Data는 Site Contents의 대부분을 차지하면서도 대개 맨 마지막에야 확정되기 때문에 문제가 생긴다. 누군가 고객과 협조해서 Test Data를 받아내지 않는다면 전체 Project가 위험에 처한다. 실제 Data가 System에 입력될 때 대부분의 문제들이 발생하기 마련이다. 실제 Data를 초기에 받아내지 못한 경우, 그 Site는 사상누각이다.
관리자 Page를 소홀히 하지 말 것. Site에 훌륭한 Data를 넣는 것만큼이나 그것을 보여주는 것도 중요하다. 관리자 Site를 쓰기 쉽고 직관적으로 만드는 것은 Front-End(사용자들에게 직접 보여지는 화면)만큼이나 중요한 문제다. Designer들과 유용성(Usability) 관련자들에게 관리자 화면을 Design하게 하고 Copyrighter에게 사용법을 만들도록 한다.
Flash로만 제작된 Site에서 그림이나 Text를 Update 할 때, Flash Generator가 쓰기 어렵거나 너무 비싸다면 다른 쉬운 방법이 있다. Image를 SWF File로 저장한 후 Load Movie와 Target Action을 써서 Image를 화면에 불러들일 수 있다. Copy Text는 메모장에서 TXT File로 저장한 후 Flash Movie에서 자동으로 읽어들일 수 있다.
Site에 사용될 Package와 Platform을 고를 때 신중해야 한다. 특정 Bender에 연연하다 보면 고객의 요구 사항을 고객에게 맞지 않는 것에 억지로 끼워 맞추는 결과를 가져온다. 여러 Package들을 신중하게 알아보도록 한다.
Back-End는 알고 보면 그리 어려운 것이 아니다. Front-End나 Back-End는 문제를 복잡하게 만드는 용어일 뿐이다. Front-End와 Back-End, Design, 그리고 개발을 가능한 밀접하게 연계시킨다. 다양한 집단의 사람들이 서로 협력하도록 한다면 그들이 Back-End에 대한 그들의 두려움을 없앨 수 있다.
복잡한 Back-End Solution을 개발할 때 Project Manager가 기억해야 할 사항은 다음과 같다.

Designer가 '다 끝냈다'고 할 때 절대 믿지 말 것.
개발자가 '다 끝냈다'고 할 때 절대 믿지 말 것.
Test: 위 두 가지 사항을 Test 할 것.

확장 가능하고 기능적인 관계형 Database를 고안하라. 어떤 Data를 입력하든지 문제없다고 생각될 때까지 Coding을 시작하지 않는다. 처음에 이 문제를 확실하게 해두는 것이 제대로 작동되는 Site와 그렇지 않은 Site의 차이를 만든다.
고객 Side File들을 구조화해서 가능한 하나의 Code를 반복 사용하도록 한다. 예를 들어 ASP Page에서는 Template에 #include File들을 사용한다. 이렇게 하면 Code 구조가 간단해지고 나중에 유지 보수하기도 쉬워진다. 가능한 Module과 Object라는 관점에서 생각하라