# SmartStudio

## SmartStudio를 소개합니다.

네이버의 국내 및 글로벌 서비스에서는 다양한 형태의 콘텐츠를 만들고  서비스합니다. SmartStudio는 다양한 콘텐츠를 생산할 때 쓰이는 콘텐츠 저작 도구를 개발하는 전문가 그룹입니다.

콘텐츠를 만드는 도구, 그 콘텐츠를 잘 볼 수 있는 뷰어, 그리고 콘텐츠를 서비스하기 위한 안정적인 글로벌 플랫폼까지 콘텐츠를 위한 생산과 소비의 프로세스를 기술로 연결합니다.

## SmartStudio는 이런 일을 합니다.

### SmartEditor

SmartEditor는 문서 기반의 콘텐츠를 생산하고 소비할 수 있는 통합 환경을 제공하는 WYSIWYG 플랫폼으로 JavaScript SDK, iOS SDK, Android SDK, UI Framework를 개발 및 제공합니다.

구조화된 문서 데이터를 기반으로 문서 통계와 높은 품질의 사용성과 기능성을 제공하기 위해 AI 프로젝트를 진행하고 있으며, 접근성과 사용자 편집 인터랙션 실시간 프로세싱 및 렌더링을 연구, 개발합니다.

<figure><img src="/files/-MiM874KTufwnhK0nifQ" alt=""><figcaption></figcaption></figure>

### HomeBuilder

HomeBuilder는 네이버 서비스에 자신의 명함과 같은 홈을 만드는 WYSIWYG 플랫폼입니다. SNS 정보와 이미지, 영상, 글 컴포넌트를 레이아웃으로 조합하여 나만의 홈을 제작할수 있도록 지원합니다.

네이버에서 쇼핑이나, UGC 같은 서비스에 개성있는 홈을 만드는 도구와 API 를 제공하고, 서비스를 사용해야 하는 이유가 되는 플랫폼을 개발합니다.

* 사용자가 코드 없이 UI로 미려한 홈을 만들 수 있는 도구 제공
* 네이버와 외부 SNS를 포함한 콘텐츠 소비의 창구
* 서비스에서 간편하게 적용할 수 있는 SDK 제공
* 엔터프라이즈 Front-End 플랫폼을 통한 네이버 국내 및 글로벌 서비스 지원

<figure><img src="/files/-MhXTxBnlz9CyK6VnC7_" alt=""><figcaption></figcaption></figure>

### Platform FE

Platform FE 조직은 네이버의 다양한 서비스들이 운용하는 서버 상태에 대한 실시간 모니터링과 로그, 데이터 시각화 영역에 대한 플랫폼 도구/서비스들의 UI/UX 개발을 담당하고 있습니다.

또한 주요한 플랫폼 도구들의 핵심적 FE 요소들은 아의 오픈소스 프로젝트들로 공개해 개발하고 있습니다.

#### billboard.js

![billboard.js](https://naver.github.io/billboard.js/img/logo/billboard.js.svg)

글로벌하게 사용되는 재사용 가능하며, 간결하고 쉬운 인터페이스 웹 차트 라이브러리

* <https://github.com/naver/billboard.js>

![](https://naver.github.io/billboard.js/img/chart-types.png?v=6)

#### Pinpoint

![](/files/8AZBVrOFLKnnBwGpqDDZ)

* <https://github.com/naver/pinpoint>

> \[참고] [대규모 분산 시스템 추적 플랫폼, Pinpoint](https://d2.naver.com/helloworld/1194202)

![](/files/k1sTR9XXJ9IQg7ZDVY5c)

#### 기술 스택

* 프레임워크: React, Angular
* JS Flavor: ES6+, TypeScript
* Backend: Node.js + Express + Apollo GraphQL
* Bundler: Webpack, Rollup.js
* State management: Redux, Recoil
* Test: Mocha + Chai, Karma, Jest, Puppeteer

#### 기술 공유 활동

Platform FE 조직에서는 다음과 같은 다양한 Front-end 기술 공유 활동을 진행하고 있습니다.

* JavaScript 동향 시리즈
  * [2020년과 이후 JavaScript의 동향 - JavaScript(ECMAScript)](https://d2.naver.com/helloworld/4268738)
  * [2020년과 이후 JavaScript의 동향 - WebAssembly](https://d2.naver.com/helloworld/8257914)
* FE News: 월간 FE 기술뉴스 레터 운영
  * [https://github.com/naver/fe-news](#platform-fe)
* FE Conf
  * [Chrome DevTools Protocol을 활용하여 Debugger 개발하기](https://youtu.be/ul_pozst_EU)
* DEVIEW
  * [The state of JavaScript & FE, 2021 Edition (2021년 FE 동향, 한방에 끝내기)](https://deview.kr/2021/sessions/508)
  * [데이터 시각화의 꽃 APM FE 개발 이야기](https://deview.kr/2021/sessions/483)
  * [Inside React (동시성을 구현하는 기술)](https://deview.kr/2021/sessions/518)

## 상세한 내용을 담았어요.

{% file src="/files/b4LrTgRaEb33udsZNqhW" %}

{% file src="/files/k8HBr2gzXYvBCbxl0XsA" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://naver-career.gitbook.io/kr/smartstudio.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
