글쓰기 메뉴

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

추석연휴와 2년만에 휴가라는 개인사가 있어서 작업을 적절한 사이즈로 잘라내는데 실패함. 장시간에 걸쳐 작업을 진행하다보니 긴급수정 내용이 수시로 포함되고 개발했던 코드도 시간 지나고 다시 보니 또 수정해야겠고, 수정하고 보니 기존 패턴과 달라서 기존 코드도 부분적으로 리펙토링하고... 이러쿵 저러쿵... 


그래서 이번 업데이트에 내용들이 포함되어 있는지 다 까먹음 ㅇㅇ. 까먹을만큼 자잘한 사이즈긴한데 꽤 중요한 수정들이 있었던게 문제. 그래서 오류가 꽤 있을 수 있으니 이 글을 읽는 당신께서 뭔가 이상한 오류나 버그를 발견하면 갖은 방법으로 이를 알려주기 바람.


애니웨이, 이번 업데이트는 원래 "파일첨부" 였음.

에디터 툴바에 종이클립 모양으로 기능이 추가됐음. 그런데 이거 작업하다보니 에디터에 삽입되는 멀티미디어(사진, 유튜브 영상, 각종 iframe)의 추가적인 콘트롤이 불가피해짐. 특히 씬디에서는 멀티미디어를 수정불가 속성의 figure 태그로 사용하고 있는데 이 때문에 멀티미디어가 위아래로 붙어버리면 그 사이에 라인을 삽입할 수 없거나, 삭제가 어렵고 HTML 레벨에서 깔끔하게 지워지지 않는 등의 문제가 마구마구 발생! 뭐.. 대충 다 때워놨음. 고장난거 있음 알려주기 바람.


그리고 헤더나 인용, 코드 단락의 설정을 단축키로 지정할 수 있도록 했음. 예를 들어 ctrl+h 단축키를 계속해서 누르면 H1, H2, H3, P 순서로 단락 스타일이 변경됨. 단축키는 상단 툴바에 물음표 아이콘으로 확인 할 수 있음. 


아.. 그리고 사진 업로드할 때 orient 정보 있으면 적용되게 수정했고 또 뭐 했더라... 정말 기억안나네... 모르겠다. 끝!

어디서 왔지?
[["synd.kr", 5], ["m.search.naver.com", 1], ["unknown", 449]]
다른 글들
0 0
Square

안드로이드 앱 업데이트

씬디는 원래 웹 버전이 베이스라 (아.. 시대착오적...) 초기부터 쓰시던 분들은 앱이 있는지도 모르실텐데 몇달전에 안드로이드만 우선적으로 (제가 안드유저라) 등록했었습니다.
저조차도 앱은 설치했지만 설치하고 보니 '당겨서 새로고침' 이 안되기에 뭔가 어색해서 안쓰고 있었죠.
그런데 간간히 안드 앱으로 사용자분들이 들어오시더니 급기야는 누군가 플레이스토어에 무려 리뷰를 남기신겁니다!!
화면 회전 시키면 첫페이지로 돌아간다는 오류 리포트를요.
엄청나게 짜증나는 오류일텐데 그걸 리뷰로 남겨주신 정성과 애정에 무한한 감사를 느꼈지만 과연 내가 언제 업뎃 작업을 할 수 있을까하는 걱정도 있었습니다.
그러다가 오늘 아침 드디어!!! 꽤 이른시간에 출근하게되어 상큼한 기분으로 풀충전되어있는 그 타이밍을 놓치지 않고! 앱을 업데이트했습니다.
회전 시 초기페이지 이동 오류와 '당겨서 새로고침' 을 추가했습니다.
혹시나 씬디 사용하시다가 오류나 버그가 아니여도 불편한점이 있거나 추가되면 좋겠다는 내용이 있으면 아무곳으로나 알려주세요.
씬디에 글로 써주시면 제일 좋구요.
사족)
당겨서 새로고침을 직접 구현하지 않고 안드로이드 SDK 에서 제공하는 SwipeRefreshLayout 을 사용해버렸네요.
구버전 호환성을 꼼꼼하게 확인하지 않았는데.. 업댓은 했으나 마음의 짐은 또 하나 생겼네요 ㅠ.ㅠ
0 0

