반응형
검색결과

검색결과는 사용자의 질의에 대한 검색엔진의 결과이다. 보통 랭킹알고리즘의 적용결과를 반영하여 순서대로 보여주고, 검색대상이나 형태에 따라 탭이나 그룹핑하여 보여주는, 요즘 말하는 통합검색 또는 Universal Search라고 하는 것이 검색결과의 일반적인 모습이다.

사용자들은 질의어를 입력하기 전 제공하는 다양한 옵션에 비하여 검색결과를 어떤 순서로 어떻게 보여주는가에 따라서 검색엔진이 좋다 나쁘다를 말하는 경우가 많다.

오늘 이야기 하고 싶은 것은 , 검색결과의 Visualization에 대한 이야기이다.


AMAZNODE : Amazon related Product Search

사용자 삽입 이미지

http://amaznode.fladdict.net/

이 검색서비스는 검색결과가 플래쉬로 만들었다. 왜 이 검색을 Related Product Search라고 하냐 하면, "customers who bought this item also bought" 짧은 영어실력으로 풀어보면, '이 책을 사신 고객이 사신 책' 즉, 내가 찾는 책을 산 사람과 관련이 있는 플래쉬로 선으로 연결해서 보여주는데, 책 한권 한권이 뿅뿅 올라온다.

검색결과의 연관성을 비주얼하게 보여준다는 아이디어는 매우 독창적이기는 하지만, 사실 연관성이 선으로만 연결되는 직관성이 좀 떨어진다.


Blackdogair.com

사용자 삽입 이미지
 www.blackdogair.com

위에서 소개한 Amaznode 검색서비스와 이 서비스 모두 일종의 매쉬업 검색서비스라고 불러야 할 것 같다. 이 서비스 역시 아마존의 내가 산 것을 산 사람이 산 것에 대한 연관관계를 비주얼하게 보여준다.

하지만, Amaznode 서비스에 비해서 훨씬 직관적이다.


Vivisimo

사용자 삽입 이미지
http://www.vivisimo.com

한때 검색업계의 루키로 한참 각광을 받던 서비스이다. 이 서비스는 소위 검색결과의 Clustering이다. 검색결과를 분석해서 몇가지 주제별로 Clustering한다는 것이 이 서비스의 장점이다.

Clustering이라는게 개념은 쉬어보이지만, 생각보다 복잡한 기술이 필요하고, 아직 국내에서도 상용화되기에는 기술의 완성도가 많이 떨어진다고 한다.

개인적으로 검색결과의 비주얼은 결국 이 Clustering이 기반이 되어야 하지 않나 생각된다. 위에서 언급한 2개의 서비스는 '이 물건을 산 사람이 산 다른 물건'이라는 것은 그룹핑이 되고 있으니..


Kartoo.com

사용자 삽입 이미지
http://kartoo.com

비주얼 메타 서치엔진이라고 말하는 검색서비스이다. 정말 검색엔진 결과의 최고봉이 아닌가 생각된다. 위에서 언급한 검색결과의 주제별 Clustering이 최적화되어 플래쉬로 이미지로 구현되고 있다.

예를 들어 autos.yahoo.com은 담고 있는 컨텐츠의 주제를 보험, 회사, 리뷰, 프라이스 등이 포함되어 있다고 비주얼하게 보여주면서 특정 주제를 선택하면, 주제와 관련된 사이트들이 비주얼하게 선으로 연결되어 보여진다.

국내의 온톨로지 및 검색엔진 회사인 솔트룩스(소금과 빛인가..)에서 Kartoo사의 시각화툴인 Visu를 판매하고 있는데, 검색결과 뿐만 아니라 각종 컨텐츠의 비주얼하게 보여주는데 큰 효과가 있어보인다.
반응형

'개발도 하냐?' 카테고리의 다른 글

웹표준준수 실무개발 방법론  (0) 2008.10.01
웹표준 준수사항 몇가지  (0) 2008.10.01
FLEX  (0) 2008.09.22
CSS 레이아웃기초  (1) 2008.02.02
웹표준개발방법론  (0) 2008.02.02
반응형

Web 2.0과 Ajax
 

 

Web 2.0을 기술적으로 구현하는데 있어서 가장 많이 눈에 띄는 단어는 Ajax이다. Ajax로 개발 했을 경우 궁극적인 모습은 어떠한 클라이언트 사용자의 브라우저, 운영체제, 디바이스 등에 상관없이 웹상에서 Desktop Application 수준의 application을 이용하는 것이라고 할 수 있다. 이미 Google Map, Yahoo Map 등의 Ajax 레퍼런스 사이트들은 웹 브라우저에서 Desktop Application 수준의 화면과 기능을 구현할 수 있다는 여지를 충분히 보여줬다.

 

Ajax로 구현한 화면을 RIA(Rich Internet Application)라고 달리 말할 수 있는데, 이미 2000년부터 이러한 Desktop Application 수준의 UI를 구현하기 위한 많은 노력이 있어왔고, 현재 X-internet 솔루션이라는 이름으로 여러 벤더에서 제품을 출시했고 시장에서 이미 도입된 상태이다. 그 중 가장 안정적이고 화려한 UI를 자랑하는 제품이 이번에 소개하고자 하는 Adobe Flex이고 Flex의 특징이 무엇이며, Flex로 Web 2.0을 어떻게 구현하였는가도 알아보도록 하겠다.

 

Ajax와 Flex

 

 

Web 2.0에서 중요한 기술적 이슈 중 하나가 Rich Client Application이라는 개념일 것이다. 기존의 Web Application의 편리한 배포, 관리, 저렴한 유지 비용 등의 장점과 Desktop Application 수준의 사용자 편의성, 효율적인 데이터 통신, 견고한 아키텍처 구현 등의 장점을 합친 것이 RIA이라 할 수 있고 Web 2.0을 구현하고 UI에 RIA를 적용하기 위해 Google과 Yahoo에서 도입한 기술이 Ajax와 Flex 등이 있다.

 

Ajax는 차세대 웹 어플리케이션을 위한 최선의 대책이 될 수도 있지만, 아직까지 장점만큼 단점도 많이 존재하는 대안이라 볼 수 있다. Javascript + XML이라는 태생적 한계 때문에 생기는 Javascript가 가지는 언어적 한계와 구현의 복잡성, 웹 브라우저별로 상이한 DOM 핸들링 및 메모리 처리방법으로 인한 호환성 문제, Back/Forward, Bookmark등의 사용자 편의성 문제, Ajax를 이해한 제대로 된 기획안 부재와 Flash 수준의 화려한 UI API 부재 등의 단점으로 Ajax로 선뜻 개발을 주도하기가 쉽지 않은 현실이다. 그래서 Ajax의 여러 가지 문제점을 극복하고 Flash 수준의 화면을 보여주는 RIA를 만들어 Web 2.0을 실현하는 최선의 대안이 Flex 이다.

 

Flex 란?

 

Flex는 앞서 말했듯이 RIA를 구축하기 위한 솔루션으로써 정식 명칭은 Flex Presentation Server이다. 기존의 정적이고 수동적인 웹 환경에서 보다 능동적이고 개방적인 WEB 2.0 기술 구현을 쉽게 해주는 스크립트 언어이다. Flex는 데스크탑의 풍부함과 웹의 광범위함을 접목시킨 리치 인터넷 애플리케이션(Rich Internet Applications)의 UI 개발을 태그 및 스크립트로써 구현할 수 있도록 해주는 최적의 솔루션이다.

 

