이 글은 David Walsh와 Robert Nyman의 The Mozilla Developer Network has a New Face의 한국어 번역본입니다.

지난 여름, Mozilla Developer Network (MDN)은 써드파티 솔루션에 종속되어 있다가 코드네임 Kuma라는 저희만의 django 어플리케이션으로 옮겨오면서 큰 변화를 겪었습니다. 그 변화는 최근 MDN에서의 주요 개선 작업을 위한 일이였습니다: 사용성과 접근성 뿐만 아니라 많은 새로운 특징들을 추가한 완벽한 프론트엔드 재-디자인. 새로운 MDN에서 볼 수 있는 것들과 조만간 보게될 새로운 기능들에 대해 빠르게 짚어보겠습니다!

새로운 MDN 특징들

검색에 대한 집중

다수의 MDN 사용자들은 MDN 홈페이지에서 문서를 검색하기 위해 들어옵니다. 따라서 저희는 검색창을 맨 앞, 가운데에 배치하였습니다:

또한 사용자들이 검색 결과를 필요에 맞게 좁혀나갈 수 있도록 검색 필터 기능을 추가하였습니다:

기술적인 관점에서 보면, 저희는 Elasticsearch로 전환하여 임의적으로 새로운 검색 기능을 추가할 수 있을 뿐만 아니라 개선 사항들에 대해 인덱싱 및 필터링을 추가할 수 있도록 하였습니다. 저희는 많은 피드백에 따라 미세조정 검색을 기대하고 있으며 이로써 여러분이 더 나은 문서들을 더 빠르게 검색할 수 있도록 지속적으로 도움을 드릴 수 있을 것입니다.

쉬운 네비게이션

이전 디자인에서는 문서 간에 이동하는 일이 힘들었습니다. 따라서 저희는 두가지 방법으로 이 문제를 해결하였습니다. 첫번째는 Content Zones으로 해당 주제에 대하여 네비게이션을 생성하는 방법입니다.  저희는 MDN에서 가장 많은 문서를 차지하는 주제들 –  App Center, Firefox, Firefox OS, Firefox Marketplace, Add-ons, Persona -에 대해 적용해보았습니다:

Content Zones

MDN의 새로운 Content Zones는 해당 주제에 대하여 API 세부명세에서 상급 기술 문서까지 완벽한 문서 집합을 제공합니다. 다음의 Zones부터 적용할 예정입니다:

Firefox OS

Firefox OS Zone은 다음을 포함합니다:

• 세부 플랫폼 가이드
• 빌드와 설치하기
• Firefox OS 해킹
• 어플리케이션 디자인 & 개발

Firefox Marketplace

Firefox Marketplace Zone은 다음을 포함합니다:

• 어플리케이션 등록 및 리뷰
• 어플리케이션 퍼블리싱 및 수익 관리
• Marketplace API 정보

App Center

App Center Zone은 다음을 포함합니다:

• 빠른 시작 가이드
• 디자인 & 빌드 팁
• 어플리케이션 퍼블리싱 가이드라인
• API 레퍼런스

Persona

Persona Zone은 다음을 포함합니다:

• 사이트에 Persona를 적용하기 위한 가이드
• 사용자 인증 제공자 등록하기
• Persona 프로젝트 세부 사항

Firefox

Firefox Zone은 다음을 포함합니다:

• 완벽한 Firefox Add-on 개요
• Firefox 내부 정보
• Firefeox 제작 및 기여하는 방법에 대한 세부 안내

Add-ons

Add-ons Zone은 다음을 포함합니다:

• XUL 익스텐션 정보
• 가장 실용적인 팁
• 테마
• Add-on 퍼블리싱 가이드라인

“See Also” 링크

위키 페이지에서 볼 수  있는 “See Also” 링크를 구현하여 여러분이 현재 보고있는 문서와 관련된 또 다른 문서들을 연결하였습니다.

Zone 하위네비게이션 및 “See Also” 링크 사이드바 위젯은 위키 문서에 있는 기본 링크를 기반으로 만들어졌기 때문에 MDN에 기여하고자 하는 누구든지 쉽게 링크를 추가하거나 네비게이션 순서를 바꿀 수 있습니다. 이 링크 목록들은 MDN 매크로 언어, Kumascript, 를 사용하여 만들 수 있으며 저희 제작 팀에서 “See Also” 링크를 자동화하는 멋진 작업을 이미 해놓았기 때문에 여러분들은 다른 문서들을 일일이 찾아다니는 수고로움을 덜 수 있습니다.