FB - RK 코드 샘플

article.rb
1 0

리디렉션 페이지에 구글 아날리틱스 코드 집어넣기

리디렉션 되는 페이지에 구글 웹로그 분석기 추적 코드를 넣고 meta 태그나 스크립트로 페이지를 이동시키면 데이터 수집이 완료되지 않은 상태로 페이지가 종료되고 로그가 남지 않는 문제가 있지.
리디렉션을 5초 정도로 잡아도 무관하다면 그냥 5초로 잡고 돌려도 OK.
리디렉션 타깃 페이지가 같은 도메인 아래에 있다면 타깃 페이지에 추적 코드가 있는 것 만으로 레퍼러로 처리되어 데이터가 수집되니까 이것도 OK.
하지만 리디렉션을 외부 사이트로 보내야하고 1~5초 정도 사용자를 묶어두는게 부담스럽다면 추적 코드의 동작이 완료된 후 리디렉션을 실행하면 되겠지.
2013년부터 사용된 Google Universal Analytics 추적 코드라면 hitCallback 콜백을 사용하면 되고 혹시 2013년 이전 코드라면 글로벌 오브젝트인 _gaq 큐에 함수를 밀어넣으면 된다네.
추적 코드 어딘가에 _gaq 가 있으면 그냥 오래된 코드, _gaq 가 없고 다음과 같이 추적코드가 시작된다면 Universal.
오래된 버전에서는 아래처럼 리디렉션이 가능
Universal 버전에서는 아래처럼 hitCallback을 사용할 수 있음
이상 끝!
0 0

아우 나 돌머리...

아 된장. 원래 소스나 프레임워크 업뎃이 목적이 아니였고.. 글 상세 페이지 하단에 나오는 연관글들 로직 수정하려고 했던건데... 초반에 글이 너무 없어서(지금도 적지만) 최신글 몇개를 박아넣었는데 그게 아직도 살아있어서 없애려는 목적이였는데...
코드를 여는순간 매직!!!! 뻘짓만 드럽게했네.
3 0
Square

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

1. 노트와 연습장, 연필과 펜으로 작성된 아날로그 컨텐츠를 디지털로 변환시키는 최초의 소프트웨어가 뭘까?
  - 접근성과 가벼움으로 승부하는 - 메모장
  - 전통의 워드 프로세서 - MS워드, 아래아한글, 오픈오피스
  - 디지털 네이티브 - 구글 독스, 에버노트, 블로깅 툴 등
2. 한글이나 워드로 작성한 기사를 메모장에 붙여넣었다가 다시 CMS 기사 입력기에 붙여넣고 있어요.
  - 기자들한테 진짜 많이 들은 얘기. 주로 앞뒤의 다른 문제를 설명하기 위한 기초 설명이지.
3. 메모장에 작성한 글을 복사해서 씬디에 올렸는데 앞부분이 잘렸어요.
  - 씬디 사용자에게 받은 피드백. 2번과 같은 구조. 
  - 앞부분이 잘리는 문제는 당연히 코드를 수정해야겠지만 "메모장 복붙" < 이거 해결해야겠다.

그래서 씬디에다가 "파일로 글쓰기"라는 기능을 추가해봤지!
아직까지는 오로지 문서 파일에 있는 "텍스트"만 발라내는 용도로 쓰이고 있어.
하지만 기능이 유용하다고 생각되면 - 사용자의 글쓰기 과정 & 디지털 퍼블리싱 과정에 알맞은 기능이라고 생각되면 - 엑셀 파일을 올릴 경우 표나 차트를 자동으로 만들어준다거나, 문서에 포함된 사진, 비디오 같은 멀티미디어도 옮겨준다거나 하는 쓰임이 추가될 수 있겠지. 
글쓰기 화면 하단에 있는 업로드 영역에 드래그&드랍으로 파일을 떨구거나 "글 불러오기" 버튼을 사용해 파일을 업로드하면 끝!
복붙에서 발생되는 문제와는 또 다른 무시무시한 문제가 있지.
인코딩.
아! 좌절스러워 ㅋㅋㅋ
일단은 문서의 인코딩을 추측해서 자동으로 변환하고 있지만 컨텐츠가 발라지지 않거나 문자가 깨지는 문서들이 꽤 있을 것 같아.
그렇지만! 서비스와 기능은 오픈시켜 사용되지 않으면 발전할 수 있는 기회도 없다는걸 잘 알고 있기 때문에 과감하게 적용! 은 사용자가 적으니 위험부담없이 적용
컴퓨터에 잠자고 있는 글들 올려보세요!
1 1

