CSS 코딩 실력(Coding Skill)을 향상하는데 학습적인 방식보다 게임적인 요소가 가미되면 효과가 좋지 않을까 싶다. 최근 CSS 코딩 스킬을 게임 방식을 통해 테스트해볼 수 있는 배틀 방식의 CSS Battle 등장해 개발자와 웹퍼블리셔들의 흥미를 유발하고 있다. CSS Battle은 CSS 스킬을 사용하여 최소한의 코드(Code)로 주어진 대상 이미지를 복제하기 위해 HTML/CSS를 작성하는 것을 목표로 한다. 대상 페이지에서 왼쪽의 편집기 영역에서 코딩을 시작하면 된다. 코드 입력을 시작하면 중간의 출력 영역이 코드 렌더링을 실시간으로 보여준다. 결과물이 우측 목표 이미지와 일치한다고 확신하면 제출 버튼을 눌러 점수를 확인하면 된다. 참고로 CSS Battle이기 때문에 코드에서 JavaS..

Design Information/HTML5 and CSS3 2019. 4. 18. 17:03

완성도 높은 고품질의 다양한 디자인 소스를 손쉽게 구하고 활용할 수 있는 웹 서비스는 수많은 디자이너와 일반인에게 든든한 조력자가 된다.물론, 기존에도 무료 디자인 소스를 제공하는 곳은 많지만 대부분 완성도나 퀄리티가 기대에 미치지 못하는 경우가 많고, 고품질의 경우 유료 콘텐츠로 제공되는 경우가 많다. 오늘 소개하는 인터페이서(Interfacer)는 인터넷 공간에서 활동하는 재능 있는 디자이너와 크리에이터들이 만든 고품질의 무료 디자인 소스를 모른 공간으로 디자이너와 일반인이 디자인 프로젝트에 맞게 자유롭게 활용할 수 있도록 했다.현재 300개 이상의 무료 소스들은 다양한 컬렉션과 웹 템플릿 라이브러리, 아이콘 패키지, 일러스트, 3D, Mockup, 폰트, 전자 상거래, blockchain, 여행 앱..

Design Information/Design Resources 2019. 3. 27. 11:18

이미지로 폰트 이름 찾고 무료 폰트를 활용하는 손쉬운 방법. 무료 인공지능 웹서비스 What Font Is인터넷을 사용하거나 웹 서핑을 하다 보면 멋진 폰트를 만나는 경우가 종종 있지만, 폰트 이름, 무료 폰트 또는 유료 폰트 여부 그리고 다운로드할 수 있는 위치를 아는 방법이 궁금할 때가 있다. 물론 폰트 관련 애플리케이션이나 몇 가지 유료 서비스를 통해 확인할 수 있지만, 과정이 복잡한 예도 있다. 이런 경우 무료 폰트 찾기 웹 서비스인 'What Font Is'를 이용하면 손쉽게 폰트를 찾고 활용할 수 있다. What Font Is는 단순히 폰트 그림을 업로드하거나 해당 폰트 이미지 주소를 입력하면 된다. 강력한 인공 지능 소프트웨어가 450,000가지 이상의 폰트(유료 및 무료 포함)을 검색하여 ..

Design Information/Design Resources 2019. 3. 5. 14:49

타이포그래피를 둘러싼 다양하고 모호한 어휘는 복잡하고 어렵게 보일 수도 있다. 타이포그래피를 전공하지 않은 이상 깊이 있게 학습할 기회는 드물기도 하다. 하지만 기본적인 타이포그래피 용어를 알고 있으면 정보 전달과 소통이 명확하고 빠를 수 있게 된다.아래의 시각적인 인포그래픽을 통해 만나 볼 수 있는 타이포그래피 해부학 20가지 용어만 잘 이해하고 있어도 다른 사람과 일할 때 우위에 있을 뿐만 아니라 더 쉽게 자신의 Font Type에 대한 해석의 문제를 진단할 수 있다.이 인포그래픽은 Visual Interaction Designers를 위한 마케팅 공간인 Toptal이 공동으로 작성한 20가지의 잘 알려지지 않은 타이포그래피 해부학 용어에 대한 정보다. 모든 최고의 Infographics가 마찬가지로..

Design Information/Design Resources 2019. 2. 14. 16:19

