웹디자인 지식4 [웹디자인 / 폰트] 웹디자인시 폰트는 어떻게 해야 할까? 웹사이트나 앱을 들어가면 정말 많은 정보가 한번에 모여 있는 것을 볼 수 있다.만약 모든 글자들이 같은 크기, 같은 색상, 같은 모양으로 모여 있다면 어떨까?아마, 정보가 너무 많아서 어디서부터 뭘 봐야할지 알 수 없게 될 것이다. 이를 방지하기 위해, 글자의 크기와 대비 등 여러 방법으로 계층을 나누어 독자의 시선을 유도하는 것이다.이러한 계층을 나누는 방법을 타이포그래피, 편집디자인 에서 찾아 볼 수 있었다. 타이포그래피 계층이란?타이포그래피 계층(Typography Hierarchy)은 텍스트의 정보 구조를 시각적으로 구분해 독자가 어떤 정보를 먼저 일고, 어떻게 이해할지 자연스럽게 유도하는 디자인 기법이다.쉽게 말하면, 중요한 내용을 더 눈에 띄게, 덜 중요한 내용은 작고 덜 튀게 표현해서 콘텐츠.. 2025. 4. 7. [ 웹디자인 ] 아이콘 " 목차 "">" 목차 " 01. 아이콘 사이즈아이콘 사이즈는 구글 머터리얼 가이드에 따르면 18px, 24px, 36px, 48px의 사이즈로 각각 만들어 사용하는 것을 추천한다.가장 많이 사용하는 사이즈는 24px 이며, 16의 폰트를 쓸 때 가장 잘 어울린다고한다. 02. 아이콘 만들기18px * 18px 의 경우 여백 1px24px * 24px 의 경우 여백 2px36px * 36px 의 경우 여백 3px48px * 48px 의 경우 여백 4px아이콘을 만들 때, 보통 원하는 사이즈에 1~4px 정도의 여백을 주어 작업해야한다.여백을 주지 않으면 아이콘의 끝이 잘릴 위험이 크기 때문이다. 03. 비트맵과 백터포토샵 = 비트맵 형식 = 픽셀(px)일러스트 = 백터 형식 = 앵커 포인트(data)비.. 2025. 3. 25. [웹디자인] 폰트는 어떻게 하면 좋을까? " 목차 "">" 목차 "01. 윈도우와 맥의 기본 운영체제 폰트윈도우 : 돋움, 맑은 고딕맥 : Apple SD Neo 고딕02. 폰트 크키본문 : 14 ~ 17px최소 폰트 : 10px 이상Chrominum 계열 브라우저(크롬, 엣지, 오페라 등)는 기본적으로 가독성을 위해 10px 이하 폰트를 강제로 키워서 보여준다. Firefox 는 개발자 설정 그래도 렌더링 하는 경향이 강하지만 Safari 같은 경우 데스크탑에서는 대부분 설정한 폰트대로 보이지만 모바일에서는 작은 글씨를 확대하는 경우가 존재한다.웹 접근성(가독성) 측면에서도 대부분의 가이드라인에서는 12px 이상을 권장한다.만약, 강제로 작은 글씨로 만들고 싶다면 transform: scale() 을 사용하거나, -webkit-text-siz.. 2025. 3. 25. [웹디자인] 브라우저, 해상도, dp/pt/px, mdpi/xhdpi/..., 이미지 크기 " 목차 "">" 목차 " 01. 사이트 로딩속도 체크3G 환경에서 체크. 사이트 로딩속도가 10초 이상이 되면 고객 이탈률이 급격히 높아진다.( 해외에서는 5초내외, 우리나라는 1-2초 내외면 최고 ) 02. 브라우저 점유율 (2024.12 기준)크롬 54.3%삼성전자 인터넷 16%애플 사파리 14%마이크로소프트 엣지 7.18%네이버 웨일 6.71%03. PPI, DPIPPI(Pixels Per Inch) : 1인치(2.54cm) 당 픽셀 수, 디지털 화면에 주로 쓰임DPI(Dots Per Inch) : 1인치 당 점(dot) 수, 인쇄물 출력에 주로 쓰임PPI와 DPI는 모두 화면이나 인쇄물의 '해상도'와 관련된 단위이다.PPI는 디스플레이의 선명도를 의미한다.72ppi 는 옛날 웹 기준의 저해상도,.. 2025. 3. 25. 이전 1 다음
