Rev. 2.73

attachment

MarkUp은 웹페이지 위에 직접 전달할 내용을 그려넣고 다른 사람과 빠르게 공유할 수 있는 웹서비스입니다. 북마크릿 유형으로 제공되며 실행하면, 색상과 두께 조정이 가능한 곡선, 화살표, 사각형, 원형, 직선으로 그릴수 있는 그리기 도구와 설명을 첨부할 수 있는 주석 도구 그리고 완성된 내용을 공유하는 도구가 사이트 상단에 나타납니다. 놀랍게도 사용자가 그린 형태(제스쳐)를 인식하여 화살표, 원형, 사각형으로 변환해 주는 기능을 내장하고 있습니다. 다소 사용성이 떨어지는 감이 없진 않지만 이와 유사한 서비스인 Bounce에서 표현하지 못했던 부분을 많이 해결한 느낌이네요. 참고로 MarkUp은 Node.JS로 구축되었습니다.

Comments

hero.png

Sencha에서 CSS3 애니메이션을 만들어주는 데스크탑용 애플리케이션인 Sencha Animator를 릴리즈했습니다. 플래시의 타임라인을 이용한 애니메이션 생성 인터페이스와 유사한 레이아웃으로 구성되었으며, 간단한 도형 및 문자를 추가할 수 있는 생성 도구가 포홤되어 있습니다. Mac OS X, Windows, Linux에 설치할 수 있고 완성된 프로젝트를 Export(내보내기)하면 html과 css파일을 생성해 줍니다. 현재 CSS3의 애니메이션 속성은 웹킷기반 브라우저에서만 작동하므로 사파리, 크롬, 안드로이드 및 iOS 등의 모바일 브라우저에 사용될 수 있습니다. 서드-파티 플러그인을 사용하지 않고 광고를 제작할 수 있다고 강하게 피력하고 있네요. 아래는 Sencha Animator를 이용해서 만들어진 광고 예제입니다.

CSS3

Comments

TypeShow goes here.

TypeShow는 자신의 서버에 간단하게 설치하여 사용할 수 있는 글꼴 테스트 위젯입니다. 미리 등록된 글꼴을 PNG 포멧 이미지로 변환하여 출력하는 기능으로 지원하는 글꼴은 트루타입 폰트(PS/CFF)이며, 한국어도 무난히 출력해냅니다. 매우 잘 구성된 완성도 높은 관리자 페이지를 제공하여 폰트를 추가하거나 테마 및 기본 문구 등을 세세하게 설정할 수 있으며, 원격 업데이트 기능까지 갖추고 있습니다. jQuery 기반의 플러그인으로 구성되어 아래와 같은 코드를 사용하여 웹사이트에 추가합니다.

<link type="text/css" rel="stylesheet" media="screen" href="/ts/css/typeshow.css" />
<script type="text/javascript" src="/ts/js/jquery.js"></script>
<script type="text/javascript" src="/ts/js/jquery.typeshow.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#typeshow").typeshow({
		"folder" : "/ts"
	});
});
</script>

TypeShow 설치시 시스템 요구 사항은 다음과 같습니다.

  • PHP 5.2 or higher
  • GD 2.0 + Library
  • FreeType 2.0 support
  • PNG support

설치는 매우 간단하며, 다음과 같은 절차로 설치할 수 있습니다.

  • "Download"를 클릭하여 "typeshow.installer.zip"를 다운로드하고 압축을 푼다. 서버에 디렉토리(예 "ts")를 생성한 후(권한 777) "install.php"를 업로드한다.
  • 업로드한 경로로 "yourdomain.com/ts/install.php"로 이동하고 설치한다. 설치가 완료되면 "ts"의 퍼미션을 변경합니다.

더욱 자세한 내용은 Getting Started 문서를 참조하십시오.

위에 나타난 위젯은 이곳에 실재로 설치된 것입니다. 무료로 공개된 폰트인 나눔 글꼴들을 설정했으며, 한글이 출력 되도록 기본설정을 변경한 것입니다. 그리고 이 블로그는 Prototype.js를 사용하기 때문에 jQuery용 플러그인을 Prototype 클래스로 컨버전하여 적용하였습니다. TypeShow는 단순히 폰트 테스트에 목적을 둔 것만은 아닙니다. 일종의 폰트 API이며 CSS3에 공식으로 도입된 웹폰트의 크로스-브라우징 목적으로도 응용할 수 있겠습니다.

Comments