G-Test Pattern

개발&Development/웹 2008/05/26 00:07 posted by 겐도

이전의 의 버전업을 공개합니다. V4는 이전에 개발되었습니다만 이번에 새로운 문제도 발견되어 V5까지 공개합니다.

이 패턴의 목적은 웹에서의 데이터 처리를 제대로 하는지에 대한 핸들링을 검증하는 일반적인 실험용입니다. SQL Injection쪽과는 상관이 없습니다.

  1. Version 1 : & ' "의 처리 확인, <,> 처리도
    <gen&doh'">
  2. Version 2 : 자바스크립트 대응 주석코드 추가
    <!--gen&doh'"-->
  3. Version 3 : +가 URI로 넘어갈때 공백으로 바뀌는 특성 테스트
    <!--gen&doh+'"-->
  4. Version 4 : V2에서 주석째로 제거되는 경우 에러가 나지 않아 에러를 쉽게 발견하는 코드 추가
    <!-- <![CDATA[gen&doh'"-->+sihwpg]]>
  5. Version 5 : 바보같은 파서를 위한 오픈 코멘트
    <!-- <![CDATA[gen&doh'"-->+sihwpg]]><!--</miyu>

version 2 부터는 ghost님이 참여하셨고, version 5는 miyu님이 발견하셨습니다. version 4부터는 JS 내에서의 스트링 처리를 테스트 합니다. 즉 JS가 아닌 영역은 version 3로도 충분합니다.

정확히 입력받고, 출력되고, 표현되며, 다른 부분에 영향을 주어서는 안됩니다. Version 4의 경우 "<!--"에 대해 파싱 단계에서 무난히 넘어간 후 Script 영역에서 다르게 처리되므로 에러가 발생하지 않는 경향이 있어 이전글에서 설명하였듯이 아예 에러가 나도록 유도합니다. 더불어 "</miyu>"파트는 FireBug가 지적하는 "</"문제를 찾기 위함입니다.

이 글은 절대 펌을 허락하지 않습니다. 오류 수정이나 정보의 집합을 위함입니다. 링크만 거시기 바랍니다.

Trackbas address :: http://gendoh.tistory.com/trackback/2511063 관련글 쓰기

  1. Tracked from daybreaker's me2DAY at 2008/05/26 04:07  삭제

    Subject: 아침놀의 생각

    겐도님의 새로운 G-Test 패턴 업데이트!...

  2. Tracked from 겐도사마의 재림 at 2008/09/01 04:29  삭제

    Subject: 개발자의 기본! 너가 다루는 데이타가 어떤 타입인지를 알라.

    "G-Test Pattern" 이 글은 내 블로그에서 유명한 글 중 하나이자, 종종 오프라인이나 온라인에서 언급이 되기도 한다. 개인적으로는 웹 개발에 있어 기본적인 테스트를 수행할 수 있도록 도와주는 획기적인 "도구"라고 생각한다. 그래서 공개하기로 마음먹었고 몇몇 서비스라도 문제 가능성을 줄어들길 바랬다. 허나 설명이 불충분 했는지 아직도 Version 1인 <gen&doh'">를 통과하지 못하는 서비스가 최신으로 공개되는 것을 보고는 통탄을 금.....

아래의 코드를 보자.

<!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>G-Test 5</title>
</head>
<body>
 <script type="text/javascript">
//<![CDATA[
  var testval = "<!--";
//]]>
 </script>
 <div>겐도 오빠 사랑해</div>
 <!-- 정말? -->
 <div>ㅇㅇ</div>
 <script type="text/javascript">
//<![CDATA[
  var testval2 = "-->";
//]]>
 </script>
</body>
</html>

파이어폭스는 나의 사랑을 잘 표현해 주고 있다.
사용자 삽입 이미지

FireFox 2 on Vista


허나 IE 7. 로딩부터 심상치 않다.
사용자 삽입 이미지

IE7 on Vista

그리고는 깔끔한 흰 화면을 보여준다.
사파리는 거의 기대를 말자. "<!--"가 미리 처리되어 많은 브라우저들이 "-->"까지 날려준다. 위처럼 script 영역을 벗어나는 주석태그가 있는 경우 오동작 한다. 오동작이 맞는지는 모르겠다. HTML Spec을 아무리 읽어봐도 어느것을 먼저 해석해야 하는지에 대해선 모르겠다.

아무튼 자바스크립트 영역에 뭔가 출력할땐 조심하자.

저 문서의 타이틀에서 살짝 보이듯이 곧 "G-Test Pattern V5" 공개하겠습니다.

Trackbas address :: http://gendoh.tistory.com/trackback/2511062 관련글 쓰기

  1. Tracked from 까먹지말자! at 2008/06/25 02:30  삭제

    Subject: XHTML과 CDATA의 문제점

    예전에 CDATA는 운이 좋으면 해석될 뿐..이라는 글을 읽고서는, 나도 같은 문제로 고민한 적이 있어서 정리해 둬야 겠다 싶어서 글을 쓴다. XHTML은 그 자체로 완전히 유효한 XML이어야 한다. XML은 CDATA 섹션(&lt;![CDATA ~ ]]&gt;)이라는 것을 지원하는데, 이 영역 안에 들어갈 경우에는 &lt;,&gt;, &amp; 기호 같은 특수문자들이 자동으로 &amp;lt;, &amp;gt;, &amp;amp;로 변환되는......

  1. Commented by daybreaker at 2008/05/26 05:57

    헐.... 이런 문제가 있군요;;;;; 덜덜덜
    그래도 string literal로 보는 게 맞지 않을까 싶은데....ㅠㅠ;;

    테스트 패턴에 이어 해결 방법(?)도 알려주시면 더욱 좋을 것 같군요. (혹시 해결 방법이 저런 문자열을 출력하지 말자..라거나 entity 인코딩하자...라면..-_-a) 이를 테면 strict DTD에서는 결과가 다르다든지 IE8은 어떤지라든지 content-type에 application/xhtml+xml을 지정하면 어떻게 바뀐다든지 말이죠..; (너무 많은 걸 요구했나요..-_-)

    ps. 스크린샷에서 구글 툴바, 웹디벨로퍼 확장기능은 굳이 모자이크 처리하지 않으셔도..=3=3

    • Commented by 겐도 at 2008/05/26 06:33

      상황에 따라 처리방법이 다를 수 있습니다. 그래서 문제만 지적하고 해결책은 제시할 수 없습니다. 특히 타입 같은 것은 이미 레거시가 있어가 제한이 있어 쉽게 바꿀 수 있는 부분은 아니죠. 현재 상황에서 어떻게든 저런 스트링들이 잘 처리되도록 최선을 다할 뿐입니다.
      모자익 처리는... 그냥 심심해서요 :)

  2. Commented by 부니기 at 2008/10/31 18:23

    cdata로 검색하다가 들어왔습니다. 아주 가끔 눈팅(?)만 했었는데, 한가지 물어볼 것이 있어서 댓글 답니다.
    위의 코드라면 주석처리 문이 중첩되는데, 중첩되면 안된다고 알고 있습니다.
    <!-- <!-- 정말? --> -->
    IE에서의 문제가 혹시 그런 문제가 아닐지...
    제가 잘 못 알고 있다면, 가르침을 부탁드립니다. ^^;

    • Commented by 겐도 at 2008/10/31 21:35

      네 주석은 중첩을 허용하지 않습니다. 심지어 주석중간에 연속된 하이픈("--")이 나와서도 안됩니다.
      하지만 위의 케이스는 처음의 주석 시작문구가("<!--") 태그의 시작으로 보아야 하는지 CDATA영역이니 무시해야 되는지에 대한 차이입니다. 위에 트랙백을 따라가서 읽어 보시면 잘 설명이 되어 있는데 왠만하면 브라우저들이 무시하고는 주석시작 태그로 인식합니다.
      즉 스크립트에 데이터를 그대로 스트링으로 적을 때 단순히 따옴표 등 뿐만이 아니라 연속된 하이픈도 신경써 줘야 한다는 의미로 보시면 됩니다. 기존의 단순한 이스케이핑 함수들로는 운나쁘면 스크립트 에러가 납니다.

웹 접근성에 대한 단상들

개발&Development/웹 2008/05/05 05:56 posted by 겐도
요즘 TV 오락물들을 소리없이 시청해 본적이 있는가.
요즘 다니는 헬스장에서, 메인 운동을 하기전에 5분정도 뛰면서 몸을 풀때 TV를 앞에 틀어 둔다. 옆에 이어폰이 있기는 하지만 귀찮거나 해서 그냥 화면만 보는데 시청에 전혀 문제가 없다. 밑에 자막으로 다 나오기 때문이다. 뉴스들중 일부는 하단에 청각장애인을 위한 수화를 보여주는데 개인적인 생각으론 뉴스도 자막만 좀더 자세해 지면 정보를 전달 받는데 별 지장이 없을 것 같다. 때론 수화때문에 자막이 가려 이어폰을 꼽지 않았으나 수화를 모르는 내가 정보를 잘 못얻는 경우까지 있으니....

메일을 텍스트로 보내던 시절엔 글자크기라는 것이 없었으니 자기가 보고 싶은 데로 볼 수 있었으나 지금의 대부분의 메일은 Rich Text Format을 사용하니 본연의 목적에 충실하여 정확히 지정된 사이즈로만 보인다. 아버님과의 메일을 주고 받을땐 최대 폰트 사이즈로 지정하여 메일을 보낸다. 기술이란 것이 인류를 편하게는 못할 망정 자주 연락하지 않고 서먹서먹한 부자지간에 부담스러운 글자크기의 메일을 쓰게 만든다.

옛날에 TTS(Text To Speech)기능을 제공하던 통신사도 있었다. 텍스트로만 정보를 올릴 수 있었던 시절에 막 멀티미디어 기능이 컴퓨터에 탑재되다 보니 쉽게 스피커를 통해 문자를 소리로 변환할 수 있었다. 아마 인터넷 접근성과 관련해서는 지금보다 그때가 더욱 좋았을 것이라 생각된다.

인류는 문자를 발명하여 정보를 쉽게 후세에 남겨 축적의 정도를 증가시킬 수 있었다. 일반적인 동물은 DNA와 교육만으로 가능하다. 나무활자, 금속활자의 발명은 정보의 확산을 가속하였다. 지역적인 한계를 극복할 수 있는 토대였고 여러 곳에서 발생한 정보를 서로 공유할 수 있게 되어 수만년이 지나야 가능했던 정보의 축적을 단시간 내에 이룰 수 있게 되었다. 인류가 동물과 차이를 만들어 낼 수 있었던 것은 여기에 기인한다고 본다. 그리고 통신이 발달하여 이 전달의 속도를 가속화 시켰고 인터넷의 보급은 다시 범위의 가속을 가져왔다. 인류사회는 이제 정보가 없으면 살기 힘든 상황인데, 적어도 한국에서는 유치원생도 들고 있는 휴대폰이란 디바이스가 조금만 상황만 갖추어 진다면 정보를 몰라서 개체가 도퇴되는 일은 없어질 수 있다. 그러나 어찌 된 것이, 신체건강하고 집에 고속 통신이 연결된 컴퓨터가 있는 사람만이 정보를 제대로 가질 수 있다. 사회적 복지 시스템은 점점 보강되어 가지만 몰라서 힘들게 살아가는 사람들이 있다.

웹 접근성에 대해 개인 적으로 중요하다고 생각하는 이유는, "정보는 흘러야 한다"라는 생각에 기인한다. 매스미디어나 기존 포털들에 대한 반감이 생기는 것은 인위적인 조작이나 개인의 생각에 의한 정보 왜곡이 가능하기 때문이다. 마찬가지로 접근성에 대한 것은 구서구석 누구에게나 정보가 흘러가야 정보의 독점을 이용한 횡포나 결핍에 의한 문제를 최대한 막을 수 있기 때문이란 생각에 기인한다.

웹 접근성에 대한 현재의 통념은 신체적 문제에 대한 것만 보고 있지만 인류는 더이상 동물적인 삶을 살고 있지 않기에 다른 부분들도 중요하다고 본다. 특히 금전적인 문제이다. 나의 300만원짜리 맥북프로(소프트웨어까지 합치면 이제 500이 넘을듯)는 이미 윈도우는 갖추고 있고 무선인터넷 서비스만 어떻게 해결한다면 이세상 모든 공개된 정보에 접근할 수 있다(물론 내 사지가 멀쩡하다면). 티스토리야 맥에서도 파폭으론 접근 가능하다 쳐도 다른 서비스 중엔 윈도우만 접근되나 돈으로 메모리 늘리고 하드 늘려서 해결된다. 즉 신체가 인류 상태의 정규분포에 들어 있어야 하는 것 뿐만 아니라 금전적인 부분도 요구한다. 정보의 불평등이 생겨난다. 인텔에서 아무리 값싼 CPU를 만들고 그것을 이용해 현재는 50만원 미만, 이후 매우 저렴한 가격으로 구입하거나, 정부에서 뿌려댈 수 있는 디바이스가 나온다 하더라도 현재의 웹페이지들 "꼬라지"로는 안된다.

100미터를 12초 이내에 달리지 못하거나 시력이 2.0이 되지 못한다고 정보를 접근 할 수 없어서는 안될 것이다. 만약 인류가 동물이었던 시절이었다면 생명유지에 중요한 문제가 될 부분들이지만 이제는 아니지 않은가. 또한 웹 접근성을 소외계층에 대한 지원으로 바라봐서도 안된다. 인류가 좀더 인류답게 살기 위한 방향으로 생각한다. 금전적이 될 수도 있고 현재 기술의 한계로 휴대용 디바이스에서의 제한도 있다. 그런 상황에서도 정보는 거침없이 흘러 다닐 수 있는 부분중 형식화 할 수 있는 것이 바로 웹 접근성이라고 생각한다.

PS1.
그런고로 장애인용 별도 페이지 만드는 것은 장기적인 관점에서는 별 도움이 안된다고 본다. 손가락 길이가 평균보다 0.4cm 짧은 사람용 페이지를 따로 만들 각오가 없는 이상. 그래서 표준이라는 것이 존재하는데 말이다.

PS2.
인간은 이제 의식주 뿐만이 아니라 정보도 필수적인 요소로 본다.
언젠가 본 철거예정지의 3자매를 둔 한 여성가장의 집에 컴퓨터는 없다. 글들에게 정보는 생활과 직결될 수 있는데 그들을 위한 정보는 소통될 수 없다.

PS3.
정보는 거침없이 흘러야 한다.

PS4.
물론 인류가 계속 존속해야 할만큼 가치 있는지에 대해서는 논외.
그리고 내가 만드는 시스템 조차 사지 멀쩡한 사람이 맥용 파폭을 써야먄 잘 돈다. 제기랄. IE 즐. -ㅅ-
술 많이 마셔서 수전증 있는 내 친구들은 쓰기 좀 힘들꺼야 ㄲㄲㄲ.

Trackbas address :: http://gendoh.tistory.com/trackback/2511054 관련글 쓰기

사파리의 앵커 버그

개발&Development/웹 2008/03/20 02:05 posted by 겐도
사용자 삽입 이미지


둘다 같은 me2day의 특정 글을 가르킨 것인데 Firefox는 제대로 나오고 Safari는 해맨다. 절대 me2day의 버그가 아니라 Safari의 버그이다. 왜냐면 같은 페이지 내의 앵커는 제대로 표시되기 때문이다.(리로딩이 없는 경우)

사실
<a name="23:31:22"></a>
이런 식으로 me2day는 앵커를 만들고 있는데 Empty block의 경우 실제 랜더링 영역을 잡지 못하기 때문에 여러 버그를 일으키고는 한다. 아무 내용도 없는 영역은 최적화를 위해 계산을 대충하는 경향이 있어서 문제를 쉽게 일으킨다.
겐도는 땜빵으로 &nbsp; 트릭을 알려주기도 한다. 공백이라는 문자가 존재하는 것이다. 이때는 이 공백을 출력하기 위한 영역을 잡는다. 허나 이것은 정말 땜빵이라는 점을 기억하기 바란다. 아침해가 떠오르는데 모두 정신이 오락가락할 때 쓰기 바란다. 그리고 사우나 갔다와서 제대로 고쳐야 한다.


URL에 앵커가 들어간 경우 즉 # 뒤에 앵커가 지정된 URL이 입력된 경우 브라우저는 로딩이 끝나기 전이라도 해당 앵커가 위치한 부분을 보여주는 작업을 하는게 일반적이다. 반대로 로딩이 끝나도 이 노력은 계속 되어 Textcube에서 "#void"로 href를 지정하고 onclick 이벤트로 실제적인 작업을 할때 JS에서 처리 후 "return false"로 앵커 작업을 취소하지 않으면 이후의 JS 동작이 먹통이 되던 버그가 발생하게 된다.
앵커에 href와 onclick이 같이 지정되고 onclick의 JS가 끝난 후 페이지가 실제로 이동할 필요가 없다면 일단 return false를 적고 보는 습관을 가지는 것을 추천한다. 근본적으로, 웹페이지는 싱글쓰레드로 돈다는 생각을 하면 된다.

더불어 알아둘 사실은 브라우저중에 많은 수가 로딩 중과 로딩 후의 처리가 다른 경우가 많다는 것이다. 같은 기능을 하는 것이라면 공통모듈로 만들면 좋겠지만 최적화라던가, 담당하는 개발자가 다른 경우 별도의 모듈로 분리되기도 하고, 같은 모듈이라 하더라도 타이밍-지금 어떤 상황인가-에 따라 분기되는 경우가 있어서 동작이 영 틀릴때가 있다. 대표적으로 IE는 로딩중과 로딩후의 엔진이 다르다는 설이 있을 정도다. (특히 IE8에서 DOCTYPE을 기술할때와 안할때의 엔진이 다르다거나 "벨리데이터는 벨리데이터일뿐"글에서 언급했던 뭔가 문제가 생겼을때 오류 복구 모드로 빠지면서 엔진 특성이 약간 바뀜도 알아야 한다. 사실 이런 점 때문에 발로 막 짜지 말고 DTD는 최소한 준수하라고 조언하는 이유기도 하다.)

아무튼 억울하게 브라우저의 버그로, 그리고 내가 만약 무지한=일반적인 사용자라면,  "이게뭐야~, 이 서비스 버그아냐? 언능 고쳐주셈"이라고 외치고는 개발자에게 투덜거릴 것이다. 그런것이 현실이다. 전 인류를 전문가로 만드는 노력보단 이런 부분들을 미리 알아내고 처리하는 것이 전문가가 할 일이라 본다.

"미투데이버그"도 아직 안고쳐 진거 같은데 아무튼 이 글에선 난이도 별 10개쯤 되는(만점이 5개 --;) 이야기를 하는지도 모른다. 만박님은 어서 개발진 전체에게 양주 쏘고 나서 쪼시든지 꽃띠앙님이 맥을 지르시던지 아니면 이 문제는 사파리 버전업데이트를 기다린다로 결정 내리셔도 될 것 같고...

이 글에서 하고 싶었던 말은, 웹이란 플랫폼이 상당히 불안하니 개발집단의 리더 혹은 테크니컬 리더 내지 테크니컬 코디네이터라면 이런 부분이 있음을 인지하기 바람과 더불어 개발과 상관은 없지만 개발집단의 명줄을 쥐고 있는 위치의 사람이라면 아부 잘하고 제시간에 프로젝트 완성하는 사람도 중요하지만 이런 부분들을 리딩할 수 있는 사람이 필요하다는 것이다.

"부모 2.0" from Meories Reloaded

기획이 뛰어난 사이트는 당장은 기획적인 부분에 의해 스폿라이트를 받을 지 모른다. 허나 그 기획을 떠 받치고 오랫동안 유지 시켜 주는 것은 기술이다. 최근에 NHN의 독주가 계속 될 것 같다고 예상한 것도 태동기때의 뛰어난 기획자 능력도 있었고 지금도 뛰어난 기획 리더가 있음은 물론이거니와 우수한 개발자를 무자비하게 독점/포섭하고나서 그들을 밑거름으로 삼아 계속 발전하려 하기 때문이다.

개발자라면 자신이 처한 환경에 대한 기술을 끊임없이 습득해야 하고, 경영자라면(+기술 위에서 펼쳐지는 사업을 한다면) 억만금을 주고서라도 뛰어난 개발자를 포섭하거나 아니면 가진 개발자를 잘 키워 먹길 바란다.


덧1.
겐도는 학원 출신이나 SI에 잔뼈가 굵은 개발자는 일단 무시하고 본다. 경험에 따르면 그들은 주어진 조건만 고려하지 그것을 벗어나는 어떠한 환경에 대해서도 생각해 본적이 없다는 것이다. 자사의 제품을 만드는 상황에선 미래까지 고려하면 절대 경계선이 없는데 그들은 현재 지시된 제한 조건내에서만 움직이며 "좀더 생각해 보지?"란 말에 패닉을 일으키는 경우도 있다. 특히 "제한조건을 당신이 정해 보시오"하면 관리자가 할 일을 왜 자기에게 던지느냐고 덤비는 사람도 있었다.
많은 인용을 받았던 "코더로서 적응해 간다는 것"글에서의 생각처럼 그들을 비난하고 싶은 생각은 없지만, 회사는 직원을 키워먹어야 한다는 아니 직원들이 최대한의 능력을 발휘할 수 있도록 유도함으로써 최대한의 가치 발현을 할 수 있다는 생각에 따르고 있다. 더불어 개발인력이 사회의 제대로 된 인정을 받으려면 스스로가 발전을 해야 되고 그런 생각에서 난 이런 의견을 가끔식 적는 것이다. 논조 자체가 맞을수도 틀릴 수도 있겠지만 자극만이라도 할 수 있으면 미래는 지금과는 다르게, 발전할 것이라 본다.

덧2.
글을 시작할 때와 글을 마무리 할 때의 혈중 알콜농도가 곧 발행될(이 다음 글이 될듯한) 이야기에서 보듯 맥주 PT하나를 비우다 보니 마무리가 좀 격해진 감도 없진 않다.
허나 아직도 많은 IT 기업들이 이전의 글 하단의 코멘트 처럼 기술에 투자를 하지 않는다. 아니 IT를 벗어나서 사회 전반적으로 돈놀이만 관심있고 근본적인 것들엔 관심이 전혀 없다. 당장은 반짝 할 수 있을지 몰라도 장기적으로 봐서는 암울하다. 장기적인 것들을 실제로 봐줘야 할 위치에 있는 사람들이 더욱 더 단기적인 것만 보고 있다는 느낌이다. (특히 정치판!)

덧3.
지금 있는 상황이 불합리 하다고 느끼는 개발자나 디자이너분 계시면 언제든지 TNC의 문을 두드려 주세요. (관련링크)
특히 디자이너분은 여기 클릭!
이쁜 UX 기획자도 구하고 있답니다. (특히 겐도가 -ㅅ-)

덧4.
생각이 있는 개발자라면 맥북에어정도는 사달라고 사장에게 메일 보내는거다.
생각이 있는 경영진이라면 개발자가 사달라는 자산정도엔 쉽게 OK 사인 해 주는거다.
참고로 TNC는 경영지원팀에 ISBN을 전달하면 해당책이 며칠 안에 택배로 온답니다.

덧5.
정말 페트 하나를 혼자서 비웠;;;;;;

덧6.
아차 깜빡. 기술적인 코멘트 하나
anchor의 name과 id에 대하여, name에서는 ':'를 넣을 수 있지만 id에는 넣을 수 없다. 뭐 네이버의 문제에서 지적하였듯이 name과 id를 동시에 지정해 줘야 하는 상황이 발생하는데, 따라서 id에 쓸 수 없는 문자를 name에 쓰는 것은 좋지 않다.

Trackbas address :: http://gendoh.tistory.com/trackback/2511030 관련글 쓰기

  1. Commented by 미유 at 2008/03/20 10:04

    성지순례왔습니다~ 오늘도 유익한 내용이네요 캬캬캬 겐도님 포스팅보는 재미가 쏠쏠.. 그런의미에서 맥북에어.........☞☜....

  2. Commented by 신현석 at 2008/03/20 11:36

    http://www.w3.org/TR/html401/types.html#type-name

    요기 보니까 id와 name은 숫자로 시작할 수 없고 둘다 콜론을 쓸 수 있다고 되어 있는데요. 말씀하신 id에 콜론을 사용할 수 없는 것은 어떤 환경에서인가요?

    숫자로 시작할 수 없기 때문에 미투데이의 문법은 잘못된 것이고 사파리 만의 버그라고 할 수는 없는 것 같습니다. 그리고 다른 페이지로 페이지 조각을 가지고 갈때, 이와 동일한 버그가 파이어 폭스에서도 생겨요. 한 3년전에 IE에서도 같은 문제를 겪은 적도 있고요.

    브라우저에서 페이지 조각을 구현하는게 그렇게 쉽지만은 않은가 봅니다. 단순히 생각해보면 무지 쉬울 것 같기도 한데, 레거시 코드들 때문일까요.... :(

    • Commented by 겐도 at 2008/03/20 13:03

      지적하신 부분은 name type에 대한 것이고 앵커의 name 속성은 CDATA를 가질 수 있습니다.
      http://www.w3.org/TR/html401/struct/links.html#adef-name-A

      페이지 랜더링에서 요즘 레이어들끼리 겹치고 그러면 2차원이 아닌 3차원 문제로 바뀌게 됩니다. 저멀리 친척중에 자신을 덮거나 덮은 조각을 찾는게 쉬운 문제는 아니죠.

Safari 3.1 updates

개발&Development/웹 2008/03/18 23:56 posted by 겐도
집으로 퇴근하는 사이 3.1 업데이트가 나왔군요.

소프트웨어 업데이트 기능을 사용하거나 http://www.apple.com/safari/download/ 에서 다운로드 가능합니다.

변경점은 http://docs.info.apple.com/article.html?artnum=307467-ko 에서 확인가능합니다.

JS 빨라졌다라... 뭐 체감하긴 힘들겠습니다만.

CSS 3 web fonts 지원에 HTML 5의 video/audio 태그 지원이라... 그보다는 개발자 기능이 강화된게 맘에 드는군요.

업데이트를 하니 재부팅 하라고 해서 재부팅 하고 이래저래 뜯어봐야 겠습니다.

개발자용 업데이트.
환경설정에서 "개발자용 메뉴보기" 추가
사용자 삽입 이미지
이런 메뉴가 추가됩니다.
사용자 삽입 이미지

웹속성(Web Inspector) 화면
사용자 삽입 이미지
여기서 FF의 FireBug처럼 엘라먼트의 스타일을 바로 수정할 수 있습니다.
사용자 삽입 이미지

웹최적화를 위한 Timeline기능도 이쁘군요.
사용자 삽입 이미지

사용자 Agent 스트링을 지원한다고는 합니다만 메뉴명 번역이 글쎄요... --?
사용자 삽입 이미지

아무튼 "다른 위치"를 누르면
사용자 삽입 이미지
그외 기능으로 패스워드창에 CapsLock 상태 아이콘이 나옵니다.
사용자 삽입 이미지
사파리에서 깨지는 티스토리 로긴창이긴 합니다만(언제 고칠건데 박군!) 아무튼 패스워드창에 포커스가 있을 때 CapsLock이 켜져 있는 경우 느낌표가 나옵니다.

윈도우 버전의 경우 한국어, 일어, 중국어 입력 처리부분을 강화했다는데 요즘 윈도우를 안써서 모르겠습니다. (맥 한글 입력기는 언제고칠껀데?)

추가:
패스워드 입력란에 한번 포커스가 가면 이후 한글을 입력할 수 없는 버그가 있습니다. 쿨럭.

Trackbas address :: http://gendoh.tistory.com/trackback/2511028 관련글 쓰기

"네이버 탑페이지 HTML 유효성 검사 통과"

코멘트에서 id와 name의 중복문제가 나온다. 사실 "보안된 페이지의 HTML Validation Check 방법"을 보면서 살짝 예상하기도 했었다. (더불어 W3C Validator는 내부에 설치할 수도, 파일을 직접 올려서 확인해 볼 수도 있다.)

사용자 삽입 이미지

FF의 HTML Validator 플러그인의 설정화면

W3 Validator나 SGML Parser는 DTD에 따른 문법 검사만 한다고 보면 된다. 가령 이번에 문제가 된 "12.2.3 항목"은 DTD에 정확히 표현되어 있지 않다. HTML의 과도기적 문제라고도 할 수 있는데 id 속성과 Anchor의 name은 서로 문법이 틀리다. DTD가 뭔지 id와 name이 뭐가 틀리다는 건지는 직접 찾아 보시고(하단 덧글 참고)

맞춤법이 맞다고 해서 올바른 국어가 아니듯 DTD 검사를 통과해도 DTD가 커버하지 못하는 Spec에서 문제가 될 수 있다. 사실 Spec문서에서는 다양한 오용사례(Illegal Example)를 들어가면서 이런 것들을 설명하고 있다. 따라서 DTD에 맞췄다고 안심할 것이 아니다.

개인적으로는 SGML Parser보다는 HTML Tidy를 선호한다. 좀더 에러를 깐깐하게 찾아준다. Serial은 SGML Parser를 먼저 통과해야 하는데 많은 경우 문법적 에러를 당장 수정할 수 없는 경우도 많기에 상대적으로 비추천한다.

HTML Tidy만 통과하면 이제 문제 없는 것일까? 이 벨리데이터 플러그인의 문제점이 하나 있는데 소스를 서버에서 받은 상태 그대로 검사한다는 것이다. JavaScript에 의한 변화 상황이 반영되지 않는다. 특히 JS에서 innerHTML이나 document.write로 넣는 것들은 Validator에서 알아 볼래야 볼수가 없다. 원래부터 문법이 난리였던 사이트에서 html 상으로만 정리를 한다 하더라도 JS 코딩은 여전히 과거의 습관대로일 것이므로 문제가 완벽히 해결이 안되는 경우가 많다.

FF를 쓴다면 "Web Developer 플러그인"을 추천하는데 다른 좋은 기능도 있지만 페이지가 완성된 상태의 HTML을 뽑아주는 기능이 있다. JS가 수행하는 변화까지 반영되는 것이다(물론 브라우저마다 코드가 달라진다면 브라우저마다 따로 작업을). 이렇게 나온 HTML을 바로 Validator로 돌려버리면 거의 초 허접소리를 듣게 되는데 이유는 브라우저의 오브젝트 모델 기반이기 때문이다. 가령 "<br />"은 "<br>"로 바껴버린다(이것이 Textcube 에디터에서 문제시 되었던 부분). doctype은 하늘나라로 날라가 버리셨고 등등등. 기본적으로 태그 짝은 맞다고 가정하고 수동 보정 작업을 좀 해줘야 한다.
아니면 본인처럼 능력 되시는 분들은 코드를 읽으면 된다! (참 쉽죠?)(네이버 메인은 읽다가 잠들었다. -ㅅ-)

개발하시는 분들은 참고하시고, 더불어 행여나 W3C Validator 통과했다고 전혀 문제없다는 주장을 하는 일이 없으시길.

PS.
글쓰면서 네이버 실제 코드좀 인용하려다가 FF가 또 죽었다. 어서 개발팀에서 나머지도 깔끔하게 손봐주길 기다려야 할지도. FireBug + Mac 콤보는 상당히 불한하다는 느낌이다.
아무튼 글 날라가서 처음에 자세하게 쓴것이 저하늘로~~~ 결국 대충 쓰게 되었다. ㅠ.ㅠ

PS.
Textcube 관리자화면에 Validated 마크가 붙던 과정에, 위처럼 DTD는 준수하지만 실제 마크업의 사용이나 시멘틱 까지 가면 완전 개판임을 알고 있었다. 결국 저 마크는 자랑의 마크라기 보다는 각오의 마크로 보는 것이 옳을 것이다.

Trackbas address :: http://gendoh.tistory.com/trackback/2511019 관련글 쓰기

  1. Commented by at 2008/03/12 18:23

    비밀댓글 입니다

  2. Commented by 세라비 at 2008/03/13 11:19

    Strict도 아니고 Transitional이었는걸요. Strict로 하면 name 오류 날 겁니다. (다음도 Transitional이었고, Strict는 안되네요.)

    저도 개인 블로그 Strict하려고 노력을 많이 해봤는데, mshtml 같은 것들이 제대로 표준을 안지켜주기 때문에 어렵죠. (지금은 Live Writer 쓰는데 괜찮은 듯?)

    • Commented by 겐도 at 2008/03/13 13:03

      Strict는 망해가는 표준이라는데 한표 -ㅅ-
      너무 이상이 앞서 간거 같아요.

      anchor는 name과 id를 동시표기한다가 거의 팁처럼 되기도 해요. 표준을 지키고자 하나 브라우저 지원때문에...

p안에 div를 넣으면

개발&Development/웹 2008/03/10 14:25 posted by 겐도
리퍼러 중에 이런 문제로 고심하는 분들을 위해 왜 p안에 div를 넣으면 안되는지를 간략히 살펴보자.

우선 W3의 HTML 4.01 스펙부터 보자. 9.3.1 Paragraphs : the p element를 보면 p 태그는 inline 요소만을 자식으로 가질 수 있다고 한다. div는 block 그룹에 속한다. 따라서 p안에 div를 쓰면 잘못된 것이다. 헌데 다들 잘 쓰고 있지 않은가? 심지어 텍스트큐브나 티스토리 에디터도 이런 식으로 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
    p { border:black thick solid; }
    div { border:red thin solid; }
</style>
</head>
<body>
<p>
    <div>
        테스트문장
    </div>
</p>
<p>
    정상적인 문단
</p>
</body>
</html>
"테스트문장"이 전형적으로 실수한 부분이고 아래는 정상적이다. p 영역이 정확히 어딘지 알기 위해 보더를 주었다.
사용자 삽입 이미지

IE 7 on Windows XP Korean


우선 IE7. p의 보더가 두번 보인다. 이는 사파리도 비슷하다.
사용자 삽입 이미지

Safari 3 on Mac OS X Leopard

단란이 정확히 "테스트문장"을 감싸지 못하고 있다.

파이어폭스는 약간 다르다.
사용자 삽입 이미지

FireFox 2 on Mac OS X Leopard

아래쪽이 없다. 이는 부정확한 태그에 대한 핸들링 차이이다. 브라우저 입장에서 표준 좀 어겼다고 해서 "이거 해석 못하겠임"이라고 할 수 없는거 아닌가.
사용자 삽입 이미지

배째라 브라우저라면?

그래서 대부분의 브라우저가 에러 핸들링을 하는데 이것이 브라우저마다 약간씩 다르다. 물론 표준 밖의 내용이라 개발자 마음대로(?) 처리할 수 있다. 새로운 브라우저가 나올때 마다 어떻게 처리될지는 아무도 모른다.

IE와 Safari의 경우 p안에서 div를 만나는 순간 </p> 태그를 빼먹었다고 판단한다. 단락이 끝난다. 그리고 div가 시작되며 다시 </p>를 만나는 순간 이번엔 시작 태그<p>가 없다고 판단 빈 단락을 만든다. "테스트문장" 아래의 줄이 생기는 이유이다. 허나 FF는 뒷부분의 </p>를 엄하게 들어온 것으로 보고 discard 한다.

IE, Safari는
<body>
<p></p>
<div>
    테스트문장
</div>
<p></p>
<p>
    정상적인 문단
</p>
</body>

Firefox는
<body>
<p></p>
<div>
    테스트문장
</div>
<!-- 무시 </p> -->
<p>
    정상적인 문단
</p>
</body>
이런식으로 변환된다고 보면 되겠다.

이런걸 보고 브라우저가 좋네 마네 이야기 해서는 안되는 것이다. 표준을 벗어났을 때의 이야기기 때문이다. 이런 문제들이 쌓이고 쌓이면 복잡한 페이지에선 브라우저별로 정확히 렌더링 결과를 같게 만드는 것이 어려워 진다. HTML 구조가 다른 셈인데 같은 CSS로 어떻게 처리하리오.

표준을 지키는 것은 매우 중요하다. 표준을 제대로 이해하지 못하고 사용하게 되면 저련 문제에 당하는 것이다. HTML로 밥먹고 살고 있다면 HTML 스펙은 한번쯤은 정독하자. CSS를 먼저 공부할 것이 아니라 HTML부터다.

덧. Safari의 핸들링이 확실치는 않습니다. 제가 잘못 분석한 것이라면 코멘트 주세요. FF와 IE는 DOM을 통해 확인하였습니다.

Trackbas address :: http://gendoh.tistory.com/trackback/2511016 관련글 쓰기

  1. Commented by 세라비 at 2008/03/10 14:36

    spec 읽게 할 수도 없을 뿐만 아니라 spec 읽어도 해결되지는 않겠죠.

  2. Commented by 메밍 at 2008/03/11 22:17

    나이스 겐도옹~

  3. Commented by M at 2008/04/08 21:56

    유용하군요.
    스펙이 너무나 방대하다 보니 다 기억하는 건 불가능하겠지요.
    스펙에서 당연한 소리들을 빼놓고 놓치기 쉬운(언급하신 내용같은) 부분만 모아서 교육한다면 좋을 것 같습니다.

타이거에서 레오파드로 업그레이드 했을 때 /User/{account}/Sites에 있는 파일들이 /~{account}로 접근하면 403이 뜨는 경우가 있다.

어떤 사람은 아예 httpd.conf를 고치는 사람도 있지만 간단한 방법.

/etc/httpd/users 의 파일들을 /etc/apache2/users로 복사하면 된다.

/var/log/httpd는 남아 있지만 실제론 /var/log/apache2에 파일이 생성되는 것이 기본임에 유의.


덕분에 몇시간 삽질 -ㅅ-.

그냥 슬림 피씨에 리눅스 깔 껄 그랬나. ㅠ.ㅠ

Trackbas address :: http://gendoh.tistory.com/trackback/2510978 관련글 쓰기

  1. Commented by inureyes at 2007/11/11 00:44

    그래도 타이거에 비하면 레퍼드는 '그게 있어야 될 곳'에 있죠 ㅎㅎ 타이거는... 뭐 그렇습니다. 변칙적으로 구성된 부분이 너무 많아서...

    연구실에 프비 쓰다가 레퍼드 쓰면 디렉토리 구조에서 익숙한 그 무엇이 확 다가옵니다.^^

IT강국 대한민국

개발&Development/웹 2007/10/22 21:18 posted by 겐도
"마XXX"오락을 띄우는데 "nPxxxxxx"의 "GxxxGuxxx"가 뜨다가 죽으면서 키보드 드라이버를 해 드셨다. 키보드 드라이버가 완전 사망, 키 입력을 할 수가 없다. 그거 고치느라 쌩쑈를 했다. 마침 타블렛이 연결안되어 있었으면 우짤뻔 했노. 패스워드를 타블렛으로 입력하는 경험을 하게 해준 그 프로그램에게 감사.
(최근에 얼핏 USB 키보드까지 제어하겠다라는 금융권 보안시스템의 이야기를 듣고 어찌나 무섭던지. 일반인들은 키보드 나가면 OS 재설치 해야 하는데 말이쥐.)

부모님이 집에 오셨다가 전기요금의 E-mail 청구서를 한번 보게 해달라고 하셨다. 대단한 "한X". Excel로 보내 주셨내. 집컴에는 오피스가 없어서(완전 오락용) 급한대로 Excel Viewer를 설치해 봤다. 열수 없다고 한다. 아마 매크로나 VBA가 들어가 있겠지? 전 국민에게 프로그램 사주고 이런 짓을 하는 것도 아니고, 설마 불법 복사를 조장하나? 그냥 종이 청구서를 받기를 권장해 드렸다.

기차표를 예매하기 위해서 "Qxxx" 사이트에 들어간 겐도군. Active-X가 날 잡아먹으려는 듯 설치해 달라고 아우성이다. 그거 다 깔면 정말 안전해 지나? 그러면 다 깔아 주겠건만 너희들은 다 허수아비자누. 내용 전송 암호화? AES 사용했을 때 보다 얼마나 안전한데? 키보드 로깅 방지? 뚫을려면 다 뚫자누.


몇몇 부분들은 뭐 나름 국내의 정보 보호를 위해서라지만(정확히는 보안업체 보호 -ㅅ-) 그것이 다시 발을 잡고 잇는건 아닌지. 초기에야 특정 플랫폼으로 제한 하는 것이 전자상거래 등을 발전시키는데 도움이 되었지만 이제는 다시 기반에 대해 좀 털털 털필요가 있는 것 같다. 어차피 곧 게임기나 셋탑에서 전자결제를 해야 하는데 현재의 굴레때문에 못하잔수. 생각하기 귀찮다고 기존 방법만 고수하지 말고 어서 폭발적인 확장을 위한 초석을 다져야 하지 않을까? 뭐 덤으로 IT경기도 좀 살아나고;;;;

뭐 어디선가는 평등권으로 정부를 갈구고 있지만 개인적으로는 그에 앞서 기술적으로도 플랫폼을 좀더 유연하게 만들어야 할 필요가 있다고 생각한다. 당연히 안정성도 매우 중요하므로 상당한 투자가 필요하겠지만 사회간접자본으로 보고 추친해야 할 항목 중 하나일 것이다. 쓸데없이 땅파지 말고 -ㅅ-.

Trackbas address :: http://gendoh.tistory.com/trackback/2510970 관련글 쓰기

  1. Tracked from Web 2.0 Asia at 2007/10/24 16:37  삭제

    Subject: Will video calling take off one day?

    (This post was inspired by this recent Seoul Digital City entry) Since the arrival of 3.5G HSDPA network in Korea, wireless carriers such as SKT and KTF have been busy trying to find the "killer app" that's compelling enough to have people switch to the.....

  2. Tracked from Web 2.0 Asia at 2007/10/24 16:37  삭제

    Subject: Meanwhile, this is what Korea's no 5 site looks like on Firefox

    On the previous post, I wrote about Neowiz. Neowiz is widely regarded as the No 5 internet portal in Korea, behind Naver, Daum, Nate+Cyworld, and Yahoo Korea. Given that, this is exactly how the No. 5 Korean internet portal's main page looks on Firefox......

나의 FeedDemon 에서 글을 구독하다가 부분 공개라 직접 가서 글을 봐야 할때

글이 스크롤이 안된다.

일부 자바스크립트로 스크롤을 구현한 경우 제대로 스크롤이 되지 않는다. 브라우저가 임베디드 되어 있는 경우 IE로 인식 되지만 IE가 아닌것을.

전에 일부 블로그가 스크립트로 커스텀 스크롤바를 만들던지 하면 스크롤이 안되서 자바스크립트를 끄거나 주인장을 협박하기도 하였는데 이번엔 어째야 하나.



사람들이 다양한 이펙트를 위해 JS를 막 쓰려고 하면 일단 부정적인 의견을 내는것이, 예외상황들 다 고려하기가 너무 어렵다. 사이드바에 드래그&드랍을 구현하고 나서 이후 버그리포팅들을 보면, 정말 골때리는 케이스들이 많다. 그리고 아직도 버그 천지일 것이다.

예전에 윈도우 프로그래밍을 하면서 느낀 것 중 하나가, 직사각형 버튼을 라운딩 하려고 커스텀 컨트롤을 쓰면 나중에 망할 가능성이 높다는 것. 커먼 컨트롤들은 왠만하면 손 안대는 것이 장기적으로 봤을 땐 좋다. 물론 치고 빠질거면 상관 없음. 뒷사람이 날밤을 까든 말든.


프로그래머의 적중 하나가 UI 디자이너라는 말이 생각이 난다. 둘의 방향이 오히려 반대적인 성향도 있어서. 뭐 애시당초 커먼 컨트롤이 너무 투박하게 생겨서 디자이너의 입맛에 맞지 않는다는 프로그래머의 원죄때문이기도 하지만.

Trackbas address :: http://gendoh.tistory.com/trackback/2510962 관련글 쓰기

  1. Commented by ghost at 2007/09/17 00:46

    떠허 뒷골~~~ 사이드바~~는 ... 아직 크게.... 소문내지 마시오..