MaKeYOurOwN mkyoon

자주 쓰는 모바일용 CSS3 기억하기

2010-12-22T19:03:45+09:00

box-shadow: 3px 3px red, 2px 2px #eee; 
-webkit-box-shadow: 3px 3px red, 2px 2px #eee;
-moz-box-shadow: 3px 3px red, 2px 2px #eee;

border-radius: 20px/10px;
-webkit-border-radius: 20px/10px;
-moz-border-radius: 20px/10px;

background: url(gradient.png) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff));
background: -moz-linear-gradient(top, #00abeb, #fff);

border-width: 0 20px 0 10px; 
border-image: url(http://shared.starpl.com/images2/mobile/btn_reply.gif) 0 20 0 10 stretch stretch;
-webkit-border-image: url(http://shared.starpl.com/images2/mobile/btn_reply.gif) 0 20 0 10 stretch stretch;
-moz-border-image: url(http://shared.starpl.com/images2/mobile/btn_reply.gif) 0 20 0 10 stretch stretch;

PS.

<link rel="apple-touch-icon-precomposed" href="http://shared.starpl.com/images2/mobile/img_home_add.png" />

iphone - 57 * 57

ipad - 72 * 72

iphone4 - 114 * 114

참고 : http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html

안드로이드용 천지인 키보드의 이상현상

2010-10-07T18:57:39+09:00

스타플 모바일 서비스(http://m.starpl.com)는 꽤 오래전부터 있었습니다만,

어제 안드로이드에서 갑자기 새로운 문제점이 발견되었습니다.

기존폰의 자판에 익숙하던 분들이 안드로이드를 쓰면서

Qwerty 자판에 익숙하지 않아 천지인 키보드를 쓰는 경우가 많은데요.

위와 같은 INPUT 입력창에서 천지인 키보드로 한글을 2자 이상을 입력하면

입력창이 웹페이지에서 사라지는 현상을 발견했습니다.

(영문, 숫자입력은 문제 없었습니다.)

autocapitalize와 placeholder 속성을 제거하니 위의 현상은 사라졌습니다.

둘 중 하나라도 들어가있으면 이상현상이 나타났습니다.

autocapitalize, placeholder가 하는 역할은 Safari Reference에 설명이 되어있습니다.

autocapitalize 속성에 대한 설명 :

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/html/attribute/autocapitalize

placeholder 속성에 대한 설명 :

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/html/attribute/placeholder

천지인 키보드와 위의 속성에 대한 자세한 내막은 잘 모르겠습니다만

기기에서 이루어지는 한글 입력이 웹페이지에 직접적인 영향을 미칠 수가 있다니 놀랍습니다.

모바일 웹페이지 Tip - Webkit 브라우저를 중심으로

2010-08-23T02:06:21+09:00

모바일 웹페이지를 만들면서 느꼈던 점과 기록하고 싶은 것들을
PPT로 정리해보았습니다.

http://mkyoon.tomeii.com/docs/iphone(webkit)mobile_mkyoon.pdf

모바일의 한계
- 정말 중요한 컨텐츠만
- 팝업은 최소한으로
- 이미지는 최소한으로
- 1px 차이는 여유롭게
XHTML
- 2.1 DTD
  - 국내외 모바일 서비스의 DTD
- 2.2 해상도와 Viewport
  - 해상도의 차이
  - Viewport
  - 가로 세로 모드
- 2.3 바로가기 아이콘
  - 홈 화면에 추가
  - Apple Touch Icon
- 2.4 <link>
- 2.5 <table>
- 2.6 Link(anchor)
  - 전화번호
  - 메일주소
CSS
- 3.1 문서 너비는 100%로
- 3.2 Image 최소화
  - CSS Sprite
  - CSS Sprite 부작용
  - 둥근 모서리
  - 그림자
- 3.3 숨겼다 나타내기
  - visibility: hidden;
- 3.4 텍스트
  - 텍스트 크기
Javascript
- 주소창 숨기기
유용한 도구
- 시뮬레이터
- 프레임워크

HTML5 Canvas, LocalStorage를 이용한 네모네모로직 게임

2010-08-13T14:20:24+09:00

Canvas와 LocalStorage를 이용하여 네모네모로직을 만들어 보았습니다.

비록 단 한판 밖에 없고 정답도 맘먹고 보면 다 보이는..

게임이라고 부르기도 부끄럽지만

일단 만들어 봤다는 것 자체에 의의를 두고 있습니다.

http://mkyoon.tomeii.com/docs/nemo.html

O를 선택하여 빈칸을 클릭하면 까맣게 칠해지고

X를 선택하여 빈칸을 클릭하면 칠했던 부분이 지워집니다.

클릭할 때마다 LocalStorage에 저장이 되므로

브라우저를 새로고침하거나 종료하고 다시 실행시켜도

클릭했던 부분은 그대로 가지고 있게 됩니다.

미리보기는 Canvas를 이용하였고

중간 저장은 브라우저의 localStorage를 이용했습니다.

Canvas 때문에 IE에서는 미리보기가 동작하지 않습니다.

IE8부터는 localStorage가 된다고 알고 있습니다만 (http://www.quirksmode.org/dom/html5.html)

canvas와 관련된 js 부분이 에러나서 그런지 동작하지 않네요.

시간을 두고 한번 해결해봐야겠습니다. (예외처리-_ㅠ)

보통 Picross 혹은 Pixelogic 이라고 불리는 네모네모로직의 게임방법은 간단합니다.

세로줄(빨간색)은 세로부분 숫자(1, 1, 1, 1)를 참고하고

가로줄(노란색)은 가로부분 숫자(10)를 참고하면 됩니다.

빨간줄은 채워야 하는 칸이 1칸씩 띄엄띄엄 4개가 있다는 말이고

노란줄은 채워야 하는 칸이 10개가 나란히 붙어 있다는 말입니다.

이 네모네모 로직은 10X10이니 노란줄은 전부다 채워야 겠네요.

이런 방법으로 모든 숫자가 알맞도록 빈칸을 채우면 됩니다.

폰트의 위치에 대하여 - font simulation.

2010-05-20T23:18:45+09:00

브라우저에 따라 폰트의 위치는 조금씩 다릅니다.

폰트가 차지하는 공간이 조금씩 다르기 때문인데요.

디자인팀과의 협업에 있어서 개선점을 찾다가

'폰트의 위치에 대한 예제가 있었으면 좋겠다'라는 요청이 있었습니다.

바로 이거다 싶어서 한번 만들어 보았습니다.

http://mkyoon.tomeii.com/docs/font.html

설정 항목은 font-family, font-size, line-height 세가지 입니다.

새로고침을 하면 초기화됩니다.

글자가 들어있는 회색박스에 대한 소스는 다음과 같습니다.

div {
     float: left;
     width: 400px;
     padding: 10px;
     border-right: 1px solid #fff;
     background-color: #888;
     font: 12px/1.3 Gulim;
}
span {
     background-color: #fff;
}

<div>
     <span>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라 만세 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세.</span>
</div>
<div>
     <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>

지돌스타님의 HTML5 블로그

2010-05-04T02:33:28+09:00

HTML5와 CSS3 정보 공유 공간 - http://html5.jidolstar.com/

팀블로그 형식으로 운영하고 있습니다.

HTML5, CSS3에 대한 정보를 공유합니다.

One-Time Expression 한번만 실행시키자.

2009-09-04T10:00:15+09:00

Expression.

인터넷 익스플로러(IE6,7)에서만 사용할 수 있는 CSS 표현입니다.

말도 많고 탈도 많은 녀석이죠.

자바스크립트가 최소단위인 천분의 일초로 작동을 한다면

이녀석은 수천분의 일초 아니 거의 만분의 일초까지도 되는 것 처럼 작동을 합니다.

(직접 세어보지는 않았습니다. 그냥 느낌이에요 느낌상-_-;)

예를 들어,

IE6에서는 표현이 불가능한 postion: fixed 속성을 expression으로 표현하면

스크롤을 겁나 빨리 내리고 올려도 울렁거림 없이 거의 완벽한 동작을 보여줍니다.

어떠한 동작(이벤트)이든 일어나는대로

이 수천분의 일초 간격으로 계속 대기하고 읽어들이고 값을 던져주고 있다는 겁니다.

그래서 브라우저에 부담을 주고 심지어는 브라우저를 멈추거나 셧다운-_- 시켜버린다는
무시무시한 소문을 안고 다니는 녀석이죠.

그래도 IE6에서는 지원되지 않는 수많은 CSS 속성을

expression을 사용하여 자바스크립트 언어로 표현이 가능한

엄청난 강점을 갖고 있어서 외면하려고 해도 가끔은 생각이납니다.-_-;

대략 2년 전인가요.

야후에서 근무하는 어떤 멋진(wow) 분이- (지금은 구글 olleh!)

expression의 살인적인 아니 살브라우저적인 호출을 상당히 줄여줄 수 있는 방법을 제시했습니다.

One-Time Expressions : http://stevesouders.com/hpws/onetime-expressions.php

위 페이지에 대한 고찰 : http://vacskamati.blogspot.com/2008/10/one-time-execution-of-ie-css.html

저 페이지를 처음 보았을 당시 전 이제 막 웹표준의 웹을 시작하고 있었던 터라

"음. 이런게 있군- expression 무서운 녀석." 이라고 그냥 넘기고 말았는데요.

오늘 max-height 때문에 expression을 써야하나 고민을 잠깐 하다가
max-height 같은 경우는 position: fixed 처럼 계속해서 읽어드릴 필요가 없이
페이지 열릴때 한번만 잡아주면 되거든요.

정말로 작동을 하는지, 진짜 차이가 있는건지 궁금해서 테스트 페이지를 한번 만들어 보았습니다.

예제 파일 : http://mkyoon.tomeii.com/expression.html (IE6, 7에서 보셔야 합니다.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>One-Time Expressions</title>
<style type="text/css">
     .onetime {
          width: 200px;
          padding: 10px;
          border: 2px solid #666;
          overflow: hidden;
          /* 생각없이 쓴 expression */
          height: expression( setCntr(), this.scrollHeight > 99 ? "100px" : "auto" );
          /* 멋진 아저씨가 추천한 방법 */
          /*height: expression(
               setCntr(),
               new Function('el', 'el.style.height = el.scrollHeight > 99 ? "100px" : "auto";')(this)
          );*/
     }
</style>
<script type="text/javascript">
//<![CDATA[
     var gnExpr = 0;
     var gCntrDisplay;
     var gbOn = true;

     function setCntr() {
          gnExpr++;

          if ( gbOn ) {
               displayCntr();
          }

          return true;
     }

     function displayCntr() {
          if ( ! gCntrDisplay ) {
               gCntrDisplay = document.getElementById("cntrdisp");
          }

          if ( gCntrDisplay ) {
               gCntrDisplay.value = gnExpr;
          }
     }

     function setDisplay(bOn) {
          gbOn = bOn;
     }

//]]>
</script>
</head>
<body>
     <input type="text" size="10" id="cntrdisp" disabled="disabled"/>
     <div class="onetime">
          (마우스를 움직여보세요.)
          우리는 달려간다 이상한 나라로 니나가 잡혀있는 마왕의 소굴로 
          어른들은 모르는 사차원세계 날쌔고 용감한 폴이 여깄다
          마술차 마술봉 딱부리 삐삐 찌찌 힘을 모으자 대마왕 손아귀에 니나를 구해내자 
          띠이빠빠 띠이빠빠 달려간다 삐삐
     </div>
     <p>출처 : http://stevesouders.com/hpws/onetime-expressions.php</p>
</body>
</html>

'생각없이 쓴 expression' 부분과

주석처리된 '멋진 아저씨가 추천한 방법' 을
주석부분을 바꿔서 열어보시면 차이를 바로 알 수 있습니다.
(정말로 딱 1개만 찍히네요. 오우 신기.)

결론 : expression 한번만 실행시키기.

CSSproperty: expression(
          new Function('el', 'el.style.CSSproperty = 어쩌구 저쩌구 계산식')(this)
     );

하지만 이방법도 완전한 해결책은 아니라고 하네요~
expression 자체가 위험하긴 하나봅니다. IE8에서도 내다버린 녀석이니까요.

아이폰 어플리케이션 - AppConnect

2009-05-28T11:23:32+09:00

제가 다니고 있는 회사 WECON Communications에서

아이폰 어플리케이션 AppConnect를 출시했습니다.

단순히 세일하거나 인기있는 app의 목록을 보여주는 것에서 더 나아가

SNS을 통해서 사람들과 정보교환을 목적으로 하고 있습니다.^^

쏟아지고 있는 app중에서 보석을 잘 찾아내는 친구를 옆에 두었다면

아이폰, 아이팟 쓰는 맛이 제대로 나겠죠^^

자세한 설명은 아래 링크에서 확인하세요.

AppConnect 개발자 The eye님의 블로그

*MUST HAVE* 아이폰 어플리케이션 - AppConnect

http://theeye.pe.kr/entry/wecon-proudly-present-AppConnect-iPhone-MUST-HAVE-Application

AppConnect 공식 홈페이지

AppConnect - Open New world that is Connected by Applications

http://appconnect.starpl.com

내가 만든 HTML 파일을 iPhone/iPod touch에서 보자.

2009-05-21T01:24:22+09:00

Professional iPhone and iPod touch Programming: Building Applications for Mobile Safari

1. Introducing the iPhone and iPod touch Development Platform

앞서 소개한 Mobile Safari의 제한과 한계 표에도 나와있듯이
아이폰/아이팟터치의 로컬파일 시스템은 접근 불가능합니다.

따라서 다른 컴퓨터에서 웹페이지를 작업할 수 밖에는 없는데요.
만들어낸 웹페이지를 아이팟터치에서 보려고
매번 수정할 때 마다 웹 호스팅 계정에 FTP로 올려서 본다면 골치아파지겠죠>_<.
이런 경우, 무선공유기를 이용하고 있다면 모든 것은 OK~

PC사용자라면 APM이나 Aptana 등을 설치하여 웹서버를 만들거나,
MAC사용자라면 간단한 클릭 몇 번으로 아이팟터치에서 접근할 수 있는 웹서버를 만들 수 있습니다.

시스템 환경설정 / 인터넷 & 네트워크 - 공유 / 웹 공유 항목에 체크

이렇게 같은 공유기 안에 있는 외부 기기로부터 내 컴퓨터에 접근할 수 있는 주소가 만들어졌습니다.

실제로 아이팟터치로 위의 주소를 들어가보니 다음과 같은 페이지가 열렸습니다.

http://192.168.0.7/

http://192.168.0.7/~mkyoon/

위의 페이지가 실제로 위치하고 있는 곳은 다음과 같습니다.

사용자 컴퓨터의 웹사이트 (http://192.168.0.7/) : /라이브러리/WebServer/Documents
개인 웹 사이트 (http://192.168.0.7/~mkyoon/) : /사용자/맥계정이름(mkyoon)/사이트

테스트로 맥북에 (/사용자/계정이름/사이트) 테스트 페이지를 만들어 보았습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
   <title>테스트입니다</title>
   <link type="text/css" rel="stylesheet" href="lib/iui.css" />
   <style type="text/css">
      body { font: x-large Applegothic; text-align: center; }
   </style>
</head>
<body>
   테스트입니다.
</body>
</html>

Mobile Safari의 제약과 한계

2009-05-20T23:46:57+09:00

Professional iPhone and iPod touch Programming: Building Applications for Mobile Safari

1. Introducing the iPhone and iPod touch Development Platform

[표] 자원의 제약 (Resource Constraints)

자원(Resource)	한계(Limitation)
다운로드 된 텍스트 자원(HTML, CSS, Javascript 파일)	10MB
JPEG 이미지	128MB (all JPEG images over 2MB are subsampled - decoding the image to 16x fewer pixels)
PNG, GIF, TIFF	8MB
움직이는 GIF	2MB를 넘지 않을 경우에만 움직임. 넘는 경우 첫 프레임만 보임.
스트리밍되지 않는 미디어 파일	10MB
PDF, Word, Excel 문서	30MB (넘는 경우 굉장히 느려짐)
자바스크립트 계층과 객체 할당(stack & object allocation)	10MB
자바스크립트 실행	5초 (최상위 함수의 실행 시간이 5초가 넘어갈 경우 try/catch 에서 catch가 호출됨)
Mobile Safari 새창열림	8페이지

[표] 지원되지 않는 기술 (Technologies not Supported by iPhone/iPod touch)

영역(Area)	지원되지 않는 기술
웹 기술	플래시, 자바 애플릿, SOAP, XSLT, SVG, 기타 플러그인 설치 등
모바일 기술	WML
파일 접근	로컬 파일 시스템 접근
텍스트 상호작용	텍스트 선택, 잘라내기, 복사, 붙여넣기(OS 3.0 에서는 가능)
embedded video	In-place video (tapping and embedded element will put iPhone/iPod touch into video playback mode)
보안	Diffie-Hellman protocol, DSA keys, self-signed certifications, custom x.509 certificates
자바스크립트 이벤트	마우스와 키보드에 관련된 몇가지 이벤트
자바스크립트 명령어	showModalDialog(), print()
북마크 아이콘	.ico 파일
HTML	input type="file", tool tips
CSS	Hover 스타일, position: fixed

처음 들어보거나 모르는 기술들이 많네요.
지원되지 않는 마우스와 키보드에 관련된 이벤트는 Chapter 5에서 계속됩니다.

Mobile Safari의 손가락 동작

2009-05-20T23:41:09+09:00

Professional iPhone and iPod touch Programming: Building Applications for Mobile Safari

1. Introducing the iPhone and iPod touch Development Platform

1. 손가락 동작 (Finger Gestures)

아이폰/아이팟터치에서 사용할 수 있는 손가락 동작은 다음과 같습니다.

동작	결과	웹페이지	어플리케이션
누르기(Tap)	마우스 클릭과 일치합니다. 선택/실행입니다.	Yes	Yes
끌기(Drag)	화면이 Viewport 안에서 이동됩니다.	Yes	Yes
밀어치기(Flick)	드래그와 다른 점은 재빠른 '튕김'이라고 해야할까요. 스크롤이 생기는 페이지나 리스트를 빠르게 스크롤합니다.	Yes	Yes
두번 누르기(Double-tap)	중앙 부분으로 약간 확대합니다. 확대한 후 또 두번 누르면 약간 축소가 됩니다.	Yes	No
벌리기(Pinch Open)	두 손가락으로 벌려주면 그만큼 확대가 됩니다.	Yes	No
좁히기(Pinch Close)	두 손가락으로 좁혀주면 그만큼 축소가 됩니다.	Yes	No
길게 누르기(Touch and hold)	길게 누르면 표 아래 스크린샷과 같은 풍선이나 돋보기 등을 보여줍니다. 웹 페이지에 있는 그림일 경우 저장여부를 체크합니다.	Yes	No
두 손가락으로 스크롤(Two-finger scroll)	스크롤이 생기는(overflow: auto, scroll) 요소나 IFRAME 안에 있는 내용을 스크롤합니다.	Yes	Yes

2. 손가락은 마우스가 아니다.

저자는 위의 정의를
머릿 속에 잘 안들어가더라도 그냥 집어넣으라고(drill into your consciousness) 말하고 있습니다.
위의 손가락 동작(Finger Gestures) 표를 봐서도 알겠지만 마우스 이벤트와는 상당히 다른 점이 많습니다.
hover(마우스 오버) 동작이나 오른쪽 클릭도 불가능하죠.

손가락으론 정교한 마우스의 움직임을 기대하기가 어려운 것도
손가락과 마우스가 다를 수 밖에 없는 이유 중 하나겠지요.
발가락만한 손가락을 가진 사람도 쉽게 이용할 수 있는 인터페이스가 그래서 더욱 중요하겠습니다.

Safari on iPhone / iPod touch (Mobile Safari) 시작합니다.

2009-05-07T23:20:38+09:00

Professional iPhone and iPod touch Programming: Building Applications for Mobile Safari

1. Introducing the iPhone and iPod touch Development Platform

(X)HTML, CSS, 그리고 약간의 JavaScript를 할 수 있는 제 관점에서
위의 책을 바탕으로 앞으로 블로그에 정리하려고 합니다.

참고로 제가 가지고 있는 기기는 iPod touch 2세대 (버전: 2.2.1) 입니다.
혹시 iPhone을 사용하고 계신 분~ 싸게싸게 저에게 파는 것은 어떠신가요..-_-;쿨럭

사파리를 실행시키면 다음 화면을 볼 수 있습니다.

1. 생김새 (User Interface)

- Status bar : Wi-Fi, 시계, 배터리가 있는 부분입니다.
- URL bar : 웹페이지의 제목(TITLE), 웹페이지 주소, 검색창이 있는 부분입니다.
- Viewport : 웹페이지가 나오는 분입니다. 세로형(Portrait), 가로형(Landscape) 모드가 있습니다.
- Toolbar(Button bar) : 뒤로, 앞으로, 책갈피 추가, 책갈피 목록, 여러창 보기 버튼이 있는 부분입니다.

2. 설정 (Settings)

아이팟터치의 설정에서 사파리를 선택하면 다음과 같은 항목들을 볼 수 있습니다.

웹 관련 개발자나 맥과 윈도우즈용 Safari를 써보신 분이라면 아시겠지만,
Safari는 Webkit 엔진을 바탕으로 만들어진 브라우저입니다.
(구글 Chrome 브라우저도 똑같은 Webkit 엔진을 사용하고 있습니다.)

하지만 Mobile Safari는 같은 Safari 브라우저이기는 하지만 보통 PC에 깔리는 브라우저와는 조금 다릅니다.
모든 CSS와 JavaScript가 가능한 것 은 아니며,
사용자가 관리할 수 있는 설정 항목도 위의 4가지가 다 입니다.
(자바스크립트, 플러그인, 팝업차단, 쿠키허용)

재밌는 설정항목이 맨 마지막에 있네요.
이 '개발자용'을 누르면 '콘솔 디버그'를 킬 것인지 물어봅니다.

콘솔 디버그를 키면 사파리는 다음과 같은 모습을 보여줍니다.

웹페이지에 오류가 있는지, 있다면 어떠한 오류인지 알려주는 Console Debug bar 입니다.
이것도 Safari의 Web Inspector를 상상하시면 안됩니다.

오류가 있는 http://weconize.com 블로그에 들어가 보았습니다.

HTML, JavaScript, CSS 세가지 항목으로 몇번째 줄에 어떠한 오류가 있는지 알려줍니다.
이것도 오류메시지가 여러줄로 넘어가면 쩜쩜쩜(...)으로 생략하고선 더 자세하게 보여주지도 않습니다.-_-;
그래도 오류 없이 웹페이지를 만드는데에 도움이 되겠지요 ^^

웹 접근성을 고려한 신기술 콘텐츠 제작기법

2009-05-07T17:50:25+09:00

정보통신 접근성 향상 표준화 포럼에서
'웹 접근성을 고려한 신기술 콘텐츠 제작기법
- JavaScript, Flex, Flash를 중심으로 -'을 발표했습니다.

http://iabf.or.kr/Pds/ReportView.asp?board=report&bseq=2867
위 링크에서 해당 PDF 자료를 다운 받을 수 있습니다.
예시 그림과 함께 설명이 자세하네요.^^

목차입니다.

I. 리치 인터넷 애플리케이션의 접근성

연구목적
RIA 콘텐츠와 웹 접근성
WAI-ARIA 동향
RIA 콘텐츠 접근성 평가방법
웹 접근성 관련 사이트

II. 접근성 있는 Javascript 제작기법

Javascript 개요
- DOM과 DOM 스크립트
- Javascript 프로그램의 확장
웹 접근성과 Javascript
- Javascript에 관한 오해
- 접근성 있는 Javascript 코딩 방법
Javascript 접근성 지원 프로그래밍 지침
- 대체 텍스트 제공
- 키보드의 이용
- 반응시간의 조절
- 온라인 서식 구성
- 신기술의 사용
- 표준의 준수
Javascript 프로그램의 접근성 평가방법
- II. 3번과 동일
Javascript 애플리케이션 콘텐츠 구현 예
- 네비게이션 제작기법
- 접근성을 고려한 입력서식 제작기법
- 효과적인 UI 제작기법
- Javascript 대체 기법

III. 접근성 있는 Flex 제작기법

Flex 개요
웹 접근성과 Flex 콘텐츠
- Flex 버전
- 접근성 있는 Flex 콘텐츠 제작
Flex 콘텐츠 접근성 기술 지침
- 대체 텍스트 제공
- 자막 제공 방법
- 색상과 접근성
- 키보드의 이용
- 읽는 순서의 설정
- 플러그인 정보 제공
- 접근성 지원 컴포넌트의 사용
Flex 콘텐츠의 접근성 평가방법
- III. 3번과 동일
접근성 지원 Flex 컴포넌트
Flex 애플리케이션 콘텐츠 구현 예
- 접근성을 고려한 입력서식 제작기법
- 접근성을 고려한 차트 제작기법
- 사용자 UI를 고려한 제작기법

IV. 접근성 있는 Flash 제작기법

Flash 개요
웹 접근성과 Flash 콘텐츠
- 접근성 있는 Flash 콘텐츠 제작
- Flash 콘텐츠의 임베딩
Flash 접근성 지원 프로그래밍 지침
- 대체 텍스트 제공
- 자막 제공 방법
- 색상과 접근성
- 깜빡거리는 객체 사용 제한
- 키보드의 이용
- 접근성 지원 애니메이션
- 비디오/오디오 컨트롤
- 읽는 순서의 결정
- 구조의 제공
- 대체 페이지 제공
- 플러그인 정보 제공
- 접근성 지원 컴포넌트의 사용
Flash 콘텐츠의 접근성 평가방법
- IV. 3번과 동일
Flash 콘텐츠 구현 예
- 내비게이션 메뉴
- 사용자 UI를 고려한 콘텐츠

웹 접근성 향상을 위한 국가표준 기술 가이드라인

2010-08-19T14:03:51+09:00

정보통신 접근성 향상 표준화 포럼에서

3월 17일, 웹 접근성 향상을 위한 국가표준 기술 가이드라인을 발표했습니다.

~~http://www.iabf.or.kr/News/NoticeView.asp?board=notice&pg=&bseq=2860~~
http://www.wah.or.kr/Guide/valuation.asp

위의 링크에서 해당 pdf 문서를 다운 받을 수 있습니다.
예시와 함께 설명이 자세하네요.

각 항목별 올바른 적용사례만 뽑았습니다.

인식의 용이성(Perceivable)의 올바른 적용사례
- 이미지에 적절한 대체 텍스트 제공
- 배경 이미지에 적절한 대체 콘텐츠 제공
- 동영상, 음성 등에 대체 수단(자막, 원고 또는 수화)을 제공
- 색상이 아닌 패턴이나 명암으로 정보를 인식
운용의 용이성(Operable)의 올바른 적용사례
- 서버측 이미지 맵에 대한 해당 내용 및 기능을 사용할 수 있는 대체 콘텐츠 제공
- 프레임에 대한 적절한 제목 제공
- 깜빡임이 전혀 없는 웹 사이트
- 키보드만으로 모든 기능 이용 가능
- 건너뛰기 링크 제공
- 반응시간 콘텐츠에 대한 시간제어 기능 제공
- 새 창을 사용하지 않거나 사용자에게 미리 알림
이해의 용이성(Understandable)의 올바른 적용사례
- 테이블 내용 이해를 위한 정보 제공
- 테이블 제목과 내용 구분 가능
- 페이지별 간단 명료한 제목 제공
- 콘텐츠의 논리적인 순서
- 온라인 서식에 대한 적절한 레이블 제공
기술적 진보성(Robust)의 올바른 적용사례
- 애플리케이션의 자체적 접근성 또는 대체 콘텐츠 제공
- 자바스크립트 없이도 주요 기능의 이용 가능

Webkit, Chrome(2.0.169.1)의 User Agent Stylesheet (legend)

2009-05-07T17:49:49+09:00

오늘 크롬을 켰다가 놀랐습니다.

보이십니까?
보이지 말아야 할 legend가 나오는 바람에 화면이 깨지는 모습을..
(예를 Daum으로 들었을 뿐, Daum에 악감정은 없습니다 ㅠㅠ)

이건 Webkit에서 잠시 보였던 현상과 동일합니다.

동일하죠?

Chrome이 Webkit 엔진을 쓰면서
Webkit 에 있었던 문제를 Chrome이 그대로 가져오게 되는군요.

Webkit의 최신 버전에선 이미 고쳐졌습니다.
이제 Chrome이 어서 고쳐지기만을 바래야죠.

위와 같은 현상은 Webkit이 기본적으로 적용하고 있는 User Agent Stylesheet에서
신기한 속성을 적용하면서 부터 시작됐습니다.

legend  { display: block !important; }

User Agent 의 스타일 시트에서 !important 속성을 넣다니요-_-
CSS 2.1 Spec 에서 명시하고 있는 스타일시트의 적용 순서는 다음과 같습니다.

user agent declarations
user normal declarations
author normal declarations
author important declarations
user important declarations

스타플에도 같은 문제가 있었기에
제가 만든 CSS에서 다음과 같이 넣어주었습니다. (3. author important declarations)

 legend { display: none !important; }

그런데도 아주 정확히 legend가 나타나네요. 하하-_-;

결국

 legend { 
    display: none;
    position: absolute; 
    visibility: hidden; }

요렇게 꼼수로 넣어주고 급한 불은 껐습니다. 하하-_-;

IE8 Love Developer - 개발자가 주목할 IE8 세미나 후기

2009-03-12T21:20:19+09:00

IE8 ♥ Developer
- 개발자가 주목할 Internet Explorer 8
세미나에 다녀왔습니다.

행사장에 올라가자마자 내 콧속을 간지럽히는 팝콘냄새에
등록이고 뭐고 후다닭 해치우고 바로 팝콘 줄에 섰습니다.+_+

하하 팝콘 캐릭터 귀여웠어요~
POPCON - http://blogs.msdn.com/popcon

Light & Delicious POP & CONference.
팝콘처럼 고소하고 재미있는 이야기와 정보가 가득한 개발자용 비디오 블로그.
라고 설명이 되어있네요.+_+

사람은 많은데 자리는 없어서
간이의자를 몇개 더 두었는데도
계단에 앉고 복도에 서서 듣는 분들이 꽤 많았습니다.ㅠㅠ
저도 자리를 찾다찾다 못해 프로젝터 바로 뒤에서 봐야했어요~
분위기도 어수선~ 이점은 좀 아쉽더라구요^^

1. 개발자가 IE8과 함께 일하는 방법 - 김대우

가장 눈이 번쩍 했던 순간입니다.+_+
스크립트 처리 속도가 저렇게 바뀌었다고 하네요~ 와우!
타사 브라우저들과 비교해서는 어떨지 궁금하지만
그래도 엄청난 개선을 이루어냈다는 점에서는 박수를 보냅니다.^^

쉬는시간에 보여준 영상에서도 보여주었지만
타사 브라우저들과의 외국 유명 사이트 로딩 속도에서 밀리지 않더군요.

게스트로 나오신 엘레콤의 김영일님+_+ Expression Web 시연 장면입니다.
그동안 Expression Web이 어떤 툴인지 궁금했었는데
이제서야 그 모습을 보게 되는군요+_+
우리나라에도 Expression Web 사용자 모임이 있었다니 놀랐습니다+_+

설문지 제출하고 받은 책자
- 웹 표준에 준거한 웹 접근성 및 CSS 호환성 검수를 위한 가이드
에서도 Expression Web 스크린샷과 함께 설명이 나와있네요.^^

2. 웹표준 개발자가 IE8에서 작업할 때 필요한 고려사항 - 정찬명

http://naradesign.net/wp/2009/03/12/670/

역시 눈이 번쩍 뜨이는 세션입니다.

아직도 IE5를 사용하고 있는 사람이 0.03%를 차지하고 있었다니..
조금 무서웠습니다-_-;

이 밖에도 사진에는 담지 못했지만
IE8에서 하위 호환성을 이끌어 낼 수 있는 방법과
IE 버전별 스타일시트를 따로 적용시키는 방법에 대해
자세한 예제와 함께 설명을 들을 수 있었습니다. +_+)=b

3. Ajax 개발자가 IE8에 대해 알아야 할 모든 것 - 강규영

http://alankang.tistory.com/215

제가 자바스크립트는 잘 모르는지라;
이해한 부분만 꼽자면 다음과 같습니다.

IE8에 Developer Tool이 생기면서 자바스크립트 디버깅이 좀더 쉬워졌드랬죠.
이와함께 Firefox-Firebug에서만 쓰이던 console.log도 가능해졌습니다.+_+

게다가 Element.prototype이 가능해지면서
일일이 다시 불러오거나 담지 않아도 prototype안에 계속 갖고 있게 되었습니다+_+

그리고 Selector+_+
CSS의 selector를 그대로 쓸 수 있게 되었다고 하네요!
Prototype에서는 $$를 써서 '느리고 힘들게' 가져오던 것을 Native로 흡수했으니
속도면에서 상당히 빨라질 것 같습니다+_+
타사 브라우저들의 99%의 셀렉터 지원보다는 절반도 안되는 40%대의 지원이긴 하지만
(왠지 가상클래스와 관련있어 보입니다.)
그래도 그게 어디입니까 ㅠㅠ 기본적인 셀렉터라도 쓸 수 있을 것 같아서 무쟈게 기쁩니다.

그리고 제가 이뻐라~하는 IE Tester도 시연장면에 나왔습니다.^^

중간에 Selenium Functional Test Runner를 돌리다 나오게된 IE8 에러메세지.
IE8의 특기! 오류가 있어도 탭은 사라지지 않는다+_+를 강조하시며 재미있게 넘어가시는 그 센스!
최고였습니다. ㅋㅋ

4. IE8에서 올바른 브라우저 확장기능 및 ActiveX 활용법 - 정성태

사실- 이 세션은 들어도 이해를 못하겠고
ActiveX는 이름만 들어도 괜히 미워보이는지라(기술은 미운게 아닌데ㅠㅠ) 저도 잘 모르겠습니다-_-;

다만 신기했던건
IE8에서 탭을 하나하나 띄울 때 마다 실행 파일이 하나씩 생기다가
4개부터는 첫번째 탭에 속해져 버리는 현상입니다.

예전에 IE8 베타를 쓰면서 탭 하나가 죽었더니
전혀 상관없는 다른 탭도 복구되었다는 말풍선이 나왔던 이유가 이거었나 봅니다.

아무튼 신기한 IE입니다.

...

모든 세션이 끝나고
두구두구두구두구두구두구두.. 구두. (응?)
경품추첨 시간이 왔습니다^^

중간 쉬는시간에 하코사 건대스터디에서 함께 공부하는 미옥님을 만났거든요^^
먼저 가야 한다며 번호표를 맡기고 가시는 바람에
331번(내꺼)과 599번(미옥님꺼) 두개를 갖게 되었습니다.

그런데...
첫번째 부터 599번이 당첨되었어요 //ㅂ//꺄하

두근반 세근반~
너무나도 귀여운 인형탈과 강규영님을 바로 앞에서 뵈니 그냥 정신은 아득~

부끄러워서 서둘러 돌아가는데
목소리 이쁘신 사회자 누님이 부르십니다 ;ㅁ;

"여기 팝콘돌이와 사진을 찍으셔야 합니다.^^"
"으에에에에-? 네!?"

ㄷㄷㄷ.
장내 웃음이 터져나오고-_-; 뻘쭘하게 돌아서서

네네.. 찍히고야 말았습니다.
거의 500명은 넘어뵈는 사람들 앞에서 어색한 웃음과 함께-_-;

그.그래도
팝콘돌이는 너무 귀여웠어요 ㅠㅠ)=b
강규영님과 함께 사진을 찍다니 영광이었습니다. ㅠㅠ)=b 으흐흐흐

전리품입니다.

받은 경품책은 미옥님께 전해드렸어요^^

이메일 보내기 mailto 문법 - MailTo Syntax

2009-05-07T17:49:30+09:00

<a href="mailto:메일주소"> 를 사용하여
사용자로 하여금 이메일 폼을 쉽게 띄울 수 있다.

그런데 여기 메일주소 뒤로 덧붙여서
제목, 내용, 함께받는이 등등 원하는 항목도 추가 가능하다.+_+

원문링크 : http://www.ianr.unl.edu/internet/mailto.html

예) 제목과 함께 이메일링크 걸기 - MailTo with Subject

<a href="mailto:mkyoon@mkyoon.com?subject=메일 제목입니다.">

==========
여태 난 왜 몰랐을까-_-;

IE8 Love Developer - 개발자가 주목할 Internet Explorer 8

2009-02-27T14:46:01+09:00

Internet Explorer 8 (IE8) 을 고려하고 있는 개발자들을 위해

마이크로소프트에서 세미나를 개최합니다.

등록하기 : http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032406339&Culture=ko-KR

2009년 3월 11일 수요일 오후 1:30 - 오후 6:00
코엑스 컨퍼런스 센터 401호
서울 강남구 삼성동

개발자가 IE8과 함께 일하는 방법 - 김대우

IE8에 대해서 개발자가 알아야 할 전반적인 내용들을 설명하고, IE8 적용사례 및 적용가이드에 대한 내용들에 대해서 알아 봅니다.

웹표준 개발자가 IE8에서 작업할 때 필요한 고려사항 - 정찬명

IE8의 향상된 웹 표준 지원을 UI 개발자들이 실무에 어떻게 활용할 것인지 고민하고 그 결과를 공유하는 세션 입니다.
IE6~7에 최적화된 웹 사이트와의 호환성을 어떻게 유지할 것인지도 다룹니다.

Ajax 개발자가 IE8에 대해 알아야 할 모든 것 - 강규영

IE8의 새로운 기능, 타 브라우저와의 호환성, 개발자용 도구, 성능 개선 등 IE8과 관련하여 Ajax 개발자가 알아야 할 주요 이슈들을 소개합니다.

IE8에서 올바른 브라우저 확장기능 및 ActiveX 활용법 - 정성태

IE8에서 브라우저 확장 기능을 구현하기 위해서 알아야 할 변경 사항인 Loosely Coupled IE와 BHO 그리고 이와 관련된 Tool Bar 적용 사례 및 올바른 ActiveX 활용법에 대한 내용을 다룹니다.

===========

스타플에도 IE8 사용자가 꾸준하게 있는 편이고
아직 완벽하게 동작하고 있지 않은 상황이라 관심이 가는 세미나 입니다.
IE8 Developer Tools도 CSS상속을 어떻게 가져가는지 적나라하게 보여줘서
도움이 많이 되고 있기는 합니다만..
이번 세미나에서 좀 더 편하게 웹을 만들어갈 수 있는 방법을 찾길 기대해 봅니다.^^

세번째 웹 표준의 날 후기 - 웹표준을 넘어서

2009-02-17T16:15:37+09:00

2009년 2월 7일 토요일 오후 12시 30분.
CDK와 한국정보문화진흥원에서 개최한
"웹표준의 날 - 웹표준을 넘어서" 세미나에 참석했습니다.

한국정보문화진흥원은 강서구 등촌동에 있습니다.
8호선 석촌에서 천호역으로,
5호선을 타고 여의도(강바닥>_<)와 목동을 지나 화곡(야호! 처음보는 동네)에서 내려 마을버스를 타고 도착했습니다.

한국정보문화진흥원1층에 들어가니
여러 장애인을 위한 컴퓨터 보조기기들을 전시해 놓고
실제로 사용해 볼 수 있도록 한 체험관이 있었습니다.

시간이 많았다면 다 경험해 볼 수 있었을텐데-
세미나 시간에 촉박하게 도착한지라, 다음 기회로 미루고 2층으로 고고!

입구에서 이름표와 두꺼운 책-'웹 접근성 교육 커리큘럼 개발'을 받았어요.
오페라 스티커와 폰고리도 잘 챙겼습니다.^^

이름표 배부테이블 건너편엔
CDK(http://forum.standardmag.org) 에서 진행되었던
웹표준의 날 이벤트 (http://forum.standardmag.org/viewtopic.php?id=2560) 의 답변 목록이 주루룩~ 붙어있었습니다.
부끄럽지만 제 답변도 걸려 있었어요. //ㅁ// (소중한 '한표' 던져주신 분, 감사합니다ㅠㅠ)

각 타임별로 제가 느끼고 기억하고 싶은 문구만 적었습니다.
자세한 내용은 동영상이나 링크를 눌러주세요~ 발표자 분께서 직접 작성하신 글입니다.

1. 웹 표준을 넘어서 - 정찬명님

http://naradesign.net/wp/2009/02/08/604

+ 웹의 상호운용성
+ 소수를 위한 것이 아닌 모두를 위한 유니버설 디자인 (http://naradesign.net/wp/2007/01/27/111)

2. 웹 표준, 기술의 진정성 - 추지호님

http://www.pageoff.net/883

+ 웹표준의 진정성
+ 영혼을 담는 작업.
+ 소통의 중요성

3. 장차법 시대의 웹 표준 - 장성민님

http://www.jangkunblog.com/wp/2009/02/08/146

+ 장차법 : 장애인 차별금지 및 권리구제에 관한 법률
+ 웹 접근성은 기획자, 디자이너, 개발자 모두가 함께 고민해야
+ 스스로를 과대평가하라.
+ 마음을 담아라.

4. 브라우저 업그레이드 캠페인 - 조현진님

http://resistan.com/savethedeveloper

+ 누구의 탓도 아닌 바로 우리 모두의 몫.
+ 나부터 달라지자.

5. 웹 표준 경진대회 & CSS Playground - 홍윤표님

http://mydeute.com/txp/article/134/KWSD3rd

+ http://award.standardmag.org (2회 : 2009년 5월 1일)
+ http://cssplayground.net

6. 웹 접근성 품질 마크 인증제도 - 한정기님

http://www.iabf.or.kr/Lab/Certification/Certified.asp

+ 필수 마크가 되는 그날까지.

7. 웹 접근성 평가툴에 대한 의견 - 문준기님

http://www.iabf.or.kr/Lab/Kadowah/Kadowah.asp

+ KADO-WAH는 넘사벽. 도움말을 숙지하여 빠른 시일내로 꼭+_+
+ 스크린리더를 처음 보았어요. 제 모습도 (비록 등이지만) 찍혔습니다. 으헤헷!

사진출처 : 봄눈님 블로그 - 웹 뒤에 숨은 'Web' http://www.pageoff.net/882

8. 웹 표준, 선배에게 질문하세요.

이 곳에 모인 사람들의 열정이 단연 돋보였던 시간이었습니다.
+ IR 기법의 장단점과 에디터 응용사례.
+ 웹퍼블리셔의 Position, 업무의 범위, 갖춰야 할 태도.
+ 국내 웹표준 커뮤니티의 부족함과 자료의 한계.

그리고 가장 피부에 와닿았던 질문이 있었습니다.
+ 게임과 같은 타겟층이 분명한 서비스도 장애인을 위한 웹 접근성에 신경쓸 필요가 있을까?
듀트님의 자료중 한페이지가 제 머리를 울리더군요.

출처 : 민간부문의 장애인 웹 접근성 제고 세미나 : 조직문화 조성사례
웹 접근성 재고를 위한 조직 문화 조성사례_홍윤표.pdf
http://www.iabf.or.kr/Pds/TrendView.asp?board=trend&pg=1&bseq=2813

웹으로 만들어 브라우저 안에 띄우는 것이라면.
당연한 말인 것을요. 잊고 있었나 봅니다.

이름표 뒤에 적혀있던 번호로 경품추첨을 마지막으로 (80을 속으로 그리 외쳤건만ㅠㅠ)
세번째 웹표준의 날 행사는 막을 내렸습니다.

많은 것을 배우고 깨우친 시간이었습니다.
앞으로 이런 행사 자주 있었음 좋겠습니다.^^

맥 오에스텐 레오파드(Mac OSX Leopard) 설치 성공!

2009-05-07T17:49:05+09:00

입맛만 다시고 있던

바로 그그그그그그 레오파드를

드디어 깔았습니다+_+

액정 상태는 노코멘트. 가슴만 아려옵니다.

Dock의 화려한 모습도 +_+아주그냥 멋지네요.

제가 가지고 있는 맥북은 아주 초창기의 그것.

Apple Macbook MA254KH/A[Napa]

http://starpl.com/mkyoon/10010085

그렇습니다. 후덜덜한 CPU와 RAM으로

레오파드를 감히 써보겠다고 돌려보았는데요.

쓸만하네요.

부팅이 좀 늦다거나 Dock 나올때 마다 버벅-_- 거린다거나 하는 점은

뭐 봐줄 수 있을...

다행히 타이거에서 쓰던 부트캠프 윈도우도 별다른 재설정 없이 잘 돌아가고

윈도우 모든 기능도 정상작동하는 것을 확인했습니다.

설치하는데 전혀 어려움이 없었던 나의 (후덜덜한) 맥북

새로 태어난 것 같이 두근두근하네요+ㅂ+.

=======

결국 설치한지 한시간 후.

메모리를 지르고야 말았습니다-

미처 이 맥북이 RAM 2G까지 밖에 안되는 초창기의 그것이라는 걸 망각한채

2G 두개씩 총 4G를 질러버렸더랬죠.

1. 두근두근 2G 두개를 나란히 해서 4G 꽂고 부팅해보니

시디롬만 무한반복 돌아갑니다.(부팅시 그것) ;ㅁ;

2. 예전에 쓰던 512M와 2G를 같이 꽂고 아무리 전원을 눌러도

반응이 없습니다.ㅠㅁㅠ

꿈의 듀얼채널 4G 맥북의 환상은 안드로메다로...

OTL.

세번째 웹표준의 날

2009-01-22T20:12:07+09:00

첫번째 웹표준의 날 행사는 2006년 10월 28일에 있었습니다.
http://wiki.standardmag.org/kws1day

두번째 웹표준의 날 행사는 2006년 11월 30일이네요.
http://wiki.standardmag.org/kws2day

거의 2년만에 가지게 된
세번째 웹표준의 날 행사가 2009년 2월 7일에 한국정보문화진흥원에서 열립니다.
무슨일이 있어도 꼭 참석하고 싶어요^^
http://www.onoffmix.com/e/deute/613

세번째 웹 표준의 날

본 이벤트는 무료이벤트 입니다.
개최일시	2009년 02월 07일 12:30	장소	접수현황
접수기간	2009년 01월 13일 ~ 2009년 02월 05일	한국정보문화진흥원 2층 세미나실 [약도보기] 닫쳐. 마우스 오른쪽 버튼을 누르시면 끝마칩니다 0m 65m 거리재기 면적재기 영역확대 상대거리 총거리 도보 자전거 마우스 오른쪽 버튼을 누르시면 끝마칩니다	정원 : 106명 (전체 106명 등록, 96명 대기) 자원봉사 : 6명 (6명 참석, 18명 대기) 신청자 : 100명 (100명 참석, 78명 대기)

세번째 웹 표준의 날 (부제: 웹표준을 넘어서)

일시 : 2월 7일 토요일 12시 30분 ~ 18시
장소 : 한국정보문화진흥원 2층 세미나실 (찾아오시는길 : https://www.kado.or.kr/Index.aspx?PortalID=ko&MenuID=0509121402498910)
다음 지도, 네이버 지도

주최 : CDK, ClearBoth
후원 : 한국정보문화진흥원

발표순서

12:30 ~ 13:00 시작
13:00 ~ 13:30 웹 표준을 넘어서 - 정찬명(http://naradesign.net/wp/)
13:30 ~ 14:00 웹 표준, 기술의 진정성 - 추지호(http://www.pageoff.net/)
14:00 ~ 14:30 장차법 시대의 웹 표준 - 장성민(http://www.jangkunblog.com/wp/)
14:30 ~ 14:50 20분간 휴식
14:50 ~ 15:10 브라우저 업그레이드 캠페인 - 조현진(http://resistan.com/)
15:10 ~ 15:30 웹 표준 경진대회 & CSS PLAYGROUND - 홍윤표(http://mydeute.com)
15:30 ~ 15:50 웹 접근성 품질 마크 인증제도 - 한정기(KADO)
15:50 ~ 16:10 20분간 휴식
16:10 ~ 16:30 웹 접근성 평가툴에 대한 의견 - 문준기(KADO)
16:30 ~ 18:00 웹 표준... 선배에게 질문하세요.[발표자 + 조훈(http://hooney.net/), 신현석(http://hyeonseok.com), 윤좌진(http://www.boochim.net/)]

참가비 : 없음

스타플 홍보합니다. 스타플로 오세요^ㅁ^*

2009-05-07T17:48:30+09:00

밤하늘의 별을 주는 스타플에서 (X)HTML/CSS를 담당한 mkyoon입니다.
안녕하세요^^ 스타플을 소개하겠습니다.

스타플은 실제 별 관측 데이터를 이용해서, 정말 존재하는 별 중에 하나를 나에게 준답니다.
나의 별에다가 나의 이야기를 담고, 우주를 여행하며 사람들도 만나는 곳 입니다.

나만의 별을 찾아라!

회원가입을 누르면, 성향 테스트를 거쳐 나만의 별을 받게 됩니다.
그림으로 푸는 성향테스트가 독특하고 재미있어요.

나를 담는 별

별을 방문한 모습입니다. 별 위에 보이는 바가 타임라인이라고 하는 건데,
타임라인에 추억과 일상, 생각 들을 기록할 수 있습니다. 글을 쓸 때 시간을 설정하거나, 첨부사진의
촬영시간을 적용하면 그 때 그 시간의 타임라인에 글이 쓰여져 내 인생의 히스토리를 만들 수 있어요.
블로그를 가지고 있다면, 블로그를 타임라인에 등록하여 새 글이 자동으로 타임라인에 담기게 할 수도 있어요.

나의 취향대로 꾸미는 나만의 별

여러 별들의 모습입니다. 스타플에는 나만의 별을 꾸밀 수 있도록 다양하고 예쁜 아이템과 위젯들이 많습니다.
아이템은 별가루로 구입할 수 있는데, 별가루는 처음에 가입하면 왕창 주는데,
다 써 버려도 스타플 사용하다보면 저절로 계속 쌓이더라구요. ^^

다른 별들을 만날 수 있는 공간, 별지도

별지도에 가보면 많은 별들이 있습니다. 저 별들에도 다 사람들이 살고 있다고 생각하니 신기하네요.
별지도 위의 상단메뉴를 클릭하면
다른 별들이 남긴 기록들을 볼 수가 있는데요, 말풍선을 클릭하니 그 별로 방문이 되는군요.

똑똑한 소식 배달부 알림이

별지도 왼쪽에 알림이를 통해 나의 별친구들의 새 기록과 댓글, 생일 등의 소식들을
바로 바로 알려줘서 알림이에서 손을 땔 수가 없더라구요.
또, 관심 가는 별이 있으면 관심별로 등록해 알림이로 쉽게 받아 볼 수 도 있답니다.

너무 너무 이쁘고 개성 넘치는 스타플!
나만의 별을 받고 싶으신 분들, 나의 이야기를 담을 특별한 공간을 찾으신 분들께
꼭 추천해드리고 싶습니다.

나의 별임을 인증하는 별증서 이벤트도 진행 중이니, 한번 방문해 보세요.

★스타플 방문하기★

브라우저 업그레이드가 한 사람을 살립니다. - Save the Developers! Upgrade your Browser

2008-12-09T19:49:40+09:00

http://www.savethedeveopers.org

이곳. 기억하시는지요~
(지금은 아예 Microsoft Internet Explorer 페이지로 redirecting 해놓았네요.)
한국어 버전이 있었습니다 ㅠㅠ감격

http://resistan.com/savethedeveloper

브라우저 업그레이드가 한 사람을 살립니다.

처절하지 않습니까.
살려주세요 ㅠㅅㅠ

내 별은 여기 있대요. - 스타플 내별 알림 위젯

2008-12-02T17:43:02+09:00

별자리 : 에리다누스
찜한 날짜 : 2008년 2월 4일
등급 : 15.59
위치 : 오른쪽 삼각형 가운데
방문자 : -_-;
그래서
마우스를 올리면 내 별로 갈 수 있어요 ^ㅁ^*

웹월드 컨풔뤈스!!!!! WebWorld Conference 2008!!!!!

2008-11-28T17:47:44+09:00

가고싶다!!! 보고싶다!!! 듣고싶다!!!!

대한민국을 대표하는 WEB 분야 NO. 1 컨퍼런스 - 웹월드 컨퍼런스 2008에 당신을 초대합니다!

'웹'은 빠른 속도로 진화하고 있습니다. 진화라기 보다는 파괴라는 말이 더 어울립니다. 더구나 플랫폼으로서의 '웹'을 주창하는 웹 2.0 패러다임을 기반으로 지속적인 혁신이 더욱 가속화되고 있습니다.

이런 환경에 적응하고 더 나아가 주도권을 잡기 위해서는 한 분야의 '나무'가 아닌 웹 비즈니스의 전체적인 '숲'을 조망해야 합니다. 이에 플루토미디어는 진화하는 웹 비즈니스의 전체를 조망할 수 있는 자리를 마련했습니다.

WEB WORLD CONFERENCE 2008은 현 시점에서 역동적인 웹의 한 단면을 스냅샷으로 찍어, "서비스 전략, 디자인 전략, 마케팅 전략, 웹개발 전략"이라는 4대축으로 살펴 볼 예정입니다.

대한민국 웹 분야를 대표하는 WEB WORLD CONFERENCE 2008이 웹 비즈니스를 고민하는 분들과 2009년 비즈니스 전략을 수립하는 모든 분들께 의미있는 자리가 되기를 기대합니다!

주최 :
일시 : 2008년 12월 2일(화), 3일(수), 4일(목), 5일(금) 10:00 ~ 18:00
장소 : 학동역 건설회관 2층 대회의장(위치 안내) : 2일, 3일, 4일
역삼역 포스틸타워 3층 이벤트홀(위치 안내) : 5일
강사 : 각 분야별 전문가 (총 4일, 36개 세션)

3일(수) - [디자인 전략] 발표자 소개 ▶ 상세 아젠다 내용 보기

한명수 이사 / (주)SK communications

現 (주)SK communications / CDO, 이사
前 (주)INNOIZ interactive / 이사, 아트디렉터
前 (주)FRUM / 아트디렉터
前 (주)FID / 이사, 총괄크리에이티브 디렉터(CCO)
웹진 '스폰지' / 아트디렉터, 디자이너
홍익대학교 시각디자인과. 동대학원 졸업
ACTIVE WIRE 한,일 그래픽 교류전 참여 (아트선재센터, 2001)
디자인그룹 진달래 전시회 '發展' 참여(한전아츠풀센터 갤러리, 2004)
디자인그룹 진달래 전시회 '진달래 도큐멘트02展' 참여(일민미술관, 2006)
페이퍼테이너뮤지움 전시회 '브랜드를 밝히다展' 참여 (디자인하우스, 2006)
스폰지(1997), 삼성문화재단(2001), NATE(2001), 이성표닷컴(2001), 보티첼리(2002), 나이키(2003), 삼성CeBIT2004(2004) 웹사이트 등 온라인프로젝트 진행
web 2.0 기반의 온라인서비스, 어플리케이션 디자인, 브랜딩 등 전반적인 디지털미디어의 경험디자인(experience design) 총괄
www.extra-project.com 운영

[강의]

홍익대학교 영상대학원 '인터랙션디자인' 출강

[수상]

올해의 웹아트디렉터 선정 (월간 웹디자인, 2001)
올해의 웹디자이너 선정 (디자인 정글, 2001)
제2회 조선일보 인터넷대상 디자인부문 수상
북경국제컴퓨터그라픽대전 은상 수상 (1999)

남찬우 랩장 /NHN

現 NHN / CMD. UX디자인센터 / UI Lab
nhn에서 네이버 서비스의 신규. 개편. 선행 프로젝트의 UI&디자인 실무총괄
MANZION interactive Studio / Creative Director
A4 Communication 근무
Graphic ENZO 근무
홍익대학교 대학원. 시각디자인 석사

[수상]

macromedia asia pacific (현.Adobe) . Site of the week 1회
macromedia korea (현.Adobe) . Site of the week 2회
국내외 Design Competition 9회 수상
Webaward Korea : UI Innovation대상 (블로그 시즌2)
Webaward Korea : 커뮤니티부분 (카페 시즌2)

[강의]

Web Creative Director Seminar
Interactive Web Core Seminar

조영국 부장 / 메가존

現 메가존 UX Center 센터장
RIA 기반 프로젝트 컨설턴트 / PM
Uxcenter.tistory.com 블로그 운영

[수상]

2008 국제비지니스대상(IBA) Event Promotion 분야 Finalist 수상(www.visitmix.co.kr)
한국마이크로소프트 차세대 웹 기반 Web UX Solution Builder 최우수 파트너상 수상

[주요 프로젝트]

LGTelecom 고객맞춤컨설팅
한국마이크로소프트 Remix 사이트 구축
LG CNS 현황판 구축
한국마이크로소프트 BI Portal 구축
삼성전자, 안철수 연구소, 현대해상, 한화 등 파트너사와 웹사이트, 어플리케이션 개발

황진원 실장 / 펜타브리드

現㈜펜타브리드 / eIS_HQ eIS 디자인 실 실장
現 국립 서울산업대학교 시각디자인학과 겸임교수
現 명지전문대학교 커뮤니케이션 디자인학과 Web design 출강
홍익대학교 대학원 시각 디자인 전공 석사
前㈜ 엠비쥬얼 제작 총괄이사
前㈜ 탑앤와이즈 E-Creative 사업부 차장
前㈜ 팀인터페이스 UI Design 팀장
前㈜ DIB Web Agency 사업부 팀장

[주요 프로젝트]

SK그룹, SK C&C, 라네즈, 끌레도르, 교보생명, 인천시청, 파란닷컴, 이화여대, 한국은행, 강원랜드, GM 대우, GS25, 닌텐도 DS LITE, 신세계닷컴,연세대 경영대학원 외 150여 웹사이트구축

[강의]

서울산업대학교 시각디자인학과 BI design / 광고 디자인 강의
명지전문대학교 커뮤니케이션학과 Interface Design / Web design 강의

문지환 팀장 / 인터메이저

現 (주)인터메이저 부장 / e디자인팀 팀장
前 JnM 디자인 실장
한양대학교 도시공학과 졸업

[주요 프로젝트]

KB국민은행, KTF, 포스코,현대카드 프리비아, 포스데이타 외 다수 프로젝트 디자인 및 디렉팅
2006~ 현재 인터메이저 R&D/제안/실행 e디자인 총괄 디렉팅

황리건 과장 / Microsoft

現, 마이크로소프트 UX Evangelist
NHN 리치컨텐츠 팀장
연세대학교 컴퓨터과학과 졸업
www.uxfactory.net 블로그 운영

노주환 이사 / BICON Media

現 바이콘 미디어 이사(www.mybicon.com, www.openchronicle.com)
現 밸류어블디자인랩 대표(www.vdlab.com)
e-비즈니스 전략 및 UX 디자인 컨설팅 수행

[저서]

웹 패러다임을 바꾸는 위젯 / 멘토르
웹 2.0 기획과 디자인 / 플로토북
사용하기 쉬운 웹사이트 이렇게 만들어라 / 비비컴

이하영 팀장 / 다음커뮤니케이션

다음 FT전략 TFT
前 다음 UI개발 팀장
前드림위즈 웹개발
서울대학교 의류학과 졸업

금윤정 실장 / 바이널

現 바이널 크리에이티브그룹 디자인실장
VINYL Creative 1팀장
ADN 디자인팀장

[수상]

2007 : raemain (FWA Site of the day)
2006 : wizwid, amoled, cgvimax
(굿디자인웹 2005 대상수상, Webaward 2006 브랜드 부문 우수상 수상)
2006 : santa Fe (FWA Site of the day, Webaward 2006 제품 프로모션 부분 우수상 수상,
Adobe Showcase등록, Webby Award Website/Automotive Official Honoree)
2005 : CGV2005(Webaward 2005 기술/인터렉티비티 최고대상, 영화부문 대상,
2005 정글이 선택한 가장 크리에이티브한 웹사이트 1위), CJAIFF 2005, PEPSI
2004 : CJAIFF 2004, Nacross 2004(Webaward 2004 웹기술 대상 수상)
2004 : KTFMembers, Motorola, CGV 2004(Webaward 2004 대상수상)
2003 : Nacross2003 (webdesign 2003 Best of Best)
2003 : Mensa (webdesign 2003 Best10, Webaward 2004 우수상 수상)
2002 : LGTelecom, Toshiba Korea

SVN 보고 싶은 정보만 보자. Label Decorations of Subversion @ Eclipse

2010-05-20T21:29:37+09:00

컴퓨터를 포맷하면서
Eclipse Europa 에서 Ganymede로,
Subversion도 최근에 나온 것으로 설치하고 보니-

Subversion 기본적인 설정으로 리비전 번호만 찍히고 있었다.
파일이 커밋된 시간과 파일을 커밋한 발행인을 보고 싶었지만
예전에 어떻게 설정했는지 기억도 안나고, 이미 머릿속은 백지상태-_-;

또다시 헤매지 않기 위해 스샷을 남긴다.

* Window -> Preferences -> decoration 검색
* Team -> SVN -> Label Decoration 선택 -> Text Decorations 탭 선택

* Format 필드에서 수정하고 싶은 형식의 [...] 선택
* 원하는 정보 체크 -> OK

덧>
이클립스 설치.
인코딩 바꾸기. (Preference - encoding검색)
맞춤법 검사 없애기. (Preference - spell검색)
SVN 설치. (Help - Software Update)
ini 파일 수정하기.

SWFObject.js 2.0 와 Firefox 3 그리고 Web Developer Add-on

2009-05-07T17:47:14+09:00

SWFObject.js (ver 2.0) 와 Firefox 3 그리고 Web Developer Add-on.
이들의 궁합은 뭔가 안좋은가보다.

문제 발단은 SWF 파일을 항상 두번씩 불러오는 Firefox 였다.

SWFObject.js Google Code에 있는 FAQ를 보면 다음과 같은 글을 볼 수 있다.
http://code.google.com/p/swfobject/wiki/faq

16. Why does Firefox load my SWF twice?

Firefox 3 has a known issue that sometimes causes a swf to be 'double initialized'. The problem appears to be fixed in their codebase, but has not been released yet. See the following bugs for more details: https://bugzilla.mozilla.org/show_bug.cgi?id=438830 and https://bugzilla.mozilla.org/show_bug.cgi?id=445599

Or, if you have "Disable cache" selected in your Firefox Web Developer Toolbar extension a double load will occur.

나에겐 sometimes가 아니고 always 일어난 일이라 무슨일인가- 했더니
마지막줄.
Web Developer Toolbar에 "캐쉬 끔" 설정이 문제였다고 한다.
"캐쉬 끔"을 풀어버리니 몇개는 2번 읽고 몇개는 아예 읽지 않거나 한번만 읽는다.

신기하구나 Firefox 3.
그래도 Trunk 안에 있는 소스에선 고쳐졌다고 하니, 다음 버전을 기대해 보자+_+

Flash OBJECT and EMBED tag attributes

2009-05-07T17:46:53+09:00

Flash OBJECT and EMBED tag attributes

http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_12701

IE에서 Ordered List - LI 숫자가 전부 1.1.1.1.1.로 나오는 현상.

2009-05-07T17:46:29+09:00

원문 :

http://www.quirksmode.org/bugreports/archives/2005/07/IE_60_does_not_render_ordered_list_correctly.html

보통 순서가 있는 목록 = Ordered List 는 아래와 같이 표현되죠.

[ 예시 1 ]

<ol>
   <li>첫번째</li>
   <li>두번째</li>
   <li>세번째</li>
   <li>네번째</li>
   <li>다섯번째</li>
</ol>

첫번째
두번째
세번째
네번째
다섯번째

<li> 태그에 width나 height를 넣으면 이상한 현상이 나타납니다.
아마도 IE 7 , IE 6 에서 보는 분들은
[ 예시 1 ] 과 다른 모습을 볼 수 있을 것입니다.

[ 예시 2 ]

li {
   height: 20px;
}

첫번째
두번째
세번째
네번째
다섯번째

[ 해결방법 ]
display: list-item; 을 추가해주면 됩니다.

li {
   display: list-item;
   height: 20px;
}

첫번째
두번째
세번째
네번째
다섯번째

(언제나 신기한 IE.)

CSS 파일 크기에도 제한이 있다? - CSS Limit @ Internet Explorer

2009-07-04T14:35:36+09:00

원문 :

CSS Limit #1.

하나의 CSS 파일의 크기가
288kb를 넘어설 경우,
인터넷 익스플로러에서는 읽어들이지 못하는 버그가 있다고 합니다.

CSS Limit #2.

CSS 선언. 즉, #selector { } 이러한 스타일 지정 갯수가
4096개를 넘어설 경우,
역시나 인터넷 익스플로러에서 읽어들이지 못하는 버그가 있다고 합니다.

CSS Limit #3.

@import 를 사용하여 여러 CSS 파일을 한 CSS 파일에 모아 관리할 수 있죠.

- style.css -
@import url("style_one.css");
@import url("style_two.css");

이러한 @import 갯수가 32개를 넘어설 경우,
그리고 그 depth 또한 3개의 chain을 넘어설 경우, (style.css>style_one.css>style_ie.css)
또 역시나 인터넷 익스플로러에서 읽어들이지 못하는 버그가 있다고 합니다.

위와 같은 수치 이상으로 늘어나지 않도록,
언제나 조심해야겠습니다.-_-; (언제나 신기한 IE.)