글쓰기 메뉴

씬디 업데이트 - 파일로 글쓰기

배경

1. 노트와 연습장, 연필과 펜으로 작성된 아날로그 컨텐츠를 디지털로 변환시키는 최초의 소프트웨어가 뭘까?


  - 접근성과 가벼움으로 승부하는 - 메모장

  - 전통의 워드 프로세서 - MS워드, 아래아한글, 오픈오피스

  - 디지털 네이티브 - 구글 독스, 에버노트, 블로깅 툴 등


2. 한글이나 워드로 작성한 기사를 메모장에 붙여넣었다가 다시 CMS 기사 입력기에 붙여넣고 있어요.


  - 기자들한테 진짜 많이 들은 얘기. 주로 앞뒤의 다른 문제를 설명하기 위한 기초 설명이지.


3. 메모장에 작성한 글을 복사해서 씬디에 올렸는데 앞부분이 잘렸어요.


  - 씬디 사용자에게 받은 피드백. 2번과 같은 구조. 

  - 앞부분이 잘리는 문제는 당연히 코드를 수정해야겠지만 "메모장 복붙" < 이거 해결해야겠다.


파일로 글쓰기

그래서 씬디에다가 "파일로 글쓰기"라는 기능을 추가해봤지!


아직까지는 오로지 문서 파일에 있는 "텍스트"만 발라내는 용도로 쓰이고 있어.


하지만 기능이 유용하다고 생각되면 - 사용자의 글쓰기 과정 & 디지털 퍼블리싱 과정에 알맞은 기능이라고 생각되면 - 엑셀 파일을 올릴 경우 표나 차트를 자동으로 만들어준다거나, 문서에 포함된 사진, 비디오 같은 멀티미디어도 옮겨준다거나 하는 쓰임이 추가될 수 있겠지. 


사용법

글쓰기 화면 하단에 있는 업로드 영역에 드래그&드랍으로 파일을 떨구거나 "글 불러오기" 버튼을 사용해 파일을 업로드하면 끝!


이렇게 생긴 곳에 파일을 드랍!


문제점

복붙에서 발생되는 문제와는 또 다른 무시무시한 문제가 있지.

인코딩.

아! 좌절스러워 ㅋㅋㅋ

일단은 문서의 인코딩을 추측해서 자동으로 변환하고 있지만 컨텐츠가 발라지지 않거나 문자가 깨지는 문서들이 꽤 있을 것 같아.


그렇지만! 서비스와 기능은 오픈시켜 사용되지 않으면 발전할 수 있는 기회도 없다는걸 잘 알고 있기 때문에 과감하게 적용! 은 사용자가 적으니 위험부담없이 적용


+)

컴퓨터에 잠자고 있는 글들 올려보세요!



어디서 왔지?
[["www.google.la", 1], ["synd.kr", 13], ["www.google.co.kr", 7], ["www.google.nl", 1], ["m.facebook.com", 2], ["unknown", 786], ["lm.facebook.com", 2], ["www.google.com.tr", 1]]
다른 글들
1 2

답글작성 기능 추가

댓글 입력 버튼 옆에 "답글작성" 이라는 기능이 추가됐습니다. 답글로 작성된 글은 글 앞에 원본글이 링크되고 원본 글 하단에는 답글들이 보이겠죠. 네. 매우 뻔하네요.
하지만 씬디 처음에 생각했던 핵심 기능 중 하나입니다. 블로그스피어를 중심으로 블로거들과 포스팅들이 살아움직일 수 있었던 원동력이 글끼리 소통하고 연결되던 것이라 생각하고 있거든요.
많은 글들이 서로 연결되서 재밌으면 좋겠네요.
4 2
Square

로그인 사용자 익명글 작성 기능 추가

로그인한 사용자가 글을 작성할 때 글 작성 폼 하단 좌측에 "익명으로 작성" 체크박스가 추가되었습니다.
해당 체크박스를 체크한 상태로 글을 등록하면 글 보기 화면에서 사용자 정보가 노출되지 않습니다.
노출되는 작성자의 정보만 숨겨지고 수정, 삭제, 알림 등의 기능은 로그인 사용자가 작성한 비익명 글과 동일하게 작동됩니다.
"익명으로 작성" 체크를 기본값으로 사용하고 싶다면 상단 "메뉴 > 내 정보 - 수정" 메뉴에서 "익명으로 글을 작성하려면 체크하세요" 항목을 체크한 후 "수정완료" 버튼을 눌러 개인정보를 변경하시면 됩니다.
특정 유저의 글을 모아보는 페이지에서도 "익명"이 체크된 글은 노출되지 않습니다.
(로그인이 되어 있는 상태라면 -자신의 글 목록을 보고 있다면- 익명글도 노출되며 확인을 위해선 로그아웃 후 해당 페이지에 접속하시면 됩니다)
저는 테스트를 위해 쓸데없이 익명으로 써보고 있습니닼ㅋ
2 0

