[React] 폰트와 아이콘

목차

React에서 폰트와 아이콘 사용하기: UI를 더욱 매력적으로 만드는 방법

안녕하세요, 모던 웹 UI/UX 디자인에 관심이 많은 개발자 여러분! 오늘은 React 애플리케이션에서 폰트와 아이콘을 효과적으로 사용하는 방법에 대해 알아보겠습니다. 좋은 폰트와 아이콘은 사용자 경험을 크게 향상시킬 수 있으며, 애플리케이션의 전반적인 디자인 품질을 높이는 데 중요한 역할을 합니다. 이 포스트를 통해 여러분의 프로젝트에 적합한 폰트와 아이콘을 어떻게 선택하고 적용할 수 있는지 배워보겠습니다.

---

폰트 사용하기

1. 웹 폰트 추가하기

React 프로젝트에서 웹 폰트를 사용하는 가장 간단한 방법은 Google Fonts와 같은 서비스를 사용하는 것입니다. 원하는 폰트를 선택하고, 제공되는 링크를 애플리케이션의 HTML 또는 CSS 파일에 추가하면 됩니다.

<!-- index.html에 추가 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

CSS에서 폰트 사용하기:

/* App.css에 추가 */
body {
  font-family: 'Roboto', sans-serif;
}

2. 로컬 폰트 파일 사용하기

프로젝트에 폰트 파일을 직접 다운로드하여 사용할 수도 있습니다. 이 방법은 인터넷 연결에 의존하지 않고, 폰트 로딩 시간을 단축할 수 있습니다.

/* App.css에 추가 */
@font-face {
  font-family: 'MyFont';
  src: url('./fonts/MyFont.woff2') format('woff2');
}

body {
  font-family: 'MyFont', sans-serif;
}

 

아이콘 사용하기

1. 아이콘 폰트

아이콘 폰트는 간편하게 다양한 아이콘을 웹 페이지에 추가할 수 있는 방법입니다. 대표적으로 FontAwesome와 같은 서비스를 사용할 수 있습니다.

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

React 컴포넌트에서 아이콘 사용하기:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

function App() {
  return <FontAwesomeIcon icon={faCoffee} />;
}

2. SVG 아이콘

SVG 아이콘은 확장성이 좋고, CSS를 통해 쉽게 스타일링할 수 있습니다. SVG 파일을 직접 다운로드 받아 사용하거나, React 컴포넌트 형태로 변환하여 사용할 수 있습니다.

SVG를 컴포넌트로 변환하기:

import { ReactComponent as Logo } from './logo.svg';

function App() {
  return <Logo />;
}

 

마무리하며...

좋은 폰트와 아이콘은 애플리케이션의 전반적인 외관과 사용자 경험을 크게 개선할 수 있습니다. React에서 폰트와 아이콘을 적절히 사용하여, 보다 전문적이고 매력적인 UI를 구성해 보세요. 이러한 요소들을 통해 애플리케이션의 전문성과 완성도를 높일 수 있습니다.

---

Reference:

Browse Fonts - Google Fonts

 

Font Awesome