노션의 미친 디자인, 그 뒷이야기 (feat. 노션 팀)

이 영상은 노션(Notion) 본사를 방문하여 디자이너와 엔지니어들로부터 노션의 미니멀한 디자인 뒤에 숨겨진 방대한 복잡성과 심리학적 설계 원리, 그리고 신규 서비스인 '노션 메일(Notion Mail)'의 제작 비화를 심도 있게 다룹니다.

노션의 철학과 디자인 원칙
- 단순함의 구현: 단순하고 미니멀한 디자인을 만드는 것이 디자인에서 가장 어려운 과제임.
- 레고 블록 방식: 이반(Ivan)과 사이먼(Simon) 설립자는 웹의 공통 패턴을 분석하여 데이터베이스, 리스트, 보드 등 가장 기초적인 '프리미티브(Primitives)'를 추출함.
- 범용성 지향: 특정 문제를 해결하는 도구 대신 사용자가 직접 커스터마이징할 수 있는 일반적인 버튼과 기능을 제공하여 사용자가 직접 앱을 조립하게 함.
이케아 효과(IKEA Effect)와 심리학
- 개념 정의: 사용자가 직접 자신의 도구를 구축하고 수정할 때 그 결과물에 훨씬 더 높은 가치를 부여하게 되는 심리 현상.
- 적용 방식: 노션은 사용자가 직접 시스템을 구축하게 함으로써 제품에 대한 애착과 몰입도를 높임.
- 빈 캔버스 증후군: 아무것도 없는 페이지에서 시작할 때 느끼는 막막함을 해결하기 위해 AI 데이터베이스 생성기 등의 기능을 도입하여 균형을 맞춤.
디테일의 공학 (마이크로 인터랙션)
- 하위 메뉴 기하학: 마우스 포인터와 메뉴 모서리 사이의 수학적 좌표를 계산하여, 포인터가 대각선으로 이동할 때 메뉴가 실수로 닫히지 않도록 설계함.
- 목록(List)의 정밀도: 글머리 기호의 들여쓰기, 백스페이스 및 탭 키의 동작 방식, 숫자 목록에서 숫자가 두 자릿수가 되어도 텍스트 정렬이 흐트러지지 않도록 'tabular-nums' CSS 속성 적용.
- 클릭 영역 최적화: 체크박스를 정확히 누르지 않고 약간 빗나가더라도 작동하도록 실제 가시적 크기보다 넓은 클릭 존(Click Zone)을 설정함.
- 보더 레디우스(Border Radius) 변화: 이메일이 선택되거나 호버될 때 주변 요소와의 시각적 일치를 위해 모서리 곡률이 실시간으로 업데이트됨.
노션 메일(Notion Mail) 개발 비화
- 기존 이메일의 문제: 보관, 스타, 중요, 플래그 등 유사한 기능이 파편화되어 복잡함.
- 해결책: 모든 개념을 '커스터마이징 가능한 레이블'이라는 기본 블록으로 통합하여 노션 특유의 확장성을 부여함.
- 버려진 디자인들:
  - 채팅형 뷰: 이메일을 슬랙(Slack) 같은 메시징 인터페이스로 접근했으나 이메일의 본질과 멀어짐.
  - 데이터베이스형 뷰: 이메일을 완전히 자유로운 데이터베이스 열로 구성했으나, 창 크기 조절과 편집의 복잡성으로 인해 사용자 주의를 분산시킨다고 판단하여 폐기함.
도구와 제작 방식
- 코드 기반 디자인: 피그마(Figma) 같은 디자인 툴만으로는 실제 사용감을 파악하기 어려워, 많은 디자인 결정이 실제 작동하는 코드를 작성하는 과정에서 이루어짐.
- 자신을 위한 빌드: 창업자들이 스스로 사용하기 위해 제품을 만듦으로써 직관적인 판단을 내리고 설문 조사 없이도 품질을 개선함.
사용자 층의 분류와 관리
- 레지던트(Resident): 도구가 예쁘고 쓰기 편하기를 바라는 일반 사용자 (전체의 60~70%).
- 가드너(Gardener): 속성이나 설정을 조금 더 깊게 배우려는 사용자.
- 빌더(Builder): 직접 시스템을 구축하려는 숙련된 사용자.
- 아키텍트(Architect): 수식(Formulas) 등을 활용해 고도로 복잡한 기능을 구현하는 전문가.
- 설계 전략: 초보자(레지던트)에게는 복잡한 기능을 숨기고, 사용자가 개념을 익혀감에 따라 점진적으로 복잡한 설정(레이아웃 커스터마이징 등)을 노출함.
오토 레이블(Auto Label)의 진화
- 초기 기획(Autopilot): 무엇이든 입력할 수 있는 샌드박스 형태의 프롬프트 창이었으나 사용자에게 막막함을 줌.
- 최종 형태: 사용자가 이메일 예시를 클릭하는 것만으로 AI를 학습시킬 수 있도록 버튼 기반의 직관적인 인터페이스로 단순화함.

노션의 미친 디자인, 그 뒷이야기 (feat. 노션 팀)

댓글 0개