노션 (Notion) 디자인 철학 - 블록을 드래그 앤 드롭하여 레고 쌓기

안녕하세요. 디자인하는 창업가입니다. 

 

요즘 소위 일잘러들과 얼리어답터들 사이에서 노션(Notion)이라는 노트 생산성 앱이 많은 주목을 받고 큰 인기를 끌고 있습니다. 특히 스타트업계에서 슬랙(Slack)과 함께 사랑받는 협업 툴이기도 합니다. 오늘은 이렇게 급성장하고 있는 노션의 서비스 디자인 철학에 대해 이야기해보고자 합니다. 

 

UX 디자인을 업으로 삼고 있는 제가 보는 노션의 디자인 철학은 아주 매력적입니다.

여기서 ‘디자인’이라 하면, 심미적인 측면의 디자인적 요소보다, 서비스 기능적인 측면에서의 디자인을 말합니다.

 

예를 들어, A라는 서비스의 로그인 기능을 디자인하는 경우, 로그인 버튼을 어떤 색을 썼고, 얼마나 모서리를 둥글게 하였는지 등의 고민에 대한 이야기가 아닙니다.

 

카톡, 네이버 ID와 연계하는 등 어떻게 로그인 과정을 설계해야 사용자가 더 간편하게 로그인할 수 있는지, 혹은 로그인의 순서는 어떻게 배치할지 등 '어떻게 사용자의 행동을 설계하는지'에 대한 디자인을 말하고자 합니다. 

 

사용자 행동을 설계하는 디자인에 대하여

 

 

노션의 디자인 철학 #1 블록 이해하기

마이크로소프트 워드(.doc, .docx), 메모장, 에버노트 등의 일반적인 노트 앱은 보통 A4규격의 종이를 연상시키는 흰 화면 위에 타이핑을 하고, 마우스로 일정 영역을 드래그하여 해당 드래그 영역의 글씨 크기를 바꾸거나 색을 넣는 등의 방식으로 문서를 꾸미게 됩니다. 

 

노션에서는 ‘/’ 슬래쉬를 타이핑하면 노션에서 지원하는 블록들의 종류를 볼 수 있는데요. (아래 리스트와 예시이미지 참고)

각 블록을 선택하면 이미 노션에서 지원하는 깔끔한 포맷으로 해당 줄이 세팅됩니다.

사용자는 그저 세팅된 블록 영역에 글을 쓰면 됩니다. 

 

• 문서의 제목을 나타낼 수 있는 Heading 블록들
• 일반 텍스트를 위한 블록 
• 목록을 표현하기 위한 블록
• 할 일 목록 표현에 적합한 체크박스 블록
• 여러 줄을 묶어주는 토글 블록
• 인용문구를 표현하기 위한 인용 블록

노션(Notion)에서 지원하는 기본적인 Block 의 종류

 

 

물론 아래와 같이 각 블록 영역을 선택하면, 기본적인 수준의 디자인 편집 또한 가능하여, 사용자에게 어느 정도의 자율도가 주어집니다. 

 

각 블록의 편집 자율도

 

 

노션의 디자인 철학 #2 블록을 드래그앤드롭하여 레고 쌓기

기존 워드프로그램을 써보신 분이라면 문서의 단을 '이쁘게' 조정하거나 텍스트 중간에 '텍스트의 배열을 깨뜨리지 않으면서' 이미지를 넣는 작업 등이 얼마나 수고로운지 아실 겁니다. 하지만 노션에서는 블록을 드래그앤드롭하여(아래 그림처럼) 특정 영역의 글(블록)을 다른 곳에 쉽게 배치할 수 있습니다. 

 

저는 노션을 쓰면 쓸수록 정보 조각들을 여기 저기 내가 넣고 싶은 곳에 쌓는다는 느낌을 받습니다.

'생각의 흐름대로 원하는 정보 요소를 적재적소에 유연하게 배치할 수 있다'는 점이 노션의 가장 큰 장점인 것 같습니다.

 

 

블록을 드래그앤드롭하여 레고 쌓기

 

사실 노션을 사용하는 과정에서 요구되는 사용자의 행동 패턴은 기존의 노트 앱 및 생산성 툴을 사용할 때와 그 성격이 매우 다릅니다. 그럼에도 사용하기 편하다는 평이 나오는 것을 보아 정말 직관적으로 사용자를 설득시켰구나 싶습니다.

 

 

노션의 빠른 성장세

노션의 공식 홈페이지 자료에 따르면 2020년 6월 기준 미국 내에서만 약 80만 3500명이 홈페이지에 방문했다고 하는데요. 아래 그래프는 1년 간 월별 성장률을 보여주고 있습니다. 꾸준한 성장세를 볼 수 있습니다. 

 

노션의 성장세

 

주목하고 싶은 부분은 한국인 사용자가 굉장히 많다는 점입니다.

노션의 전체 사용자 중 한국인 사용자가 3번째로 많으며, 신규가입자의 수도 그 어떤 나라보다 빠르게 유입되고 있습니다. 

 

 

앞으로 몇 차례의 추가 글들을 통해 노션 사용법을 조금 더 자세히 소개해드리겠습니다.