아까 간단하게 가입하고 폴더 동기화까지 해봤는데요, 원격제어도 가능하군요! 물론 이 원격제어는 화면을 서로 공유하면서 보는 스타일은 아니고 원격 데스크탑과 같은 기능으로 보이지만 여튼 이런 것 까지 준비되어있을 줄은 몰랐네요 :D

image

Connect하면…

ActiveX 설치하고 원격 데스크탑 연결!
아직 별 다른 기능은 없지만 조만간 더 쓸만하게 될 것 같다는 예감이 들지 않나요? :D

Posted by gongdo

윈도 애저가 발표된 이후로 라이브 서비스들이 대대적으로 업그레이드 되고 있죠. 실은 저는 이 라이브 시리즈들의 팬이기도 한데요. 예를 들어 라이브 메신저야 기본이고, 블로깅도 라이브 라이터(live Writer)에서 하고 메일/일정 관리도 라이브 메일, 그리고 50MB미만의 자료 공유/보관은 스카이 드라이브로 하고 있어요.

Live Mesh는 데스크탑 PC/MAC, 웹을 넘나들면서 데이터를 동기화 관리하는 건데요, 일단 기본적으로는 윈도의 특정 폴더를 Mesh용 스토리지로 등록하면 해당 폴더에 생긴 수정 사항이 자동으로 동기화 되고, 다른 PC나 웹에서 수정한 내용도 온라인에 연결되면 자동으로 동기화 돼요.

우선 http://www.mesh.com/ 에서 라이브 ID로 로그인하면 다음 화면에서 다운로드 받아 설치할 수 있어요.

image

설치 도중에 트레이에서 표시되는 화면

image

 

설치가 끝나고 Sign in을 하면…

image

다음과 같이 고유의 PC 이름을 등록하고 조금 있으면 초기화가 끝나요.

image

image

트레이에 있는 아이콘도 실버라이티해서 마음에 드네요^^

image

아이콘을 클릭해보면 자신의 ID로 공유하고 있는 장치들과 공유중인 폴더들을 관리할 수 있죠. 한 번 폴더 공유를 해 보죠.

image

image

공유할 이름을 지정하는데 동기화 옵션에서 언제 파일을 동기화 할지 설정할 수 있고요.

image

이렇게 꽤 예쁜 모양으로 폴더 아이콘이 변경돼요. 그리고 동기화 하고 있는 도중에는 트레이에 있는 Live Mesh 아이콘이 죽어라 돌아가고 있죠.

image

공유한 폴더에 들어가 보면 Live Mesh 창이 달라붙어서 해당 폴더에 있었던 일들을 보여줘요. 진짜 최고!

image

Synchronized Devices를 보면 현재 각 Device에 동기화 상태를 볼 수 있고요. 동영상이 있는 폴더라서 시간이 꽤 걸리는군요.

거기에 하나 더, 파일만 공유하는게 아니라 해당 폴더에 대해 메시지를 붙일 수 있는데요,

image

이렇게 붙이고 온라인에서 동작하는 라이브 데스크탑에 가보면…

image

와우! 진짜 잘 만들었어요. 사용성도 괜찮고!

이게 끝이 아니에요;; 혼자만 사용하는 것도 괜찮지만 다른 사람이랑 공유할 수 있으면 더 좋겠죠? 라이브 메시는 완전히 오픈된 공유 방법은 없고 초대를 통해서 라이브 ID를 가진 친구와 폴더를 공유할 수 있어요. 한번 해보죠.

image

라이브 메시 폴더에서 우클릭으로 콘텍스트 메뉴를 보면 Live Mesh Options > Invite members.

image

멤버의 라이브 ID를 넣고 권한을 지정해주고 OK.
권한은 세 종류가 있는데요, 각각 다음의 권한을 줘요.

  • Contributor : 읽기/쓰기
  • Owner : 읽기/쓰기/삭제/관리
  • Reader : 읽기

초대하고 나서 해당 폴더에 가보면 초대중(Pending)인 걸 볼 수 있죠. 앗… 여기서도 초대(Invite)와 관리(Manage)가 가능했군요 –_-; 여튼 초대가 수락되면 지정한 권한으로 서로 폴더를 공유할 수 있게 되죠.

