겨미♡웹

블로그 옮깁니다.

겨미겨미 — Tue, 20 Nov 2007 23:59:21 +0900

miya.pe.kr로 블로그를 옮깁니다. 본 블로그에 게시했던 글들은 계속 유지되며 앞으로는 miya.pe.kr에 포스팅 하겠습니다.

『방탄 Ajax』 출시

겨미겨미 — Mon, 22 Oct 2007 13:36:38 +0900

방탄 Ajax 표지

DOM Script의 저자 제레미 키스(Jeremy Keith)가 쓴 방탄 Ajax가 출간되었습니다. DOM Script에서 올바른 DOM, 겸손한(unobtrusive) 자바스크립트에 관한 이야기를 했다면 이번엔 올바른 Ajax의 활용, 접근성을 확보하는 Ajax 개발론, 즉 겸손한(unobtrusive) Ajax에 대해 이야기하고 있습니다.

이 책에서의 Ajax는 Asynchronous JavaScript and XML가 아닌 미국과 영국 등에서 과거에 쓰였던 Ajax라는 단어의 뜻으로서 정의하고 있습니다. 쉽게 말해 Flex, Silverlight 등의 RIA을 포괄하는 의미라는 것입니다.

모든 웹 사이트, 웹 어플리케이션의 기본은 문서이다. 라고 이야기하는 이 책에서는 기본적인 문서((X)HTML)로 부터 출발하여 점층적으로 CSS, Ajax를 덧붙여 나아가는 개발 방식을 이야기하고 있습니다. 기본적으로 하위 호환성과 접근성이 보장된 문서((X)HTML)의 틀에서 점층적으로 새로운 기술들을 적용해 나아간다면 겸손한(unobtrusive) Ajax의 제작이 어렵지 않을 것이라는 이야기입니다.

Ajax 기술들은 아직 충분히 접근성이 검증되어 있지 않은 새로운 기술들입니다. 방탄 Ajax는 그에 대해 지적하며 Ajax 기술 적용 시에 잃을 수 있는 것들에 대해 경고하고 있습니다. 저는 이것이 이 책이 얘기하는 주제라고 생각합니다. 눈 앞에 펼쳐질 화려한 효과에 앞서 고려하지 않으면 잃게 될 것이 무엇인지, 잃게 될 것들을 지키려면 어떻게 해야 할지가 명확하지 않다면 이 책을 볼 충분한 이유가 될 것 같습니다.

덧) 항상 좋은 책을 볼 수 있게 해주시는 명수씨, 감사합니다! :)

여러 개의 제출 버튼을 가진 폼은 어떻게 접근성을 보장할까?

겨미겨미 — Sun, 14 Oct 2007 18:21:50 +0900

웹 사이트 개발을 하다보면 하나의 폼에 여러 개의 제출 버튼을 써야하는 경우가 있다. 그 경우 자바스크립트를 사용하지 않고 원하는 기능을 구현하려면 어떻게 해야할까? IE의 버그로 인해 여러 방법 중 대부분이 사용이 어렵지만 submit 타입의 input 태그를 여러 개 넣어서 폼을 구성하면 버그 없고 자바스크립트 의존적이지 않은 결과물을 만들 수 있다.

그럼 실제로 각 글에 체크박스가 있어서 체크 후 삭제 혹은 이동하는 기능이 있는 게시판 목록을 만들어보자. 결과물은 다음의 그림과 같을 것이다.

그림을 보고 HTML 페이지를 만들어보자.

<!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" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>여러개의 폼 제출 버튼 예제</title>
</head>
<body>
    <form action="test.html">
        <h1>여러개의 폼 제출 버튼 예제</h1>
        <table summary="게시판 목록">
            <thead>
                <tr>
                    <th>선택</th>
                    <th>제목</th>
                    <th>작성자</th>
                    <th>작성일</th>
                    <th>조회수</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" title="1번글 선택"
                         name="check1" value="Y" /></td>
                    <td>게시판 제목1</td>
                    <td>아무개</td>
                    <td>2007년 10월 13일</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td><input type="checkbox" title="2번글 선택"
                         name="check2" value="Y" /></td>
                    <td>게시판 제목2</td>
                    <td>아무개</td>
                    <td>2007년 10월 13일</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td><input type="checkbox" title="3번글 선택"
                         name="check3" value="Y" /></td>
                    <td>게시판 제목3</td>
                    <td>아무개</td>
                    <td>2007년 10월 13일</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td><input type="checkbox" title="4번글 선택"
                         name="check4" value="Y" /></td>
                    <td>게시판 제목4</td>
                    <td>아무개</td>
                    <td>2007년 10월 13일</td>
                    <td>4</td>
                </tr>
            </tbody>
        </table>
        <p>
            <input type="submit" name="delete_selected"
                value="선택된 글 삭제" />
            <input type="submit" name="move_selected"
                value="선택된 글 이동" />
        </p>
    </form> 
