Noto Sans KR, 본고딕, Pretendard 폰트의 비교

Noto Sans KR, 본고딕, Pretendard 폰트의 비교

웹폰트 탄생 이전의 시대웹폰트를 처음 사용하기 시작했을 때 그야말로 신세계를 경험했던 것 같습니다. 굴림체를 벗어날 수 있다니!그때 당시에는 굴림체를 12픽셀이 웹사이트 본문 글꼴의 정석이었습니다. 작은 안내문을 달기 위해서는 11픽셀의 돋움체를 썼습니다. 굴림체는 12픽셀의 크기를 벗어나면 갑자기 모양이 바뀌는 마법을 부렸기 때문입니다. 흑마법 같은 것을요...  맥 OS에서는 자체 폰트가 무척이나 아름다웠기 때문에 큰 문제가 없었습니다. 하지만 윈도우 사용자가 압도적으로 많았습니다. 윈도우에 맑은 고딕체가 기본 탑재가 될 때엔 '이제야 일을 좀 하네'하는 느낌이었습니다. 그 후로 '웹폰트'라는 것이 탄생했지만 한글 폰트는 터무니없이 부족했습니다. 나눔 고딕체가 나왔을 때 와아- 하는 기분, 본 고딕이..

  • topic HTML&CSS
  • · 2024. 9. 13.
  • textsms
유용한 웹 폰트 다운로드 웹사이트 (무료 웹폰트)

유용한 웹 폰트 다운로드 웹사이트 (무료 웹폰트)

웹 폰트 미리 보기, 다운로드 웹사이트 해당 웹사이트에서는 웹폰트를 확인, 검색하고 소스코드를 제공받거나 다운로드할 수 있도록 제공합니다. 또한 원하는 문구를 넣어 테스트가 가능합니다.개인용, 상업용으로 무료로 사용할 수 있는 범위가 다를 수 있으니 확인을 하는 것이 좋습니다.  1. Google Fontshttps://fonts.google.com/ Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com2. 눈누 https://noonnu.cc/ 눈누상업용 무료한글폰트 사이트noonnu.cc   웹 폰트 형식으로 만들어진 아이콘SVG 방식의 아이콘이 없던 ..

  • topic HTML&CSS
  • · 2024. 9. 13.
  • textsms
티스토리에 파비콘 적용시키기

티스토리에 파비콘 적용시키기

티스토리 블로그에 파비콘을 적용시키고 싶다면, 이전에 발행한 파비콘 생성부터 따라해보시길 바랍니다. 2024.09.11 - [HTML&CSS] - 파비콘 만들기 (.ico 파일 변환) 파비콘 만들기 (.ico 파일 변환)파비콘은 브라우저의 탭, 주소창, 북마크 목록에 나타나는 작은 아이콘입니다. 로고나 심볼에서 파행되고 작은 사이즈에서도 인식되도록 디자인됩니다. 파비콘의 일반적인 크기는 16X16 pixel 또flexbox.tistory.com 파비콘 파일을 생성했다면 티스토리 블로그 관리 모드에 접속합니다. (단축키 Q) [관리>블로그] 메뉴에 접속하면 아이콘과 파비콘을 업로드할 수 있는 칸이 보입니다.파비콘 항목에 [불러오기] 버튼을 클릭해서 생성한 .ico 파일을 선택합니다. 파일을 선택하면 [변경..

  • topic HTML&CSS
  • · 2024. 9. 12.
  • textsms
파비콘 만들기 (.ico 파일 변환)

파비콘 만들기 (.ico 파일 변환)

파비콘이란?파비콘은 브라우저의 탭, 주소창, 북마크 목록에 나타나는 작은 아이콘입니다. 로고나 심볼에서 파행되고 작은 사이즈에서도 인식되도록 디자인됩니다. 파비콘의 일반적인 크기는 16X16 pixel 또는 32x32 pixel입니다. 요즘은 스마트폰을 통해 웹에 접속하는 일이 많기 때문에 레티나 화면에서도 화질저하 없이 표시되도록 32픽셀을 추천합니다.  Tip. 배경이 투명한 파비콘을 만들고 싶다면 포토샵에서 배경을 투명(tranparent)으로 이미지 작업을 하고 확장자를 변환하는 방법이 있습니다. 32x32 픽셀: 작업 표시줄 바로가기 아이콘, macOS 파비콘 및 레티나 기반 스마트 기기의 크기96x96 픽셀: 바탕 화면 바로 가기 아이콘 및 Chrome 파비콘 크기180x180 픽셀: Appl..

  • topic HTML&CSS
  • · 2024. 9. 12.
  • textsms
신입 UX 디자이너를 위한 생존 가이드

신입 UX 디자이너를 위한 생존 가이드

UX 디자인은 사용자의 요구와 비즈니스 목표를 모두 만족시키는 균형 잡힌 해결책을 제시하는 창의적인 과정입니다. 처음 이 직무를 시작하게 되면 어떻게 시작해야 할지 막막할 수 있지만, 올바른 방향과 태도로 임하면 성장하는 디자이너가 될 수 있습니다. 이 글에서는 신입 UX 디자이너로서 생존하기 위한 필수 가이드를 제공합니다. 1. 사용자 중심적 사고를 하라UX 디자인의 핵심은 사용자를 이해하는 것입니다. 신입 디자이너로서 첫걸음은 데이터를 기반으로 사용자의 요구, 문제점, 목표를 파악하는 능력을 기르는 것입니다. 사용자 리서치는 활용하세요. 사용자 리서치 방법사용자 인터뷰 : 사용자의 요구와 목표를 명확하게 파악하기 위해 그들과 직접 대화하는 것이 중요합니다. 설문조사 : 넓은 사용자 군을 대상으로 데이..

  • topic UX 디자인
  • · 2024. 9. 12.
  • textsms
VScode 추천 플러그인 (UX디자이너, 퍼블리셔를 위한)

VScode 추천 플러그인 (UX디자이너, 퍼블리셔를 위한)

Emmet 가장 유용하게 사용하던 플러그인이었으나, 현재는 VScode Studio에서 기본적으로 제공하는 기능이 되어 더 이상 설치가 필요 없습니다.https://marketplace.visualstudio.com/items?itemName=FallenMax.mithril-emmet Mithril Emmet - Visual Studio MarketplaceExtension for Visual Studio Code - Support Emmet(zen-coding) syntax for Mithrilmarketplace.visualstudio.com Live Server- 로컬에서 작업할 때 유용합니다. html, css의 변경사항이 새로고침 키를 누르지 않아도 자동으로 새로고침을 시켜줍니다.- 개발언어가 ..

  • topic Tool&작업환경
  • · 2024. 9. 12.
  • textsms