Trix Editor 변경 작업 중단

누가 궁금할까 싶지만 에디터 변경을 예고한 적이 있고 작업을 중단했기 때문에 글을 남겨놔야지.
Trix 로 에디터 변경을 원했던 이유는 당연히 안정적인 입력을 위해서였지만 약 3일에 걸친 작업 끝에 다음과 같은 이유로 작업을 중단했다.
1. 2bytes 입력에서 몇가지 문제가 확인됨. 
- Trix 는 라인브레이커로 br 을 사용하고 div나 pre, figure 등의 블럭 엘리먼트가 들어오면 새로운 "블럭"을 만드는데 새로운 블럭의 첫 단락에서 확정적으로 자모음이 깨진다.
- Trix 는 contentEditable 을 사용해 IME 의 입력내용을 캐치하고 Trix::Document 를 생성하는데 2bytes 의 경우 한 글자를 위해 여러번의 키스트로크가 발생할 수 있기 때문에 글자의 순서가 변경되는 문제가 간혹 발생한다.
- 같은 이유로 입력된 글자를 contentEditable에 재출력할 때  다른 블럭으로 캐럿이 점프되는 경우가 있다.
2. 기존 사용하던 에디터의 안정성이 확보됐다.
- 사용 중이던 에디터가 갑자기 엄청난 숫자의 버그들을 쏟아냈으나 약 2달에 걸쳐 대부분의 버그가 수정됐다.
- 입력된 콘텐츠가 날아가는 치명적인 문제가 남았지만 원인을 찾을 수 있었고 소스 핵을 통해 해당 부분 스킵. 발생되는 사이드 이펙트는 서버단에서 저장 시 처리하도록 코드 수정.
Trix 의 개발은 계속 팔로우 하겠고 의미있는 버전업이 생기면 다시 개발을 고민해봐야겠다.
1 3

페이스북 임베드 URL,
소셜 플러그인 (XFBML) 파싱

임베드 대상 페이스북 콘텐츠는 "포스트", "비디오", "사진" 이렇게 종류별로, 웹과 모바일에서 각각 URL 형식이 조금씩 달라 프로그램으로 이를 처리하기 위해 동일한 형태의 주소가 필요하다.
SDK를 사용해 페북 컨텐츠를 임베드하는 경우 기준이 되는 URL 은 웹용 URL 이다.
뭐, URL은 딱보면 알겠지만 fbid 라는 고유ID만 빼오면 된다. 
모바일에서 포스트에 대한 주소만 URL 파라미터로 처리되어 있고 나머지는 전부 URL Path에 포함되어 있으니 아래와 같은 정규식으로 fbid부터 발라내자
정규식은 Ruby 2.x 버전에서만 동작을 확인했지만 look-behind 와 look-ahead 외에 정규식 엔진을 타는 내용이 없기 때문에 동작이 안된다면 그 부분만 수정하자.
사실 효율을 생각한다면 저딴 정규식으로 한방에 fbid 를 뽑는 것 보다 fbid 가 파라미터로 존재하는 케이스를 분리시키고 나머지 정규식도 2회로 나눠 돌리는게 더 좋지만... 귀찮으니 한 줄로 하자.
상식적으로 fbid 만 뽑아내면 될 것 같으나 페북 임베드에 사용되는 URL은 사용자 아이디가 버킷 이름처럼 포함되어 있다. 문제는 모바일 URL에 사용자 아이디-문자-가 없다는 점.
이 문제는 페이스북의 짧은 주소 fb.com 을 사용해 해결할 수 있다. http://fb.com/<fbid>의 형식으로 리퀘스트를 보내면 해당하는 완성된 주소로 리디렉션 시켜준다. - 임베드 코드 생성 시 fb.com 을 그냥 쓸 수 있으면 좋을텐데 안되더라.
curl 로 리디렉션된 최종 URL을 뽑는 코드는 아래와 같다.
내가 쓰는 Typhoeus 에선 아래처럼 최종 URL을 받으면 된다. 
이렇게 얻은 URL 로 
위와 같은 XFBML을 사용해 임베드가 가능하다. 다양한 옵션은 페북 문서 확인.
Javascript SDK 를 사용하는 경우 SDK 가 로드된 후 FB 객체를 initialize 하면서 페이지에 있는 모든 XFBML 을 파싱할 수 있고, 이와 다른 타이밍에 추가적으로 XFBML 을 파싱해야하는 경우는 아래의 코드로 가능하다.
특정 엘레먼트만 파싱하려면
jQuery 로 돔을 잡아 파싱하려면
이렇게 파싱하면 컨텐츠가 임베드된다.
1 1

