# Observable Framework에서 나타난 흥미로운 아이디어들

> Clean Markdown view of GeekNews topic #13646. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=13646](https://news.hada.io/topic?id=13646)
- GeekNews Markdown: [https://news.hada.io/topic/13646.md](https://news.hada.io/topic/13646.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-03-04T18:35:28+09:00
- Updated: 2024-03-04T18:35:28+09:00
- Original source: [simonwillison.net](https://simonwillison.net/2024/Mar/3/interesting-ideas-in-observable-framework/)
- Points: 3
- Comments: 1

## Topic Body

### Observable Framework의 새로운 아이디어

- Observable Framework는 정적 사이트 생성기로, 마크다운과 자바스크립트를 혼합하여 빠르게 로딩되는 인터랙티브 페이지로 컴파일함.
- 실시간으로 파일을 편집하고 저장하여 브라우저에서 즉시 변경 사항을 볼 수 있는 핫 리로딩 서버를 제공함.
- 작업이 완료되면 정적 파일로 변환하여 서버에 배포하거나 Observable의 공유 플랫폼에 직접 배포할 수 있음.

### 마크다운 내의 자바스크립트

- 마크다운 내의 `js` 태그가 붙은 코드 블록은 사용자의 브라우저에서 자바스크립트로 실행됨.
- `now`라는 특별한 변수는 에포크 이후 현재 시간을 밀리초 단위로 제공하며 지속적으로 업데이트됨.
- Observable Framework는 마크다운과 자바스크립트를 하나의 텍스트 문서로 통합하여 인터랙티브 문서를 생성함.

### 모든 것은 여전히 반응적임

- Observable Framework는 Observable 노트북의 반응성을 유지하며, 의존하는 다른 셀이 변경될 때 자동으로 새로고침됨.
- 폼 입력과 함께 작업할 때 특히 유용하며, 문서에 실시간 인터랙티비티를 쉽게 추가할 수 있음.

### 사용하는 코드만 포함

- Observable Framework는 개발 모드에서 지연 로딩을 구현하여 사용하는 코드만 로드함.
- 애플리케이션을 빌드하고 배포할 때, 참조된 라이브러리 코드만 jsdelivr CDN에서 자동으로 로드함.

### 빌드 시간에 데이터 캐시

- Framework는 데이터 로더 메커니즘을 통해 빌드 시간에 대시보드 데이터를 빌드하여 정적 파일로 번들링함.
- 데이터 로더는 어떤 프로그래밍 언어로든 작성할 수 있는 스크립트로, 빌드 시간에 실행되어 출력을 파일로 저장함.

### Observable 노트북과의 비교

- Observable Framework는 Observable 노트북의 아이디어와 코드를 재사용하지만, 단일 텍스트 파일로 구성되며 모두 오픈 소스임.
- 표준 자바스크립트를 사용하며, 더 간단한 파일 형식으로 Git에 체크인할 수 있음.

### 전략의 변화

- Observable Framework는 개발자 도구 공간으로 더 많이 기울어지는 Observable 회사의 전략적 변화를 나타냄.
- Observable Framework는 Observable 노트북의 기술에 대한 존중과 함께, 플랫폼의 독점적인 성격과 무료 계정의 제한 때문에 사용을 제한했던 문제를 해결함.

### GN⁺의 의견

- Observable Framework는 데이터 시각화와 대시보드 구축을 위한 새로운 도구로, 개발자들에게 더 나은 협업과 효율성을 제공할 수 있는 잠재력을 가짐.
- 이 플랫폼은 데이터 기반 의사결정을 지원하는 인터랙티브한 문서와 대시보드를 쉽게 만들 수 있게 해주어, 데이터 과학자와 개발자 모두에게 유용할 것임.
- 그러나 Observable Framework의 성공은 개발자 커뮤니티의 채택과 기존 도구들과의 통합 정도에 크게 의존할 것임.
- 비슷한 기능을 제공하는 다른 프로젝트로는 Jupyter Notebook이나 R Shiny가 있으며, 이들과의 비교를 통해 Observable Framework의 장단점을 더 잘 이해할 수 있음.
- Observable Framework를 도입할 때는 기존 데이터 파이프라인과의 호환성, 성능 최적화, 그리고 커뮤니티 지원과 같은 요소들을 고려해야 함.

## Comments



### Comment 23478

- Author: neo
- Created: 2024-03-04T18:35:29+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=39582745) 
- Observable Framework을 마이크 보스톡(Mike Bostock)의 시네마틱 유니버스에서 "어벤져스: 엔드게임"에 비유함.
  - d3, Observable, Observable Plot, HTL을 결합하고 새로운 아이디어를 추가한 것으로 설명됨.

- Observable Framework 사용 시 문제점으로 d3 예제 리소스로서의 기능이 언급됨.
  - 해당 프레임워크에서만 실행되도록 설계되어 있어 코드를 그대로 복사-붙여넣기 할 수 없음.
  - d3 자체가 사용하기 쉽지 않고 버전 간 호환성 문제가 있지만, 사이트에서 놀라운 그래픽을 찾을 수 있음.

- Observable Framework를 GitHub 사이트에 쉽게 게시할 수 있다고 언급함.
  - 게시 방법에 대한 단계와 샘플 GitHub 액션을 작성한 노트 링크 제공.

- Observable 노트북을 사용하여 첫 프로젝트를 완성한 경험을 공유함.
  - Observable Plot, Arquero, 자바스크립트의 일부 재학습, Rust 기반 시뮬레이터와의 통합 등 다양한 도구 학습에 상당한 에너지가 소모됨.
  - 마크다운과 반응성을 사용하여 노트북이 실제로 사용 가능하게 느껴짐.
  - Jupyter의 사용자 정의 포맷과 반응성 부재로 인한 버전 관리 문제와 상태 기반 혼란을 해결함.
  - Quarto와의 Observable 통합 시도도 있었으나, 이는 불완전하고 조각난 느낌이었음.
  - 노트북 작성과 공유에 대해 기쁘고 흥미진진한 경험을 했으며, 앞으로도 첫 선택 도구로 사용할 것임.

- Observable Framework에 대한 긍정적인 경험을 공유함.
  - 인터랙티브한 플롯을 쉽게 설정하고 데이터를 플로팅하는 과정이 매우 간단했다고 언급.
  - Python 데이터 로더가 virtualenvs를 사용하도록 설정할 수 있으면 좋겠다는 바람을 표현함.

- Jupyter 노트북에서 Observable로 이동해야 하는지에 대한 질문이 제기됨.

- 코드 블록 내 'js' 콘텐츠 힌트가 있으면 사용자의 브라우저에서 즉시 실행됨을 설명함.
  - 코드를 보여주기 위해서는 'js echo' 힌트를 사용해야 함.
  - 기존 앱에 렌더러를 통합할 때 실행을 관리해야 하는 문제를 제기함.

- Observable이 ClickHouse의 REST API와 잘 통합되며, 데이터베이스를 실시간으로 쿼리하는 예제가 흥미롭다고 언급함.
  - 앱이 상호작용적이어야 하므로 데이터를 사전 로딩하고 캐싱하는 것이 유일한 옵션이 아니길 바람.

- 브라우저에서 Framework를 빠르게 시도하고 조작할 수 있도록 Node와 Python 환경이 자동으로 설정된 Codespace devcontainers를 설정함.

- Observable이 자바스크립트만 지원함으로써 사용자 기반을 제한한다는 의견을 제시함.
  - 자바스크립트가 브라우저에서 대화형 디스플레이에 필수적인 언어이지만, 데이터 과학과 데이터 분석에는 Python이나 R에 비해 불편한 언어라고 평가함.