본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

Framer에서 이미지를 업로드할 때 가장 많이 고민되는 부분 중 하나가 바로 해상도 설정입니다. 너무 크면 사이트 속도가 느려지고, 너무 작으면 이미지가 뭉개져 보일 수 있죠. 해당 글에서는 Framer에서 제공하는 이미지 해상도 옵션을 하나씩 살펴보고 어떤 상황에서 어떤 설정을 쓰면 좋은지 알려드릴게요.

이미지 해상도 옵션 종류

Framer는 이미지를 업로드할 때 자동으로 여러 해상도 버전을 생성해둡니다. 덕분에 방문자의 디바이스에 맞춰 가장 적합한 이미지를 보여줄 수 있어요. 기본적으로 다음과 같은 옵션들이 있습니다.

• Auto
  Framer에 이미지를 업로드할 때 기본적으로 설정되는 값이며, 업로드한 이미지를 다양한 크기로 자동 변환합니다. 브라우저가 기기 환경에 맞춰 최적의 사이즈를 선택해 보여줍니다.
  
  

• Auto (Lossless)
  원본 이미지 품질을 그대로 유지하는 옵션이기 때문에, 압축 과정에서 생길 수 있는 색 왜곡, 노이즈 감소,
  밴딩 현상 같은 문제를 피할 수 있습니다. 다만 파일 크기가 5~10배 커지기 때문에 성능에 영향을 줄 수 있습니다.
  
  

• Small, Medium, Large
  각각 512px, 1024px, 2048px로 고정된 사이즈입니다. 대부분의 프로젝트에서는 잘 쓰이지 않기에, 추후 업데이트에서 숨겨질 수도 있는 옵션입니다.
  
  

• Full
  원본 업로드 크기 그대로 유지하는 옵션입니다. 예를 들어 6000px 이미지를 업로드하면 모바일에서도 여전히 6000px로 유지되지만, 기본적인 압축은 되어있습니다.

상황별 해상도 옵션 선택하기

• 대부분의 경우, Auto

  : 품질과 성능의 균형이 가장 잘 맞는 기본 옵션입니다.

• 높은 퀄리티의 이미지가 필요할 때, Auto (Lossless)

  : 이미지의 디테일이 중요한 곳에서 쓰면 좋지만, 로딩 속도는 조금 느려질 수 있습니다.

• 정확히 원본 크기를 유지하고 싶을 때, Full

  : 대형 배경 이미지처럼 크기를 줄이면 안 되는 경우 등, 원본 이미지 그대로를 유지하기에 적합합니다.

• 사이즈가 정해져있는 상황일 때, Small/Medium/Large

  : 일반적인 웹사이트에서는 거의 필요하지 않습니다. 꼭 필요한 경우가 아니라면 해당 옵션은 추천하지 않습니다.

마무리

이미지 해상도 선택은 단순히 보기 좋은 화면을 만드는 걸 넘어, 웹사이트 성능과 사용자 경험에 직접적인 영향을 줍니다. 대부분은 Auto 하나로 충분하지만, 상황에 따라 Auto (Lossless)나 Full을 활용하면 디테일까지 잡을 수 있다는 점을 참고해주세요.

자세한 내용은 Framer에서 이미지를 최적화하는 방법 에 대한 문서에서 도움을 받아보시길 바랍니다.

본 글은 Framer 공식 블로그의 ‘Image resolution options’를 번역·각색한 콘텐츠입니다.