여튼 사용법 자체가 무지 쉽고 데스크탑에서 탐색기를 통해 직관적으로 이용할 수 있는데다가 오프라인일 때는 오프라인인 대로 사용하고 온라인이 되면 자동으로 동기화. 굉장히 유연하게 사용할 수 있어요.

이것이 바로 애저가 지향하는 클라우딩 컴퓨팅의 대표적인 사례가 아닐까 싶어요.

현재 Live Mesh는 베타 테스트 중으로 5G까지는 사용 가능하고 스카이 드라이브와 달리 파일 하나하나의 용량 제한은 없어서 제한된 그룹에서 공유할 때 더 좋네요.

강추!!

Posted by gongdo

오늘도 구글신과 오픈소스의 성인들에게 감사하는 마음으로, 살짝 경건하게 SyntaxHighlighter를 달아봅시다.

티스토리가 가장 마음에 드는 건 역시 블로그 페이지의 구성을 <!DOCTYPE…부터 시작해서 모든 코드를 내가 마음대로 손댈 수 있고 <script>나 <object> 등에 대한 제한도 없다는 거죠. 그래서 이래저래 위젯이나 스크립틀릿도 마음대로 달 수 있고요.

여튼, 전에 잠깐 달았다가 스킨 바꾸면서 까먹고 있었던 SyntaxHighlighter를 다시 달았어요. 티스토리뿐만 아니라 <head>태그에 접근이 가능한 모든 블로그에서 사용할 수 있는 방법이니 필요하신 분은 한 번 따라해 보아요.

참고로 SyntaxHighlighter는 간단하게 말해서 HTML의 <pre>나 <textarea>에 삽입된 코드에 색상을 입혀주는 스크립틀릿인데요, C# 하일라이팅에는 가장 적합하고 기능도 강력하죠. 처음엔 독립 프로젝트로 시작했다가 지금은 구글 코드 프로젝트로 이사했네요.

1. 코드 다운로드

SyntaxHighligter 프로젝트 홈으로 가서 Downloads에서 최신 파일을 받아 적당한 위치에 압축을 해제합니다.

 

이런 구조로 되어 있을 거에요.

Scripts에는 필요한 각종 스크립트가 주석이 제거되고 최소화된 버전으로 있고, 클립보드 복사에 필요한 swf 애플리케이션이 있으며, Styles에는 필요한 스타일이, 마지막으로 Uncompressed에는 주석이 온전하게 달린 스크립트가 있어요.

2. 코드 업로드

SyntaxHighlighter는 상당히 많은 양의 코드로 구성되어 있어서 그냥 <script>블럭으로 붙여넣기에는 비효율적이에요. 가급적 웹서버에 업로드 해놓고 쓰는 걸 권장해요.

웹서버에 적당한 폴더를 만들고 필요한 파일을 업로드 해야 하는데요, 필수와 옵션을 구분해보자면…

필수

  • Scripts/shCore.js
    코어 스크립트
  • Styles/SyntaxHighlighter.css CSS
    스타일

선택

  • Scripts/shBrush#####.js
    하일라이팅을 할 언어의 브러쉬(사용할 것만 넣는게 낫겠죠)
  • Scripts/clipboard.swf
    클립보드에 복사할 때 필요한 플래시 애플리케이션

이 파일들을 웹 서버에 적당히 업로드 해둡니다.

3. 블로그 스킨 수정(혹은 HTML 디자인 수정)

티스토리를 기준으로 설명하자면…

  1. 관리자 메뉴에서 [스킨]->[HTML/CSS 편집]에 들어갑니다.
  2. <head>블럭 사이에 다음의 코드를 삽입합니다. js파일은 여러 개가 될 수 있겠죠?
    <link rel="stylesheet" type="text/css" href="http://자신의 웹 서버에 올린 css 파일의 URL" />
    <script type="text/javascript" src="http://자신의 웹 서버에 올린 필요한 js 파일의 URL" />
  3. <body>블럭이 닫히기 전(</body>의 앞)에 다음의 스크립트 블럭을 삽입합니다.
    <script type="text/javascript">
    dp.SyntaxHighlighter.ClipboardSwf = "웹 서버에 업로드한 clipboard.swf 파일의 URL";
    dp.SyntaxHighlighter.BloggerMode();
    dp.SyntaxHighlighter.HighlightAll('code');
    </script>
  4. 저장 끝.

 

