스케일러블 벡터 그래픽, 또는 SVG(Scalable Vector Graphic)는 이미지의 왜곡이나 손상 없이 다양한 해상도와 픽셀 밀도에 대응이 가능할 뿐만 아니라, 애니메이션과 미디어쿼리 지원 등의 유용한 정보를 포함하고 있는 이미지 포맷입니다. 이 글에서는 SVG를 언제, 어떻게 생성하고 이용할 지와 제작의 워크플로우에 대해서 알아보도록 하겠습니다.본론에 들어가기에 앞서, 두 가지 질문 드리도록 하겠습니다.디자인하는 방법을 알고 계신가요?HTML과 CSS를 작성하는 방법을 알고 계신가요?두 질문에 대답이 모두 ‘NO’라면, ‘YES’라는 대답을 할 수 있는 누군가를 찾아서 함께 읽으시면 서로에게 큰 도움이 될 것입니다. SVG는 무엇일까요?(What is SVG?) 위키피디아에서 스케일러블 벡터 ..

Design News/Design Trend 2014. 1. 7. 15:57

미래의 UI 디자인이 우리 모두를 사이보그로 만들 것인가? -Will the future of UI design turn us all into cyborgs?- Alex M. Chong 님과 Jacky Li 님은 Pivotal Labs의 제품 디자이너입니다. 본 글은 Xtreme Labs’ blog에서 먼저 발행되었으며, 그 후 2013년 10월, Pivotal Labs에 인수되었습니다.컴퓨터에 대한 사전 경험이나, 컴퓨터가 있는 환경에 노출되지 않은 어른들이 데스크톱 컴퓨터의 사용법을 배우는 것은 상당히 혼란스러운 도전이라고 생각됩니다.본래 데스크톱 컴퓨터는 인간이 이해하기 쉽거나 인간의 타고난 본능 등을 고려하여 만들어진 것이 아닙니다 - 데스크톱 컴퓨터는, 이를 사용하기 위하여 정해진 훈련/교육과,..

Design News/Design Trend 2014. 1. 6. 07:17

이 글은 dvncan.com 운영자인 Duncan Graham이 황금비율에 대한 애착의 발로로 최근 으로 정의된 크기와 형태를 적용, 여러 가지 도형을 만들 수 있는 가능성을 제시하는 내용을 담고 있습니다. 몇 주 전, 브루클린에 있을 때 운 좋게도 스콧 캘럼(Scott Kellum)과 함께 점심을 같이 한 적이 있습니다. 그는 최근 'em'으로 정의된 크기와 'CSS' 형태를 적용하여 여러 가지 도형들을 만드는 것에 재미를 붙이고 있다고 말했습니다.나 역시 이 아이디어에 흥미를 느껴, 황금 비율(1.618033988...)과 함께 작업을 해보기 시작했습니다.(건축학을 배운 지 4년이 지났지만, 아직도 황금 비율(golden-ratio)에 대한 애착이 있습니다.)기본 모양을 만드는 것부터 시작하여, 사각..

Design News/Design Trend 2014. 1. 5. 17:35

인터넷에 올라온 첫 번째 웹사이트는 오늘날과 완전히 다른 모양이었고, 디자이너들은 지금도 인터넷과 상호작용하는 새롭고 멋진 방법을 선보이고 있다. 빠르게 변하는 웹 디자인의 최신 동향을 무작정 따라잡기에 앞서, 인터넷 탄생과 함께 시작하는 21세기 웹 디자인의 진화를 살펴보자. 인터넷의 기원은 1969년 미국 국방성 지원으로 미국 네 개의 대학을 연결하기 위한 ‘아르파네트(ARPANET)’다. 처음엔 군사적 목적으로 구축했지만, 프로토콜로 TCP/IP를 채택하면서 일반인을 위한 아르파네트와 군용 ‘밀넷(MILNET)’으로 분리돼 현재의 인터넷 환경 기반을 갖춘다. 1982년에는 인터넷 프로토콜 스위트를 만들고, 사람들에게 인터넷을 통해 일반적인 지침을 제공하는 방법이나 데이터를 수신, 전송하는 패키지로 ..

Design News/Design Column 2014. 1. 3. 07:40

