디자인15 반응형 폰트 TTF와 OTF의 차이는?(윈도우용? 맥용?) 웹사이트에서 폰트를 다운로드하려고 하는데, TTF(트루타입)와 OTF(오픈타입) 2개 버튼이 보입니다. 2개 파일 형식의 차이점을 모른다면 어떤 파일을 다운로드할지 당황하게 됩니다. 그래서 지금부터 TTF와 OTF가 어떤 특징이 있고 무엇을 사용해야 하는지 소개해 드리겠습니다. 무료 폰트 사이트 및 이미지로 폰트 종류 찾는 방법도 확인해 보세요. 2023.04.22 - [디자인/디자인 자료] - 상업적 무료 폰트 사이트 추천 TOP6 2022.10.26 - [디자인/디자인 자료] - 이미지로 폰트 찾기(한글/영문) 목차 TTF와 OTF의 차이는? 폰트도 그래픽과 마찬가지로 비트맵(bitmap) 기반과 벡터(vector) 기반으로 구분할 수 있습니다. 비트맵은 픽셀(pixel) 방식으로 해상도에 따라 폰트.. 2023. 4. 23. 상업적 무료 폰트 사이트 추천 TOP6 폰트는 톤 앤 매너, 핵심 키워드 강조, 본문 가독성 등 다양한 디자인에서 정말 중요한 요소 중 하나입니다. 그런데 저작권 때문에 아무거나 함부로 사용할 수 없습니다. 그래서 지금부터 상업용으로 사용할 수 있는 무표 폰트 사이트를 소개해 드리겠습니다. (유료 폰트도 섞여있기 때문에 무료 폰트인지 라이선스 확인해 주세요) 폰트와 더불어 중요한 요소인 아이콘 및 일러스트를 무료로 다운로드할 수 있는 사이트도 확인해 보세요. 2023.04.15 - [디자인/디자인 자료] - 무료 아이콘 및 일러스트 다운로드 사이트 TOP7 추천 목차 01. 구글 폰트 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.. 2023. 4. 22. 무료 아이콘 및 일러스트 다운로드 사이트 TOP7 추천 블로그, PPT 디자인 및 다양한 디자인 작업 시, 심플하고 플랫한 아이콘 이미지가 필요할 때가 있습니다. 직접 아이콘을 제작해도 되지만 이미 잘 만들어진 아이콘을 그대로 사용하거나 조금 수정해서 사용하는 것이 시간 절약의 도움이 됩니다. 만약 피그마에서 작업을 한다면 벡터 기반의 아이콘을 바로 사용할 수 있는 플러그인을 추천드립니다. 지금부터 무료로 아이콘을 다운로드할 수 있는 사이트 7개를 소개해드리겠습니다. 출처를 표기하지 않아도 개인 및 상업적인 용도가 사용 가능한 곳이 있고 출처를 표기해야지 상업적인 용도로 사용 가능한 사이트들이 있습니다. 또한 유료 리소스들도 있으니, 자세한 라이센스 내용은 개별 사이트에서 확인해 주세요. 목차 아이콘8(ICON8) 무료 아이콘, 클립아트, 사진 및 음악 i.. 2023. 4. 15. Adobe 디자인 AI 프로그램 Firefly 공개 요즘 마이크로소프트가 투자한 OpenAI에서 개발한 ChatGPT가 이슈입니다. 그러다 보니 구글, 메타(구 페이스북) 등 대형 IT 기업에서도 새로운 AI를 발 빠르게 발표하고 있습니다. 그중 포토샵과 애프터이펙트 등 다양한 그래픽 제작 프로그램을 개발하는 기업인 어도비에서도 Adobe Firefly라는 새로운 AI 아트 생성 프로그램을 베타 버전으로 출시했습니다. 지금부터 어도비에서 발표한 Adobe Firefly에 무엇인지 알아보도록 하겠습니다. 목차 Adobe Firefly이란? 새로운 창의적인 생성 AI 프로그램으로 첫 출시에는 이미지와 텍스트 제작에 중점을 두지만 궁극적으로는 사람들이 생각한 아이디어 그대로 재현할 수 있도록 도와줄 것이라고 하네요. 또한 아이데이션, 소통, 디자인 등에 대한 .. 2023. 3. 23. 이미지로 폰트 찾기(한글/영문) 이미지, 포스터, 영상 등을 보다 보면 거기에 사용된 폰트가 무슨 폰트인지 궁금한 경우가 있습니다. 원본 파일이 있으면 무슨 폰트를 사용했는지 바로 확인할 수 있지만 이미지나 영상에 있는 폰트가 무슨 폰트인지 찾기가 쉽지 않습니다. 수많은 폰트를 일일 확인하기는 불가능에 가깝습니다. 그래서 지금부터 이미지로 쉽게 어떤 폰트인지 찾는 방법을 알려드릴게요. 목차 한글 폰트 찾기 01. 산돌구름 폰트로 유명한 산돌 웹사이트에서 이미지로 폰트를 찾을 수 있는 기능을 제공해주고 있습니다. https://www.sandollcloud.com/#schpop 산돌구름 폰트가 필요할 때 언제 어디서나! www.sandollcloud.com:443 폰트 찾는 방법 - 01. 검색어 입력 - 02. 이미지 URL로 검색 -.. 2022. 10. 26. [포토샵] 폰트가 계단 형태로 깨져 보이는 현상 해결 방법 포토샵으로 작업하다보면 평소와 다르게 텍스트가 계단 형태로 지글지글하게 보일 때가 있습니다. 그건 오류가 아니라 텍스트의 안티 앨리어싱(Anti Aliasing) 설정이 'None'으로 설정되었기 때문입니다. 안티 앨리어싱(Anti Aliasing)이란 픽셀의 계단 형태를 제거해서 자연스럽게 보이게하는 기능입니다. 지금부터 안티 앨리어싱(Anti Aliasing) 설정을 변경하는 방법을 알려드리겠습니다. 목차 aa(Anti Aliasing) 설명 None : 없음 Sharp : 선명하게 Crisp : 뚜렷하게 Strong : 강하게 Smooth : 부드럽게 'None'을 제외한 4가지 설정을 하나씩 적용하면서 디자인 작업물에 맞는 설정을 선택하시면 됩니다. 폰트 aa(Anti Aliasing) 설정 01.. 2022. 7. 21. 피그마 프레임(Frame) 사이즈만 변경하는 방법 프레임 사이즈를 조절하면 프레임 안에 있는 Asset들이 Constraints의 영향을 받아서 마음대로 사이즈를 조절이 안됩니다. 프레임 상단 사이즈를 변경하려는데, 하단의 이미지처럼 프레임 Asset들이 상단에 고정돼서 하단 사이즈가 변경됩니다. 지금부터 Constraints 영향을 받지 않고 자유롭게 프레임의 사이즈를 변경하는 방법을 알려드릴게요. 프레임(Frame) 사이즈만 변경하는 방법 "Command(Mac), Ctrl(Windows)"를 누른 상태에서 Frame 사이즈를 변경하는 겁니다. 그럼 하단의 이미지처럼 Frame안에 있는 Asset들을 영향을 받지 않고 사이즈만 변경할 수 있습니다. 이제는 쉽고 간편하게 프레임 사이즈를 변경하세요. 2022.01.04 - [디자인/피그마(Figma)].. 2022. 7. 16. UX UI 디자인 레퍼런스, 벤치마킹 사이트 추천 UX 설계 및 UI 디자인 작업에 들어가기 전에 경쟁 서비스나 같은 분야의 서비스를 벤치마킹하고 분석합니다. 지금부터 제가 주로 확인하는 사이트들을 추천해드릴게요. 목차 01. Mobbin(Mobile Design) https://mobbin.com/browse/ios/apps Mobbin - The world’s largest mobile app design reference library Save hours of UI & UX research with our library of 50,000+ fully searchable mobile app screenshots. mobbin.com Mobbin은 실제로 오픈한 글로벌 서비스의 UI를 확인할 수 있습니다. [장점] - 실제 운영 중인 서비스의 UI 확.. 2022. 7. 9. [일러스트] 이미지 1px 크게 저장되는 문제 해결 방법 UI를 디자인할 때는 Figma를 이용하지만 아이콘 및 디테일한 벡터 작업을 할 때는 일러스트를 사용하고 있습니다. 그런데 작업 후 이미지를 저장하다 보면 간혹 1px씩 크게 저장될 때가 있습니다. 사이즈가 중요한 작업을 진행하다 보면 1px도 문제가 될 수 있습니다. 지금부터 원인 및 해결방법을 설명해드릴게요. 목차 1px 크게 저장되는 원인 바로 작업 중인 대지의 위치 값(좌표)에 문제가 있습니다. 대지의 위치 값(좌표)이 소수점일 경우, 이미지를 저장하면 1px씩 크게 저장됩니다. 해결 방법 01. 작업 중인 대지의 좌표를 확인한다. 02. 대지의 좌표가 소수점이라면 정수 로 수정한다. 03. 수정한 대지를 Export 한다. 2022. 5. 8. [피그마] 단축키 추천 & 팁 피그마로 UI 디자인 작업할 때, 유용하게 사용했던 단축키 및 팁을 소개해드릴게요. 목차 01. 피그마 전체 단축키 확인 디자인 툴의 단축키는 대부분 비슷한 것 같아요. 직접 확인하면서 본인의 작업 스타일에 맞는 단축키를 찾아보세요. 단축키 - Window : Ctrl + Shift + / - OS : Control + Shift + / 02. 전체 레이어 한 번에 닫기 레이어가 다 열려 있으면 작업 중인 레이어를 찾기 힘듭니다. 그래서 저는 작업 중인 레이어만 열고 작업을 하고 있어요. 한 번에 레이어를 닫는 방법을 알려드릴게요. 단축키 - Window : 최상위 레이어를 'Ctrl + A'로 전체 레이어 선택 -> Ctrl를 누른 상태에서 레이어 닫기 - OS : 최상위 레이어를 'Control +.. 2022. 1. 4. 피그마에서 문서 작업 시, 유용한 플러그인 Top5 추천 저는 UI 디자인뿐만 아니라 문서 작업도 피그마로 하고 있어요. 피그마에서 문서 작업할 때, 유용하게 사용할 수 있는 플러그인을 추천드려요. 피그마로 문서 작업 시 장점 - 설치 없이 웹에서 문서 작성 가능 - 오토 레이아웃 및 컴포넌트를 이용한 문서 템플릿 사용 - 문서 공유 및 협업의 편리함 - 문서 버전별 관리 - 다양한 플러그인 사용 목차 01. Glyphs 소개 : 이름 그대로 글리프 플러그인으로 문서 작성 시, 필요한 특수 문자를 바로 찾아서 사용할 수 있습니다. 활용 방법 : 문서를 작성 시 대분류, 소분류 등 문단을 구분할 때 활용하기 좋습니다. 링크 : www.figma.com/community/plugin/849323869157549525/Glyphs Figma - Glyphs | Di.. 2021. 3. 10. [Android] GPU 오버드로 디거깅을 통한 UI 최적화 [GPU 오버드로란?] 오버드로란 앱의 겹쳐진 레이아웃 횟수를 표시해주는 기능입니다. 많은 레이아웃으로 구성된 UI는 픽셀들을 렌더링하는데 부하를 발생시켜 앱이 느려지게 됩니다. 그래서 UI 디자인 시, 레이아웃을 최적화시켜 불필요하게 그려지는 오버드로(픽셀)를 줄여야 합니다. 개발자 옵션에서 GPU 오버드로 디버깅을 활성화하면 몇 개의 레이어로 겹쳐서 UI를 구성했는지 확인할 수 있습니다. - No overdraw - Blue : 1X Overdraw - Green : 2X Overdraw - Pink : 3X Overdraw - Red : 4X+ Overdraw 구글에서는 최대한 Red는 없게 구성하라고 제안하고 있어요. 하지만 여러 앱들을 확인해보면 Red 영역을 많이 확인할 수 있어요. 심지어 구.. 2021. 3. 2. 포토샵 패스파인더 사용하는 법 일러스트의 패스파인더는 사용하기 쉬운데, 포토샵의 패스파인더는 어떻게 사용하는지 모르시는 분들이 많이 있더라고요. 그래서 오늘은 포토샵에서 패스파인더를 사용하는 방법을 알려드릴게요. 목차 01. 패스파인더란 무엇인가? 패스파인더는 벡터 형태의 오브젝트끼리 결합, 빼기, 교차, 제외를 해서 다양한 형태로 만들 수 있는 기능입니다. 패스파인더 종류란? 포토샵과 일러스트의 패스파인더 차이점은? 일러스트는 다른 레이어에 있는 벡터 오브젝트끼리도 패스파인더를 사용할 수 있지만 포토샵은 같은 레이어에 있는 벡터 오브젝트끼리만 패스파인더를 사용할 수 있어요. 즉, 패스파인더를 사용할 레이어들은 Merge된 상태에서 사용할 수 있어요! 02. 패스파인더 사용법 - 1 방법 : 벡터 오브젝트 그린다 > 원하는 패스파인더.. 2021. 2. 26. [안드로이드] 개발자 옵션 - 레이아웃 범위 표시 빠르게 실행하는 방법 앱 UI 벤치마킹할 때, 안드로이드 기능인 레이아웃 범위 표시를 자주 사용합니다. 레이아웃 범위 표시를 실행하면 앱의 UI 간격, 터치영역 등 어떻게 구성되었는지 확인할 수 있어요. 레이아웃 범위 표시를 실행하려면 설정 > 시스템 > 개발자 옵션 > 레이아웃 범위 표시를 탭해서 실행해야 합니다. UI를 확인할 때, 자주 레이아웃 범위 표시를 실행하는데 매번 설정에 들어가서 레이아웃 범위 표시를 실행하는 것이 정말 번거롭더라고요. 그래서 저는 안드로이드의 빠른 설정창에 레이아웃 범위 표시 버튼을 생성해서 사용하고 있어요. 지금부터 빠른 설정창에 버튼을 생성하는 방법을 알려드릴게요. Step.01 개발자 옵션 활성화 기본적으로 설정에 들어가면 개발자 옵션을 활성화할 수 있어요. 그런데 디바이스마다 활성화 방.. 2021. 2. 16. [피그마]Auto layout(오토레이아웃)으로 Underline Tab(언더라인 탭) 만들기 UI 작업을 하다 보면 Underline이 들어간 Tab을 만들게 되는데요. Tab에 들어가는 텍스트(탭명) 길이가 제각각이기 때문에 새로운 것을 만들 때마다 Underline 길이를 조절해야 하는 번거로움이 있어요. 피그마의 Auto layout을 이용하면 텍스트 길이에 맞게 Underline이 자동으로 조절되게 할 수 있어요. 지금부터 제작하는 방법을 설명해드릴게요. 01. Auto layout으로 Text 만들기 1) 텍스트를 Auto layout(shift + A)으로 만들어줍니다.(Auto layout 방향은 상관없습니다) 2) Resizing : Fill container, Fixed height (탭 높이에서 Underline 높이를 뺀 높이로 설정)로 설정해줍니다. 3) Text에 Padd.. 2021. 2. 5. 반응형 이전 1 다음
