⏤Figma는 이제 REM을 지원한다 Figma는 Config 2023에서 새로운 기능을 많이출시했으며 새로운 개발 모드가 도입되었다.개발 모드에는 속성 놀이터(property playground),버전 기록 및 개발 준비가 된 섹션을 지정하는 기능과같은 기능이 포함되어 있다. 그러나 디자인과 개발 사이의격차를 해소하는 엄청난 가치에도 불구하고 오랫동안기다려온 단위 변환 기능은 큰 호응을 얻지 못했다.하지만 이제 픽셀(px)을 사용하여 디자인하고 검사를위해 rem 단위를 사용하여 CSS로 원활하게 전환할수 있다. ⏤NEW_Figma Dev 모드에서 px에서 rem으로의 전환 창 오른쪽에 디자인 모드와 개발 모드 사이를 전환할 수있는 토글이 표시된다. 전원을 켜고 회색 캔버스 영역을클릭하여 전체 설정을 확인하면 드롭다운 메뉴가나타난다. 여기에서 px에서 rem으로 쉽게 전환할 수있다. 원하는 경우 다른 단위를 선택할 수도 있다. 디자인을 검사하면 루트 글꼴 크기를 16px로 가정하고px로 설정된 모든 것이 자동으로 rem으로 변환한다.%it와 같은 다른 단위를 찾으면 주석으로 rem 값을추가한다.그것이 전부다. 우리는 Figma에서 px로 계속 디자인하지만 개발자는 원할 때마다 rem으로 전환할 수 있다. ⏤그러나 REM 단위는 무엇인가? "root em"의 줄임말인 rem 단위는 웹 페이지의루트 요소(일반적으로 <html> 태그)에 상대적인글꼴 크기를 나타내는 CSS 측정 단위이다." 1rem = 루트 글꼴 크기의 현재 설정 " ⏤루트 글꼴 크기는 무엇인가?루트 글꼴 크기는 웹 페이지의 기본 글꼴 크기이며일반적으로 대부분의 브라우저에서 16픽셀(px)로설정된다. 페이지의 글꼴 크기에 대한 기준점 역할을한다. 1rem이 루트 글꼴 크기와 같은 rem 단위를사용하면 다양한 장치 및 화면 크기에서 글꼴 크기를쉽고 일관되게 확장할 수 있다.아래에 몇 가지 예가 있다. ⏤모든 것에 PX 장치를 사용하지 않는 이유는 무엇인가?Figma와 같은 디자인 소프트웨어에서 픽셀(px)은일반적으로 절대 단위로 사용된다.즉, Figma에서 1px는 특정 크기, 일반적으로Figma에서는 1pt(1x 스케일)를 나타낸다. 픽셀을 사용한디자인은 디자이너에게 원하는 수준의 정밀도와 제어할 수있는 기능을 제공합니다. 그러나 고정 픽셀 값은 그들에게꿈일 수 있지만 웹 개발을 위해 CSS로 변환할 시 사용자가설정한 글꼴 크기 기본 설정을 무시할 수 있으므로 접근성에있어 장벽이 될 수 있다. ⏤사용자 설정 글꼴 크기 기본 설정이란 무엇인가?모든 브라우저에는 기본 루트 글꼴 크기가 있으며일반적으로 16px로 설정된다. 그러나 사용자는선호도에 따라 이 크기를 쉽게 조정할 수 있다.예를 들어 Chrome에서 사용자는 설정 메뉴로이동하여 모양을 선택하고 글꼴 또는 글꼴 크기를사용자 지정할 수 있다. 이 기능은 가독성 향상을 위해더 큰 텍스트에 의존하는 시각 장애가 있는 사용자에게특히 유용하다. 루트 글꼴 크기를 수정하는 기능을제공함으로써 브라우저는 접근성을 높이고 개인이자신의 특정 요구에 맞게 브라우징 경험을 조정할 수있도록 한다. ⏤개발자 또한 루트 글꼴 크기를 변경 가능하다사용자 외에도 개발자는 CSS를 사용하여 루트 글꼴크기를 조정할 수 있다. 개발자는 html/root 태그를대상으로 하여 기본 크기를 재정의하고 원하는 값을설정할 수 있다. 그러나 픽셀(px)을 사용하여 크기를 설정하면 사용자기본 설정이 무시된다. 반면에 rem과 같은 상대 단위를사용하면 개발자가 사용자 기본 설정을 존중하면서텍스트 크기를 조정할 수 있다. 이 접근 방식은 설계제어와 사용자 요구 수용 사이의 균형을 보장한다.상대적 단위를 수용함으로써 우리는 다양한 요구를수용하고 접근성을 우선시하여 우리의 디자인이 모든개인에게 시각적으로 매력적이고 사용자 친화적임을보장할 수 있다. 아직도 추상적으로 들리는가? 다음 몇 가지 예가 더 있다. ⏤Example 1 : PX 재정의 사용자 기본 설정루트 글꼴 크기에 rem을 사용하는 것이 px를 사용하는것보다 선호되는 이유를 설명하겠다. 모든 글꼴 크기를픽셀(px) 단위로 정의했다고 상상해 보자. 단순화를 위해 H1제목을 48px로, 단락 텍스트(p)를 16px로 가정해 보겠다.이러한 값은 화면에서 합리적이고 읽기 쉬운 것으로나타날 수 있다. 글꼴 크기에 픽셀(px)을 사용하면 모든 브라우저 설정을재정의하는 고정 값으로 작동한다. 마치 루트 글꼴크기와의 통신을 끊는 것과 같다. 예를 들어 사용자가이 예에서 루트 크기를 16x에서 24px로 변경하는 것과같이 루트 크기를 조정하더라도 표시되는 글꼴 크기는영향을 받지 않는다. 이것은 콘텐츠가 사용자의 선호도에적응하지 못하기 때문에 사용성 장벽을 만든다. ⏤Example 2 : REM은 사용자 기본 설정을 존중한다.반대로 루트 글꼴 크기에 대해 rem을 사용하면 글꼴크기가 상대적이 되어 사용자가 브라우저 설정을수정할 때 비례적으로 확장할 수 있다. 이 접근 방식은더 나은 접근성을 보장하고 다양한 시각적 요구 사항을가진 사용자를 방해하지 않는다. ⏤그러나 사용자는 더 큰 글꼴 크기를 위해 확대할 수 있다PX에서 완벽하게 작동하므로 REM이 필요하지 않다. 그렇다. 사용자는 픽셀 기반(px) 글꼴 크기를 사용할 때확대 및 축소할 수 있다. 사용자가 확대/축소하면 텍스트를포함한 전체 페이지가 확대되어 품질 저하 없이 원하는 대로텍스트 크기를 조정할 수 있다. 따라서 rem 단위 사용의필요성에 의문을 제기할 수 있다. 확대/축소가 사용자가읽기 환경을 사용자 지정하는 데 도움이 되는 것은사실이지만 여전히 염두에 두어야 할 몇 가지 고려 사항이있다. ∙ 접근성rem 단위를 사용하면 일회성 기본 설정으로확대/축소에만 의존하지 않고 텍스트 크기를 조정할 수있다. 이는 가독성 향상을 위해 더 큰 텍스트 크기에의존하는 시각 장애가 있는 사용자에게 특히 중요하다.우리는 그들이 어떤 기술을 사용할지 모른다. ∙ 반응형 디자인rem 단위는 다양한 화면 크기 및 장치에 적응하는반응형 디자인을 만드는 데 특히 유용하다. 다양한뷰포트에서 글꼴 크기 조정에 대한 보다 일관되고 확장가능한 접근 방식을 제공한다. ∙ 상대적 비율rem 단위는 페이지의 서로 다른 요소 간에 상대적비율을 유지하는 방법을 제공한다. 픽셀을 사용할 때글꼴 크기를 조정하면 다른 요소의 크기가 비례하지 않아잠재적인 레이아웃 및 디자인 문제가 발생할 수 있다.그리고 "아니요, 얼마나 많은 사람들이 줌을 사용하는지와사용자 글꼴 크기 사전 설정을 사용하는지에 대한 조사가없는데요?" 라고 한다면 모든 선택을 수용하고 잠재적인사용자 사전 설정을 존중하는 것을 선호한다. ⏤EM 단위는 무엇인가?우리가 사용할 수 있는 또 다른 단위는 em이다.rem 단위와 em 단위의 차이점은 rem 단위는 루트글꼴 크기를 기준으로 크기를 계산하는 반면 em 단위는가장 가까운 부모 요소의 글꼴 크기를 기준으로 크기를계산한다는 것이다. 예를 들어 루트 글꼴 크기가 16px인경우 1rem은 위치에 상관없이 항상 16px이다. em 단위는글꼴 크기가 다른 여러 요소 내에 중첩되고 부모로부터상속될 때 합성될 수 있다. 그러나 아래 예에서 볼 수 있듯이em은 rem과 마찬가지로 사용자 사전 설정을 존중하므로사용자가 선호하는 설정을 기반으로 유연하고 반응이빠른 디자인이 가능하다. ∙ rem브라우저의 루트 글꼴 크기의 배수(r 스탠드 또는 루트)e.g. 루트 글꼴 크기 =16px 다음 1rem=16px∙ em예를 들어 사용되는 요소의 글꼴 크기의 배수.컨테이너의 글꼴 크기 32px 따라서 컨테이너 내부 1em=32px 👆참고em이 부모에 상대적이라는 것을 많이 읽게 될 것이다.그렇다. em은 부모로부터 상속받을 수 있지만 정의에 따라"사용되는 요소의 font-size 속성의 계산된 값과 같다."여기에 더 깊이 설명하는 훌륭한 기사가 있다. rem 및 em단위는 특정 사용 사례에 따라 고유한 강점과 약점이 있다.숙련된 프런트엔드 개발자는 필요에 따라 효과적으로결합하고 활용할 수 있다.