그나저나 로그인 페이지에 오류라;;;;;;;;;;

내 책은 언제 오는거야~
드디어 티스토리 베타 미션도 마지막입니다. '참여후기'와 '티스토리에 바란다'가 주제인데요.
티스토리 2008 베타는 잘 만들어진 애플리케이션이라고 볼 수 있습니다. 디자인도 깔끔해졌구요.
그러나,
"내가 이런 변화를 원하는가?"
를 물으신다면, 글쎄요... 저라면 좀 더 가볍고 빠른 애플리케이션에서 사용하고 싶다고 말씀드리고 싶네요.
티스토리는 포탈 블로그가 아니였습니다.
포탈과 같이 무거운 서비스가 아니였습니다.
포탈을 원했다면 다음블로거를 쓰면 되는 일입니다.
티스토리의 본래의 모습인 웹을 존중하고 가벼운 서비스를 원합니다.
이전 에디터를 개편 후에도 사용할 수 있었으면 좋겠습니다.
php에서 html을 파싱하여 특정 node의 innerHTML을 얻어내는 프로그램을 작성하려고 했습니다. 올빼미 님의 도움으로 Tidy라는 라이브러리를 알게되었는데요. 설치(윈도우, 한글 메뉴얼) 후
tidy_node->get_nodes(TIDY_TAG_DIV)
를 호출하자 다음과 같은 에러가 발생하더군요.
Fatal error: Call to undefined method tidyNode::get_nodes()
해결 방법은 못찾았습니다. -_-;;;;;; (Tidy의 php 5.1.2 버전의 dll에서는 발생하는 것 같습니다. 다른 버전은 모르겠구요.)
야근 내내 삽질(OTL)만했군요.
사실 블로그의 기능을 다양하게 쓰지는 않기 때문에 팁이라고 붙이기는 어려울 것 같네요 ^^;;;; 본 포스트도 8번째 미션을 위한 포스트로 보셔도 될 것 같습니다. (후후;;;;)
2008 베타에서 업데이트 된 기능 중 하나가 사진 올리기 기능에서 '올리기 일괄 설정'이 추가된 건데요.
사진들을 올릴 때 사진 가로크기를 직접 설정하여 올릴 수 있게 되었습니다. 게다가 사진 정렬을 직접 넣을 수도 있으며 이미지 왼쪽 흐름, 오른쪽 흐름 정렬을 추가하여 이미지 옆에 글을 직접 쓸 수 있게 되었죠.
옆의 사진은 스페인 여행 때 찍었던 바르셀로나 Mercè 2007의 사진입니다.
DSLR이 대세인 시기에 이미지 원본 저장 기능의 지원과 쉬운 이미지 축소/확대의 기능의 지원은 흐름에 딱 맞는 에디터 기능이 아닐까 싶네요.
이상.. 팁이였습니다. -_-bbbbbb
티스토리 2008 베타에서 플러그인 설정화면도 바뀌었는데요. 이전 설정 화면에서는 플러그인 설정을 하려면 팝업창을 띄우고 값을 설정한 후 저장을 해야 했습니다.
변경된 플러그인 설정창에서는 팝업창을 띄우지 않고 플러그인 페이지에서 바로 설정이 가능합니다.
설정 버튼을 누르면 플러그인 설정 페이지가 열리고 설정내용을 입력한 후 사용을 누르면 활성화가 됩니다.
플러그인 페이지가 바뀐 부분은 환영할만한 부분입니다만, 몇 가지 아쉬운 점이 있습니다.
추가되었으면 하는 플러그인은 Syntax Highlighter를 플러그인으로 만들어 주셨으면 합니다. ^^
// Code from jQuery var jQuery = window.jQuery = window.$ = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context );};
기대해도 되는거죠?
구글 또는 about:blank를 즐겨 사용하다가 요 며칠 전 이슈를 보고서 첫 페이지를 다음으로 바꿨습니다.
처음에는 불편하다가 지금은 꽤 쓸만하더군요. -_-;;;;; 그래도 blank가 더 좋기는 합니다. 쩝~
그러나, 가끔 이 분들을 보기 위해서 네이버는 갑니다. ^^
![]() | ![]() |
시작하는 글
jQuery는 다른 라이브러리와 함께 사용할 수 있도록 만들어졌는데요. jQuery라이브러리와 플러그인들은 jQuery(namespace) 안에 포함되도록 제한되어 있습니다. jQuery의 일반적인 규칙으로 "global"한 객체들은 모두 jQuery(namespace) 안에 정의되어지기 때문에 Prototype이나 MooTools 또는 YUI와 충돌에 관해서 걱정할 필요가 없습니다.
그러나, 단 하나의 예외가 있는데요. jQuery 라이브러리에서 jQuery(namespace)의 shortcut으로 사용되는 $입니다.
$ 함수 재정의하기
그러나, 이러한 $에 대해 충돌이 발생하더라도 jQuery.noConflict()를 호출함으로서 해결할 수 있습니다. (jQuery.noConflict()를 호출하기 위해서는 jQuery 라이브러리가 선언된 뒤여야만 합니다.)
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...), $가 아닌 jQuery를 사용
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
jQuery.noConfict()를 호출하게되면 _$(jquery.js 파일이 로딩될 때 기존에 선언되었던 $의 내용을 _$에 저장)의 내용들을 복원하게 됩니다. $를 호출하게 되면 위에서 선언하였던 prototype의 $가 호출이 되지만 jQuery는 페이지의 다른 곳에서 계속 사용할 수 있게 됩니다.
이 외에도 다른 해결책도 있습니다. 다른 라이브러리와 충돌이 나지 않는 shortcut을 선언하는 것입니다.
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// Use jQuery via $j(...), $가 아닌 $j를 사용
$j(document).ready(function(){
$j("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
jQuery.noConflict()에서 리턴되는 값은 jQuery입니다. 여기에 $j가 jQuery를 참조하도록 하는 코드구요. 당연히 $j 외에도 여러 다른 기호들을 alias로 사용할 수 있습니다.
jQuery 코드
jQuery 시작 부분을 보게 되면 jQuery에서 사용되는 jQuery와 $ namespace에 대해서 따로 저장을 하게 되구요.
// Map over jQuery in case of overwrite
var _jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$;
noConflict 함수가 호출되는 경우 이를 복원하는 형태를 취하고 있습니다.
jQuery.extend({
noConflict: function( deep ) {
window.$ = _$;
if ( deep )
window.jQuery = _jQuery;
return jQuery;
},
참고자료
티스토리 2008 베타에서는 wysiwyg.css 스펙을 추가하였는데요. 스킨을 작성할 때 wysiwyg.css를 따로 정의하면 글쓰기 페이지를 로딩할 때 wysiwyg.css를 읽어와서 글쓰기 페이지에 적용하게 됩니다.
지금까지는 Butterfly 스킨, IsBase 스킨, Moving Box 스킨, Pure 스킨, ViewFinder 스킨에 적용이 되었습니다. 아래는 적용한 예이구요.
스킨을 잘 구조화시키고 분리하였다는 생각이 드네요. 에디터의 header를 보면 wysiwyg.css 파일을 link 태그로 뿌려주는 것을 볼 수 있습니다.
각주
최근에 보았던 Gatorlog 님의 "도움을 구합니다: commentpress에서 footnote 문제"글에 Zonathan Zittrain 교수가 쓴 The Future of the Internet and How to stop it 소개가 나옵니다. 여기에서 각주를 사용하고 있는데요.
책에서의 각주처럼 각주를 책의 마지막(다른 페이지)에 옮긴 후 링크만 남겨놓은 형태가 됩니다.
티스토리의 2008 베타에서 제공되는 각주는 위의 형태와는 좀 다른 방법을 취하고 있습니다. 먼저 사용방법은 다음과 같습니다.
입력부분은 각주 이미지와 함께 쉽게 입력할 수 있게 되어있지만 아쉽게도 Textarea로 구현되어 있어서 위지윅 스타일의 HTML 코드로 각주를 삽입할 수는 없습니다. 또한, HTML코드를 직접 삽입하여도 화면 출력시에 모두 제거되는 단점이 있습니다.
각주(footnote)는
논문 따위의 글을 쓸 때, 본문의 어떤 부분의 뜻을 보충하거나 풀이한 글을 본문의 아래 쪽에 따로 단 것 [footnote]다음 국어사전 (http://krdic.daum.net/dickr/small_search_word.do?q=%B0%A2%C1%D6)[/footnote]
이라고 합니다. 논문을 살펴보면 뜻을 보충, 풀이하는 글 옆에 다른 논문 출처가 포함되어서 나오게 되는데요. 마찬가지로 웹에서 각주를 추가한다면 링크 추가는 불가피하다고 생각됩니다. 스타일은 빠지더라도 링크 부분은 삽입될 수 있게 해주면 아주 좋을거라고 생각되네요.
양쪽정렬
티스토리 2008 베타에 양쪽정렬 기능도 추가되었습니다.
바로 아래 단락은 좌측정렬이구요.
무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다.
바로 아래 단락은 양쪽정렬입니다.
무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다.
좌측정렬은 style의 text-align 속성에 left를 주었고 양쪽정렬은 justify를 준 것인데요. 양쪽정렬이 필요한 지는 잘 모르겠습니다. -_-;;;
※ 각주 부분에 테스트로 삽입된 내용은 Zonathan Zittrain 교수가 쓴 The Future of the Internet and How to stop it의 글입니다.
관련 링크들
티스토리의 2008 베타에서 개선된 부분 중 서식도 빼놓을 수 없습니다. (점점 리뷰보다는 미션 지향적으로 변하고 있군요 쿨헉~;;) 서식은 글쓰기 페이지에서 상단의 글 종류에서 서식으로 저장하면 저장이 됩니다.
저장된 서식은 글쓰기 페이지의 우측 서식 항목에서 나오게 되는데요. 서식을 클릭하면 저장했던 양식이 글 본문에 삽입이 됩니다. 구분선 아래 쪽이 서식 포멧을 적용한 예입니다.
시작하는 글
jQuery는 다른 라이브러리와 함께 사용할 수 있도록 만들어졌는데요. jQuery라이브러리와 플러그인들은 jQuery(namespace)안에 포함되도록 제한되어 있습니다. jQuery의 일반적인 규칙으로 "global"한 객체들은 모두jQuery(namespace) 안에 정의되어지기 때문에 Prototype이나 MooTools 또는 YUI와 충돌에 관해서걱정할 필요가 없습니다.
그러나, 단 하나의 예외가 있는데요. jQuery 라이브러리에서 jQuery(namespace)의 shortcut으로 사용되는 $입니다.
$ 함수 재정의하기
그러나, 이러한 $에 대해 충돌이 발생하더라도 jQuery.noConflict()를 호출함으로서 해결할 수 있습니다. (jQuery.noConflict()를 호출하기 위해서는 jQuery 라이브러리가 선언된 뒤여야만 합니다.)
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...), $가 아닌 jQuery를 사용
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
jQuery.noConfict()를 호출하게되면 _$(jquery.js 파일이 로딩될 때 기존에 선언되었던 $의 내용을 _$에 저장)의 내용들을 복원하게 됩니다. $를 호출하게 되면 위에서 선언하였던 prototype의 $가 호출이 되지만 jQuery는 페이지의 다른 곳에서 계속 사용할 수 있게 됩니다.
이 외에도 다른 해결책도 있습니다. 다른 라이브러리와 충돌이 나지 않는 shortcut을 선언하는 것입니다.
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// Use jQuery via $j(...), $가 아닌 $j를 사용
$j(document).ready(function(){
$j("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
jQuery.noConflict()에서 리턴되는 값은 jQuery입니다. 여기에 $j가 jQuery를 참조하도록 하는 코드구요. 당연히 $j 외에도 여러 다른 기호들을 alias로 사용할 수 있습니다.
참고자료
서식을 작성할 때는 공개설정이 모두 사라지며, 글목록에서 서식목록을 공개로 클릭하는 경우에도 상태를 변경할 수 없다는 말이 나옵니다.
그러나, 베타페이지에서 나온
※ 베타 기간 동안 제작해주신 서식은 이후 정식 오픈 때에 여러분들의 이름으로 서식이 제공될 예정입니다.
를 보면 조만간 서식을 공개, 공유하는 부분이 추가되지 않을까 생각됩니다. N사의 레이아웃기능을 뛰어넘는 티스토리만의 기능이 되기를 기대해봅니다.
※ 허접이기는 하지만, 디자이너가 아닌 개발자로서 무려 4시간의 시간을 투자해가며 만들었답니다. 쿨헉~
서식에 사용된 글
오늘 현석님의 공개 한글 서체 포스트를 보다가 문득, 서울한강체와 서울남산체의 Embedding과 관련된 부분이 궁금해서 찾아봤습니다. Preview & Print embedding allowed라고 되어 있더군요.
폰트에는 폰트사용에 관한 라이센스와 폰트 삽입(Embedding)과 관련된 라이센스(?) 두 가지로 나뉩니다.
폰트 삽입과 관련된 항목은 총 4가지로 구성이 되는데요.
아직 웹에서 ttf파일을 웹폰트처럼 사용할 수 없기 때문에, 문제가 되는 부분은 pdf파일이나 doc 파일같은 오피스 문서에만 해당되기는 합니다. 그러나, 무료로 배포하지만 문서에 포함시켜서 배포하는 부분에 제약을 둔 것은 좀 아쉬운 부분이네요.
서울시에서 배포하는 문서(예를 들어 doc파일)에 서울한강체와 서울남산체를 포함하여서 수정가능하게 배포하면, 라이센스에 위배가 되겠죠.
관련글:
2008/07/16 - [잡학사전/etc] - 서울한강체와 서울남산체
2007/01/15 - [잡학사전/etc] - 폰트 속성을 쉽게 찾아볼 수 있게해주는, Font properties extension
탑 네비게이션
블로그 관리 화면의 탑 네비게이션 부분이 변경되었는데요. 변경된 탑네비게이션은 두 동작으로 이루어집니다.
최상위 메뉴의 mouseover 이벤트에 하위메뉴를 펼친다면 마우스 이동과 동시에 하위 메뉴를 클릭할 수 있을 것 같은데요. 또는 이전 메뉴처럼 스킨을 클릭했을 때 스킨 선택 메뉴로 바로 이동한다면 사용자가 한번 더 클릭하게 되는 동작을 줄일 수 있을 것 같습니다.
글 목록에서의 공개여부 버튼
글 목록에서 공개여부와 관련된 버튼들이 추가되었는데요. 처음쓰는 사용자들의 경우 이 아이콘들을 처음보았을 때 이 버튼들이 어떠한 역할을 한다고 명시적으로 알려주는 부분이 좀 부족한 것 같습니다. img 아이콘이라면 alt에 설명을 넣으면 되겠지만, button으로 되어 있어서 어려울 것 같더군요.
상단 또는 하단의 여백 부분에 공개여부라고 설졍하는 내용을 포함하면 어떨까요?
이번 포스팅은 리뷰라기 보다는 미션을 위한 포스팅입니다. ^^;;;
저의 센터설정입니다.
개선(또는 추가)했으면 좋은 점들
1. 센터 설정 버튼의 이동. 센터 설정이 프로필 우측 영역(div#tmpCenterPanel)의 하단에 포함되어 있는데요. 센터 패널을 여럿 설정하는 경우 최하단에 위치하여서 설정을 변경하는게 불편한 점이 있는데요. 프로필 영역으로 옮기는게 어떨까 싶습니다. (자주 변경되는 속성이 아니기 때문에 특별히 문제가 될 것 같지는 않네요.)
2. 유입경로의 경우 실시간 로그를 보여주는 패널이 있습니다. 실시간로그가 과연 사용자에게 유용할 지는 모르겠는데요. 대신에 하루 단위로 유입경로가 가장 많은 곳을 보여주는 게 더 의미가 있을 것으로 생각됩니다.
가령 자신이 올린 글이 어떤 검색엔진이나 유명블로거(?)의 링크가 걸려서 갑자기 트랙백이 올라갔다면, 어디에서 왔을까 하는 궁금한 점을 한 눈에 볼 수 있기 때문에 더 좋지 않을까요?
3. 티스토리 이벤트와 공지사항에 중복된 글이 있는데 방향을 잡아서 공지사항과 이벤트를 분리하는 것은 어떨까요? 티스토리 이벤트를 삭제하고 공지사항으로 합쳐도 문제는 없을 것 같습니다만... ^^;;
미남이님의 블로그에서 서울서체인, 서울한강체와 서울남산체를 소개하는 포스트를 보았습니다.
음.. 좋군요 ^^. 서울색이라는 항목도 있습니다.
http://design.seoul.go.kr/policy/data_view.php
출처
사이드바와 하단 설정창에 대해서 가장 큰 불만은 작다는 불만이 가장 큽니다.
일단 각 기능의 배치는 기능상으로 적절히 분류되었습니다.
파일첨부
기존의 파일첨부 기능의 경우 파일첨부 영역에서 파일 업로드 버튼을 클릭한 다음① 삽입된 결과가 나오는 리스트에서 파일을 선택한 다음② 삽입될 위치를 선택한 후③ 삽입버튼을 눌러서 삽입④합니다.
개편된 기능의 경우 사진을 입력하는 위치에 커서가 있는 상태에서 툴바 위의 사진을 클릭①한 다음에 이미지를 업로드한 다음②에 바로 삽입③되기 때문에 동작을 한 단계 줄이는 기능을 하게 됩니다.
레이아웃이 조금 깨졌습니다.
삽입된 이미지는 리스트에서 x자 버튼을 눌러서 쉽게 삭제되며 해당 리스트는 에디터의 이미자와 연동되게 됩니다. 미흡한 기능 중 하나가 삭제 시 스타일(text-align: center가 적용된 p 태그)이 남는 문제가 있네요.
이미지 삽입 시 흥미로운 기능 중 하나는 전체 원본 사이즈로 저장 기능입니다. 큰 사진을 임의로 축소시키지 않고 저장하기 때문에 이미지의 원본 느낌을 잘 살려서 넣을 수 있다는 것도 눈에 띄는군요.
(걱정되는 점은 안그래도 가끔씩 느린 티스토리가 더 느려질까 걱정은 됩니다;;;)
베이징 천단에서의 사진입니다.
태그
태그의 경우에는 기존 사용성 고려가 안되어 있는 부분이 아쉽습니다. ','를 사용하여 이 때까지는 쉽게 넣었는데 ','를 빼시는 것은 이해가 좀 가지 않는군요.
공개설정
공개설정 부분의 경우 저장 전에 항상 사용하던 기능이었는데요. 저장하기 전에 태그, 트랙백, 공개설정 등을 항상 누른 후 저장하기를 눌러야하는 불편함이 있습니다. 저장하기 전에 한 번에 설정할 수 있으면 어땠을까 하는 생각이 듭니다.
사이드바
사이드 바의 경우 폭을 좀 더 줄여서 이단으로 만들면 어땠을까 하는 생각도 드네요. 작성중인 글을 제외하고서는 대부분의 내용이 조금 더 줄일 수 있을 것 같다는 생각입니다. 아직 사이드 바를 활용해보지는 못해서 크게 어려움을 느껴보지는 못했습니다.
책이나 인물 등을 검색할 때 DB에서 검색 후 리턴되는 결과가 매우 빠르다는 느낌이 들었구요. 책의 경우는 아직 많은 책이 등록되지는 않은 것 같습니다.
책 검색 결과로 나오는 리스트가 팝업 창의 크기를 넘어서는 경우 닫기 버튼이 밀려서 보이지를 않는 버그가 있군요.
버그
파이어폭스에서 다음과 같은 경우에서 스크롤 바가 이동합니다.
Enter 키가 입력될 때마다 <br>부분을 <p>태그로 감싸주면서 focus를 잃어버렸다 다시 주면서 발생한게 아닌가 생각됩니다만... (코드를 분석해보지는 못했기 때문에 -_-;;;;)
그리고, 커서가 첫 번재 위치에 있는 경우 스페이스를 누를 때 가끔씩 스페이스 동작이 사라지는군요. 명확한 케이스를 잡지는 못했습니다.
좌측정렬 되어있는 문장의 마지막에 커서를 위치하고 delete키를 눌렀을 때 아래 줄이 중앙정렬(p태그가 center로 align)인 경우 좌측 정렬이 중앙 정렬로 변경이 됩니다.
Trex를 wikipedia로