4. 블로그에서 SyntaxHighlighter 사용하기

코드를 사용하고자 하는 곳에 다음과 같은 HTML 코드를 넣으면 됩니다.
예를 들어 C#을 보자면…

<pre name="code" class="c#:firstline[1]">
여기에 코드를 있는 그대로 삽입
</pre>
class에는 몇 가지 옵션이 들어갈 수 있는데요,
자세한 옵션은 http://code.google.com/p/syntaxhighlighter/wiki/Configuration 여기를 참고하세요.
5. 테스트!
잘 되나요?
C# 예제
using System.Windows.Controls;
using System.Windows.Media;
using System.ComponentModel;

namespace DesignPropertiesSample
{
    public partial class MyUserControl : UserControl
    {
        public MyUserControl()
        {
            InitializeComponent();
            TextBlock tb = new TextBlock();

            if (DesignerProperties.GetIsInDesignMode(this) == true)
            {
                // Design-time
                LayoutRoot.Background = new SolidColorBrush(Colors.Blue);
                tb.Text = "in Design";
            }
            else
            {
                // Run-time
                LayoutRoot.Background = new SolidColorBrush(Colors.Green);
                tb.Text = "in Runtime";
            }

            LayoutRoot.Children.Add(tb);
        }
    }
}

XAML(XML) 예제(헉... XAML은 잘 안되는군요 -_-)

  
    
    
  

Posted by gongdo

아... 기초가 얕으면 바로 이런 문제로 헤매기 마련이죠.
네트워크 폴더, 특히 NAS를 사용하면서 생길 수 있는 접근 권한상의 문제였는데요, 유경상 수석님의 ASP.NET에서 공유 폴더 액세스 시리즈에 완벽하게 정리되어 있네요.

간략하게 정리해서,

  • 코드를 통해 사용자 계정을 가장(Impersonate)하거나,
  • Web.config에 <identity impersonate="true" userName="xxx" password="xxx" />설정 추가하거나,
  • 별도의 HTTP 핸들러 모듈을 사용하여 개별적으로 가장.
  • ASP.NET에서 네트워크 폴더에 접근할 때 되도록 가상 경로명(Y:, Z:)를 쓰지 말고 UNC(Universal Naming Convention)을 사용할 것.

Posted by gongdo

좀 긴 글을 포스팅할 때에 처음에는 워드패드를 사용했습니다. - 초기에 위지윅 문제로 정말 길고길고 긴 글을 쓰다가 두어번 날린 뒤론 긴 글은 절대로 티스토리에서 직접 작성하지 않게 되었습니다. 지금 생각해도 안습.
하지만 포스팅 하려면 워드패드 내용을 다시 위지윅에 복사해야 하고 워드패드에서 적용해놨던 폰트 속성을 죄다 다시 걸어줘야 하는데다가 링크는 또 링크대로 따로 걸어줘야 하지요.

그래서 HTML편집기로 작성하는게 가장 좋겠지만 전 웹프로그래머가 아니라 따로 HTML 편집기를 설치하는 것도 꺼려지더군요.

혹시나해서 VS2005의 WEB site 프로젝트에 HTML파일을 추가시켜서 편집해봤는데요, 매우 강력하게 HTML 및 XHTML 표준 권고안을 지킬 수 있게 되어있더군요.

사용자 삽입 이미지
보시다시피 HTML 페이지 작성할 때 흔히 사용했던 많은 코드들에 딴지를 걸고 있어 W3C의 권고안(여기서는 XHTML 1.0)을 철저하게 준수할 수 있습니다.

