오늘의 인사이드
- 한 끗 차이로 노션 예쁘게 쓰기
- 폰트 & 컬러 변경
- 공백의 활용
- 커버 변경용 무료 이미지 사이트 추천
# 노킹님은 어디가시고, 넛쥐 누군데 너.
요란한 등장, 당황하셨나요?
지난 뉴스레터#39 에서 데뷔(?) 했었지만 빠르고 자연스럽게 스-윽 지나가서 저를 기억 못하시는 분들도, 감사하게도 새로 구독 해주셔서 제가 초면인 분들도 계시겠죠?
다시 한번 인사드립니다!🙆♀️🙇♀️
노션인사이드 팀의, 기요미를 담당하고 있는 🥜넛쥐🐹 입니다.
(그 외 직책 : 디자이너 / 노킹님 제자 / 노킹님의 조수 / 노킹님의 열혈팬 / 노킹님 뒤따라다니는 물음표 살인마 / 노션 초보 / 노션 응애 / 애는 착해 / 기타 등등 ······.)
꽤나 중요하고, 무거운 직책이죠 ? 😎
# 놀라셨나요? 저도 놀랐습니다.
저는 디자이너입니다.
그리고, 어느날 노션인사이드(NiN) 팀에 냅다 던져졌죠.
정신을 차려보니
노션인사이드가 지향하는 목표와 추구하는 분위기, 담고있는 의미들을 시각적으로 그려나가고 있었어요.
#시너지 #성장 #생산성 #기록 #데이터 관리 #똑똑하게 #일하기
그렇게 notion 속으로의 새로운 여정을 우리 NiN 팀과 함께 걷게 되었죠. 앞으로 저는 디자이너로서 저희 팀을 ”예쁘게”가꿔나갈 예정이었어요.
네, 그때 까지는요.
# "디자이너님, 노션으로 팀 협업 대시보드 만들어주세요."
“네..? 뭐요? 제가요? 이걸요?”
📔 실제 넛쥐의 노션 페이지(?)
- 아이디 / 비밀번호
- 업무별 숙지사항
- 캘린더. 근데 이제 내 소중한 점심 메뉴를 곁들인······.
비밀일기 🗝📓 처럼 작고 소중한 제 노션으로
방금 어떤 무시무시한걸 만들어 달라고 하신거죠?
팀이 함께 쓸 수 있는,
실시간 공유 & 개인 프로젝트 관리 공간 ..이요?
# 좌충우돌 협업 대시보드 제작기
이건 뭐. 알면 알수록, 파면 팔수록 어려운 노션.
템플릿을 뜯어가며,
노킹님께 수많은 물음표를 던져가며
직접 부딪혀 가며, 요리조리 만져가며
DB를 만들고,
DB를 서로 연결 시키고,
DB를 새 페이지에 불러오고,
DB를 보기 예쁘게 가공하고,
DB 더미를 와장창 만들고….
(처음에 디비...가 뭐에요 질문을 날렸을때, 노킹님의 3초 정적을 잊지 못한다)
그렇게 우리 NiN 팀의
(우당탕탕 좌충우돌 다사다난 피땀눈물) 협업 대시보드 제작을 끝마쳤습니다!! 🎉🥳
슬쩍 공개하는, 하위페이지 넛쥐의 시크릿 스케쥴러 (뿌듯-)😎
<<속보>> “넛쥐, 노션 초보 우리에서 탈출” 노션 어린이로 진화해······.
# 선택지는 줄게, 근데 세 개.
노션을 본격적으로 뜯어봤을 때, 당황스러웠어요.
폰트가 세 개밖에 없다뇨.
내가 디자인했던 모든 것들이 세련된 서체와 감각적인 컬러 배합으로 이루어졌는데, 여기선 아무것도 못 한다니!😱
용납이 안되는 디자이넛-쥐🐹🔥는, 노션을 예쁘게 쓰고 말겠다고 다짐했죠.
갑니다.
🥊 ROUND 1
🤜 디자이너 vs. 노션 🤛
[1] 폰트 & 컬러 변경 - "안 되면 되게 하라"
1. 노션 기능 활용하기 : 수학 공식 블록 & 인라인 수학 공식 블록
1-1. 문구를 넣을 블록영역 삽입
선택 1. 수학 공식 블록 한줄 전체 영역 차지, 반응형 중앙 정렬
선택 2. 인라인 수학 공식 블록 한줄 일부 영역 차지, 고정 정렬
1-2. 수학 공식 블록 영역에 ‘꾸밈’ 명령어 입력
| 예) \color{#FFFFFF}\colorbox{#EA5951}{노션인사이드는 넛쥐가 점령한다} |
참고 1. 크기별 & 폰트별 꾸밈 명령어를 잘 정리해둔 인사이트
노션 수학 공식 블록과 Katex 문법을 활용한 텍스트 꾸미기.zip
2. 인스타그램 글꼴 변환기 활용하기(영문서체) : piliapp
*단점 : 아주아주 가끔씩 광고를 봐줘야 한다
📌 스타일 적용 방법
- 홈페이지에 원하는 텍스트 입력
- 원하는 스타일을 클릭하여 복사
- 원하는 노션 영역에 붙여넣기
너무 쉽죠?
제목에 간단하게 포인트 주기 좋아서
넛쥐가 가장 자주 쓰는 방법이에요!😉
(단, 영문 서체만 가능!)
3. 브라우저 확장 프로그램 활용하기 : Tailored-Notion
📌 적용 방법
- 사용하는 브라우저에 맞는 확장 프로그램 설치 : chrome 버전 / firefox 버전
- 우측 상단 퍼즐 아이콘 클릭
- 확장 프로그램 고정
- 확장 프로그램 클릭
- 폰트 색상 및 세부 설정
- SAVE 클릭!
[2] 공백 활용 - "노션이 나한테 여백을 안줘서, 직접 만들었어."
엔터를 쳐도, 스페이스바를 잔뜩 눌러도 꿈쩍 안하는 가운데 정렬 오른쪽 정렬도 없는 빡빡 & 빽빽한 노션.
선택지좀 더 달란말이에요!! 노션. 😭
노션이 여백을 안 주면, 직접 만들면 되죠. ( + 약간의 집착이 필요할지도. 🤫)
1. 노션에 공백 만드는 법
📌 적용 방법
- 공백 복사하기 오른쪽 공백 기호 드래그 + 복사 >>ㅤㅤㅤㅤ(원하는 여백 만큼)
- 노션 공간에 붙여넣기
- 여백 생성 완료!
*Tip : 공백은 문자처럼 여겨져, 공백의 사이사이에 띄어쓰기를 추가하면 더 세밀한 여백 조정 가능!😎
공백의 활용 1. 버튼 사이즈 통일
버튼의 균형감 & 레이아웃의 정돈
공백의 활용 2. 속성의 그룹화
속성의 그룹화 & 가독성 증대
📌 TIP! 공백이 주는 효과
- 여백이 늘어나 페이지 한층 더 깔끔해지고 정돈되어져 보임.
- 텍스트 그룹에 덩어리감을 주어 정보를 구분하여 인식할 수 있게 함.
- 같은 내용이더라도, 여백을 적절히 주면 훨씬 읽기 쉬운 페이지가 됨.
- 공간은 단순히 비어 있는 게 아니라, 의도된 디자인의 일부라는 것.
📌 보너스 팁:
- 공백뿐 아니라, 구분선도 적절히 활용해서 페이지를 세련되게 쓰자.
- 콜아웃 블록 활용 - 기본 컬러를 활용해 서랍처럼 정리하자!
[3] 커버 이미지 변경 - "내용물? 포장만이라도 예쁘게."
출처 : https://m.blog.naver.com/5700gon/221000679157
커버 이미지만 바꿔줘도, 내 공간의 분위기를 확 바꿀 수 있어요.
내가 뭘 샀든, 포장지만 바꿔도 가치가 달라지는것처럼요!
우선 포장지를 골라볼까요?
넛쥐가 추천하는 무료 이미지 사이트!
1. 포장지 고르기 : 커버 이미지 사이트 추천
➊ 픽사베이 : 해외 최대규모 무료 이미지 사이트. 자료가 많은 만큼 등급별로 이미지 이용 제한도 많으니 주의!
➋ 픽셀즈 : 다양하고 감성적인 무료 이미지 사이트. 동영상 리소스도 있어서 임베드로도 활용 가능!
➌ 픽점보 : 다양한 퀄리티의 무료 이미지 사이트, 카테고리별로 이미지를 찾아볼 수 있다.
➍ 리를비주얼스 : 지금은 업로드를 하고있지 않지만, 기존의 고퀄리티 이미지 리소스를 모두 무료로 사용 가능한 사이트.
➎ 커버.CO (동영상 리소스 사이트) : 노션의 꽃, 임베드! 여러가지 무료 감성 동영상 소스들도 추가해보자!
2. 예쁘게 포장하기 : 커버 이미지 변경
📌 적용 방법
- 페이지 제목 상단에 마우스를 올리면 생기는 “커버 추가” 클릭
- 노션 페이지 우측 상단의 "커버 변경" 클릭
- “갤러리/업로드/링크/Unsplash” 필요한 탭을 활용해 이미지를 삽입한다.
- 이후 “위치변경” 으로 이미지를 원하는 위치에 이동시키면 끝!
📌 보너스 팁:
- 노션에서 제공하는 기본 이미지도 활용 가능하지만, 자신만의 스타일을 담은 이미지를 추가하면 더 멋지다.
- 페이지 대표이미지와, 갤러리 커버 이미지, 텍스트 컬러 등 페이지의 톤 & 매너를 조화롭게 맞추자!
- 한페이지에 컬러가 다섯가지 이상이 들어가면 복잡해 보이니 조심!
- 무료 이미지 사이트로 유명한 Unsplash 사이트는 노션 내부에서 직접 사용할 수 있다!
🚀 마무리하며…
”내가 노션을 메모장으로만 쓰고있었다니..!”
넛쥐에게 노션이란, 단순한 메모장이었어요. 할 일 몇 개 적고, ‘오늘 뭐 먹지?🤤’ 같은 고민을 저장하는 정도였죠. 작업이 필요하면 당연히 피그마, 포토샵, 일러스트레이터와 같은 프로그램을 쓰지, 노션이 “도구”라고 생각되지 않았어요.
하지만 이제는 확실하게 말할 수 있어요! 노션은 단순한 메모장을 넘어선, 일상을 더 효율적이고 풍요롭게 만드는 “만능 도구”🛠️ 라는 것을요!
노션을 감각적으로 꾸미는 이유
노션이 포토샵이나 피그마처럼 무한한 디자인 자유도를 제공하는 것은 아니지만, 그 안에서도 충분히 예쁘고 실용적으로 활용할 수 있어요. 디자인이 단순히 미적인 요소를 넘어 업무 효율성과 기능성을 극대화할 수 있다는 것을 직접 체험했죠!
노션은 심플한 생산성 도구지만, 조금만 다듬으면 나만의 스타일이 담긴 감성적인 작업 공간으로 변신할 수 있어요.
작은 변화만으로도 작업 공간의 분위기는 완전히 달라집니다.
- 컬러와 폰트 설정 : 단순한 텍스트 배열에서 벗어나 내 작업 스타일에 맞는 느낌을 줄 수 있어요.
- 여백의 활용 : 적절한 여백을 활용해 시각적으로 정리된 정보와 공간을 만들 수 있어요.
- 커버 이미지 변경 : 단순한 작업공간에 내 취향을 담으면 다시 오고 싶은, 오래 볼 수 있는 공간으로 만들수 있어요.
그리고 중요한 점! 꾸미는 건 시간 낭비가 아니라는 것!🧐
단순히 예쁘게 만드는 게 아니라, 가독성과 직관성을 높이고, 작업 효율성을 향상시키는 과정이에요.
노션을 단순한 기록 공간이 아니라 머무르고 싶은 공간으로 확장하는 것이 목표였습니다. 기능성과 미적 요소를 동시에 챙길 수 있는 만큼, 여러분도 원하는 스타일을 찾아 적극적으로 활용해 보세요!
그럼, 마지막으로 승패 결과 알려드립니다!
🥊 디자이너 vs. 노션
: 무승부 🤝
또 언젠가 깜짝으로 예쁘고 유용한 꿀팁과 함께 돌아올게요!
여러분의 노션이 더 감성적이고 실용적인 공간으로 변신하길 바라며
넛쥐는 그럼, 이만!
![[구독자 1k 기념] 감사 이벤트 3가지, 구독이 무료 특전팩 대방출!의 썸네일 이미지](https://cdn.maily.so/202503/1742879597918030.png)
의견을 남겨주세요