특히 서버 클라이언트 간에 자유롭게 커뮤니케이션 할 수 있는 개발환경을 통해 XML로써 필요한 데이터만을 적시에 서버로부터 가져오고, 특정 클라이언트가 새로운 데이터를 다른 클라이언트와도 손쉽게 공유함으로써 성능 개선뿐만 아니라 양방향 커뮤니케이션이 주는 WEB 2.0 서비스 개발환경이 되는 것이다.


Flex는 최근 출시된 Flash player 8이 주는 우수한 성능과 파일 접근을 비롯한 자바스크립트 인터페이스 API 등의 다양한 API를 제공함으로써 웹 브라우저 안에서 해결하고 있다. 또한 자바스크립트, AJAX 및 ActiveX와 연동하는 인터페이스 API를 제공하고, 웹 서비스, 자바 빈즈 등의 비즈니스 객체들을 호출할 수 있는 서비스를 제공하여 애플리케이션과 연동을 가능하게 한다.

 

Flex는 Flash 기술로부터 탄생했다. 그래서 Flash나 Flex로 구축된 사이트는 비슷한 UI를 가진다. Flex는 Flash의 컴포넌트들을 XML 태그로 표현할 수 있도록 컴포넌트화 하였다. Flash는 Flash8로써 각종 도형과 컴포넌트들을 마우스로써 디자인하는 반면, Flex는 그런 Flash 컴포넌트들을 XML 태그 스크립트를 이용하여 코딩한다.

 

Flex, 어떤 기술이 적용되어 있나?

 

개발언어 측면에서 플렉스는 XML, ECMAScript, CSS, UTF-8 기술요소를 사용한다.

플렉스의 mxml은 'mx'라는 XML 네임스페이스를 사용하며 XML 문법을 따르며, ECMAScript는 플렉스 액션스크립트가 준수하는 표준으로 자바스크립트와 유사하다. 또한 MXML 스타일은 CSS 문법을 지원하고, MXML 파일은 UTF-8로 작성 및 저장되어 서버에서 처리된다.


서버 서비스 측면에서 DOM 레벨 3 이벤트 모델은 플렉스의 이벤트 모델로 사용되며 DOM 트리 구조를 통해 이벤트를 전달한다. 플렉스 애플리케이션은 HTTP 통신뿐 아니라 XML 통신 프로토콜인 SOAP 메시지로 데이터를 송수신할 수 있다. 이외에 플렉스는 자바 애플리케이션 서버에서 작동되며 플렉스에서 자바빈즈 컴포넌트의 메쏘드를 호출하여 결과를 받을 수 가 있다.


Flex 서버는 어떻게 구성되나?

 

Flex의 구성요소는 모두 국제 표준에 기반한 것으로 ActionScript(Javascript), MXML(XML), DOM3 등의 표준 위에 Adobe의 API와 클래스 라이브러리가 추가된 형태이다.  Javascript의 언어적인 단점을 보안한 ActionScript는 강력한 객체지향 언어로 거듭났을 뿐만 아니라, Flash의 기존 버전에서 검증되었던 강력한 라이브러리들을 Flash보다 훨씬 편리하고 쉽게 이용할 수 있는 길을 제공해 준다.

 

MXML은 요즘 웹 어플리케이션 개발 방법론에 부합하게 XML 태그 형식으로 UI를 구성하게 해주는 훌륭한 도구라 할 수 있다. 또한 Flex는 Flash Player가 동작한다면 운영체제, 브라우저, 디바이스를 가리지 않고 실행되 는 완벽한 유비쿼터스 솔루션이라고 할 수 있다. 즉, 한번의 개발로 ActiveX나 JVM등에 관계없이 IE, Firefox, PDA, 핸드폰, 위성 단말기 등 어디에서든지 인터넷으로 같은 어플리케이션을 공유할 수 있게 해주는 미래지향적인 환경을 제공한다.


Flex 도입의 궁극적인 목표는 화려한 UI와 다양한 기능을 가진 Desktop Application수준의 Web Application을 만들어 내는 것에 있다. 이미 많은 다국적 기업과 국내 대기업에서 Flex를 도입해서 기존에 Clinet/Server 환경 기반에서 사용해 왔던 Install 기반의 Desktop Application을 웹으로 전환을 하고, 또 거기에 따른 많은 비용 절감과 높은 사용자 만족도를 가져올 수 있게 되었다

 

flex_archi-cache798.gif 

** Flex 서버 아키텍쳐

 

 

 

Flex는 어떻게 구동되나?

 

사용자가 플렉스로 구현된 사이트로 접속하면 웹애플리케이션 서버에 설치된 플렉스 서버는 MXML 코드를 SWF(플래시 실행파일)로 컴파일해서 사용자PC에 전송되어 플래시플레이어가 이를 보여준다.


사용자의 플래시플레이어에서 구동되기때문에 사용자는 브라우저에 상관없이 동일한 화면을 보게됩니다. 아래는 플렉시 구동절차에 대해 간략히 표현된 그림이다.

 

Capture4-cache798.gif

** Flex 사이트 구동절차

 

Flex로 구축하였을 때의 장점은?

 

Flex를 통한 Web 2.0 구현시 장점은 사용자 측면과 개발자 측면에서 살펴볼 수 있다.

사용자 측면에서 플렉스는 기본적으로 제공하는 컴포넌트 외에 플래시 컴포넌트 및 사용자 정의 컴포넌트가 있어 사용자에게 편리한 유저인터페이스를 제공할 뿐만 아니라, 플래시플레이어에서 작동하므로 어떤 환경의 클라이언트더라도 동일한 화면을 볼 수가 있다.


플렉스는 한번 로딩되면 그 다음부터는 서버로부터 실행코드를 받을 필요가 없으므로 실행속도가 빠르며 서버에 부하를 적게 준다. 모든 플렉스 컴포넌트는 화면크기에 맞게 자동으로 사이즈를 조절하므로 해상도에 따라 애플리케이션을 따로 개발할 필요가 없다.


개발자 측면에서 플렉스는 표준을 준수하는 XML태그(mxml)과 액션스크립트로 코딩되므로 html 코딩을 이해하는 수준정도면 쉽게 배울 수 있다. 다양한 유저 인터페이스를 기본 컴포넌트로 제공하므로 개발자의 코딩량이 줄어들어 개발속도를 향상할 수 있고, 다양한 방법으로 컴포넌트를 만들 수 있어 코드재사용성이 높아 개발속도를 향상할 수 있다. 기존 시스템 및 다른 애플리케이션과 연동할 수 있는 다양한 방법을 제공한다.

 

맺음말

 

 

Web 2.0과 Flex에 대해 간략하게 알아보았다. 사실 Web 2.0을 설명하는 부분이 너무 빈약하고 Ajax를 너무 비판적으로 설명했지만, Ajax는 단점보다 장점을 많이 이용해야 하는 것이 바람직한 것이고, 단지 Flex는 그러한 단점까지도 극복하게 해준다는 점을 말씀 드리고 싶다.

 

