[Utility] 이미지 추출 기준이란? (feat. Figma를 활용한 이미지 추출 방법)

웹퍼블리셔로서 웹사이트나 앱의 사용자 경험을 향상하기 위해 디자이너와 협력하여 다양한 디자인 요소를 구현합니다. 이미지는 이러한 디자인 요소 중 하나로, 올바른 형식과 해상도로 이미지를 추출하는 것은 웹사이트나 앱의 성능과 사용자 경험에 직접적으로 영향을 미칩니다. 이번 포스팅 글에서는 이미지 추출의 기준과 피그마를 활용한 이미지 추출 방법에 대해 알아보겠습니다.

 

이미지 추출의 기준?

PNG

- 이미지를 여러 번 저장하거나 압축해도 품질이 손상되지 않습니다.

- 예를 들어 로고(Logo)나 아이콘(Icon)같이 투명한 배경이 필요한 경우 사용됩니다.

JPG

- 압축률을 조정하여 파일 크기를 줄일 수 있습니다. 따라서 이미지 파일 크기를 최소화해야 할 때 유용합니다.

- 사진이나 복합적인 이미지를 저장할 때 주로 사용됩니다.

SVG

- 백터 형식이기 때문에 크기를 조정해도 이미지 품질이 유지됩니다. 따라서 확대 및 축소가 필요한 이미지를 저장할 때 유용합니다.

- 예를 들어 로고나 아이콘과 같이 크기를 자주 변경해야 하는 이미지에 적합합니다.

 

 

 

따라서 이미지 추출의 기준은 이미지의 용도, 투명도의 필요 여부, 품질 유지, 파일 크기 등을 고려하여 png, jpg, svg 중에서 선택할 수 있습니다.

 

 

Figma에서 이미지 추출하는 방법

피그마(Figma)에 로그인하셔서 이미지를 추출하려는 파일을 엽니다.

1.  이미지 선택하기

이미지를 선택합니다. 그런 다음, 우측 패널에서 Export 섹션을 확인하세요. 선택한 이미지를 내보내고자 할 때 해당 섹션을 이용하면 됩니다.

 

추출하려는 이미지 선택하기

 

2. 내보내려는 이미지의 해상도와 형식 선택하기

고해상도 이미지를 사용할 때에는 그의 필요성을 고려해야 합니다. 모든 상황에서 고해상도 이미지를 사용할 필요는 없습니다. 예를 들어 간단한 아이콘이나 배경 이미지의 경우에는 고해상도가 필요하지 않을 수 있습니다. 또한 고해상도 이미지는 파일 크기가 크므로 로딩 속도를 늦출 수 있고, 이는 사용자 경험을 저하시킬 수 있습니다. 따라서 고해상도 이미지를 사용하는 것이 항상 좋은 것은 아닙니다. 상황에 따라 고려해서 사용하시길 바랍니다.

 

해상도, 이미지 형식 선택하기

3. 이미지 내보내기

미리 보기(Preview)로 확인한 후 Export 버튼을 클릭하면 이미지가 내보내집니다.

추출하기 클릭하기

 

 

 

이미지 추출은 웹사이트나 앱의 성능과 사용자 경험에 중요한 부분을 차지합니다. 올바른 형식과 해상도로 이미지를 추출하여 디자이너와의 협력을 통해 더 나은 결과물을 창출할 수 있습니다. Figma와 같은 디자인 도구를 활용하여 이미지 추출하는 방법에 대해서 알아보았습니다.

 

 

 

[git] github pages로 나만의 포트폴리오 웹페이지 배포해보기

[HTML] ios/Safari 에서의 SVG 랜더링 이슈: 해결책 탐색

[Utility] 구독 없이 바로 사용 가능한 무료 온라인 디자인 툴 : Photopea(포토피아)

[CSS] 마크업(markup)할 때, img vs background-image 선택하는 기준은?

[HTML] Image Map, 이미지맵으로 이미지에 링크 거는 방법