최근 수정 시각 : 2019-11-04 10:34:15

스마트에디터

1. 개요2. 첫 시작3. 스마트에디터 2.04. SmartEditor Basic5. 스마트에디터 3.0
5.1. 적용 서비스5.2. 문제점5.3. 변경 사항
6. 스마트에디터 ONE
6.1. 개선 사항6.2. 블로썸데이 세션6.3. 문제점

1. 개요

파일:external/img.event.naver.com/h_smarteditor1.gif
똑똑한 웹 문서 편집기
네이버에서 개발한 WYSIWYG 웹 에디터. 네이버 서비스에서 글쓰기가 제공되는 공간에서 만나볼 수 있다.

2. 첫 시작

네이버에서 모든 글쓰기를 보다 멋지고 세련되게!
네이버 블로그에서 포스트를 작성할 때, 친구에게 메일을 보낼 때, 그리고 카페, 지식iN에서도
누구나 멋지고 세련된 글을 쓸 수 있도록 해주는 웹 문서 편집기, 스마트에디터
2008년 "똑똑한 웹 문서 편집기"라는 이름으로 오픈하여 네이버 블로그, 네이버 카페, 네이버 지식iN, 네이버 메일 등 네이버 내 웹 형식의 문서를 작성하는 공간인 게시판, 커뮤니티형 서비스 등에 적용되었다.

네이버에서 개발한 진도 자바스크립트 프레임워크를 사용한, 웹 문서 글쓰기에 특화된 에디터.

3. 스마트에디터 2.0

더욱 강화된 글쓰기와 웹표준에 맞춘 스마트에디터 2.0
2010년 8월 베타 오픈하고, 2010년 12월 정식 오픈하였다.

기존 UI를 넓게 개선하고, 다양한 글 양식, 글 장식, 글감 첨부 기능을 지원하고, 인터넷 익스플로러에 의존한 웹 코드에서 웹 표준(HTML 4.01 Transitional)에 최적화하였다.

네이버 서비스 내에서는 새로운 포토 업로더와 이미지 에디터 기능을 제공하며, 사진 업로더가 플래시 기반으로 변경되어 ActiveX 설치 없이도 사진을 업로드할 수 있게 되었다. 네이버 블로그에 업로드한 사진은 더블 클릭하여 재수정할 수도 있다.

네이버 블로그에서 베타 오픈하여, 1.0과 2.0을 동시에 사용할 수 있었으며, 정식 오픈 후 2.0만 사용 가능. 오픈 당시, 인터넷 익스플로러 6에서는 오류와 속도 저하가 있었고, 기타 다른 브라우저에서 타이핑 속도에 대한 이슈, 문서 깨짐 등 사소한 오류가 있었지만 계속 업데이트되면서 이러한 이슈는 거의 사라졌다.

현재 네이버 블로그, 네이버 카페, 네이버 지식인, 네이버 메일에서 각각의 서비스에 맞는 기능을 적용한 채 폭넓게 서비스되고 있다.

4. SmartEditor Basic

네이버 서비스와 연동되어 제공되는 특화된 기능을 제외한 스마트에디터 기본 기능을 SmartEditor Basic라는 이름으로 오픈소스로 공개하였다.

LGPL v2 라이선스에 따라 오픈 소스로 운영하는 사이트에 적용하거나 개발/개량하여 배포할 수 있다. 공개된 스마트에디터 베이직은 최근까지 보안 패치 버전을 배포하고 있다.
운영체제 브라우저
Windows XP Internet Explorer 7.x, 8.x, Firefox 3.5이상, Chrome 4.0 이상, Safari 4.0이상
Windows Vista Internet Explorer 7.x, 8.x
Windows 7 Internet Explorer 8.x, 9.x, Firefox 3.5이상, Chrome 4.0 이상, Safari 4.0이상
Mac Firefox 3.5 이상, Safari 4.0 이상, Chrome 5.0 이상
공식 구동 사양이며, 이보다 상위 운영체제나 웹브라우저에서 문제없이 구동된다.

5. 스마트에디터 3.0

파일:크리에이티브 커먼즈 라이선스__CC.png 이 문단의 내용 중 전체 또는 일부는 네이버 블로그 문서의 r465 판에서 가져왔습니다. 이전 역사 보러 가기


