쏭군은 열정 드리머

Web deisnger wall과 WDL에 재미있는 글이 올라왔네요. 2010년 한해 유행할 웹디자인 트렌드를 예측한 글입니다. 재미있는 내용들이 많네요. 디자인이나 퍼블리싱 하시는 분들께는 어찌보면 배울게 많은 한해가 되겠고, 어찌보면 재미있는 일들이 많은 한해가 될 것 같습니다. 두 사이트에 올라와있는 내용을 정리해 보았습니다. 큰 트렌드와 제 생각을 중심으로 적어보았습니다.

1. 세리프 폰트의 적극적인 사용
글자의 끝부분이 낚시바늘처럼 꺽이거나 가늘어지거나 기타 등등의 효과가 적용된 세리프 폰트는 잘 사용하면 세련된 느낌을 줄 수 있습니다. 단, 세리프 폰트는 인쇄물에서는 크기가 아무리 작아도 잘 보이지만 모니터 상에서는 컨텐츠 제공용으로 깨알같이 작은 폰트는 잘 사용하지 않는것이 관례였습니다. 올해 디자이너분들께서 세리프 폰트를 어떻게 활용할지 무척 기대가 됩니다.

2. 다양한 커스텀 폰트의 사용
CSS3에는 방문자에게 없는 폰트를 강제로 제공하는 방법이 있습니다(@font-face). 아마도 국내에서는 굴림, 돋움을 벗어나 텍스트의 폰트를 자유자재로 제공할 수 있다면 디자이너 분들은 더 없이 행복할 것 같습니다. 해외에서는 TypeKit이라는 사이트에서 무료로 다양한 폰트를 제공하나 봅니다. 궁금하시면 한 번쯤 들러보세요~


3. 텍스쳐가 들어간 배경이미지
단색이나 단순한 그라데이션 대신 질감을 사용한 웹페이지 배경이 대세를 이룰 것이란 전망입니다. 백그라운드 트렌드 관련글


4. 단순하게, 그리고 그리드를 맞춰서 깔끔하게(여백과 그리드의 활용)
원 글쓴이 말마따나 심플하고 그리드가 딱딱 맞는 웹페이지는 새롭지는 않습니다. 다만 2010년 한해에도 이런 경향의 웹디자인 열풍은 계속 될 것 같습니다. 관련 추천 사이트 더보기


5. CSS3의 활용
브라우저들의 지원 정도에 따라 CSS3의 활용이 가장 두드러지는 한해가 될 것 같습니다. CSS3의 강력한 추가 기능들이 있지만, Web designer wall에서는 웹페이지를 제작하는데 가장 많은 도움을 주는 기능들 위주로 소개를 한 것 같습니다.

CSS 애니메이션
웹킷이 지원되는 환경이라면 이 블로그 우측 상단의 배경 화면이 빙글빙글 돌고 있는 것을 보실 수 있습니다. 맥용 사파리나 파폭에서도 적용됩니다.


둥근 모서리
UI개발자 분들과 디자이너분들 사이에 다툼이 가장 잦은 부분이 조만간 해결될 것 같습니다. 박스 모델 모서리에 둥근 효과를 주거나, 그림자 효과를 주기 위해서 필요없는 마크업과 스크립트가 많이 들어갑니다. 둥근 모서리를 CSS에서 컨트롤 하거나 만들어 낼 수 있다면 불필요한 마크업과 스크립트가 많이 사라질 것 같습니다. 게다가 디자이너분들과 UI개발자분들의 다툼도 많이 사라지겠죠.


요소 그림자 효과
요소의 그림자 효과도 CSS에서 컨트롤을 할 수 있게 된다면 역시 불필요한 마크업과 스크립트가 많이 사라지게 될 것으로 기대됩니다.


6. 반투명 활용
RGBA를 사용하면 백그라운드 컬러가 들어가는 요소의 투명도를 쉽게 조절할 수 있습니다. 일반적인 마크업 구성요소의 opacity(IE계열에서는 alpha)를 조절하여 반투명 효과를 사용하면 깔끔한 페이지를 만들 수 있을 것 입니다.


7. 모바일 페이지는 기본으로 제공
국내에서는 좀 늦었지만, 아이폰 열풍을 기점으로 모바일용 웹페이지가 기본적으로 제공되어야 할 것 같습니다. 모바일용 웹페이지라고 해서 다른 별게 있는 건 아닙니다. 실제 Base데이터는 웹에 있고 단지 CSS와 자바스크립트, 그리고 약간의 디자인만 변경을 해서 페이지를 제공하면 될 것 같습니다. 모바일이라고 해서 따로 서비스가 분리 되는게 아니라 뷰만 바뀐다고 생각하시면 되겠습니다. 크로스브라우징이 된다면 아이폰 뿐 아니라 다른 모바일 기기에서도 서비스를 제공할 수 있을 것 입니다.