Web as Platform, 사용자 중심/참여, 개방성, Simple&Lightweight, Decentralized, Long Tail, Blog, RSS, tag, Mashup, Internet Clipboard, 개발자 중심 생태계 등 Web 2.0을 설명하기 위해 담고 싶은 말이 너무나도 많지만 간단히 Adobe Flex를 소개하는 자리인지라 태깅정도의 언급만 하고 유저들이 직접 찾아보는 수고를 기대하고 싶다.


 

 

 

 

 

 

플랙스2 의 기본 사용법

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/docs/Part1_GetStarted.html

 

플랙스2 유저 가이드

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/docs/Part6_Using_FB.html

 

플랙스2 래퍼런스

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/langref/index.html

 

플랙스2 개발가이드

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/docs/Part2_DevApps.html

 

플랙스2 컴퍼넌트의 작성과 확장

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/docs/Part3_CreateComps.html

 

플랙스2 어플리케이션의 구축과 데프로이

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/docs/Part7_Build_Deploy.html

 

Flex Data Service 2 to Java

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/fds2javadoc/

 

액션스크립트 3.0

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/docs/Part5_ProgAS.html

 

액션스크립트 2.0 -> 3.0 마이그래이션

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/langref/migration.html

 

반응형

'개발도 하냐?' 카테고리의 다른 글

웹표준 준수사항 몇가지  (0) 2008.10.01
검색결과의 Visualization  (0) 2008.09.24
CSS 레이아웃기초  (1) 2008.02.02
웹표준개발방법론  (0) 2008.02.02
웹표준관련 책  (0) 2008.02.02
반응형

제가 주로 쓰는 방법을 말씀드리자면


먼저 gdb <실행화일> -c <core 화일> 하여 디버거를 실행시킨후
아래와 같이 bt(backtrace)명령어로 어떤 함수를 부르다 죽었는지
확인합니다.


(gdb) bt
#0 0xef663628 in fprintf () from /usr/lib/libc.so.1
#1 0x15b0c in fxRslt (gubun=0x56bf0 "1", from=0x57070 "010305",
    to=0x574f0 "010305", loginid=0x57970 "TEST001")
    at /fxMain/SRC/fxWeb/cgi/rslt.c:50
#2 0x1597c in main (argc=1, argv=0xeffff964)
    at /fxMain/SRC/fxWeb/cgi/fxrslt.c:85
(gdb)


보니까 main->fxRslt->fprintf 하다가 죽었군요. 장소는 rslt.c 에 50번째 줄.
이제 frame 명령어로 해당 스택으로 이동합니다. 이후 list 명령어로
소스파일을 확인해봅니다.


(gdb) frame 1
#1 0x15b0c in fxRslt (gubun=0x56bf0 "1", from=0x57070 "010305",
    to=0x574f0 "010305", loginid=0x57970 "TEST001")
    at /fxMain/SRC/fxWeb/cgi/rslt.c:50
50 fprintf(logfile,"GUBUN:[%c] FROM:[%s] TO:[%s] LOGIN:[%s]\n",
(gdb) list
45 loginid[i] = '\0';
46 strcpy(audit_id, loginid);
47
48
sprintf(logfname,"%s/%s.log",FXRSLT_LOGDIR,RSLT_LOGINIT,loginid);
49 logfile = fopen(logfname, "w");
50 fprintf(logfile,"GUBUN:[%c] FROM:[%s] TO:[%s] LOGIN:[%s]\n",
51 gubun[0],from,to,loginid);
52
53 if (ChkDate(from,to)==0) {
54 fprintf(logfile,"Error in ChkDate\n");
(gdb)


그담엔 print명령어등으로 각 변수값을 조사하여 NULL이 있는지 체크해보면
됩니다.
----------------
[스크랩] Java VM Core Dump 분석   조회(41)
 
java 프로그램 | 2005/01/02 (일) 16:17   공감하기(0)  | 스크랩하기(0) 
 
 

대부분의 문제 발생 원인(리스트는 우선 순위가 아닙니다.)
 
1.       해당 어플리케이션이 사용하는 Native 코드 사용시 발생
 
2.       모든 Type 2 JDBC 드라이버는 native DBMS 라이브러리를 사용하므로 이러한 유형의 오류가 발생할 수 있습니다.  이 드라이버가 문제의 원인인지 판별하려면 pure java(Type 4) JDBC 드라이버로 전환합니다.
 
3.       JNI 호출을 사용하여 액세스하는 모든 native 라이브러리도 이러한 유형의 오류가 발생할 수 있습니다.  응용 프로그램에서 이러한 라이브러리를 사용하는 경우 신중하게 조사해야 합니다.  보통 이러한 라이브러리는 응용 프로그램에서 해당 기능을 필요로 하기 때문에 제외시키기 어렵습니다.
 
4.       JVM 자체도 native 프로그램이며 이러한 오류가 발생할 수 있습니다.  JVM이 의심스러운 경우 인증된 다른 JVM 또는 상위 버전을 사용하여 JVM 버그가 오류의 원인인지 파악합니다.  많은 JVM 버그는 JIT 컴파일러 사용과 관련이 있으며 종종 이 기능을 해제하면 이러한 유형의 문제가 해결되기도 합니다.  이 기능을 해제하려면 대개 -Djava.compiler=none 명령 옵션을 사용합니다. 
 
위와 같은 원인 이외에도 발생 원인은 많습니다. Core file이 생성되면 이 Core file을 분석하여 발생원인의 범위를 좁혀 가야 합니다.(발생원인을 좁혀가는 거지 발생원인을 정확히 집어내기는 어렵습니다. – 능력이 출중한 사람은 되겠지요.)
이 문서에서는 Core file 분석 Tool인 dbx나 gdb을 사용하지 않고 각 OS에서 제공하는 Core File분석 툴을 사용 하여 분석하는 방법에 관하여 알아봅니다.
 
참고 : 다음과 같은 경우 Core File이 생성되지 않을 수도 있습니다.
 
•        시스템 또는 사용자 별 ulimit -c(코어 파일의 설정된 크기)를 검사합니다.
•        사용 가능한 사용자 디스크 공간을 검사합니다(예: 디스크 할당량이 있습니까?)
•        Solaris에서는 /etc/system 파일에 다음 매개변수가 있는데 이 값에 따라 코어 파일이 생성되지 않을 수 있습니다. set sys:coredumpsize=0
•        Linux에서는 기본적으로 코더 덤프가 오프로 있습니다.  RedHat Advanced Server 2.1에서는 구성 정보 파일이 /etc/security에 있습니다.  limits.conf라는 파일에서 설정 사항을 확인할 수 있습니다. "core"라는 단어를 찾아보십시오.  0으로 설정되어 있으면 coredump를 만들 수 없습니다.
•        HP OS 설정 커널 매개변수 maxdsiz(max_per_proc_data_size는 사용자 프로세스의 데이터 세그멘트 크기를 늘림) 64M에서 134M 이상으로 변경합니다. 

 
Core File 분석 Tool
다음은 각 OS에서 사용하는 분석 툴입니다.
분석을 위해서는 statck분석 툴과 map분석 툴을 사용합니다.
    Solaris:
        stack 명령 = pstack
        map 명령 = pmap
    IBM의 추가 기능이 있는 AIX 5.2 이상(이전 버전에서는 사용할 수 없음)
        stack 명령 = procstack
        map 명령 = procmap
        참고: http://www-106.ibm.com/developerworks/eserver/articles/AIX5.2PerfTools.html
 
    Linux:
        stack = lsstack
        map = pmap
 
참고: http://sourceforge.net/projects/lsstack/에서 lsstack을 가져와서 Linux 플랫폼에서 빌드할 수 있습니다.
이 명령은 Solaris의 pstack에 해당합니다.
 
http://web.hexapodia.org/~adi/pmap.c에서 pmap 소스를 가져와서 Linux 플랫폼에서 빌드할 수 있습니다.
 
HPUX: 기본 제공 툴은 없으며, GDB, ADB을 사용함.
 
명령어 사용
 
각 명령어의 보다 자세한 옵션 사항은 명령어의 Help을 참조하십시오.
 
Solaris 예
 
/usr/bin/pstack [-F] [pid | core] > [분석내용저장파일명]
 
ex) pstack core2004-10-29 > coreStack.txt
 
/usr/bin/pmap [ -rslF ]  [ pid | core ] > [분석내용저장파일명]
 
Ex) pmap core2004-10-29 > coreMap.txt
 
 
분석
 