인쇄 및 PDF 내려받기

인쇄버튼과 PDF 내려받기 기능이 추가됐습니다.
같은 방식으로 XML과 이미지 등 많이 쓰이는 형식으로 글을 내려받는 기능을 천천히(!) 추가할 계획입니다.
큰 쓰임이 없는 기능이겠으나 "입력"에만 집중하겠다는 씬디의 현재 컨셉과는 잘 맞는 기능인 것 같습니다. 생산된 콘텐츠의 유통과 사용은 기존방식과 망에 맡기는게 좋다는 (교체가 넘사벽) 생각입니다.
다음 업데이트는 손쉬운 조작을 위해 페북 공유를 OG로 변경하는 작업, 카톡이나 이메일 공유 등의 기초적인 공유 기능의 정리를 계획하고 있습니다.
쌓인 작업 중 우선 순위가 높은 작업은 "표 입력", "차트 입력", "폰트 및 디자인 수정", "파일 첨부" 등 입니다. 
끝!      
1 3

수평선은 무슨 기능인가요

수평선은 무슨 기능인가요? 클릭해봐도 모르겠네요.
2 1

왜 글을 쓸 수가 없지. 뭔가 기능이 정지해버린 기분이다. 
0 2

신디 개발자 님께

제가 글을 올릴 때마다

어떤 걸 올렸는지 일일이 기억을 못해서
올릴 때마다 제가 쓴 글을 전부 뒤져보게 돼요...
그래서 검색 기능이 있었으면 하는 생각이 들 때가 많거든요.

구현하기 어려울까요? ㅜ.ㅜ
3 3

휴대폰 사진 업로드가 어렵네요

심플한게 마음에 드네요.
문제는 모바일로 접속하니 글 쓰기 메뉴가 없고 컴터에선 휴대폰 사진을 등록하기가 어렵네요.
모바일서 글을 쓸 수 있게 해주시던가 휴대폰에 있는 사진을 좀 쉽게 등록할 수 있는 기능이 있었으면 좋겠네요.
2 1
Square

Basecamp / Trix
리치 텍스트 에디터의 해답이 되길

브라우저 기반의 WYSIWYG 에디터들은 오늘도 전투를 치르고 있다. 최소한 20년은 진행된 전투다.
답답한건 이 전투가 시장에 대한 답을 갖고 있는 솔루션간의 전투가 아니라 Internet Explorer 5.5 시절에 Microsoft 에서 설계한 contenteditable 과 execCommand API 와의 전투라는 점이다.
여기에 더해 다른 브라우저들은 공개된 문서없이 contenteditable 속성과 execCommand 기능을 지원하며 애초에 명세없는 기능들이 각 브라우저별로 다른 방식으로 개발되어 버려 헬게이트가 열린 것이다.
물론, 충분한 수준의 브라우저 커버리지를 갖고 있는 양질의 제품이 많이 있다.
CKEditor, TinyMCE, wysihtml5, Summernote, Froala, Redactor등의 제품들이 WYSIWYG 를 정리할때면 꼭 등장하는 제품들이고 아예 contenteditable 을 버리고 위키처럼 마크업 편집기를 발전시키는 진영도 있다.
하지만 마크업 편집기는 진입장벽이 분명해 관련된 경험이나 이해가 없는 일반 사용자를 대상으로 제공하기는 어렵다.
근래 모바일 환경이 빠르게 발전하면서 모바일 브라우저와 브라우저 엔진들이 빠른 속도로 업데이트되어 WYSIWYG 개발자들이 미친듯이 바빠진 것 같다. 내가 업데이트 내용을 피드로 받는 에디터는 2종에 불과하지만 근래 패치노트들을 살펴보면 iOS 브라우저 관련 버그 수정, Android, iOS webView 관련 버그 수정 등 모바일 관련 업데이트가 지속적으로 늘고 있다.
기능 추가가 아닌 버그픽스 업데이트가 잦아졌다는건 그만큼 최근 환경에 대한 버그가 증가했다는 말이다. 브라우저 기반의 에디터 제품들은 앞서 말한 것 처럼 contenteditable 과 execCommand 를 족쇄처럼 차고 있기 때문에 특정 환경에서 치명적인 문제는 대부분의 제품에 동시에 영향을 끼친다.
WYSIWYG 와 뗄 수 없는 관계에 있는 나는, 이런 상황이 발생할 때 마다 에디터들에 대한 정보를 모으고 테스트하고 HACK 이 가능한 부분이 있는지 살펴보며 좌절하고 그저 시간이 지나 관련된 문제들이 차근차근 정리되길 기다릴 뿐이다.
그러던 중 반가운 소식 하나.
Basecamp 팀에서 trix 라는 새로운 리치 텍스트 입력기를 공개했다.
contenteditable 과 execCommand 에 대한 종속성을 최소화 시켰다고 한다. 관련 내용을 정리해보면,
아! 개행복.
이론적으론 이제 IME 말고는 신경쓸게 없다는 얘기다.
Basecamp 에서 몇년전에 Wysihat 이라고 WYSIWYG 엔진을 오픈소스로 개발하던 적이 있었는데 생각보다 빠르게 개발이 중단되어 Wysihat 엔진으로 모든 에디터를 교체했던 나는 좀 많이 아팠지만 Basecamp 내부에선 더 큰 아픔을 겪고 Trix 가 나왔겠지라고 기대하고 있다.
씬디도 Trix 로 에디터를 교체하기 위해 개발을 진행하고 있으며 많은 개발자들이 Trix 에 관심을 갖고 참여해 WYSIWYG의 지리한 전투가 종식되길 기대해본다.
Trix : https://github.com/basecamp/trix
1 1
Square