</body>
</html>

선택된 글 삭제와 선택된 글 이동 버튼을 submit 타입의 input 태그로 주고 각각에 name 속성을 부여하였다. 여기에서 1번글을 선택하고 선택된 글 삭제 버튼을 누른다면 제출된 값은 다음과 같을 것이다.

check1 = "Y"
delete_selected = "선택된 글 삭제"

마찬가지로 이동 버튼을 누른다면,

check1 = "Y"
move_selected = "선택된 글 이동"

위와 같은 값이 제출될 것이다.

"선택된 글 삭제"와 같은 값을 다른 원하는 임의의 값으로 줄 수 없을까? 답은 불가능하다. 화면에 보여지는 값을 그대로 사용해야 한다. 이 것이 필자가 설명한 방식의 한계이다. 개발자들은 보통 "Y" 혹은 "delete"와 같은 명확한 코드 형식의 단어를 사용하고 싶어할 것이다. 하지만 자바스크립트를 사용할 수 없는 사용자들의 불평을 듣고 싶지 않다면 현재로서는 어쩔 수 없다. IE(IE7 포함) 사용자는 submit 타입의 input 태그 외에 submit 타입의 button 태그나 image 타입의 input 혹은 button 태그에 name 속성을 통해 제출 값을 구분할 수 없기 때문이다.

이미지 버튼일 경우는 어떻게 하나? image 타입의 input 태그를 사용할 수 없다면? 답은 Image Replacement이다. Image Replacement를 사용할 수 없는 상황이라면 폼 제출 버튼을 이미지 - 배경 이미지 제외 - 로 하지 않는 디자인을 고려해보아야 할 것이다.

<style type="text/css">
input.delete-selected {
    width: 100px;
    height: 20px;
    background: url(delete_selected.gif) no-repeat;
    text-indent: -5000px;
}
input.delete-selected {
    width: 100px;
    height: 20px;
    background: url(move_selected.gif) no-repeat;
    text-indent: -5000px;
}
</style>
<!-- 중략 -->
<p>
    <input type="submit" class="delete-selected"
        name="delete_selected" value="선택된 글 삭제" />
    <input type="submit" class="move-selected"
        name="move_selected" value="선택된 글 이동" />
</p>

글의 코드는 아래의 첨부파일을 다운로드를 통해 실행해볼 수 있다.

select.html

HTML5 트레일러 - Find Your Hero!

겨미겨미 — Tue, 11 Sep 2007 16:00:55 +0900

출처: Methisto: HTML5 trailer - Find your Hero

HTML5의 등장의 예고편이라고 할까요? 웹의 90%를 지배하고 있다는 그의 정체 부분이 압권입니다. ㅎㅎ

2010년 12월... 더 늦지 않았으면 좋겠군요! :)

진정 어플리케이션 같은 웹어플리케이션, QOOXDOO!

겨미겨미 — Tue, 11 Sep 2007 14:59:27 +0900

요즈음 웹이 데스크탑 어플리케이션을 흉내내기 시작하다가 어느샌가 데스크탑 어플리케이션의 한계를 뛰어넘은 모습을 자주 보게 된다. 2005년 구글 맵스에 열광하던 시절은 추억거리가 되었고, 2007년 현재에는 다양한 양질의 웹어플리케이션이 우열을 다투고 있다. 오늘 소개할 QOOXDOO는 쉬운 웹어플리케이션 제작을 위한 자바스크립트 프레임워크의 하나이다.

Java의 Interface와 Ruby의 Mixin 개념을 도입한 OO 방식의 프레임워크인 QOOXDOO는 또한 기본적인 UI를 자체 제공하며 관련 아이콘들이 SDK에 포함되어 있다.

