섬네일

3. 구현 및 기술적 측면

섬네일은 대역폭과 다운로드 시간을 줄이기 위해 원본 이미지의 별도 사본으로 웹 페이지에 구현되는 것이 일반적이다.^{[5][6][7][8][9]} HTML 요소나 클라이언트 측 스크립팅을 사용하여 사용자의 브라우저가 이미지를 축소하도록 하는 방식도 있지만, 이 경우 더 작은 이미지 사본을 사용하는 것이 아니므로 대역폭이 절약되지 않는다. 또한, 브라우저 크기 조정에 따른 시각적 품질도 이상적이지 않은 경우가 많다.

이미지의 상당 부분을 표시하는 방식으로, 인식성을 유지하면서 더 작은 섬네일을 만들 수도 있다. 예를 들어, 사람의 전신 초상화를 섬네일로 만들 때, 인물 전체를 희미하게 보여주는 것보다 얼굴 부분을 약간 축소하여 보여주는 것이 더 효과적일 수 있다. 그러나 이러한 방식은 이미지의 실제 내용에 대해 오해를 불러일으킬 수 있으므로, 검색이나 카탈로그 탐색보다는 예술적인 프레젠테이션에 더 적합하다.

다양한 플랫폼 및 서비스에서 각기 다른 섬네일 크기를 사용한다. '비네트'는 섬네일보다 크고, 긴 축이 250 픽셀을 넘지 않는 이미지를 지칭하는 용어이다.

3. 1. 구현 방식

3. 2. 크기 및 해상도

3. 3. 생성 방법

3. 4. 생성 팁

• 축소 알고리즘: 일반적인 확대/축소와 달리 섬네일 제작처럼 크게 축소할 때는 알고리즘 선택이 중요하다. Lanczos resampling|랜초스 리샘플링^영어이 가장 적절하지만, 고도의 저역 통과 필터(LPF)를 사용할 수 없다면 주변 픽셀 평균화도 효과적이다.
• 파일 형식: PNG는 인덱스 컬러로 색상 수를 줄여 파일 크기를 줄일 수 있다. JPEG는 Q값을 낮춰 파일 크기를 줄일 수 있지만, 과도하게 낮추면 품질이 저하된다.
• 메타데이터: 불필요한 메타데이터를 제거하면 파일 크기를 줄일 수 있다.
• 트리밍: 트리밍은 시인성을 유지하면서 파일 크기를 줄이는 효과적인 방법이지만, 사용자의 기대를 고려하여 신중하게 결정해야 한다.
• 크기: 섬네일은 내용을 식별할 수 있을 정도로 충분히 커야 한다.

4. 활용 및 소프트웨어

섬네일은 웹 페이지에서 원본 이미지의 별도 사본으로 구현되어, 페이지 로딩 속도를 높이고 대역폭을 절약하는 데 기여한다. 사용자는 섬네일을 통해 전체 이미지를 다운로드하지 않고도 내용을 미리 볼 수 있다.^[12] 인물 사진의 경우 전신보다 얼굴을 확대하여 보여주는 것과 같이 이미지의 일부분을 확대하여 보여주는 방식으로 섬네일의 인식성을 높일 수 있다.

섬네일은 파일 탐색기에서 파일 내용을 빠르게 확인하거나, 동영상 플랫폼에서 동영상 내용을 미리 보거나, 온라인 스토리지에서 저장된 파일 내용을 확인하기 위해 활용된다. 이미지 편집 및 뷰어 소프트웨어에서는 이미지 목록 관리를 위해 섬네일을 사용하며, 소셜 미디어에서는 게시물을 미리 볼 수 있도록 섬네일을 제공한다.

마이크로소프트 윈도우 95 이후의 윈도우 탐색기나, macOS의 파인더 등, GUI를 채용하고 있는 운영 체제의 표준 파일 관리자는, 자주 사용되는 일반적인 형식의 이미지나 문서의 썸네일을 표시하는 기능을 표준적으로 갖추고 있다. 또한 폴더(디렉터리) 내에 포함된 파일의 썸네일을 일반 폴더 아이콘 안에 합성 표시하는 기능이 구현되어 있는 경우도 있다.

