Textcube에도 집을 마련했습니다.

드디어 데이타 복원에 성공하여 Textcube에도 집을 장만하였습니다. ^^
가벼우면서도 쉬운 사용성 때문에 왔기는 했는데.. 스킨 편집이 안되네요 ^^;;;;

일단은, 두 집 살림을 해야겠네요 ^^

JSEclipse가 종료되었군요.

Eclipse에서 JavaScript 플러그인으로 JSEclipse를 사용했었습니다. Adobe에 인수된 뒤로 제대로 유지보수도 안되더니만, 결국에는 Flex Builder의 옵션 플러그인으로 집어넣고, 플러그인을 종료해버렸군요.

이클립스의 JSDT가 나와있기는 합니다만, WTP R3.0 이상에서만 지원이 되는 것 같네요. (WTP R 3.0에서는 PDT와 Subclipse가 제대로 동작하지 않는군요.)

Adobe도 믿을 것은 못되는군요.

P.S > PDT Nightly Build 버전을 설치하여도 안되네요. ㅠㅠ 정식 버전을 기다려야 할 것 같습니다. Adobe ㅅㅂㄹㅁ...

Bang == !

!

Douglas Crockford 님의 "The JavaScript Programming Language 1/4"강의에서 !를 Bang이라고 하더군요.
Wikipedia에서 검색해보니 다음과 같이 불린다고 하는군요.

• exclamation mark
  
• exclamation point
  
• screamer
  
• bang - "Bang" is also common in computer programming slang
  

출처: Wikipedia, Douglas Crockford 님의 "The JavaScript Programming Language 1/4"

※ BANG 하니, 오랜만에 떠오르는 이 BANG도 있군요. (아.. 이놈의 덕후;;;)

The Hitchhiker's Guide to the Galaxy

The Hitchhiker's Guide to the Galaxy

영화의 내용보다 빈약한 가이드~

querySelector()와 querySelectorAll()의 지원여부

./with Imagination 블로그에서 "Firefox 3.1 brings good stuff"라는 글을 읽었는데요.

document.querySelectorAll("p.warning, p.error");
document.querySelector("#foo, #bar");

querySelector()와 querySelectorAll()을 지원한다고 합니다.

Webkit(2월 7일 이후 빌드), IE8, Firefox 3.1 모두 native로 지원하게 되었으니 엄청 빨라지겠군요. -_-;;;

출처: "Firefox 3.1 brings good stuff"

YES24 로그인 오류...

YES24 는 ASP.NET을 사용하고 있었구나....
그나저나 로그인 페이지에 오류라;;;;;;;;;;

내 책은 언제 오는거야~

티스토리 미션9 - 참여후기

드디어 티스토리 베타 미션도 마지막입니다. '참여후기'와 '티스토리에 바란다'가 주제인데요.

티스토리 2008 베타는 잘 만들어진 애플리케이션이라고 볼 수 있습니다. 디자인도 깔끔해졌구요.

그러나,

"내가 이런 변화를 원하는가?"

를 물으신다면, 글쎄요... 저라면 좀 더 가볍고 빠른 애플리케이션에서 사용하고 싶다고 말씀드리고 싶네요.

티스토리는 포탈 블로그가 아니였습니다.

포탈과 같이 무거운 서비스가 아니였습니다.

포탈을 원했다면 다음블로거를 쓰면 되는 일입니다.

티스토리의 본래의 모습인 웹을 존중하고 가벼운 서비스를 원합니다.

이전 에디터를 개편 후에도 사용할 수 있었으면 좋겠습니다.

Tidy

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 - 나만의 팁

사실 블로그의 기능을 다양하게 쓰지는 않기 때문에 팁이라고 붙이기는 어려울 것 같네요 ^^;;;; 본 포스트도 8번째 미션을 위한 포스트로 보셔도 될 것 같습니다. (후후;;;;)

2008 베타에서 업데이트 된 기능 중 하나가 사진 올리기 기능에서 '올리기 일괄 설정'이 추가된 건데요.

사진들을 올릴 때 사진 가로크기를 직접 설정하여 올릴 수 있게 되었습니다. 게다가 사진 정렬을 직접 넣을 수도 있으며 이미지 왼쪽 흐름, 오른쪽 흐름 정렬을 추가하여 이미지 옆에 글을 직접 쓸 수 있게 되었죠.