모질라 사이트의 개발자 센터 페이지의 HTML코드를 붙여봤는데요, 다른 사이트에 비해 비교적 권고안을 잘 지키는 모질라지만 저런 습관적인 부분까지는 신경쓰지 못하는게 사실인가봅니다.
위 예제를 보면 XHTML 1.0 Transitional에 의거해 input 태그는 반드시 />로 종료되어야 한다고 '에러'레벨을 부과합니다.
그리고 위에 보면 form 태그내에 name 어트리뷰트는 새로운 구성으로 변경할 것을 권장한다고 '경고'를 때리는데요, 그 새로운 구성은 id 어트리뷰트죠. 이건 Description에 직접적으로 나오진 않았지만 해당 설명을 구글링해보면 쉽게 얻을 수 있습니다.

또, W3C에서도 VS IDE와 비슷하게 각 문서 타입과 언어별로 유효성 검사(Validation)을 수행할 수 있네요. http://validator.w3.org/
사용자 삽입 이미지
[좀 더 시각적으로 임팩트있는 W3C의 Validation.
 "이 페이지는 유효하지 않은 XHTML 1.0 Transitional입니다!"
뭔가 코드를 수정하지 않으면 안될 것 같은 권위가 느껴지지 않으십니까!]

뭐, 웹개발자도 아닌 사람이 저런걸 알아봐야 뭐하냐...라고 생각할 수도 있지만 오히려 애플리케이션 개발자이기 때문에 HTML의 루즈한 문법적인 부분에 약간은 의문이 들기도 하고 더 신경쓰입니다.

여기저기 기웃거려본 카더라 통신에 의하면 초기에 IE가 HTML 태그가 제대로 닫히지 않아도 적당히 보여주도록 설계가 되었고 그래서 다른 브라우저들 보다 대충대충 만들어도 문서가 깨지지 않고 잘보였었다...라고 하는군요. 게다가 그런 IE(다른 브라우저들도 그런지는 모르겠지만)에 맞춰 개발해오기도 했고 어디서 권고안이니 이딴 소릴 못들어본 일선의 개발자/디자이너, 심지어는 웹에디터의 코드 조차 이런 문법적인 면에 소홀할 수밖에 없었던게 아닐까 생각해봅니다.

그런 점에서 티스토리의 위지윅 편집기에는 정말정말정말로 불만이 많지만 기회가 되면 정리해서 따로 포스팅할 생각이구요, 몇몇 사이트의 초기화면을 Validation 해봤습니다.

사용자 삽입 이미지
권고안 안지키기로 유명한(^^) 구글입니다. 심지어 <!DOCTYPE...> 조차 없습니다!
구글의 레이아웃이 워낙에 단순해서 권고고 표준이고 뭐고 필요도 없이 각 브라우저에서 잘 보이겠지만 일단 문법적인 면에선 저렇네요.

사용자 삽입 이미지
의외로 깔끔한 보이는 MS의 Validation 결과인데요, 몇몇 IE 전용(혹은 비표준)을 제외하고는 XML에 관한 warning들입니다. 그런데 MS의 사이트는 가장 웹표준안을 잘 지키는 사이트중 하나란 얘길 들었는데 말이죠. 참 알다가도 모를일...

사용자 삽입 이미지
뭐 당연하겠지만 네이버는 참담한 수준입니다. 그도 그럴 수밖에 없는게 각종 배너며 기사며 네이버 외부에서 작성된 것들이 그대로 올라오니 표준은 커녕 ""로 둘러싸지 않은 어트리뷰트는 기본이요, 명백히 실수-부주의-로 태그를 제대로 닫지 않은 것도 많습니다.
스샷은 안찍었지만 야후도 yahoo.com은 구글과 비슷한 양상을 보이는데 kr.yahoo.com은 포털 성격의 사이트로 네이버랑 비슷한 결과가 나오더군요.

