아이콘 및 에셋 리사이즈

앱과 웹사이트에서 재사용하기 좋은 일정한 이미지 규격을 만드세요.

활용 분야

앱 아이콘음식 메뉴 아이콘캐릭터 라이브러리웹사이트 에셋디자인 시스템

사용 방법

프리셋 선택

현재 프리셋 중에서 목적에 맞는 출력 규격을 고르세요.

핏 모드

"contain"으로 이미지를 영역 안에 맞추거나 "cover"로 전체를 채우세요.

품질 조절

WebP 품질을 70~90으로 조절해 크기와 선명도의 균형을 맞추세요.

재사용 출력

하나의 원본 이미지에서 일관된 크기와 압축 규칙으로 반복 내보내기를 유지하세요.

크기와 프레임 팁

여백 남기기

작은 아이콘에는 여백이 필요합니다. 피사체가 가장자리에 닿으면 앱 그리드나 원형 마스크에서 잘려 보일 수 있습니다.

라이브러리는 정사각 출력 사용

정사각 프리셋을 쓰면 음식, 스티커, 캐릭터처럼 섞인 에셋도 같은 UI 라이브러리 안에서 정렬됩니다.

모든 곳에 같은 크기 사용 금지

목록에는 작은 크기를 쓰고, 후속 편집이나 고밀도 화면이 필요할 때만 큰 출력을 사용하세요.

아이콘과 썸네일 크기를 일정하게 맞추기 위해

ByteCut은 하나의 원본 이미지를 앱 아이콘, 메뉴 썸네일, 디자인 시스템, 재사용 UI 라이브러리에 맞는 정사각형 에셋으로 정리합니다.

해결하는 문제

크기가 다른 원본 이미지를 일정한 출력 규격으로 맞춥니다.
128, 200, 256, 1024px 같은 실무용 정사각 프리셋을 제공합니다.
웹과 앱에서 바로 쓰기 좋은 가벼운 WebP 에셋으로 내보냅니다.
중요한 가장자리가 잘리지 않도록 여백을 두고 피사체를 프리셋 안에 맞춥니다.

제각각인 이미지를 한 세트처럼 보이게 만들기

캔버스는 같은데 피사체가 제각각일 때

전부 256px로 내보낸다고 그리드가 정돈되어 보이지는 않습니다. 리듬을 깨는 건 정사각형 안쪽의 피사체입니다. 어떤 일러스트는 프레임을 꽉 채우고, 다음 것은 여백을 넓게 두고 떠 있고, 또 하나는 중심에서 밀려 있습니다. 정사각 맞춤은 실제 피사체가 어디에 있는지 측정해 캔버스 중앙에 맞춥니다. 출처와 작업자가 달랐던 이미지들도 의도해서 만든 세트처럼 보이게 되는 이유입니다.

자르지 말고 여백을 두세요

원본이 정사각형이 아니면 무언가는 포기해야 합니다. 채우도록 자르면 프레임은 확실히 꽉 차지만, 가장자리에 있던 것이 조용히 잘려나갑니다. 팬 손잡이, 모자 끝, 로고의 아랫부분 같은 것들입니다. 여백을 두면 피사체 전체를 유지하면서 투명 공간이 대신 채워집니다. 아이콘과 썸네일 작업에서는 여백 쪽이 거의 항상 안전한 기본값입니다. 피사체가 조금 작아지는 것은, 잘려나가는 것보다 훨씬 싼 실수이기 때문입니다.

구석의 점 하나가 전체 프레임을 밀어냅니다

모서리에 남은 옅은 점 하나도 이미지의 일부로 계산되고, 단순한 경계 상자는 그것까지 포함하려고 늘어납니다. 눈에 보이는 결과는 이유 없이 한쪽으로 밀려난 피사체입니다. ByteCut은 중심을 정할 때 주된 피사체를 기준으로 측정하고 떨어져 있는 작은 얼룩은 제외합니다. 약간의 잔여 노이즈가 남은 컷아웃도 정사각형 가운데에 오는 이유입니다.

크기는 어디에 보일지 보고 정하세요

한 페이지에 마흔 번 반복되는 메뉴 썸네일과, 다음 분기에 다시 잘라 쓸 소스 에셋은 요구사항이 정반대입니다. 작은 프리셋은 목록 페이지를 가볍게 유지하고, Large 프리셋은 나중에 재활용할 여유를 줍니다. 안전해 보인다고 전부 Large로 내보내면 눈에 보이는 이득 없이 목록 페이지만 무거워지고, 그 파일들은 방문자 모두가 내려받게 됩니다.

키운다고 디테일이 생기지는 않습니다

크기를 줄이는 건 정보를 깔끔하게 버리는 일이지만, 키우는 건 애초에 담기지 않은 것을 되살리지 못합니다. 128px 원본을 1024px로 밀어 올리면 흐릿하고 뭉개진 버전이 될 뿐이고, 처음부터 크게 만든 에셋 옆에 놓이면 더 나빠 보입니다. 한 세트에 저해상도 소스가 하나 섞여야 한다면, 더 큰 원본을 구하거나 세트 전체를 가장 약한 소스가 감당할 수 있는 크기로 맞추세요.

이미지 리사이즈 FAQ

직사각형 이미지를 정사각 아이콘으로 만들 수 있나요?

네. 프리셋 안에 이미지가 잘리지 않도록 맞추고 여백을 정리해 아이콘이나 썸네일로 재사용할 수 있습니다.

메뉴 썸네일은 어떤 크기가 좋나요?

가벼운 메뉴 리스트에는 Food 200px이 좋고, 후속 편집이나 상세 화면용은 Large 프리셋을 권장합니다.

리사이즈 후 투명 배경을 유지할 수 있나요?

네. 배경 제거 결과는 투명 배경을 유지한 상태로 내보낼 수 있습니다.

아이콘에만 쓰는 기능인가요?

아니요. 메뉴 썸네일, 작은 상품 이미지, UI 미리보기, 재사용 이미지 라이브러리에도 같은 방식으로 사용할 수 있습니다.

모든 처리는 브라우저에서 로컬로 실행됩니다. 파일이 서버로 업로드되지 않습니다.

이미지 리사이즈하기