넷보드2의 썸네일은 게시글에 등록된 첨부 이미지, 본문에 삽입된 이미지, 유튜브 영상 순서로 확인하여 대표 이미지를 결정합니다. 첨부파일에 이미지가 있으면 해당 이미지를 우선 사용하고, 첨부 이미지가 없으면 본문 안의 첫 번째 이미지가 사용됩니다. 본문에 유튜브 주소가 포함되어 있으면 유튜브 영상의 미리보기 이미지가 자동으로 연결되며, 사용할 이미지가 전혀 없을 때는 스킨에서 준비한 기본 이미지나 이미지 없음 영역을 표시하면 됩니다.
첨부 이미지와 본문 삽입 이미지 모두 썸네일 생성
썸네일 저장 위치: thumbs
썸네일 크기: 312 × 208px
리스트 표시 크기: 156 × 104px
본문 뷰 이미지 크기 :
생성된 썸네일은 재사용
첨부파일은 게시판 데이터의 wr_file 값에서 이미지 확장자를 확인하여 불러오며, 일반적으로 JPG, JPEG, PNG, GIF, WEBP 형식을 사용할 수 있습니다. 새 스킨을 만들 때는 이미지 파일의 실제 경로가 게시판의 data 폴더와 맞는지 확인해야 하며, 파일명에 특수문자나 공백이 포함될 수 있으므로 출력할 때는 파일명 처리를 안전하게 하는 것이 좋습니다.
썸네일의 표시 크기는 스킨의 목적에 따라 결정해야 합니다. 일반 뉴스형 목록에서는 가로 170픽셀, 세로 108픽셀 정도의 비율을 사용하면 제목과 요약문이 함께 보이는 안정적인 구성이 됩니다. 작은 최신글 목록이나 사이드바에서는 가로 80픽셀, 세로 76픽셀 정도가 적당하며, 순위형 목록에서는 가로 76픽셀, 세로 52픽셀처럼 더 작은 크기를 사용할 수 있습니다. 검색 결과나 간단한 카드형 목록에서는 가로 100픽셀, 세로 80픽셀 정도가 무난합니다.
카드형 스킨에서는 썸네일을 고정된 높이로 관리하는 것이 중요합니다. 가로 폭을 카드 전체에 맞추고 세로 높이를 180픽셀에서 240픽셀 사이로 지정하면 데스크톱 화면에서 안정적으로 보입니다. 넓은 카드나 메인 뉴스 카드에서는 16대 9 비율을 사용하고, 세로형 기사 카드나 매거진형 스킨에서는 4대 3 비율을 사용할 수 있습니다. 모바일 화면에서는 카드 폭이 줄어들기 때문에 썸네일의 높이도 150픽셀에서 200픽셀 정도로 조정하는 것이 좋습니다.
썸네일 이미지에는 object-fit: cover 방식을 적용하면 이미지가 영역을 가득 채우면서 카드 크기가 일정하게 유지됩니다. 이 방식은 이미지의 일부가 잘릴 수 있으므로 인물이나 상품처럼 중요한 대상이 있는 이미지에는 object-position: center를 기본값으로 사용하고, 대상이 위쪽이나 아래쪽에 치우친 경우에는 표시 위치를 별도로 조정해야 합니다. 이미지 전체를 잘리지 않게 보여주고 싶다면 object-fit: contain을 사용할 수 있지만, 이미지 주변에 빈 공간이 생길 수 있습니다.
최신글 위젯은 게시판의 글 목록에서 작성일을 기준으로 최신 글을 가져와 화면에 출력합니다. 여러 게시판을 하나의 최신글 위젯에서 보여주는 경우에는 각 게시판의 글을 하나로 합친 뒤 작성일과 글 번호를 기준으로 정렬하고, 최근 글 몇 개만 제한해서 표시하는 방식이 적합합니다. 넷보드2의 최신글 그룹 위젯은 선택된 게시판의 글을 대상으로 최신순으로 정렬하며 기본적으로 다섯 개의 게시글을 가져오는 구조를 사용하고 있습니다.
새 최신글 스킨을 만들 때는 먼저 어떤 게시판을 보여줄지 결정한 다음 게시글 제목, 본문 내용, 작성자, 작성일, 조회수, 첨부파일 정보와 같은 값을 카드에 연결해야 합니다. 제목은 게시글 링크와 함께 출력하고, 본문 내용은 HTML 태그를 제거한 뒤 일정 글자 수로 줄여 요약문으로 사용하는 것이 좋습니다. 날짜는 전체 날짜와 시간을 그대로 표시하기보다 월과 일 또는 상대적인 시간 형식으로 줄이면 카드가 더 깔끔해집니다.
최신글 위젯의 썸네일은 게시글 데이터에서 직접 가져오거나 위젯 내부의 썸네일 추출 함수를 통해 결정할 수 있습니다. 새 스킨에서는 첨부파일 이미지 확인, 본문 이미지 확인, 유튜브 썸네일 확인 순서를 일정하게 유지해야 하며, 이 순서가 바뀌면 같은 게시글이라도 스킨마다 서로 다른 이미지가 표시될 수 있습니다. 이미지가 없는 게시글을 고려하여 기본 이미지를 준비하거나, 썸네일 영역에 이미지 없음 문구와 아이콘을 표시하는 예외 처리가 필요합니다.
최신글 카드의 기본 구조는 썸네일 영역과 정보 영역을 나누는 방식이 가장 관리하기 쉽습니다. 썸네일 영역에는 이미지와 함께 게시판 이름이나 콘텐츠 유형을 표시할 수 있고, 정보 영역에는 카테고리, 제목, 요약문, 작성일을 배치하면 됩니다. 카드 전체를 게시글 링크로 만들면 사용자가 제목뿐 아니라 이미지나 카드 어느 곳을 눌러도 게시글로 이동할 수 있어 사용성이 좋아집니다.
새 스킨의 썸네일 영역에는 가로와 세로 크기를 반드시 고정하거나 비율로 지정해야 합니다. 이미지의 원본 크기에 따라 영역의 높이가 변하면 최신글 카드들이 서로 어긋나고 페이지 전체의 정렬이 무너질 수 있습니다. 따라서 썸네일을 감싸는 영역에는 overflow: hidden을 적용하고, 이미지에는 영역의 너비와 높이를 모두 채우도록 설정하는 것이 좋습니다.
반응형 스킨에서는 데스크톱과 모바일의 썸네일 크기를 다르게 적용해야 합니다. 데스크톱에서는 여러 개의 카드를 그리드로 배치하고 카드 하나당 넓은 썸네일을 사용하며, 태블릿에서는 카드 수를 줄이고 썸네일 높이를 조금 낮추는 방식이 적절합니다. 모바일에서는 한 줄에 한 카드씩 표시하거나 가로 스크롤 구조를 사용하고, 썸네일 높이를 줄여 제목과 요약문이 화면 아래로 너무 밀리지 않도록 해야 합니다.
스킨에서 이미지를 출력할 때는 이미지의 대체 텍스트에 게시글 제목을 넣어 접근성을 확보해야 합니다. 이미지가 삭제되었거나 외부 서버에서 불러오지 못하는 상황을 대비하여 이미지 오류가 발생하면 기본 이미지로 교체하거나 썸네일 영역을 숨기는 처리도 필요합니다. 외부 유튜브 썸네일이나 다른 서버의 이미지를 사용하는 경우에는 해당 서버의 접속 상태와 이미지 제공 정책에 따라 이미지가 늦게 표시되거나 표시되지 않을 수 있으므로 기본 이미지를 함께 준비하는 것이 안전합니다.
새로운 넷보드2 스킨을 제작할 때는 먼저 대표 썸네일 크기를 정하고, 그 크기에 맞춰 카드의 전체 높이와 제목 줄 수를 결정하는 것이 좋습니다. 일반적인 최신글 카드라면 썸네일은 가로 100퍼센트, 높이 180픽셀에서 220픽셀 정도로 설정하고 제목은 두 줄, 요약문은 두 줄까지 표시하면 균형이 좋습니다. 뉴스 목록형 스킨이라면 가로 170픽셀, 세로 108픽셀의 썸네일을 오른쪽이나 왼쪽에 배치하고 제목과 요약문이 남은 공간을 사용하도록 구성하면 됩니다.
넷보드2의 최신글과 스킨을 연결할 때는 위젯 파일이 게시글을 조회하고, 스킨 파일이 조회된 데이터를 화면에 배치하는 역할을 나누는 것이 좋습니다. 게시판 조회와 썸네일 추출은 위젯에서 처리하고, 색상과 크기와 배치와 반응형 스타일은 스킨에서 담당하게 하면 나중에 디자인을 변경하기 쉽습니다. 이렇게 구성하면 같은 최신글 데이터를 사용하면서도 카드형, 뉴스형, 갤러리형, 타임라인형 등 여러 가지 스킨을 독립적으로 제작할 수 있습니다.
새 스킨을 완성한 뒤에는 이미지가 있는 글과 없는 글, 첨부파일만 있는 글, 본문 이미지가 있는 글, 유튜브 주소가 있는 글, 긴 제목을 가진 글, 모바일 화면에서 확인해야 합니다. 특히 이미지가 없는 글에서 카드 높이가 줄어들거나 제목이 겹치지 않는지 확인하고, 이미지 비율이 서로 다른 게시글이 섞여도 모든 카드의 썸네일 높이와 정렬이 일정하게 유지되는지 확인하는 것이 중요합니다.
이미지 최적화란
웹사이트에서 이미지는 품질뿐 아니라 페이지 로딩 속도와 데이터 사용량에도 큰 영향을 줍니다. 원본 이미지를 그대로 업로드하기보다 실제 표시되는 크기에 맞게 줄이고, 적절한 파일 형식과 압축률을 적용하는 것이 좋습니다.
이미지 파일 형식에는 JPG, PNG, GIF, SVG 등 여러 가지가 있습니다. 최근에는 기존 JPG와 PNG보다 용량을 줄이면서도 비교적 좋은 화질을 유지할 수 있는 WebP 형식이 많이 사용되고 있습니다. 더 높은 압축 효율이 필요한 경우에는 AVIF 형식도 사용할 수 있습니다.
- JPG: 사진이나 색상이 많은 이미지에 적합
- PNG: 투명 배경이나 선명한 그래픽에 적합
- GIF: 간단한 애니메이션에 적합
- SVG: 아이콘이나 로고처럼 벡터 이미지에 적합
- WebP: 사진과 그래픽 모두 사용할 수 있으며 용량 절감에 유리
- AVIF: 높은 압축률과 화질을 제공하지만 환경에 따라 호환성을 확인해야 함
썸네일은 원본 이미지 전체를 불러온 뒤 CSS로 크기만 줄이는 것보다, 서버에서 목록에 필요한 크기로 별도 생성하는 방식이 효율적입니다. 예를 들어 156 × 104픽셀로 표시되는 썸네일이라면 원본 전체 크기의 이미지를 그대로 사용하기보다 해당 크기에 맞는 썸네일을 만들어 사용하는 것이 좋습니다.
또한 이미지에는 적절한 width, height, loading="lazy" 속성을 지정하고, 화면 크기에 따라 다른 이미지를 제공하는 srcset을 활용하면 모바일 환경에서도 불필요한 데이터 사용을 줄일 수 있습니다. WebP나 AVIF를 사용할 때는 지원하지 않는 브라우저를 위해 JPG 또는 PNG를 대체 이미지로 준비하는 것도 안전합니다.
이미지 최적화는 파일 형식만 변경하는 것보다 표시 크기에 맞는 리사이즈, 적절한 압축률, 썸네일 재사용, 반응형 이미지 적용을 함께 고려해야 효과적입니다.
이미지 전환 효과에 대해서
이미지 전환에 적용할 수 있는 특수효과는 다음과 같습니다.
페이드인/페이드아웃
이미지가 서서히 나타나고 사라지는 기본 효과입니다. 깔끔하고 부담이 적습니다.
줌인 전환
작은 이미지가 확대되면서 화면을 채웁니다. 현재 그룹5·6에 일부 적용된 방식입니다.
줌아웃 전환
확대된 이미지가 원래 크기로 돌아오며 등장합니다. 고급스럽고 안정적인 느낌을 줍니다.
블러 해제 효과
흐릿한 이미지가 점점 선명해집니다. 이미지 교체가 자연스럽게 느껴집니다.
슬라이드 전환
이미지가 왼쪽, 오른쪽, 위, 아래에서 밀려옵니다. 방향성을 강조할 수 있습니다.
3D 플립 효과
카드가 뒤집히듯 새로운 이미지로 전환됩니다. 눈에 띄지만 자주 사용하면 다소 강할 수 있습니다.
회전 전환
이미지가 살짝 회전하면서 바뀝니다. 상품이나 갤러리 위젯에 잘 어울립니다.
빛 반사 스윕
이미지 위로 밝은 빛이 지나갑니다. 현재 그룹5·6에 추가한 효과와 비슷한 방식입니다.
마스크 확장 효과
원형, 사각형, 대각선 등의 영역이 확장되며 새 이미지가 드러납니다.
클립 패스 전환
대각선이나 곡선 형태로 이미지가 잘리며 교체됩니다. 독특한 디자인에 적합합니다.
픽셀화 전환
기존 이미지가 픽셀처럼 흩어졌다가 새 이미지로 바뀝니다. 디지털·게임 분위기에 어울립니다.
노이즈 글리치 효과
화면에 짧은 노이즈와 흔들림을 넣습니다. 영상, IT, 사이버펑크 스타일에 적합합니다.
RGB 색상 분리 효과
빨강·초록·파랑 색상이 살짝 분리되었다가 정상으로 돌아옵니다. 강렬하고 현대적인 느낌을 줍니다.
파형 왜곡 효과
이미지가 물결처럼 일그러지며 다음 이미지로 전환됩니다. 감성적인 갤러리에 좋습니다.
흔들림 효과
이미지가 짧게 좌우 또는 상하로 흔들립니다. 알림성 콘텐츠나 역동적인 위젯에 적합합니다.
밝기 플래시 효과
화면이 순간적으로 밝아지면서 이미지가 바뀝니다. 짧고 강한 전환에 좋습니다.
컬러 그레이스케일 전환
흑백 이미지에서 컬러 이미지로 변하거나 반대로 바뀝니다. 사진 중심의 콘텐츠에 잘 맞습니다.
포커스 이동 효과
이미지 전체가 아니라 특정 부분에 초점이 맞춰지며 전환됩니다. 인물·제품 이미지에 적합합니다.
그룹5와 그룹6에는 현재 줌인 + 블러 해제 + 빛 스윕 조합이 적용되어 있습니다. 여기에 가장 잘 어울리는 추가 효과는 슬라이드, 마스크 확장, RGB 색상 분리 정도입니다.