Re: 주말 어디갔지

월요일이 괴로운건 나이와 국경, 인종을 뛰어넘는 공감코드가 아닐까.
내 경우엔 보다 젊었을 때의 괴로움은 단순한 귀찮음이었던 것 같은데 지금은 끝내지 못한 일들, 끝낼 수 없는 일들, 내 뜻과는 다르게 끝난 일들에 대한 불안감이 월요일의 괴로움이다.
적어보니 그냥 일이 잘 안되고 내가 일을 잘 안하나보네ㅋㅋ
1 1

자바스크립트 - 파일크기 bytes, MB, GB 등으로 표현하기 + 쉼표로 천 단위 끊어서 표시하기

숫자와 관련된 Helper 들 대부분 human readable 이라고 하는데 이거 한국말로 제목쓰려니까 도무지 뭐라고 해야하는지 모르겠네. 인간친화적? 사람이 읽을 수 있는? 사람을 위한? 모르겠음..
아무튼 파일사이즈
그리고 천단위로 쉼표 넣기
뭐, 여기저기 더 좋은 코드들도 널려있지만, 씬디에 사용된 코드들을 그때그때 정리하는 의미로 등록 중.
0 5
Square

한글날 (569돌, 2015년) 기념 폰트 다운로드, 배포 관련 정보

http://www.asan.go.kr/font

아산시에서 제 569돌 한글날을 기념하며 무려 "성웅 이순신장군의 웅혼한 서체!" 를 배포하고 있다.
- 개인,학교,공공기관 등 누구나
- 영상, 인쇄물, 웹, 모바일 어느 곳이나
http://dnomade.com/web/m_page.php?ps_pname=print_datawork04

디노마드에서 3개월간 산돌구름을 사용할 수 있는 쿠폰코드를 제공하고 있다.
산돌구름의 신규회원만을 대상으로 진행되며 탈퇴 후 재가입해도 안된다고...
- 상업용도 사용가능
- 모바일 불가 (PC Only)
- 원본 폰트 사용 불가 (웹폰트 X, 어플리케이션 삽입 X)
- 자세한 라이센스는 산돌구름에 문의하거나 링크 참고
http://m.cast.yanolja.com/detail/2171

야놀자에서는 싸인펜으로 쓴 손글씨를 모티브로 제작한 야체를 무료 배포하고 있다. 
- 개인, 기업 사용자 모두
- 언급은 없으나 광고에 활용하라는 설명은 인쇄물에도 쓸 수 있는게 아닐까?
- 하지만 라이센스 확인은 필수
http://www.spoqa-han-sans.com

