이미지 / 커버 관리
출처: 이미지 / 커버 관리 발행일: 2023-11-9 최종 편집: 2024-9-20 원래 섹션: 사이트 설정 요약: NotionNext의 커버 이미지와 배경 이미지를 수정하는 방법
사이트 이미지는 어떻게 수정하나요?
주의: 사이트 이미지 크기는 전체 사이트 성능에 직접 영향을 줍니다.
이미지가 선명하게 보이는 범위에서 파일 크기를 가능한 한 줄이는 것을 권장합니다. 이미지 크기를 조정하고 압축하세요. 가능하다면 webp 형식으로 변환한 뒤 업로드하는 것을 추천합니다.
사이트 아바타 업로드
Notion 템플릿 왼쪽 위 아이콘은 사용자 아바타에 대응합니다. 클릭한 뒤 Upload an image → Choose an imgae를 선택해 로컬 이미지를 업로드할 수 있습니다.
업로드에 성공하면 각 테마의 아바타 위치에 반영됩니다. 예를 들어 Hexo의 아바타는 다음과 같습니다.
사이트 커버 이미지 수정
hexo, matery 같은 테마의 첫 화면은 사용자 커버 이미지를 사용합니다.
수정 방법은 다음과 같습니다.
Notion 노트 상단 커버 이미지 오른쪽에서 Change cover를 클릭합니다.
Notion 기본 Gallery, 직접 업로드한 이미지, 외부 Link, Notion이 추천하는 Unsplash 이미지 라이브러리를 선택할 수 있습니다.
글 커버 이미지
사이트 커버 이미지를 수정하는 것과 비슷하게 상단의 change cover를 클릭하면 됩니다. 수정 후에는 블로그 목록의 이미지에도 동기화됩니다.
블로그 커버는 Notion의 글 커버를 우선 읽습니다. Notion 글의 커버가 비어 있으면 RANDOM_IMAGE_URL 내용을 표시합니다.
커버를 설정하지 않은 경우에는 Add Cover 버튼이 표시됩니다.
커버 수정 기능에서 Remove를 클릭하면 커버를 제거할 수 있습니다.
외부 링크 사용 팁
Notion에서 커버를 link 타입으로 설정하고 랜덤 이미지 API 주소를 넣으면, 사이트를 열 때마다 랜덤 커버를 동적으로 가져옵니다. 여러 글이 같은 랜덤 API를 커버 주소로 사용해도 각 글의 커버 이미지는 서로 다르게 표시될 수 있습니다.
예시:
Unsplash 랜덤 API
각 커버 이미지를 https://source.unsplash.com/random으로 설정했습니다. 이는 Unsplash가 제공하는 랜덤 이미지 링크이며, 열 때마다 다른 이미지로 이동합니다.
Unsplash는 이미지 스타일, 작성자 등을 지정할 수 있습니다. 자세한 도움말은 https://zhuanlan.zhihu.com/p/139132649를 참고하세요.
사이트에서 보이는 이미지 효과입니다. 페이지를 새로고침하면 커버 이미지가 다시 생성됩니다.
Unsplash API 외에도 임의의 랜덤 이미지 API를 지원합니다. 예를 들어 이미지 API를 사용할 수 있습니다.
eees 랜덤 이미지 API
커버를 이미지 API 주소로 설정합니다: https://tuapi.eees.cc/api.php?category=dongman&type=302
이 API의 사용 방법은 공식 설명 https://tuapi.eees.cc/를 참고하세요.
효과는 다음과 같습니다.