coreStack.txt 내용
core 'core' of 20956:   /wwsl/sharedInstalls/solaris/wls70sp2/jdk131_06/bin/../bin/sparc/nativ
-----------------  lwp# 14 / thread# 25  --------------------
 ff369764 __sigprocmask (ff36bf60, 0, 0, e6181d70, ff37e000, 0) + 8
 ff35e110 _sigon   (e6181d70, ff385930, 6, e6180114, e6181d70, 6) + d0
 ff361150 _thrp_kill (0, 19, 6, ff37e000, 19, ff2c0450) + f8
 ff24b900 raise    (6, 0, 0, ffffffff, ff2c03bc, 4) + 40
 ff2358ec abort    (ff2bc000, e6180268, 0, fffffff8, 4, e6180289) + 100
 fe3c68fc __1cCosFabort6Fl_v_ (1, fe4c8000, 1, e61802e8, 0, e9f90420) + b8
 fe3c59f0 __1cCosbBhandle_unexpected_exception6FpnGThread_ipCpv_v_ (ff2c02ac, fe53895c, fe4dc164, fe470ab4, fe4c8000, e6180308) + 254
 fe20a8b4 JVM_handle_solaris_signal (0, 25d5b8, e6180d90, fe4c8000, b, e6181048) + 8ec
 ff36b824 __sighndlr (b, e6181048, e6180d90, fe20a8cc, e6181e14, e6181e04) + c
 ff3684d8 sigacthandler (b, e6181d70, 0, 0, 0, ff37e000) + 708
 --- called from signal handler with signal 11 (SIGSEGV) ---
 e9f90420 Java_HelloWorld_displayHelloWorld (25d644, e6181224, e61819b8, 0, 2, 0) + 30
 00090ae4 ???????? (e6181224, e61819b8, 25d5b8, fe4c8000, 0, 109a0)
 0008dc4c ???????? (e61812c4, ffffffff, ffffffff, 97400, 4, e61811b8)
 0008dc4c ???????? (e618135c, e61819b8, fe4c8000, 99600, c, e6181250)
 0008dc4c ???????? (e61813ec, f76a2f90, e618147c, 99600, c, e61812f8)
 0008ddb4 ???????? (e618147c, f68578b8, 0, 99974, c, e6181388)
 0008ddd8 ???????? (e618154c, e61815c8, e61815cc, 99974, 4, e6181410)

 
굵은 부분이 오류가 발생한 부분을 나타낸다. “--- called from signal handler with signal“을 찾으면 된다. 이 오류가 발생한 메모리 영역이 “e9f90420“ 이다. coreMap.txt 파일에서 이 주소값이 포함되는 범위를 찾아본다.
 
coreMap.txt 내용
E9500000   1184K read
E9680000   1392K read
E9800000   4608K read
E9F60000    136K read/write/exec
E9F90000      8K read/exec         /home/usera/wls70/solaris/projectWork/lib/libhello.so
E9FA0000      8K read/write/exec   /home/usera/wls70/solaris/projectWork/lib/libhello.so
E9FB4000      8K read/write/exec
E9FC0000    120K read/exec         /usr/lib/libelf.so.1
E9FEE000      8K read/write/exec   /usr/lib/libelf.so.1

 
“e9f90420“ 가 포함된 범위에서 사용되는 라이블러리는 “libhello.so“ 임을 알 수 있다.
Core 발생은 주 원인은 “libhello.so“ 일 가능성으로 추측할 수 있다. 
 


반응형
반응형

GDB 사용하기
 
개요
gdb [-help] [-nx] [-q] [-batch] [-cd=dir] [-f] [-b bps] [-tty=dev] [-s symfile] [-e prog] [-se prog]
[-c core] [-x cmds] [-d dir] [prog[core|procID]]
 
1.    GDB
 
GDB같은 디버거의 목적은 다른 프로그램 수행 중에 프로그램 내부에서무슨 일이 일어나고 있는지 보여주거나 프로그램이 잘못 실행되었을 무슨 일이 일어나고 있는지 보여주는 것이다. GDBC, C++, Modula-2 프로그램을 디버그 있다.
쉘에서 gdb GDB 시작하면 quit 종료명령을 주기전까지는 터미널로부터 명령라인을 읽어 들인다. help명령을 사용하여 gdb내부에서 도움말을 있다.
디버깅을 하기 위해서는 –g옵션을 주고 컴파일/링크 해야 한다. 만약 링크가 libg.a 찾을 없다고 하면서 실패하게 되면, /usr/lib/ligb.a 갖고 있지 않기 때문이다. 파일은 특별한 라이브러리로서 디버깅 가능 C라이브러리이다. libc 패키지에 포함되어 있거나 또는 libc 소스 코드를 받아서 컴파일 하면 생긴다. /usr/lib/libc.a /usr/lib/libg.a 링크 시켜도 된다.
 
l         코어파일 분석하기
 
코어파일은 충돌할 당시 프로세스의 메모리 이미지를 덤프한 것이다. 코어파일을 gdb 함께 사용하여 프로그램의 상태를 조사하고 실패 원인을 규명할 있다. 어떤 예기치 않은 일이 발생하여 비정상적인 종료가 발생할 운영체계는 디스크에 코어 파일을 남긴다.메모리에 관한 문제는 Checker 패키지를 사용하여 예방할 있다. 하지만 메모리 fault 일으키는 경우에는 충돌하면서 파일을 덤프한다. 코어파일은 일반적으로 프로세스를 실행시킨 현재 작업 디렉토리에 생성되지만 프로그램 내에서 작업 디렉토리를 바꾸는 경우도 있다.
 
보통 리눅스는 부팅시에 코어 파일을 만들지 않도록 세팅되어 있다. 코어 파일 생성을 가능케 하려고 한다면 그것을 다시 가능케 하는 셀의 내장 명령을 사용한다.
만약C 호환 (tcsh) 쓰고 있다면 다음과 같이 명령을 내린다.
%  limit core unlimited
만약 본쉘류( sh , bash , zsh , pdksh ) 사용하고 있다면,
$  ulimit –c unlimited
같은 명령을 내린다.
코어파일을 함께 사용하기 위해선 다음과 같이 한다.
% gdb program core
 
 
 
l         실행 중인 프로그램 디버깅하기
 
