MDN

MDN 은 웹 개발 문서를 모아 배포하는 사이트입니다. 브라우저 위에서 도는 기술을 다룹니다. Mozilla Corporation 이 소유합니다. 문서는 자원봉사자들이 함께 씁니다.

상세

MDN 은 Mozilla Developer Network 의 줄임말입니다. 사이트 이름은 MDN Web Docs 입니다. 저장소 README 는 이것을 웹 기술을 문서로 적는 오픈소스 협업 프로젝트라고 소개합니다. 다루는 범위는 HTML(HyperText Markup Language)과 CSS(Cascading Style Sheets), JavaScript, Web API(Application Programming Interface)입니다. 자세한 레퍼런스 문서 옆에 입문자용 학습 자료도 같이 냅니다.

소유는 Mozilla Corporation 입니다. 개발은 Mozilla 가 합니다. 전 세계 자원봉사자·파트너 커뮤니티가 함께합니다. Mozilla 의 MDN 팀이 플랫폼 개발과 콘텐츠 전략, 전체 방향을 이끕니다. 커뮤니티는 콘텐츠 작성과 번역, 브라우저 호환성 개선에 기여합니다.

원본과 배포

문서 원본은 GitHub 저장소 mdn/content 에 있습니다. 이 저장소가 스스로를 MDN Web Docs 콘텐츠의 공식 원본이라고 적습니다. 집필자는 여기에 풀 리퀘스트를 올려 문서를 고칩니다. 2020년 전환 발표 글은 읽는 사람에게 미리 렌더된 문서를 S3 에서 CDN(Content Delivery Network)을 거쳐 내보내겠다고 적었습니다. 아래 그림은 그때 발표된 흐름입니다. 사이트 주소는 developer.mozilla.org 입니다.

flowchart TD
    W["집필자"] -->|풀 리퀘스트| R["GitHub 저장소 mdn-content"]
    R -->|빌드| P["미리 렌더된 문서"]
    P --> S["S3"]
    S -->|CDN| U["읽는 사람"]

로컬에 띄울 수도 있습니다. Node.js 를 깔면 npm 이 같이 들어옵니다. 저장소에서 npm i 로 의존성을 받고 npm start 로 미리보기를 띄웁니다. 주소는 localhost:5042 입니다.

규모와 언어

About 페이지는 문서 45,000쪽, 언어 7개, 월 페이지뷰 4,600만을 적습니다. 전 세계에서 월 1,500만 명 넘게 쓴다고도 적습니다. mdn/content README 는 2005년 이후 약 45,000명이 기여해 45,000편 넘는 문서를 만들었다고 적습니다. 영어 문서 밖으로는 자원봉사자 35명 넘는 인원이 중국어·프랑스어·일본어·한국어·포르투갈어·러시아어·스페인어 번역을 이끕니다.

이름은 처음부터 MDN 이 아니었습니다. 2005년에 Mozilla 가 DevMo 라는 이름의 커뮤니티 위키로 시작했습니다. 2010년에 Mozilla Developer Network 로 이름을 바꿨습니다.

포기한 것

사이트에서 바로 고치는 편집

2020년까지 MDN 을 굴린 플랫폼은 Kuma 였습니다. 콘텐츠는 MySQL 데이터베이스에 있었습니다. Mozilla 는 그 콘텐츠를 GitHub 저장소로 옮겼습니다. 코드명은 Project Yari 였습니다. 위키 모델을 풀 리퀘스트 모델로 바꾼 것입니다.

사라진 것이 발표 글에 그대로 적혀 있습니다. 페이지에서 편집을 눌러 고치고 저장하면 거의 즉시 반영되던 흐름이 없어졌습니다. WYSIWYG(What You See Is What You Get) 편집기도 없어졌습니다. 대신 git 과 GitHub 도구로 풀 리퀘스트를 올려야 합니다. 그다음 머지와 새 빌드 배포를 기다립니다.

무엇을 얻었는지도 같이 적혀 있습니다. Kuma 는 복잡해서 유지보수가 힘들었습니다. 새 기능을 넣기도 매우 어려웠습니다. 기존 코드베이스에서 상당 부분을 덜어낼 수 있으리라고 추정했습니다. 기여 흐름도 바뀌었습니다. 예전에는 편집이 즉시 게시되고 부적합하면 되돌렸습니다. 발표 글은 그 방식이 커뮤니티 관계에 해롭다고 적습니다. 풀 리퀘스트 모델에서는 편집을 리뷰해 피드백을 줍니다.

명세를 만드는 일

MDN 은 값을 정하지 않습니다. 문서로 적을 웹 기술은 네 조건을 다 채워야 합니다. 표준화 궤도에 있어야 합니다. 신뢰할 수 있는 표준화 기구가 낸 명세에 규정돼 있어야 합니다. 렌더링 엔진 하나 이상이 구현해야 합니다. 안정 브라우저 버전으로 출시돼 있어야 합니다.