많은 사람의 시각에 비춰보면, 일본은 고요한 불교 정원(젠가든), 평화로운 신전, 그리고 기품있는 다도의 땅입니다. 전통적이면서 현대적인 일본식 건축양식과 책 그리고 잡지들은 세계 디자이너들의 부러움을 사기에 부족함이 없습니다.하지만 사실 아직 몇몇 이유로 이러한 지배력 중 아무것도, 디지털 제품, 특히 대부분 1998년 정도부터 시작된 것으로 보이는 웹사이트에는 스며들고 있지 못하고 있습니다. 웹 브라우저로 여러분이 만날 수 있는 일본의 대부분 유명한 몇 가지 사이트들을 둘러보세요.(구(Goo), 라쿠텐(Rakuten), 요미우리(Yomiuri), 니코니코(NicoNico), 오케이웨이브(OKwave), 앳코스메(@cosme)그리고 등등) 빽빽하고 꽉 끼인 듯한 텍스트작고 저화질의 이미지셀 수 있는 것..

Design News/Design Trend 2014. 1. 2. 15:52

2013년 베스트 무료 디자인 폰트 이것, 새로운 디자인 프로젝트를 위한 준비를... 올 한해도 이제 얼마 남지 않았습니다. 지난 시간 동안 디자이너들에게 시간을 절약할 수 있게 하고, 디자인 산출물을 더욱 돋보이게 도움을 다양한 폰트들이 많이 공유되었는데요.그것 중 올해 주목받고 좋은 반응을 얻었던 무료 디자인 폰트를 한번 정리해 볼 시간이 된 것 같습니다. 디자인도 트렌드가 있듯이 디자인에 사용되는 폰트들도 디자인 트렌드에 발맞춰 나름대로 트렌드를 만드는 것은 불가분의 일이 아닐까 생각이 듭니다.이렇게 정리되어 공유되는 2013년 베스트 무료 폰트자료는 많은 디자이너 여러분이 밝아오는 2014년 새로운 한 해 다양한 디자인 프로젝트를 수행하는 과정에서 조금이나마 도움이 될 수 있기를 기대합니다.그럼 ..

Design Information/Design Fonts 2013. 12. 16. 14:19

화려하고 아름다운 컬러가 인상적인 훌륭한 작품들이 눈길을 사로잡는 포트폴리오 사이트 크리에이티브 민트(Creative Mints)의 마이크(Mike)는 웹을 좋아하고 실무에서도 완성도 높은 디자인으로 잠재력을 발휘하며 풍부한 경험을 쌓아 온 12년 차 체코 프라하 출신 디자이너입니다. 그의 작업 방식의 보편적인 크리에이티브 아티스트와 약간은 남다릅니다. 크리에이티브 디자인을 영감을 하나하나 손끝으로 풀어낸 다음 다시 디지털화하는 스타일인데 스케치 된 작품들을 보면 섬세함과 표현하고자 하는 핵심요소를 돋보이게 하는 탁월한 재주를 가지고 있습니다. 크리에이티브 민트에 소개되는 Mike의 작품들을 보면서 눈여겨봐야 하는 것은 강렬하고 화려함에도 부담감이 없는 컬러 노하우와 오브젝트의 핵심을 드러내는 표현의 테..

Design Information/Designer Interview 2013. 12. 10. 07:16

오늘날 포트폴리오 웹사이트 디자인은 완수해야 할 도전 과정 중의 하나가 되어가고 있습니다. 예를 들어, 디자이너들과 개발자들은 웹사이트의 유용성, 검색 엔진 크롤러의 사용 지침서, 스타일링 그리고 사용자 반응 등을 고려해야 합니다. 가끔씩 최신 기술, 디자인 혹은 테마를 가지고 새로운 웹사이트를 제작하기 위해, 전문가들은 사이트의 기본 기술 몇 가지를 무시할 수밖에 없습니다. 이런 이유의 결과로, 디자인이 잘 된 포트폴리오 웹 사이트이지만 검색 엔진 순위에 오르지 못하기도 합니다.기본적인 가이드라인에 충실한 것은 언제나 문제 되는 부분 없이 더 나은 디자인을 개발하는데 도움을 줍니다. 아래의 몇 가지 나열된 팁들은 여러분의 포트폴리오 웹 사이트를 검색엔진의 순위에서 더 올라갈 수 있도록 도와줄 것입니다...

Design News/Design Trend 2013. 12. 3. 08:02