옆의 사진은 스페인 여행 때 찍었던 바르셀로나 Mercè 2007의 사진입니다.

DSLR이 대세인 시기에 이미지 원본 저장 기능의 지원과 쉬운 이미지 축소/확대의 기능의 지원은 흐름에 딱 맞는 에디터 기능이 아닐까 싶네요.

이상.. 팁이였습니다. -_-bbbbbb

티스토리 2008 베타 오픈 리뷰 (7) - 플러그인

티스토리 2008 베타에서 플러그인 설정화면도 바뀌었는데요. 이전 설정 화면에서는 플러그인 설정을 하려면 팝업창을 띄우고 값을 설정한 후 저장을 해야 했습니다.

변경된 플러그인 설정창에서는 팝업창을 띄우지 않고 플러그인 페이지에서 바로 설정이 가능합니다.

설정 버튼을 누르면 플러그인 설정 페이지가 열리고 설정내용을 입력한 후 사용을 누르면 활성화가 됩니다.

플러그인 페이지가 바뀐 부분은 환영할만한 부분입니다만, 몇 가지 아쉬운 점이 있습니다.

1. 주로 사용하였던 Daum 책 정보 넣기 플러그인이 종료되었다는 점하구요.
   (종료예정인 플러그인들이 왜 종료되는 지에 대한 설명도 함께 넣어주면 좋을 것 같습니다. )
   
2. 플러그인 설명에 대한 미흡함
   
1. 태터툴즈에서 제공하는 플러그인의 설명을 클릭하면 텍스트큐브로 이동하였다고 설명하는 페이지로 연결됩니다.
   
2. 플러그인을 사용하면 어떻게 변하는 지에 대한 캡쳐 이미지나 왜 사용하면 좋은지에 대한 내용도 매우 부족한 것 같습니다.
   
3. 개인이 직접 플러그인을 작성하고 올리수 없는 점 (가이드 같은 것도 같이 제공되었으면 좋겠습니다.)
   

추가되었으면 하는 플러그인은 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 );};

기대해도 되는거죠?

25일

월급날입니다.

대출, 전기세, 카드값 이것저것 때고나니 남는게 없군요.

'도대체 뭐한거지???? -_-;;;;'

저의 첫 페이지는 '다음'입니다.

구글 또는 about:blank를 즐겨 사용하다가 요 며칠 전 이슈를 보고서 첫 페이지를 다음으로 바꿨습니다.

처음에는 불편하다가 지금은 꽤 쓸만하더군요. -_-;;;;; 그래도 blank가 더 좋기는 합니다. 쩝~

그러나, 가끔 이 분들을 보기 위해서 네이버는 갑니다. ^^

jQuery와 다른 라이브러리를 함께 사용하기

  시작하는 글 

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;
    },

  참고자료

• Using jQuery with Other Libraries
  
• Core/jQuery.noConflict
  
• Plugins/Authoring - Cutom Alias
  

WYSIWYG.CSS - 티스토리 2008 베타

티스토리 2008 베타에서는 wysiwyg.css 스펙을 추가하였는데요. 스킨을 작성할 때 wysiwyg.css를 따로 정의하면 글쓰기 페이지를 로딩할 때 wysiwyg.css를 읽어와서 글쓰기 페이지에 적용하게 됩니다.

지금까지는 Butterfly 스킨, IsBase 스킨, Moving Box 스킨, Pure 스킨, ViewFinder 스킨에 적용이 되었습니다. 아래는 적용한 예이구요.

스킨을 잘 구조화시키고 분리하였다는 생각이 드네요. 에디터의 header를 보면 wysiwyg.css 파일을 link 태그로 뿌려주는 것을 볼 수 있습니다.

티스토리 2008 베타 오픈 리뷰 (6) - 각주와 양쪽정렬

 각주

최근에 보았던 Gatorlog 님의 "도움을 구합니다: commentpress에서 footnote 문제"글에 Zonathan Zittrain 교수가 쓴 The Future of the Internet and How to stop it 소개가 나옵니다. 여기에서 각주를 사용하고 있는데요.

