[Feat/#184] MacOS 사파리 명조체

[simeunseo]

✨ #184 ✨

todo

• 사파리에서 방장페이지 일부가 명조체로 보이는 문제 해결

📌 내가 알게 된 부분

• '사파리 명조체 이슈' 라고 하기는 했는데, 오로지 방장페이지의 제목 부분만 명조체가 나오는 걸 보아 브라우저별 폰트 호환성 문제가 아니라 다른 방향으로 접근해야겠다는 생각이 들었습니다.
• 명조체로 나오는 부분을 개발자도구에서 찍어보니 역시 font-family 속성 자체가 없드라구요... 해당 요소에 폰트가 적용이 안된 것이었습니다.
• 그래서 사파리 외에 다른 브라우저에서도 사실 해당 부분에 폰트가 적용이 안되어있습니다. 단지 애플 기본 폰트와 Pretendard가 크게 다르게 생기지 않아서 티가 안나는 것이었습니다.
• 역시 문제의 원인을 파악하는 것은 중요합니다.
• 해당 부분이 '현재까지 모인' + '1(변동되는 부분)' + '명을 위한 최적의 회의시간이에요' 이렇게 텍스트가 구성되어야 하는데, Text 공통 컴포넌트의 children으로 이렇게 혼합된 요소를 넣을 수가 없어서, 찬우오빠가 일단 빠른 구현을 위해 Text 컴포넌트가 아닌 div를 사용하다가 폰트 적용하는걸 깜빡한 것 같습니다.

전자는 Pretendard, 후자는 Apple Gothic인데 특히 ㅎ의 모양이 다른 걸 보실 수 있습니다. 그치만 자세히보지 않으면 티가 안남
더불어서 원래 '명'이라는 글자또한 초록색이어야 하는데 현재 배포본에는 '명'도 흰색인걸 보실 수 있습니다

• 그래서 Text 컴포넌트의 맹점에 대해서 생각하게 되네요... 복잡한 chlidren을 넣기가 너무 까다로워집니다. 변동되는 인원수(number)를 Text컴포넌트의 자식으로 넣기 위해서 Text 컴포넌트의 자식 type에 number를 추가했습니다.
• 또한, 이런식으로 구현하면 문장의 첫번째줄과 두번째 줄을 각각의 Text컴포넌트로 구현해야 하는데, 그러면 줄간격이 디자이너가 의도한 것과 달라질 수 있다는 문제점도 있습니다.

📌스크린샷

변경 전(사파리)

변경 후(사파리)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
asap	✅ Ready (Inspect)	Visit Preview	Sep 20, 2023 10:50am

[eastlaw80]

코드 자체는 길지 않지만, 차근차근 문제에서 드러난 현상을 바탕으로 아주 디테일한 지점에 주목하여 원인을 도출하고, 이를 해결하기 위해 적절한 기술을 고민한 과정이 매우 인상깊게 드러난 PR이었습니다. 흠,,,줄간격이 디자이너의 의도와 달라질 수 있다는 점까지 해결할 수 있는 방법이 없을까, 복잡한 children 관계가 있는 글에 대해서는 어떤 방식으로 구현해야 하는지 다른 사람들의 조언도 궁금해졌습니다. text에 대한 고민을 배울 수 있었습니다. 감사합니다.