최상위 네비게이션

최상위 네비게이션에는 다섯가지 분류로 나뉘어져 있습니다:

• 위에서 언급한 Content Zones
• Web Platform, 기술, 레퍼런스, 가이드에 관한 더 많은 정보들에 대해 링크를 포함하고 있습니다
• Developer Program – 개발자들을 도우며 지속적인 관계와 채널들을 구축할 수 있도록 저희는 Mozilla Developer Program을 만들었습니다. 현재 이 프로그램에 대한 많은 계획들과 아이디어들을 가지고 있으며 여러분이 저희와 함께하기를 바라고 있습니다! 그렇기 때문에, 가입하세요! 멤버쉽에 등록하여 저희가 보내는 뉴스레터들을 구독하고 앞으로 저희들이 내놓을 많은 기능들을 접해보세요.
• Tools – Firefox 개발자 도구와 그 기능들에 대한 더 많은 정보들
• Demos, Demo Studio에 대한 링크

개선된 Kumascript 매크로 기능

Kumascript, MDN 다이나믹 매크로 언어,는 외부 RSS 피드를 구독하기에 최적화되어있습니다. 현재 MDN은 StackOverflow의 포럼 포스트나 Mozilla Hacks 블로그의 블로그 포스트들을 가져와 구독할 수 있는 피드 리더를 사용하고 있습니다. MDN:Common macro 에서 위키 문서의 피드 컨텐츠들을 보여주기 위한 fetchJSONResource와 fetchHTTPResource 메소드들을 확인해보세요.

추가될 기능들

이번 재-디자인은 MDN을 좀 더 다이나믹하고 사용성을 높이도록 만드려는 저희 계획의 시작일 뿐입니다. MDN 개발 및 UX 팀들은 2014년에 훨씬 더 많은 것들을 보여드릴 것입니다. 2014년에 볼 수 있는 몇 가지 것들을 소개해드립니다!

다이나믹 검색 필터링

사용자가 검색을 보다 효율적으로 할 수 있도록, 저희는 첫 검색에 포함될 수 있게 문자열 필터링 앞에 붙는 해시태그를 구현하고 있습니다. 그럼으로써 사용자가 검색 결과 페이지에서 추가로 검색 결과에 대해 필터링할 필요가 없어질 것입니다.

Holly Habstritt Gaal은 그녀의 블로그에 이 쿼리 시스템에 대하여 자세히 설명해놓았습니다. 자세한 구현 사항에 대해서는 그녀의 블로그를 참조해보세요.

문서 네비게이터

따라서 여러분들은 한 번의 검색으로 여러분이 필요한 문서를 바로 찾아갈 수 있습니다. 하지만 여러분이 또 다른 문서를 검색할 필요가 생기면 어떨까요? 검색 결과 페이지로 다시 돌아가는 대신에 해당 위키 페이지(사용자가 검색을 통해 들어왔다면)에서 다음 혹은 이전 결과로 이동할 수 있는 문서 네비게이터를 볼 수 있으며 혹은 본래 검색 결과의 전체 리스트도 볼 수 있습니다.:

여러분이 필요한 것을 더 빨리 찾을 수 있는 또 하나의 손쉬운 방법입니다!

Demo Studio와 Dev Derby 재-디자인

MDN Demo Studio와 Dev Derby의 재-디자인은 조만간 완성될 것입니다. 현재 매우 훌륭한 시안이 완성되어 있으며 2014년 초에 여러분께 보여드릴 수 있기를 바라고 있습니다.

이번 새로운 MDN에 대하여 제안 사항이나 어떤 버그를 발견하시면, 저희에게 알려주시면 감사하겠습니다.

2014년 그리고 이후에도 MDN에서 많은 것들을 기대해 주세요. MDN 플랫폼은 저희와 여러분들이 함께 문서와 웹 기술들을 보고, 쓰고, 경험하는 것에 대해 더 확장하고 개선해 나갈 것을 약속드립니다!