2020년 한글날을 맞아서 배포된 무료 폰트를 소개합니다. 올해도 귀엽고 개성강한 다양한 폰트가 무료로 배포되었습니다. 빙그레 붕어싸만코 체 빙그레는 2016년부터 폰트 프로젝트로 빙그레체, 따옴체,메로나체 등을 무료로 배포했습니다. 올해 202년의 주인공은 붕어싸만코!! 동글동글한 손글씨 느낌을 담아 귀엽고 재미를 주는 폰트입니다 심볼과 함께 재미있게 사용하세요. 빙그레 따옴체도 활용하기 좋은 폰트입니다. 빙그레 서체 사이트에서 다운받아 사용하세요. http://www.bingfont.co.kr/bingfont.html 배민 을리로10년후체 배달의 민족에서 2020년 배포한 무료 글꼴입니다. 2019년 을지로체에서 10년 후 모습을 상상하며 만들었다는 을.......

웹 디자인, 앱 디자인에 많이 사용하는 아이콘을 쉽게 벡터로 사용하는 방법을 소개합니다.예전에는 딩벳 폰트라고......폰트인데 아이콘 또는 이미지로 된 폰트를 사용했습니다. 그러나 요즘은 웹 폰트 형식으로 벡터 방식의 폰트를 무료로 사용할 수 있는 사이트가 많이 있습니다. 아이콘을 사이즈 늘리고 줄여도 깨지지 않게 벡터 방식으로 만든 아이콘 폰트라 디자인하기에 더욱 수월합니다.1. Font Awesome우선 아이콘 검색합니다. Free를 체크해서 무료 아이콘만 검색할 수 있습니다.① 웹 폰트 방식 - html 코드로 삽입할 경우(Copy Unicode) : 코드를 복사해서 html 파일 안에 넣어 줍니다.② SVG 파일로 다운로드해서 사용할.......

웹 디자인, 앱 디자인에 많이 사용하는 아이콘을 쉽게 벡터로 사용하는 방법을 소개합니다. 예전에는 딩벳 폰트라고......폰트인데 아이콘 또는 이미지로 된 폰트를 사용했습니다. 그러나 요즘은 웹 폰트 형식으로 벡터 방식의 폰트를 무료로 사용할 수 있는 사이트가 많이 있습니다. 아이콘을 사이즈 늘리고 줄여도 깨지지 않게 벡터 방식으로 만든 아이콘 폰트라 디자인하기에 더욱 수월합니다. 1. Font Awesome 우선 아이콘 검색합니다. Free를 체크해서 무료 아이콘만 검색할 수 있습니다. ① 웹 폰트 방식 - html 코드로 삽입할 경우(Copy Unicode) : 코드를 복사해서 html 파일 안에 넣어 줍니다. ② SVG 파일로 다운로드해서 사용할 경우.......

해상도 Resolution는 디바이스에서 이미지가 몇 개의 픽셀이나 도트로 나타내는지 알려주는 것입니다. 픽셀이 많을수록 색상 값이 많이 저장되어 고해상도로 이미지를 표현할 수 있습니다. 디자이너가 사용하는 단위는 픽셀, 개발자가 사용하는 단위는 dp,pt입니다.픽셀(Pixel)픽셀은 화면을 구성하는 최소 단위로 디자이너가 작업하는 포토샵의 툴에서 사용하는 단위입니다. 픽셀마다 색상 정보가 담여있는 절대 단위입니다.포인트(Point)iOS 운영체제에서 사용하는 상대적인 단위입니다. 아이폰 3 이후 레티나 디스플레이를 장착하면서 픽셀을 두 배로 늘려 선명한 화면으로 그래픽을 구현하고 있습니다. 아이폰 4~8 은 2배, 아이폰 X는.......

해상도 Resolution는 디바이스에서 이미지가 몇 개의 픽셀이나 도트로 나타내는지 알려주는 것입니다. 픽셀이 많을수록 색상 값이 많이 저장되어 고해상도로 이미지를 표현할 수 있습니다. 디자이너가 사용하는 단위는 픽셀, 개발자가 사용하는 단위는 dp,pt입니다. 픽셀(Pixel) 픽셀은 화면을 구성하는 최소 단위로 디자이너가 작업하는 포토샵의 툴에서 사용하는 단위입니다. 픽셀마다 색상 정보가 담여있는 절대 단위입니다. 포인트(Point) iOS 운영체제에서 사용하는 상대적인 단위입니다. 아이폰 3 이후 레티나 디스플레이를 장착하면서 픽셀을 두 배로 늘려 선명한 화면으로 그래픽을 구현하고 있습니다. 아이폰 4~8 은 2배, 아이폰 X는 3배.......

그리드를 구성하는 3가지 요소 컬럼 Columns, 거터 Gutter, 마진 Margin을 소개합니다. 전체 레이아웃의 시각적 요소를 통일성 있게 정돈하기 위해서 가이드라인을 충실하게 지키는 것이 좋습니다. 그리드 시스템을 만들 때는 마진 영역 먼저 설정합니다. 구글 머티리얼 가이드에는 모바일일 경우 마진의 기본값을 16dp를 사용하라고 권장하지만 디자이너가 시각적으로 균형 있게 변경해서 사용해도 됩니다. 구글의 머티리얼 디자인 사이트는 모바일뿐만 아니라 웹사이트 디자인할 때도 유용한 정보를 얻고자 엄청나게 들락날락하는 사이트입니다. UI 디자인 입문하시는 분들이 참고하면 좋은 사이트입니다.하단의 링크를 참고해 주세요.Colu.......

그리드를 구성하는 3가지 요소 컬럼 Columns, 거터 Gutter, 마진 Margin을 소개합니다. 전체 레이아웃의 시각적 요소를 통일성 있게 정돈하기 위해서 가이드라인을 충실하게 지키는 것이 좋습니다. 그리드 시스템을 만들 때는 마진 영역 먼저 설정합니다. 구글 머티리얼 가이드에는 모바일일 경우 마진의 기본값을 16dp를 사용하라고 권장하지만 디자이너가 시각적으로 균형 있게 변경해서 사용해도 됩니다. 구글의 머티리얼 디자인 사이트는 모바일뿐만 아니라 웹사이트 디자인할 때도 유용한 정보를 얻고자 엄청나게 들락날락하는 사이트입니다. UI 디자인 입문하시는 분들이 참고하면 좋은 사이트입니다. 하단의 링크를 참고해 주세요. Column.......

프로토타이핑 툴 Figma의 단축키 모음입니다. Figma Help Center에 있는 Window 용 Shortcut을 가져왔습니다.아직은 Figma에 관한 책이 없어서 Figma Help Center 사이트가 참 유용합니다.또는 피그마 프로그램 오픈해서 Ctrl+Shift+? 로 단축키 확인할수 있습니다.Figma 강좌 준비 중입니다. 기대해주세요. UXUI관련 일하시는 분들에게 유용하길 바라며 모두 칼퇴하세요!!!감사합니다.