8. 커다란 로고와 헤드라인
커다란 로고나 헤드라인으로 무장한 사이트를 올해는 더 많이 보게 될 것 입니다. 디자인에 신경을 많이 쓰는 사이트나 개인 블로그등에서 많이 사용할 것 같습니다.



9. 스케치 이미지와 손으로 그린 이미지
우리나라에서도 예전부터 기업사이트 등에 많이 쓰이던 방식입니다.

10. 통 페이지 레이아웃
다른 페이지로 이동하지 않고도 한 페이지내에서 웹사이트를 이용할 수 있는 디자인이 유행할 것이라는군요. 이를테면 우리가 사용하는 블로그나, 트위터 같은 사이트들은 딱 하나의 디자인만 만들어도 서비스를 제공할 수 있는 수준까지 되는데 이런 형태의 사이트와 디자인을 말하는 것 같습니다.

11. 모달창, 모달레이어(Modal Box)
모달 레이어는 이미 많은 사이트에서 볼 수 있습니다. 이 레이아웃의 디자인은 쉽고 깔끔하게 만들 수 있지만 접근성이나 유저빌리티에는 도움이 될런지는 의문입니다. 앞서 설명드린 10번의 통페이지 레이아웃과 매칭하여 만들면 좋을 것 같습니다.


이외에도 두껍고 반듯한 텍스트의 사용, 거대한 푸터, 언제나 그렇듯 복고풍의 디자인, 페이지 상단의 거대한 인트로 박스, 잡지 형태의 레이아웃, 적극적이고 다양한 이미지의 사용, 등이 주요 항목이였습니다.

이 중, 올해 화두는 단연 HTML5와 CSS3가 아닌가 싶습니다. 특히 새로운 브라우저들이 속속 CSS3를 지원하기 시작한다면 다양한 디자인 테크닉으로 무장한 웹페이지들을 만날 수 있는 한해가 될 것 같습니다. 해외의 트렌드 예측이지만 우리나라도 이와 비슷한 트렌드를 경험할 것 같습니다. 그리고 벌써 HTML5로 만든 플레이어들이 등장하는군요. 후덜덜; 빛과 같은 속도입니다.

우승자는 2만 5천 달러의 연봉을 받으며 본인의 이름을 달고 컬렉션을 출시할 기회도 주어집니다.
누가 생존하느냐!
디자인, 그 치열한 생존과 경쟁의 세계!

쏭군은 디자인에 매우 관심이 많습니다.
2000년대 초반에는 쏭군도 디자이너로 잠시나마 활동했지만, 군생활 전후해서 섬세함을 완전 상실했죠. 그 이후로 디자이너로는 맥도 못추고 있지만, 아직까지 디자인을 보는 눈은 남아있어서 다행입니다. 앞으로 제가 디자인을 하는 일은 얼마 없겠지만, 디자인을 보는 눈은 더욱 키워갈 것 입니다...^^ 건축이든 웹이든.. 생활에서 감각이 차지하는 것은 크니까요^^

오래전, 일본의 유고나카무라(yugop.com)씨로 부터 촉발된 플래시 액션스크립트를 활용한 미술작품은, 수학과 미술, 그리고 컴퓨터라는 새로운 조합으로 사람들을 감탄하게 만들었습니다. 현업 DJ였던 에릭조던은 2advanced.com 이라는 모션그래픽 사이트로 노가다 모션그래픽과 사이버틱한 느낌의 웹사이트 디자인을 전 세계에 전파하기도 하였지요. 힐만커티스나 조슈아 데이비스 같은 훌륭한 디자이너들이 여러가지 감각적이고 실험적인 디자인을 할 때, 우리나라에도 '설은아'라는 디자이너가 혜성같이 등장을 합니다. 현재는 포스트비쥬얼의 대표로서 8년째 회사를 이끌어오고 계시죠~


모든 문화적인 측면에서 우리나라 사람들은 해외의 예술가나 디렉터를 동경하는 경향이 있고, 국내의 디렉터들을 무시하는 경향이 있는데요. 우리나라에도 훌륭한 디렉터들이 많습니다.

오늘은 쏭군의 넋을 잃게 만드는, 훌륭한 웹디자이너&모션그래퍼 분들을 소개할까 합니다. 제 블로그를 방문하시는 분들 중 디자이너분들께 자극이 되는 자료였으면 좋겠습니다..^^

