Design Study

디자인 작업을 할 때 이미지는 빠질 수 없습니다. 디자인에 필요한 이미지를 모두 직접 찍거나 만드는 것은 불가능하고 시간도 많이 드는 만큼 콘셉트에 맞는 이미지를 잘 찾는 것도 능력입니다. 무료로 사용할 수 있으면 더욱 좋겠지요. 상업용으로 이용 가능한 무료 이미지를 제공하는 사이트들을 소개합니다. 1. Pexels 한글 검색 가능합니다. 사진과 동영상 자료를 받을 수 있습니다. https://www.pexels.com/ 2. Pxhere 한글 검색 가능합니다. 웹/Android/iOS 규격에 맞는 다양한 사이즈로 이미지를 다운받을 수 있습니다. 로그인이 필요합니다. https://pxhere.com/ 이미지 검색 & 무료 이미지 - PxHere pxhere.com 3. Pixabay 사진이 많고 한글로..

공인인증서가 10일부터 폐지되고 민간 전자서명이 사용됩니다. 복잡한 비밀번호 없이 생체인증과 간편 비밀번호(PIN)로 인증이 가능해집니다. 공인인증서 폐지에 대비해 카카오, 네이버, 토스 등 여러 기업이 인증 서비스를 제공하고 있습니다. 카카오, 네이버, 토스의 인증 서비스에 등록해놨는데 영문+숫자+특수문자를 길게 입력해야 했던 기존 공인인증서에 비해 지문만 찍거나 6자리 pin번호만 입력하면 인증이 되니 인증시간도 훨씬 단축되고 편하다는 것을 체감할 수 있었습니다. 1. 카카오 인증 카카오의 인증 서비스는 카카오톡에서 들어가는 방법과 카카오 페이 앱을 통에 접근하는 방법 2가지가 있습니다. 카카오 모바일 교통카드 메뉴에 접속할 때도 느꼈지만 카카오가 제공하는 기능이 워낙 많다보니 카카오톡에서 어떤 기능..

카카오톡에서 교통카드 기능을 지원합니다. 카카오톡 앱에서 모바일 교통카드를 간단하게 발급받을 수 있습니다. 폰의 잠금을 풀지 않고 폰 화면만 켜져 있는 상태로 사용 가능하기 때문에 아주 편리합니다. 1. 카카오 모바일 교통카드 발급 카카오톡에서 [ 더보기 - 결제 - 지하철 모양 아이콘 ] 을 누르면 모바일 교통카드 메뉴로 들어갈 수 있습니다. 교통카드 메뉴를 찾는 것이 좀 복잡한데 한 번 등록해두면 다시 들어갈 일이 잘 없지만 더 간편하게 교통카드 메뉴로 접근할 수 있으면 좋겠다는 아쉬움이 있습니다. 2. 카카오 모바일 교통카드 이상 발생 카카오 모바일 교통카드를 잘 사용하던 어느날 지하철 하차를 찍는데 카드가 인식이 되지 않는 일이 생겼습니다. 지하철 직원분과 사무실에 들어가 기계로 확인해본 결과 제..

디자인할 때 가장 어려운 것이 텍스트가 아닌가 합니다. 텍스트의 배치나 폰트, 굵기, 사이즈 등 미묘한 차이에서 디자인의 퀄리티가 달라지니까요. 수많은 폰트들 중에서 디자인에 어울리는 폰트를 고르는 것도 일인데 고른 폰트가 막상 디자인에 사용했을 때 어울리지 않는 경우가 많습니다. 미리 해당 폰트를 어떤 식으로 사용하는 것이 좋은지 알 수 있다면 정말 좋겠죠. Fonts in use가 바로 그런 곳입니다. 영문 폰트만 지원한다는 게 아쉽지만.. 폰트의 다양한 활용법을 알 수 있어 구경하는 재미가 있습니다. 1. Fonts in use https://fontsinuse.com/typefaces/4869/arial Arial in use Type Designers: Patricia Saunders, Robi..

광고배너를 만들다 보면 사이트마다 이미지 용량 제한이 있습니다. 한 번에 사이즈별 이미지 용량을 조절해야 할 때 이미지를 압축해주는 사이트를 이용하면 편합니다. 1. Compressjpeg https://compressjpeg.com/ko/ 온라인으로 JPG 이미지들을 압축하기 JPEG 이미지들과 사진들을 압축해, 웹페이지에 올리거나, 소셜 네트워크 또는 이메일을 통해 공유할 수 있습니다. compressjpeg.com 이미지별로 압축 퀄리티를 조절 할 수 있어 가장 많이 이용하는 사이트입니다. 기본적으로 세팅되는 압축값 말고 세부적으로 압축률을 조절할 수 있습니다. 1. 사이트에 올려놓은 이미지를 클릭하면 [모두 다운로드] 버튼 아래에 해당 이미지가 크게 뜹니다. 2. 이미지 옆 슬라이더를 이용해 압축..

뉴모피즘(Neumorphism) 디자인은 디자인 커뮤니티 Dribble의 디자이너 Alexander Plyuto로 부터 시작됐습니다. 뉴모피즘 스타일은 그림자와 빛으로 요소와 배경을 구분하여 부드러운 느낌을 주는 것이 특징입니다. 이런 특징은 접근성 측면에서는 단점이 되기도 하는데 대비가 약해 배경과 요소의 구분을 어렵게 하기 때문입니다. 그렇다고 대비를 강하게 주면 뉴모피즘 스타일의 특징인 부드러움이 사라져버립니다. 플랫 디자인이 주류를 이루며 디자인의 개성이 사라지고 있는 상황에서 뉴모피즘 스타일은 새로운 느낌을 주기 때문에 많은 디자이너들이 관심을 주고 있는 것 같습니다. 뉴모피즘 스타일을 시도해볼 때 도움이 되는 사이트들을 모아봤습니다. 1. 뉴모피즘 디자인 세팅값 Neumorphism UI Tr..

npm install --save-dev gulp gulp-postcss gulp-sourcemaps autoprefixer browser-sync cssnano gulpfile.js var gulp = require("gulp"), sass = require("gulp-sass"), postcss = require("gulp-postcss"), autoprefixer = require("autoprefixer"), cssnano = require("cssnano"), sourcemaps = require("gulp-sourcemaps"); var browserSync = require("browser-sync").create(); var paths = { styles: { //scss 파일 위치 src..

1. Favicon Generator 260x260이상(최소 70x70)의 PNG, JPG, SVG 등 이미지를 업로드하면 파비콘을 만들 수 있다. https://realfavicongenerator.net/ Favicon Generator for perfect icons on all browsers The ultimate favicon generator. Design your icons platform per platform and make them look great everywhere. Including in Google results pages. realfavicongenerator.net 옵션들을 선택하고 [Generate your Favicons and HTML code] 버튼을 누르면 파비콘..