네이버 블로그와 네이버 포스트 서비스에서 제공되는 스마트에디터 2.0를 이은 새로운 네이버의 웹 에디터. 2015년 8월에 네이버 포스트에서 처음 오픈되었으며, 2015년 11월 13일에 네이버 블로그에 오픈되었다.

파일:external/post.phinf.naver.net/mug_obj_148232765737561974.png넓은 글쓰기 화면과 단순함이 포인트이며, 모바일 크기, 태블릿 크기, PC 버전 크기[1]로 가로 크기를 조정하면서 글을 쓸 수 있다. 텍스트와 사진, 지도 등의 콘텐츠를 컴포넌트로 취급하여 위아래로 자유롭게 이동할 수 있다. 전체적으로 짧게 쓰고 굵게 쓰는 요즘 블로그 경향에 매우 최적화되고 획일화된 글쓰기 툴.

최대 장점은 PC와 모바일 앱 간 자유로운 글쓰기가 가능한 것이다. PC에서 쓰던 글을 모바일 앱에서 이어 쓰거나, 스마트폰에서 쓰기 시작한 글을 PC에서 이어 글을 쓸 수 있는 것. 그리고 모바일에서 볼 때 이미지 화질이 열화되는 1.0 및 2.0 버전과는 다르게 이미지가 깔끔하다.

그러나 단점도 많다. 이 부분 심각하게 읽어야 한다 가장 큰 단점은 HTML 방식의 편집을 전혀 지원하지 않는다는 것이다! 더 뜯어 보면 이 말인 즉슨, 포스팅 안에 HTML 기반 편집을 할 수 없고, object나 Iframe을 포함하여 외부 플러그인이나 embed 태그로 플래시 업로드 등이 전혀 불가능하다! 표를 사용할 수 없고, 사진을 3장 초과하여 겹칠 수 없다.[2] 가로 886px 이상으로 올리면 화질이 저하되는 문제도 있다. 글꼴 색을 선택할 때 컬러 코드를 이용하여 설정할 수 없다. 제시된 색상 이외의 색상을 쓰고 싶으면 다른 웹 문서나 워드프로세서 등에서 긁어서 붙여와야 한다.

각종 기능도 모두 제외하고, 컴포넌트가 분리되어 있으면 전체 선택(Ctrl+A)해서 외부에 붙여넣을 수도 없다! PC, 모바일 호환성을 위해서 HTML과 그 이전 모든 것을 포기해 버린 새로운 에디터가 되어버렸다. 어?

글을 발행하지 않는 이상 블로그/포스트에서 글을 미리보는 것이 불가능하다. 에디터 자체가 미리보기 화면이다. PC 및 모바일 동일.

2000년대에 유행했던 웹 에디터나 워드프로세서 방식을 완전히 버리고 개체로 옮기고 쓰고 하는 방식이다. 사실 업데이트된 버전이 아니라 그냥 새로 만든 버전이라고 부르는 게 무방하다. AS 2.0 혹은 AS 3.0

터치 인터페이스에 최적화된 디자인이라서 손이 많이 간다. 텍스트 입력하려고 텍스트 입력 커서가 바뀌는 곳을 찾아야 하고, 텍스트 컴포넌트가 마구 분리되어 있어 몇 번씩 지우고 합치는 작업이 필요하다. 마우스 요리조리 움직여 보고 텍스트 입력할 곳을 찾아야 하고, 입력이 안 될 경우 글 왼쪽에 나오는 + 단추를 눌러서 텍스트 컴포넌트를 추가해줘야 하니 슬슬 짜증난다. 모바일도 불편한 점이 다소 있다.

네이버 포스트에서는 3.0 형식에서 파생된 카드형 에디터를 추가 제공한다.

네이버 카페와 지식인, 메일 등의 서비스에서는 이전 에디터를 사용하고 있다. 기초 프레임워크가 있어 폭넓게 적용하기는 어려워 보인다. 그런데 2016년 12월, 본문스크랩이 가능하도록 업데이트되면서, 블로그에서 카페로 본문스크랩 시 3.0 형식이 변환되어 옮겨진다!

자살 입력 시 나오는 전화번호나 점검 공지도 노출된다