한글로 된 QOOXDOO에 관한 정보가 거의 없는 관계로 개발에 조금은 어려움이 있지만, 앞으로 중·소 사이트 제작 간 관리자 툴로서 활용할 목적으로 여러 프레임워크 중 QOOXDOO를 선택하게 되었는데 아직은 목적 달성까지 남은 일이 많은 관계로 구체적인 적용사례나 노하우는 기회가 되면 다시 소개하기로 하겠다. (써보시거나 관련 정보를 보신 적 있으신 분들, 알려줘용!! ㅠㅠ)

QOOXDOO 관련 링크

QOOXDOO 공식 홈페이지
데모 페이지 - showcase에서 전반적인 UI를 볼 수 있다.
메일링 리스트

내 브라우저에 XRAY를 달자.

겨미겨미 — Thu, 23 Aug 2007 09:43:44 +0900

XRAY :: for web developers v0.91a

웹 개발 간 브라우저의 어떤 개체(element)의 상세정보를 알고 싶다면 XRAY를 이용 해 보자. 단순히 북마크에 XRAY 스크립트를 넣고 원하는 페이지에서 북마크를 호출하여 주는 것만으로 준비는 끝이다!

XRAY (북마크 해 주세요!)

XRAY라는 타이틀을 가진 조그마한 레이어가 나타난다. 이제 상세정보를 알고 싶은 어떤 개체(element)를 클릭하면, id, class, position, border, margin, padding 등의 정보를 얻을 수 있다. 그리고 개체(element)가 속한 HTML의 구조가 표시되는데 부모 개체(element) 태그명을 클릭하면 해당 상세정보를 얻을 수 있다.

XRAY 예제

XRAY를 끄고 싶다면 x 버튼을 클릭하거나 브라우저를 새로고침하면 끝이다.

웹디자이너나 퍼블리셔, 자바스크립트 개발자들에게 상당히 유용한 툴이 될 듯 하다. 이번 버전에서 IE6 이상에 대한 지원이 추가되었다고 하니 IE의 렌더링 오류 수정에도 크게 도움이 될 것 같다. 스크린샷을 찍고 그래픽 툴에서 붙여서 확대해서 픽셀 재는 수고를 좀 덜어주지 않을까? :)

소위 히든폼이라 불리는 HTML의 오용

겨미겨미 — Wed, 22 Aug 2007 14:30:00 +0900

페이징 기능을 포함한 게시물 리스트 화면이나 Breadcrumb 구조 등 다수의 공통적인 파라미터를 가지고 다녀야 하는 경우가 있다. 이 경우에 쓰이는 방법이 여러가지가 있는데 일반적으로 서버 사이드 스크립트를 통해 공통적인 파라미터를 묶어서 여러 개의 관련 링크에서 일관적으로 적용하도록 하는 방법이다. 그런데 다음과 같은 HTML 코드를 만들어내는 경우가 있다. (common1~3을 공통적인 파라미터라고 가정한 게시물 보기 화면) Breadcrumb 구조 등 다수의 공통적인 파라미터를 가지고 다녀야 하는 경우가 있다. 이 경우에 쓰이는 방법이 여러가지가 있는데 일반적으로 서버 사이드 스크립트를 통해 공통적인 파라미터를 묶어서 여러 개의 관련 링크에서 일관적으로 적용하도록 하는 방법이다. 그런데 다음과 같은 HTML 코드를 만들어내는 경우가 있다. (common1~3을 공통적인 파라미터라고 가정한 게시물 보기 화면)

<script type="text/javascript">
function goDelete(id) {
    var form = document.forms["blahform"];
    form.id.value = id;
    form.action = "delete";
    form.submit();
}
function goUpdate(id) {
    var form = document.forms["blahform"];
    form.id.value = id;
    form.action = "updateForm";
    form.submit();
}
function goList() {
    var form = document.forms["blahform"];
    form.action = "list";
    form.submit();
}
</script>
 
<a href="javascript:goDelete(1)">삭제</a>
<a href="javascript:goUpdate(1)">수정</a>
<a href="javascript:goList()">리스트</a>
 
<form name="blahform" method="post">
<input type="hidden" name="common1" value="1" />
<input type="hidden" name="common2" value="2" />
<input type="hidden" name="common3" value="3" />
<input type="hidden" name="id" value="" />
</form>

