이미지가 이미 피그마에 있을 때
Figma에는 Remove background 기능이 있습니다. Figma Design에서 이미지를 선택하고 보조 도구 모음의 해당 기능을 사용하세요. 이용 가능 여부는 요금제와 권한에 따라 달라지며, 현재 조건은 아래 Figma 안내에서 확인할 수 있습니다.
이 기능을 쓸 수 있고 결과도 충분하다면 같은 파일에서 이어서 작업하면 됩니다. 배경 제거만을 위해 이미지를 내보냈다가 다시 가져올 필요는 없습니다. 배치를 시작하기 전에 프레임의 실제 배경색 위에서 결과를 확인하세요.
참고 이미지가 Chrome에 열려 있을 때
재사용할 수 있는 웹 사진을 고르는 중이라면 ClickCutout을 쓸 수 있습니다. 이미지 접근을 허용하고 Google 계정으로 로그인한 뒤 PNG를 선택하세요. 확장 프로그램은 파일이나 클립보드 이미지를 제공합니다. Figma 컴포넌트를 만들거나 상품 페이지와 자동으로 연결해 주지는 않습니다.
- 원본 페이지에서 필요한 크기의 상품 이미지를 여세요.
- 우클릭한 뒤 ClickCutout에서 복사를 선택하세요.
- 편집 가능한 Figma 파일에서 넣을 위치를 선택하고 붙여넣으세요. 브라우저나 편집기가 이미지를 받지 못하면 PNG를 다운로드하세요.
- Figma의 이미지 가져오기 기능을 쓰거나 다운로드한 파일을 캔버스로 끌어 놓으세요.
같은 메인 화면에서 상품 사진을 비교하세요
신발 쇼핑몰의 첫 화면을 만든다고 가정해 보세요. 제목, 버튼, 배경을 먼저 정하고 글 옆에 신발 누끼 이미지를 놓습니다. 프레임을 복제한 뒤 다른 각도의 신발 사진으로 교체하세요. 문구와 간격을 유지해야 이미지 자체를 비교하기 쉽습니다.
신발 앞코가 향하는 방향, 눈에 보이는 크기, 버튼과의 거리를 살펴보세요. 이미지 폭이 같아도 투명 여백이 다르면 신발 크기는 다르게 보입니다. 실제로 보이는 물체를 기준으로 맞추고 가로세로 비율은 유지하세요.
좁은 화면과 배경색을 함께 확인하세요
선택한 이미지를 모바일 시안에도 넣으세요. 상품이 너무 작아지거나 글을 아래로 밀어낸다면 위치나 사진 각도를 바꿔야 할 수 있습니다. 배경 제거는 원본에서 잘린 뒤꿈치나 소매를 복구하지 않습니다.
밝은 배경과 어두운 배경에서 윤곽을 확인하세요. 흰 사각형이 보이면 이미지 자체인지, 추가한 도형인지, 뒤쪽 프레임인지 구분합니다. 붙여넣기 중 투명도가 사라졌다면 다운로드한 투명 PNG를 다시 넣으세요. 물체 가장자리에 붙은 밝은 테두리는 윤곽 수정이나 더 나은 원본이 필요합니다.
확정한 시안에 원본 정보도 남기세요
이미지 레이어에 이름을 붙이고 원본 페이지 링크를 작업 메모에 기록하세요. 다음 작업자가 제품 버전을 확인하거나 참고 이미지를 승인된 자료로 바꾸기 쉽습니다. 이후 배치 변경을 위해 투명 원본 파일도 보관하세요.
ClickCutout은 전달받은 이미지의 크기를 유지합니다. 작은 썸네일을 선명한 대형 메인 이미지로 바꾸지는 않습니다. 웹사이트에 적용할 때는 평소 제작 과정에서 최종 이미지 크기와 형식을 준비하고 실제 페이지에서도 확인하세요.
