프로젝트 진행 중 폰트 적용이 안되는 이슈가 발생했다!
다운로드 받은 SpoqaHanSanSNeo 폰트를 프로젝트 폴더 안에 저장하여 사용하고 있었다. 폰트가 적용된 요소에 마우스를 올렸을 때 Spoqa Han SanS Neo 폰트가 뜨길래 잘 적용되었군! 생각하고 있었는데 팀원 중 한분이 폰트가 적용되지 않는 것 같다고 말씀해주셨다.
그래서 설마? 하고 이전에 강의를 들을 때 강사님께서 폰트를 적용하고 난 후 개발자도구에서 렌더링된 글꼴을 꼭 확인해야 한다고 하셨던 것이 기억이 나서 확인해보았다. 렌더링된 글꼴은 개발자 도구에서 Computed(계산됨) 탭에서 font 검색 시 확인할 수 있다. 그랬더니 헉..! Spoqa Han SanS Neo가 아닌 윈도우의 기본 글꼴인 맑은 고딕이 적용되고 있었다.
트러블 슈팅 1
먼저, 폰트 파일의 경로를 직접적으로 url의 인자로 불러오고 있었다. 그러나 리액트에서는 파일(이미지, 폰트)를 이렇게 직접적으로 가져오면 안되고, 따로 import를 해서 가져와야 한다.
왜냐하면, 실행 시 우리가 입력한 경로가 아닌 다른 경로로 바뀌어 버린다. 예를 들어, 이미지가 프로젝트의 assets폴더 안에 있다고 가정했을 때, background-image의 url에 경로를 직접적으로 '../assets/imagees/...'이렇게 적어서 실행해보면 아래와 같이 실행 시 경로가 바뀌어버리는 것을 확인할 수 있다. 이렇게 되면 경로를 찾을 수 없기 때문에 이미지가 보이지 않게 된다.
따라서, url에 폰트 파일의 경로를 직접적으로 적는 것이 아닌 아래와 같이 폰트 파일을 import해와서 url에 변수형태로 작성해야 한다.
트러블 슈팅 2
이렇게 경로를 바꾸었음에도 불구하고, 폰트는 적용되지 않았다...! 대체 왜 적용이 안되는지 의문이었다. 애초에 파일 경로에 문제가 있었나 싶어서 파일 경로도 확인해 보고, 온갖 방법을 다 써보았지만 적용이 안됐다 ㅠㅠㅠ... 그래서 혹시나 다른 폰트는 잘 적용이 되는지 확인해보았는데 이럴 수가! 다른 폰트는 적용이 되는데 Spoqa Han SanS Neo만 적용이 안되는 것이었다!
설마 파일에 문제가 있나해서 Spoqa Han SanS Neo 공식 사이트에서 폰트를 다시 다운로드 받아서 적용해 보았다. 그랬더니...! 드디어 렌더링된 글꼴에 Spoqa Han SanS Neo가 나타났다..!ㅠㅠ 그렇다.. 사실은 파일에 문제가 있었던 것이었다ㅠㅠ 팀원분께서 폰트 파일을 다른분께 공유받으셨다고 하셨는데 그 파일을 다운로드 받는 과정에서 문제가 있었던 것 같다ㅠㅠ.. 문제가 해결되기까지 이렇게 글로만 봤을 때는 순식간에 해결된 것처럼 보이지만 거의 5시간 정도 삽질했던 것 같다.. 그런데...
끝나지 않은 트러블 슈팅
드디어 해결했다! 라고 생각했지만 오잉?! 버튼에는 Spoqa Han SanS Neo가 적용되고 있지만 링크 태그에는 폰트가 적용되지 않고 있었다.
그래서 황급히 개발자 도구를 열어서 링크 태그를 클릭해봤더니 애스터리스크(*)에 적어놓은 font-family가 무시되고 있었다! 그 위에 있는 style은 reset에 적용된 스타일인데 reset의 font:inherit이 적용되고 있었다. reset의 font: inherit을 지워보니 정상적으로 애스터리스크에 적어놓은 font-family가 적용되었다. 이를 통해 캐스캐이딩 문제임을 예상할 수 있었다.
(참고로, font 속성은 font-style, font-variant, font-weight, font-size, line-height, font-family의 단축 속성이다.)
reset에도 a태그가 포함되어 있고, *도 전체선택자임으로 a태그가 포함되어있다고 볼 수 있는데 그렇다면 후자 우선의 원칙으로 전체선택자에 있는 font-fmaily가 적용되어야 하는 것이 아닌가하는 생각이 들었다. 코드에서 전체선택자가 reset보다 아래에 위치해있었기 때문이다. 그러나 css에서는 동일한 태그를 가리키고 있을지라도 얼마나 구체적으로 작성되었느냐를 비교하여 구체적인 선택자가 우선한다!
그렇다면 얼마나 구체적으로 작성되었는지를 어떻게 판별할까? 선택자들은 각각 해당하는 가중치 점수가 있는데 이 가중치 점수에 따라 선택자의 우선순위를 결정할 수 있다. 애스터리스크는 가중치 점수가 0점이고, html 태그 자체를 선택자로 사용하는 타입 선택자는 1점이다. 따라서 타입 선택자가 우선순위가 더 높기 때문에 전체 선택자의 font-fmaily가 무시된 것이다.
끝나지 않은 트러블 슈팅 -2
우선순위 문제로 전체선택자에 있는 font-family가 무시되어서 reset에 있는 font: inherit이 적용되어 윈도우 기본글꼴인 맑은 고딕이 적용되는 것은 알겠다! 그렇다면 버튼에는 왜 Spoqa Han Sans Neo가 적용되는 것일까?
style-rest 패키지를 다운받아서 사용할 수 있는 reset은 에릭 마이어의 Reset CSS를 사용하는데 font 설정이 되어있는 reset css 코드 부분을 살펴보면 a태그는 포함되어 있지만 button 태그는 포함되어 있지 않다. 따라서, a태그는 우선순위로 인해 전체선택자에 있는 font-family가 무시되고 reset css에 있는 font: inherit이 적용된 것이었고, 버튼은 reset css에 포함되어있지 않기 때문에 전체선택자에 있는 font-family가 적용된 것이었다. ㅎㅎㅎ.... 아래 타입 선택자 부분을 보면 button은 포함되어 있지 않다. 한마디로 아래 타입 선택자에 포함된 태그들은 폰트 적용이 안된다는 뜻이다...
그래서 아래와 같이 코드를 수정했다. 전체 선택자에 있던 font-family와 font-weight을 body로 옮겨 주었다. 이렇게 되면 body태그는 타입 선택자로 가중치 점수가 1점이고, reset css에 포함되어있는 body 태그 역시 가중치 점수가 1점(html, body, div, span... 이런식으로 타입 선택자가 여러개여도 점수는 1점이다.) 이기 때문에 후자 우선의 원칙으로 body태그에는 Spoqa Han Sans Neo가 적용되고, 나머지 태그들은 font: inherit이 적용되게 된다. 따라서, body에 적용된 Spoqa Han Sans Neo를 상속받을 수 있게 되는 것이다. 그리고 button에는 따로 font: inherit을 추가해주어서 상속받을 수 있게 만들었다.
오늘의 교훈 : 만약, 코드 상에 문제가 없다면 파일에 문제가 있는지도 확인해보자! 그리고 reset css를 무작정 가져다 쓰기보다 reset css에 코드가 어떻게 쓰여있는지 파악하고 사용해야한다!