1. 각주를 저장할 페이지를 따로 생성합니다. 각각의 각주의 타이틀에는 <a name="note-1">타이틀<a>와 같이 선언해줍니다.
   
   
   
   
   
2. 스킨(?) 페이지에 팝업창을 띄우기 위한 자바스크립트 코드를 추가합니다.
   
   
   
   
   
3. 각주를 삽입할 위치에 각주로 이동하기위한 코드를 추가합니다.
   
   
   
   
   

책에서의 각주처럼 각주를 책의 마지막(다른 페이지)에 옮긴 후 링크만 남겨놓은 형태가 됩니다.

티스토리의 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의 글입니다.

 관련 링크들

• Gatorlog님의 도움을 구합니다: commentpress에서 footnote 문제
• Zonathan Zittrain 교수의 The Future of the Internet and How to stop it

티스토리 2008 베타 오픈 리뷰 (5) - 서식

티스토리의 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로 사용할 수 있습니다.

  참고자료

• Using jQuery with Other Libraries
  
• Core/jQuery.noConflict
  
• Plugins/Authoring - Cutom Alias
  

---

서식을 작성할 때는 공개설정이 모두 사라지며, 글목록에서 서식목록을 공개로 클릭하는 경우에도 상태를 변경할 수 없다는 말이 나옵니다.

그러나, 베타페이지에서 나온

※ 베타 기간 동안 제작해주신 서식은 이후 정식 오픈 때에 여러분들의 이름으로 서식이 제공될 예정입니다.

를 보면 조만간 서식을 공개, 공유하는 부분이 추가되지 않을까 생각됩니다. N사의 레이아웃기능을 뛰어넘는 티스토리만의 기능이 되기를 기대해봅니다.

※ 허접이기는 하지만, 디자이너가 아닌 개발자로서 무려 4시간의 시간을 투자해가며 만들었답니다. 쿨헉~

서식에 사용된 글

• 2008/07/20 - [잡학사전/JS(Library)] - jQuery와 다른 라이브러리를 함께 사용하기
  

서울한강체와 서울남산체 100% 무료는 아니군요.

오늘 현석님의 공개 한글 서체 포스트를 보다가 문득, 서울한강체와 서울남산체의 Embedding과 관련된 부분이 궁금해서 찾아봤습니다. Preview & Print embedding allowed라고 되어 있더군요.

폰트에는 폰트사용에 관한 라이센스와 폰트 삽입(Embedding)과 관련된 라이센스(?) 두 가지로 나뉩니다.

폰트 삽입과 관련된 항목은 총 4가지로 구성이 되는데요.

• Installable embedding allowed: 배포하는 문서에 폰트를 함께 넣어서 배포를 할 수 있고 원격 시스템(remote sysmte)에 영구히 설치를 할 수 있습니다.
  
• Editable embedding allowed: 배포하는 문서에 폰트를 함께 넣어서 배포를 할 수 있지만, 원격 시스템에는 임시적으로만 설치할 수 있습니다.
  
• Print & Preview embedding allowed: 배포하는 문서에 폰트를 함께 넣어서 배포를 할 수 있습니다. 그러나, 원격 시스템에 임시적으로만 설치할 수 있으며, 읽기-전용으로만 사용할 수 있습니다.
  
• Restricted liscence embedding: 문서에 폰트를 포함시켜서 배포할 수 없습니다.
  

아직 웹에서 ttf파일을 웹폰트처럼 사용할 수 없기 때문에, 문제가 되는 부분은 pdf파일이나 doc 파일같은 오피스 문서에만 해당되기는 합니다. 그러나, 무료로 배포하지만 문서에 포함시켜서 배포하는 부분에 제약을 둔 것은 좀 아쉬운 부분이네요.

서울시에서 배포하는 문서(예를 들어 doc파일)에 서울한강체와 서울남산체를 포함하여서 수정가능하게 배포하면, 라이센스에 위배가 되겠죠.

관련글:

2008/07/16 - [잡학사전/etc] - 서울한강체와 서울남산체

2007/01/15 - [잡학사전/etc] - 폰트 속성을 쉽게 찾아볼 수 있게해주는, Font properties extension

세 놈 후기

나쁜 점: 지루한 영화. 정신 사나운 영화. 대사도 제대로 들리지 않던 영화.