사용자 삽입 이미지
시험한 것 중 유일하게 XHTML 1.0 Transitional을 사용한 티스토리입니다.
뭐어 onFocus 같은 이벤트 핸들러 지정 익스텐션 등에서 몇개 걸리고 나머지는 다른 사이트들처럼 습관적인 내지는 권고안에는 안맞지만 브라우저에는 잘 보이는 종류의 것들입니다.
VS2005의 Validation을 보면,
사용자 삽입 이미지
이렇습니다. 제 생각엔 비교적 괜찮은 편이라고 보는데요, 티스토리의 문제는 바로 포스트 에디터입니다.
기껏 VS2005에서 힘들게 모든 권고안을 통과시킨 HTML 코드를 HTML 편집창에 붙여넣고 위지윅 모드로갔다가 다시 HTML 모드로 와보면 모든 태그를 제 입맛에 맞게 수정을 해놓는데 정말 엄청난 양의 에러를 뿜어내는군요.

이 분야에 깊은 이해가 있는건 아니지만, 웹표준-실은 권고안에 불과하지만-을 준수한다면 최소한 저런 Validation 정도는 통과해야 하는게 아닐까요?

물론, 일부 태그, 어트리뷰트나 스크립트에서 브라우저 별로 지원에 차이가 있고 이런 것 때문에 권고안과 달라질 수 밖에 없는 부분이 있는건 알지만 적어도 Doctype을 밝힌 HTML문서라면 해당 Doctype의 문법적인 수준의 권고는 철저하게 지켜줘야 한다고 봅니다.
예를 들어 <br>이 아닌 <br />, <img />에는 반드시 alt 어트리뷰트 달아주기와 같은 것들 말이지요.

어쨌든, validation을 체크하고 맞출 수 있는 부분은 맞추자! 라는 게 결론입니다. 끝!

Posted by gongdo
.Net Framework 3.0 후기에서 Expression 시리즈의 언급과 함께 Expression Interactive Designer의 데모를 올렸었는데요, 오늘은 Web Designer를 테스트 해봤습니다.
Web Designer역시 베타 버전으로 .Net Framework 2.0 환경에서 동작하고 MS 홈페이지에서 무료로 다운로드 받을 수 있습니다.

간단한 말해서, 기본에 충실하고 UI 편의성도 좋습니다. 뭐랄까 참 MS스럽네요.
원래 MS가 IDE하나는 잘 만들었고 MS 개발툴을 주로 쓰시던 분이라면 더 빨리 익숙해질 수 있을 것입니다.
인상적인 부분은 사이트를 개발할 때 외부 CSS와 내부 CSS의 관리를 별도로 할 수 있고 이 요소들을 드래그&드랍으로 쉽게 옮길 수 있게 되어 있습니다.

캡쳐만 봐서는 사용 느낌이 잘 오지 않을 테니 MS의 Feature 소개 동영상을 보세요. -> Expression Web Designer Feature Demo

아쉬운 점이라면 자바 스크립트가 제대로 통합되지 않았다는 점 정도?
그 외의 웹 레이아웃 및 코딩 작업엔 전혀 무리가 없고 UI나 텍스트 편집기 자체의 미묘한 반응성도 드림위버나 홈사이트에 비해 훨씬 손에 익습니다. 이거야 개인차가 있는 거지만요.

MS, 독기를 품고 칼을 갈고 Adobe와의 전쟁 준비를 착착 진행하고 있는 듯한 기분이 듭니다.
아직 베타 내지는 CTP이지만 지금 상태만으로도 충분히 Adobe에게 위협이 될 정도라고 생각되네요.

무섭습니다. 제국의 저력.
Posted by gongdo

아 그렇잖아도 DOM 레퍼런스 찾기 귀찮았는데 마침 이런곳을 발견했습니다.
http://www.gotapi.com/
DOM뿐만 아니라 HTML, JavaScript, CSS, C++, Ruby, PHP 등등등... 정말 유용한 곳이네요.

이 사이트 내에 존재하는 정보가 아니라 W3School같은 레퍼런스 사이트로 링크를 시켜주는 형식인데 검색은 suggest방식으로 되어 있어서 편리합니다.

C++이야 주로 사용하는 개발툴의 도움말에 잘 나와 있으니 상관없지만 Inteli-sense가 안먹는 JavaScript나 DOM 참조에 많은 도움이 되겠네요. ^^

Posted by gongdo