# SmartStudio

## SmartStudio를 소개합니다.

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

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

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

### SmartEditor

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

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

<figure><img src="https://3360715702-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXlYqHAZoTmO3t5Lqyc%2F-MiM6VST2w0AbDsETTQK%2F-MiM874KTufwnhK0nifQ%2FSmartEditorONE_F.gif?alt=media&#x26;token=db99c8cc-4896-43da-964b-4dab4c044f4b" alt=""><figcaption></figcaption></figure>

### HomeBuilder

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

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

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

<figure><img src="https://3360715702-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXlYqHAZoTmO3t5Lqyc%2F-MhXQR8nKEUfhuFotv_A%2F-MhXTxBnlz9CyK6VnC7_%2F%E1%84%92%E1%85%A9%E1%86%B7%E1%84%87%E1%85%B5%E1%86%AF%E1%84%83%E1%85%A5_ani.gif?alt=media&#x26;token=854c77ce-2939-4596-84e8-dda89a8b17a9" 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

![](https://3360715702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXlYqHAZoTmO3t5Lqyc%2Fuploads%2FPziDvy0TAvLElObB8Oja%2Fimage.png?alt=media\&token=af84646a-2db3-402d-aae8-e0f26d7ef4c8)

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

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

![](https://3360715702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXlYqHAZoTmO3t5Lqyc%2Fuploads%2FnSsB6OhmYuJuxRbX3vzn%2Fimage.png?alt=media\&token=86c3b564-74ce-45b3-bc85-6af0a2bcf247)

#### 기술 스택

* 프레임워크: 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="<https://3360715702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXlYqHAZoTmO3t5Lqyc%2Fuploads%2FTMR2o1tBOjbt6cOnSnxK%2F%E1%84%82%E1%85%A6%E1%84%8B%E1%85%B5%E1%84%87%E1%85%A5_%E1%84%89%E1%85%B3%E1%84%86%E1%85%A1%E1%84%90%E1%85%B3%E1%84%8B%E1%85%A6%E1%84%83%E1%85%B5%E1%84%90%E1%85%A5_%E1%84%87%E1%85%B3%E1%84%85%E1%85%A9%E1%84%89%E1%85%A7_%E1%84%92%E1%85%A1%E1%86%AB%E1%84%80%E1%85%B3%E1%86%AF.pdf?alt=media&token=5d23f2df-db31-4b62-8263-38a747122e30>" %}

{% file src="<https://3360715702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXlYqHAZoTmO3t5Lqyc%2Fuploads%2FXOi97MI98Z9qo5LMiOlZ%2F%E1%84%82%E1%85%A6%E1%84%8B%E1%85%B5%E1%84%87%E1%85%A5_%E1%84%8B%E1%85%A6%E1%86%AB%E1%84%87%E1%85%B5%E1%86%AF%E1%84%85%E1%85%B5_%E1%84%87%E1%85%B3%E1%84%85%E1%85%A9%E1%84%89%E1%85%A7_%E1%84%92%E1%85%A1%E1%86%AB%E1%84%80%E1%85%B3%E1%86%AF.pdf?alt=media&token=fbaf2970-ee43-4fea-aca2-6cdfffffee95>" %}