Mac에서 BlurHash 플레이스홀더 생성하기
이미지가 지연 로딩되는 동안 보여 줄 BlurHash 문자열, 아주 작은 흐린 썸네일, 평균 색상을 만들어요.
Mac의 플레이스홀더 만들기
샘플 파일을 사용한 앱 스크린샷.
플레이스홀더 만들기 사용 방법
- 1
이미지를 놓으세요
사이트나 앱에서 지연 로드할 이미지를 하나 또는 여러 개 추가하세요.
- 2
세부 수준 선택
대부분의 이미지에는 4 × 3이 알맞아요. 세부 수준을 높이면 블러가 원본에 더 가까워지지만 문자열이 길어져요.
- 3
추가 옵션 선택
BlurHash와 함께 작은 Base64 썸네일과 평균 색상도 원하면 켜세요.
- 4
생성 클릭
모든 값이 앱에 나열되고, 디코딩한 BlurHash 미리보기와 함께 Placeholders.txt로 다운로드 › OneMacTools의 날짜별 폴더에 저장돼요.
- 5
값을 이미지와 함께 저장하기
각 문자열을 데이터베이스나 콘텐츠 파일의 이미지 주소 옆에 저장하고, 실제 이미지를 불러오는 동안 보여 주세요.
플레이스홀더 만들기의 기능
각 이미지마다 BlurHash 문자열(원하는 디테일 수준으로), 아주 작은 Base64 썸네일, 평균 색상을 받을 수 있어요. 이미지 주소 옆에 저장해 두었다가 실제 이미지가 로드되는 동안 보여 주면 돼요. 디코딩한 각 BlurHash의 미리보기도 함께 저장돼요.
이럴 때 좋아요
- 웹이나 모바일 앱에서 이미지 지연 로딩하기
- 사진을 불러오는 동안 빈 상자가 보이지 않게 하기
- 이미지별 배경 색상 고르기
옵션 설명
- BlurHash 세부 수준
- 4 × 3(권장), 3 × 3, 5 × 4, 6 × 4 또는 9 × 9. 가로와 세로 방향의 색상 성분 수예요. 값이 클수록 이미지의 모양을 더 많이 담고, 4 × 3은 28자 문자열을 만들어요.
- 작은 흐린 썸네일(Base64)
- 기본값은 켜짐이에요. 긴 쪽이 최대 16 px인 아주 작은 JPEG를 데이터 URI로 만들어 <img> 태그나 CSS에 바로 넣고 흐림 효과로 늘릴 수 있어요.
- 평균 색상
- 기본값은 켜짐이에요. 이미지 전체의 평균으로 계산한 hex 색상을 이미지마다 하나씩 만들어, 로딩 중에 단색 배경으로 쓸 수 있어요.
권장 사항
- 이미지 모양에 맞게 세부 수준을 정하세요. 가로 사진은 4 × 3이나 5 × 4, 정사각형이나 세로 사진은 3 × 3이 좋아요.
- 평균 색상을 이미지 컨테이너의 배경으로 쓰세요. 가장 가벼운 자리 표시자이며 디코딩이 필요 없어요.
- 페이지가 로드될 때 흔들리지 않도록 이미지 상자의 너비와 높이를 실제 이미지에 맞추세요.
- 디테일 수준을 고르기 전에 저장된 미리보기를 보고 사람들에게 실제로 어떻게 보일지 확인하세요.
- 이미지를 바꿀 때마다 플레이스홀더를 다시 만드세요. 그렇지 않으면 흐림이 맞지 않아요.
함께 쓸 수 있는 곳
- 입력
- JPEG, PNG, HEIC, WebP 등 Mac에서 열 수 있는 이미지.
- 출력
- 각 이미지의 BlurHash, 선택적 썸네일 데이터 URI와 색상이 담긴 Placeholders.txt, 그리고 디코딩한 각 BlurHash의 너비 400 px PNG 미리보기.
- 값은 앱에도 표시되어 바로 복사할 수 있어요.
플레이스홀더 만들기에 관한 질문
BlurHash란 무엇인가요?
이미지의 흐릿한 버전을 담은 짧은 텍스트 문자열이에요. 앱은 실제 이미지를 다운로드하는 동안 이것을 부드럽고 다채로운 자리 표시자로 디코딩해요.
이미지의 BlurHash를 생성하려면 어떻게 하나요?
이미지를 플레이스홀더 만들기에 놓고 생성을 클릭하세요. 이미지마다 BlurHash 문자열이 앱과 Placeholders.txt에 표시돼요.
BlurHash 세부 수준은 얼마로 해야 하나요?
4 × 3이 좋은 기본값이며 28자 문자열을 만들어요. 성분을 늘리면 모양이 더 살아나지만 문자열이 길어져요.
BlurHash와 아주 작은 썸네일 중 무엇을 써야 하나요?
BlurHash는 짧지만 앱에 작은 디코더가 필요해요. 작은 썸네일은 브라우저가 바로 표시할 수 있는 데이터 URI지만 문자열이 더 길어요. 둘 다 만들어 보고 고를 수 있어요.
평균 색상은 어떻게 사용하나요?
이미지 컨테이너의 배경 색상으로 설정하세요. 바로 표시되고 이미지의 전체 색조와 어울려요.
애초에 플레이스홀더를 왜 넣나요?
이미지를 불러오는 동안 빈 상자나 레이아웃이 튀는 현상을 막아 주므로 페이지와 앱이 더 빠르게 느껴져요.
플레이스홀더 만들기이(가) 내 파일을 업로드하나요?
아니요. 플레이스홀더 만들기은(는) 전적으로 Mac에서 실행되므로 파일이 Mac 밖으로 나가지 않고 오프라인에서도 작동해요.
플레이스홀더 만들기이(가) 원본 파일을 바꾸나요?
아니요. 결과는 다운로드 › OneMacTools의 날짜별 폴더에 새 파일로 저장되고, 따로 적힌 옵션을 켜지 않는 한 원본은 그대로 남아요.
플레이스홀더 만들기에는 무엇이 필요한가요?
macOS 26 이상이 설치된 Mac만 있으면 돼요. 따로 설치할 것은 없어요.
다음으로 할 일
관련 이미지 도구
PNG, JPEG, HEIC, AVIF, TIFF 간에 변환해요. WebP, RAW 등도 읽을 수 있어요.
이미지 크기 조절긴 변, 정확한 픽셀, 비율 또는 원하는 DPI에서의 cm, mm, 인치 인쇄 크기로 크기를 조절해요.
이미지 자르기화면비나 정확한 영역으로 자르거나 단색 테두리를 자동으로 잘라내세요 — 사진 한 장이든 폴더 전체든.
이미지 회전 및 뒤집기사진을 한 번에 회전하거나 반전해요.
스크린샷 꾸미기스크린샷을 여백, 둥근 모서리, 부드러운 그림자와 함께 그라디언트 위에 놓아요.
이미지 워터마크사진에 이름, © 표기 또는 로고를 모서리에 넣거나 이미지 전체에 바둑판식으로 넣으세요.
