Notion
한낮의 따스한 햇살 아래 따뜻한 종이 노트
노션의 인터페이스는 마치 햇살 아래 놓인 사랑스러운 종이 노트처럼 보입니다. 따뜻하고 부드러운 색감(#f6f5f4)의 바탕은 밋밋함보다는 촉감을 선사하고, 넉넉한 산세리프 서체는 제품 설명에 무게감을 더하며, 색상은 절제된 포인트로 사용됩니다. 복숭아색 "알약" 모양의 강조 표시는 동사를 나타내고, 파란색은 주요 작업을 나타내며, 산호색, 황색, 하늘색, 자정색 등 다양한 색조가 카드 배경을 스티커처럼 꾸며줍니다. 카드는 얇은 테두리와 모서리로 이루어진 캔버스 위에 배열되어 있으며, 그림자나 테두리 장식이 없어 몰스킨 노트의 줄이 그어진 부분과 같습니다. 애니메이션은 경쾌하고 탄력적이며, 200ms의 부드러운 전환과 생동감 넘치는 캐릭터 애니메이션은 장식적이지 않으면서도 인터페이스에 활기를 불어넣습니다.
중앙 정렬된 최대 너비는 약 1440px로 제한됩니다. 메인 요소는 중앙에 배치된 스택 형태로, 심볼 행 → 컬러 알약이 내장된 두 줄짜리 큰 헤드라인 → 서브헤드라인 → 두 개의 클릭 유도 버튼 행 → 큰 제품 UI 목업으로 구성됩니다. 메인 요소 아래에는 흰색 카드 그리드와 풀 컬러 액센트 패널이 번갈아 배치됩니다. 로고 월은 회색조의 파트너 로고가 중앙에 한 줄로 배열된 그리드입니다. 기능 블록은 두 열 레이아웃(왼쪽 텍스트, 오른쪽 컬러 패널)을 사용하며, 각 섹션은 좌우로 번갈아 배치됩니다. "필요할 때 어시스턴트에게 문의" 섹션은 2x2 카드 그리드를 사용하며, 맨 위 카드는 전체 너비를 차지하고 맨 아래 행은 두 개의 동일한 열로 나뉩니다. 섹션 사이의 간격은 넉넉하게(약 80px) 설정하여 차분한 수직적 리듬감을 만들어냅니다. 내비게이션은 중앙에 배치된 내비게이션 요소와 오른쪽 정렬된 액션 버튼으로 구성된 고정 높이 64px의 상단 바입니다.
사진은 일절 사용하지 않고 일러스트레이션이 핵심입니다. 시각적 언어는 평면적인 일러스트 심볼(2픽셀 크기의 색상이 있는 원형의 둥근 모서리), 추상적인 장식 요소(손으로 그린 구불구불한 선, 반짝이, 화살표, 꽃 모양), 그리고 제품 사용자 인터페이스 목업으로 구성됩니다. 심볼은 메인 창에 가로로 배열된 7개의 아바타 형태로 나타나고, 페이지 곳곳에 재미있는 포인트처럼 배치됩니다. 제품 스크린샷만이 유일한 "실제" 시각적 요소입니다. 실제 Notion 인터페이스(칸반 보드, 문서 보기, AI 에이전트 패널)의 모든 요소와 실제 데이터를 보여줍니다. 메인 창의 제품 목업은 크고 중앙에 위치하며, 캔버스와 구분되는 하나의 그림자를 드리웁니다. 라이프스타일 사진, 스톡 이미지, 추상적인 3D 렌더링은 전혀 사용되지 않았습니다.
팔레트
상표
- Notion Blue
#0075de— 클릭 유도 버튼(CTA)을 채우는 주요 요소는 활성 탐색에서 강조 표시 역할을 하며, 채워진 액션 버튼은 거의 단색에 가까운 시스템에서 스위치로 인식될 만큼 충분히 채도가 높은 유일한 색상 구성표입니다.
중립적
- Paper Warmth
#f6f5f4— 페이지 캔버스, 메인 창 배경, 섹션 배경은 모두 따뜻하고 약간 베이지색을 띠어 시스템에 촉각적이고 아날로그적인 느낌을 줍니다. - Pure White
#ffffff— 카드 표면, 볼록한 패널, 로고 배경, 어두운 카드에 대비되는 텍스트. - Ink Black
#000000— 본문, 탐색 링크, 제목 - 새로운 색상을 추가하지 않고 계층 구조를 구축하기 위해 서로 다른 투명도(100%, 95%, 90%, 60%, 40%, 20%)를 사용합니다. - Charcoal
#111111— 순수한 검정색이 너무 강렬해 보이는 UI 영역에 사용할 수 있는 어두운 텍스트 옵션입니다. - Stone
#757575— 보조 탐색 텍스트, 흐릿한 도움말 텍스트, 비활성화된 버튼 레이블 - 잉크 알파 값 60% - Graphite
#615d59— 본문은 따뜻한 색조인 갈색빛이 도는 회색으로, 따뜻한 배경과 조화를 이룹니다.
타이포그래피
12px에서 96px로 · 10단계
- NotionInter — 대사: Inter · 요점 400, 500, 600, 700 · 주요 산세리프 글꼴은 미묘한 뉘앙스를 지닌 기하학적 휴머니스트 서체로, 본문에는 400, 내비게이션/사용자 인터페이스에는 500, 제목에는 600~700 크기로 사용됩니다. 글꼴 크기는 커질수록 (-4.6px(96px), -2px(72px)) 과감한 음수 자간을 적용하여 제목이 여백이 많은 느낌보다는 더욱 간결하고 자신감 있는 느낌을 주도록 했습니다.
- Lyon Text — 대사: Source Serif Pro · 요점 400 · 본문의 개별 섹션과 섹션 소개에만 사용되는 편집용 세리프체는 잡지 레이아웃의 인용구처럼 서체에 문학적 무게감을 부여하기 위해 드물게(네 번) 사용됩니다. 이는 병렬적인 위계 구조라기보다는 체계적인 강조의 역할을 합니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 평균 |
| 기본 단계 | 8px |
| 버튼 반경 | 8px |
| 카드 반경 | 12px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 80px |
| 페이지 너비 | 1440px |
AI가 Notion 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Mollie — 캐시미어 소재의 카운터와 어두운 장부. 검은색 텍스트 주변에 충분한 여백을 남겨 편집 디자인을 활용하고, 따뜻한 크림색, 에스프레소 브라운 색상, 그리고 실제 결제 수단의 촉각적인 사진을 통해 제품 관련 정보를 강조하세요.
- Kagi — 별도의 열람실을 마련합니다. 굵은 연필 글씨 주변에 탁 트인 흰색 공간을 만들고, 은은한 보라색 포인트와 따뜻한 파스텔 톤의 표면을 사용하여 고요한 분위기에 변화를 줍니다.
- Milanote — Milanote는 전문적인 크리에이티브 스튜디오입니다. 어두운 프레임 벽, 흰색 디스플레이 공간, 그리고 부드러운 깊이감을 가진 실제 사물처럼 보이는 스크린샷으로 구성된 플로팅 비주얼 보드를 사용하여 편집 갤러리 스타일의 페이지를 제작해 보세요.
- Co2 — 겨울 풍경을 담은 기후 지도. 항공 사진처럼 페이지를 구성하여, 세리프체 제목, 범주별 코드로 분류된 데이터, 그리고 얼음 이미지가 넓은 흰색 여백을 돋보이게 하세요.
- GitButler — 텍스트 끝부분에 청록색이 사용되었습니다. 대비가 강한 세리프 헤드라인과 은은한 기술적 격자, 따뜻한 흑연색 표면, 그리고 절제된 청록색 악센트가 조화를 이루고 있습니다.
- ElevenLabs — 따뜻한 크림색 톤의 사진 에세이에 은은한 제목이 더해졌습니다. 바우하우스 스타일의 노트는 달걀 껍질색 종이에 검정 잉크를 사용하고, 보라색과 주황색으로 포인트를 주어 제품을 돋보이게 합니다.
- Awesomic — 편집용 아연 메시 소재에 색종이 조각을 연상시키는 주황색 구두점이 있습니다.
- Monad — 따뜻한 양피지에 대한 편집 기술 저널
- Dub — 링크의 무광택 쌀 종이 재질 컨트롤 패널
- Seline Analytics — 따뜻한 종이 위에 놓인 조용한 분석표
- Anthropic — 따뜻한 느낌의 양피지에 인쇄된 과학 분야 저널—차분한 상아색 표면, 세리프체로 쓰인 편집 제목, 그리고 필요한 순간에만 나타나는 단 하나의 점토색 포인트.
- Calendly — 차가운 대리석 위에 진한 파란색 잉크