글자 크기가 작은것 같다는 의견

[caseBread]

주제

General

Body

특정 배율 (16:9)에서 글자크기가 작다는 의견이 있습니다!

그래서 제안드리는 것은 기존의 글자크기보다 큰 글자크기를 추가하는건 어떨까요?

• 문제 상황
  

-해결책

BDD-Task!

• 초기화 및 처음 접속 시 => default값은 두번째로 큰 글자크기로 적용된다.
• 첫번째로 큰 글자크기를 클릭한다 => 기존의 글자크기보다 더 커진다.

[da-in]

모바일과 데스크탑에서 화면 크기에 따라 캔버스 사이즈는 달라지는데, 폰트 사이즈는 고정이라서 문제가 되는 것 같아요!

더 큰 폰트를 추가하는 방법도 좋지만 혹시
모바일과 데스크탑에서의 폰트 사이즈를 다르게 하면 어떨까요

같은 H1을 적용했을 때 전체 캔버스 대비 사이즈가 비슷하도록요!

ex) mobile -> H1 : 24px
Desktop -> H1 : 36px

(사이즈는 정확히 기억나지 않아서 임의로 작성했습니다)

[caseBread]

행간 150%
자간 0.8px
폰트 weight는 bold, semibold, medium 순으로

[da-in]

그럼 rem으로 바꿔보죠~ 제가 의견 냈으니까 제가한번 고쳐보겠습니다 ~

주의해야할 점이 캔버스 대비 사이즈가 비슷해야하므로!

모바일과, 데탑에서 캔버스 사이즈가 동적인지 체크해야합니다!

(제가 알기로 데탑에서 서비스 전체 컨테이너는 너비가 고정 px이라서 올려봅니당. 캔버스 사이즈가 고정이면 폰트도 고정인!🤔)

[caseBread]

그럼 rem으로 바꿔보죠~ 제가 의견 냈으니까 제가한번 고쳐보겠습니다 ~

주의해야할 점이 캔버스 대비 사이즈가 비슷해야하므로!

모바일과, 데탑에서 캔버스 사이즈가 동적인지 체크해야합니다!

(제가 알기로 데탑에서 서비스 전체 컨테이너는 너비가 고정 px이라서 올려봅니당. 캔버스 사이즈가 고정이면 폰트도 고정인!🤔)

그러면 캔버스 사이즈도 rem으로 바꿔볼까요?
아직 pr merge 전이라 바꿀 수 있을 것 같아요

[da-in]

동적으로 바꾼다면, 캔버스 뿐 아니라 전체 컨테이너 영역을 동적으로 바꾸어야할 것 같아요!

(어 그런데 전체 컨테이너가 커지면 전역 폰트도...? 하면 살짝 산으로 가는 것 같기도...)

이번 이슈에 대해서는 캔버스 크기는 그대로 두고, 캔버스가 동적인 환경에서만 rem을 적용하면 어떨까요! (모바일과 데탑에서 캔버스가 동적인지 여부 체크 필요...)

[caseBread]

동적으로 바꾼다면, 캔버스 뿐 아니라 전체 컨테이너 영역을 동적으로 바꾸어야할 것 같아요!

(어 그런데 전체 컨테이너가 커지면 전역 폰트도...? 하면 살짝 산으로 가는 것 같기도...)

이번 이슈에 대해서는 캔버스 크기는 그대로 두고, 캔버스가 동적인 환경에서만 rem을 적용하면 어떨까요! (모바일과 데탑에서 캔버스가 동적인지 여부 체크 필요...)

캔버스가 동적으로 변한다는 것이 화면에따라 캔버스 크기가 바뀌는 경우를 말씀해주신거겠죠 ?
맞다면 지금 데스크탑, 모바일 둘다 height는 고정(하지만 둘의 크기는 다름)이고 모바일에서 width가 바뀌고있어요

캔버스의 비율이 바뀌는게 아니라 width만 바뀌고있는데 width에 맞춰서 글자크기를 수정해볼까요?

아니면, 이건 제 아이디어인데
지금 문제상황이 rem에 반응형을 줘서 폰트크기를 변경하면 썸네일 글자크기 뿐만아니라 모든 글자크기가 커져서 rem에 반응형 주는건 좋은방식은 아닌듯 하고,
rem은 유지하되, 썸네일 관련 크기들(width, height, font-size)은 px로 고정하는 방식도 괜찮아 보입니다.
근데 여기서 px로 고정할 때 모바일에서 넘치는 썸네일 은 어떻게 처리할 것인가.. 는 좀 생각할 필요가 있어보입니다.

[da-in]

추가로 이건 @se-chive 도 같이 이야기해보면 좋겠는데

지금 H1, H2, H3 가 폰트 사이즈만 다르고 굵기는 모두 같인데요

굵기에 차이가 있으면 더 퀄리티가 있어보일 것 같습니다(ex- H3를 얇게)

[se-chive]

폰트 굵기에 차이를 주는 건 저도 너무 좋은 생각이라고 생각해요

지금 당장 생각나는 방법은 아래 2가지 정도인데요,

1. H3만 Bold->Semi-Bold로 변경한다.
2. H2를 Bold->Semi-Bold, H3를 Bold->Medium으로 변경한다.

1안 ,2안 모두 고려할 사항이 있긴 해서 개발cost가 크지 않다면 직접 본 후에 적용하고 싶다는 의견입니다!

[da-in]

너무 좋아요! 개발 담당자분이 자몽과 논의하며 진행하면 좋겠군요