수많은 글꼴을 실무에서 접하는 디자이너가 개별 글꼴의 가변성을 파악하고 실효성을 높히는 과정은 예비 디자이너는 물론 경력이 많은 전문 디자이너라도 쉬운 일이 아니다. 또한 소모되는 시간과 비용도 적지 않다. 하지만 그러한 고민을 조금 덜어 줄 해결책이 나왔다. 스위스의 디자인 에이전시 디나모(Dinamo)가 만든 무료 인터렉티브 타입 툴 'Dinamo Dark Room'을 통해 폰트 디자이너와 그래픽 디자이너가 편리하게 유형 및 변수 글꼴을 시험해 볼 수 있다. Dinamo Dark Room 플랫폼을 통해 디자이너는 다양한 글꼴의 기술적 특성을 시험해 봄으로써 사전에 글꼴 적용 후 결함 여부를 판단 할 수 있다. 또한, 'Font Gauntlet'을 사용하여 자신의 가변 글꼴을 'Dark Room'에 업..

Design Information/Design Fonts 2019. 2. 14. 15:32

원하는 크기로 조절하는 이미지 리사이저(Image Resizer) 도구들은 다양하지만, 이미지나 사진을 한 번에 다양한 사이즈로 줄여주는 도구나 웹 서비스는 찾아보기 쉽지 않다.특히 소셜 미디어를 이용하다 보면 영역별로 최적화된 이미지 사이즈가 달라 포토샵이나 다른 이미지 리사이저 도구로 각각의 최적화된 이미지를 만드는 일도 여간 번거롭고 귀찮은 일이 아닐 수 없다.하지만 이제는 이미지 크기 조절에 대한 번거로움을 고민할 필요가 없다. 웹은 물론 소셜 미디어 채널별로 다양한 크기의 이미지를 한 번에 생성해주는 프로모 이미지 리사이즈 서비스를 이용하면 이미지와 사진을 간단하고 빠르게 조절해 활용할 수 있다. 프로모 이미지 리사이저(Promo Image Resizer)는 하나의 이미지를 웹과 소셜미디어 완벽..

Design Information/Design Resources 2019. 2. 1. 10:30

복잡한 CSS 그리드 레이아웃을 시각적으로 쉽고 빠르게 완성하는 CSS Grid Layout 생성기 활용 방법을 살펴보자.모든 디자인 영역에서 그리드 시스템은 중요한 역할을 담당하고 있고 웹디자인에 있어서 그 비중은 더 크다고 볼 수 있다. 그리드는 수평과 수직으로 구성된 디자인의 기본 요소라고 할 수 있다.그리드는 디자인 작업에 일관성을 부여하고 그래픽 요소의 체계적인 배열을 갖추는 데 도움이 된다. 또한, CSS CLASS를 활용해서 웹페이지 레이아웃을 구축하는 행과 열을 제어할 수 있고 그것을 토대로 복잡한 중첩 레이아웃도 어렵지 않게 구축할 수 있다. 이글을 통해 소개하는 css-grid-layout-generator는 기존에 선보인 다양한 그리드 생성기와 달리 더 직관적이고 시각적인 인터페이스로..

Design Information/HTML5 and CSS3 2019. 1. 21. 02:55

이미지 합성을 위해 불필요한 배경을 지우는 과정은 불가피하지만 여간 귀찮거나 손이 많이 가는 일이다. 특히 머릿결과 나무 같은 복잡한 경계가 있는 객체를 추출하려면 그야말로 삽질이 따로 없다.요즘은 기능이 향상된 포토샵이나 다양한 이미지 편집 도구들이 있어 그나마 손쉽게 작업할 수 있다지만, 간단한 작업을 위해 유료 편집 도구를 구매하거나 익숙하지 않은 편집 도구 사용법을 따로 배워야 하는 까닭에 썩 내키지 않는다.만약 누구나 손쉽게 포토샵이나 다른 편집 도구를 이용하지 않고 한 번의 클릭으로 단 5초 만에 깔끔하게 배경을 지울 수 있다면 두 손 들고 환영할 것이다. remove.bg는 인공지능(A.I.) 기반으로 불필요한 이미지 배경을 지우는데 한 번의 클릭으로 결과물을 완성해 주는 무료 서비스다. 흥..

Design Information/Design Resources 2019. 1. 18. 13:20