React - Icon / Template

웹앱 UI를 만들다 보면 예쁜 아이콘을 사용해야 할 때가 많은데, 그럴 때마다 일일이 그리거나 이미지를 다운받아 쓰는 것은 너무 번거로운 일입니다. 또한 라이선스가 걸려있는 아이콘 이미지를 함부로 사용할 경우에는 법적 문제가 따를 수 있지요. 따라서 항상 라이선스를 잘 살피고 사용해야 합니다.

 

아이콘

HTML 웹 프로그래밍에 있어서는 Font Awesome이라는 굉장히 유명한 오픈 소스 프로젝트가 있습니다.

Font Awesome

가장 중요한 라이선스 문제는 사이트에 공지된 내용(링크)을 보면, SVG, JS 형식의 아이콘들은 CC BY 4.0, 폰트는 SIL OFL 1.1, 코드는 MIT 라이선스로 제공되고 Attirbution 제약은 제공되는 파일에 이미 포함되어 제공된다고 하네요.

 

w3schools.com에서도 예제를 제공하고 있는데요, 간단한 코드로 아래와 같이 아이콘을 사용할 수 있습니다. 

이 Font Awesome도 React에서 사용할 수 있는데, 그에 대한 설명은 링크로 남기고 추가로 라이브러리 하나 더,

제가 자주 사용하는 React-feather를 소개하겠습니다.

React Feather 역시 MIT 라이선스로 무료 제공되는 오픈소스 React 아이콘 컴포넌트입니다.

feathericons/react-feather

사용법도 아주 간단한데, 설치 후 아래와 같이 그냥 갖다 쓰면 됩니다. 

import React from 'react';
import { Camera } from 'react-feather';
 
const App = () => {
  return <Camera />
};
 
export default App;

오늘 소개한 font-awesome이나 react-feather 외에도 인터넷에 'react icon'으로 검색하면 다른 아이콘 패키지들도 나오는데, CC0, SIL OFL, MIT 등 완전 무료 라이선스가 아닌 라이브러리거나, 라이브러리 내에서도 일부만 유료 라이선스를 거는 경우도 있으니 반드시 라이선스를 잘 살피고 사용해야 합니다.

 

SVG

아이콘이 .png 같은 이미지 파일인 경우도 있지만, 간혹 .svg인 경우도 볼 수 있는데요, SVG(Scalable Vector Graphics)란, 쉽게 말해서 이미지 파일처럼 픽셀 단위로 그리는 것이 아니라, 점에서 점으로 직선을 그리듯이 그리는 기법입니다.

 

그래서 .svg 파일을 텍스트 뷰어로 열어 보면 아래와 같이 알 수 없는 기호와 숫자들로 잔뜩한데, 이것들이 '어디서부터 어디까지 선을 그어라'의 모음이라고 보시면 됩니다.

• <path d="M66.623,439.574h82.594c6.129,0,11.141-5.002,11.141-11.131c0-6.156-5.012-11.154-11.141-11.154H66.623 c-6.127,0-11.145,

아래 링크는 제가 즐겨 사용하는 SVG 사이트인데요, 라이선스 우려로 라이브러리 사용이 꺼려질 때, 아래 사이트의 CC0 라이선스 SVG를 활용해 보시기 바랍니다.

SVG Repo - Free SVG Vectors and Icons

SVG를 React에서 직접 사용하는 방법은 다른 섹션에서 다루도록 하겠습니다.

 

템플릿 웹사이트

간단한 프로젝트를 진행하거나 공부할 때, 비공개 프로젝트를 할 때 좋은 템플릿을 사용하면 일정에 큰 도움이 됩니다. 그런데 막상 찾다 보면 좋은 템플릿은 유료가 대부분이고 무료는 허접해서 못 쓸 정도죠. 그런 와중에 아래 템플릿은 퀄리티가 아주 훌륭한 주옥 같은 무료 템플릿입니다.

 

단, asset에 라이선스가 걸려 있으니 그대로 사용하시면 안됩니다!

위에서 언급한 것처럼 이 경우가 코드는 MIT 라이선스인데 asset은 유료 라이선스인 경우입니다. 코드에 MIT 라이선스만 보고 덜컥 사용했다가는 나중에 asset 라이선스 위배에 걸릴 수 있으니 주의해야 합니다. 

creativetimofficial/blk-design-system-react

저작자 홈페이지에 들어가보면 다른 유료 템플릿도 판매하고 있는데, 일종의 맛보기 차원에서 제공되는 오픈 소스인 것 같습니다. 그럼에도 반응형(디스플레이 사이즈에 맞춰 구성이 자동 변경되는) 웹에 깔끔한 디자인은 무료라곤 믿기지 않을 정도입니다.

 

다시 한 번 주의할 점(아무리 강조해도 지나치지 않을)은 asset에 라이선스가 걸려 있다는 점인데요, 템플릿 자체는 MIT 라이선스인데, 템플릿에 포함된 아이콘이나 폰트는 라이선스가 따로 걸려있으니 절대 함부로 배포하면 안 됩니다. 문제의 라이선스는 src/assets/nucleo-icons.css 상단에 기재돼있는데요, 꼼꼼하게 확인하지 않고 섣불리 배포했다가는 법적 문제에 휘말릴 수 있으니 항상 조심하기 바랍니다.

 

파일 안에 기재된 라이선스

 

 

라이선스의 중요성을 다시 한 번 강조하며 마무리해 봅니다.

크리에이티브 커먼즈 라이선스 - 위키백과, 우리 모두의 백과사전