스마트에디터

1 개요

h_smarteditor1.gif

똑똑한 웹 문서 편집기

네이버에서 개발한 위지윅 웹 에디터. 네이버 서비스에서 글쓰기가 제공되는 공간에서 만나볼 수 있다.

2 첫 시작

스마트에디터 소개(네이버 인사이드)

네이버에서 모든 글쓰기를 보다 멋지고 세련되게!

네이버 블로그에서 포스트를 작성할 때, 친구에게 메일을 보낼 때, 그리고 카페, 지식iN에서도
누구나 멋지고 세련된 글을 쓸 수 있도록 해주는 웹 문서 편집기, 스마트에디터

2008년, "똑똑한 웹 문서 편집기"로 소개하며 네이버 블로그, 네이버 카페, 네이버 지식iN, 네이버 메일 등 네이버 내 웹 형식의 문서를 작성하는 공간인 게시판, 커뮤니티형 서비스 등에 적용되었다.

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

3 스마트에디터 2.0

더욱 강화된 글쓰기와 웹표준에 특화된 스마트에디터.

스마트에디터 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 XPInternet Explorer 7.x, 8.x, Firefox 3.5이상, Chrome 4.0 이상, Safari 4.0이상
Windows VistaInternet Explorer 7.x, 8.x
Windows 7Internet Explorer 8.x, 9.x, Firefox 3.5이상, Chrome 4.0 이상, Safari 4.0이상
MacFirefox 3.5 이상, Safari 4.0 이상, Chrome 5.0 이상

상위 운영체제, 웹브라우저에서 문제없이 구동된다.

공개된 스마트에디터 베이직은 최근까지 보안패치 버전을 배포하고 있다.

5 스마트에디터 3.0

섬네일을 만드는 중 오류 발생: 파일이 없음
이 문단의 내용 중 일부는 블로그 네이버 블로그 문서의 블로그?rev=465 465번째 버전에서 가져왔습니다.

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

스마트에디터 3.0 프로모션 페이지(PC 버전)

넓은 글쓰기 화면과 단순함이 포인트이며, 모바일 크기, 태블릿 크기, PC 버전 크기[2]로 가로 크기를 조정하면서 글을 쓸 수 있다. 텍스트와 사진, 지도 등의 콘텐츠를 컴포넌트로 취급하여 위아래로 자유롭게 이동할 수 있다.

전체적으로 짧게 쓰고 굵게 쓰는 요즘 블로그 경향에 매우 최적화되고 획일화된 글쓰기 툴.
PC와 모바일 앱 간에 호환되어 자유로운 글쓰기/수정이 가능한 것이 최대 장점이다. 예를 들어, PC에서 쓰던 글을 스마트폰에서 이어 쓰거나, 스마트폰에서 쓰기 시작한 글을 PC에서 이어 글을 쓸 수 있다.

그러나 단점도 많다. 계속 개선되고 있지만 이 부분 심각하게 읽어야 한다 가장 큰 단점은 HTML 방식의 편집을 전혀 지원하지 않는다는 것이다! 더 뜯어 보면 이 말인 즉슨, 포스팅 안에 HTML 기반 편집을 할 수 없고, object나 Iframe을 포함하여 외부 플러그인이나 embed 태그로 플래시 업로드 등이 전혀 불가능하다! 표를 사용할 수 없고, 사진을 3장 초과하여 겹칠 수 없다.[3] 가로 886px 이상으로 올리면 화질이 저하되는 문제도 있다. 글꼴 색을 선택할 때 컬러코드를 이용하여 설정할 수 없다. 제시된 색상 이외의 색상을 쓰고 싶으면 다른 웹문서나 워드프로세서 등에서 긁어서 붙여와야 한다.
각종 기능도 모두 제외하고, 컴포넌트가 분리되어 있으면 전체 선택(Ctrl+A)해서 외부에 붙여넣을 수도 없다! PC, 모바일 호환성을 위해서 HTML에디팅과 그 이전 모든 것을 포기해 버린 새로운 에디터가 되어버렸다. 전혀 스마트하지 않다(...)

글을 발행하지 않는 이상 블로그 전체를 보면서 미리보는 것이 불가능하다. 에디터 자체가 미리보기 화면이다.
글을 보면 2.0에서 쓴 글과 달리 양쪽에 간격이 더 들어가는 것을 확인할 수 있다. 이전 버전 에디터에 비해 가로 크기를 50픽셀 이상 더 먹고 들어간다. 네이버 블로그의 레이아웃에 따라, 작성하는 에디터에 따라 지원하는 PC 가로 크기가 다르다.

