이모지로 웹 페이지를 꾸미기

대회 홍보용 웹 페이지를 만들던 중 페이지를 이쁘게 디자인하기 위해서 아이콘을 사용하고 싶었다.
그래서 내가 처음 사용했던 방법은 react-icons를 사용하는 것이었다.
react-icons에 많은 icon이 존재하지만 맘에 드는 아이콘이 없어서 고민하다가 이모 지라는 것을 알게 되었다!
우리가 핸드폰에서 많이 사용하는 자그마한 이모티콘들을 이모지라고 부르는데 😄 이러한 친구들을 그냥 복사 붙여 넣기 하거나 html에 이모지 특수문자 코드를 입력하면 된다.

 

https://snskeyboard.com/emoji/
이 사이트에서 이모지를 찾아서 사용했습니다.

나는 vscode에서 코딩 언어로 typescript를 사용했는데 그냥 이모지 맘에 드는 걸 클릭해서 복사를 하고, vscode에 붙여 넣기를 하면 자동으로 주입이 되었다.

vscode에서 사용하면 다음과 같이 적용된다. SubTitle 컴포넌트의 title의 type은 string이었는데 잘 주입되는 것을 보니, 이모지의 type은 string은 우선 잘 지원이 되는 것 같다.

 

이모지가 화면에 띄워지는 모습이다. 뒤 string과 font-size가 맞춰져서 나오는 것이 편리했다. 주의하면 좋은 점은 어떠한 이모지는 색상 적용이 된다는 점이다. 웬만한 이모지는 색상 적용이 되지 않았는데 가끔 색상이 적용되는 이모지가 있으니 확인해 보면 좋다!
아이콘에 색상을 적용하고 싶다면 react-icons를 활용하는 것이 더 좋아 보인다!