마이크로소프트 윈도우 비스타 이후에는, 윈도우 에어로의 기능 중 하나로 '라이브 작업 표시줄'이 추가되었다. 앱의 작업 표시줄 버튼에 마우스를 올리면 해당 앱 창의 내용이 작은 썸네일 이미지로 팝업 표시된다. 또한, 썸네일 이미지에 마우스를 올리면 해당 창을 활성화하지 않고 미리 볼 수 있다. 이 기능은 설정으로 비활성화할 수도 있다.^[14]

온라인 스토리지 서비스인 구글 드라이브나 원드라이브 등에도 썸네일 표시 기능이 구현되어 있다.

이미지 열람 및 편집, 인쇄물 제작용 응용 소프트웨어에서는, 일람성 및 식별성을 높이기 위해 썸네일 표시 및 인쇄를 지원하는 경우가 많다.

4. 1. 활용 분야

4. 2. 썸네일 표시 기능이 있는 소프트웨어

마이크로소프트 윈도우 95 이후의 윈도우 탐색기나, macOS의 파인더 등, GUI를 채용하고 있는 운영 체제의 표준 파일 관리자는, 자주 사용되는 일반적인 형식의 이미지나 문서의 썸네일을 표시하는 기능을 표준적으로 갖추고 있다. 또한 폴더(디렉터리) 내에 포함된 파일의 썸네일을 일반 폴더 아이콘 안에 합성 표시하는 기능이 구현되어 있는 경우도 있다.

마이크로소프트 윈도우 비스타 이후에는, 윈도우 에어로의 기능 중 하나로 '라이브 작업 표시줄'이 추가되었다. 앱의 작업 표시줄 버튼에 마우스를 올리면 해당 앱 창의 내용이 작은 썸네일 이미지로 팝업 표시된다. 또한, 썸네일 이미지에 마우스를 올리면 해당 창을 활성화하지 않고 미리 볼 수 있다. 이 기능은 설정으로 비활성화할 수도 있다.^[14] Desktop Window Manager (DWM)에는 임의의 창의 썸네일을 다른 창에 그리는 기능도 제공된다.^[15]

온라인 스토리지 서비스인 구글 드라이브나 원드라이브 등에도 썸네일 표시 기능이 구현되어 있다.

이미지 열람 및 편집, 인쇄물 제작용 응용 소프트웨어에서는, 일람성 및 식별성을 높이기 위해 썸네일 표시 및 인쇄를 지원하는 경우가 많다.

4. 3. 확장 기능

• 윈도우 셸 확장: 기존의 `IExtractImage`/`IExtractImage2` 또는 Windows Vista 이후의 `IThumbnailProvider` 인터페이스를 구현하는 커스텀 COM 컴포넌트를 제작하여 셸 확장 COM 서버로 레지스트리에 등록한다^[17]. 예를 들어 Windows에 Adobe Acrobat/Adobe Reader를 설치하면 PDF용 셸 확장 컴포넌트가 설치되어, 탐색기에서 PDF 파일의 섬네일 미리보기를 표시할 수 있게 된다^[18].
• macOS/iOS 퀵 룩(Quick Look) 프레임워크^[19][20]

참조