좋은 점: 사운드트랙. 송강호의 매력적인 연기. 만화 스타일의 영화.

좋은 놈 나쁜 놈 이상한 놈 감독 김지운 (2008 / 한국) 출연 송강호, 이병헌, 정우성, 류승수 상세보기

별 점 준다면 한.... 2점 ★★

오늘의 교훈: 광고 믿고 영화보지말자!!

티스토리 2008 베타에 개선하였으면 하는 점 두 가지

 탑 네비게이션

블로그 관리 화면의 탑 네비게이션 부분이 변경되었는데요. 변경된 탑네비게이션은 두 동작으로 이루어집니다.

최상위 메뉴의 mouseover 이벤트에 하위메뉴를 펼친다면 마우스 이동과 동시에 하위 메뉴를 클릭할 수 있을 것 같은데요. 또는 이전 메뉴처럼 스킨을 클릭했을 때 스킨 선택 메뉴로 바로 이동한다면 사용자가 한번 더 클릭하게 되는 동작을 줄일 수 있을 것 같습니다.

  글 목록에서의 공개여부 버튼

글 목록에서 공개여부와 관련된 버튼들이 추가되었는데요. 처음쓰는 사용자들의 경우 이 아이콘들을 처음보았을 때 이 버튼들이 어떠한 역할을 한다고 명시적으로 알려주는 부분이 좀 부족한 것 같습니다. img 아이콘이라면 alt에 설명을 넣으면 되겠지만, button으로 되어 있어서 어려울 것 같더군요.

상단 또는 하단의 여백 부분에 공개여부라고 설졍하는 내용을 포함하면 어떨까요?

티스토리 2008 베타 오픈 리뷰 (4) - 센터

이번 포스팅은 리뷰라기 보다는 미션을 위한 포스팅입니다. ^^;;;

저의 센터설정입니다.

 개선(또는 추가)했으면 좋은 점들

