스마트에디터
1. 개요
[image]
네이버에서 개발한 WYSIWYG 웹 에디터. 네이버 서비스에서 글쓰기가 제공되는 공간에서 만나볼 수 있다.똑똑한 웹 문서 편집기
2. 첫 시작
2008년 "똑똑한 웹 문서 편집기"라는 이름으로 오픈하여 네이버 블로그, 네이버 카페, 네이버 지식iN, 네이버 메일 등 네이버 내 웹 형식의 문서를 작성하는 공간인 게시판, 커뮤니티형 서비스 등에 적용되었다.네이버에서 모든 글쓰기를 보다 멋지고 세련되게!
네이버 블로그에서 포스트를 작성할 때, 친구에게 메일을 보낼 때, 그리고 카페, 지식iN에서도
누구나 멋지고 세련된 글을 쓸 수 있도록 해주는 웹 문서 편집기, 스마트에디터
네이버에서 개발한 진도 자바스크립트 프레임워크를 사용한, 웹 문서 글쓰기에 특화된 에디터.
3. 스마트에디터 2.0
2010년 8월 베타 오픈하고, 2010년 12월 정식 오픈하였다.더욱 강화된 글쓰기와 웹표준에 맞춘 스마트에디터 2.0
기존 UI를 넓게 개선하고, 다양한 글 양식, 글 장식, 글감 첨부 기능을 지원하고, 인터넷 익스플로러에 의존한 웹 코드에서 웹 표준(HTML 4.01 Transitional)에 최적화하였다.
네이버 서비스 내에서는 새로운 포토 업로더와 이미지 에디터 기능을 제공하며, 사진 업로더가 플래시 기반으로 변경되어 ActiveX 설치 없이도 사진을 업로드할 수 있게 되었다. 네이버 블로그에 업로드한 사진은 더블 클릭하여 재수정할 수도 있다.
네이버 블로그에서 베타 오픈하여, 1.0과 2.0을 동시에 사용할 수 있었으며, 정식 오픈 후 2.0만 사용 가능. 오픈 당시, 인터넷 익스플로러 6에서는 오류와 속도 저하가 있었고, 기타 다른 브라우저에서 타이핑 속도에 대한 이슈, 문서 깨짐 등 사소한 오류가 있었지만 계속 업데이트되면서 이러한 이슈는 거의 사라졌다.
현재 네이버 블로그, 네이버 카페, 네이버 지식인, 네이버 메일에서 각각의 서비스에 맞는 기능을 적용한 채 폭넓게 서비스되고 있다.
3.1. SmartEditor Basic
네이버 서비스와 연동되어 제공되는 특화된 기능을 제외한 스마트에디터 기본 기능을 SmartEditor Basic라는 이름으로 오픈소스로 공개하였다.
LGPL v2 라이선스에 따라 오픈 소스로 운영하는 사이트에 적용하거나 개발/개량하여 배포할 수 있다. 공개된 스마트에디터 베이직은 보안 패치 버전을 배포하고 있으므로 최신 버전으로 업데이트하여 사용하길 바란다.
- 다운로드 페이지(GitHub)
- 공식 지원 브라우저
- Internet Explorer 8.x 이상
- Firefox 3.5 이상
- Chrome 4.0 이상
- Safari 4.0 이상
3.2. 문제점
- 일부 기능이 어도비 플래시 기반이라 최신 브라우저에서는 정상 사용이 불가능하다. 네이버에서는 해당 기능을 HTML로 포팅하지 않고 그냥 삭제해버리는 식으로 대처했다(...). 일부 기능은 스마트에디터 ONE에도 존재하지만 스마트에디터 ONE에서 포팅할 생각은 없는 듯하다.
- 유튜브 동영상 첨부 시 allowfullscreen 속성을 날려버리는 버그가 있다. 이 때문에 네이버 블로그/카페에 올라온 유튜브 동영상은 전체화면으로 전환이 되지 않는 경우가 많다. 스마트에디터 ONE은 해당 버그가 없지만 기존에 올라온 글들은 여전히 전체화면으로 전환이 안 된다.
4. 스마트에디터 3.0
네이버 블로그와 네이버 포스트 서비스에서 제공되는 스마트에디터 2.0를 이은 새로운 네이버의 웹 에디터.
'''2015년 8월'''에 네이버 포스트에서 처음 오픈되었으며, 2015년 11월 13일에 네이버 블로그에 오픈되었다.
[image]
넓은 글쓰기 화면과 단순함이 포인트이며, 모바일 크기, 태블릿 크기, PC 버전 크기[1]로 가로 크기를 조정하면서 글을 쓸 수 있다. 텍스트와 사진, 지도 등의 콘텐츠를 컴포넌트로 취급하여 위아래로 자유롭게 이동할 수 있다. 전체적으로 짧게 쓰고 굵게 쓰는 요즘 블로그 경향에 매우 최적화되고 획일화된 글쓰기 툴.
최대 장점은 PC와 모바일 앱 간 자유로운 글쓰기가 가능한 것이다. PC에서 쓰던 글을 모바일 앱에서 이어 쓰거나, 스마트폰에서 쓰기 시작한 글을 PC에서 이어 글을 쓸 수 있는 것. 그리고 모바일에서 볼 때 이미지 화질이 열화되는 1.0 및 2.0 버전과는 다르게 이미지가 깔끔하다.
그러나 '''단점'''도 많다. 가장 큰 단점은 HTML 방식의 편집을 전혀 지원하지 않는다는 것이다! 더 뜯어 보면 이 말인 즉슨, 포스팅 안에 HTML 기반 편집을 할 수 없고, object나 Iframe을 포함하여 외부 플러그인이나 embed 태그로 플래시 업로드 등이 전혀 불가능하다! 표를 사용할 수 없고, 사진을 3장 초과하여 겹칠 수 없다.[2] 가로 886px 이상으로 올리면 화질이 저하되는 문제도 있다. 글꼴 색을 선택할 때 컬러 코드를 이용하여 설정할 수 없다. 제시된 색상 이외의 색상을 쓰고 싶으면 다른 웹 문서나 워드프로세서 등에서 긁어서 붙여와야 한다.
각종 기능도 모두 제외하고, 컴포넌트가 분리되어 있으면 전체 선택(Ctrl+A)해서 외부에 붙여넣을 수도 없다! PC, 모바일 호환성을 위해서 HTML과 그 이전 모든 것을 포기해 버린 새로운 에디터가 되어버렸다.
글을 발행하지 않는 이상 블로그/포스트에서 글을 미리보는 것이 불가능하다. 에디터 자체가 미리보기 화면이다. PC 및 모바일 동일.
터치 인터페이스에 최적화된 디자인이라서 손이 많이 간다. 텍스트 입력하려고 텍스트 입력 커서가 바뀌는 곳을 찾아야 하고, 텍스트 컴포넌트가 마구 분리되어 있어 몇 번씩 지우고 합치는 작업이 필요하다. 마우스 요리조리 움직여 보고 텍스트 입력할 곳을 찾아야 하고, 입력이 안 될 경우 글 왼쪽에 나오는 + 단추를 눌러서 텍스트 컴포넌트를 추가해줘야 하니 슬슬 짜증난다. 모바일도 불편한 점이 다소 있다.
네이버 카페와 지식인, 메일 등의 서비스에서는 이전 에디터를 사용하고 있다. 기초 프레임워크가 있어 폭넓게 적용하기는 어려워 보인다. 그런데 2016년 12월, 본문스크랩이 가능하도록 업데이트되면서, 블로그에서 카페로 본문스크랩 시 3.0 형식이 변환되어 옮겨진다!
네이버 포스트에서는 3.0 형식에서 파생된 '''카드형''' 에디터를 추가 제공한다.
미국 산업 디자인 협회 IDSA에서 주관하는 IDEA에 2016년 디지털 디자인 부문으로 본상에 오르기도 했다.(#)
전체공개, 비공개 등의 설정은 PC는 오른쪽 상단의 발행 버튼, 모바일을 상단의 화살표 메뉴에 숨겨져 있다.
이전 에디터와 호환되지 않고 글쓰기에 버그가 생기는 등의 문제로 전체적으로 평이 좋지 않아서 이전 버전으로 쓰는 사람들이 많다.
4.1. 적용 서비스
- 네이버 블로그: 3.0으로 작성한 글을 보면 2.0에서 쓴 글과 달리 양쪽에 간격이 더 들어가는 것을 확인할 수 있다. 이전 버전 에디터에 비해 가로 크기를 50픽셀 이상 더 먹고 들어간다. PC 버전 블로그에서 레이아웃 너비와 작성하는 에디터에 따라 지원하는 가로 크기가 다르다.[3]
- 네이버 포스트: 스마트에디터 3.0 기반 카드형 에디터를 추가 제공하며, 2016년 2월 이전에 네이버 포스트에 글 작성이력이 없는 경우 이전 버전 에디터 사용이 불가능하다.
4.2. 문제점
- 글꼴 크기가 포인트가 아닌 제목 1, 2, 3, 그리고 본문 1, 2, 3, 4, 5로 이루어져 있다. 제목 간, 본문 간에서는 블록을 잡아서 크기를 바꿀 수 있다. 그러나 제목과 본문 간 크기를 전환할 때, 블록 잡은 모든 줄의 텍스트를 변환하고 컴포넌트를 분리해 버린다. 이 때 가끔 현재 커서에 있는 단락이 아닌 이전 단락이나 다음 단락에 크기가 적용되어 가끔 글을 엉망으로 만드는 경우도 생긴다.
- 실행 취소가 가끔 엉뚱하게 되거나 몇 단계 동작도 뭉쳐서 취소된다. 주의해야 한다.
- 2016년 7월 이전까지는 양쪽 정렬이 없었으며, 적용 범위가 단락이 아닌 컴포넌트 단위로 정렬된다. 즉 한 줄 한 줄 정렬을 다르게 할 수 없다.
- 에디터의 특성을 알아야만 제대로 쓸 수 있다. 예컨대, 긴 텍스트를 작성하다가 중간에 사진을 넣거나 인용구를 넣으려면 제목과 내용 간 크기를 바꿔주거나, 인용구 변환 버튼을 누른 뒤 알맞게 작성해야 한다. 텍스트 안에서는 아무리 Enter를 눌러도 중간에 사진이나 다른 걸 넣을 수가 없어서 심히 불편하다. 또한 텍스트 컴포넌트가 위·아래로 분리된 경우 백 스페이스로는 합쳐지지만, 분리하기는 어렵게 설계되어서 여러모로 불편함을 감수해야 한다. 그런데 네이버측에서는 여전히 고치지 않는다.
- 단락 문제가 있다. 보통 다른 웹 에디터나 워드프로세서에서는 Enter를 치면 한 단락이 끝났다고 생각하며 줄 간 간격과 단락 간격을 달리 준다. Enter를 치면 단락을 끝마친 것이고 Shift+Enter를 누르면 강제 개행을 하며 단락을 유지하되 줄을 넘길 수 있다. HTML에서는 강제 개행을
로, 단락은 로 감싸서 처리한다. 그러나 스마트에디터 3.0에서는 Enter를 치든 Shift+Enter를 치든 모든 줄 바꿈을
태그로 처리한다. 자체적으로 단락을 바꾸려면 컴포넌트로 분리하는 방법밖에 없으며, 각 컴포넌트는태그로 내부적으로 처리한다. 3.0에서 작성한 글을 워드에 복사한 뒤 단락 기호를 확인하면 Enter가 아닌 ↓가 보이는데, 이것은 Shift+Enter로 단락 바꿈이 아닌 강제 개행을 한 것이다.[4]- 자동저장이 몇 분이 아닌 몇 초마다 수행된다. 실수로 글을 지웠을 땐 껐다가 켜면 예전처럼 돌아와 있겠지 생각하지 말고 실행 취소를 사용하는 것이 좋으며, 별도로 수시로 저장 버튼을 누르는 것이 좋다.
- 텍스트만 클립보드로 복사해서 다른 곳에 붙여넣을 수 있다. 가장 불편한 부분이다. 사진이나 링크같은 것은 컴포넌트 단위로만 선택 가능하다. 이를 복사하고 붙이기는 스마트에디터 3.0에서만 가능하고 다른 곳에서는 공백만 나오거나 아래처럼 한글 2007 같은 일부 워드프로세서에서는 깨져서 나오기도 한다.
- 일부 웹 사이트나 워드프로세서에 작성된 글 또한 그대로 복사/붙여넣기하면 갑자기 글 구조를 읽어오는 것에 실패했다는 메시지가 나타나면서 불안정해지는 문제가 있고, 발행도 잘 안 되는 상황도 발생되기도 한다.
- 오픈 직후 인터넷 익스플로러 호환성 모드에서 이전에 잘 열리던 댓글이 열리지 않아 한차례 이슈가 있었다. 지금은 잘 되지만 호환성 보기를 해제하는 것을 권장한다. IE 호환성 모드에서 스마트에디터 3.0 사용 시 에디터 위에 호환성 모드를 해제해 달라는 메시지가 나온다.
- 맞춤법, 전체글꼴 설정 업데이트 이후, 작은 화면 해상도에서 가로 스크롤 바가 생기지 않아 발행 버튼이 있는 곳까지 창 크기를 키우지 않으면 발행 버튼을 누를 수 없어 글을 올릴 수 없다. 화면 해상도가 이보다 작으면 웹 브라우저의 확대/축소(Ctrl+ +/-) 기능을 이용하면 발행 버튼을 누를 수 있게 되지만 모바일에서는 확대/축소가 전혀 작동하지 않아 발행 버튼을 누를 수 없었다. 이 문제는 2016년 6월 중순에 해결되었다.
- 스마트에디터 3.0에 들어가서, 내용을 작성하는 도중에 Page Up/Page Down을 눌러보자. 왼쪽의 글쓰기 도구가 사라지고 화면이 뭉개진다. 사라진 글쓰기 도구를 다시 펼치는 방법은 오른쪽 아래에 사진 검색을 클릭해야 화면이 정상적으로 복구된다.
4.3. 변경 사항
- 맞춤법 검사 기능, 전체 글꼴 설정 기능이 추가되었다.
- 2016년 4월, 포스트 제목의 크기를 3단계로 조절할 수 있게 되었고, 어울림 사진 배치와 코드 표현 컴포넌트가 추가되었다.
- 제목 영역의 제목 크기와 정렬을 각각 3단계로 설정하고 가운데 정렬이 가능해졌다.
- 2016년 7월 초, 드래그 앤 드롭으로 사진 올리기와 신규 포토 에디터가 지원된다. 플래시 포토 업로더 없이 바로 업로드되며, 편집 시에도 새로운 에디터가 지원된다. 다만 여기에 기존 포토 업로더에 있었던 그리기·액자 기능이 없다. 양쪽 정렬과 줄 간격, 사진 크기 조절 기능이 덤으로.
- 2016년 7월 28일에 스마트에디터 3.0용 포토 업로더에 서명 기능이 추가되었다. 동년 10월에는 텍스트 입력 기능과 스티커 꾸미기와 UI 개선이 있었다.
- 2016년 12월 1일, 웹 브라우저나 PC 내 클립보드에 복사한 이미지를 바로 Ctrl+V로 붙여넣을 수 있고, 첨부한 동영상의 표시 크기도 조절할 수 있게 되었다고 한다. 다만 주의점이 라이브러리에 표시되어야 정상적으로 등록된 것이므로 오른쪽에 라이브러리에 나타나지 않는다면 해당 이미지를 컴퓨터에 가져온 뒤 업로드하는 것을 추천한다.
5. 스마트에디터 ONE
2018년 6월 15일, 네이버 블로그 15주년을 기념하여 열린 오프라인 행사 블로썸데이(BLOSUM DAY)의 세션 스마트에디터 '간단하고 멋있는 글쓰기에 대해'에서 새로운 스마트에디터의 모습을 선보였다.
2018년 12월 4일, 네이버 블로그팀 공식 블로그에서 〈스마트에디터 ONE〉이라는 이름으로 새로운 스마트에디터의 모습을 공개하고, 2018년 12월 17일에 런칭되었다.(사용 가이드)
스마트에디터 2.0과 스마트에디터 3.0은 서로 호환되지 않았다. 블로썸데이 세션에서 개발자는 제로 베이스에서 개발했다고 발표했으며, 스마트에디터 3.0의 문제점을 피드백을 받아 코드네임 래빗이라는 이름으로 모든 버전과 HTML 글을 수용할 수 있도록 업그레이드하였다고 언급했다.5.1. 블로썸데이 세션
세션에 발표된 내용에 따르면 2018년 10월부터 네이버 블로그에 단계적으로 적용될 예정이다.(세션 영상보기)- 사진을 3장 이상 나란히 놓을 수 있고, 슬라이드 쇼로도 놓을 수 있다.
- 더 다양한 글꼴을 제공한다.
- OGQ의 멀티미디어를 블로그 본문에 넣을 수 있다.
- 스마트 스타일라이저로 한 번 클릭으로 글을 예쁘게 꾸밀 수 있다.
- 지도 등록 시 한 번에 여러 군데에 핀을 찍을 수 있다.
- 부분 템플릿으로 Day 1, Day 2 등 비슷한 본문 영역을 같은 포맷으로 적용하여 빠르게 편집할 수 있다.
- 스마트에디터 1.0, 스마트에디터 2.0, 스마트에디터 3.0 및 일반적인 HTML까지 수용할 수 있도록 개발하고 있다.
- 다른 네이버 서비스에도 빠른 재활용이 가능하다.
- 링크를 적을 시 그 서비스의 내용을 최대한 라이브하게 인용할 수 있다.
5.2. 적용 서비스
네이버 포스트는 아직 3.0을 사용하고 있다.5.3. 문제점
- 마우스 오른쪽 버튼을 클릭하면 나타나는 메뉴에서 잘라내기/복사/붙여넣기를 하려면 확장 프로그램을 설치해야 한다. 그 확장 프로그램조차도 제대로 작동하지 않아서 확장 프로그램을 설치했는데도 계속 확장 프로그램 설치하란 메시지만 나타나는 경우가 많다. 단축키인 Ctrl+X/C/V는 정상적으로 작동하니 그냥 단축키만 사용하는 것을 권장한다.
- 정렬 방식을 변경하려면 정렬 설정 버튼을 클릭한 다음에 다시 원하는 정렬 방식을 선택해야 한다. 정렬 방식을 자주 변경하능 사용자들은 클릭을 두 번씩 해야 하므로 상당히 불편할 수 있다. 초창기에는 정렬 방식 버튼 4개가 툴바에 나와 있었는데 언제부턴가 말도 없이 저렇게 바꿔버렸다.
- 사진 배치를 하면 자동으로 사진 사이 공간이 생긴다. 또한 사진을 텍스트와 병렬 배치할 수 없게 되었다.
- 본문에 내용에 #을 붙이면 자동으로 해시태그가 입력되는데, 이것 때문에 해시태그를 의도하지 않고 #을 붙인 부분까지 해시태그로 변한다.
- 기존의 스마트에디터 3.0을 사용할 수 없게 바뀌어서 불만이 많다. 스마트에디터 ONE이 스마트에디터 3.0보다 불편한 사람들은 불편함을 감수하고 스마트에디터 ONE을 쓰거나, 아니면 옛날 버전인 스마트에디터 2.0을 써야 한다.
[1] PC 버전 크기는 블로그 레이아웃에 따른 가로 크기에 따라 다르다.[2] 카페 대문과 같이 작은 사진들을 표나 한줄에 배치하는 것이 불가능하다![3] 모바일 버전은 통일.[4] 한국 출판물의 경우 줄 간격 단락 간격을 달리 주지 않는다. 그러나 영어권의 경우 줄 간격 따로, 단락 간격을 따로 하는 경우가 많아 웹표준에서도 줄 간격과 단락 간격이 달리 설정되어 있다. 기존 네이버 블로거들이 굳이 줄과 단락의 개념을 잘 모르기 때문에 스마트에디터 3.0에서 단락 간격의 존재를 무시하고 강제 개행 방식으로만 간단하게 처리하는 것 같다.