조학래님 (http://2inside.com/)
2inside.com을 운영하고 계시는 학래님입니다. 모션그래픽으로 유명하신 분이시죠. 이 분 스타일은 심플한 듯 하면서도 화려한, 잠시도 눈을 뗄 틈을 주지 않는 스피디함이 매력입니다. 포트폴리오 메뉴를 보시면 나도 모르게 계속 클릭.. 클릭하여 다른 포트폴리오를 보게 됩니다. 최근에는 애프터이펙트를 활용하는 비중이 높아지신 듯 합니다.

정병기님 (http://www.motion-wave.com/)
웹디자이너이자 플래셔이신 정병기님의 웹사이트 입니다. 이 분의 매력은 깔끔하고 군더더기 없는 디자인이 매력 포인트 입니다. 깔끔하지만 허전하지 않게 시각적으로 자원을 잘 배분하시는 분인 듯 합니다. 최근엔 개인웹사이트를 통해서는 이렇다 할 활동을 보여주지 않으셔서 약간 아쉽습니다^^

스카이마블(박광현)님 (http://www.skymarble.com/)
한국에 플래시가 자리 잡을때부터 플래시로 디자인을 해 오신분들이라면 반론없이 인정하실 한국 모션그래픽의 대가, 스카이마블님 입니다. 3D객체를 잘 활용하셔서 한 때 저를 감탄하게 만드셨던 분인데 리뉴얼 한 지 오래된 현재 웹사이트를 지금봐도, 정말 멋지다는 감탄사가 절로 나옵니다. 학래님과 함께 일 하시는 회사의 홈페이지(www.switchmw.com)을 제작하시기도 하셨죠. 이제 이분은 그냥 웹디자이너의 수준을 넘어스신지 오래고, 혼자서 3D 영상까지도 만들어 내시는 듯 한데.. 자세한건 포트폴리오를 보세요~

정상훈님 (http://www.zeeha.com/)
베를린과 뉴욕에 eBoy가 있다면 한국에는 '지하공작실'이 있다고 해도 될까요^^? 우리에게 익숙한 싸이월드 미니룸과 미니미를 만드는 일을 하고 계신분입니다. 일러스트레이터 작업도 하시지만 특별히 도트디자인에서 더 빛나시는 것 같습니다. 예전부터 도트 잘 찍는 분들 부러워했는데요.. 이 분 작품을 보시면 뭐 말도 안나옵니다. 대단하다는 말밖에는^^;; 작업물 하나하나가 정말 섬세합니다.

이 블로그는 진작에 소개해드리려고 했는데, 이제야 소개해드립니다.

'스푼 그래픽스'라는 블로그 입니다. 디자이너분들에게 유용한 정보를 다양하게 제공합니다. 팔방미인 디자인 블로그라고 말씀 드리고 싶네요.. 으흐흐^^ 그럼 이 블로그에서 어떤 정보들을 제공하는지 소개드리겠습니다~

일러스트레이터를 이용해서 다양한 아이콘이나 일러스트들을 어떻게 만드는지, 그 과정들이 튜토리얼들로 모아서 정리를 잘 해두었습니다. 일러스트레이터로 드로잉하는 것에 취약한 디자이너시라면 공부할만한 소스가 많이 있으니 꼭 들러보시라고 권해드리고 싶습니다.


XHTML과 CSS를 활용하여 만든 U.I. 구성요소를 다운로드 받을 수 있도록 서비스하고 있으며, 가끔 관련된 강좌도 올라옵니다.


디자인이 잘 되어 있는 블로그를 수집하여, 독자들에게 소개하는 코너도 꾸준히 운영되고 있습니다. 뛰어난 디자이너의 블로그인 만큼 여기서 소개하는 블로그들의 디자인 역량도 상당한 수준입니다. 과연 워드프레스나 무버블타입 같은 블로그가 저렇게 바뀔 수 있다는 것을 보고 감탄을 마지 않았습니다^^ 굿~


디자인에 필요한 벡터아이콘이나, 비트맵 텍스쳐 같은 것들도 많이 제공하고 있습니다. 여기서 제공되는 것들은 모두 무료이므로 다운로드 받으시고 사용하는데 전혀 문제가 없습니다.

저는 RSS로 구독을 하고 있습니다.

여러분들께서도 관심이 가시면 이 블로그의 RSS를 구독하시기를 권해드립니다.

스푼디자인 블로그 RSS주소 : http://feeds.feedburner.com/SpoonGraphics

동작/지시




도구/어플리케이션




장치/기기




파일시스템




남자 혹은 여자




문서타입



출처 : http://commons.wikimedia.org/wiki/Crystal_Clear

깃발 아이콘 셋
총 220개의 아이콘이 들어있습니다. 사이즈는 16px, 24px, 32px, 48px 까지 있습니다.

블루 & 블랙 아이콘 팩 2

크리스마스 아이콘 팩

발렌타인데이 아이콘 팩

플래시는 웹을 더욱 풍성하게 해주었고, 불가능한 여러가지 U.I.적 한계를 극복하는 멋진도구라고 생각합니다. 대한민국에서 '플래시 모션그래픽'하면 누구나 제일 먼저 손꼽을 학래님과 스카이마블님이 함께 하는 회사라는 타이틀만으로도 많은 모션그래퍼들을 흥분하게 만들었던 Switch가 최근 자사사이트 리뉴얼을 단행했습니다. 아마 웹상의 모션그래픽 디자인 회사중에서는 최강의 회사가 아닐까 생각합니다. 그런 이미지에 걸맞게 자사의 사이트도 깔끔하면서 인터렉티브하게 구성이 되어있습니다.

주메뉴로 회사 소개와 포트폴리오, 그리고 회사에 연락을 할 수 있는 메뉴가 있고, 서브 메뉴로 최근 스위치의 근황이나 인력모집에 관한 안내문, 가장 최근 포트폴리오로 연결되는 버튼이 준비되어 있습니다.


스위치의 포트폴리오를 소개하는 화면입니다. 포트폴리오 하나하나의 퀄리티가 엄청납니다. 또한 회사 홈페이지 곳곳의 모션이 신경써서 디자인 되어 있습니다. 스위치 홈페이지의 모든 내비게이션은 마우스 휠 조작만으로 이루어집니다. 회색바탕에 짙은 빨간색이 포인트 색상으로, 빨간색이 붙은 곳은 네비게이션 역할을 합니다. 네모창은 현재의 포커스를, 화살표나 스크롤바는 페이징을 가능하게 하는 내비게이션입니다.


보고 싶은 포트폴리오를 선택하면, 빨간 포커싱 박스가 부드럽게 확대대어 사라지며, 폰트 아트웍 모션그래픽이 휘리릭 지나가고 멋드러지게 포트폴리오가 등장합니다.


회사 약도를 누르면 스위치가 위치한 강남구의 위성지도에서 대기권을 뚫고 올라가서 지도가 표시됩니다. 효과 하나하나가 멋있습니다~


스위치 사무실을 소개하는 페이지입니다. 은은한 조명에, 씨어터 시스템과, 각종 오락도구, 깔끔하게 정리된 사무실과 다양한 낙서거리들. 그리고 바에 온 듯한 양주와 곳곳에 즐비한 술... 정말 누구나 일하고 싶게 만드는 근무환경입니다. 스위치 사무실에는 더 재밌는 것이 많은 것 같아요. 직접 홈페이지에 접속해서 구경해 보시겠어요?

사이트주소 : http://www.switchmw.com/
회사주소 : 강남구 역삼동 739-19번지 파인아트 빌딩 2층

오데이www.5day.co.kr나 디비컷dbcut.co.kr처럼 이미 한국에서도 포트폴리오를 모아서 보여주는 사이트가 있습니다. 유명한 에이전시에서 만든 사이트나 해외의 유명 사이트를 소개하고, 그것을 모아서 보여주는 서비스 사이트. 하지만 이 사이트들 만으로는 2% 모자란감이 없지 않아 있습니다. 바로 사이트들이 디자인 된 느낌이나 기법들이 비슷비슷하고, 해외에서 참고한 디자인, 그리고 그들의 오랜 테크닉을 모방한 사이트가 많기 때문이지요. 이런 모자란 2%를 채우기에 딱 좋은 진짜 디자인 포트폴리오 사이트를 소개합니다.

The FWA 라는 사이트입니다. 꽤 오래된 사이트지만, 최신 사이트가 활발하게 업데이트 되고 있습니다. 물론 오래된 사이트라서 이 글을 읽는 디자이너분들 중에서 알고 계시는 분들이 대다수 이시겠지만, 역시 이번에도 몰랐던 분 소수를 위해서 소개를 합니다.


The FWA에 접속을 하면 최근에 올라온 사이트 순서대로 목록을 볼 수 있습니다. 창의적인 사이트를 많이 보실 수 있습니다. 아트웍이 이쁜 곳도 많고, 색상을 잘 쓴 사이트도 많으며, 현란한 모션그래픽이 구현 된 곳도 있습니다. 다양한 사이트를 지속적으로 구경하실 수 있습니다. 사이트 하나하나 빈틈없는 디자인을 보여줍니다.


보고 싶은 사이트를 필터링 해서 볼 수 있는 기능입니다. 사이트의 성격에 따라서 카테고리를 나눠서 볼 수 있고, 사람들이 가장 많이 추천한 사이트, 한 해 가장 추천을 많이 받은 사이트를 골라볼 수 있고, 기간별로 오름차순, 내림차순 정렬을 해서 볼 수 있습니다.


이 사이트는 페이징 버튼이 없습니다. 다음 페이지를 보시려면, 마우스 스크롤을 하시면 됩니다.


보고 싶은 사이트를 클릭하시면 우측에 사이트 정보가 바뀝니다. URL 정보를 클릭하시면 해당 사이트로 이동합니다. 또한 The FWA에서는 재미있는 기능도 지원하는데, 위의 그림에서 보이는 ADD TO DOCK 을 클릭하면 잊고 싶지 않는 사이트는 저장을 해줍니다.

스티브잡스가 꾸고 있는 꿈 중 하나는 이 세상에 있는 모든 버튼을 없애버리는 것 입니다.
그 '버튼없애기' 프로젝트는 지금, 아이폰과 아이팟터치 등으로 조금씩 실현이 되어가고 있는데요. 좌표를 하나밖에 인식하지 못하던 종전의 터치스크린 방식에서 좌표 두 개 이상을 인식할 수 있는 특허와 기술을 취득함으로서 터치스크린의 활용가능성은 더욱 무궁무진 해 졌습니다.

터치스크린도 좋고, 버튼도 줄어드는 것도 좋고, 모두모두 좋은데..
MP3 플레이어 같은 기기를 저 처럼 쓰시는 분들에게는 어쩌면 조금 더 불편해지는 U.I.가 되지 않을까? 하는 생각이 듭니다.

보통 출퇴근이나 이동시에 주머니에 MP3를 넣어서 듣는편인데, MP3버튼이 어디에 무엇이 있는지 감으로 알기 때문에, 굳이 MP3를 주머니 밖으로 꺼내지 않고도 원하는 노래를 들을 수 있습니다. 하지만 터치스크린이 된다면 이제는 화면을 무조건 봐야하니까, 주머니에서 MP3플레이어를 넣었다 뺐다 해야하는 불편함이 생기지는 않을까.. 살짝 걱정해봅니다.

그래도 터치스크린 이쁘고 좋습니다.
아이팟터치를 뽐뿌질 할 지, 맥북을 뽐뿌질 할 지.. 고민중입니다^^;

Since. 1998
g-Munk
Photoshop, After Effect, Cubase, Flash, Illurstrator, Premier etc..
http://www.gmunk.com

꽤나 오랫동안 리뉴얼을 하지 않고 있는 사이트임에도, 아직까지 그 건재함을 보여주고 있다. MOTION과 BROADCAST 메뉴는 시간이 많이 흐른 포트폴리오들임에도 질리지 않는 액티브한 모션을 보여준다. 이외에도 곳곳에 클릭꺼리가 많이 숨어있으니 구경해보자.

SkyMarble, 스카이마블님의 개인 포트폴리오
Photoshop, After Effect, 사운드편집툴모름, Flash, Illurstrator, 3DsMax etc..
http://www.skymarble.com/

한 창 플래시를 가지고 놀때, 아답타 형이랑, 진화와 더불어 가장 좋아하던 국내 3대 모션그래퍼였다. 원래는 김진화 군과, 아답타 형도 소개하려 했드나, 두 사람은 군대가고 나서 사이트가 문을 닫아버림.
김진화 군은 일찌감치 중학교때 감각적인 모션그래픽 디자인으로 국제 플래시 컨퍼런스에서 Top 5 파이널리스트에 올라갈 정도로 재능이 있고, 디자인 뿐 아니라, 각종 프로그래밍도 능한 천재. 여튼 그 스카이마블님도 굉장히 모션기술이 뛰어나신 분 중 한 분. 휘황 찬란한 포트폴리오에 주말을 맡겨보자

Since. 1998
SLVN
Photoshop, After Effect, Cubase, Flash, Illurstrator, Pixelizing etc..
http://www.sullivan.pl

이런씩의 디자인은 꽤 구형이 되어버린지 오래지만 그래도 볼때마다 신선하다.
inPixel, Portfoiol 등의 메뉴는 눈을 즐겁게 한다~~