프로그램 적으로 생각하자면 공통 파라미터의 일관성을 유지할 수 있는 한가지 방법이라고 할 수 있겠지만, 결과적으로 HTML 태그가 의미에 맞지 않고 자바스크립트 의존적인 코드가 되었다. 기본적으로 form 태그는 사용자 입력 양식을 뜻하는데 위에 쓰인 form 태그는 프로그램 내부적인 용도 그 이상의 의미를 지니지 않는다.

앞서 언급한 것과 같이 공통 파라미터를 한 변수에 할당하는 방법으로도 일관성을 충분히 얻을 수 있고 그 이외에도 서버 사이드 스크립트 단에서 위의 코드에서 얻으려고 했던 이득을 놓치지 않을 수 있는 방법이 많이 있다. 이와 같은 오류를 범하지 않으려면 HTML의 구조화를 해치지 않고 자바스크립트 의존적인 페이지를 피하는 자세가 필요하다.

HTML5를 통한 개발 - Lachlan Hunt

겨미겨미 — Tue, 21 Aug 2007 14:26:32 +0900

Lachlan Hunt가 2007년 8월 3일에 공개한 "HTML5를 통한 개발(Developing with HTML5)" 슬라이드 입니다. 간단히 번역을 했는데 오역이나 의역은 원문을 참조하여 이해해 주셨으면 좋겠습니다.

Developing with HTML5.ppt

관련 링크

웹접근성과 select 태그의 사용

겨미겨미 — Mon, 20 Aug 2007 18:15:21 +0900

(그림1. 전송 버튼이 적용되지 않은 select 태그)

그림1은 현재 게시판의 분류나 바로가기 메뉴 등에서 선택 시 바로 폼을 전송시키거나 자바스크립트를 이용하여 페이지 전환을 하는 용도로 쓰이고 있다. 그러나 키보드 사용자나 자바스크립트를 사용할 수 없는 사용자를 고려하였을 때 위와 같은 사용은 불가하다. 자바스크립트가 불가능한 사용자를 위해 <noscript> 태그를 이용하여 서브밋 버튼을 추가하면 되지 않느냐? 그것은 반쪽짜리 접근성이다. 마우스 기능을 사용할 수 없는 사용자의 접근성이 상당히 저하되기 때문이다. 키보드 사용자는 select 태그의 목록을 활성화 시킨 후 아래 방향키를 한 번 누르는 순간 select 태그의 자바스크립트가 활성화되어 마치 목록 두 번째 요소를 선택한 듯한 결과를 보게 될 것이다.

(그림2. 전송 버튼이 적용된 select 태그)

전송 버튼을 넣고 select 태그의 onchange 이벤트를 제거하여 모든 사용자에 대한 접근성을 확보할 수 있다. 마우스 사용자들의 편의성 문제는 어떻게 하는가? 결국 판단은 제작하는 사람의 몫이지만 누군가의 접근성을 저해하면서 얻는 편의는 기능에 대한 남용이다.

2012년까지 장애인 13만여명에 IT보조기기 보급

겨미겨미 — Fri, 17 Aug 2007 18:02:55 +0900

2012년까지 장애인 13만여명에 IT보조기기 보급

이밖에 장애인이 공공부분의 인터넷 사이트를 손쉽게 이용할 수 있도록 `웹 접근성 준수'를 제도화하기 위해 올해안에 웹 접근성 국가표준을 개정하기로 했으며 공공기관은 물론 민간기관들의 참여를 이끌어내기 위해 `웹 접근성 품질 마크'를 적극적으로 부여하기로 했다.

정부 차원에서 장애인들의 IT 활용 활성화를 추진하고 있다는 기사가 났다. 웹 접근성에 대해 국가 차원의 관심과 필요성이 더욱 늘어나게 되었다는 이야기이다. 좋던 싫던 관심이 있던 없던 웹 표준과 접근성은 점점 피할 수 없는 필수요소가 되어가고 있다. 장애인의 인터넷 접근 장치는 점점 늘어가는데 정보를 얻는 통로인 웹사이트가 그들을 소외시킨다면 정부의 이런 정책은 아무런 의미가 없을 것이다.

기사대로라면 2012년에는 접근성을 보장 여부가 13만명의 잠재 이용자를 잡느냐 놓치느냐를 판가름한다. 웹표준과 웹접근성의 가치가 보다 빠르게 늘어날 것이라는 기대를 해본다.