구글과 어도비가 합작으로 만든 Noto Sans 를 커스터마이징한 폰트로 한국어, 영어, 일본어 포함.
깃허브를 통해 웹폰트도 서빙하고 있고 서브셋 용량이 414KB 라고하니 여러모로 활용도가 높을 듯.
이건 링크타고 소개페이지 꼭 보셔야함.
폰트에 대한 호불호를 떠나 스포카가 얼마나 노력했는지 느껴짐.
- 라이센스에 대한 정확한 언급이 없으나 Noto Sans 의 라이센스인 Apache License 2.0 이 아닐까 짐작. 문의 필요.
- OFL 이라고 페이지 하단에 링크 있네요
http://goo.gl/tzQpJn
산돌구름 스튜던트 6개월.
산돌구름 자체 이벤트나 디노마드 이벤트는 3개월인데 비해 기간이 2배! (그런데 스튜던트!)
대학생 필수 앱 에브리타임을 설치하고 한글날 배너를 클릭하면 된다고 함.
http://www.busanbadattf.com/

부산대 학생 남승우씨(후.. 훈남이네)가 부산체를 수정 개발한 폰트
머니투데이의 기사에 따르면 하루 10~20자씩 27개월간 개발했다고. (짝짝짝!)
- 개인, 기업 사용가능
- OFL 1.1 (오픈 폰트 라이센스)
http://googledevkr.blogspot.kr/2015/10/noto.html

Noto Sans KR 의 웹폰트가 드디어 Early Access 에서 제공됩니다.
한글날은 조금 지났지만 "훈민정음 반포 569돌을 맞이해서 자그마한 선물을 마련했습니다." 라고 밝히고 있어 이 포스팅도 업데이트 합니다.
0 0
Square

업데이트

프레임워크 버전이 너무 올라가서 나중에 따라가려면 대형 공사가 될까 걱정되어 프레임워크 버전업. 하지만 이미 큰 공사였음. 아 힘들어.
텍스트 에디터도 자잘한 오류들이 많이 보여서 코드 정리 및 라이브러리들 일부 업데이트. 완전 힘듬.
별로 테스트 해볼 시간은 없어서 대충 동작되는 것 같아서 서버에 적용.
오류나면? 알려주삼.
3 2

11월30일, 딱 오늘까지만, 씨네코드선재는 상영을 한다. 그리곤 문을 닫는다.
부유하듯 북촌 골목을 떠돌다 선술집에 드나들 듯, 무작정 찾아간 그 적적한 극장엔, 나의 한심함과 세상의 불충분함을 잘도 드러내는 소위 예술영화 같은 게 스크린에 매달려 있었다. 무심하고 쓸쓸한, 하지만 뭔가가 꿈틀대는 극장 안에서 시간을 보내고 나오면, 북촌의 한적한 골목엔 불이 켜지고 나와 같은 사람들이 유령처럼 하나둘 씩 모여들곤 했다. 북촌엔 낮의 예술이 선사한 취기를 이어갈, 질박한 술집들과 고즈넉한 풍경들이 제법 많았더랬다.
부침이 많은 서울에서, 그런 무의미한, 불분명한, 모호한 것 투성이었던 예술영화, 그리고 그네들을 즐기는 시간들이 오래 허락될 리는 없었다. 그렇게 추상적이고 은유적인, 키 작은 예술영화란 녀석이 매해 땅값이 비싸지는 그곳에 어울릴 수 없었던 거다. 물론 예술영화만을 고집한 건 아니었지만, 그곳은 애시당초 물 건너온 히어로 따위에겐 어울릴 수 없는 공간이었다.  
이제 우리들 마음 켠엔 우연히 방심하다 조우하는 모든 낯선 것들을 위한 방이 하나씩 사라져가고 있다. 
맘 속엔 그리움을 위한 방들만 자꾸 많아지고 있다.   
모든 영화는 끝이 난다. fin 이란 자막이 뜬다해도, 난 조금 더 극장에 머물고 싶을 때가 있었다.  
이봐 잠깐, 끝을 음미하고 싶어. 이 영화가 주는 기묘한 여운을 잠시 즐기고 싶단 말이지. 그러니 너무 빨리 극장에 불을 밝히고 다음 손님을 위해 나가라고 하지 말아죠...되새길 시간이라도 좀...내가 왜 이 영화를 찾아온 건지, 그래서 내가 누구인지, 아직 알지 못했단 말이야...
북촌의 영화 하나가 끝났다. 그리움이 시작된다.