▲

NotebookLM 설계 과정 돌아보기

 (jasonspielman.com)
2P by GN⁺ 11시간전 | ★ favorite | 댓글 1개
  • NotebookLM의 디자인 담당자가 핵심 사용자 경험과 브랜드 시스템을 실험 단계에서 출시까지 설계한 전 과정을 요약 설명
  • NotebookLM의 목표는 탭 과부하(tab overwhelm) 해소를 위해 읽기·대화·생성을 한 공간에서 연결하는 3-패널 구조와 응답형 패널 시스템을 확립하는 것
  • 정보 흐름을 Inputs → Chat → Outputs라는 명시적 멘탈 모델로 정리해 사용자가 위치를 잃지 않도록 하는 맥락 지향 UX를 구현함
  • Audio Overviews와 같은 기능은 소스 인용과 인터럽트 패턴을 포함해 AI 네이티브 상호작용을 현실적 작업 흐름으로 통합함
  • 결과적으로 작고 민첩한 팀이 브랜드 아이덴티티부터 비주얼 에셋까지 일관되게 확장 가능한 AI-퍼스트 제품 설계 프레임을 구축했다는 점이 시사점임

Architecture

  • 프로젝트는 읽기·대화·생성의 결합을 목표로 하여 UI 아키텍처를 실험에서 런치 수준의 시스템으로 발전시킨 과정 공유임
  • UI Evolution 이미지는 초기 실험 인터페이스가 3-패널 구조로 수렴해 가는 변천을 시각화함
  • 설계 전반은 스케일러빌리티와 적응성을 우선하여 새로운 도구와 모드를 추가해도 구조가 깨지지 않는 그리드/패널 원리를 채택함

Early Prototype & Notes-driven UI

  • 합류 초기의 노트 중심 캔버스 위에 탐색형 채팅 오버레이를 얹는 시도가 소개됨
  • 노트와 대화를 한 화면에 공존시키되 인지 부하를 줄이는 레이아웃을 찾기 위해 많은 반복 실험 진행임
  • 결과적으로 채팅은 도구가 아닌 뷰의 한 축으로 승격되어 이후 패널 시스템의 핵심 축이 됨

3-Panel Structure

  • 최종 구조는 Source / Chat / Studio(Notes) 의 3분할 패널로, 작은 폭에서도 핵심 아이콘 유지 등 접근성을 보장하는 응답형 패널 채용임
  • 레이아웃 프리셋은 Standard와 Reading + Chat 등 상황별 최적 구성을 제공해 인용·참조 중심 작업을 지원함
  • 사용자의 포커스에 따라 패널 폭이 동적으로 재조정되어 도구 간 전환 마찰을 최소화함

Problem + Requirements

  • 핵심 문제는 여러 도구를 전전하는 단편적 경험으로 인한 탭 과부하였으며, 이를 한 공간에서 입력·대화·산출로 통합하는 요구 정의임
  • 입력 측면에서는 Source list / Open Source(wide), 출력 측면에서는 Notes list / Open Note(wide), 중앙에는 Chat과 Citations 배치임
  • 생성 행위는 다중 진입점을 제공해 사용자가 흐름을 끊지 않고 바로 산출물 작성로 이어지게 설계함

Early Sketches

  • 현재 구조는 자명해 보이나 수없이 많은 반복 끝에 도달한 결과임
  • 비행기에서 종이가 떨어져 냅킨 스케치로 최종 해법을 발견했다는 탐색 기록 공유임
  • 목표는 명확한 멘탈 모델과 소화 가능한 UI를 동시에 만족하는 블록 조합 방식 확립임

Mental Model

  • 멘탈 모델은 Inputs → Chat → Outputs라는 선형이되 유연한 흐름을 중심에 둔 구성임
  • 사용자는 문서·노트·레퍼런스를 가져오고, 질문·정리·합성을 거쳐 노트·스터디 가이드·Audio Overviews 같은 구조적 산출물 생성임
  • 이 모델은 새로운 AI 상호작용의 복잡성을 위치감과 단계감으로 소화 가능하게 만듦

