(노션과 맞장 뜬) 디자이너가 알려주는, 한 끗 차이로 노션 예쁘게 쓰기 2탄

📌 오늘의 인사이드

디자이너가 알려주는, 한 끗 차이로 노션 예쁘게 쓰기! 2탄
- 반응형 버튼으로 만들기 - "안되면 되어 보이게(?) 하라!"
- 정보처리 속도 높이기 - "읽기 전에 인식 하도록!"
- 노션으로 메뉴 바 만들기 - "내 노션을 홈페이지 처럼!"
🎁 넛쥐가 준비한 무료 아이콘 팩, 무려 56종!

생산성에 대한 다양한 인사이트, 발빠르게 받아보고 싶다면?

노션을 중심으로 생산성을 올려 삶의 질을 높이는 인사이트를 전하는
노션인사이드 뉴스레터는 매주 화요일에 발송되고 있어요!

다양한 생산성 소식에 더해 한발 앞서가는 크리에이터 분들과 함께하는 이벤트 소식을
늦지 않게 받아보고 싶으시다면 메일리에서 구독해주세요🥰

첨부 이미지

여러분
저 왔어요.

넛쥐 왔어요!!

첨부 이미지

넛쥐의 첫번째 뉴스레터, 기억하시나요?

지난 뉴스레터에서 어떻게든 노션을 예쁘게 쓰기 위한

디자이넛.쥐 VS 노션

고군분투기를 들려드렸어요.

그런데 생각보다 넛쥐와 비슷한 고충을 겪고있던 구독이들이 많았던거 있죠?!
(어떻게 알았나고요!? 반응이 좋았거든요 😎✨)

그래서 돌아왔습니다.
2탄 으로요!

더 레벨업해서 돌아온 넛쥐.

무려 예쁜데, 사용성까지 높여주는 꿀팁들로 낋여왔습니닷!

(1탄의 업그레이드 버전이라고 할 수 있죠.)

자, 그럼 가볼까요?

🥊 ROUND 2
🤜 디자이너 vs. 노션 🤛

첨부 이미지

[1] 반응형 버튼으로 만들기 - "안 되면 되어 보이게(?) 하라!"

(지난 편에서 공백 기호로 버튼 너비 맞추는 법 배우셨죠? 오늘은 그 공백 기호로 한 단계 더 나아갈 거예요!)

전 세계 인구의 약 85~90%가 오른손잡이인 거, 알고 계셨나요?
즉, 지금 이 뉴스레터 읽는 분들 대부분이 오른손잡이일 확률이 높다는 거죠!

스마트폰을 오른손으로 쥐었을 때, 엄지손가락이 자연스럽게 닿는 영역이 따로 있어요.
바로 화면 우측이에요. 그래서 잘 만든 앱들은 중요한 버튼일수록 오른쪽 하단 영역에 몰아둬요.

이걸 바로 엄지존(Thumb Zone) 이라고 해요.

그런데 노션 버튼은요? 좌측 정렬 고정에, 텍스트 길이만큼만 버튼 영역이 생기죠.
엄지가 자연스럽게 가는 바로 그 자리가, 터치 청정 구역인 거에요!

그래서 지금부터 만들어볼 건, 모바일이든 PC든 보는 화면에 따라 버튼 가로 길이가 자동으로 늘었다 줄었다 하는 반응형 버튼이에요.

(네, 노션에서요!)

첨부 이미지

텍스트는 좌측 정렬 그대로 두고, 오른쪽에 공백 기호를 화면을 넘칠 만큼 잔뜩 채워넣는 거예요.
노션은 텍스트가 넘치면 자동으로 말줌임표가 달리며 잘려 보이는데, 이걸 역으로 활용하는 거죠!

공백이 화면 너비만큼 꽉 채워지니까, 어느 화면 크기에서든 버튼이 가로로 꽉 차 보이는
가짜(?) 반응형 버튼 완성! 🎉

📌 적용 방법

‘/버튼’ 입력 → 버튼 블록만들기
텍스트 입력 후, 오른쪽에 공백 기호(ㅤㅤㅤㅤㅤㅤ)를 넘칠 만큼 잔뜩 붙여넣기 공백기호 >>>>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ<<<<< (많이 채워넣을수록 좋아요! 넓은 화면에서도 버튼이 끊겨 보이지 않도록! 마구마구 아끼지 마세요 😉)
PC에서도, 모바일에서도 화면 너비에 맞게 꽉 차 보이는 버튼 완성!🎉