들어가며 회사 서비스는 Pretendard Variable 폰트를 사용하고 5개 국어 다국어 처리를 하고 있다. 어느 날 일본어의 일부 문자에서만 폰트가 깨지는 이슈를 발견했는데, 비단 우리만 겪었던 문제는 아니였는지 기존 폰트와 별도로 일본어/한자 대응을 위한 Pretendard JP 폰트가 배포되어 있었다. 해당 이슈는 Pretendard JP 폰트와 unicode-range를 활용해 해결했는데, 이와 같이 언어마다 혹은 문자에 따라 다른 폰트를 적용해야 할 경우 어떻게 처리하면 될지 정리해보는 글 @font-face unicode-range는 @font-face 로 정의한 폰트가 적용될 범위를 설정하는 속성으로, 우선 @font-face부터 정리해보자. @font-face는 웹에 표시할 사용자 지정 글꼴을 정의하는 CSS의 규칙으로 사용자의 컴퓨터에 설치되지 않은 웹 폰트를 적용할 수 있게 해준다. 적용할 땐 아래의 문법에 따라 사용하면 된다. : 사용자가 지정하는 폰…

문제상황 회사 프로젝트에 드디어 storybook을 도입하게되어 싱글벙글했던 것도 잠시.. storybook을 설치해 실행하고 기존에 만들어두었던 component의 story를 하나하나 작성하는데 SVG 파일이 import된 component에선 undefined가 렌더된다는 아래의 에러가 떴다. 해당 에러는 storybook의 기본 웹팩 설정에서 svg 파일을 로 변환하고 있기 때문에 나는 것. React cra로 초기셋팅을 하며 storybook을 함께 적용할 때는 해당 에러가 나지않았고 monorepo환경의 기존 프로젝트 (w/ React+Typescript)에 적용할때만 났다. 해결법 기존 웹팩 설정에서 svg와 관련된 설정을 삭제하고, SVG를 React Component로 변환해주는 tool인 SVGR을 통해 SVG를 로드하도록 설정해 문제를 해결할 수 있다. 1. SVGR 설치 먼저, 기존 svg 처리 설정을 대체할 SVGR을 설치한다. 2. webpack 설정 …