1. 센터 설정 버튼의 이동. 센터 설정이 프로필 우측 영역(div#tmpCenterPanel)의 하단에 포함되어 있는데요. 센터 패널을 여럿 설정하는 경우 최하단에 위치하여서 설정을 변경하는게 불편한 점이 있는데요. 프로필 영역으로 옮기는게 어떨까 싶습니다. (자주 변경되는 속성이 아니기 때문에 특별히 문제가 될 것 같지는 않네요.)

2. 유입경로의 경우 실시간 로그를 보여주는 패널이 있습니다. 실시간로그가 과연 사용자에게 유용할 지는 모르겠는데요. 대신에 하루 단위로 유입경로가 가장 많은 곳을 보여주는 게 더 의미가 있을 것으로 생각됩니다.

가령 자신이 올린 글이 어떤 검색엔진이나 유명블로거(?)의 링크가 걸려서 갑자기 트랙백이 올라갔다면, 어디에서 왔을까 하는 궁금한 점을 한 눈에 볼 수 있기 때문에 더 좋지 않을까요?

3. 티스토리 이벤트와 공지사항에 중복된 글이 있는데 방향을 잡아서 공지사항과 이벤트를 분리하는 것은 어떨까요? 티스토리 이벤트를 삭제하고 공지사항으로 합쳐도 문제는 없을 것 같습니다만... ^^;;

서울한강체와 서울남산체

미남이님의 블로그에서 서울서체인, 서울한강체와 서울남산체를 소개하는 포스트를 보았습니다.

음.. 좋군요 ^^. 서울색이라는 항목도 있습니다.

http://design.seoul.go.kr/policy/data_view.php

출처

• 서울시에서 서울서체 무료 배포 -  미남이의 이러쿵저러쿵
  
• 서울서체, 서울색 - 서울특별시 디자인총괄본부
  

Lively

구글의 Lively를 붙여보았습니다. 우리 돼지 어디있을꼬~?

느리기는 하지만 나름 중독있군요. 물건 다루기가 힘드네요 ㅠㅠ

※ room name과 description이 입력이 안되면 저장이 안됩니다. 이것 때문에 삽질 좀 했네요 ;;

티스토리 2008 베타 오픈 리뷰 (3) - 사이드바와 하단 설정창

사이드바와 하단 설정창에 대해서 가장 큰 불만은 작다는 불만이 가장 큽니다.

일단 각 기능의 배치는 기능상으로 적절히 분류되었습니다.

  파일첨부

기존의 파일첨부 기능의 경우 파일첨부 영역에서 파일 업로드 버튼을 클릭한 다음① 삽입된 결과가 나오는 리스트에서 파일을 선택한 다음② 삽입될 위치를 선택한 후③ 삽입버튼을 눌러서 삽입④합니다.

개편된 기능의 경우 사진을 입력하는 위치에 커서가 있는 상태에서 툴바 위의 사진을 클릭①한 다음에 이미지를 업로드한 다음②에 바로 삽입③되기 때문에 동작을 한 단계 줄이는 기능을 하게 됩니다.

레이아웃이 조금 깨졌습니다.

삽입된 이미지는 리스트에서 x자 버튼을 눌러서 쉽게 삭제되며 해당 리스트는 에디터의 이미자와 연동되게 됩니다. 미흡한 기능 중 하나가 삭제 시 스타일(text-align: center가 적용된 p 태그)이 남는 문제가 있네요.

이미지 삽입 시 흥미로운 기능 중 하나는 전체 원본 사이즈로 저장 기능입니다. 큰 사진을 임의로 축소시키지 않고 저장하기 때문에 이미지의 원본 느낌을 잘 살려서 넣을 수 있다는 것도 눈에 띄는군요.

(걱정되는 점은 안그래도 가끔씩 느린 티스토리가 더 느려질까 걱정은 됩니다;;;)

베이징 천단에서의 사진입니다.

  태그

태그의 경우에는 기존 사용성 고려가 안되어 있는 부분이 아쉽습니다. ','를 사용하여 이 때까지는 쉽게 넣었는데 ','를 빼시는 것은 이해가 좀 가지 않는군요.

 공개설정

공개설정 부분의 경우 저장 전에 항상 사용하던 기능이었는데요. 저장하기 전에 태그, 트랙백, 공개설정 등을 항상 누른 후 저장하기를 눌러야하는 불편함이 있습니다. 저장하기 전에 한 번에 설정할 수 있으면 어땠을까 하는 생각이 듭니다.

  사이드바

사이드 바의 경우 폭을 좀 더 줄여서 이단으로 만들면 어땠을까 하는 생각도 드네요. 작성중인 글을 제외하고서는 대부분의 내용이 조금 더 줄일 수 있을 것 같다는 생각입니다. 아직 사이드 바를 활용해보지는 못해서 크게 어려움을 느껴보지는 못했습니다.

책이나 인물 등을 검색할 때 DB에서 검색 후 리턴되는 결과가 매우 빠르다는 느낌이 들었구요. 책의 경우는 아직 많은 책이 등록되지는 않은 것 같습니다.

책 검색 결과로 나오는 리스트가 팝업 창의 크기를 넘어서는 경우 닫기 버튼이 밀려서 보이지를 않는 버그가 있군요.

  버그

파이어폭스에서 다음과 같은 경우에서 스크롤 바가 이동합니다.

Enter 키가 입력될 때마다 <br>부분을 <p>태그로 감싸주면서 focus를 잃어버렸다 다시 주면서 발생한게 아닌가 생각됩니다만... (코드를 분석해보지는 못했기 때문에 -_-;;;;)

그리고, 커서가 첫 번재 위치에 있는 경우 스페이스를 누를 때 가끔씩 스페이스 동작이 사라지는군요. 명확한 케이스를 잡지는 못했습니다.

좌측정렬 되어있는 문장의 마지막에 커서를 위치하고 delete키를 눌렀을 때 아래 줄이 중앙정렬(p태그가 center로 align)인 경우 좌측 정렬이 중앙 정렬로 변경이 됩니다.

티스토리 2008 베타 오픈 리뷰 (2)

이번 리뷰는 미션2에 맞춰서 에디터 세부사항을 더 살펴보도록 하겠습니다.

Trex를 wikipedia로

 Trex
2008 베타로 공개된 티스토리의 에디터는 Trex라는 프로젝트 명을 달고 나왔습니다. PowerEditor를 기반으로 하여 prototype v1.5.1.1을 사용하고 있구요. HTML을 javascript에서 쉽게 쓸수있게하는 hyperscript와 swf파일을 쉽고, valid하게 삽입하게 해주는 SWFObject 라이브러리를 함께 사용하고 있습니다.

 <br> to <p>
에디터에서 변화된 가장 큰 특징 중 하나는 줄 바꿈이 p 태그로 통일되었다는 점입니다. 워드나 한글과 같은 프로그램들 처럼 한 줄에 대한 해석을 p태그로 통일을 시켰는데요. 워드가 <p> 태그를 한 줄의 개념으로 잡고 paragraph으로 처리를 하는 것은 맞습니다만 웹에서 한 줄의 개념을 모두 p 태그로 처리하는게 맞는 지는 잘 모르겠네요.

기존의 스킨과의 호환성이나 Firefox에서 한 줄의 개념이 br인 것 등을 생각한다면, p태그로 생성될 것인지 br태그로 한 줄을 만들 것인지는 선택할 수 있으면 좋을 것 같습니다.

그 다음으로 툴바에 추가 된 기능을 살펴보겠습니다.

  줄간격
가장 먼저 살펴볼 기능은 줄간격 입니다. 줄간격은 말 그대로 삽입된 줄의 높이를 style 속성의 line-height 값을 조절하여 설정하게 됩니다. Firefox에서는 줄간격을 변경하게 되면 Selection에 의해서 선택되어진 p태그를 찾아서 line-height 값을 조절해주게 됩니다.

어떻게 보면 <p> 태그 없이는 사용할 수 없는 기능이므로 Firefox에서 <br> 태그를 <p>태그로 변환하게한 요인 중 하나로 볼 수도 있겠습니다.

 각주
각주 기능은 처음 사용해보았는데요. 글을 쓰다보면 이미지 또는 글 부분의 출처에 대한 표기를 하는 경우가 많이 있습니다. (사실 제 글의 많은 부분이 외국기사 소개가 많아서 -_-;;) 이러한 경우에 유용하게 쓸 수 있는 기능인 것 같습니다.

각주에 달 수 있는 기능이 text만 가능한데요. html코드가 삽입될 수 있다면 더 좋을 것 같습니다.

 구분선
구분선은 에디터에 hr태그를 삽입해주는 기능입니다. 그러나, 실제 코드 안을 들여다보면 <hr> 태그의 border를 0pt로 설정하고 top, left 위치를 -999px, -999px로 설정함으로서 hr을 감추고 div를 hr의 위치에 놓음으로써 구분선 이미지를 보이게 하였는데요. (6번째 스타일을 적용하는 경우에)

사용자에게 다양한 스타일의 구분선을 제공해주는 의미에서는 좋은 일이나, hr의 기본 태그를 살리지 못하고 div로 이미지를 처리하는게 바람직한 지는 모르겠네요.

 삽입기능
테이블, 이모티콘, 기호삽입 기능은 다음의 파워에디터와 동일한 기능이므로 설명이 달리 필요 없을 것 같네요. 사전 기능의 경우 검색을 할 수 있다는 면이 긍정적이기는 하지만, 실제 에디터로 직접 삽입할 수 있는 기능은 없는 부분이 아쉽습니다. (Firefox의 경우 플러그인으로 다양한 사전을 검색할 수 있으므로 어찌보면 불필요한 기능으로 생각되네요.)

이 외에도 글상자를 다양하게 삽입할 수 있도록 팝업창을 바꾼점과 양쪽정렬의 추가도 변화의 한 부분입니다.
그러나, 글상자의 경우 <p> 태그 밖에 <div>로 스타일을 주고 있다는 점, 리스트에서 <ol> 아래의 <li></li> 태그 아래에는 줄 구분을 위해서 <p>태그가 아닌 <br>태그를 사용하고 있다는 점은 왜 <p>태그를 사용해야 하는 지 답답하네요.

 기타
undo/redo의 경우에는 다른 에디터들과 마찬가지로 에디터에 저장되는 모든 html 을 저장한 후 복원하는 방법을 취하고 있구요. 최대 20번(__UNDO_COUNT)까지 복원할 수 있습니다.

툴바의 폰트와 폰트크기 설정은 에디터 내에서 커서 또는 마우스 이동에 따라 설정된 스타일을 반영해주고 있는데요. 사용자에게 어떠한 스타일이 적용되어 있는 지 보여주는 좋은 기능인 것 같습니다.

툴바 외의 부분에서도 변화가 있었는데요.

 탭 컨테이너 (Tab Container)
트랙백을 보내는 기능을 에디터 안에 포함시킴으로서 사용자들이 에디터 밖에서 넣는 번거로움을 없앴다는 것도 이번 개편의 장점으로 볼 수 있습니다.

그리고, 글을 비공개,보호,공개할 지 여부를 radio로 변경하고 발행을 checkbox로 변경함으로서 의미를 좀 더 명확하게 분리한 것 같구요. 아쉬운 점은 기존 티스토리에서 태그를 입력할 때 ,를 사용하여 입력하는 기능을 제거하고 Return(또는 Enter)키만으로 입력하게 하였다는 점은 아쉽네요. 기존의 사용성을 무시하였다는 생각이 듭니다.

 우측 사이드바
오른편의 사이드바의 '작성중인 글'을 다시 노출시켜 주는 기능은

• 사용자에게는 작성하다 멈춘 글을 다시 노출시켜 줌으로서 알려주는 기능을하고
  
• 서비스에게는 노출되지 않은 글을 사용자가 작성하여 노출시켜주는 기능을 하기 때문에

사용자와 서비스 모두 윈윈하는 기능이지 않을까 싶습니다.

서식 기능이 추가되어서 특정 포멧의 글(10문10답이나 릴레이성 글)들을 쉽게 작성할 수 있는 기능도 장점이구요. 네이버 스마트 에디터의 템플릿과 비슷한 기능이지만, 특정 양식을 사용자가 쉽게 작성할 수 있고 이를 저장하여서 사용할 수 있는 점에서 더 나은 기능이라고 할 수 있겠습니다. (사용자끼리 공유까지 한다면 만점이 될 것 같군요.)

플러그인은 이전 글넣기 기능(이전 글을 자신의 글에 다시 삽입하는 기능으로 글을 나누어서 올리는 경우 매우 유용할 것 같습니다. )만 제공되고 있는데요. 추후 공개될 기능을 봐야 판단할 수 있을 것 같습니다만... 블로거에게 자신이 작성한 플러그인은 자신의 블로그에 올릴 수 있으면 좋겠다는 생각이 드네요.

 단축 키 미션

• 왼쪽정렬: Ctrl+,
  
• 가운데정렬: Ctrl+.
  
• 오른쪽정렬: Ctrl+/
  
• 저장하기: Ctrl +S
  
• 밑줄 넣기: Ctrl +U
  
• 기울임 넣기: Ctrl +I
  
• 실행취소 선 넣기: Ctrl +D     
  
• 순서 없는 리스트: Ctrl +Alt +U
  
• 순서있는 리스트: Ctrl +Alt +O
  
• 들여쓰기: Tab
  
• 내어쓰기: Shift +Tab
  
• 링크 삽입창 띄우기: Ctrl +K
  
• quote 태그 삽입하기: Ctrl +Q
  
• 다시 실행: Ctrl +Y
  
• 실행 취소: Ctrl +Z
  
• 구분선 넣기: Alt -

 변화에 대한 느낌
변화를 준다는 것은 언제나 즐거운 흐름입니다. 그리고 그 변화를 빨리 볼 수 있는 기회를 갖는 다는 것도 소중하죠 ^^ 다만, 아쉬운 점이 몇 가지 있습니다. 추가된 기능이 많기는 한데 사용자의 사용성을 고려하기 보다는 기획이 우선되어 추가되었다는 느낌이 좀 강한 것 같습니다. (-_-;; 제가 개발자라서;;;)

정리하자면..

1. 이전의 에디터와는 상당히 강력해진 느낌
   
2. 그러나, 사용자가 과연 필요할만한 기능일까 생각해보면 조금 걱정이 됩니다.
   
3. 태그에 대해서 명확한 정책이 있었으면 좋겠습니다. p태그가 한 줄로서 가장 밖에 위치한다면 몇 개 동작은 수정되어야 겠지만, 반대로 문제가 발생하는 태그들에 대한 버그가 수정될 수도 있을 것 같네요 ^^

이미지 출처 : Tyrannosaurus rex from Wikipedia