gdb 이미 실행중인 프로그램도 디버깅할 있게 해준다. 프로세스 실행을 가로채고 조사한 다시 원래 상태로 실행하도록 있다. attach명령을 사용하여 실행중인 프로세서에 gdb 붙인다. attach 명령을 사용하기 위해서는 프로세스에 해당하는 실행 프로그램에 허가권을 가지고 있어야 한다. 예를 들어 프로세스 ID 254번으로 실행 중인 pgmseq 프로그램이 있다면 다음과 같이 한다.
% gdb pgmseq
% attach 254
다음과 같이 해도 된다.
% gdb pgmseq 254
 
일단 gdb 실행 중인 프로세스에 부착되면 프로그램을 일시 중지 시키고 gdb명령을 사용할 있도록 제어권을 가져온다. break 사용하여 중지점을 사용할 있고 중지점에 이를 때까지 실행하도록 continue 명령을 사용할 있다.
detach명령을 사용하여 gdb 실행 중인 프로세스에서 떼어 낸다. 필요에 따라 다른 프로세스에 대하여 attach명령을 사용할 있다.
 
2.    gdb시작하기
 
% gdb                       - gdb 먼저 실행 file이라는 명령으로 program 부른다.
% gdb  program          - 일반적인 방법이다.
% gdb  program  core  - 코어파일을 사용할 동시에 인자로 준다.
% gdb  program  1234  - 실행중인 프로세스를 디버그 하려면 프로세스 ID 번째 인자로 주면 된다. 명령은 gdb (‘1234’ 이름의 파일이 없다면) 프로세스 1234 접속시킨다.(gdb core파일을 먼저 찾는다.)
 
실행절차
%  gcc  –g  test.c  –o  test
%  gdb  test
명령을 실행하면 다음과 같은 메시지가 나타난다.
% gdb test
GNU gdb 4.18
Copyright 1998 Free Software Foundation, Inc.
GDB is free software, covered by the GNU General Public License, and you are
Welcome to change it and/or distribute copies of it under certain conditions.
Type “show copying” to see the conditions.
There is absolutely no warranty for GDB.  Type “show warranty” for details.
This GDB was configured as “i386-redhat-linux”...
(gdb)
 
3.    많이 사용하는 GDB명령어
 
list
현재 위치에서 소스 파일의 내용을 10 보여준다
list 2, 15 : 소스 파일의2 ~ 15 까지를 보여준다.
run
프로그램을 시작한다.(break 있다면 break까지 실행)
run arg : 새로운 인수를 가지고 프로그램을 시작한다.
arg “*” “[…]” 포함할 수도 있다.
쉘의 사용까지도 확장될 있다.
“<”,“>” , “>>”같은 입출력 방향 재지정기호도 또한 허용된다.
break
특정 라인이나 함수에 정지점을 설정한다.
break function : 현재 파일 안의 함수 function 정지점을 설정한다.
break file:function : 파일file안의 function 정지점을 설정한다.
watch : 감시점 설정(감시점은 어떤사건이 일어날 때에만 작동한다)
until : 실행중 line까지 실행
clear   
특정 라인이나 함수에 있던 정지점을 삭제한다.
delete 
몇몇 정지점이나 자동으로 출력되는 표현을 삭제한다.
next
다음 행을 수행한다. 서브루틴을 호출하면서 계속 수행한다.
호출이 발생하지 않으면 step 같다.
next n : 이를 n 수행하라는 의미
step
줄씩 실행 시킨다.
함수를 포함하고 있으면 함수 내부로 들어가서 줄씩 실행시킨다.
print
print expr : 수식의 값을 보여준다.
display
현재 display 명령의 목록을 보여준다.
bt
프로그램 스택을 보여준다. (backtrace)
kill
디버깅 중인 프로그램의 실행을 취소한다.
file
file program : 디버깅할 프로그램으로서 파일을 사용한다.
cont
continue : 현재 위치에서 프로그램을 계속 실행한다.
help
명령에 관한 정보를 보여주거나 일반적인 정보를 보여준다.
quit
gdb에서 빠져나간다.
 
  
4.    gdb 해보기
 
예제1
 
% vi test.c
      1 #include <stdio.h>
      2
      3 main()
      4 {
      5     int i;
      6     double j;
      7     /*다음은i/2+i 값을 출력하는 문이다.
      8       i1이면 j1.5 되어야 하지만 실제는 그렇지 않다.*/
      9     for( i=0; i<5 ; i++){
     10         j=i/2+i;
     11         printf(“j is %f n”,j);
     12     }
     13 }