Solution • 3 Panel Structure 세부

  • 응답형 패널 시스템은 사용자 필요에 맞춰 유동적으로 스케일하며, 최소 너비에서도 소스·노트 접근성을 유지함
  • Standard 레이아웃은 소스·채팅·노트의 균형 잡힌 기본 보기 제공임
  • Reading + Chat은 인용 기반 응답 생성에 최적화된 구성으로 근거 제시 흐름을 강화함

Panel States

  • 패널 상태는 필수 요소 아이콘 유지와 폭 단계별 재구성으로 공간 효율을 극대화함
  • 패널 내부 콘텐츠는 변해도 구조 원칙은 고정되어 향후 새 도구·워크플로 추가에 탄력적으로 대응함
  • 설계 원칙은 성장 가능성과 회복 탄력성으로 요약됨

Source Panel

  • 사용자 제공 모든 소스(입력)의 거점으로 작업 여정의 출발점 역할 수행임
  • 소스의 조직·열람·전환이 빠르게 이뤄지며 중앙 Chat과의 상호작용을 촉진함
  • 최소 폭에서도 시각적 단서 유지로 맥락 상실 방지임

Studio Panel

  • 입력이 산출물로 전환되는 공간으로 생성·정제·기록을 담당함
  • 노트·보고서·스터디 가이드 등 다양한 출력 타입을 수용하는 컨테이너형 뷰 설계임
  • 최신 릴리스에서는 flashcards·quizzes·professional reports로 확장 사례가 소개됨

Chat Panel

  • 경험의 코어 축으로 항상 존재하며 필요에 따라 크기 자동 조정을 수행함
  • 출처 인용과 근거 제시가 중심이 되는 대화 설계를 통해 신뢰성 있는 AI 상호작용 제공임
  • 다른 도구가 전면에 섰을 때도 대화 맥락을 보존하여 흐름 단절을 최소화함

User Journey • Annotated Overview

  • 주석된 사용자 여정은 입력 수집 → 대화로 이해·정리 → 산출물 생성의 단계별 상호작용을 시각화함
  • 각 단계에서 패널 간 초점 이동과 상태 전환이 어떻게 유기적으로 연결되는지 설명함
  • 목표는 맥락 유지와 작업 속도를 동시에 달성하는 엔드투엔드 경험 구축임

Audio Overviews

  • Audio Overviews는 아이디어에서 프로토타입, 출시까지 이르는 과정에서 인터럽트 패턴 등 신규 상호작용 패러다임을 도입함
  • 기능의 효용은 소스 기반(grounded)·원클릭 요약/학습에 있으며, 이름은 우연히 저자가 명명했다는 비하인드 공유임
  • 소규모 크로스펑셔널 팀 협업을 통해 빠른 실험·출시 사이클을 달성한 사례임

Brand Identity

  • Google Labs 및 중앙 브랜드 팀과의 긴밀 협업으로 브랜드 아이덴티티와 비주얼 시스템을 신속 정의함
  • 색·타이포·아이콘·일러스트 등 멀티 에셋을 일관성 있게 확장 가능한 디자인 언어로 정립함
  • 제품 경험과 브랜드 톤이 동일한 메시지를 전달하도록 UX·BI 정렬을 강조함

Visual Assets

  • 프레스 킷부터 런치 비주얼까지 풀 스택 에셋 제작 사례를 제시함
  • 웹 히어로 이미지·애니메이션·키 비주얼 등 고충실도 자산을 통해 메시지 명료화와 도달 범위 확대를 지원함
  • Keyword blog 등 외부 채널과의 메시지 일관성을 확보하여 확장 커뮤니케이션에 기여함