글쓰기 지침은 MDN 에 두지 않는 문서 종류를 따로 나열합니다. 그 목록에 명세 또는 표준(Specifications or standards)이 들어 있습니다. 계획 문서와 설계 문서, 프로젝트 제안, 홍보물도 같은 목록에 있습니다. MDN 은 일반적으로 제품 문서를 위한 곳이지 프로젝트나 프로세스 문서를 위한 곳이 아니라고 적습니다.

실제 문서가 그렇게 생겼습니다. Array.prototype.map() 레퍼런스 페이지의 「Specifications」 절은 ECMAScript 2027 Language Specification 의 sec-array.prototype.map 을 가리킵니다. 정본은 MDN 바깥에 있습니다.

웹 플랫폼 밖 문서

글쓰기 지침은 일반적으로 열린 웹 표준이 아닌 것은 MDN Web Docs 에 속하지 않는다고 적습니다. 부적합한 주제로 든 예가 넷입니다. 웹에 노출되지 않고 특정 브라우저에만 있는 기술, 웹과 무관한 기술, 최종 사용자를 위한 문서, 자기 링크나 자기 홍보성 외부 링크입니다. Mozilla 제품의 최종 사용자 문서는 Mozilla 지원 사이트가 받습니다.

백엔드 기술은 대개 다른 곳에 자체 문서가 있습니다. MDN 은 그것을 대체하려 하지 않는다고 적습니다. 다만 예외가 좀 있다는 단서를 함께 답니다.

예시

Array.prototype.map() 문서 한 장

레퍼런스 페이지는 절 순서가 정해져 있습니다. Array.prototype.map() 문서는 이 순서로 놓입니다.

Syntax → Parameters → Return value → Description →
Examples → Specifications → Browser compatibility → See also

이 구조는 문서마다 즉흥으로 정하는 것이 아닙니다. MDN 은 page-type 이라는 프론트매터 키로 페이지 종류를 밝힙니다. 종류마다 템플릿이 있습니다. API 랜딩 페이지, API 레퍼런스 페이지, HTML 요소 레퍼런스 페이지, CSS 모듈 페이지, HTTP(HyperText Transfer Protocol) 헤더 레퍼런스 페이지, ARIA(Accessible Rich Internet Applications) 레퍼런스 페이지, 글로서리 페이지 같은 것들입니다.

브라우저 호환성 표

「Browser compatibility」 절의 표는 데이터에서 만들어집니다. browser-compat-data 프로젝트가 기계가 읽는 호환성 데이터를 갖고 있습니다. 줄여서 BCD 라고 부릅니다. Web API 와 JavaScript 기능, CSS 속성 같은 것이 대상입니다.

BCD 는 npm 패키지로 배포됩니다.

npm install @mdn/browser-compat-data

받은 것은 JSON(JavaScript Object Notation) 데이터 트리입니다. TypeScript 타입 정의도 같이 나옵니다. 그 타입 정의는 스키마 정의에서 자동 생성됩니다.

사용처

MDN 이 만든 데이터는 MDN 사이트 밖에서도 쓰입니다. BCD 저장소 README 가 「Projects using the data」 절에 쓰는 쪽을 이름으로 적어 뒀습니다.

BCD 말고 mdn/data 저장소도 있습니다. 이 데이터는 MDN 문서의 정보 상자와 사이드바 내비게이션을 만드는 데 쓰입니다. 바깥 도구도 가져다 씁니다. CSSTree CSS 파서가 그 예로 적혀 있습니다. 다만 mdn/data 는 지금 w3c/webref 로 넘기는 중이라고 저장소가 알립니다.

관련 항목

MDN 문서가 다루는 웹 기술과 주제

HTML · CSS · JavaScript · Web API · API · HTTP · URI(Uniform Resource Identifier) · 웹 확장 · WebAssembly · WebDriver · DOM · ARIA · 브라우저 · 개발 · 접근성 · 미디어 · 성능 · 프라이버시 · 보안 · 프로그레시브 웹 앱 · 글로서리

문서를 만드는 도구

Yari · GitHub · 풀 리퀘스트 · npm · Node.js

문서가 배포·전달되는 경로

배포 · JAMStack · Amazon S3 · CDN

MDN 이 버리고 떠난 예전 기반

Kuma · MySQL · 데이터베이스 · WYSIWYG

MDN 문서화 여부를 가르는 표준과 조건

ECMAScript · WHATWG · W3C · 표준화 궤도 · 렌더링 · 렌더링 엔진

MDN 이 배포하는 호환성 데이터

BCD · browser-compat-data · mdn-data · JSON · 스키마

호환성 데이터를 가져다 쓰는 제품

caniuse · caniuse-lite · CanIUse Embed · csstype · web-features · webhint.io · Visual Studio Code · JetBrains WebStorm · TypeScript · CSSTree · Mozilla Firefox

MDN 범위와 맞세워지는 대립 개념

백엔드

MDN 을 관리·소유하는 주체

Mozilla Corporation

MDN 을 신뢰할 참고자료로 인용하는 학습 플랫폼

freeCodeCamp · Codecademy