[3분 복붙] 기사면 랜딩 PV 2배로 올리기.
브라우저 뒤로가기 제어.
이딴거 만들지 말자.

대부분의 서비스가 보다 많은 활동 사용자를 목표로 함은 분명하다.
하지만 얼마나 많은 활동 사용자가 있는지를 가늠할 수 있는 지표에 대한 목표설정은 좀 다른 얘기라고 생각한다.
심지어 그 목표의 달성을 위한 실현 과정이 사용자들을 열받게 만든다면 이 얼마나 근시안적 추태인지...
PV (Page View, 페이지 조회수) 에 대해 강한 집착을 보이는 국내 언론사들이 근래 "뒤로가기"가 실행되는 경우 이전 페이지로 보내지 않고 메인페이지로 이동되도록 하는 기능을 속속 도입하고 있더라. (좀 됐지.. 내가 잠수였던거지..)
사용자 입장에선 개빡치는 UX. 
그렇지만 남들이 한다니까 자기들도 해달라는 클라이언트의 등장은 당연지사.
해당 기능을 도입한 사이트들을 둘러보니 대부분 광고대행사 등이 제공한 스크립트를 사용하는 것 같더라.
메인페이지를 거치는 것도 짜증나는데 그 중간에 광고까지 껴있으니 개짜증..
이딴거 누가 안만들면 좋겠는데 일개 개발자가 뭘 할 수 있겠냐 고민하다가...
클라이언트에게 만들어준 간단한 스크립트를 모두에게 제공하고 너도나도 다들 도입해서 더 많은 사용자들이 더 빠르게 빡돌게 만들면 슬슬 이딴 쓰레기 같은 기능을 버리지 않을까라는 골때리는 결론에 도달했다.
0.
jQuery 를 사용하고 있다고 가정한다.
1.
아래의 코드를 기사 페이지 등 기능이 동작될 페이지에서 로드되는 js 파일에 추가한다.
3번 라인 정규식 패턴안의 synd\.kr 부분은 자신의 도메인으로 변경한다.
2.
기능이 동작될 페이지 HTML 코드 사이에 아래의 코드를 삽입한다.
완성!
코드는 단순해서 쉽게 이해할 수 있겠지만 몇몇 부분을 설명해보자면...
1. pushState 이후에 replaceState 를 다시 콜하는 이유.
pushState 만으로 history 를 조작할 경우 firefox 에서 백버튼이 골때리게 반복된다.
external > page > main > page > main > external
replaceState 를 다시 콜하면 아래와 같이 의도한대로 동작된다.
external > page > main > external
2. popState 이벤트를 사용하지 않고 hashChange 를 사용하는 이유
페이스북 앱 등 in app browser 를 사용할 때 해쉬가 없는 경우 뒤로가기 실행시 popState 이벤트가 발생되지 않음
해쉬를 추가해야 뒤로가기 실행 시 기존 URL (해쉬없는) 로 페이지 변화없는 이동이 발생하고 이 타이밍에 hashChange 가 콜 됨.
또한, Safari 9버전 이하에서 popState 가 지멋대로 fire 됨.
3. 이건 좀 쓸데없는 설명이지만 location.href 는 history 에 기록되고 location.replace 는 history 에 남지 않기 때문에 replace 를 사용해야함.
지원브라우저
웹이고 모바일이고 html5 history api 를 지원하는 브라우저 (http://caniuse.com/#search=history) 에선 기본적으로 모두 동작된다고 기대할 수 있으나 아이폰 크롬에서 동작안됨.
그 외 페이스북 앱 등 인앱에서 웹뷰를 사용하는 경우도 정상 동작.
Tested.
Microsoft Edge.
Microsoft IE 11.
Firefox 52.x (Windows)
Firefox 47.x (Linux)
Firefox 52.x (Mac)

Firefox 52.x (Android)
Firefox 6.x (iOS)
Chrome 57.x (Windows)

Chrome 48.x (Linux)
Chrome 56.x (Mac)

Chrome 57.x (Android)
Chrome 57.x (iOS) *동작안됨
Safari 10.x (Mac)
Safari 10.x (iOS)
Android 6 browser 4.x
Facebook App
자 이제 자리에서 일어나서 팀장이든 부장이든 상사에게 "저희 PV 를 2배로 올리겠습니다!" 라고 보고하고 보다 많은 사용자들의 빡을 돌려(?) 주삼. 
1 1

자! 지금 당신은 씬디의 QA!

추석연휴와 2년만에 휴가라는 개인사가 있어서 작업을 적절한 사이즈로 잘라내는데 실패함. 장시간에 걸쳐 작업을 진행하다보니 긴급수정 내용이 수시로 포함되고 개발했던 코드도 시간 지나고 다시 보니 또 수정해야겠고, 수정하고 보니 기존 패턴과 달라서 기존 코드도 부분적으로 리펙토링하고... 이러쿵 저러쿵... 
그래서 이번 업데이트에 내용들이 포함되어 있는지 다 까먹음 ㅇㅇ. 까먹을만큼 자잘한 사이즈긴한데 꽤 중요한 수정들이 있었던게 문제. 그래서 오류가 꽤 있을 수 있으니 이 글을 읽는 당신께서 뭔가 이상한 오류나 버그를 발견하면 갖은 방법으로 이를 알려주기 바람.
애니웨이, 이번 업데이트는 원래 "파일첨부" 였음.
에디터 툴바에 종이클립 모양으로 기능이 추가됐음. 그런데 이거 작업하다보니 에디터에 삽입되는 멀티미디어(사진, 유튜브 영상, 각종 iframe)의 추가적인 콘트롤이 불가피해짐. 특히 씬디에서는 멀티미디어를 수정불가 속성의 figure 태그로 사용하고 있는데 이 때문에 멀티미디어가 위아래로 붙어버리면 그 사이에 라인을 삽입할 수 없거나, 삭제가 어렵고 HTML 레벨에서 깔끔하게 지워지지 않는 등의 문제가 마구마구 발생! 뭐.. 대충 다 때워놨음. 고장난거 있음 알려주기 바람.
그리고 헤더나 인용, 코드 단락의 설정을 단축키로 지정할 수 있도록 했음. 예를 들어 ctrl+h 단축키를 계속해서 누르면 H1, H2, H3, P 순서로 단락 스타일이 변경됨. 단축키는 상단 툴바에 물음표 아이콘으로 확인 할 수 있음. 
아.. 그리고 사진 업로드할 때 orient 정보 있으면 적용되게 수정했고 또 뭐 했더라... 정말 기억안나네... 모르겠다. 끝!
2 2

신디 개발자 분께 제안 하나...

댓글에 댓글 달 수 있는 기능 있었으면 좋겠어요!
(너무 오버하는 건가... ㅠ.ㅠ)
2 0

씬디는 입력기에서 사진을 자를 수 있지

씬디는 사용자의 글 작성을 돕기 위해 간단한 사진편집기능을 제공하고 있지.
텍스트 입력기에 사진을 업로드하면 업로드한 사진에 대해 "자르기", "모자이크", "회전" 세 가지의 편집 기능을 사용할 수 있다는 말이지.
이미지를 등록하고 > 등록된 이미지를 클릭하고 > "편집"을 선택한 뒤 > 포토에디터 버튼을 선택하면 새창으로 사진편집기가 열림. ㅇㅇ
사용데모는 아래 동영상에서 확인!