% gcc –g test.c –o test
% test
실행이 되지 않으면 mv test a.out으로 하여a.out 실행시킨다. 실행을 시키면 원하는 답이 아니다. 그러면 gdb 해보자.
% gdb a.out
(gdb) list        // list 소스 내용을 10줄씩 보여준다.
1         #include <stdio.h>
2
3         main()
4         {
5         int i;
6         double j;
7         /*다음은i/2+i 값을 출력하는 문이다.
8         i1이면 j1.5 되어야 하지만 실제는 그렇지 않다.*/
9         ( i=0; i<5 ; i++){
j=i/2+i;
 
(gdb) b 9  // break 9 : for 문에 이상이 있다고 판단하여 line 9 breakpoint 잡는다.
Breakpoint 1 at 0x80483d6: file test.c, line 9.
(gdb) r     // run : breakpoint까지 실행된다.
Starting program: /home/pllab/chowing/gdb/a.out
Breakpoint 1, main () at test.c:9
9  for( i=0; i<5 ; i++){
(gdb) s                           // step : 한줄 실행시킨다.
j=i/2+i;
(gdb) s
11  printf(“j is %f n”,j);
(gdb) p j         // print j : j 값을 본다.
$2 = 0
(gdb) n
j is 0.000000
for( i=0; i<5 ; i++){
(gdb) display i
(gdb) display j
(gdb) n
11  printf(“j is %f n”,j);
2: j = 1
1: i = 1
// 10 line에서 실행 i=1 , j=1이므로 10 line에서 잘못된 것을 있다.
// 10 line j = (double) i/2 + i; 고친다.
(gdb) quit
 
예제2
 
% vi hab.c
      1 #include <stdio.h>
      2
      3 int hab(int x, int y);
      4
      5 main(void)
      6 {
      7     int a, b,dab;
      8     printf(“정수a, b 입력하시오”);
      9     scanf(“%d %d”,&a,&b);
     10     dab = hab(a,b);
     11     printf(“n%d + %d = %d n”,a,b,dab);
     12 }
     13 int hab(int x, int y)
     14 {
     15     return (x + y);
     16 }                                      
 
// 프로그램은 이상은 없다. 스택을 보기 위한 것이다.
// 여러 곳에서 호출되는 함수 안에서 충돌이 일어날 경우를 생각해 보자. 때는 함수가 어디로부터 호출되었는지 그리고 어떤 상황에서 충돌이 일어났는지 파악하고자 것이다.
backtrace (bt) 명령을 이용하면 충돌이 일어난 시점에서 프로그램의 현재 호출 스택(call stack) 상태를 있다. 호출 스택은 현재 함수까지 이르는 호출 목록이다. 함수를 호출할 때마다 보관된 레지스터 , 함수 전달 인수, 지역 변수 등의 자료를 스택에 push한다. 이렇게 해서 함수들은 스택상에 일정 공간을 차지한다. 특정함수에 대하여 스택에서 사용되고 있는 메로리 부분을 스택프레임(frame)이라 부르며 호출 스택은 이러한 스택 프레임을 순서대로 정렬한 목록이다.
% gdb hab
(gdb) b 10      Breakpoint 2 at 0x8048428: file hab.c, line 10.
(gdb) r
Starting program: /home/pllab/chowing/gdb/hab
정수a, b 입력하시오3 4
breakpoint 2, main () at hab.c:10
10       dab = hab(a,b);
(gdb) bt         // 현재 스택에 main 있다.
#0  main () at hab.c:10
(gdb) s
hab (x=3, y=4) at hab.c:15
15          return (x + y);
(gdb) bt         // 지금은 스택에 hab 있다.
#0  hab (x=3, y=4) at hab.c:15
#1  0x8048435 in main () at hab.c:10
(gdb) frame 0 // hab 상태를 점검하기 위해서 스택 프레임0번으로 이동
#0  hab (x=3, y=4) at hab.c:15
15          return (x + y);
(gdb) up           // hab 어떻게 호출되었는가를 보기 위하여 상위 스택프레임으로 이동
#1  0x8048435 in main () at hab.c:10
dab = hab(a,b);
(gdb) finish
(gdb) info program     // 프로그램의 실행 상태를 보여 준다.
Using the running image of child Pid 12909.
Program stopped at 0x804843d.
It stopped after being stepped.
(gdb) info locals          // 현재 함수 내에서 모든 지역 변수 이름과 값을 출력한다.
a = 3
b = 4
dab = 7
(gdb) info variables   // 소스파일 순서대로 프로그램 내에 알려져 있는 모든 변수를 출력한다.
(gdb) info address a   // 어떤 변수가 어디에 저장되어 있는지에 대하여 알려 준다.
Symbol “a” is a local variable at frame offset -4.
// a 스택프레임 꼭대기로부터4바이트 아래에 놓여 있다는 뜻이다.
(gdb) info frame          // 현재 프레임 정보를 보여 준다.
Stack level 0, frame at 0xbffff848:
eip = 0x804843d in main (hab.c:11); saved eip 0x400301eb
source language c.
Arglist at 0xbffff848, args:
Locals at 0xbffff848, Previous frame’s sp is 0x0
Saved registers:
ebp at 0xbffff848, eip at 0xbffff84c
 
예제3
 
% vi core.c
      1 #include <stdio.h>
      2
      3 main()
      4 {
      5     char *bug = NULL;
      6
      7     strcpy(bug,“debug”);
      8     printf(“bug is %s n”,bug);
      9
     10     return;
     11 }
     12
% coredebug
Segmentation fault
// core 파일 생성
% gdb coredebug
(gdb) b 7
Breakpoint 1, main () at core.c:7
7           strcpy(bug,”debug”);
(gdb) p bug
$1 = 0x0          // gdb 에서0x0 null이다. 번지가 없다.
(gdb) s
Program received signal SIGSEGV, Segmentation fault.
0x40075434 in ?? ()     
// strcpy에서 segmentation fault 발생한 것을 있다.
// bug 번지를 할당하면 된다.
 
% gdb corebug core  // core파일을 이용하면 bug정보가 나온다.
GNU gdb 4.18
Copyright 1998 Free Software Foundation, Inc.
GDB is free software, covered by the GNU General Public License, and you are
welcome to change it and/or distribute copies of it under certain conditions.
Type “show copying” to see the conditions.
There is absolutely no warranty for GDB.  Type “show warranty” for details.
This GDB was configured as “i386-redhat-linux”...
warning: core file may not match specified executable file.
Core was generated by ‘a.out’.
Program terminated with signal 11, 세그멘테이션 오류.
Reading symbols from /lib/libc.so.6...done.
Reading symbols from /lib/ld-linux.so.2...done.
#0  strcpy (dest=0x0, src=0x8048490 “debug”) at ../sysdeps/generic/strcpy.c:38
../sysdeps/generic/strcpy.c: 그런 파일이나 디렉토리가 없음.
gdb signal 11 번과 함께 코어 파일이 생성되었음을 알려 준다. 여기서는 허가받지 않은 메모리 공간에 읽기, 쓰기를 시도했기 때문에 커널이 프로세스에게 signal 11 보냈다.
시그널로 인해 프로세스는 종료하면서 코어 파일을 덤프한다.
 
l         기타 기능
 
gdb 매우 많은 기능을 가진 프로그램이다.
 
Breakpoint
중지점을 조건적으로 설정할 있다. 어떤 동작이 참일 때만 작동하도록 있다.  Ex) break 184 if (stace == 0)
info break 사용하면 모든 중지점과 감시점 목록을 보여 주고 상태도 보여 준다.
disable 사용하여 작동불능으로 있고 enable 사용하여 가능하게 수도 있다.
 
 
인스트럭션 레벨 디버깅
gdb 통해 인스트럭션 레벨의 디버깅을 있으므로 프로그램의 매우 깊은 내부까지 조사할 있다.
(gdb) disass play      //play함수에 대한 디스어셈블리.
(gdb) display/ i $pc   //현재의 인스트럭션을 보여준다. $pc gdb내부 변수로서 현재 인스트럭션의 위치를 가리키는 프로그램 카운터이다.
 
옵션
옵션 이외의 모든 인자는 실행가능 파일과 core 파일(또는 프로세스 ID)로 인식된다.
즉 옵션 플래그 없는 첫번째 인자는 `-se' 옵션과 같고, 두번째 인자는, 존재한다면,
`-c' 옵션과 같다(인자가 파일이름인 경우). 많은 옵션에 짧은 형식과 긴 형식이 있는데,
둘다 아래에 설명된다. 긴 옵션은 일부만 써도 애매하지 않으면 인식된다.
(당신이 그렇게 하고 싶다면, `-'대신 `+'로 옵션을 나타낼 수도 있다. 우린 일반적 관례인 -를 쓰겠다)

모든 옵션과 명령행 인자들은 순차적으로 처리된다. `-x'옵션을 사용할 경우 순서가 다르면 결과도 다르다.

  -help, -h : 모든 옵션을 짧은 설명과 함께 보여준다.

  -symbols=file, -s file : file로부터 심볼 테이블을 읽어들인다.

  -exec=file, -e file : 적당하다면 실행파일로 file을 사용하여 core dump의 내용을 검사한다.

  -se=file : file로부터 심볼 테이블을 읽어들이고 또한 실행파일로 사용한다.

  -core=file, -c file : file을 검사할 core dump로 사용한다.

  -command=file, -x file : file안의 GDB 명령을 수행한다.

  -directory=directory, -d directory : 소스 파일 검색 경로에 directory를 추가한다.

  -nx, -n : 초기화 파일 `.gdbinit'의 명령을 수행하지않는다.
      보통 모든 옵션과 인자가 처리된 후 초기화 파일의 명령이 실행된다.

  -quiet, -q : 도입 메시지와 저작권 메시지를 출력하지않는다. 배치 모드에서도 이들 메시지는
                     출력되지않는다.

  -batch : 배치 모드로 수행한다. `-x' 옵션으로 지정한 파일(.gdbinit' 파일)의 명령들을 수행한 후
               종료상태 0으로 종료한다.
      파일의 GDB 명령을 수행하던 중 오류가 발생하면 0이 아닌 종료상태로 종료한다.
      프로그램을 내려받아서 다른 컴퓨터에서 실행하는 경우등에, GDB를 필터로 사용할 수 있는데
      이때 배치 모드가 유용하다.
      이 모드가 더 쓸모있도록, GDB하에서 수행되던 프로그램이 종료되면 나오는 Program exited
               normally. 이란 메시지가 배치 모드에서는 나오지 않는다.

  -cd=directory : 현재 디렉토리 대신 directory를 작업 디렉토리로 하여 GDB를 수행한다.

  -fullname, -f : 이맥스의 서브프로세스로 GDB가 수행될 때 이 옵션이 켜진다.
      이 옵션이 켜지면 GDB는 전체 파일이름과 행번호를, 스택 프레임을 디스플레이할 때마다
      (프로그램이 정지되는 경우도 여기에 해당된다) 표준적이고 알아볼 수 있는 양식으로 출력한다.
      이 양식은 ` 32'뒤에 파일이름, 콜론으로 구분된 행번호와 문자위치, 개행문자가 오는 것이다.
      이맥스-GDB 접속프로그램은 ` 32'를 프레임의 소스코드를 디스플레이하란 신호로 사용한다.

  -b bps : 원격 디버깅에 사용되는 직렬 인터페이스의 회선속도(보오율이나 초당 비트수)를 설정한다.

  -tty=device : device를 표준입력과 표준출력으로 하여 프로그램을 실행한다

반응형

'삽질로그' 카테고리의 다른 글

자바스크립트로 UI 구현하기  (0) 2008.10.11
검색의 혁명 Search 2.0  (0) 2008.09.24
레베카프로 드라이버-데탑용 웹캠  (0) 2008.01.22
개정된영문이름표기법  (0) 2008.01.21
DDoS 관련 정보  (0) 2008.01.14
반응형
반드시 읽어볼것

http://ilmol.com/wp/css/css_start/

http://sir.co.kr/bbs/board.php?bo_table=pl_css&wr_id=153


http://www.cadvance.org ---> CSS ---> Page Layout Serie1s 의
해당 서브 목록의 글들만 모두 읽어 보고
(전 읽는데 30분 정도 걸렸습니다. 그리고 실행결과를 보기위해선 익스로 접속해야 하더군요)

왜...??? doctype 을 지정하는지 어떻게 사용하는지
페이지 레이아웃을 만들때 알아두어야 하는 것들과
익스에서의 div 태그 사용시 margin, padding, border 인하여 생기는 버그에 관해서 한번 알아보고

아래 css로 짜여진 레이아웃들을 다운받아 많이 다루어 보면 좋을듯 합니다.

http://www.freelayouts.com/
http://templates.arcsin.se/
http://www.templateworld.com/
http://www.oswt.co.uk/
http://www.cssfill.com/
http://www.oswd.org/
http://www.free-css-templates.com/
http://www.templatesbox.com/
http://www.ex-designz.net/template/

반응형

'개발도 하냐?' 카테고리의 다른 글

검색결과의 Visualization  (0) 2008.09.24
FLEX  (0) 2008.09.22
웹표준개발방법론  (0) 2008.02.02
웹표준관련 책  (0) 2008.02.02
Internet Explorer Developer Toolbar  (0) 2008.02.02
반응형
http://clagnut.com/sandbox/csstabs/?writingtext=csstabs

The HTML:

<ul id="globalnav">
<li><a href="#">Home</a></li>
<li><a href="#" class="here">About</a>
<ul>
<li><a href="#">Vision</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Culture</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#" class="here">History</a></li>
<li><a href="#">Sponsorship</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Proof</a></li>
<li><a href="#">Process</a></li>
<li><a href="#">Expertise</a></li>
<li><a href="#">Help</a></li>
</ul>


The CSS:

/*globalnav*/

#globalnav {
position:relative;
float:left;
width:100%;
padding:0 0 1.75em 1em;
margin:0;
list-style:none;
line-height:1em;
}

#globalnav LI {
float:left;
margin:0;
padding:0;
}

#globalnav A {
display:block;
color:#444;
text-decoration:none;
font-weight:bold;
background:#ddd;
margin:0;
padding:0.25em 1em;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-right:1px solid #aaa;
}

#globalnav A:hover,
#globalnav A:active,
#globalnav A.here:link,
#globalnav A.here:visited {
background:#bbb;
}

#globalnav A.here:link,
#globalnav A.here:visited {
position:relative;
z-index:102;
}

/*subnav*/

#globalnav UL {
position:absolute;
left:0;
top:1.5em;
float:left;
background:#bbb;
width:100%;
margin:0;
padding:0.25em 0.25em 0.25em 1em;
list-style:none;
border-top:1px solid #fff;
}

#globalnav UL LI {
float:left;
display:block;
margin-top:1px;
}

#globalnav UL A {
background:#bbb;
color:#fff;
display:inline;
margin:0;
padding:0 1em;
border:0
}

#globalnav UL A:hover,
#globalnav UL A:active,
#globalnav UL A.here:link,
#globalnav UL A.here:visited {
color:#444;
}

반응형
반응형
반응형

'개발도 하냐?' 카테고리의 다른 글

FLEX  (0) 2008.09.22
CSS 레이아웃기초  (1) 2008.02.02
웹표준관련 책  (0) 2008.02.02
Internet Explorer Developer Toolbar  (0) 2008.02.02
웹 접근성 향상을 위한 웹 표준화 가이드  (0) 2008.01.31
반응형
반응형
반응형
IE에 add-in 되는 웹문서 분석 툴
 
  • w3c로 바로 연결하여 validate 결과를 보기
  • view DOM
  • css를 disable 시키는 기능
  • div elements 아웃라인을 보여주는 기능
  • 브라우저를 리사이징해주는 기능 등


http://www.microsoft.com/downloads/details.aspx?amp;amp;amp;displaylang=en&familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en



또다른 도구로는

http://www.visionaustralia.org.au/info.aspx?page=614

한글판 :

참고.
반응형
반응형

2. 접근성 향상 적용 과제

  1. 웹 표준 준수
  2. 구조,표현,행동 분리
  3. 최소한의 디버깅을 거쳐라.
  4. 효율적인 웹 개발 방법론을 가져라.
  5. 의미에 맞는 HTML 태그 사용 (가독성)
  6. 올바른 표(table) 사용
  7. 대체 수단 제공 (이미지,플래시,동영상,음성)
  8. 반복 네비게이션 링크
  9. 키보드로만 서비스 이용 가능
  10. 독립적인 링크 텍스트
  11. 웹 문서에는 독립적인 제목을 붙인다
  12. 양식 컨트롤과 양식 이름표를 명확히 짝짓는다.

2.6 올바른 표(table) 사용

2.6.1 리스트형 표 사용법

HTML 표(table) 모델은 제작자에게 데이터를 줄(low)과 컬럼(column)의 셀(cell)들에, 텍스트, 양식화 된 텍스트, 이미지, 연결, 폼(form), 폼 휠드(field), 다른 표(table), 등으로, 정돈 할 수 있게 한다.

  • 테이블은 레이아웃이 아닌 본래 목적에 맞게 표로만 사용한다.
  • summary,Caption에 표의 목적을 간단하게 기술하는 제목을 갖는다.
  • 제목은 th 에 내용은 td 에 넣는다.
  • 리스트형 표의 th 에는 scope="col" 을 넣는다.

2.6.2 Table layout vs CSS layout

Table layout
장점
FrontPage 나 Dreamwever 같은 위지윅(WISIWYG) 에디터에서 테이블로 개발하기가 매우 쉽다.
단점
표현데이타와 컨텐츠의 혼용 (페이지 크기를 불필요하게 증가)
사이트 재디자인시 많은 작업과 비용을 유발
사이트 전체의 일관성을 유지하는데 매우 힘들고 과도한 비용을 발생시킴
장애인,핸드폰,PDA..등에서 접근성을 떨어뜨린다.
프로그램에서 데이터를 알기 힘들고, pc이외의 기계에서 렌더의 어려움이있다.
내부 Td안의 데이터가 모두 로드 되기 전까지 전체를 표시하지 않아 속도가 느리다
CSS layout
장점
효율적인 마크업
페이지 용량감소
유지보수 편리 비용절감
이해하기 쉬운 구조
메인 컨텐츠를 먼저 보여주고 그래픽을 나중에 로드할 수 있게 한다.
HTML/텍스트 비율을 낮게 유지함으로써 로딩 시간을 감소시킨다.
리퀴드 디자인을 추구함으로써 사용성을 증가시킨다.
포지셔닝에 있어 극단적인 유연성을 가능하게 한다.
단점
어렵고 구현하는데 시간이 많이 소요

2.7 대체 수단 제공 (이미지,플래시,동영상,음성)

Flash

플러그인을 사용하는 경우 대체 콘텐츠를 제공해야 한다.

image

Alt, title, longdesc

iframe

title

frame

title,noframes

동영상

caption 지원

동영상 caption 지원


2.8 반복 네비게이션 링크

숨은 Text 링크를 사용하라

웹 콘텐츠는 반복적인 네비게이션 링크(repetitive navigation link)를 뛰어넘어 페이지의 핵심부분으로 직접 이동할 수 있도록 구성하여야 한다.

카페 탑


2.9 키보드로만 서비스 이용 가능

2.9.1 순서에 맞게 구조화

보통 마크업 구조상으로 보면 아레와 같이 분리되어 있어 텝메뉴 순서상으로도 카페>블로그>플래닛>포커스>랭킹... 순으로 되어 포커스가 카페 depth 안에 포함된 카테고리인지 인식 할 수가 없게 된다..

잘못된 소스

  • 카페
  • 블로그
  • 플래닛
  • 포커스
  • 랭킹
  • 서포터즈
  • 공식커뮤니티

아레와 같이 순서에 맞게 구조화 되면 올바르게 표현할수 있다

잘된 소스

  • 카페
    • 포커스
    • 랭킹
    • 서포터즈
    • 공식커뮤니티
  • 블로그
  • 플래닛
예제) 순서에 맞게 구조화된 문서

순서에 맞게 구조화된 GNB

2.9.2 마우스와 키보드 이벤트 처리기 대응

이벤트 처리기가 장치 독립적인지 확인하십시오. 이 이벤트 처리기는 필수적인 정보나 이 페이지를 사용하는 데 필요합니다. 이벤트 처리기를 "onfocus", "onblur" 및 "onselect"와 같은 장치 독립적인 처리기로 제한할 것을 고려하십시오. 장치 독립적인 특성을 사용해야 하는 경우 키보드 방식을 제공하십시오. 예를 들어, "onmousedown"의 경우 "onkeydown"도 지정하십시오. 마우스 좌표에 의존하는 이벤트 처리기는 장치가 독립적이지 않으므로 사용할 수 없습니다.

마우스와 키보드 이벤트 처리기 대응표
마우스 키보드
onmousedown onkeydown
onmouseup onkeyup
onclick onkeypress
onmouseover onfocus
onmouseout onblur

각각의 메뉴 링크에 onMouseOut, onMouseOver 이벤트만을 사용하여 키보드를 이용한 접근은 제한됩니다.
onFocus, onBlur를 추가하여 작성하면 이론적으로 최소의 키보드 접근이 가능하게 됩니다.
ondblclick, onmousemove 등에 상응하는 키보드 이벤트 처리기는 HTML 4.0 현재 존재하지 않으므로 그러한 이벤트 처리기는 되도록 사용을 피하는 것이 좋습니다.

예제) 키보드로 텝 메뉴 컨텐츠 구현

cssw 제거된 콘텐츠


2.10 독립적인 링크 텍스트

2.10.1 링크 텍스트 자체로서 독립적인 의미를 갖는다.

시각 장애인의 경우, 홈페이지를 순차적으로 읽어 주는 기계를 통해서 탐색하는데, 빠른 탐색을 위해 키보드의 Tab key로 링크에서 다음 링크로 건너 띄는 경우가 많이 있다. 그럴 때에 음성으로 그 링크의 성질을 설명해주는데 ‘여기’라고 나오면 도대체 그 링크가 어디로 연결될 지를 짐작 할 수 없다.
따라서 아래에 같이 링크 텍스트가 독립적으로도 의미를 가질 수 있도록 수정해야 한다.

좋지 않은 예
좋은 예

2.10.2 반복적인 이미지 링크도 구별되는 독립적인 의미를 갖는다.

"더보기", "자세히보기" 등 각 콘텐츠에 반복적으로 열람되는 이미지 링크 사용시 음성으로 링크가 구체적으로 어디로 연결될 지를 짐작 할 수 없다.
따라서 아래에 같이 링크 텍스트가 독립적으로도 의미를 가질 수 있도록 "000 더보기","000 자세히 보기"로 수정해야 한다.

사용자 삽입 이미지

더보기


2.11 웹 문서에는 독립적인 제목을 붙인다

웹문서 제목

일반인들의 사용성 측면, 검색 엔진의 효율성 측면에서 제목은 매우 중요하다. 또, 시각 장애인에게는 제목이 여러 문서를 구분하고, 현재 위치를 파악하고 앞으로 계속 탐색할 것인지 말 것인지 결정하는 가장 중요한 단서가 된다.
따라서 제목은 해당 문서의 내용을 대표할 수 있도록 정확하고 간결하게 작성해야 한다.

head테그안에서 title 선언시 주의사항

utf-8 인코딩 문서에서 head테그 맨 상단에 한글이 포함된 title 오면 IE 일부에서 문서가 하얗게 보여지는 현상이 일어난다.
따라서 head테그 맨 상단에 title선언보다 meta테그 인코딩 먼저와야 한다.

좋지 않은 예
좋은 예

2.12 양식 컨트롤과 양식 이름표

양식 컨트롤과 양식 이름표를 명확히 짝짓는다

좋지 않은 예
좋은 예

참고 출처:
  • 실전 웹 표준 가이드 : 한국소프트웨어진흥원
  • 소수 사용자를 위한 웹 접근성 : lg전자 global elearning group, 신승식
  • 공평한 인터넷 환경 제공을 위한 창의적 UI 발상 프로젝트 : Daum 커뮤니케이션 커뮤니티 UI팀 조제희
  • 웹 접근성 이해 : 한국정보문화 진흥원 접근기술 연구팀 현준호
  • http://www.bb00dd.com/blog/entry/%EC%9B%B9-%EC%A0%91%EA%B7%BC%EC%84%B1-%ED%96%A5%EC%83%81%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%9B%B9-%ED%91%9C%EC%A4%80%ED%99%94-%EA%B0%80%EC%9D%B4%EB%93%9C-1
반응형

+ Recent posts