레이아웃 사양3.0 가로 크기2.0 가로 크기
넓은 1단886픽셀936픽셀
넓은 2단, 보통 1단693픽셀741픽셀
보통 2단, 보통 3단500픽셀548픽셀

2000년대에 유행했던 웹 에디터나 워드프로세서 방식을 완전히 버리고 개체로 옮기고 쓰고 하는 방식을 채택하였다. 업데이트된 버전이 아니라 그냥 새로 만든 버전이라고 부르는 게 무방하다.어도비 플래시도 AS 2.0하고 AS 3.0 새로 갈아버렸지
터치 인터페이스에 최적화된 디자인이라서 마우스로 작업할 때 손이 많이 간다. 텍스트 입력하려고 텍스트 입력 커서가 바뀌는 곳을 찾아야 하고, 텍스트 컴포넌트가 마구 분리되어 있어 몇 번씩 지우고 합치는 작업이 필요하다. 마우스 요리조리 움직여 보고 텍스트 입력할 곳을 찾아야 하고, 입력이 안 될 경우 글 왼쪽에 나오는 + 단추를 눌러서 텍스트 컴포넌트를 추가해줘야 하니 슬슬 짜증난다. 모바일도 터치하는 건 편하지만 마우스로는 은근히 불편하다.

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

네이버 카페와 지식인, 메일 등에는 적용되지 않았다. 아예 프레임워크가 달라 에디터를 올리기도, 보이기도 어려운 포맷.

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

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

스마트에디터 3.0은 SmartEditor Basic과 이전 버전 에디터 등과 호환되지 않고, 네이버 서비스 내에서만 적용되어 프로그램 소스가 오픈되지 않았다.

