지난주 클라이언트용 노션 페이지를 만들다가 또 같은 실수를 했어요. 분명 깔끔한 이미지를 업로드했는데, 막상 페이지를 열어보니 이미지가 늘어나서 뿌옇게 보이더라고요. 커버 이미지 크기를 대충 맞췄던 게 문제였죠.
"노션 커버 이미지 크기가 얼마지?"라고 검색해보신 적 있으시죠? 저도 매번 까먹어서 검색하다가, 이번에 아예 정리해봤어요. 데스크톱, 모바일, 태블릿별로 다 다른 권장 크기가 있거든요.
기기별 노션 커버 이미지 최적 크기
결론부터 말씀드릴게요. 기기별로 권장하는 픽셀 크기가 달라요.
데스크톱: 1500 × 600 픽셀
모바일: 1170 × 445 픽셀
태블릿: 1170 × 290 픽셀
여기서 중요한 건, 이게 최소 크기라는 거예요. 더 큰 이미지를 올려도 되지만, 작은 이미지는 절대 안 돼요. 노션이 이미지를 강제로 늘리는데, 그럼 화질이 깨져서 흐릿하게 보이거든요.
처음 노션 쓸 때 1000×400짜리 이미지 올렸다가 픽셀 깨진 커버로 일주일 썼던 기억이 나네요. 당황스러웠죠.
3:1 비율 규칙을 기억하세요
정확한 픽셀 크기로 이미지를 만들기 어려우시다면, 가로:세로 = 3:1 비율만 지키면 돼요. 그리고 높이가 각 기기 기준을 넘는지만 확인하세요.
데스크톱: 높이 최소 600px
모바일: 높이 최소 445px
태블릿: 높이 최소 290px
예를 들어 1800×600 이미지도 괜찮아요. 3:1 비율이고 높이가 600px이니까요. 나중에 노션에서 위치만 조정하면 됩니다.
해상도는 72 DPI면 충분해요
디자이너 분들이 자주 물어보시는 부분인데요. 웹용이니까 72 DPI로 저장하세요. 300 DPI는 인쇄용이고, 노션 커버로는 오버스펙이에요. 파일만 무거워져서 페이지 로딩만 느려집니다.
노션 커버 이미지 추가하는 방법
이론은 여기까지고, 실제로 어떻게 올리는지 단계별로 볼게요.
1단계: 페이지 제목에 마우스 올리고 '커버 추가' 클릭
노션 페이지 맨 위, 제목 영역에 마우스를 올리면 'Add cover' 버튼이 나타나요. 클릭하세요.
2단계: 자동 배정된 커버 이미지 변경하기
노션이 랜덤으로 이미지를 하나 골라줘요. 마음에 안 들면 커버 이미지 위에 마우스를 올려서 'Change cover' 버튼을 누르세요.
3단계: 원하는 방식으로 새 이미지 추가
'Change cover'를 누르면 팝업창이 뜨는데, 여기서 선택지가 4가지예요.
a. 노션 기본 갤러리에서 고르기
노션이 제공하는 이미지 라이브러리에요. 스크롤하면서 페이지 분위기에 맞는 걸 골라보세요. 빠르긴 한데, 다른 사람들도 많이 쓰는 이미지라 개성은 좀 떨어져요.
b. 내 컴퓨터에서 업로드
'Upload' 옵션을 누르고 'Upload file' 버튼을 클릭하세요. 로컬 드라이브에서 이미지를 선택할 수 있어요.
여기서 주의! 이미지 가로 폭이 최소 1500px은 되어야 데스크톱에서 깨지지 않아요. 모바일만 고려한다면 1170px도 괜찮고요.
c. 웹 링크로 이미지 삽입
'Link' 옵션을 선택한 뒤, 공개된 이미지 URL을 붙여넣고 'Submit' 버튼을 누르세요. 외부 사이트에 호스팅된 이미지를 쓸 때 유용해요.
단, URL이 공개 상태여야 해요. 로그인이 필요한 링크나 임시 링크는 나중에 이미지가 안 보일 수 있어요.
d. Unsplash에서 검색해서 삽입
제가 제일 자주 쓰는 방법이에요. Unsplash는 무료 고해상도 이미지 플랫폼인데, 노션과 연동돼 있거든요.
검색창에 키워드만 입력하면 관련 이미지가 쫙 나와요. 저작권 걱정 없고 퀄리티도 좋아서 추천드려요.
4단계: 이미지 재배치로 원하는 부분만 보이게
이미지를 올렸는데, 정작 보여주고 싶은 부분이 잘려 있을 때 있죠? 저도 Unsplash에서 멋진 풍경 사진 골랐는데, 하늘만 보이고 산은 안 보이더라고요.
이럴 땐 'Reposition' 기능을 쓰세요. 커버 이미지 위에 마우스를 올리면 'Reposition' 버튼이 보여요. 클릭하세요.
그 상태로 이미지를 클릭한 채로 드래그하면 위아래로 움직여요. 원하는 위치가 나오면 마우스를 놓고 'Save position'을 눌러서 고정하세요.
커버 높이는 고정이라 조절이 안 돼요. 위치만 바꿀 수 있어요.
자주 묻는 질문 (FAQ)
노션 커버 이미지란 뭔가요?
노션 페이지 맨 위에 나타나는 배너 이미지예요. 페이지 분위기를 설정하는 시각적 요소죠. 없어도 페이지는 작동하지만, 있으면 훨씬 전문적으로 보여요.
내 사진을 커버로 쓰려면?
위에서 설명한 대로 진행하면 돼요.
페이지 제목에 마우스 올리고 'Add cover' 클릭
자동 이미지 위에 마우스 올려서 'Change cover' 클릭
'Upload' 선택 후 'Upload file' 버튼 클릭
내 컴퓨터에서 이미지 선택해서 업로드
이미지 크기는 최소 1500×600 이상 권장드려요.
커버 이미지 삭제는 어떻게 하나요?
2단계면 끝나요.
커버 이미지 위에 마우스 올려서 'Change cover' 클릭
팝업창에서 'Remove' 옵션 선택
삭제하면 원래대로 빈 페이지가 돼요. 나중에 다시 추가할 수도 있고요.
노션 커버가 안 맞는데 어떻게 하죠?
이미지가 너무 크거나 비율이 안 맞아서 그래요. 노션이 자동으로 잘라내거든요.
해결 방법은 두 가지예요.
방법 1: 처음부터 권장 크기로 이미지 만들기 (1500×600)
방법 2: 'Reposition' 기능으로 보이는 영역 조정하기
개인적으론 방법 2가 더 편해요. 이미지 편집 툴 없이도 노션 안에서 바로 조정할 수 있으니까요.
노션 커버 이미지, 처음엔 사소한 디테일 같지만 페이지 첫인상을 좌우해요. 특히 클라이언트용 문서나 포트폴리오 페이지라면 더욱 신경 써야 하고요.
크기 기준만 기억하면 돼요. 데스크톱 1500×600, 모바일 1170×445, 태블릿 1170×290. 아니면 3:1 비율만 지키고 높이를 각 기기 기준에 맞추거나요.
다음번에 노션 페이지 만들 때 이 가이드 참고해보세요. 흐릿한 커버 이미지 때문에 스트레스 받는 일은 이제 없을 거예요.
