질문사항
Figma에서 이미지를 프레임에 넣고 `Corner Radius`를 적용했을 때, 개발자가 이미지를 익스포트하면 라운드가 적용된 상태로 추출됩니다. 라운드가 적용되지 않은 원본 사각형 이미지를 추출할 수 있는 방법이 있을까요?
답변
네, Figma에서 `Corner Radius`가 적용된 이미지의 원본 사각형 이미지를 추출하는 방법은 다음과 같습니다.
가장 일반적이고 권장되는 방법은 이미지를 별도의 프레임으로 감싸고, 그 프레임에 `Corner Radius`와 `Clip content`를 적용하는 것입니다.
원본 이미지 준비: 먼저 라운드를 적용하고 싶은 원본 사각형 이미지를 준비합니다.프레임 생성: 해당 이미지를 선택한 상태에서 `Shift + A` (Auto Layout)를 누르거나, `Ctrl + Alt + G` (Windows) / `Cmd + Option + G` (Mac)를 눌러 이미지를 프레임으로 감쌉니다. (또는 이미지를 선택하고 오른쪽 패널에서 `Frame selection` 아이콘 클릭)라운드 및 클립 적용: 새로 생성된 프레임을 선택하고, 오른쪽 디자인 패널에서 `Corner Radius` 값을 입력하여 라운드를 적용합니다. 그리고 반드시 `Clip content` 옵션을 체크합니다. 이렇게 하면 프레임 바깥으로 나가는 이미지가 잘려나가 라운드 효과가 시각적으로 적용됩니다.이미지 추출: 개발자용: 개발자는 Figma의 [Dev Mode](https://help.figma.com/hc/en-us/articles/14761000207000-Get-started-with-Dev-Mode)를 사용하여 해당 프레임을 선택하면, 프레임에 적용된 `Corner Radius` 정보와 함께 원본 이미지의 정보를 확인할 수 있습니다. 개발자는 보통 CSS로 `border-radius`를 적용하므로, 원본 이미지를 요청할 수 있습니다. 디자이너 직접 추출: 만약 디자이너가 원본 이미지를 직접 추출해야 한다면, 프레임이 아닌 프레임 안에 있는 원본 이미지 레이어 자체를 선택한 후, 오른쪽 패널의 `Export` 섹션에서 내보내기 설정을 하고 추출하면 됩니다. 이 경우 라운드가 적용되지 않은 원본 사각형 이미지가 추출됩니다.이 방법을 사용하면 디자인에서는 라운드 처리된 이미지를 보여주면서도, 개발자에게는 원본 이미지를 제공하여 유연하게 CSS로 `border-radius`를 적용할 수 있도록 할 수 있습니다.