_[1] 웹사이트 Online Etymology Dictionary http://www.etymonlin[...] Online Etymology Dictionary 2010-03-05
_[2] 웹사이트 AllWords.com http://www.allwords.[...] 2010-03-05
_[3] 웹사이트 Random House Word of the Day http://www.randomhou[...] 2010-03-05
_[4] 웹사이트 OPodictionary http://podictionary.[...] 2010-03-05
_[5] 웹사이트 About the Digitization and Cataloging Program at The Denver Public Library http://photoswest.or[...] Photoswest.org 2013-03-13
_[6] 웹사이트 CDlib.org http://www.cdlib.org[...] California Digital Library 2013-03-13
_[7] 웹사이트 Local History Digitisation Manual http://www.libraries[...] Libraries.vic.gov.au 2013-03-13
_[8] 웹사이트 The International Dunhuang Project - Standards for Digitisation and Image Management http://idp.bl.uk/pap[...] IDP.bl.uk 2013-03-13
_[9] 웹사이트 Add video thumbnails on YouTube - Computer - YouTube Help https://support.goog[...] 2023-02-02
_[10] 웹사이트 サムネール - 印刷用語集 https://www.jfpi.or.[...]
_[11] 웹사이트 サムネール（サムネイル） 【印刷用語集】｜バンフーオンラインショップ https://www.vanfu.co[...]
_[12] 웹사이트 Adobe Photoshop File Formats Specification https://www.adobe.co[...]
_[13] 웹사이트 FMV Q&A - ［Windows 98 / Windows 95］フォルダの画像を縮小版として、一覧表示する方法を教えてください。 - FMVサポート : 富士通パソコン https://www.fmworld.[...]
_[14] 웹사이트 FMV Q&A - [Windows Vista] タスクバー上のボタンをポイントしたときにウィンドウをサムネイル表示する機能（ライブタスクバー）を無効にする方法を教えてください。 - FMVサポート : 富士通パソコン https://www.fmworld.[...]
_[15] 웹사이트 DWM Thumbnail Overview - Win32 apps | Microsoft Learn https://learn.micros[...]
_[16] 웹사이트 サムネールと用紙サイズより大きいドキュメントのプリント https://helpx.adobe.[...]
_[17] 웹사이트 Building Thumbnail Handlers - Win32 apps | Microsoft Learn https://learn.micros[...]
_[18] 웹사이트 Windows Explorer で PDF のサムネールプレビューを有効にする https://helpx.adobe.[...]
_[19] 웹사이트 QuickLook | Apple Developer Documentation https://developer.ap[...]
_[20] 웹사이트 Providing Thumbnails of Your Custom File Types | Apple Developer Documentation https://developer.ap[...]
_[21] 웹사이트 カスタム ドキュメント プロバイダを作成する  |  Android Developers https://developer.an[...]
_[22] 웹사이트 G Suite Developers Blog: Thumbnails for your Custom File Types https://gsuite-devel[...]
_[23] 웹사이트 ファイル メタデータの管理  |  Google Drive  |  Google for Developers https://developers.g[...]
_[24] 웹사이트 Retrieve thumbnails for a file or folder - OneDrive API - OneDrive dev center | Microsoft Learn https://learn.micros[...]
_[25] 웹사이트 Creating Thumbnail Images - Win32 apps | Microsoft Learn https://learn.micros[...]
_[26] 웹사이트 Image::GetThumbnailImage (gdiplusheaders.h) - Win32 apps | Microsoft Learn https://learn.micros[...]
_[27] 웹사이트 方法: サムネイル イメージを作成する - Windows Forms .NET Framework | Microsoft Learn https://learn.micros[...]
_[28] 웹사이트 How to: Load an Image as a Thumbnail - WPF .NET Framework | Microsoft Learn https://learn.micros[...]
_[29] 웹사이트 UWP アプリでのサムネイル画像のガイドライン - UWP applications | Microsoft Learn https://learn.micros[...]
_[30] 웹사이트 StorageFile.GetThumbnailAsync Method (Windows.Storage) - Windows UWP applications | Microsoft Learn https://learn.micros[...]
_[31] 웹사이트 ThumbnailUtils  |  Android Developers https://developer.an[...]
_[32] 웹사이트 MediaStore.Images.Thumbnails  |  Android Developers https://developer.an[...]
_[33] 웹사이트 MediaStore.Video.Thumbnails  |  Android Developers https://developer.an[...]