키다리디자이너 썸네일형 리스트형 스타일시트로 애니메이션 효과를 낼 수 있어요 CSS Animation 안녕하세요 키다리디자이너입니다. 오늘은 jQuery나 자바스크립트 등을 이용하지 않고 CSS만으로도 간단한 애니메이션 기능을 구현할 수 있는 방법을 소개해 드리겠습니다. CSS3의 transition을 이용하면 지정된 시간과 속도로 단순히 CSS의 속성을 부드럽게 전환할 수 있는데요, animation은 이것보다 더 구체적이고 다양한 애니메이션 효과를 낼 수 있으니 잘만 사용하면 코딩할 때 개발자에게 아쉬운 소리 할 일도 적어지겠죠? 기본 규칙 CSS애니메이션은 ‘@keyframes 애니메이션이름(식별자)’를 사용하여 애니메이션이 수행되는 동안 정해진 지점에 속성을 줍니다. 그리고 'keyframes'식별자는 해당되는 CSS속성에 직접 영향을 미칩니다. 더 쉽게 말하자면 애니메이션이 10초간 재생되면 1.. 더보기 배달어플 배달의민족 vs 요기요앱 비교해 보기 안녕하세요 키다리디자이너입니다. 오늘은 배달어플 배달의민족과 요기요앱을 비교해 보는 시간을 갖도록 하겠습니다. 많은 배달 어플이 있지만 위 두개가 가장 유명한 것 같고 제가 사용해 본 앱이 둘 뿐이라 둘로 정했습니다. 나중에 다른 어플도 깔아 비교해 보도록 하겠습니다. 테스트환경은 저의 2년9개월된 아이폰4입니다;; 먼저 두 앱의 차이를 본다면 전혀 다른 컨셉과 디자인이 눈에 띕니다. 시장을 먼저 선점한 어플이 있다면 후발주자의 어플들은 그것을 따라하는 경향을 많이 보이는데 이 두 앱은 얼핏 같은 듯 하지만 다른 부분이 많이 있습니다.(저는 어떤 게 먼저인지 모르겠습니다.) 1. 인트로 인트로 화면입니다. 인트로 그래픽에서부터 두 어플은 디자인 컨셉의 차이가 많다는 것을 보여줍니다. 인트로는 앱을 처음 .. 더보기 반응형웹/적응형웹 사이트 레이아웃 살펴보기 안녕하세요 키다리디자이너입니다. 반응형웹사이트를 만들기 위해서는 기획단계부터 기술검토까지 많은 고민이 필요합니다만, 그 중 가장 중요한 것은 어떤 컨텐츠를 어떻게 배치하고 브라우저 사이즈가 변할때마다 그것을 어떻게 재배치할 것인지가 아닐까 합니다. 고정된 레이아웃을 가진 웹사이트와 달리 반응형웹사이트는 레이아웃 변화에 웹사이트의 전략이 담겨야 하니까요. 오늘은 몇가지 반응형웹/적응형웹사이트들의 브라우저 크기에 따른 레이아웃 변화를 살펴보도록 할게요. 이것은 제가 가볍게 살펴본 후 레이아웃에 임의로 번호를 매겨본 것이구요, 그것의 코딩까지는 자세히 살펴보지 않았다는 것을 미리 말씀드립니다. 1. 반응형웹 사이트 반응형웹사이트와 적응형웹사이트의 차이를 미리 말씀드리고 넘어가자면 사이트를 띄운 후 브라우저 가.. 더보기 네이버 심벌 변경과 타 브랜드의 로고 변천사 안녕하세요. 키다리디자이너입니다. 오늘 네이버서비스들의 모바일/PC에서 사용하는 아이콘들을 대대적으로 개편했네요. 기존과 비슷한 디자인을 유지하고 색만 조정한 아이콘도 있고 새로 디자인한 아이콘도 보이는데요, 일단 보시겠습니다. 자세한 사항은 http://naver_diary.blog.me/150187897545 참조하세요 기존 아이콘들에 비해 전체적으로 채도가 높아지고 명도도 밝아진 느낌입니다. 아이티업계의 모든 속성이 그렇지만 웹디자인 또한 외국의 디자인트렌드를 뒤늦게 따라가는 형태를 많이 보였고 최근 MS의 플랫디자인스타일의 디자인과 애플 IOS8의 밝고 화사한 컬러가 많이 보이고 있습니다. 이번 네이버의 아이콘 개편도 그것과 전혀 상관 없는 독자적인 디자인이라고 말할 수는 없을 것입니다. 누가 보.. 더보기 구글 검색엔진에 최적화 하기 안녕하세요 키다리디자이너입니다. 요즘에는 많은 사람들이 네이버를 탈피해 구글에서 정보를 검색하는 경향을 많이 보이고 있습니다. 그만큼 구글의 검색은 더 신뢰도가 높고 정확한 검색 결과를 제공한다는 뜻이기도 합니다. 키다리디자이너도 검색은 거의 구글에서 하고 있습니다. 최근 네이버가 검색엔진을 새로 적용해 검색결과가 다소 깔끔해진 느낌이지만 이전에는 검색결과가 아주 가관이었습니다. 네이버에서 검색을 하면 검색결과는 사이트든 블로그든 카페든 거의 광고성 게시물로 도배가 되어 있어 정보에 대한 신뢰는 추락하고 정말 원하는 정보는 찾기 힘들었죠. 국내 1위 사이트가 이런 수준이니 나머지는 말 할 필요도 없구요. 사실 이 문제는 인터넷 컨텐츠의 모든 것을 광고와 돈벌이의 용도로 사용하는 기업과 카페/블로그 운영자.. 더보기 좋은 웹디자이너가 되는 방법 3부 안녕하세요 키다리디자이너입니다. 웹디자이너가 갖추어야 할 능력으로 미적 감각, 툴을 잘 다루는 능력, 빠른 일처리 등 여러가지 조건이 있는데요 그 많은 조건 중 가장 중요한 것은 마음가짐이 아닐까 합니다. 사실 기술은 연차가 쌓이면 저절로 늘어가는 것이고 미적인 감각 또한 본인 노력에 따라 어느정도 성장시킬 수 있습니다. 하지만 디자인에 대한 마음가짐과 태도는 누군가 가르쳐줄 수도 없는 것이고 경력과는 별개인 것입니다. 오늘은 좋은 웹디자이너가 되는 방법 3부로 디자이너가 가져야할 마음가짐에 대해 써보도록 하겠습니다. 1. 이해하기 디자인을 하기 위해서는 기획자(혹은 오더)가 가진 생각을 먼저 이해할 수 있어야 합니다. 누구나 알고 있고 당연한 소리지만 생각보다 잘 안되는 부분이며 프로젝트 진행 중에 마.. 더보기 알면 편합니다. CSS 선택자 (CSS Selector) 1부 안녕하세요 키다리디자이너입니다. 오늘은 코딩할때 알아두면 편한 CSS의 선택자에 대해 알아보기로 하겠습니다. 선택자(selector)는 말 그대로 CSS에서 지정한 조건에 따라 해당 부분만 따로 속성을 주거나 속성을 제거할 수 있는 코딩 방법입니다.다시 말해 코딩 내용중에 ~~가 있다면 그 부분만 따로 스타일을 지정하거나 없앨 수 있다는 것입니다. 잘 이해가 되지 않아도 괜찮습니다. 아래에 작성된 내용을 하나씩 보면 금방 이해가 되실거에요. 1. > '>'는 특정 태그 아래에 태그나 클래스등을 모두 선택합니다. 아래 코드를 보겠습니다. 이것의 실행 결과입니다. CSS를 정의한 부분에 ul>li가 보이실 것입니다. 바로 이런 것들이 선택자이며 정해진 조건에 따라 코딩에 반영됩니다. ul>li 은 ul태그 .. 더보기 나쁜 직장상사 되기 안녕하세요 키다리디자이너입니다. 우리가 매일 출근하는 회사라는 곳은 다양한 사람이 모여 협력하고 부딪히며, 각자 정해진 직급에 따라 생활하게 됩니다. 이렇게 다양한 성격의 사람들을 만나게 되면서 보고 배울 것이 많은 좋은 사람도 있는 반면 꼴도 보기 싫은 사람도 있죠. 오늘은 디자인이야기를 잠시 접어두고 사회생활하면서 직장 상사로서 가장 최악(쓰레기)의 상사가 되는 방법들을 알아보도록 할게요 1. 얕은 지식으로 무장한 상사 직급이 올라갈수록 아랫 사람에게는 항상 잘난 사람으로 보이고 싶어하게 됩니다. 그러나 본인이 그럴만한 능력이 없을 경우에는 자신의 무능을 철저히 감추려고 다양한 방법으로 자신을 포장합니다. 누군가는 근엄해 보이려고 노력해 아랫사람이 감히 자신에게 대들지 못하도록 하는 방법을 사용하기도.. 더보기 디지털미디어와 스토리텔링 안녕하세요 키다리디자이너입니다. 오늘은 최근 주목을 받고 있는 스토리텔링 뉴스에 대해서 알아보겠습니다. 스토리텔링은 중요한 커뮤니케이션 수단. 커뮤니케이션 수단으로써 스토리텔링은 사람들에게 교육의 수단이나 정보의 제공, 심지어 도덕적 가치를 주입할 수 있는 중요한 도구이자 전하고자 하는 이야기를 돋보이게 하고 효과적으로 전달하기 위한 수단으로써 중요한 역할을 하고 있습니다. 컴퓨터와 디지털기술의 출현으로 인해 시각적인 메시지의 전달 방법이 다방면으로 연구되어 왔고 그것은 모든 매체를 아우르는 중요한 수단으로 자리매김했습니다. 이것은 고전적인 인쇄물에 의한 스토리텔링 기법에서 벗어나 디지털미디어가 가진 가변적이고 상호작용이 가능한 장점을 이용하여 더욱 역동적으로 메시지를 전달할 수 있게 되었습니다. 디지털.. 더보기 웹디자이너의 면접과 이직 안녕하세요. 키다리디자이너입니다. 오늘은 웹디자이너의 이직에 대해 얘기해 볼게요. IT업종에 종사하는 분들이 다른 직군보다 이직이 많다는 사회의 일반적인 시선입니다. 또한 그게 사실이기도 하구요. 그 때문에 IT직종을 잘 모르는 다른 분들이 보시기에 의리없고 끈기 없는 사람들이라는 인식도 은연중에 자리잡은 것 같습니다. 그 이유가 무얼까요. 웹디자이너나 개발자나 IT기술자이며 자신의 기술을 무기로 돈을 버는 사람들입니다. 즉 남 눈치를 보지 않고 본인이 가진 기술로 돈을 주는 곳이면 어디든 일할 수 있는 사람들입니다. 이직에 대해 관대해질 수 밖에 없는 사람들이죠. 역으로 우리 웹디자이너들도 조직이 아닌 결국 자기 자신만을 믿어야 한다는 뜻이기도 합니다. 회사가 본인이 가진 역량에 비해 대우가 좋지 않거.. 더보기 이전 1 2 3 4 5 6 다음
