본문 바로가기

키다리디자이너/소소한 강좌

웹사이트를 디자인 하기 전 고민해야 될 것들 안녕하세요 키다리디자이너입니다. 2016년 새해가 밝았네요. 올해는 인터넷/소프트웨어 산업이 많이 발전하길 기원해 봅니다. :-) 하나의 웹사이트를 디자인하기 위해서 웹디자이너는 어떤 것들을 고민해야 할까요? 막연히 기획서를 보며 고민하거나 디자인 작업을 하는 도중 고민하는 것보다는 디자인에 대한 계획을 대략적이나마 먼저 세우고 디자인을 시작하는 편이 훨씬 좋을 것입니다. 오늘은 웹디자이너가 사이트를 디자인 하기 전 고민해야 될 것들에 대해 알아보겠습니다. 1. 웹사이트의 타겟 디자이너는 먼저 현재 기획하는 웹사이트의 주요 타겟(사용자)을 파악한 후 그에 따른 사용성을 분석해 봐야 합니다. 이것은 UX를 고민하는 큰 맥락이기도 한데요, UX를 어렵게 생각할 필요는 없습니다. 타겟이 정해졌다면 그들이 이제.. 더보기
웹용 팝업 디자인 어떻게 해야 할까? 두번째 안녕하세요 키다리디자이너입니다. 오늘은 이전 포스트에 이어 웹용 팝업 디자인하기 두번째 포스트를 써보도록 하겠습니다. 앞으로도 다양한 디자인 스타일을 넣은 디자인 포스트를 써보도록 노력 하겠습니다 ㅎㅎ 자 오늘도 우리에게 이따위 성의 없는 기획서가 도착했습니다. 이것만 딱 보고 어떻게 만들지 바로 감이 오시나요? 그렇다면 당신은 디자인의 달인의 경지에 오르셨으니 이 글을 읽지 말고 살포시 뒤로가기를 눌러 주시기 바랍니다... 농담이구요.. 내용을 읽어보니 '스타벅스 커피'라는 아주 좋은 소재를 제시하고 있습니다. 그렇다면 여기서 디자인의 반은 끝난 겁니다.(진짜로..) 왜냐면 스타벅스 커피를 디자인 소재로 사용하면 되니까요. 키다리디자이너는 이렇게 디자인 소재를 명확히 제시해 주는 기획서가 참 좋습니다... 더보기
느낌 있는 온라인 배너 디자인하기 안녕하세요 키다리디자이너입니다. 나른한 일요일 오후네요. 아무 것도 하기 싫고 자꾸 침대에 눕고만 싶어지는 계절입니다. 이런 날에 키다리디자이너는 커피 한잔에 케익한조각과 함께 케익처럼 달달한 음악을 들으며 잠시 된장남이 되어 봅니다. 이런 좋은 가을날 모니터와 스마트폰에게 시간을 뺏기는 것은 너무 불행한 것 같아요~ 여러분들도 잠시 여유를 가져 보세요^^ 오늘은 지난시간 웹용 팝업만들기에 이어 배너를 만들어 보는 시간을 가져볼게요 사실 웹용 배너같은 작업은 웹디자이너로서 가장 기본적이고 쉬운 일이기도 하죠. 그 말은 곧 작업자의 가감없는 진짜 디자인실력을 가늠하는 계기가 되기도 합니다. 그래서 키다리디자이너는 새로운 웹디자이너와 일하 때에는 반드시 배너 작업부터 시켜보곤 합니다. 경력이나 실력에 따라 .. 더보기
웹용 팝업 디자인 어떻게 해야 할까? 안녕하세요 정말 오랫만에 블로그에 글을 쓰게 되네요. 오늘은 초심자를 위한 팝업 디자인 강좌 하나를 써볼까 합니다. 웹디자이너로 일을 하게 되면 어떤 회사를 다니던 웹용 배너 혹은 팝업을 디자인 할 일이 정말 많아요. 사실 이것들은 업무량도 많지 않으면서 기술적인 요소가 적은 단순 디자인 작업이기 때문에 업무적 부담감이 크지는 않은 작업이기도 합니다. 하지만 이 간단할 것 같은 디자인 작업이 본의아니게 적게는 반나절 길게는 하루 이상 시간의 시간을 잡아먹은 경험 많이들 있으실 것으로 보입니다. 그리고 마케팅(영업)을 위한 메시지를 작은 공간에 함축적으로 담아야 하는 작업이기에 퀄리티와 함께 광고효과를 최대로 내기 위해 디자인적인 고심을 많이 하게 만들기도 합니다. 특히나 초심자의 경우에는 더욱 어려울 것.. 더보기
안드로이드앱 디자인을 위한 나인패치(9patch) 이미지를 만들어 보자. 안녕하세요 키다리디자이너입니다. 오늘은 나인패치(9 patch)이미지에 대해 포스팅 할게요. 나인패치이미지란 안드로이드 환경에서만 사용하는 특수한 이미지 형식입니다.(거의 안드로이드 앱을 만들때 사용됩니다.) 이미지를 늘릴 때 늘어날 부분을 따로 지정할 수 있구요 그 안에 들어갈 내용에 대한 영역을 지정할 수도 있어요. 예를 들어 볼게요. 위와 같은 말풍선 이미지를 일반적인 방법으로 늘릴 경우 위처럼 보기 싫게 늘어나게 됩니다. 어떤가요? 두번째 이미지가 자연스럽게 가운데 부분만 늘어나서 더 보기가 좋죠 나인패치는 이런 특수한 경우를 위한 포맷입니다. 나인패치 이미지는 이런 형태로 만들어져 있습니다. 윗쪽과 왼쪽에는 1px의 검정 라인으로 늘어날 부분을 지정하고 오른쪽과 아랫쪽에는 마찬가지로 검정 라인으.. 더보기
스타일시트로 애니메이션 효과를 낼 수 있어요 CSS Animation 안녕하세요 키다리디자이너입니다. 오늘은 jQuery나 자바스크립트 등을 이용하지 않고 CSS만으로도 간단한 애니메이션 기능을 구현할 수 있는 방법을 소개해 드리겠습니다. CSS3의 transition을 이용하면 지정된 시간과 속도로 단순히 CSS의 속성을 부드럽게 전환할 수 있는데요, animation은 이것보다 더 구체적이고 다양한 애니메이션 효과를 낼 수 있으니 잘만 사용하면 코딩할 때 개발자에게 아쉬운 소리 할 일도 적어지겠죠? 기본 규칙 CSS애니메이션은 ‘@keyframes 애니메이션이름(식별자)’를 사용하여 애니메이션이 수행되는 동안 정해진 지점에 속성을 줍니다. 그리고 'keyframes'식별자는 해당되는 CSS속성에 직접 영향을 미칩니다. 더 쉽게 말하자면 애니메이션이 10초간 재생되면 1.. 더보기
반응형웹/적응형웹 사이트 레이아웃 살펴보기 안녕하세요 키다리디자이너입니다. 반응형웹사이트를 만들기 위해서는 기획단계부터 기술검토까지 많은 고민이 필요합니다만, 그 중 가장 중요한 것은 어떤 컨텐츠를 어떻게 배치하고 브라우저 사이즈가 변할때마다 그것을 어떻게 재배치할 것인지가 아닐까 합니다. 고정된 레이아웃을 가진 웹사이트와 달리 반응형웹사이트는 레이아웃 변화에 웹사이트의 전략이 담겨야 하니까요. 오늘은 몇가지 반응형웹/적응형웹사이트들의 브라우저 크기에 따른 레이아웃 변화를 살펴보도록 할게요. 이것은 제가 가볍게 살펴본 후 레이아웃에 임의로 번호를 매겨본 것이구요, 그것의 코딩까지는 자세히 살펴보지 않았다는 것을 미리 말씀드립니다. 1. 반응형웹 사이트 반응형웹사이트와 적응형웹사이트의 차이를 미리 말씀드리고 넘어가자면 사이트를 띄운 후 브라우저 가.. 더보기
구글 검색엔진에 최적화 하기 안녕하세요 키다리디자이너입니다. 요즘에는 많은 사람들이 네이버를 탈피해 구글에서 정보를 검색하는 경향을 많이 보이고 있습니다. 그만큼 구글의 검색은 더 신뢰도가 높고 정확한 검색 결과를 제공한다는 뜻이기도 합니다. 키다리디자이너도 검색은 거의 구글에서 하고 있습니다. 최근 네이버가 검색엔진을 새로 적용해 검색결과가 다소 깔끔해진 느낌이지만 이전에는 검색결과가 아주 가관이었습니다. 네이버에서 검색을 하면 검색결과는 사이트든 블로그든 카페든 거의 광고성 게시물로 도배가 되어 있어 정보에 대한 신뢰는 추락하고 정말 원하는 정보는 찾기 힘들었죠. 국내 1위 사이트가 이런 수준이니 나머지는 말 할 필요도 없구요. 사실 이 문제는 인터넷 컨텐츠의 모든 것을 광고와 돈벌이의 용도로 사용하는 기업과 카페/블로그 운영자.. 더보기
알면 편합니다. CSS 선택자 (CSS Selector) 1부 안녕하세요 키다리디자이너입니다. 오늘은 코딩할때 알아두면 편한 CSS의 선택자에 대해 알아보기로 하겠습니다. 선택자(selector)는 말 그대로 CSS에서 지정한 조건에 따라 해당 부분만 따로 속성을 주거나 속성을 제거할 수 있는 코딩 방법입니다.다시 말해 코딩 내용중에 ~~가 있다면 그 부분만 따로 스타일을 지정하거나 없앨 수 있다는 것입니다. 잘 이해가 되지 않아도 괜찮습니다. 아래에 작성된 내용을 하나씩 보면 금방 이해가 되실거에요. 1. > '>'는 특정 태그 아래에 태그나 클래스등을 모두 선택합니다. 아래 코드를 보겠습니다. 이것의 실행 결과입니다. CSS를 정의한 부분에 ul>li가 보이실 것입니다. 바로 이런 것들이 선택자이며 정해진 조건에 따라 코딩에 반영됩니다. ul>li 은 ul태그 .. 더보기
모바일사이트를 디자인할 때 알아야 할 것들 1부 안녕하세요 키다리디자이너입니다. 요즘은 웹디자인을 하며 피씨 홈페이지보다 모바일 사이트나 앱을 만들어야 하는 일이 아주 많아졌습니다. 키다리디자이너도 어쩌다 보니 피씨전용 홈페이지를 만든게 상당히 오래된 것 같습니다. 최근 2년 사이에 피씨 전용 홈페이지를 만든 것은 ERP나 CMS같은 사내 데이터관리 사이트 정도였으니까요. 그도 그럴 것이 이제 대부분의 회사들이 피씨사이트보다 모바일에서 수익원을 창출하려고 하기 떄문이 아닐까 합니다. 그만큼 이제 피씨쪽은 별볼일 없고 모바일이 대세라는 인식이 지배적인 것 같습니다. 키다리디자이너는 이 모바일만이 정답이라고 생각하지는 않지만 어느정도 동의는 합니다. 아마 지금은 피씨와 모바일간의 타협점을 찾아가는 과정이 아닐까 합니다. 자 이제 본론으로 들어가서 모바일디.. 더보기

티스토리툴바