5.1 문제점

  • 글꼴 크기는 포인트가 아닌 제목 1, 2, 3, 그리고 본문 1, 2, 3, 4, 5로 이뤄져있다. 그냥 본문 12pt 14pt하면 되잖아 제목 간, 본문 간에서는 블록을 잡아서 크기를 바꿀 수 있다. 그러나 제목과 본문 간 크기를 전환할 때, 블록 잡은 모든 줄의 텍스트를 변환하고 컴포넌트를 분리해 버린다. 이 때 가끔 현재 커서에 있는 단락이 아닌 이전 단락이나 다음 단락에 크기가 적용되어 가끔 글을 엉망으로 만드는 경우도 생긴다.
  • 본문 스크랩을 지원하지 않는다. [4]
  • 실행취소가 가끔 엉뚱하게 된다. 서식 변경 시에 가장 잦게 발생.
  • 2016년 7월 이전까지는 양쪽 정렬이 없었으며, 적용 범위가 단락이 아닌 컴포넌트 단위로 정렬된다. 한 줄 한 줄 정렬을 다르게 할 수 없다.
  • 에디터의 특성을 알아야만 제대로 쓸 수 있다. 예컨대, 긴 텍스트를 작성하다가 중간에 정렬을 바꾸거나 사진을 넣으려면 제목과 내용 간 크기를 바꿔주거나, 빈 줄만 잡고 인용구 변환 버튼을 누른 뒤 삭제해야 한다. 사진 이동 시에도 텍스트 묶음 안에다가 사진이 들어가지 않아서 심히 불편하다. 원래는 글자별로도 되어야 하지만, 여기서는 공백이 많아도 안 들어간다. 컴포넌트를 분리해야만 이동이 된다.
  • 단락 문제가 있다. 보통 다른 웹 에디터나 워드프로세서에서는 Enter를 치면 한 단락이 끝났다고 생각하며 줄 간 간격과 단락 간격을 달리 준다. Enter를 치면 단락을 끝마친 것이고 Shift+Enter를 누르면 강제 개행을 하며 단락을 유지하되 줄을 넘길 수 있다. HTML에서는 강제 개행을
    로, 단락은

    로 감싸서 처리한다. 그러나 스마트에디터 3.0에서는 Enter를 치든 Shift+Enter를 치든 모든 줄 바꿈을
    태그로 처리한다. 자체적으로 단락을 바꾸려면 컴포넌트로 분리하는 방법밖에 없으며, 각 컴포넌트는
    태그로 내부적으로 처리한다. 호환성 떨어지는 이유가 여기에 있다. 3.0에서 작성한 글을 워드에 복사한 뒤 단락 기호를 확인하면 Enter가 아닌 ↓가 보이는데, 이것은 Shift+Enter로 단락 바꿈이 아닌 강제 개행을 한 것이다.[5]</li></ul>
    • 자동저장이 몇 분이 아닌 몇 마다 수행된다. 실수로 글을 지웠을 땐 껐다가 켜면 예전처럼 돌아와 있겠지 생각하지 말고 꼭 실행 취소해서 종료하고, 수시로 저장 버튼을 누르는 것이 좋다.
    • 텍스트만 클립보드로 복사해서 다른 곳에 붙여넣을 수 있다. 가장 불편한 부분이다. 사진이나 링크같은 것은 컴포넌트 단위로만 선택 가능하다. 이를 복사하고 붙이기는 스마트에디터 3.0에서만 가능하고 다른 곳에서는 공백만 나오거나 아래처럼 한글 2007 같은 일부 워드프로세서에서는 깨져서 나오기도 한다.
    블록도 잡히지 않고 삭제도 불가능하다(...).
    • 일부 웹 사이트나 워드프로세서에 작성된 글 또한 그대로 복사/붙여넣기하면 갑자기 글 구조를 읽어오는 것에 실패했다는 메시지가 나타나면서 불안정해지는 문제가 있고, 발행도 잘 안 되는 상황도 발생되기도 한다. 이뭐병
    • 오픈 직후 인터넷 익스플로러 호환성 모드에서 이전에 잘 열리던 댓글이 열리지 않아 한차례 이슈가 있었다. 지금은 잘 되지만 호환성 보기를 해제하는 것을 권장한다. IE 호환성 모드에서 스마트에디터 3.0 사용 시 에디터 위에 호환성 모드를 해제해 달라는 메시지가 나온다.
    • 맞춤법, 전체글꼴설정 업데이트 이후, 작은 화면 해상도에서 가로 스크롤 바가 생기지 않아 발행버튼이 있는 곳까지 창 크기를 키우지 않으면 발행 버튼을 누를 수 없어 글을 올리 수 없다. 화면 해상도가 이보다 작으면 웹브라우저의 확대/축소(Ctrl+ +/-) 기능을 이용하면 발행 버튼을 누를 수 있게 되지만 모바일에서는 확대/축소가 전혀 작동하지 않아 발행 버튼을 누를 수 없었다. 이 문제는 2016년 6월 중순에 해결되었다.

    5.2 변경 사항

    • 맞춤법 검사 기능, 전체글꼴 설정 기능이 추가되었다.
    • 2016년 4월, 포스트 제목의 크기를 3단계로 조절할 수 있게 되었고, 어울림 사진 배치와 코딩용 컴포넌트가 추가되었다. 진작 해주지
    • 제목영역의 제목크기와 정렬을 각각 3단계로 설정하고 가운데 정렬이 가능해졌다.
    • 2016년 7월 초, 드래그 앤 드롭으로 사진 올리기와 신규 포토에디터가 지원된다. 플래시 포토업로더 없이 바로 업로드되며, 편집 시에도 새로운 에디터가 지원된다. 다만 여기에 기존 포토업로더에 있었던 그리기, 액자 기능이 없다. 양쪽 정렬과 줄 간격, 사진 크기 조절 기능이 덤으로.
    • 2016년 7월 28일에 스마트에디터 3.0용 포토업로더에 서명 기능이 추가되었다. 10월에는 텍스트 입력 기능과 스티커 꾸미기와 UI 개선이 있었다.
    1. 현재 네이버 포스트의 스마트에디터 3.0은 카드형까지 출시된 상태이며 PC와 모바일앱 호환성을 제공하고 있다.
    2. PC 버전 크기는 블로그 레이아웃에 따른 가로 크기에 따라 다르다.
    3. 카페 대문과 같이 작은 사진들을 표나 한줄에 배치하는 것이 불가능하다!
    4. 네이버 블로그팀에서 2016년 11월 쯤 지원을 예정하고 있다.
    5. 한국 출판물의 경우 줄 간격 단락 간격을 달리 주지 않는다. 그러나 영어권의 경우 줄 간격 따로, 단락 간격을 따로 하는 경우가 많아 웹표준에서도 줄 간격과 단락 간격이 달리 설정되어 있다. 기존 네이버 블로거들이 굳이 줄과 단락의 개념을 잘 모르기 때문에 스마트에디터 3.0에서 단락 간격의 존재를 무시하고 강제 개행 방식으로만 지원되게 했을 것이라는 가능성이 있다.