💄 스타일 기본 세팅 추가

[numeru]

📃 변경사항

• global css 추가
• 타이포그래피 변수화
• theme 임시 추가

📌 중점적으로 볼 부분

• 제가 평소 사용하는 간단한 global css 를 추가해뒀는데 추가, 변경 필요한 것 모두 말씀 부탁드립니다
• 저는 타이포그래피를 이렇게 변수화해서 재사용하는걸 선호하는데 다른 의견 있으시면 말씀 부탁드려요!
• 색상 코드나 기타 스타일 관련 값을 정리해 두는 theme 을 추가했습니다
• 폰트는 임시로 적어둔 것이고 파일 추가 필요합니다

✔ 체크리스트

• [x] 브랜치 전략에 맞는 브랜치에 PR을 올리고 있습니다. (master/main이 아닙니다.)
• [x] 커밋 메세지를 컨벤션에 맞추었습니다.
• [x] 변경 후 코드는 컴파일러/브라우저 warning/error 가 발생시키지 않습니다.
• [x] 변경 후 코드는 기존의 테스트를 통과합니다.
• [x] 테스트 추가가 필요한지 검토해보았고, 필요한 경우 테스트를 추가했습니다.
• [x] docs 수정이 필요한지 검토해보았고, 필요한 경우 docs를 수정했습니다.

[Dongkyuuuu]

@numeru 폰트는 파일로 할 예정인가요?? 아니면 CDN으로 처리 예정인가요??

[numeru]

@numeru 폰트는 파일로 할 예정인가요?? 아니면 CDN으로 처리 예정인가요??

아무래도 디자인팀에서 폰트 파일을 받아와서 로컬에서 사용하는게 가장 편한 방법이지 않을까 싶습니다! 저는 지금까지 그렇게 해오기도 했구요

혹시 CDN 을 이용하는 방식을 선호하시나요?

[Dongkyuuuu]

@numeru 폰트는 파일로 할 예정인가요?? 아니면 CDN으로 처리 예정인가요??

아무래도 디자인팀에서 폰트 파일을 받아와서 로컬에서 사용하는게 가장 편한 방법이지 않을까 싶습니다! 저는 지금까지 그렇게 해오기도 했구요

혹시 CDN 을 이용하는 방식을 선호하시나요?

개인적으로는 CDN 방식을 선호하긴 합니다. 이유는

1. 파일을 가지고 자체적으로 해결하는 방법은 폰트를 모두 받아 font-face에 넣어 하나하나 맵핑을 해주어야 한다.
2. 최적화라는 관점에서 보았을 때, 이미 다이나믹 서브셋같은 것으로 제공해 주고 있다.
3. 번들 사이즈가 증가

[폰트미포함]

[폰트포함]

이외에 여러가지 사유로 CDN 사용을 선호하긴 합니만 결국 절대적인 코드량도 적고, 더 편하게 쓸 수 있어서 사용합니다!

[ding-co]

저도 동의합니다. 보통 font-face는 이전에 다국어 처리할 때 range로 유니코드 셋팅해서 언어별로 알아서 바뀌도록 할 때 많이 사용했었는데, 최근에 제가 리액트로 하려고 여러 번 테스트 했을 때는 잘 안되더라구요. 저도 import보다 cdn 스타일 선호해요. 하지만 유료 폰트나 일부 몇몇 폰트는 cdn 같은 링크를 제공하지 않은 것도 있어서 그럴 때는 어쩔 수 없이 로컬에 다 저장해서 font-face로 처리해야 합니다. 저희 프리텐다드는 구글 무료라서 상관은 없습니다!

[numeru]

확실히 CDN 링크가 있으면 안쓸 이유가 없어보이네요!

그런데 저도 아직 써본적은 없지만 nextjs 에서 font optimization 기능을 기본적으로 제공하는데 이건 어떻게 생각하시나요? 빌드 타임에 적용시켜 주는 것 같은데 CDN 과 함께 쓸 수 있을까요?

https://nextjs.org/docs/basic-features/font-optimization

@Dongkyuuuu @ding-co

[Dongkyuuuu]

확실히 CDN 링크가 있으면 안쓸 이유가 없어보이네요!

그런데 저도 아직 써본적은 없지만 nextjs 에서 font optimization 기능을 기본적으로 제공하는데 이건 어떻게 생각하시나요? 빌드 타임에 적용시켜 주는 것 같은데 CDN 과 함께 쓸 수 있을까요?

https://nextjs.org/docs/basic-features/font-optimization

@Dongkyuuuu @ding-co

nextjs에서 제공하는 font optimiztion 기능은 font self-hosting을 위하여 제공하는 기능 같습니다. Goolge에서 제공하는 variable fonts사용을 권장하는 것 같네요.

저도 이 기능들은 궁금하긴해서 다들 괜찮으시다면 한번 LocalFont로 적용해보는 것도 나쁘지않겠네요!