Key Takeaways from the Journey

  • Audio Overviews 빌드 경험에서 얻은 교훈은 사용자와 함께 만드는 제품, 빠른 공개와 반복, 인라인 인용 수요 대응 등으로 요약됨
  • AI는 내장(Built-in) 방식으로 문제를 푸는 AI-네이티브 제품이어야 하며, 연구와 실사용 과제의 간극을 메우는 설계가 핵심임
  • 동적·문맥 인지 UI가 중요하며, 전환기에는 Chat이 친숙한 닻(anchor) 이자 새 경험으로의 교량 역할을 수행함
▲
GN⁺ 11시간전  [-]
Hacker News 의견

  • 이 게시물은 NotebookLM처럼 본질은 단순하지만 지나치게 복잡하게 디자인되어 있다고 느껴짐, 파일을 선택해서 대화를 하거나 요약을 받고 싶은 단순한 니즈가 있지만 실제로는 정보 밀도가 낮고 카드, 버튼, 섹션, 아이콘이 너무 많아 핵심 UX로 진입하기가 힘들어짐, 디자이너의 생각을 듣고 싶었는데 오히려 스크롤잭킹, 이미지 캐러셀, 불필요한 비주얼 계층 등 시각적 요소가 사용경험을 오히려 방해함, 멋진 점은 인정하지만 UI 때문에 본질에 집중하기 어려움

    • 부정적인 게 아니라 오히려 공감되는 시각임, 파일에 대화하고 싶다면 Gemini, ChatGPT, Claude도 잘 동작함, 이 실험적 제품의 목표는 진짜 소스에 기반한 툴이 될 수 있을지 창의적으로 고민하는 것이었음, 유저 니즈에 맞춰 신속하게 여러 시도를 했고 앞으로도 이런 피드백을 바탕으로 진화할 것임, 내 웹사이트의 경우 시각적인 요소로 의사결정 과정을 좀 더 잘 전달하고자 함

    • 이 현상을 설명하는 적절한 독일어가 있을 것 같음, 단점이 성공에 기여한 것처럼 포장하는 경우를 봄, 빅테크 발표에서 자주 보는데 실제로는 어떤 문제에도 불구하고 성공한 것임에도 그걸 미담처럼 얘기하는 모습이 재밌음

    • 80년대부터 있던 3패널 레이아웃을 설명하려고 끝없는 스크롤을 해야 하는 아이러니가 있음

    • 깔끔해 보이지만 실제로 NotebookLM의 사용자 경험은 별로임, 워낙 좋은 서비스라서 계속 쓰지만 UI는 가장 마음에 안 드는 부분임

    • 처음에는 얼마나 불편하겠나 싶었는데, 실제로 이렇게 과하게 디자인된 것을 보고 재미있게 느껴짐

  • 이 사이트는 내 포트폴리오임, 여러 사람들의 의견을 보는 게 재미있음, 디자인이란 건 반복과 진화를 전제로 함, NotebookLM은 앞으로도 계속 변화할 것임, 이 제품이 초기 단계였을 때부터 참여할 수 있어 정말 행운이라고 생각함, 디자이너로서 기술의 미래를 예측하며 그에 맞춘 UI를 구축하려 했음, Google labs 팀이 정말 빠르고 미래지향적으로 움직였다고 생각함, 1년 반 동안 사용자의 피드백을 듣고 반복하며 제품을 성장시킴, 인생에서 새로운 제품을 0에서 1로 만드는 굉장한 경험이었음, 내 포트폴리오가 이렇게 유명해질 줄은 상상도 못했음

    • 구글 IP 관련해서 공개적으로 쓸 수 있는 한계나 규정이 있는지 궁금함

    • 사이트에서 버그를 발견했는데, 브라우저나 확장 프로그램에게 다크 모드가 적용된 것처럼 신호를 보내는 문제가 있음, 이 때문에 실제로 다크 모드가 아닌데 제대로 동작하지 않음

    • 고생에 감사함, 불평할 때도 있지만 지금까지 경험한 것 중에 가장 매력적인 학습 제품임, 계속 발전하길 바람

    • “기술의 미래로 스케이팅한다”는 말이 크게 공감됨, 결국 이런 일은 완벽히 계획대로 되는 과학이 아니라 예술임, 계속 조율이 필요한 영역임, 다양한 역할과 유저 피드백 기반으로 프로젝트가 진화했을 거라 생각함, NotebookLM이 시장을 뒤흔들었고 앞으로 Bard나 Gemini 초기처럼 더 좋아질 거라는 믿음임, 특히 UI/UX 측면에서

  • NotebookLM을 매일 사용함, 디자인의 단순함에 감사하지만 기능이 추가될수록 UI를 유지하면서 확장하는 데에 문제가 발생함, 최근 플래시카드와 퀴즈가 추가되면서 'Artifacts Button Container'가 6개의 큰 버튼으로 328px 높이가 되었음, 인도의 소형화면 사용자들이 자신의 노트를 볼 수 없어서 Discord 포럼에서 도움을 요청함, 그래서 Tampermonkey 스크립트로 접을 수 있게 해줌 [접힘 스크립트], 팀에서 곧 수정할 예정이라고 들었지만 출시 전 더 많은 검증이 필요했음, 이런 문제들은 직접 스크립트로 고쳤고, 가장 이상한 건 'notes'인데 2000자짜리 에세이를 360px 사이드바에서 읽도록 강제함, 그래서 풀스크린으로 볼 수 있는 스크립트도 만듦 [풀스크린 스크립트], 채팅 입력창도 문제가 있는데 후속 질문이 제대로 동작하지 않으며 선택 후에도 불안정함, 이런 걸 하루 종일 얘기할 수 있지만 고치는 게 낫다고 생각함

  • NotebookLM의 UX가 마음에 들지 않음, 레이아웃이 혼란스럽고 UI에서 전달하는 개념이 직관적이지 않음, 백엔드의 파워가 프론트엔드에 제대로 녹아들지 않음, 하지만 글 자체는 깔끔하고 작성자의 고민이 잘 느껴짐, 결론과 결과에는 동의하지 않지만, 더 신중한 시도가 계속 나오길 기대함, 빠른 시장 변화 속에서 장인정신 있는 디자인이 쉽지 않음

    • 대안 서비스를 사용하는지 궁금함, 해당 분야를 많이 탐색하진 않았음

  • NotebookLM은 인터페이스 때문이 아니라 그럼에도 불구하고 성공한 케이스라고 생각함, 솔직히 UX는 매우 별로임, 백엔드 엔지니어에게 큰 공이 있음, 간단한 텍스트 복사/붙여넣기도 찾는 데 시간이 오래 걸렸음, 텍스트 편집도 좋지 않음, 왜 전용 마크다운 노트 영역이 없는지 모르겠음, 대부분 PDF보단 텍스트 붙여넣기에 익숙하니 폴더랑 파일 구조도 필요함, Notes 앱 UI가 노트 편집 및 유지에 적합하지 않음

  • NotebookLM을 써본 적이 없어서 궁금함, Claude Projects에서 파일을 업로드하고 거기서 채팅하는 것보다 특별히 더 나은 점이 있는지 궁금함, 팟캐스트 기능이 독특하다는 건 알지만, 두 서비스를 다 써본 분들의 비교가 궁금함

    • 팟캐스트 기능 때문에 NLM을 좋아함, 최근 아침마다 학습용 팟캐스트를 틀어두고 하루를 시작하는데 이게 정말 좋음

    • 나도 같은 생각, 이젠 Claude Code랑 Codex CLI에서 폴더에 자료 넣고 그 안에서 바로 작업함

  • 좋은 부분도 많음, 예를 들어 3패널 구조나 왼쪽 소스 뷰어가 있음, 하지만 다음과 같은 점이 불편했음, 첫째, 3패널은 상단바 아이콘으로 전환 가능해야 하며 채팅과 노트가 동시에 안 쓰인다면 공간 낭비임, 둘째, 가운데 큰 영역은 반드시 출력에 집중해야 함, 채팅은 오디오 개요 등만큼 특별한 기능이 아니니 옆으로 빼도 됨, 셋째, 정보 밀도가 너무 낮고 버튼과 아이콘이 크고 둔탁함, AI는 엄청난 정보량을 다뤄줘서 화면 공간이 중요한데 여기에 불리함, NBLM의 매력은 오디오 개요에 있음, 채팅 기반 Q&A는 인용을 빼면 대형 LLM들에서는 다 기본적으로 제공함, 그리고 Gemini Flash만 사용하는데, 검색형 모델 느낌이라 추론형이랑 조합해야 좋을 것 같음

  • 책 파일을 올리고 NotebookLM과 대화하면서 유익한 내용을 나눴는데, 왜인지 그 대화가 저장되지 않아 다시 찾아 들어가거나 이어서 할 수 없음, 다른 AI 서비스(Gemini, GPT)와 다르게 UX/UI가 왜 거꾸로 바뀌었는지 이해가 안 됨, 그리고 NotebookLM이 자료로 에세이 작성도 못 해줌

    • 관련해서, 앱에서 정보를 바깥으로 빼는 게 제한된 것도 이상함, 구글 닥스로 내보내기 같은 기능이 당연히 있어야 하는데, 복사-붙여넣기만 가능함

  • 컨텍스트 크기와 팟캐스트가 좋은데 UX는 이해가 안 됨, 노트의 개념이 불명확함, 내 노트와 AI 노트가 대체 어떻게 다른지 모르겠음, 논문 작업 방식(PhD in Psy)과 안 맞아서 그럴 수도 있고 elicit에 길들여진 탓일 수도 있음

    • 노트는 노트북을 다른 사람과 공유할 때 도움이 됨, 스니펫을 통해 바로 핵심 대화거리를 제공할 수 있음

    • 자폐 연구자로서 나도 '노트' 개념이 이해 안 됨, 이걸 원노트 같은 노트앱으로 써야 하는 건지, LLM과 논문을 상호작용하며 공부하면 확실히 빨라지긴 함, 운전할 때 오디오 개요도 써봤지만 정말 깊은 과학 내용까지 파고들게 하긴 어렵더라

  • 꾸준히 쓰는 분들께 궁금함, 주로 무슨 용도로 사용함? 오디오 개요 외에 일반 챗이나 문서 통합보다 더 나은 점이 뭔지 알고 싶음

    • arxiv 논문이나 Hacker News 댓글, 기타 여러 긴 텍스트를 팟캐스트로 만들어 출퇴근 길에 청취함

    • 난 계약 이후 고객을 처음 만나는 기술 컨설턴트임, 이전 미팅 녹취와 계약 조건을 NotebookLM에 넣고 목표나 리스크를 묻거나 우선순위 도출 등 하이레벨 질문을 함, 그걸 기반으로 첫 미팅용 슬라이드를 작성하고, 나중에 발견 세션 녹취도 넣음, 여기서 관리 방식 평가 보고서 초안까지 뽑아냄, 하지만 LLM이 쓴 내용을 그대로 클라이언트에게 보여주진 않고 내 스타일대로 꼭 다시 씀, 회사에서 공식적으로 GSuite를 쓰고 있고 NotebookLM이 소스 큐레이션을 잘 해주는 게 장점임

    • 복잡한 보드게임 규칙을 일일이 룰북에서 찾지 않고 질문만 하면 인용까지 곁들여 답해줘서 게임 공부에 아주 요긴함

    • 오디오보다는 영상 설명이 더 좋게 느껴짐

    • 친구가 대학 시험 공부할 때 퀴즈랑 플래시카드 만드는 용도로 활용함

답변달기