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

📌 오늘의 인사이드

여러분

저 왔어요.

넛쥐 왔어요!!

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

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

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

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

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

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

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

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

자, 그럼 가볼까요?

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

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

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

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

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

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

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

(네, 노션에서요!)

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

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

📌 적용 방법

노션이 안 된다고 하면, 되게 만들면 됩니다! 🐹🔥

[2] 정보처리 속도 높이기 - "읽기 전에 인식 하도록!"

"이번 주 회의록이 어디 있지? 오늘 일정은 어느 거지..?🤔" 실시간으로 쌓여가는 데이터들을 보며 한 줄 한 줄 데이터의 날짜를 눈으로 훑어보고 있진 않으신가요? (넛쥐의 경험담)

디자이너 넛쥐는 이게 비효율적으로 느껴졌어요. 텍스트보다는 시각적 정보가 추가되면 정보의 인식 속도가 빨라지거든요!

그래서 넛쥐는 0000을 활용해 볼 거예요!