본문 바로가기

Technology

 (253)
모션그래픽 프로젝트 가이드 모션그래픽이란? 모션그래픽이란 오디오와 결합하여 움직임이나 시각적 효과를 만들어 내는 디지털 영상 기법입니다. 혹자는 모션그래픽이 애니메이션의 한 종류라고도 하는데요, 포괄적인 의미로 보면 맞는 말입니다. 다만 실질적으로 사람들이 인식하는 용어의 의미는 약간 다릅니다. 우리가 흔히 알고 있는 지브리의 영화나, 토이 스토리 등의 3D 영화와 같이 스토리의 서사가 더 강조된 것을 애니메이션이라고 통상적으로 지칭하고 있고, 모션그래픽은 광고나 뮤직비디오 등의 좀 더 상업적인 장르에 많이 쓰입니다. 또한 컴퓨터 그래픽이라는 것은 동일하지만, 영화나 드라마 등 의 특수 효과는 CG라고 불리고 있습니다. 애니메이션 'Alma' (출처: Rodrigo Blaas on Vimeo.) 모션그래픽 Google Wallet..
뉴스레터 가입양식을 만드는 7가지 방식 뉴스레터는 여전히 고객들과 소통하기 아주 좋은 채널이며, 그만큼 경쟁자도 많습니다. 이 수많은 경쟁자를 이겨내고 더 많은 고객을 유치할 수 있을까요? 우리는 어쩌면 그 해답을 뉴스레터 가입양식에서 찾을 수 있을지도 모릅니다. 오늘은 뉴스레터 가입양식 만드는 방식을 7가지를 소개하고자 합니다. 1.보상을 명확하게 제공하기 당연한 얘기지만 사용자는 뉴스레터를 가입해서 본인이 얻어갈 수 있는 것이 무엇인지 궁금해합니다. 우리는 이 사실을 알면서도 간과할 때가 많은데요. 사람들은 인터넷을 사용하면서 다양한 뉴스레터 가입양식을 만납니다. 자칫 그냥 지나칠 수도 있지만, 만약 뉴스레터 가입 시 첫 구매에 할인을 제공한다면 어떨까요? 아니면 흥미로운 정보가 가득 담겨있는 전자책을 다운받을 수 있게 한다면 어떨까요? ..
웹 그리드시스템을 위한 가이드 흰 종이에 줄을 맞춰 글자를 쓰기란 생각보다 힘이 듭니다. 그렇지만 종이에 일정한 간격의 수평선이 그어져 있다면 보다 쉽고 깔끔하게 글을 쓸 수 있습니다. 우리가 흔히 사용하는 유선노트와 같이, 그리드(grid)는 더 나은 문서를 만들 수 있게 해줍니다. 그리드 시스템을 사용하면 정보에 질서와 구조를 부여할 수 있습니다. 의미 있고 논리적으로 콘텐츠를 구성할 수 있도록 도와줍니다. 편집 디자인에서 주로 다루던 그리드를 이제는 웹과 모바일 앱에서도 당연하게 사용합니다. 그리드 시스템은 어떻게 만들어야 할까요? 영국의 디자이너 Tom Newton이 말하는 그리드 시스템 가이드를 소개합니다. 1. 고려 사항그리드를 고려할 때는 첫 번째로 문제 해결, 두 번째로 미학에 초점을 맞추어야 합니다. 그리드는 요소들의..
UI의 9가지 상태 들어가며 UI디자인은 기존의 정적인 디자인과는 다르게 동적으로 변화하는 디자인입니다. 하나의 컴포넌트(화면에 배치되는 U조각)는 상태나 상황에 따라 여러 가지 형태로 변화합니다. 그리고 그 변화에 따라 다른 데이터를 표현해야 하고, 그 내용에 따라 양식(스타일)도 달라져야 합니다. 그래서 UI디자인은 내가 미쳐 생각하지 못한 상황이 있어 더욱 까다롭고 조심스러운 작업입니다. Vince Speelman이 정리한 UI컴포넌트의 9가지 상태에 대해서 알아보겠습니다. 최근 UI 디자인팀은 화면을 구성하기 전에 컴포넌트(UI조각)을 먼저 디자인합니다. 인터페이스는 그저 잘 구성된 컴포넌트의 모임이라는 것이죠. 이는 사용자를 “불행의 길”로 빠져들게 합니다. 기술 시스템이 아닌 페이지를 만드는 것이기에, 잘못된 디..
웹사이트 디자인에 대한 이해 높이기 웹사이트 디자인을 처음 계획해보거나 리뉴얼을 생각하는 분들께 도움이 되는 글을 모았습니다. 웹디자인의 역사를 포함해 홈페이지 방문자 수를 늘리는 7가지 팁까지, 웹디자인에 대한 다양한 글을 읽고 웹디자인에 대한 이해를 높여보세요. 1. 짤방으로 이해하는 웹 디자인의 역사 웹디자인의 역사는 어떻게 발전해왔을까요? 웹의 암흑기부터 반응형 디자인까지 거쳐온 웹디자인의 발전을 간단한 짤방으로 이해할 수 있습니다. 짤방으로 이해하는 웹 디자인의 역사 (→글 읽기) 2. 움짤로 이해하는 반응형 웹디자인의 9가지 요소 반응형 웹디자인이라는 말 많이 들어보셨을 텐데요. 다양한 디스플레이 환경에 대응할 수 있는 반응형 웹디자인에 대해 정확히 이해할 수 있도록 돕는 글입니다. 아직도 반응형 웹디자인의 개념이 모호하다면 꼭..
작업에 도움을 줄 사소하지만 유용한 포토샵 팁 포토샵은 디자이너뿐만 아니라 많은 사람이 사용하는 adobe사의 프로그램입니다. 그러나 포토샵을 사용하다 보면 저장을 하지 않으면 작업 파일을 날리는 일, 일일이 수작업을 해야 하는 일 등 좀 더 작업을 쉽고 빠르게 안전하게 할 수 없을까? 라는 생각이 듭니다. 특히나 포토샵을 사용하는 사람들에게 수시로 ctrl+s (저장 단축키)를 눌러주는 것은 정말 중요한 일입니다. 포토샵을 조금 더 유용하고 간편하게 쓸 수 있는 자동저장 방법과 포토샵 플러그인을 소개해드리겠습니다. 포토샵 CS6 버전부터는 자동저장(Auto Save) 기능이 생겼습니다. 포토샵을 작업해보신 분들이라면 누구나 공감하는 저장의 중요성. 이에 관해 조금이나마 여러분을 걱정을 덜어줄 기능이 자동저장입니다. 이 자동저장 기능은 사용자가 설정..
디자이너와 디자인회사를 위한 업무 필수앱 5개 슬로워크에서 디자인 업무에 활용하고 있는 모바일앱을 소개합니다. 당장 설치하고 업무에 사용해보세요! (게다가 모두 무료입니다.) 1. CMYK 컬러로 된 pdf를 RGB로 보고 싶다면? Adobe Acrobat Reader 인쇄물 편집을 하다 보면 CMYK로 작업한 파일을 그대로 pdf로 저장해서 메일로 보내는 경우가 있습니다. 실제 인쇄용이라면 당연한 일이지만, 검토용이라면 문제가 있습니다. 보통의 앱에서는 CMYK 컬러를 그대로 보여주기 때문에 아래와 같이 보입니다. 그렇지만 Adobe Acrobat Reader를 사용하면 자동으로 RGB로 변환해서 보여주기 때문에 문제없이 보입니다.가격: 무료다운로드: 아이폰, 안드로이드 2. 이메일의 첨부파일을 모아서 보고 싶다면? Outlook 디자인 업무를 하..
데이터를 잘 써먹을 수 있는 구체적인 방법 한동안 분야를 막론하고 '데이터' 혹은 '빅데이터'의 열풍이 몰아친 적이 있었습니다. 그 열기는 한 김 식었고 그 뒤에 감추어져 있던 거품이 모습을 드러내기도 하였지만, 데이터는 여전히 어떤 '가치'를 창출하는 데 있어 중요한 수단으로 여겨지고 있습니다. 치열한 경쟁 속에서 살아남기 위해서 데이터의 사용은 더욱 필요할 것이며, 기술의 발전은 그러한 적용을 수월하게 만들 것입니다. 과연 데이터 시대에서 우리는 가치 있는 데이터를 잘 사용하고 있을까요? 많은 데이터를 가지고 있는 것 또는 그러한 데이터를 사용하는 행위 자체에 어떤 의미를 부여하며, 데이터 사용의 본질을 잊고 있는 것은 아닐지 고민해 보아야 합니다. 효율적인 의사 결정을 지원하는 정보라는 관점에서 데이터를 잘 활용하기 위해서는 어떻게 해야 하..

티스토리툴바