Todoist: 17년간의 따뜻한 미니멀리즘과 최대한의 절제

“Clarity, finally.” — Todoist

Todoist는 17년 넘게 단 하나의 철학으로 운영되어 왔다: 최고의 작업 관리 도구는 실제로 사용하게 되는 도구라는 것이다. 2007년 Amir Salihefendic이 설립한 Todoist는 GTD, 불릿 저널링, 세컨드 브레인, AI 에이전트 등 모든 생산성 트렌드를 거치면서도 복잡성을 쫓지 않음으로써 살아남았다. 완전 원격 근무이자 수익성 있는 기업인 Doist는 신기함보다 일관성과 절제에 기반한 디자인 철학으로 5천만 명 이상의 전문가에게 서비스를 제공한다. 성장 해킹도, 다크 패턴도, 핵심 기능에 대한 “업그레이드해야 잠금 해제” 장벽도 없다. 그 결과물은 마치 작업 관리 도구가 당연히 이렇게 생겨야 한다는 듯 필연적으로 느껴지는 제품이다.

핵심 요약

브랜드 컬러는 하나면 충분하다 - Todoist는 기본 CTA와 로고에만 빨간색(#E34432)을 사용하고, 그 외에는 어디에도 쓰지 않는다. 이 극단적인 절제가 모든 빨간색 요소를 중요하게 느끼게 만든다.
불투명도 기반 텍스트 위계가 자연스러운 조화를 만든다 - 모든 텍스트는 단일 따뜻한 짙은 갈색(rgb(37,34,30))에서 다양한 불투명도(100%, 66%, 49%, 18%, 7%)로 파생되어, 여러 회색 값을 사용할 필요가 없다.
따뜻한 오프화이트는 순백이 아니다 - #FEFDFB(거의 인식할 수 없는 크림색) 배경이 차가움과 포근함의 차이를 만들며, 대부분의 사용자는 이를 의식적으로 알아채지 못할 것이다.
그림자는 거의 답이 아니다 - Todoist는 색상과 여백만으로 전체 시각적 위계를 구현한다. 디자인 어디에서도 그림자가 거의 나타나지 않는다.
17년의 다듬기가 17개의 기능보다 낫다 - 디자인에서 새롭거나 유행을 따르는 것은 없다. 모든 것이 거의 20년에 걸쳐 테스트되고, 다듬어지고, 검증된 느낌을 준다.

Todoist가 중요한 이유

Todoist는 장수와 절제가 디자인에서 경쟁 우위임을 보여준다. 경쟁사들이 기능 동등성과 시각적 트렌드를 쫓는 동안, Todoist의 디자인은 뺄셈을 통해 진화해 왔다 — 수집, 정리, 실행이라는 핵심 루프에 기여하지 않는 것을 제거하는 방식으로. AI에 대한 제품의 접근 방식(“Ramble” — 음성 입력을 구조화된 작업으로 변환)도 같은 철학을 반영한다: 새로운 상호작용 패러다임을 만들기보다 기존 워크플로우를 지원하는 것이다.

주요 성과: - 일관된 시각 언어로 모든 플랫폼(웹, iOS, Android, Mac, Windows)에서 5천만 명 이상의 전문가에게 서비스 제공 - 약 100명 규모의 수익성 있는 독립 기업으로서 관대한 프리미엄 모델 유지 - 양식 작성의 번거로움을 없애는 자연어 입력 파싱 구축(“매주 화요일 오후 5시에 장보기”가 반복 작업이 됨)

핵심 디자인 원칙

1. 단일 컬러 브랜드

빨간색(#E34432)이 유일한 브랜드 컬러다. 기본 CTA 버튼, 로고, 브랜드 모먼트에만 등장한다. 그것이 전부다. 보조 액센트도, 그라데이션도, 컬러 시스템도 없다. 이 규율이 곧 디자인이다 — 모든 것이 주목을 경쟁하면 아무것도 이기지 못한다. 빨간색을 중요한 순간에만 제한함으로써, Todoist는 시선이 정확히 필요한 곳으로 향하도록 보장한다.

호버 상태는 #CF3520으로 어두워지고, 텍스트 링크는 밑줄 있는 파란색 텍스트가 클릭 가능하다는 관례를 유지하기 위해 별도의 파란색(#0F66AE)을 사용한다. 그러나 브랜드 자체는 단일 컬러이며, 외과적 정밀함으로 적용된다.

앱 내 우선순위 시스템은 기능적 의미를 전달하는 곳에서만 색상을 도입한다: P1 긴급(#D1453B), P2 높음(#EB8909), P3 보통(#246FE0), P4 기본(색상 없음). 여기서도 색상은 정보를 위해 쓰이지, 장식을 위해 쓰이지 않는다.

2. 불투명도 기반 텍스트 위계

현존하는 생산성 도구 중 가장 절제된 타이포그래피 시스템이다. 페이지의 모든 텍스트는 rgb(37,34,30) — 오프화이트 배경과 어울리는 미묘한 따뜻한 언더톤을 가진 따뜻한 짙은 갈색-검정이다. 제목은 100% 불투명도를 사용한다. 본문은 66%. 은은한 캡션은 49%. 테두리와 미세한 구분선은 18%. 배경 틴트는 7%.

이 단일 색조 접근법은 여러 회색 값으로는 달성할 수 없는 조화를 만들어낸다. 모든 텍스트 요소가 동일한 기본 색상을 공유하고 단지 존재감만 달라지기 때문이다. 텍스트 시스템에 회색 값은 전혀 없고, 보조 색상도 전혀 없다.

불투명도 스케일:
100% ████████████████████ 제목, 기본 텍스트
 66% █████████████        본문, 설명
 49% ██████████           캡션, 메타데이터
 18% ████                 테두리, 미세한 구분선
  7% ██                   배경 틴트

모두 rgb(37, 34, 30)에서 파생

3. 따뜻한 미니멀리즘

배경색 #FEFDFB — rgb(254,253,252) — 는 순백과 거의 구별되지 않는다. 그러나 그 차이가 모든 것을 바꾼다. 이 따뜻한 오프화이트는 앱을 무미건조한 소프트웨어를 실행하는 것이 아니라, 잘 정리된 노트북을 펼치는 듯한 편안한 캔버스를 만든다. 제품 스크린샷은 배경과 분리하기 위해 두꺼운 그림자나 테두리 없이도 레이아웃 안에서 자연스럽게 떠 있다.

초록 서피스(#F4FBF7)와 세이지 서피스(#F6FAEB)는 동일하게 미묘한 색조 변화를 통해 섹션을 구분한다. 이것은 대담한 섹션 구분선이 아니다 — 주의를 요구하지 않으면서 시선을 안내하는 부드러운 환경 변화다.

활용 가능한 패턴

Todoist의 디자인 시스템은 단순함 덕분에 놀라울 정도로 이식성이 높다. 불투명도 기반 텍스트 위계는 어떤 프로젝트에서든 작동한다 — rgb(37,34,30)을 자신만의 기본 텍스트 색상으로 교체하면 다섯 단계의 불투명도가 즉각적이고 조화로운 타입 시스템을 만들어낸다.

CSS 구현은 이 접근법의 우아함을 보여준다:

:root {
  /* Todoist's warm minimal palette */
  --color-background: #FEFDFB;
  --color-surface-green: #F4FBF7;
  --color-surface-sage: #F6FAEB;
  --color-text: rgb(37, 34, 30);
  --color-text-secondary: rgba(37, 34, 30, 0.66);
  --color-text-muted: rgba(37, 34, 30, 0.49);
  --color-text-faint: rgba(37, 34, 30, 0.18);
  --color-text-whisper: rgba(37, 34, 30, 0.07);
  --color-brand: #E34432;
  --color-brand-hover: #CF3520;
  --color-link: #0F66AE;

  /* Typography */
  --font-sans: Graphik, "Graphik fallback", Arial, Helvetica, sans-serif;
}

/* Warm off-white body */
body {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-text);
  background-color: var(--color-background);
}

/* Hero — confident but not aggressive */
h1 {
  font-size: 55px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.55px;
}

/* Single-color CTA — red IS the elevation */
.button-primary {
  background-color: var(--color-brand);
  color: white;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  border: none;
  transition: background-color 0.15s ease;
}
.button-primary:hover {
  background-color: var(--color-brand-hover);
}

커스텀 Graphik 서체(Commercial Type 제작)는 기하학적 서체와 휴머니스트 서체 사이의 적절한 지점에 위치한다 — Inter보다 따뜻하고 Helvetica보다 덜 격식적이다. 중립적인 따뜻함이 오프화이트 배경과 갈색-검정 텍스트에 어울린다. 해시된 파일명 패턴(Graphik-af49fcca2967e850)은 Next.js 폰트 최적화를 나타내며, 시스템 폰트로는 보장할 수 없는 일관된 크로스 플랫폼 렌더링을 보장한다.

55px/600 웨이트에 1.15 행간의 제목은 Rivian이나 Obsidian 같은 브랜드에서 볼 수 있는 기념비적인 1.0 행간보다 눈에 띄게 더 친근하다. 네거티브 자간은 크기에 따라 일관된 -1% 비율을 유지하여(55px에서 -0.55px, 38px에서 -0.38px), 임의적인 값이 아닌 비례적 조임을 만들어낸다.

SwiftUI에서는 불투명도 기반 텍스트 시스템이 깔끔하게 변환된다:

extension Color {
    static let todoistBg = Color(red: 254/255, green: 253/255, blue: 252/255)
    static let todoistText = Color(red: 37/255, green: 34/255, blue: 30/255)
    static let todoistSecondary = Color(red: 37/255, green: 34/255, blue: 30/255).opacity(0.66)
    static let todoistMuted = Color(red: 37/255, green: 34/255, blue: 30/255).opacity(0.49)
    static let todoistBrand = Color(red: 227/255, green: 68/255, blue: 50/255)
    static let todoistSurface = Color(red: 244/255, green: 251/255, blue: 247/255)
}

// Opacity-based text hierarchy in practice
VStack(alignment: .leading, spacing: 8) {
    Text("Clarity, finally.")
        .font(.system(size: 55, weight: .semibold))
        .tracking(-0.55)
        .foregroundStyle(Color.todoistText)

    Text("Join 50+ million professionals who simplify work and life.")
        .font(.system(size: 16))
        .foregroundStyle(Color.todoistText.opacity(0.66))
}

디자인 교훈

절제는 경쟁 우위다. Todoist의 단일 브랜드 컬러는 모든 빨간색 요소가 의미를 가지도록 강제한다. 경쟁사가 서너 가지 액센트 컬러를 사용하면 아무것도 돋보이지 않는다. Todoist가 하나만 사용하면 CTA를 놓칠 수 없다.

따뜻한 오프화이트 배경은 감정적 톤을 바꾼다. #FFFFFF와 #FEFDFB의 차이는 RGB 3포인트에 불과하다 — 단독으로 보면 거의 인식할 수 없지만, 전체적으로는 변혁적이다. 따뜻한 배경은 전체 경험을 편안하고 인간적으로 느끼게 만든다. 차가운 순백은 인터페이스를 도구처럼 느끼게 한다. 따뜻한 오프화이트는 머무르고 싶은 공간처럼 느끼게 한다.

불투명도 위계는 회색 스케일보다 더 조화롭다. 하나의 기본 색상에서 다섯 단계를 만들면 모든 텍스트 요소가 동일한 색조를 공유하기 때문에 자연스러운 응집력이 생긴다. 다섯 가지 다른 회색 값(예: #333, #666, #999, #CCC, #EEE)은 각각이 다른 강도가 아닌 다른 색상이기 때문에 미묘한 불협화음을 만든다.

여백과 색상으로 충분할 때 그림자를 피하라. Todoist는 드롭 섀도우 없이도 전체 시각적 위계가 기능할 수 있음을 증명한다. 빨간색 CTA가 눈에 띄는 이유는 표면 위에 떠 있기 때문이 아니라, 따뜻하고 차분한 캔버스 위의 유일한 채도 있는 색상이기 때문이다. 이 접근법은 더 오래 지속되고 기기 간에 더 일관되게 렌더링된다.

따뜻함이 브랜드일 때 마케팅에서 다크 모드를 피하라. 따뜻한 오프화이트 캔버스가 Todoist의 정체성이다. 다크 모드는 앱 내에 존재하지만(장시간 사용 시 실용적이므로), 마케팅 사이트는 항상 라이트 모드다. 교훈: 따뜻함이 브랜드의 핵심이라면, 가장 눈에 띄는 표면에서 그것을 지켜라.

유행하는 타이포그래피 극단을 피하라. 100px 이상의 디스플레이 텍스트도, 극단적인 네거티브 트래킹도, 웨이트 800도 없다. Graphik 600이 최대 굵기다. 이 절제는 디자인이 시대에 뒤떨어지지 않게 한다 — 5년 전에도 적절해 보였고, 5년 후에도 적절해 보일 것이다.

자주 묻는 질문

Todoist의 디자인이 “설계된” 것이 아닌 “필연적인” 것처럼 느껴지는 이유는 무엇인가요?

17년간의 지속적인 다듬기 덕분입니다. 모든 요소는 더 유행하는 것으로 대체되지 않고 여러 디자인 트렌드를 견뎌왔습니다. 따뜻한 오프화이트 배경, 단일 빨간색 액센트, 불투명도 기반 텍스트 계층 구조, 그리고 Graphik 서체는 유행을 따르는 선택이 아닙니다 — 거의 20년에 걸쳐 스스로를 증명해 온 내구성 있는 선택입니다. 어떤 것도 추가되거나 트렌디하게 느껴지지 않을 때, 디자인은 필연적으로 느껴집니다.

Todoist의 불투명도 기반 텍스트 계층 구조는 어떻게 작동하나요?

페이지의 모든 텍스트는 단일 색상 — rgb(37,34,30), 따뜻한 진한 갈색-검정 — 을 다섯 가지 불투명도 수준으로 사용합니다: 제목에 100%, 본문 텍스트에 66%, 캡션에 49%, 테두리에 18%, 배경 틴트에 7%. 모든 요소가 동일한 기본 색조를 공유하기 때문에, 다양한 회색 값의 팔레트 없이도 계층 구조가 자연스럽게 응집력 있게 느껴집니다.

Todoist가 브랜드 색상을 하나만 사용하는 이유는 무엇인가요?

절제가 디자인 전략입니다. 빨간색(#E34432)을 CTA 버튼과 브랜드 순간에만 제한함으로써, Todoist는 시선이 정확히 필요한 곳으로 향하도록 합니다. 어떤 보조 액센트도 주의를 빼앗지 않습니다. 단일 브랜드 색상의 규율은 또한 크로스 플랫폼 일관성을 단순화합니다 — 동일한 빨간색이 복잡한 색상 시스템 없이 웹, iOS, Android, Mac, Windows에서 동일하게 작동합니다.

디자이너들이 Todoist의 AI 기능 접근 방식에서 배울 수 있는 것은 무엇인가요?

Todoist의 AI 기능 “Ramble”은 챗봇이나 새로운 인터랙션 패러다임을 도입하는 대신, 음성 입력을 구조화된 작업으로 변환합니다. 교훈은 AI가 새로운 워크플로우를 만드는 것이 아니라 기존 워크플로우를 지원해야 한다는 것입니다. 디자인은 자연어 입력을 가장 눈에 띄는 요소로 유지함으로써 이를 뒷받침합니다 — 문장을 입력하거나 말하면, 시스템이 파싱을 수행합니다. AI 브랜딩도, 채팅 말풍선도, 그 자체를 위한 새로움도 없습니다.

Todoist는 그림자 없이 어떻게 시각적 계층 구조를 달성하나요?

색상과 간격만으로 달성합니다. 따뜻한 오프화이트 배경(#FEFDFB)이 은은한 캔버스를 제공합니다. 단일 빨간색 CTA는 전체 팔레트에서 유일한 채도 있는 색상이기 때문에 두드러집니다. 타이포그래피 계층 구조는 하나의 기본 색상의 크기와 불투명도 변화에서 나옵니다. 섹션 구분은 초록(#F4FBF7) 또는 세이지(#F6FAEB) 표면으로의 부드러운 전환을 사용합니다. 결과는 오래 지속되고 모든 기기에서 일관되게 렌더링되는 평면적이고 응집력 있는 디자인입니다.

참고 자료

Todoist 홈페이지 — 따뜻한 미니멀 디자인의 제품 마케팅
Todoist Inspiration 블로그 — 생산성 콘텐츠 및 제품 철학
Doist (모회사) — 원격 우선 기업 문화 및 가치
Todoist App Store — iOS 앱 및 크로스 플랫폼 지원
Graphik 서체 (Commercial Type) — 커스텀 폰트 선택 및 파운드리 세부 정보