온라인에서 이미지에 둥근 모서리 넣는 방법

Source: Dev.to

둥근 모서리를 적용하면 스크린샷, 아바타, 제품 이미지, 블로그 그래픽 등이 더 깔끔해 보입니다. 효과는 작지만 현대적인 웹사이트, 프레젠테이션, 소셜 포스트 등에 이미지가 더 잘 어울리게 합니다.
가장 쉬운 둥근 모서리 적용 방법은 다음에 무엇을 할지에 따라 달라집니다.

이미지를 웹사이트에만 사용할 경우 CSS만으로 충분할 수 있습니다:

img {
  border-radius: 24px;
}

하지만 CSS는 새로운 이미지 파일을 만들지는 않습니다. 편집된 이미지를 다운로드해서 다른 곳에서 사용해야 한다면, 결과물을 내보낼 수 있는 도구가 필요합니다.

이때 브라우저 기반 이미지 도구가 유용합니다.

다음 주소를 엽니다: https://image-corners.utilforge.xyz

• 이미지를 도구에 끌어다 놓으세요.
• 코너 반경 슬라이더를 조절하세요.
• 이미지가 배경과 구분되어야 한다면 테두리를 추가하세요.
• 투명 배경 또는 실색 배경을 선택하세요.
• PNG, JPG, WebP 중 하나로 내보내세요.

PNG는 투명한 코너가 필요할 때 보통 가장 좋은 선택입니다. 투명도가 필요 없는 사진이라면 JPG도 괜찮습니다. 웹용으로는 WebP가 현대적인 좋은 옵션입니다.

둥근 모서리는 특히 다음에 유용합니다:

• 앱 스크린샷
• 랜딩 페이지 이미지
• 제품 문서
• 블로그 그래픽
• 아바타
• 소셜 미디어 포스트
• 썸네일 이미지

항상 필요한 것은 아닙니다. 이미지가 이미 디자인된 프레임 안에 있다면 추가적인 라운딩이 불필요하게 보일 수 있습니다. 하지만 원본 스크린샷에는 약간의 반경과 여백을 주면 이미지가 더 의도된 느낌을 줍니다.

이미지 가장자리가 페이지와 섞여 보일 때는 테두리를 사용하세요. 흰색이나 매우 밝은 배경의 스크린샷에서 흔히 발생합니다.

• 얇은 회색이나 차분한 색상의 테두리면 보통 충분합니다.
• 두꺼운 테두리는 소셜 그래픽에 사용할 수 있지만 문서나 제품 페이지에서는 무겁게 보일 때가 많습니다.

다양한 페이지 색상 위에 자연스럽게 배치하고 싶다면 투명 배경을 사용하세요.

일관된 카드 형태의 이미지를 원한다면, 특히 소셜 미디어, 슬라이드덱, 썸네일 등에 실색 배경을 사용하세요.

가장 자연스러운 둥근 모서리는 보통 미묘합니다. 일반 스크린샷의 경우 16px에서 48px 사이의 반경을 시도해보고, 이미지 크기에 따라 조정하세요.