본문 바로가기
웹디자인(HTMl/CSS/JS)을 온라인으로 배우는 방법 소개 (2016년 기준) HTML5 등장 이후 웹디자인 계에도 많은 변화가 이루어졌고, 현재에도 그 변화는 계속 이어지고 있습니다. 전통적인 웹디자인 구축 방식이었던, 웹디자이너가 웹사이트를 통이미지로 구축한 후 이미지를 잘라서 개발자에게 넘기면, 개발자가 이를 바탕으로 웹사이트를 구축, 데이터베이스에 연결하고 서버에 발행하던 방식에서 이제는 조금 더 작업자간 경계가 모호해지는 쪽으로 흐름이 이어지고 있습니다. 그 단례로 이제는 웹디자이너라고 하면 포토샵은 기본이고 그만큼 CSS 또한 잘 다루는 사람으로 인식이 되는 측면도 있는데요, 자바스크립트 역량에 따라(국내 한정)웹퍼블리셔라는 직책명을 갖기도 합니다. 이번 포스트에서는 시대 웹디자이너의 필수 소유 역량인 HTML/CSS/JS를 온라인으로 배울 수 있는 방법에 대해 간략히 ..
디지털복고주의 디자인? 인스타그램이 윈도우 95 시절에 등장했다면? 윈도우95는 단순 과거 운영체제를 넘어서 문화적 상징 또는 현상으로 자리 매김하고 있는 것으로 보입니다. 최근에는 윈도우95를 웹브라우저에서 런칭하는 시도(URL), 그리고 눈을 영원히 떼지 못하게 하는 윈도우95의 화면보호기(URL) 등 다양한 분야에서 윈도우 95 관련 복고 프로젝트가 진행되고 있습니다. 이러한 트렌드의 일환으로 러시아의 디자이너 Misha Petrick은 인스타그램을 윈도우95에 올리는 시도를 해서 화제가 되고 있습니다.Instagram for Win95는 90년대의 미적 감성을 인스타그램이라는 현재 전세계에서 가장 유명한 앱에 불어 넣는 시도를 한 작은 프로젝트입니다. 아래 이미지들을 통해 윈도우95에 맞게 적절하게 잘 적용된 UI디자인을 확인하실 수 있습니다. 이제는 기억 속에 ..
마스터카드의 새로운 브랜드 로고 디자인 20년 간 변화가 없었던 마스터카드의 로고는 전세계적으로 인지되는 브랜드 요소였습니다. 수 십년 간 두 원이 서로 겹쳐진 형상과 '마스터카드'라는 문구는 신용카드 사용자들에게 친근하게 인식되어져 왔습니다. 소비나 금융에 있어 이 로고가 마치 응당 있어야만 할 것으로 여겨질 정도로 마스터카드의 로고는 친숙함을 지니고 있었습니다. 그런 마스터카드는 이번에 새로운 로고를 공개했고, 디지털매체와 웹매체에서 더욱 쉽고 일관되게 인지가 가능하도록 만들어졌습니다. 이번 리디자인은 큰 변화라기 보다는 두 개의 교차하는 원이라는 기존의 효과적인 속성은 유지하고, 그 위에 작은 변화를 추가하는 식으로 이루어졌습니다. 하지만 이 변화는 결코 작은 작지만은 않아서 이제는 전세계에서 사람들이 더욱 쉽게 마스터카드 브랜드를 인지..
갤럭시S6 목업 템플릿 13종 (PSD, AI) S7이 출시되었지만, 화면 사이즈나 전체적인 디자인이 S6와 유사하며, 이전 모델인 S6의 관련 이미지 자료가 더 많기 때문에 아직도 디자인 작업 시에 매우 유용하게 이용될 수 있는 S6의 목업 템플릿들을 모아서 공유 드리려 합니다. 안드로이드의 표준은 갤럭시와 넥서스로 정리가 되어가는 추세이기 때문에, 갤럭시를 기준으로 안드로이드 모바일 UI디자인을 작업하여도 큰 무리는 없을 것 같습니다. 아래 자료들은 링크를 따라서 해당 페이지에 접속하여 다운로드를 직접 진행해 주셔야 하는 구조임을 참고해 주시기 바랍니다.1. 각도가 다른 갤럭시S6다운로드 : http://creativecrunk.com/samsung-galaxy-s6-angled-psd-mockup/ 2. 갤럭시S6 골드다운로드 : https://..
올림픽 스포츠 아이콘 세트 (45개, EPS, AI, PDF, PNG, SVG) 올해에는 유난히 전세계적으로 스포츠 관련 행사가 많이 열린다고 합니다. 특히 올 8월에는 4년 마다 개최되는 올림픽이 브라질 리우에서 개최될 예정이라고 하는데요, 이 같은 상황에 맞춰 아이콘 제작 디자인 그룹으로 유명한 Icons8에서 올림픽 관련 아이콘 45종을 무료로 배포한다고 합니다. CC3.0 라이선스로서 아이콘의 재판매를 재외한 수정/배포 등이 자유롭습니다. 아이콘 다운로드아이콘 다운로드 경로 : https://www.smashingmagazine.com/2016/07/freebie-olympics-sports-icon-set-45-icons-eps-pdf-png-svg/ Icons8 공식 웹사이트 : https://icons8.com/ 저작권 관련 정보 (License Info.) 원 저작 게..
Jekyll과 Github Pages를 이용해서 간편하게 블로그 구축하기 Github Pages와 Jekyll(DB 필요없는 CMS)를 통해서 무료로 간단히 블로그 구축이 가능하다. 이 문서는 지속적으로 업데이트되는 문서입니다. 참고사이트 참고사이트 github pages 참고사이트 jekyll 참고사이트 jekyll for Windows (1) 참고사이트 jekyll for Windows (2) 레포생성 Github Repo를 생성하도록 한다. 아무 파일이나 생성하여 커밋을 하거나 다른 jekyll 블로그를 클론하도록 한다. Jekyll 설치 jekyll은 깃헙 레포만 활용하여 사용할 수도 있지만, 로컬에 설치하여 테스팅할 수도 있다. 루비 기반의 프로그램이므로 윈도우에서 설치 과정은 조금 번거롭다. 위 참고사이트로 올려 놓은 'jekyll for Windows' 사이트에서..
웹호스팅 관련 정보알아보기 (국내/해외) 웹사이트 개설을 위해서는 서버가 필요하다. 웹호스팅 업체는 많은데, 그 종류에 대해 간략하게 알아 보도록 한다. 국내 - 가비아, CAFE24 등 업체 등이 있으며, 개인/중소기업 규모 업체의 경우 CAFE24 등이 저렴한 제품을 제공한다. 무제한 트래픽, 스토리지 등의 조건을 고려했을 때에는 해외 보다는 비싼 가격이 책정되어있다.- 최소 사양에 대한 설치비, 월 유지비가 저렴한 편이므로 프로젝트 초기 생성 시 CAFE24 등을 활용하면 좋다. 해외 - GoDaddy, Hostgator, Bluehost, DigitalOcean, iPage 등의 업체가 있다.- AWS 또한 웹호스팅 형태의 서비스를 제공하는데 lightsail이라는 이름으로 제공한다.- 전반적으로 무제한 트래픽, 스토리지 등을 제공하며 ..
웹디자인을 쉽게 해줄 7가지 폰트아이콘 소개 *본 포스트는 "SITE-POINT'에 게재된 " CHRIS COYIER"가 쓴 "5 Golden Rules For Mobile Email Design"이라는 포스트를 국문으로 번역하여 더 많은 사람들에게 정보를 알리고자 하는 목적으로 저작된 포스트임을 밝힙니다.*본 포스트는 2012년에 기재된 포스트로서 현 시점에서 내용과 다소 차이가 있을 수 있으나, 현재에도 유용한 정보를 담고 있다고 판단하여 번역하는 내용이니 이에 참고 바랍니다.2012년 초 TNW에서는 폰트아이콘(icon font)의 사용세가 증가함을 보고 드린 바 있습니다. 폰트아이콘에 대해서 아직 잘 모르시는 분들을 위해 설명 드리자면, 과거 딩뱃폰트의 실용적인 형태의 업그레이드 버전이라고 보시면 될 것 같습니다. Pictonic에 설명에 ..