미국 산업 디자인 협회 IDSA에서 주관하는 IDEA에 2016년 디지털 디자인 부문으로 본상에 오르기도 했다.(#)

전체적으로 평이 좋지 않아서 그냥 이전 버전으로 쓰는 사람들이 많다.

또, 비공개 옵션을 도저히 찾을 수가 없는데, 발행 버튼을 클릭해야 나온다.(모바일에서는 상단의 카테고리명에 화살표 클릭으로 확인 가능)

5.1. 적용 서비스

  • 네이버 블로그: 3.0으로 작성한 글을 보면 2.0에서 쓴 글과 달리 양쪽에 간격이 더 들어가는 것을 확인할 수 있다. 이전 버전 에디터에 비해 가로 크기를 50픽셀 이상 더 먹고 들어간다. PC 버전 블로그에서 레이아웃 너비와 작성하는 에디터에 따라 지원하는 가로 크기가 다르다.[3]
    레이아웃 사양 3.0 가로 크기 2.0 가로 크기

    넓은 1단 886픽셀 936픽셀

    넓은 2단, 보통 1단 693픽셀 741픽셀

    보통 2단, 보통 3단 500픽셀 548픽셀
  • 네이버 포스트: 스마트에디터 3.0 기반 카드형 에디터를 추가 제공하며, 2016년 2월 이전에 네이버 포스트에 글 작성이력이 없는 경우 이전 버전 에디터 사용이 불가능하다.

SmartEditor Basic과 이전 버전 에디터와 호환되지 않고, 네이버 서비스 내에서만 적용되어 소스가 오픈되지 않았다.

5.2. 문제점

  • 글꼴 크기가 포인트가 아닌 제목 1, 2, 3, 그리고 본문 1, 2, 3, 4, 5로 이루어져 있다. 그냥 본문 12pt 내지는 14pt로 설정하면 되잖아 제목 간, 본문 간에서는 블록을 잡아서 크기를 바꿀 수 있다. 그러나 제목과 본문 간 크기를 전환할 때, 블록 잡은 모든 줄의 텍스트를 변환하고 컴포넌트를 분리해 버린다. 이 때 가끔 현재 커서에 있는 단락이 아닌 이전 단락이나 다음 단락에 크기가 적용되어 가끔 글을 엉망으로 만드는 경우도 생긴다.
  • 실행 취소가 가끔 엉뚱하게 되거나 몇 단계 동작도 뭉쳐서 취소된다. 주의해야 한다.
  • 2016년 7월 이전까지는 양쪽 정렬이 없었으며, 적용 범위가 단락이 아닌 컴포넌트 단위로 정렬된다. 즉 한 줄 한 줄 정렬을 다르게 할 수 없다.
  • 에디터의 특성을 알아야만 제대로 쓸 수 있다. 예컨대, 긴 텍스트를 작성하다가 중간에 사진을 넣거나 인용구를 넣으려면 제목과 내용 간 크기를 바꿔주거나, 인용구 변환 버튼을 누른 뒤 알맞게 작성해야 한다. 텍스트 안에서는 아무리 Enter를 눌러도 중간에 사진이나 다른 걸 넣을 수가 없어서 심히 불편하다. 또한 텍스트 컴포넌트가 위·아래로 분리된 경우 백 스페이스로는 합쳐지지만, 분리하기는 어렵게 설계되어서 여러모로 불편함을 감수해야 한다. 그런데 네이버측에서는 여전히 고치지 않는다.
  • 단락 문제가 있다. 보통 다른 웹 에디터나 워드프로세서에서는 Enter를 치면 한 단락이 끝났다고 생각하며 줄 간 간격과 단락 간격을 달리 준다. Enter를 치면 단락을 끝마친 것이고 Shift+Enter를 누르면 강제 개행을 하며 단락을 유지하되 줄을 넘길 수 있다. HTML에서는 강제 개행을 <br>로, 단락은 <p></p>로 감싸서 처리한다. 그러나 스마트에디터 3.0에서는 Enter를 치든 Shift+Enter를 치든 모든 줄 바꿈을 <br>태그로 처리한다. 자체적으로 단락을 바꾸려면 컴포넌트로 분리하는 방법밖에 없으며, 각 컴포넌트는 <div> 태그로 내부적으로 처리한다. 호환성 떨어지는 이유가 여기에 있다 3.0에서 작성한 글을 워드에 복사한 뒤 단락 기호를 확인하면 Enter가 아닌 ↓가 보이는데, 이것은 Shift+Enter로 단락 바꿈이 아닌 강제 개행을 한 것이다.[4]
  • 자동저장이 몇 분이 아닌 몇 마다 수행된다. 실수로 글을 지웠을 땐 껐다가 켜면 예전처럼 돌아와 있겠지 생각하지 말고 실행 취소를 사용하는 것이 좋으며, 별도로 수시로 저장 버튼을 누르는 것이 좋다.
    파일:external/post.phinf.naver.net/mug_obj_148232965559426685.png

    블록도 잡히지 않고 삭제도 불가능하다.(...)
  • 텍스트만 클립보드로 복사해서 다른 곳에 붙여넣을 수 있다. 가장 불편한 부분이다. 사진이나 링크같은 것은 컴포넌트 단위로만 선택 가능하다. 이를 복사하고 붙이기는 스마트에디터 3.0에서만 가능하고 다른 곳에서는 공백만 나오거나 아래처럼 한글 2007 같은 일부 워드프로세서에서는 깨져서 나오기도 한다.
  • 일부 웹 사이트나 워드프로세서에 작성된 글 또한 그대로 복사/붙여넣기하면 갑자기 글 구조를 읽어오는 것에 실패했다는 메시지가 나타나면서 불안정해지는 문제가 있고, 발행도 잘 안 되는 상황도 발생되기도 한다.
  • 오픈 직후 인터넷 익스플로러 호환성 모드에서 이전에 잘 열리던 댓글이 열리지 않아 한차례 이슈가 있었다. 지금은 잘 되지만 호환성 보기를 해제하는 것을 권장한다. IE 호환성 모드에서 스마트에디터 3.0 사용 시 에디터 위에 호환성 모드를 해제해 달라는 메시지가 나온다.
  • 맞춤법, 전체글꼴 설정 업데이트 이후, 작은 화면 해상도에서 가로 스크롤 바가 생기지 않아 발행 버튼이 있는 곳까지 창 크기를 키우지 않으면 발행 버튼을 누를 수 없어 글을 올릴 수 없다. 화면 해상도가 이보다 작으면 웹 브라우저의 확대/축소(Ctrl+ +/-) 기능을 이용하면 발행 버튼을 누를 수 있게 되지만 모바일에서는 확대/축소가 전혀 작동하지 않아 발행 버튼을 누를 수 없었다. 이 문제는 2016년 6월 중순에 해결되었다.
  • 스마트에디터 3.0에 들어가서, 내용을 작성하는 도중에 Page Up/Page Down을 눌러보자. 왼쪽의 글쓰기 도구가 사라지고 화면이 뭉개진다. 사라진 글쓰기 도구를 다시 펼치는 방법은 오른쪽 아래에 사진 검색을 클릭해야 화면이 정상적으로 복구된다.

5.3. 변경 사항

  • 맞춤법 검사 기능, 전체 글꼴 설정 기능이 추가되었다.
  • 2016년 4월, 포스트 제목의 크기를 3단계로 조절할 수 있게 되었고, 어울림 사진 배치와 코드 표현 컴포넌트가 추가되었다. 진작 해주지
    파일:external/post.phinf.naver.net/mug_obj_148232997754696103.png
  • 제목 영역의 제목 크기와 정렬을 각각 3단계로 설정하고 가운데 정렬이 가능해졌다.
  • 2016년 7월 초, 드래그 앤 드롭으로 사진 올리기와 신규 포토 에디터가 지원된다. 플래시 포토 업로더 없이 바로 업로드되며, 편집 시에도 새로운 에디터가 지원된다. 다만 여기에 기존 포토 업로더에 있었던 그리기·액자 기능이 없다. 양쪽 정렬과 줄 간격, 사진 크기 조절 기능이 덤으로.
  • 2016년 7월 28일에 스마트에디터 3.0용 포토 업로더에 서명 기능이 추가되었다. 동년 10월에는 텍스트 입력 기능과 스티커 꾸미기와 UI 개선이 있었다.
  • 2016년 12월 1일, 웹 브라우저에서 복사한 이미지를 바로 Ctrl+V로 붙여넣을 수 있고, 첨부한 동영상의 표시 크기도 조절할 수 있게 되었다고 한다.

6. 스마트에디터 ONE

2018년 6월 15일, 네이버 블로그 15주년을 기념하여 열린 오프라인 행사 블로썸데이(BLOSUM DAY)의 세션 스마트에디터 '간단하고 멋있는 글쓰기에 대해'에서 새로운 스마트에디터의 모습을 선보였다.

2018년 12월 4일, 네이버 블로그팀 공식 블로그에서 〈스마트에디터 ONE〉이라는 이름으로 새로운 스마트에디터의 모습을 공개하고, 2018년 12월 17일에 런칭되었다.(사용 가이드)

6.1. 개선 사항

  • 모바일에 최적화! 동영상 환경 대폭 개선
  • 글감별 맞춤 컨텍스트 툴 바 도입
  • 커서의 움직임, 이제 자유자재로
  • 검색과 연동된 다양한 글감 제공
  • 더 진화된 이미지 편집

6.2. 블로썸데이 세션

세션에 발표된 내용에 따르면 2018년 10월부터 네이버 블로그에 단계적으로 적용될 예정이다.(세션 영상보기) 2018년 10월에 예정이었으나 한 차례 연기하여 2018년 12월에 업그레이드 할 예정이라고 한다.

언급한 새로운 기능은 다음과 같다.
※ 해당 세션에 대해 언급한 내용이므로, 정식 출시시 실제 반영된 내용으로 수정해주시기 바랍니다. 또한 스마트에디터 내의 요소 말고도 네이버 블로그 서비스 전반에 엮여진 사항도 있으므로, 새로운 기능은 에디터에 대한 내용으로 한정하여 내용을 확장해 주시기 바랍니다.
  • 사진을 3장 이상 나란히 놓을 수 있고, 슬라이드 쇼로도 놓을 수 있다.
  • 더 다양한 글꼴을 제공한다.
  • OGQ의 멀티미디어를 블로그 본문에 넣을 수 있다.
  • 스마트 스타일라이저로 한 번 클릭으로 글을 예쁘게 꾸밀 수 있다.
  • 지도 등록 시 한 번에 여러 군데에 핀을 찍을 수 있다.
  • 부분 템플릿으로 Day 1, Day 2 등 비슷한 본문 영역을 같은 포맷으로 적용하여 빠르게 편집할 수 있다.
  • 스마트에디터 1.0, 스마트에디터 2.0, 스마트에디터 3.0 및 일반적인 HTML까지 수용할 수 있도록 개발하고 있다.
  • 다른 네이버 서비스에도 빠른 재활용이 가능하다.
  • 링크를 적을 시 그 서비스의 내용을 최대한 라이브하게 인용할 수 있다.

참고로 스마트에디터 2.0과 스마트에디터 3.0은 서로 호환되지 않았는데, 스마트에디터 개발자 본인이 제로 베이스에서 개발했다고 호환되지 않음을 세션에서 발표하였다. 그리고 결국 뉴 스마트에디터에서는 모든 버전과 HTML 글을 수용할 수 있도록 코드네임 래빗이라는 이름으로 네이버 내 CIC에서 개발하였다고 또한 언급하였다.

6.3. 문제점

  • 우클릭 콘텍스트 메뉴를 제대로 사용할 수 없다. 인터넷 익스플로러는 상관 없지만, 크롬이나 파이어폭스에서는 확장 프로그램을 설치해야 복붙이 가능하고 사파리엣지아예 지원하지 않는다. 복붙하는데 브라우저를 가린다는 것 자체도 이해가 안 되지만, 크롬/파이어폭스 확장 프로그램은 관리도 제대로 안 하는 물건이라 설치해도 안 먹히는 경우가 허다하다. 물론 단축키(Ctrl+C/V/X)는 잘 먹힌다. 왜 이따위로 만들었는지 이해가 안 되는 부분이다.
  • 본문에 내용에 #을 붙이면 자동으로 해시태그가 입력되는데, 이것 때문에 해시태그를 의도하지 않고 #을 붙인 부분까지 해시태그로 변한다.


[1] PC 버전 크기는 블로그 레이아웃에 따른 가로 크기에 따라 다르다.[2] 카페 대문과 같이 작은 사진들을 표나 한줄에 배치하는 것이 불가능하다![3] 모바일 버전은 통일.[4] 한국 출판물의 경우 줄 간격 단락 간격을 달리 주지 않는다. 그러나 영어권의 경우 줄 간격 따로, 단락 간격을 따로 하는 경우가 많아 웹표준에서도 줄 간격과 단락 간격이 달리 설정되어 있다. 기존 네이버 블로거들이 굳이 줄과 단락의 개념을 잘 모르기 때문에 스마트에디터 3.0에서 단락 간격의 존재를 무시하고 강제 개행 방식으로만 간단하게 처리하는 것 같다.

분류