Next.js / React ( translate, translate3d, duration, cva, quill에디터 폰트 흐려짐[미해결] )

translate와 translate3d

1. translate(x, y):
   • 2D 이동을 위한 함수입니다.
   • X축과 Y축으로만 이동이 가능해요.
   • 예: translate(-50%, -50%)는 요소를 X축으로 -50%, Y축으로 -50% 이동시킵니다.
2. translate3d(x, y, z):
   • 3D 이동을 위한 함수입니다.
   • X축과 Y축 외에도 Z축으로 이동이 가능해요.
   • 예: translate3d(-50%, -50%, 0)는 X축과 Y축으로는 -50%씩 이동하고, Z축 이동은 없도록 설정합니다 (0).

차이점 요약

• 2D 이동만 필요하면 translate를, 3D 효과나 Z축 이동이 필요한 경우 translate3d를 사용합니다.
• 실제로 Z축 이동이 없더라도 translate3d를 사용하면 하드웨어 가속이 적용되어 애니메이션 성능이 약간 향상될 수 있습니다.

 

duration-200

*애니메이션 또는 트랜지션의 지속 시간을 200밀리초(ms)**로 설정하는 Tailwind CSS 클래스예요.

이 클래스는 CSS의 transition-duration: 200ms;와 동일하게 작동하며, 요소가 변화를 완료하는 데 걸리는 시간을 지정합니다. 예를 들어, hover 상태에서 색상이 변하거나 크기가 바뀔 때 그 변화가 200밀리초 동안 부드럽게 일어납니다.

 

cva

Class Variance Authority의 약자로, CSS 클래스를 쉽게 조합하고 관리할 수 있도록 도와주는 유틸리티 함수예요. 주로 React나 Next.js와 같은 프레임워크에서 Tailwind CSS와 함께 사용해, 다양한 스타일을 쉽게 적용할 수 있도록 도와줘요.

cva 함수의 역할을 살펴볼게요:

1. 기본 스타일: "md:rounded-md bg-background-layer-1 flex flex-col transition-all"과 같이 공통적으로 적용할 기본 스타일들을 첫 번째 인수로 넣어요.
2. Variants 옵션: variants라는 객체를 사용해 다양한 스타일 변형(variants)을 정의해요. 예를 들어 variant 옵션을 사용해 "no-padding", "popup", "form" 등 여러 스타일 옵션을 지정할 수 있어요.
3. defaultVariants 옵션: defaultVariants에서는 기본으로 적용할 스타일 변형을 지정해요. 이 예시에서는 variant: "default"가 기본값이 되죠.

예시

const dialogContentVariants = cva(
  "fixed inset-0 flex items-center justify-center pointer-events-none bg-opacity-50 bg-black", // 부모 Flex 컨테이너 중앙 정렬
  {
    variants: {
      position: {
        default: "pointer-events-auto bg-white p-6 rounded-lg max-w-md w-full", // 모달 자체 속성
      },
    },
    defaultVariants: {
      position: "default",
    },
  }
);

 

 

Quill 에디터

폰트가 흐릿하게 보이는 현상은 여러 가지 이유로 발생할 수 있습니다. 주요 원인은 다음과 같습니다:

1. CSS 스타일 문제: 에디터의 스타일에 font-smoothing이나 antialiased 같은 속성이 설정되어 있을 경우, 폰트가 조금 흐릿하게 보일 수 있습니다. CSS에서 -webkit-font-smoothing: antialiased; 속성을 확인해 보세요. 이를 수정하거나 제거하면 개선될 수 있습니다.
2. 해상도 및 스케일링 문제: 화면 해상도와 디스플레이의 배율(특히 고해상도 모니터 사용 시) 때문에 글자가 흐릿해 보일 수 있습니다. 브라우저에서 배율을 조정하거나 운영체제의 디스플레이 설정에서 스케일링을 확인해 보세요.
3. 웹폰트 로딩 지연: Quill 에디터에서 웹폰트를 사용하는 경우, 폰트가 완전히 로드되지 않았을 때 기본 폰트로 렌더링되어 일시적으로 흐릿하게 보일 수 있습니다. 폰트가 정상적으로 로드되는지 확인해 보세요.
4. 브라우저 호환성 문제: 특정 브라우저에서 Quill 에디터의 렌더링 방식이 다르게 동작할 수 있습니다. 브라우저를 최신 버전으로 업데이트하거나 다른 브라우저에서 테스트해보세요.

Chrome에서 데스크탑 모니터 크기에서만 Quill 에디터 폰트가 스크롤 시 흐려지는 현상은 주로 다음과 같은 이유로 발생할 수 있습니다:

1. 하드웨어 가속 문제: Chrome에서는 하드웨어 가속이 활성화된 상태에서 스크롤 시 폰트가 흐려질 수 있습니다. 이 경우, Chrome 설정에서 하드웨어 가속을 비활성화하면 문제가 해결될 수 있습니다.
   • Chrome 설정에서 설정 > 고급 > 시스템 > 하드웨어 가속 사용 중지로 이동하여 확인해 보세요.
2. CSS에서 transform 속성 사용: Quill 에디터의 상위 요소나 에디터 자체에 transform 속성이 적용된 경우, 스크롤 시 폰트가 흐려질 수 있습니다. 특히 scale과 같은 속성을 사용했을 때 자주 발생하는 문제입니다. 에디터의 상위 요소들에 transform이 설정되어 있는지 확인해 보세요.
3. 백그라운드 블러나 필터 사용: CSS에서 backdrop-filter, filter: blur() 속성 등이 에디터 상위 요소에 적용된 경우에도 스크롤 시 폰트가 흐릿해질 수 있습니다. 이런 속성이 적용되어 있는지 확인하고, 제거하거나 조정해 보세요.
4. 디스플레이 스케일링: Chrome에서 배율이 조정되어 있으면(예: 125% 또는 150%) 폰트가 스크롤 시 흐려질 수 있습니다. 배율을 100%로 조정하고 테스트해 보세요.

이 문제를 해결하려면 하드웨어 가속을 비활성화하거나, transform이나 filter 같은 CSS 속성을 점검하는 것이 좋습니다.

 

위 사항들을 점검해보았으나, 모니터 크기 이상에서 크롬에서만 발생하는 문제 해결 실패, 일시적 해결은 있었으나 지속적으로 해결이 안되었습니다. 별도로 추가 확인 예정입니다.