'웹[기술|표준|접근]'에 해당되는 글 84건

  1. 2011/03/17 CSS for iPad Orientation (화면회전)
  2. 2011/03/14 CSS for Retina Display (background) (1)
  3. 2010/01/27 UX를 악용하여 낚시하는 UI를 너무너무 사랑하는 오픈마켓 (3)
  4. 2010/01/09 헤딩 제대로 사용하기. - 후편(완)- (3)
  5. 2010/01/06 헤딩 제대로 사용하기(시멘틱 마크업하기). -전편- (2)
  6. 2009/08/26 YDN 2회 간략한 후기 (5)
  7. 2009/02/11 SUBVERSION CLIENT FOR THE MAC
  8. 2009/02/02 IE7에서 text-decoration이 이상하게 나올때.
  9. 2008/11/27 Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기 (4)
  10. 2008/10/24 KCSC 불법정보(사이트)에 대한 차단 안내. (4)
  11. 2008/09/04 브라우저 춘추전국시대가 아닌 엔진춘추전국시대
  12. 2008/09/03 구글 크롬을 잠깐 써보니..
  13. 2008/08/20 [JS] IE6인지 구분하기
  14. 2008/08/01 CSS Frameworks
  15. 2008/07/04 다음 이메일 청구서, 정말로 재인증이 필요할까? (4)
  16. 2008/07/04 오픈웹 소송 판결 선고기일 안내
  17. 2008/07/01 웹 접근성 향상 캠페인
  18. 2008/06/25 CSS Editors Reviewed
  19. 2008/06/23 Firefox3가 나오면서 개발자가 한번쯤 읽어봄직한 문서
  20. 2008/06/17 firefox3를 설치했습니다. (내용 추가08/06/18) (4)
  21. 2008/05/23 flowchart.com의 js
  22. 2008/05/22 웹 표준 경진대회 (2)
  23. 2008/04/15 Martian Headsets
  24. 2008/03/25 vista로 국민은행(kbstar.com)가기..
  25. 2008/03/19 코딩 하기 전 에 문서부터 디자인을 하라 (2)
  26. 2008/03/18 관심사
  27. 2008/03/06 탭메뉴는 어떻게 코딩 해야 할까? (4)
  28. 2008/03/05 WSP 에 CSS3 에 추가하고 싶은 idea 하나 적었는데..
  29. 2008/02/13 메뉴들은 뭐로 마크업 해야 될까?
  30. 2008/02/04 IE에서 display를 toggle할때 여백이 바뀌는 경우.(알수 없는 공백이 생길때)
웹[기술|표준|접근]/작은 팁2011/03/17 11:47

CSS for iPad Orientation (화면회전)

CSS for Retina Display 에 이어 이번엔 IPad 화면 회전에 따른 CSS 적용법에 대해 간략하게 적어보겠다.
사실 화면회전에 따라 CSS를 구별해서 적용하는 경우는 드물것이나, IPad에 맞춤 웹페이지를 제작하다보면 어느순간 필요해지는 부분이다.

1. Media Query
iPad Orientation의 Media Query는
all and (orientation:portrait)
all and (orientation:landscape)
이다.
portrait는 세로화면,
landscpae는 가로화면이다.


2. 불러오기
CSS for Retina Display와 동일하다

2-1. 별도의 CSS File을 만든경우
<link rel="stylesheet" media="all and (orientation:portrait)" href="/stylesheets/portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="/stylesheets/landscape.css">

2-2. style을 구분하여 불러올 경우
<style type="text/css" media="all and (orientation:portrait)">
<style type="text/css" media="all and (orientation:landscape)">
2-3. 일반적인 style 안에서 불러올 경우
@media all and (orientation:portrait) {
     #for portrait style codes..
}
@media all and (orientation:landscape) {
    #for landscape style codes..
}


3. 예제
세로용에는 portrait, 가로용에는 landscape를 부여하고, CSS를 통해 제어해보겠다.
<style type="text/css" media="screen">
@media all and (orientation:portrait) {
    .portrait { display: block; }
    .landscape { display: none; }
}
@media all and (orientation:landscape) {
    .portrait { display: none; }
    .landscape { display: block; }
}
</style>

...

Orientation:
<div class="portrait">Portrait</div>
<div class="landscape">Landscape</div>


4. 확인
4-1. Portrait(세로모드)


4-2. Landscpae(가로모드)






크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

CSS for iPad Orientation (화면회전)  (0) 2011/03/17
CSS for Retina Display (background)  (1) 2011/03/14
헤딩 제대로 사용하기. - 후편(완)-  (3) 2010/01/09
헤딩 제대로 사용하기(시멘틱 마크업하기). -전편-  (2) 2010/01/06
IE7에서 text-decoration이 이상하게 나올때.  (0) 2009/02/02
Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기  (4) 2008/11/27
Posted by Johan Kim hiphapis
TAG CSS, iPad, Landscape, media query, Orientation, Portrait, 가로, 세로, 화면회전
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/186 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁2011/03/14 13:12

CSS for Retina Display (background)

IPhone4에서 웹페이지를 보다보면, 이미지가 살짝 깨져 보이는 경우가 있다.
Retina Display의 해상도 때문인데, 해결책은
2배 큰 이미지 만든 후,  Retina Display용 CSS 적용하면 된다.

1. 2배 큰 이미지 만들기
Retina Display가 기존 IPhone해상도의 2배로 커졌으니, 해당 이미지들도 2배 크게 만든 후 적용 시키면 된다.
예를들어 20x20 아이콘이었다면 40x40으로 만들면 된다.

2. 불러오기
자 그럼 Retina Display용 CSS는 어떻게 불러오느냐?
핵심은 Media Query!
Retina Display용 CSS의 Media Query를
screen and (-webkit-min-device-pixel-ratio: 2)
로 해주면 된다.

아이폰에서는 Safari로 접속을 하므로 Webkit CSS를 써도 무관하지만.. 이런식으로 특정 Browser에 Dependent된 기술은 바람직하지 않다고 생각한다. 이 문제는 할일이 없어 시간이 엄청 남아돌때 포스팅 하기로 하고..
CSS 로드 케이스별로 보면.

1. Retina Display용 CSS 파일을 만들경우
<link rel="stylesheet" href="retina.css" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" title="title" charset="utf-8">

2. html안에서 Retina Display용 CSS를 추가할 경우
<style type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 2)">

3. 일반 CSS안에 Retina Display용 CSS를 추가할 경우
@media screen and (-webkit-min-device-pixel-ratio:2) { 
    #icon {
        ....
    }
}
이런 방식으로 추가를 하면 된다.

3. 적용 방법
마지막으로 적용방법이다.
기존의 코드는 손대지 말고, Retina Display용 CSS만 추가하면 된다.
background-image: url("icon40x40.png");
-webkit-background-size:20px 20px;
이런식으로 2배 커진 이미지를 배경이미지로 Overwrite하고, 
배경 이미지 크기를 기존 아이콘의 사이즈로 적어주면 된다.


배경이 아닌 일반 이미지 또한 2배로 크게 만들고 강제로 기존 사이즈 적어주면 되긴 하는데..
이 경우는 접속 환경의 Retina Display인지 아닌지 구분할 수 없다는 문제점이 있다.
하지만 아래 나온 class 할당 방식으로 해결할 수 있긴 하지만 바람직한 방법은 아닌듯 하며, 
번거롭지만 배경이미지로 바꾸는게 나아보인다.


배경이미지외 
Retina Display에만 특별히 적용을 해야 할 경우  class를 부여해서 조절하는 방법이 있다.
.forWeb { display: block }
.onlyRetina { display: none }

@media screen and (-webkit-min-device-pixel-ratio:2) { 
    .forWeb { display: none }
    .onlyRetina { display: block }
}

크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

CSS for iPad Orientation (화면회전)  (0) 2011/03/17
CSS for Retina Display (background)  (1) 2011/03/14
헤딩 제대로 사용하기. - 후편(완)-  (3) 2010/01/09
헤딩 제대로 사용하기(시멘틱 마크업하기). -전편-  (2) 2010/01/06
IE7에서 text-decoration이 이상하게 나올때.  (0) 2009/02/02
Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기  (4) 2008/11/27
Posted by Johan Kim hiphapis
TAG Background, background-image, CSS, image, iPhone4, media query, Retina
Trackback 0 Comment 1

TRACKBACK http://hiphapis.net/trackback/184 관련글 쓰기

댓글을 달아 주세요

  1. Favicon of http://www.medicalschoolpersonalstatement.net/ BlogIcon medical school personal statement

    배로 크게 만들고 강제로 기존 사이즈 적어주면 되긴 하는데..
    이 경우는 접속 환경의 Retina Display인지 아닌지 구분할 수 없다는 문제점이 있다.
    하지만 아래 나온 class 할당 방식으로 해결할 수 있긴 하지만 바람직한 방법은 아닌듯 하며,
    번거롭지만 배경이미지로 바꾸는게 나아보인다.

    2012/04/27 06:15 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/생각2010/01/27 23:29

UX를 악용하여 낚시하는 UI를 너무너무 사랑하는 오픈마켓

얼마전 옥션에서 그란투스리모5를 구매를 했다.
나는 가난하기 때문에 신품보다 고작 5천원 싼 가격에 중고를 구입했다. (다음날 새벽 7시에 문자가 왔다.. 재고없어 주문취소했다고.. 덕분에 직접 TM가서 옥션보다 싼 가격에 구입했다.)
난 절대 플스3, 로지텍 드라이빙 포스 GT를 장만했다는걸 자랑하기 위해 이 글을 쓰는 건 아니다.

타이틀(플스에서 게임CD를 타이틀이라고 함)을 구매하기까지 옥션에 머무른 시간은 고작해서 3~5분..
근데 그동안 난 2번 황당한 경험을 했다.

우선 첫번째.
중요한 정보로 둔갑한 광고.
우측에 파랑색으로 테두리 친 영역을 보면 쪽지와 쿠폰소식이 왔다고 말한다.
쪽지 도착을 알리고, 쿠폰 도착을 알리는 것은.. Notification라고 할 수 있다.
그리고 이것을 우리나라말로 대충 의역하면 "알림" 혹은 "공지"라고도 할 수 있다.
문제는 이것이 공지사항이 아닌 광고라는 것이다.
왜이래? 한두번 당해봤어? 아마추어같이
라고  얘기할 지 모르겠지만, 잘못된것은 지적해야 한다.
도대체 광고가 왜 공지사항(중요정보)로 둔갑을 해야 하나?
나같이 젊고 웹 계열에 종사하는 사람이라면 저런 광고따위는 단번에 눈치를 채겠지만
그렇지 않으신 분들은 정말로 순수하게 "쪽지가 도착했다는 의미"로 받아들이시고 저 썩을 광고를 클릭하실 것이다.

여기서 엄청난 손실이 일어나게 된다.
자.. 그럼 한번 얼마나 많은 손실이 있는지 알아보자.

1. 시간의 손실
옥션 하루 방문자수를 5분 동안 검색해 봤는데.. 안타깝게도 그런 정보를 찾을 수 없다.
그래서 과거 해킹으로 노출된 회원수가 1,100만명이라는 것을 참고로 가정을 해보겠다.
옥션의 모든 회원이 노출된게 아니라고 알고 있는데 그렇다면 1,100만명보다 많았다는 것이다.
하지만 해킹사건도 있고... 해서 현재 회원을 대략 1,000만명이라고 가정하고..

하루동안 업자가 아닌 나 같은 순수 구매자들이 방문하는 것을 약 10%라고 가정하면 100만명
그 중에서 저런 낚시광고에 속으시는 분을 30%정도로 가정하면 30만명
사용자수를 뽑아냈으니, 이제 시간을 추정해보자.

시선이 광고로 이동하는 시간 + 뇌가 판단하는 시간 = 넉넉하게 0.5초라고 하자.
그리고 마우스가 이동 + 클릭하는 시간 = 1초라고 하자 (일반적으로 0.5초정도 걸리겠지만.. 저런 광고에 속으시는 분들은 대부분 컴퓨터(인터넷)에 익숙치 않으실거라는 판단)
클릭하면 새창이 열리는데 = 3초
새창에서 사이트가 열리는데 4초
다 합하면 = 0.5 + 1 + 3 + 4 = 8.5초라는 값이 나왔다.
생각보다 많이 나왔다고 판단하실 지 모르겠지만.. 안좋은 컴퓨터에서 한다면.. 10초 이상 걸릴 수도 있다.

자, 이제 사용자수와 시간이 나왔다.
옥션의 악의 뿌리 낚시 광고로 인해 300,000명의 유저가 하루에 8.5초씩 쓰잘대기 없는데에 억울하게 시간을 약탈당하는 것이다.
이 시간을 모두 합치면 2,550,000초라는 어마어마한 수가 나온다.
이걸 분으로 변환하면 42,500분이고
이것을 시간으로 변환하면 708.333 시간이다.
이것을 다시 일로 변환하면 29.51일이다.
약 한달 정도의 시간인 것이다.
물런 이것은 1000만이라는 회원수를 바탕으로 내 임의대로 추정해서 도출해낸 결과이므로 신빙성은 없다.

하지만, 소중한 내 시간이 약탈당하는것은 분명한 사실이다.

2. 비용의 손실
광고를 클릭하는 순간일어나는 일은
  1. 내 컴퓨터에서 서버로 "광고"페이지를 요청
  2. 서버에서 내 컴퓨터로 "광고"페이지를 전송
뭐 OSI 7Layers를 말하지 않더라도, 위 2가지 정도면 모두가 알고있는것이다.
자 그럼 실질적으로 소모되는 비용을 따져보자.
  1. 내 컴퓨터에서 서버로 "광고" 페이지를 요청
    1. 요청하면서 전기가 소모
      1. 내 컴퓨터
      2. 케이블 모뎀
      3. ISP 업체
    2. 요청하면서 인터넷망에 트래픽 발생
      1. 트래픽 == 돈이라고 할 수 있음. 즉 비용 발생
  2. 서버에서 내 컴퓨터로 "광고" 페이지를 전송
    1. 여기서 발생하는 비용을 포함시키기는것은 조금 애매해서 제외

물런, 발생하는 비용이 아주 적을 수 도 있다.
하지만 30만명치를 모으면 어떻게 될까?
역시나 엄청난 금액이 나올것이다.

이 금액 합쳐 매년 영양실조로 죽는 1억6천8백만 어린이에게 후원해주면?
(아프리카에서 모친으로부터 에이즈가 유전되는 태아 한명을 치료하는데 40원이 든다.)

그리고 이렇게 전기를 쓸모없는데 사용하는게 정말 싫다.
에너지 절약이 지구를 살리는 길중 하나이기 때문이다.

아.. 흥분해서 얘기가 삼천포로 빠졌네..
다시 맘을 가다듬고


마지막으로 두번째

과거의 경험을 가지고 소비자를 우롱하는 광고

예전에 옥션에서 물건을 구매하니, 할인 쿠폰을 발급해줬던 적이 있다.
이번에도 구매 완료 페이지에서 할인 쿠폰을 준다고 되어 있는데.. 광고였다.

내가 속게 되는 과정을 담은 Eye Tracking이다.





"쿠폰 받기"를 클릭하고 나서 보니.. 왠 광고페이지가 떴다.
황당했다. 더 생각할 것 도 없이 창을 닫고..
다시 옥션페이지로 돌아와보니..
할인쿠폰 위에 "AD 이벤트"라는 이미지를 볼 수 있었다.

이런 User Experience를 악용하여 광고하는것은.. 상도에 어긋나는것 아닌가?
이런건 해선 안되는 일이다.
광고 기획자가 이런걸 기획했다 하더라도, 서비스 기획자(디자이너 및 개발자 포함)가 적극 반대하고 막아야 하는거 아닌가?
옥션정도의 사이트라면 저딴 저질광고를 하지 않더라도 충분히 수입이 나는 회사 아닌가?
저딴 광고올릴려고 ebay가 인수해간건가?

이런 광고를 기획하는 사람들에게 한소리 하고싶다.
두세 시간 들여서 광고 페이지 하나 만드셔서 살림살이 나아지셨습니까?
광고를 볼 의사도 없는 사람들의 시간 8.5초씩 빼앗아 가셔서 생명연장의 꿈을 이루셨습니까?
도대체 왜 다른 사람의 소중한 시간을 빼앗아 가는 겁니까?
도대체 왜 다른 사람의 소중한 돈을 빼앗아 가는 겁니까?


난 "광고는 무조건 나쁘다"라고 말하는게 아니다.
저런 "상도에 어긋나는 썩은 UX를 가진 광고"따위가 맘에 안드는 것이다.
바로 사용자를 우롱하는 UX 말이다.
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 생각' 카테고리의 다른 글

UX를 악용하여 낚시하는 UI를 너무너무 사랑하는 오픈마켓  (3) 2010/01/27
다음 이메일 청구서, 정말로 재인증이 필요할까?  (4) 2008/07/04
오픈웹 소송 판결 선고기일 안내  (0) 2008/07/04
웹 접근성 향상 캠페인  (0) 2008/07/01
웹 표준 경진대회  (2) 2008/05/22
Martian Headsets  (0) 2008/04/15
Posted by Johan Kim hiphapis
Trackback 0 Comment 3

TRACKBACK http://hiphapis.net/trackback/172 관련글 쓰기

댓글을 달아 주세요

  1. charmggae

    헐... 파란색 테두리 오른쪽이 아니라 왼쪽이네요.
    오른쪽에서 찾다가 왼쪽으로 간 시간 0.5초쯤 ㅋㅋ
    대단한 분석입니다^^

    2010/02/20 10:38 [ ADDR : EDIT/ DEL : REPLY ]
  2. rj

    생각해보니 UX를 악용하는 사례 정말 많은 것 같습니다. 최소한 [광고] 라는 문구는 넣어주는 것이 옥션 같은 큰 기업의 최소한의 바른 자세가 아닐까 하는 생각이 드네요. 저는 저런 행위가 UX악용의 차원을 넘어서 옥션의 신뢰를 담보로 한 광고이자 고객과의 신뢰관계를 스스로 저버리는 광고행위로 보여집니다. (포스팅 잘 보고 갑니다~)

    2011/09/07 23:16 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/작은 팁2010/01/09 20:00

헤딩 제대로 사용하기. - 후편(완)-

전편을 보고 분명 많은 분들이
뭐야? 장난해? 내가 아는거랑 똑같은데? 뭐가 틀리다는거야?
이런 반응을 보이셨을 것이다.
이건 마치 "헤딩태그는 책과 같다고 생각하시면 되요"라고 말한 것과 똑같은듯하다

여러분의 느끼실 그 허탈함에 전편을 포스팅하고 바로 후편을 쓴다.
후편에서는 무엇이 잘못되었는지 집어볼 것이다.


헤딩태그의 잘못된 사례(헤딩태그의 오해)
1. 레이아웃팅 제목으로 사용
어떤 관공서의 사이트에서 CSS를 제거한 모습과 HTML 코드이다. 지금 헤딩태그를 레이아웃팅한 영역의 제목으로 사용하고 있다.

"상단 메뉴", "하단 정보", "하단 링크"가 유의미한 데이터일까? 절대 아니다.
헤딩태그를 의미없는 레이아웃 영역의 제목으로 사용하고 있다. 실제로 많은 관공서의 사이트의 헤딩이 이런식으로 구성되어 있다. 이러한 방식은 올바르지 않은 사용법이다.

2. 제목이라고 하긴 애매모호한 헤딩
레아아웃 영역의 의미도 담고 있는 제목

이건 제목이라고 하긴 애매모호한 헤딩들이다. 그 이유는 레이아웃 영역으로써의 의미도 포함이 되어 있기 때문이다. 그러므로 이러한 사용법 또한 올바르지 않은 사용법이다.

3. 메인메뉴 혹은 서브메뉴를 헤딩으로
(아래의 스샷은 재현을 위해 제가 급조한 것입니다.)
메인메뉴 링크들을 헤딩으로 사용

위 1번과 2번은 쉽게 이해를 했는데, 3번에 와서는 고개를 갸웃하는 분이 계실 듯하다.
유의미한 데이터를 헤딩태그로 사용했는데 왜 문제가 될까?
그 이유는 메인메뉴(혹은 서브메뉴. 이하 메인메뉴로 통일)의 링크들은 헤딩이 아니기 때문이다.
다시말해 메인메뉴는 현재 보고 있는 콘텐츠의 제목이 아닌 링크들의 집합이다.
역시 어렵다. 쉽게말해 메인메뉴는 헤딩이 아니라 목차인것이다.
그러므로 헤딩태그를 사용하지 말고 그냥 a태그로 마크업을 해야 한다.

4. 레벨링
1) 누락
##시 사이트에서, 자유게시판까지의 메뉴 구조가
##시 -> 시만참여 -> 자유게시판

라고 하자. 그런데 디자인된 페이지에는 "시민참여"가 없다.
그래서 아래와 같이 헤딩을 부여했다.
<h1>##시</h1>
<h3>자유게시판</h3>
위 헤딩의 문제점은 h2가 없다는 것이다. 헤딩은 순차적으로 내려가야한다.
<h1>##시</h1>
<h2 class="hidden">시민참여</h2>
<h3>자유게시판</h3>
이렇게 헤딩을 부여하고 h2를 화면에 출력안되게 하는 방법으로 해결을 하면 된다.

2) 부여
또 다른 방법으로는
<h1>##시</h1>
<h2>자유게시판</h2>
이런 식으로 자유게시판을 h2로 마크업하는 것이다.

이쯤에서 다들
"자유게시판은 3depth에 있는 제목인데, h2로 해도 괜찮은거냐?"
라는 의문을 가지실 텐데, 상관없다.
작업하는 페이지 내에서의 헤딩만 부여하면 되는 것이다.
그렇다면
<h1>자유게시판</h1>
이렇게 자유게시판을 h1으로 마크업하는 것은 어떨까?
아마 여러분들은 혼란에 빠지실 것이고, 아래 세가지 의견들일 것이다.

  1. h1에는 사이트 제목이 들어가야 하는데..? (페이지당 h1은 한번만 와야 한다)
  2. h1만 넣으면 이 페이지가 어느 사이트(혹은 어느 위치(뎁스))에 있는지 모를텐데..?
  3. 페이지에 헤딩태그가 하나만(그것도 h1) 있어도 되는건가?

먼저, 1번 h1에는 사이트 제목이 들어가야 하는데..? (페이지당 h1은 한번만 와야 한다)
이것은 논란의 여지가 많은것으로, 전편에 해석에 따라 견해의 차이가 있다고 한 그 부분에 해당되는 내용이다.
실제로 몇해전 웹 접근성/표준쪽의 유명하신 두분이 이것으로 술자리에서 다투셨던 적이 있다.
그 분들의 의견은

    • 사이트명은 책제목과 같고, GNB의 시작점이기 때문에 h1으로 해야하고, 한번만 와야 한다.
    • 아니다

개인적인 의견은 제작자 맘이라고 생각한다. 즉 "아니다"쪽에 가깝다.
그 이유는 헤딩의 목적은 콘텐츠의 제목을 제공하는 것에 있지, GNB를 나타내기 위해 있는것이 아니기 때문이다.
그렇다면 GNB로써 헤딩을 사용하는 것이 잘못된것이냐? 그렇지도 않다. 페이지의 GNB를 콘텐츠의 제목이라고 생각할 수도 있기 때문이다.
전편에서 예를 들었던 "2분기 실적"은 "2009년 A 사업의 2분기 실적"이기 때문에,
"2009 실적 보고서", "A 사업 실적"도 헤딩이 될 수 있다.
그러므로 제작자 맘이라는 것이다

2번, h1만 넣으면 이 페이지가 어느 사이트(혹은 어느 위치(뎁스))에 있는지 모를텐데..?
이것 역시 헤딩을 GNB로써만 이해했기 때문에 생기는 오해이다.
title을 제대로 제공을 했고 정보구조가 제대로 구성되어 있다면 딱히 문제가 되지 않는다는것이 개인적인 견해이다.

3번. 페이지에 헤딩태그가 하나만(그것도 h1) 있어도 되는건가?
문제될 것 없다.

3) 단계
헤딩의 숫자가 의미하는 바는 단계(level)이라고 생각하면 된다.
대메뉴는 제일 큰 헤딩이므로 h1
중메뉴는 두번째로 큰 헤딩이므로 h2
소메뉴는 두번째로 큰 헤딩이므로 h3
이런식으로 레벨링을 하면 된다.
그러므로 대메뉴를 h2, 소메뉴를 h1 이런식으로 정보구조에 위배되게 마크업을 하면 안된다.

5. 중복된 내용
(아래의 스샷은 재현을 위해 제가 급조한 것입니다.)

같은 내용이 반복되는 헤딩
간혹 보면 사이트의 제목이 헤딩에 항상 따라다니는 경우가 있다.
사이트 제작자가 얼마나 사이트를 사랑하고, 자랑하고 싶어하는지 그 마음이 전해진다.
하지만 이것은 좋은 방법이 아니다.
헤딩의 레벨이 낮아지면, 상단의 레벨에 나오는 내용은 생략해도 된다.
<h1>##시</h1>
<h2>홍보관</h2>
이렇게 마크업이 되었으면
##시의 홍보관
이라고 받아들이면 된다.
즉 레벨이 낮아지면 상위 헤딩의 내용이 접두어로 붙은 것으로 여기면 된다.


헤딩이란
하.. 그럼 도대체 어떻게 헤딩을 하란 말이냐?!
전편에서 했던것 그대로 하면 된다.
너무나도 쉬웠던 그것이 바로 정답이다.

헤딩태그가 너무 간략하다보니 오해가 많이 생기는 것 같다.
그 오해의 근본은 무엇이 헤딩인가? 즉 헤딩의 정의에 있는것 같다.
헤딩태그는 헤딩은 페이지의 제목이다.




절대 아니다. 헤딩태그는 페이지의 제목이 아니다.
헤딩은 페이지의 제목이 아니라 콘텐츠의 제목이다.
더 정확하게 이야기를 하면 섹셔닝된 콘텐츠의 제목이다.

전편에 나왔던 "2009 실적 보고서"를 가지고 예를 들어보자.
현재 내가 보고 있는 페이지는 A사업 실적의 2분기 실적을 보고있다면
대제목: 2009 실적 보고서
중제목: A 사업 실적
소제목: 2분기 실적
이게 바로 전편에서 말한 헤딩이다. 이것을 코드화하면
<h1>2009 실적 보고서</h1>
<h2>A 사업 실적</h2>
<h3>2분기 실적</h3>
이렇게 된다.
이게 아닌 다른것은 헤딩이 되면 안된다.

자, 그럼 상황을 바꿔보자
현재 내가 보고 있는 페이지에는 A사업의 모든 정보가 다 나온다고 하자.
그렇다면 어떻게 헤딩을 구조해야 할까?
대제목: 2009 실적 보고서
중제목: A 사업 실적
소제목: 1분기 실적
소제목: 2분기 실적
소제목: 3분기 실적
소제목: 4분기 실적
소제목: 전년과 비교
소제목: 총평
이렇게 될 것이고, 코드화를 하면
<h1>2009 실적 보고서</h1>
<h2>A 사업 실적</h2>
<h3>1분기 실적</h3>
~~
<h3>2분기 실적</h3>
~~
<h3>3분기 실적</h3>
~~
<h3>4분기 실적</h3>
~~
<h3>전년과 비교</h3>
~~
<h3>총평</h3>
~~
이렇게 코드화가 된다.
"총평"이 "2009 실적 보고서의 총평"인지, "A 사업 실적의 총평"인지 걱정하지 않아도 된다.
h3의 상위레벨의 헤딩태그 h2에 이미 "A 사업 실적"이라는 내용이 있으므로, "A 사업 실적의 총평"이 되는 것이다.

정리를 하면
  1. 내가 보고 있는 페이지의
  2. 콘텐츠를 섹셔닝(구분)하고
  3. 각 섹션마다 콘텐츠에 알맞는 헤딩을

부여하면 되는 것이다.

결론
여기에 나온 잘못된 사례말고도 찾아보면 더 많은 방법으로 잘못 사용되고 있을 것이다.
중요한것은, 디자인된 시안을 받고 코딩을 할때 레이아웃팅만 해야 하는 것이 아니다.
콘텐츠도 레이아웃팅을 해야한다. 그리고 그에 적절한 헤딩태그도 제공을 해야한다.


덧.
콘텐츠를 레이아웃팅 하는 것을 HTML코더만의 몫이라고 하기는 힘들다.
콘텐츠를 만든 사람(대부분의 경우 기획자)이 가장 큰 책임을 지고 있는 것이다.
설계가 이상하게 되어있는데 어떻게 올바르게 시공이 되겠는가.

하나의 페이지에 여러개의 목적을 가진 콘텐츠들이 뒤죽박죽 썩여있다면, 그것은 기획을 잘못한 것이고 UX 또한 고려하지 않은 것이다.
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

CSS for iPad Orientation (화면회전)  (0) 2011/03/17
CSS for Retina Display (background)  (1) 2011/03/14
헤딩 제대로 사용하기. - 후편(완)-  (3) 2010/01/09
헤딩 제대로 사용하기(시멘틱 마크업하기). -전편-  (2) 2010/01/06
IE7에서 text-decoration이 이상하게 나올때.  (0) 2009/02/02
Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기  (4) 2008/11/27
Posted by Johan Kim hiphapis
TAG h1, H2, H3, h4, h5, h6, HTML, 헤딩, 헤딩태그
Trackback 1 Comment 3

TRACKBACK http://hiphapis.net/trackback/171 관련글 쓰기

  1. hiphapis의 생각  삭제

    2010/01/10 21:07TRACKBACK FROM hiphapis' me2DAY

    사실은 전편 쓰자마자 바로 후편을 썻지만.. 지금에서야 퍼블리싱한 헤딩 제대로 사용하기(후편)

댓글을 달아 주세요

  1. ㅇㅅㅇ

    잘 읽고 갑니다

    2010/01/24 01:05 [ ADDR : EDIT/ DEL : REPLY ]
  2. 김재성

    4 2)에 부여는 조금 의견차가있는데요
    만약 저 예제가 특정 페이지의 경우라면
    해딩 태그를 제목표시하는것 이외에 실제 사용자는 사이트 레이아웃을 이해하는 용도로 사용되고 있기에
    한사이트에 해딩 레벨은 일관성이 있어야된다고 생각합니다.

    2010/06/07 15:29 [ ADDR : EDIT/ DEL : REPLY ]
  3. Favicon of http://www.webshock.net BlogIcon 곡괭이

    도움이 많이 되었습니다.. 감사합니다^^

    2010/09/10 15:04 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/작은 팁2010/01/06 21:47

헤딩 제대로 사용하기(시멘틱 마크업하기). -전편-

HTML5가 회자되고 있는 이마당에, HTML의 기초중에 기초인 헤딩태그에 대해서 포스팅한다는 현실이 부끄럽기도 하고 안타깝기도 하지만.. 이렇게 포스팅을 해야 많은 분들이 올바른 헤딩태그를 사용하시리라는 희망을 품으며 몇자 적어봅니다.

전편과 후편으로 나뉘며
전편에는 헤딩태그를 사용했을 때의 장점(전반적으로 시멘틱 마크업에 대한 이야기), 해딩태그의 이해
후편에는 잘못된 헤딩태그 사용예, 헤딩태그 결론에 대해 포스팅됩니다.


2009년 하반기동안 Javascript강의를 많이 다녔는데, 이때 받았던 질문중 기억에 남는 질문은
"헤딩태그를 어떻게 사용해야 할지 모르겠어요"

라는 질문이였다. (Javascript강의인데 HTML을 질문하는 용자의 용기와 호기심에 박수를 보냅니다.;) )
알고보면 매우 간단한 것인데 이 질문을 여러번 받았었다.
아마도 원문에 헤딩태그에 대한 자세한 설명과 예제가 부족해서 그런게 아닌가 하는 생각을 해본다.
접근성을 준수했다는 사이트들도 상당수가 잘못된 헤딩태그를 사용하는 것을 목격하였다.

이제 헤딩태그에 대해 파해쳐보자. 팍팍

팍팍 파해쳐보기 전에..
지금 포스팅된(그리고 포스팅될) 이 글은 견해의 차이가 있을 수 있다.
그 이유는 원문에는 간략한 설명만 있을 뿐 자세한 설명과 예제가 적다.
이로인해 원문을 이해하는데 견해의 차이가 생길 수 있기 때문이다.
이건 마치 성경을 놓고서 사람마다(혹은 종파마다) 해석하는 바가 틀린 것과 같은 이치이다.

자. 자기방어는 이쯤으로 마무리하고, 이제 제대로 한번 파해쳐보자 팍팍.

헤딩을 올바르게 사용했을 때의 장점(시멘틱마크업의 장점)
헤딩을 올바르게 사용하면 SEO가 올라간다.
물런 국내 대형 포털의 검색에는 안걸릴 확률이 아주 높다. 실제로 검색이 되었다 하더라도 검색결과에 나올 확률은 알 수 없다. 그 이유는 다들 알겠지만 검색 방식의 차이와 광고 및 정책 때문이다.
"그렇다면 도대체 어떻게 SEO가 올라간다는 말이냐?"
라는 의문을 품은 분도 계실 것이다.
우리가 종종 착각을 하는것이..  포털의 검색만 "검색"이라고 착각을 하는데, 사실은 그렇지 않다.
크롤러(혹은 봇. 이하 크롤러로 통일)가 돌아다니면서 수집하는 모든것이 검색이라고 생각해도 무관하다.
크롤러가 정보를 수집해갔다는 행위의 시초가, "검색"이라는 이벤트가 있었기 때문에 정보를 수집해간 것이라 해석할 수 있기 때문이다.
크롤러가 무작위로 정보를 수집해 갔다 하더라도, 수집해간 정보가 언젠가는 노출이 될 확률이 높으므로 이것 또한 긍정적으로 생각할 수 있다.

엄청난 비용을 지불하여 SEO를 올릴 수도 있지만, 간단하게 HTML 코드를 수정함으로써 SEO를 올릴 수 있다는 것이다.
HTML을 수정했다고 엄청나게 SEO가 향상된다고 말하기는 어렵다. 위에 언급했듯이 국내 포털들은 검색에 안걸릴 확률이 높으므로 그렇다. 안하는 것보다 나은 정도의 수준이라고 생각하는 것이 좋을 것이다. 
하지만 다행스럽게도 구글에서는 확률이 올라가니 아무 소득이 없는것은 아니다.

사람이 보는 것이 아닌 기계가 알아볼 수 있는 헤딩
그럼 크롤러가 정보를 수집해가는 원리에 대해서 알아보자.
일반적인 크롤러의 경우 HTML을 읽은 후 거기서 키워드를 인덱싱한후 저장하는 방식이다.
여기서 어려운것은 HTML을 분석하여 이 HTML이 어떤 정보를 담고 있는지, 혹은 해당 키워드가 있는지 인덱싱하는 기술이다.
수많은 text중에 어떤 것이 의미가 있는 정보이고 광고이고 쓰레기인지 구분해내야 하기 때문이다.
이 말인즉슨 유의미한 데이터(정보)가 무분별하게 쓰레기와 썩여있다면, 크롤러가 유의미한 데이터를 찾지못하고 넘어갈 수도 있다는 것이다.

시멘틱 마크업
좋은 크롤러라면 모래 속의 진주를 발견해 갈 수 있지만, 이런 기대는 감나무 밑에서 감 떨어지길 기다리는것과 같다.
우리가 유의미한 데이터라고 표시를 해주면 어떻게 될까? 당연히 크롤로가 한결 수월하게 정보들을 수집해 갈 것이다.
이렇게 표시를 할 수 있는 태그중 하나가 바로 헤딩태그이다. 우리가 헤딩태그를 올바로 사용하면 크롤러는 별 어려움없이 유의미한 데이터를 수집해 갈 수 있다.
그 이유는 기본적으로 크롤러들은 head안에 오는 태그들(title 등등)이나 헤딩태그, 강조태그들을 주로 수집해가기 때문이다. (크롤러마다 차이가 있음)
크롤러가 이해할 수 있다면 크롤러가 아닌 다른 녀석도 알아볼 확률이 높아지게 된다.
여기서 다른 녀석은 우리가 흔히 사용하는 브라우저(IE, FF, Opera, Safari, Chrome)가 아닌 다른 브라우저 및 디바이스를 의미한다.
PDA, 모바일 브라우저 뿐만 아니라 사내 터미널 등등 호환성이 넓어지는 것이다. 사실 이것은 웹표준을 준수했을때 생기는 이점이며, 시멘틱 마크업을 했을때 시너지가 생겨 그 효과가 극대화 된다.

기계(HTML을 수집하거나 분석하는 모든것들)가 이해를 해야지만이 SEO도 올라가고, 기계가 이해를 할 수 있으니 다른 디바이스(장치)와도 호환이 된다.
결국은 기계가 이해할 수 있는 마크업을 해야한다는 것이다.
이것이 바로 내가 생각하는 시멘틱마크업이다.



헤딩태그의 이해
많은 분들이 헤딩태그를 설명할 때 책과 비유를 한다. 나 또한 책에 비유를 많이 했었는데
이렇게만 설명하면 이해할거라고 생각했었는데 그것은 내 착각이었다.
많은 분들에게 "책"예를 들면 다들 그때는 고개를 끄덕거리시지만, 막상 사용할려고 했을때 감을 못잡으시는 경우가 허다했다.

하지만 이번에는 책이 아닌 다른것으로 예를 들어 설명을 해보겠다.
바로 문서로 예를 들겠다.
여기저기서 실망감을 표출하며 "그게 그거다", "낚시하냐"라는 원성이 들리지만..
책보다는 문서가 더욱 적절한 예제여서 헤딩태그에 대한 오해를 줄일 수 있을 듯 하다.
수많은 문서 중 보고서를 예를 들겠다.

2009 실적 보고서라고 하자. 그리고 이 실적보고서의 내용을 상상해보자.
각 사업별 실적이 나올 것이고, 전년도 실적과 비교도 할 것이고, 분기별 비교도 있을 것이다.
이러한 것을 목차로 생각해보면
  • 2009 실적 보고서
    • 전체 사업 실적 요약
    • A 사업 실적
      • 1분기 실적
      • 2분기 실적
      • 3분기 실적
      • 4분기 실적
      • 전년과 비교
      • 총평
    • B 사업 실적
      • 1분기 실적
      • 2분기 실적
      • 3분기 실적
      • 4분기 실적
      • 전년과 비교
      • 총평
    • 총평

뭐 대충 이런식으로 있게 될 것이다.
그럼 여기서 A 사업 실적의 2분기 실적을 보고 있다고 가정하자.
그렇다면 이 페이지의 헤딩은 어떻게 되야할까?
바로 그렇다. 여러분이 생각한 것이 바로 정답이다.
생각대로 하면 되고~

대제목: 2009 실적 보고서
중제목: A 사업 실적
소제목: 2분기 실적

참 쉽죠잉~?



다음편에는 헤딩태그의 오해와 결론에 대해 적어보도록 하겠습니다.
ps. 왠지 다른 블로거가 헤딩태그 관련해서 글을 썻을거 같은 이 느낌.. ㅠ,.ㅠ

크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

CSS for Retina Display (background)  (1) 2011/03/14
헤딩 제대로 사용하기. - 후편(완)-  (3) 2010/01/09
헤딩 제대로 사용하기(시멘틱 마크업하기). -전편-  (2) 2010/01/06
IE7에서 text-decoration이 이상하게 나올때.  (0) 2009/02/02
Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기  (4) 2008/11/27
[JS] IE6인지 구분하기  (0) 2008/08/20
Posted by Johan Kim hiphapis
TAG h1, H2, H3, h4, h5, h6, HTML, 시멘틱, 시멘틱 마크업, 헤딩, 헤딩태그
Trackback 1 Comment 2

TRACKBACK http://hiphapis.net/trackback/170 관련글 쓰기

  1. hiphapis의 생각  삭제

    2010/01/06 22:43TRACKBACK FROM hiphapis' me2DAY

    미루고 미루던 백만년만의 포스팅 헤딩 제대로 사용하기(시멘틱 마크업하기). -전편- 왠지 뒷북일거 같은 불안한 느낌.

댓글을 달아 주세요

  1. Favicon of http://hyeonseok.com BlogIcon 신현석

    간만의 글이 아주 중요한 내용이군요. 후편도 기대하겠습니다. :)

    2010/01/06 23:35 [ ADDR : EDIT/ DEL : REPLY ]
  2. 연주

    쉽고 공감가는 글이네요~ ^.^

    2010/01/27 18:14 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/그 외2009/08/26 00:06

YDN 2회 간략한 후기

오늘(09년 8얼 25일) Yahoo! Korea에서 2번째 YDN이 있었습니다.

이번 YDN에서는 YUI 3와 YQL을 소개 하였는데, 이에 대해 간략한 후기를 적어보도록 하겠습니다.

참고로, 이 후기는
지극히 개인적인 경험을 기반으로
지극히 개인적인 의견을 덧붙이는 것입니다.



YUI 어려워요
과거 YUI를 가지고 개발을 하는것은 사실 어려웠었습니다. 
prototype.js나 jQuery처럼 Core로 사용하기에는 복잡한 Relationships와 도움이 될만한 Reference가 적었기 때문이었죠.(제공하는 Reference는 Interface(Visual적인)에 대한 것들이 대부분이 었죠)
적어도 제가 YUI를 사용해볼려고 시도를 했을때는 그랬었습니다. 어쩌면 제가 못찾은걸 수 도 있겠죠 ;p

이젠 쉬워요
YUI 3에서는 Core로 사용하여도 어려움 없이 사용할 수 있도록 Name Space가 구성되었습니다. (어쩌면 YUI 2에서 지원되었던 것일 수도 있죠.) 우리가 흔히 사용하는 prototype.js, jQuery의 그것 처럼요.
이제는 YUI로 쉽게 Event Bind할 수 있고, 쉽게 DOM을 Select할 수 있으며, 쉽게 Animation Effect를 구현할 수 있어요.

가볍고, 빨라요
발표 내용중에 "가볍고, 빠르다" 라는 내용도 있었는데
사실 다른 Libraries와 비교해서 그렇게 딸리지 않는다
내부적으로 테스트했을땐 타 Libraries와 충분히 경쟁력이 있다
라고 하셨어요.(이 부분은 제가 못들었고 같이 있던 분이 이런 말을 했다고 제게 말씀해주셨습니다.)

Rails에서 쓰고 싶은데
제가 봤을땐 이제는 나름 쓸만해졌다라고 판단이 되어, Rails에서도 사용할 수 있는 Convertor가 있냐고 질문을 했었는데 "잘 모르겠다"고 하시더군요.(이 질문이 Jenny에게 전달 되기까지 힘들었습니다 ㅠ,.ㅠ)

진입장벽
우리가 익히 사용해왔던 Prototype.js, jQuery와는 틀린 Method Names를 가지고 있기 때문에 이것을 익히는데 시간이 소모될 듯 합니다. 하지만 과거처럼 어렵게 구성이 되어 있지 않아 쉽게 넘을 수 있을것 같습니다.
사실 이러한 진입장벽은 새로운것을 배울때 소모되는 지극히 당연한 기회비용이죠.

YUI에서는 축약식 Naming을 사용합니다.
예를들면 Drog&Drop기능을 "dd"로 선언하더군요.
이런류의 축약식 Naming은 양날의 검이죠. 코드를 짜는 사람의 입장에서는 쉽게 타이핑 할 수 있지만.. YUI를 잘 모르는 사람이 code를 보면 이게 무슨말인지 알 수 없으니 말입니다.
그리고 개인적으로 이런식의 Naming을 좋아하지 않습니다.

선입견을 버릴 수 있다면
"무겁다", "느리다", "어렵다" 이러한 YUI의 선입견만 버린다면
한번 사용해보는것도 나쁘지 않을 듯 합니다. (물런 실험정신 및 확인정신(사실인지)가 조금은 필요합니다. ;p)



YQL


오해
사실 저는 Pipes가 생긴게 ERD같아서 설계할때 사용하는 UML같은 것인줄 알았었습니다. 그런데 그런것이 전혀 아니더군요. Data Collector(?)이고(자세한 설명이 필요하신분은 @phphloveme님께 질문을!)
YQL은 Pipes의 개발자용 업그레이드 버전이라고 축약할 수 있겠습니다.

Query날려서 Web상에 있는 Data를!
SQL과 비슷한 문법으로 Query를 날려 Data를 Collect해오는 것이 YQL입니다.
Crawler를 만들거나 API를 통해서 Data를 Collect해오는것을 만드는것은 사실 귀찮은 일인데, Query만 날리면 바로 값을 Return해주죠.

오! 귀찮은 일을 줄여주었군!
저는 "와.. 이제 Crawler랑 API랑 통신하는 코드 안짜도 되겠다! 만세!!"라고 생각하며 기쁜마음으로 어느정도의 트래픽이나 규모를 감당할 수 있느냐고 질문을 했었는데
이건 Data가 어떻게 모이나?(혹은 보이나?) 정도로 사용할 수 있는 Prototype용으로 사용할 수 있는 서비스

라고 하시더군요. 어떤 질문자분께서 
사용해봤더니 하루에 4000K 트래픽밖에 허용이 안된다
라며 불만을 표하시기도 했었습니다.

재미는 있을 것 같은데, Prototype을 위한 서비스여서..
Prototype을 위한 서비스라 트래픽, 규모, 안정성 부분에 한계가 있어, YQL을 이용해서 서비스를 개발하기엔 무리가 있는것 같습니다.

결국은 내가 다 만들어야해
결국엔 Crawler나 API랑 통신하는 코드 다 짜야한다는 결론이 나옵니다.
이러한 결론을 도출하고 보니 YQL의 매력과 흥미가 사라지더군요.

추가
정진호님께서 제가 했던 YQL의 질문에 대한 답변을 정정해주셨습니다.
Pipes 와 YQL이 트래픽의 제한이 있지만
반드시 프로토타입 제작에만 사용되는 것은 아닙니다.

즉, YQL을 이용해 가져오는 데이터는
그 특성상 실시간 업데이트될 확률이 적습니다.
따라서 자체적으로 데이터를 일정 부분 캐싱하는 알고리즘을
이용하면 도움이 됩니다.

참고로 야후 본사쪽에서는 외부 파트너의 컨텐츠를
YQL로 가져와서 캐싱을 한 후에 실제 서비스에 이용하고 있습니다.

따라서 실시간 데이터 업데이트가 아닌
데이터의 수집/가공 영역에서 YQL을 사용해 보시기를 권해 드립니다.

오.. 그렇다면 저의 바람되로 귀찮은 일이 줄어드는 것이네요
물런 fallbacks를 마련해야겠죠?

효율과 한계는?
자 여기서 원래 할려고 했던 질문을 다시 정진호님께 해야 할 것 같네요.

1. 직접 Crawler나 API랑 통신하는 코드를 짜는데 시간을 들이고 안정적으로 Data를 Collect하는것 Vs YQL을 이용해서 빠르게 Collector를 만들지만, 속도와 안정성 측면에서는 모험을 해야 하는것
이 둘을 비교했을때 어떤것이 더 효율이 있을까요? (혹은 어느 수준까지는 YQL이 좋다)

2. YQL의 안정성이나 속도에 대한 통계수치가 나와 있는지 궁금합니다.

3. Query가 날라갔을때 그때 직접 Data를 Collect해오는것인지? 아니면 Cached Data를 가져오는 것인지도 궁금하구요



자.. 한줄요약

YUI 3는 쓸만해졌고, YQL은 재미있는 물건이지만 이걸가지고 뭔가 하기엔 무리가 있다. 재미있는 물건으로 잘만 활용한다면 기획자와 개발자에게 엄청 큰 도움(?)을 줄 것이지만, 안정성과 속도에서는 검증이 되었는지 잘 모르겠다.(이 부분은 정진호님께서 답변을 해주세요~ ㅎㅎ)


크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 그 외' 카테고리의 다른 글

YDN 2회 간략한 후기  (5) 2009/08/26
SUBVERSION CLIENT FOR THE MAC  (0) 2009/02/11
KCSC 불법정보(사이트)에 대한 차단 안내.  (4) 2008/10/24
브라우저 춘추전국시대가 아닌 엔진춘추전국시대  (0) 2008/09/04
구글 크롬을 잠깐 써보니..  (0) 2008/09/03
Firefox3가 나오면서 개발자가 한번쯤 읽어봄직한 문서  (0) 2008/06/23
Posted by Johan Kim hiphapis
Trackback 2 Comment 5

TRACKBACK http://hiphapis.net/trackback/165 관련글 쓰기

  1. hiphapis의 생각  삭제

    2009/08/26 00:23TRACKBACK FROM hiphapis' me2DAY

    YUI 3는 쓸만해졌고, YQL은 재미있는 물건이지만 이걸가지고 뭔가 하기엔 무리가 있다.

  2. [후기] 야후 개발자 네트워크 Tech Talk : YUI/YQL 활용하기  삭제

    2009/08/26 12:44TRACKBACK FROM 야후! 코리아 개발자 네트워크

    2009.8.25(화) 밤. 삼성동 야후!코리아 사무실에서는 &#8220;YUI/YQL 활용하기&#8221; 라는 주제로 야후 개발자 네트워크 Tech Talk가 열렸습니다. 원래는 야후! 본사에서 근무하는 두분의 개발자를 모시고 진행하는 것이었는데 한 분이 지난주 태국여행 중 댕기열이라는 열대모기로 전염되는 열병으로 입원, 급히 제가 대신 Pipes/YQL강사로 투입되는 해프닝이 벌어지기도 했습니다. 주중 퇴근 후 진행되는 개발자 이벤트의 특...

댓글을 달아 주세요

  1. Favicon of http://ydnkrblog.com BlogIcon 정진호

    요한님! 참석해 주셔서 감사합니다.
    선물 당첨 되신 것도 축하드리구요.

    행사 후 요한님의 질문에 대해 다시한번 생각해 보니
    Pipes 와 YQL이 트래픽의 제한이 있지만
    반드시 프로토타입 제작에만 사용되는 것은 아닙니다.

    즉, YQL을 이용해 가져오는 데이터는
    그 특성상 실시간 업데이트될 확률이 적습니다.
    따라서 자체적으로 데이터를 일정 부분 캐싱하는 알고리즘을
    이용하면 도움이 됩니다.

    참고로 야후 본사쪽에서는 외부 파트너의 컨텐츠를
    YQL로 가져와서 캐싱을 한 후에 실제 서비스에 이용하고 있습니다.

    따라서 실시간 데이터 업데이트가 아닌
    데이터의 수집/가공 영역에서 YQL을 사용해 보시기를 권해 드립니다.

    그리고 다른 질문자의 내용중 4000K는
    Y!Pipes가 한번에 가져 올수 있는 HTML Page의 크기입니다.
    정확한 수치는 본사 개발팀을 통해 확인 해 보겠습니다.


    감사합니다.
    다음에 다시 뵙겠습니다. :)

    2009/08/26 12:36 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon Johan Kim 기다림

      오랜만에 갔던 워크샵이어서 즐거웠었습니다.

      그리고 정정해주신 답변은 본문에 반영하였습니다.
      이렇게 신경 써 주셔서 고마워요 :)

      2009/08/26 14:30 [ ADDR : EDIT/ DEL ]
  2. Favicon of http://ydnkrblog.com BlogIcon 정진호

    참! 트랙백 이벤트 참여 하세요.
    구형 가방을 받은 분들을 위해
    상품은 신형 타거스 가방입니다.
    무게가 50% 가벼워 졌답니다. ㅎㅎ

    2009/08/26 12:39 [ ADDR : EDIT/ DEL : REPLY ]
  3. Favicon of http://ydnkrblog.com BlogIcon 야후 개발자 네트워크

    이벤트 당첨! 축하드립니다.

    선물을 받으실 수 있도록 아래 포스팅 참고하셔서
    주소를 메일로 보내 주세요. 빨리요! ^^
    http://ydnkrblog.com/blog/?p=609

    감사합니다~

    2009/09/07 10:31 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/그 외2009/02/11 10:29

SUBVERSION CLIENT FOR THE MAC

쓸만한 맥(Mac)용 서브버전(SUBVERSION) 어플리케이션이 나왔네요.
VERSIONS

윈도우용 서브버전 어플리케이션인 Tortoise같이 GUI에 익숙해지신 분이 맥에서 서브버전을 사용하시고 싶으실때 사용하시면 좋을것 같네요.

커밋(Commit)과 업데이트(Update)만 할 경우에는 특별히GUI툴이 필요 없겠지만
로그를 보거나, 과거 리비전(REVISION)의 파일내용을 확인하거나, 복구하는 등 간단하지 않은 작업을 할때는 아주 편하게 사용할 수 있다는 장점이 있습니다.

제가 자주 애용하는 웹SVN(SUBVERSION)인 Beanstalk(제 모든 개인프로젝트는 Beanstalk 사용)을 만든 wildbit의 작품입니다.
VERSIONS 로고를 본 순간부터 Beanstalk 짝퉁인가? 라고 생각했었답니다. 근데 같은 회사였네요. 멋진 디자인센스(Design Sense) 인것 같습니다. ;)
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 그 외' 카테고리의 다른 글

YDN 2회 간략한 후기  (5) 2009/08/26
SUBVERSION CLIENT FOR THE MAC  (0) 2009/02/11
KCSC 불법정보(사이트)에 대한 차단 안내.  (4) 2008/10/24
브라우저 춘추전국시대가 아닌 엔진춘추전국시대  (0) 2008/09/04
구글 크롬을 잠깐 써보니..  (0) 2008/09/03
Firefox3가 나오면서 개발자가 한번쯤 읽어봄직한 문서  (0) 2008/06/23
Posted by Johan Kim hiphapis
TAG beanstalk, Mac, Subversion, SVN, VERSIONS, 맥, 버전관리, 버젼스, 빈스톡, 서브버전
Trackback 1 Comment 0

TRACKBACK http://hiphapis.net/trackback/153 관련글 쓰기

  1. [RoR] 맥 OS X에 rvm을 이용해 ruby on rails 개발 환경 구축하기  삭제

    2011/10/30 18:39TRACKBACK FROM 월풍도원(月風道院) - Delight on the Simple Life

    맥에서 rvm(Ruby Version Manager)를 이용한 ruby on rails 개발 환경 구축 방법입니다.맥 OS X에 rvm을 이용해 ruby on rails 개발 환경 구축하기맥 OS X에서 루비 설치하기우선 터미널에서 아래의 커멘드를 이용해 RVM(Ruby Version Manager)을 설치합니다.$ bash &lt; &lt;(curl -s...

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁2009/02/02 12:58

IE7에서 text-decoration이 이상하게 나올때.

IE7에서 text-decoration: underline 이 이상하게 표현될 때가 있습니다.
조금 더 정확하게 표현을 하자면 밑줄이 제자리에 있지 않는 증상이죠.
font-family가 어떤것이냐에 따라 1px 올라가느냐 2px이 올라가느냐 정도의 차이가 있습니다.

문제의 원인은
  1. vertical-align:middle속성을 가진 DOM이
  2. text-decoration: underline 속성을 가진 DOM과
  3. 같은 레벨에 있을때
나타납니다. 아마 IE7의 Bug인것 같네요.
증상의 스크린샷

IE7에서 같은 레벨상에 vertical-align: middle의 DOM이 있을경우 text-decoration: underline인 DOM이 이상하게 표현되는 경우



해결책은 아주 간단합니다. vertical-align: middle의 객체를 div같은 display:block으로 감싸주면 되죠. 만약 이 객체의 우측에 위치해야 한다면 float: left로 Positioning을 해주시면 됩니다.
그 외 세세한것들은 디자인에 맞춰서 Styling 하면 되는것이죠.

위 스크린샷의 HTML&CSS 코드 입니다.
<h2>해결</h2>
<p>vertical-align:middle 객체를 div같은 display:block으로 감싸면 해결이 됩니다. 디자인에 따라 float을 부여하고 Styling을 하시면 됩니다.</p>
<p>
    <div style="float:left"><input type="text" style="vertical-align:middle;width: 160px" value="vertical-align:middle" /></div>
    <div style="float:left;padding:2px 0 0 5px">
        <span style="text-decoration: underline">It's span: 이것은 span입니다.</span>
        <a href="#">It's a: 이것은 a입니다</a>
    </div>
</p>
<p style="clear: both">
    <div style="float: left"><img src="vami.gif" style="vertical-align: middle" /></div>
    <div style="float:left;padding:15px 0 0 5px">
        <span style="text-decoration: underline">It's span: 이것은 span입니다.</span>
        <a href="#">It's a: 이것은 a입니다</a>
    </div>
</p>

크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

헤딩 제대로 사용하기. - 후편(완)-  (3) 2010/01/09
헤딩 제대로 사용하기(시멘틱 마크업하기). -전편-  (2) 2010/01/06
IE7에서 text-decoration이 이상하게 나올때.  (0) 2009/02/02
Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기  (4) 2008/11/27
[JS] IE6인지 구분하기  (0) 2008/08/20
CSS Frameworks  (0) 2008/08/01
Posted by Johan Kim hiphapis
TAG CSS, IE7, text-decoration, vertical-middle
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/149 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁2008/11/27 12:17

Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기

body에다가 class를 부여하여 css selector만 이용하는 방법입니다.
가장 많이 쓰이는 IE, IE6, IE7, 그 외.. 로 예제코드 만들어 봤습니다. (실제로 저는 이렇게 해서 사용합니다.)

<!--[if lte IE 6]><body class="ie ie6"><![endif]-->
<!--[if IE 7]><body class="ie ie7"><![endif]-->
<!--[if !IE]>--><body><!--<![endif]-->

#content { color: red; }
.ie #content { color: blue; }
.ie6 #content { color: pink; }
.ie7 #content { color: green; }


Conditional comments에 대해서

크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

헤딩 제대로 사용하기(시멘틱 마크업하기). -전편-  (2) 2010/01/06
IE7에서 text-decoration이 이상하게 나올때.  (0) 2009/02/02
Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기  (4) 2008/11/27
[JS] IE6인지 구분하기  (0) 2008/08/20
CSS Frameworks  (0) 2008/08/01
CSS Editors Reviewed  (0) 2008/06/25
Posted by Johan Kim hiphapis
Trackback 0 Comment 4

TRACKBACK http://hiphapis.net/trackback/148 관련글 쓰기

댓글을 달아 주세요

  1. Favicon of http://aswemaythink.kr BlogIcon metacortex

    요한 사마
    하노이 잘 다녀오3

    ps. 선물 꼭 사오셈 >_<

    2008/11/30 00:16 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      지금도 하노이 친구들 덕분에 일하는중..
      젠장!

      2008/11/30 12:22 [ ADDR : EDIT/ DEL ]
  2. Favicon of http://miya.pe.kr BlogIcon 김군우

    오홍~ 좋은데요?

    2008/12/18 13:31 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/그 외2008/10/24 10:12

KCSC 불법정보(사이트)에 대한 차단 안내.


배틀나이트 들어갔더니 이런......-_-

근데 이거 너무 개떡같이 만든거 아냐?
무엇때문에 그런건지 정보가 전혀 없자나..-_-
꼭 내가 전화걸어서 물어봐야 하니?
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 그 외' 카테고리의 다른 글

YDN 2회 간략한 후기  (5) 2009/08/26
SUBVERSION CLIENT FOR THE MAC  (0) 2009/02/11
KCSC 불법정보(사이트)에 대한 차단 안내.  (4) 2008/10/24
브라우저 춘추전국시대가 아닌 엔진춘추전국시대  (0) 2008/09/04
구글 크롬을 잠깐 써보니..  (0) 2008/09/03
Firefox3가 나오면서 개발자가 한번쯤 읽어봄직한 문서  (0) 2008/06/23
Posted by Johan Kim hiphapis
Trackback 0 Comment 4

TRACKBACK http://hiphapis.net/trackback/146 관련글 쓰기

댓글을 달아 주세요

  1. ...

    아 저도 일본사이트 들어가려는데 갑자기 저거 떠가지고 놀랬음.
    근대 그 사이트가 불법정보사이트라고 할말한곳은 아닌거 같은데
    왜 차단되었는지 이유도 설명안되있음...

    2008/11/18 12:50 [ ADDR : EDIT/ DEL : REPLY ]
  2. 공감

    그러게요

    2008/12/31 18:30 [ ADDR : EDIT/ DEL : REPLY ]
  3. 삽지리

    http://kr.battleknight.org
    여기로 들어가지네요..

    2009/02/04 16:44 [ ADDR : EDIT/ DEL : REPLY ]
  4. 초난감

    쇼핑몰 간만에 접속했더니 저게 뜨네요..
    의류 쇼핑몰인데 불법 요소는 전혀 없는 곳인데 왜저러지 짜증나네요 ㅠㅠ

    2009/02/25 03:24 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/그 외2008/09/04 12:54

브라우저 춘추전국시대가 아닌 엔진춘추전국시대

어제 구글 크롬 때문에 온 블로그가 떠들썩했고,
저뿐만이 아닌 많은 개발자 및 관심자들이 V8에 상당한 매력과 흥미를 느꼇습니다.
이에 모질라에서 질투(?)를 느꼇는지 바로 TraceMonkey(이하 TM)과 V8을 비교를 해서 올렸네요.

어제까지만 해도 "세계 2차 브라우저 대전이 일어나겠구나" 라고 생각했는데..
저 포스팅을 보니 브라우저 전쟁도 전쟁이지만 "엔진의 전쟁(Engine War)"이라고 생각이 드네요.

엔진들만 조합하면 새로운 브라우저가 탄생하는 시대가 도래했으니 말이죠.
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 그 외' 카테고리의 다른 글

SUBVERSION CLIENT FOR THE MAC  (0) 2009/02/11
KCSC 불법정보(사이트)에 대한 차단 안내.  (4) 2008/10/24
브라우저 춘추전국시대가 아닌 엔진춘추전국시대  (0) 2008/09/04
구글 크롬을 잠깐 써보니..  (0) 2008/09/03
Firefox3가 나오면서 개발자가 한번쯤 읽어봄직한 문서  (0) 2008/06/23
firefox3를 설치했습니다. (내용 추가08/06/18)  (4) 2008/06/17
Posted by Johan Kim hiphapis
TAG Browser, chrome, Engine, Firefox, Google, Mozilla, TraceMonkey, V8
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/142 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/그 외2008/09/03 10:19

구글 크롬을 잠깐 써보니..

오늘 출근하자 마자 베타를 다운받아 잠깐 써보고..
간략하게 느낀점을 써 볼려합니다.

FF3, IE7, Safari 에 있는 좋고 편한 기능들을 적용하거나 더욱 강화 시켜 적용한 것들이 눈에 띄는군요.
  • 주소 입력창 (FF3) - 더욱 강력해짐
  • 비밀번호 저장 기능 작동방식 (FF3) - 똑같음
  • 탭의 내용들이 썸네일로 표현되어 보여지는 기능 (IE7) - 새탭을 열때 이 기능을 응용하여 사용
  • 선택된 input를 표시해주는 기능 (Safari) - 색상만 틀리고 똑같음
  • 자체적인 Inspector 지원 (Safari) - 비슷함(똑같은거 같음)

그리고 SSB기능도 포함이 되어 있습니다.
단순하게 SSB만 된다고 하더라도 파격적인데..탭별로 독립적인 프로세스가 되므로 더욱 안정적이죠.(크롬은 멀티프로세스 입니다.)
그리고 바탕화면에 아이콘 만드는 기능은 Gears를 그대로 이용한것 같네요.
(당연한 얘기지만)이것을 보면 크롬은 Gears를 탑재한것 같습니다.

그리고 개인적으로 가장 기대가 되는것은 V8인데 사용시간이 그리 길지 않다보니..
아직 체감은 못하고 있습니다.
하지만 그들이 말한데로 Drag&Drop은 정말 부드럽게 잘 되네요

하지만 이것들은 그냥 가벼운 얘기일뿐..
브라우저가 여기까지 진화한것도 놀랍고 경이로운데..앞으로 어디까지 진화할지 무척 궁금합니다.

약 2년전부터 웹OS라는 말을 듣고 그때 당시에는 별 감흥이 없지만..
구글의 행보와 여러 웹의 동향을 볼때마다 깜짝깜짝 놀랍니다.
그리고 크롬, Ubiquity같은 것들을 보면서 웹OS의 시대는 이미 2년전에 개막했었던걸 느끼게 됩니다.

오늘 아침 출근해서 duecorda님과 잠깐 얘기를 나웠는데..우스갯소리로 크롬이 브라우저의 끝 보여주고 있다고 하시더군요.
저도 동감합니다.

하지만 여기가 끝이 아니겠죠. 앞으로 더 진화할 브라우저와 그로 인해 편하고 윤택해진 우리들의 삶을 기대해 봅니다.

참고링크

ps > 크롬으로 글을 쓰다가 결국 gg하고 FF3에서 마저 씁니다...
다른 위지윅 에디터는 안써봐서 모르겠지만... 적어도 티스토리에서 글을 쓰기는.....
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 그 외' 카테고리의 다른 글

KCSC 불법정보(사이트)에 대한 차단 안내.  (4) 2008/10/24
브라우저 춘추전국시대가 아닌 엔진춘추전국시대  (0) 2008/09/04
구글 크롬을 잠깐 써보니..  (0) 2008/09/03
Firefox3가 나오면서 개발자가 한번쯤 읽어봄직한 문서  (0) 2008/06/23
firefox3를 설치했습니다. (내용 추가08/06/18)  (4) 2008/06/17
flowchart.com의 js  (0) 2008/05/23
Posted by Johan Kim hiphapis
TAG Browser, chrome, Google, V8, 웹OS
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/141 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁2008/08/20 11:13

[JS] IE6인지 구분하기

var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;

if(IE6) {
  alert("i love ie");
}


참고링크
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

IE7에서 text-decoration이 이상하게 나올때.  (0) 2009/02/02
Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기  (4) 2008/11/27
[JS] IE6인지 구분하기  (0) 2008/08/20
CSS Frameworks  (0) 2008/08/01
CSS Editors Reviewed  (0) 2008/06/25
코딩 하기 전 에 문서부터 디자인을 하라  (2) 2008/03/19
Posted by Johan Kim hiphapis
TAG IE6, JavaScript
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/140 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁2008/08/01 02:20

CSS Frameworks

지극히 개인적이며, 이것들 모두 심도있게 사용하고 적은것이 아니라는 점 감안하시고 보세요~

이름 주저리
blueprintcss Grid 위주이며 class로 griding
RoR로 Grid를 재설정하여 CSS 파일을 생성할 수 있다.
Modular CSS 많이 사용되는 6개의 Grid만 지원
Grid별로 파일이 나눠져 있음
Download 버튼이 꼭꼭 숨어져 있어 찾기 힘듬
Emastic 최근에 나온 CSS Framework.
blueprintcss랑 비슷하다
Yahoo YUI 개인적으로는 별로 안좋아하는 naming sense ㅎㅎ
yaml Framework이라고 부를만한 규모
보통 Grid위주인 반면 yaml은 여러문제에 대해 고려가 되어 있고 지원을 하고 있다.
yaml 홈페이지에 나름 유용한 정보들도 좀있다.
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기  (4) 2008/11/27
[JS] IE6인지 구분하기  (0) 2008/08/20
CSS Frameworks  (0) 2008/08/01
CSS Editors Reviewed  (0) 2008/06/25
코딩 하기 전 에 문서부터 디자인을 하라  (2) 2008/03/19
탭메뉴는 어떻게 코딩 해야 할까?  (4) 2008/03/06
Posted by Johan Kim hiphapis
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/133 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/생각2008/07/04 12:41

다음 이메일 청구서, 정말로 재인증이 필요할까?

다음에서 청구서를 메일로 받아주는 좋은 서비스를 하고 있습니다.
그런데 한가지 불편한점은 청구서를 확인할때마다 ActiveX로 주민번호중 일부를 입력하는 본인 인증을 해야 한다는 것이죠.
불편하게 왜 그런것일까요..?

보안적인 사항이므로 아무나 못보게 할려고?
과연 메일 청구서를 아무나 볼 수 있는지 한번 살펴보죠.
제가 KTF 유저이므로 KTF를 예제로 흐름을 적어겠습니다.
  1. KTF에 회원가입할때 이메일주소를 적는다.
  2. 만약 회원가입때 안했다면 로그인 혹은 콜센터에 전화해 메일 주소를 바꾼다.
  3. 다음사이트에 로그인을 한다.
  4. KTF 요금 청구서가 도착한것을 확인한다
  5. 청구서를 클릭하면 ActiveX를 사용하여 주민번호중 일부를 입력하라고 한다.
  6. 입력하고 나면 청구서를 볼 수 있다.
내가 말한 메일주소
1번과 2번 항목에서 이미 본인 인증이 끝났고, 본인의 의사에 의해서 메일주소를 알려준 것 입니다.
저는 여기서 인증에 관한 모든것이 다 해결되어졌다고 생각합니다.

나만 볼 수 있는 메일함
해당 메일주소는 아무나 접근해서 볼 수 있나요?
아니죠. 메일주소로 로그인을 한 유저만이 신청한 청구서 메일을 볼 수 있습니다.

이 정도면 충분하지 않나요?

실제 세상(real world)보다 덜 귀찮아야 되지 않을까요? 반대로 더 귀찮다면 정말로 그것이 고객에게 가치를 주는것일까요?
실제 세상에서는 이런식으로 재차 본인인증을 하지 않습니다.
우편으로 청구서를 받을 경우를 생각해보죠
  1. KTF에 가입 혹은 회원정보(콜센터) 변경을 통해 주소를 알려준다.
  2. 회사에서 Print를 하고 우체국으로 보낸다.
  3. 우리집 우편함에 청구서가 있는것을 확인한다.
우편으로 받는것은 이메일로 받는것보다 더 노출의 위험이 있습니다.

more..

이메일이 우편보다 보안상으로 안전한것은 너무나 자명한 일이죠.
안그래도 안전한데 귀찮게 하면서까지 본인인증을 해야 하는 걸까요?
그리고 이 본인인증또한 무의미한것인데 말이죠...


(유사한 이유로 AIG보험에서는 해약환급금 테이블을 이메일로 못주고 팩스로만 준다고 하더군요. 사실 팩스가 보안적으로 더 노출되어 있는거 아닌가요?)
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 생각' 카테고리의 다른 글

UX를 악용하여 낚시하는 UI를 너무너무 사랑하는 오픈마켓  (3) 2010/01/27
다음 이메일 청구서, 정말로 재인증이 필요할까?  (4) 2008/07/04
오픈웹 소송 판결 선고기일 안내  (0) 2008/07/04
웹 접근성 향상 캠페인  (0) 2008/07/01
웹 표준 경진대회  (2) 2008/05/22
Martian Headsets  (0) 2008/04/15
Posted by Johan Kim hiphapis
Trackback 0 Comment 4

TRACKBACK http://hiphapis.net/trackback/137 관련글 쓰기

댓글을 달아 주세요

  1. Favicon of http://hyeonseok.com BlogIcon 신현석

    자신들이 책임을 지지 않고 사용자에게 책임을 전가하기 위한 수단인 거죠. 덕분에 개개인의 보안에 대한 인식은 점점 더 떨어지게 되고요.

    2008/07/09 23:29 [ ADDR : EDIT/ DEL : REPLY ]
  2. Favicon of http://dev.azki.org BlogIcon azki

    제가 쓰는 카드사에선 보안 메일을 받지 않고 그냥 메일 내용에 카드 사용 내역이 나오는 옵션이 있어서 잘 쓰고 있습니다.

    확실히 html 파일을 첨부해서 보내면 임시파일로 하드에 저장되기 때문에 문제이긴합니다만...

    청구서를 보내는 입장에선 어떤 메일 프로그램을 쓰던지 (혹은 어떤 웹메일) 간에 보안적인 문제가 발생하면 귀찮아지니 그렇겠지요.
    몇몇 사용자들이 다른 브라우저를 사용해서 못 이용하더라도, 혹은 매우 번거롭더라도 회사입장에선 그건 그것에 비해 큰 문제가 아니니까요^^
    하지만 **카드사 처럼 사용자에게 충분한 설명과 선택권을 주는 곳도 있답니다.

    2008/11/18 11:43 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      오, 거기 참 좋은 카드사네요!!

      말씀하신
      "몇몇 사용자들이 다른 브라우저를 사용해서 못 이용하더라도, 혹은 매우 번거롭더라도 회사입장에선 그건 그것에 비해 큰 문제가 아니니까요^^"
      는 저는 조금 다르게 생각합니다.

      이런 메일을 보내는 행위자체가.. 고객들에게 내역서를 보내주기 위함이라고 생각하기 때문에요..

      그렇기 때문에 못보는것은 원래 목적에서 벗어나는 아주아주 잘못된 행위라 생각하며
      매우 번거롭게 보게 된다면.. 이건 기획을 아주아주 잘못한 것이라고 저는 생각합니다. :)

      조금 얘기를 더 밖으로 끄집고 나가자면...
      실제로 우리나라 태반의 웹 사이트들이 이와 비슷한 안일한 생각으로 디자인하고 기획하고 개발하고 있는것같아 무척이나 아쉽고 한탄스럽습니다.
      왜 UI, UX(여기서 ui, ux는 javascript, html, css 같은 것를 말하는것이 아니라. HCI와 비슷한 레벨에서의 의미입니다.)등을 고려하지 않는지.. 개탄스러울 뿐입니다.
      아니 UI, UX등은 몰라도.. 쉽고 직관적으로 만들어야 하는데.. 그냥 있는 컨텐츠, 없는 컨텐츠 다 덕지덕지 붙여놓고 "짜잔!" 하고 있으니... 너무너무 아쉬울 뿐입니다.
      (쓰다보니 얘기가 흠..ㅎㅎ)

      2008/11/18 15:57 [ ADDR : EDIT/ DEL ]
  3. 하늘빛

    편하면 좋은 것이긴 한데, 이메일 자체로 보안성이 보장되지는 않습니다. 명세서 발행 업체 메일 송신 서버와 메일 수신 서버 간의 통신에서 메일 탈취가 될 수 있고, 메일 수신 서버와 사용자 간의 통신에서 메일 탈취가 될 수 있습니다. 또한 실제 세계가 아니라 전산망이라는 특성상 우편 명세서를 배달하는 우편 트럭을 터는 것보다 더 많은 양의 대량 탈취가 가능합니다. 따라서 보안 대책을 강구하는 것은 당연합니다.

    문제는 거기에 들어간 보안 대책이 실은 보안성이 전혀 없다는 것입니다. 주민번호 뒷자리가 암호이며 이용자가 수동 변경할 수 없다는 것이 문제입니다. 따라서 공격자는 숫자 6자리+α(7자리 중 1900년대 출생자는 맨 앞자리가 1 또는 2이므로), 즉 기대값 100만 번의 컴퓨터 계산만으로 보안 명세서를 볼 수 있습니다. 이는 요새 파는 싸구려 데스크탑 컴퓨터로도 순식간에 가능한 수준입니다.

    요금 내역을 보호하려다 요금 내역은 물론이요 주민번호마저 노출시키는 셈이죠.

    2011/11/27 11:00 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/생각2008/07/04 12:04

오픈웹 소송 판결 선고기일 안내

http://openweb.or.kr/?p=142

오는 7월 24일 오후 2시 오픈웹 소송 판결 선고가 있습니다.
부디 좋은 결과가 있기를!!

그 동안 김기창교수님과 도움을 주셨던 많은 분들 정말 수고하셨습니다.
감사합니다!
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 생각' 카테고리의 다른 글

UX를 악용하여 낚시하는 UI를 너무너무 사랑하는 오픈마켓  (3) 2010/01/27
다음 이메일 청구서, 정말로 재인증이 필요할까?  (4) 2008/07/04
오픈웹 소송 판결 선고기일 안내  (0) 2008/07/04
웹 접근성 향상 캠페인  (0) 2008/07/01
웹 표준 경진대회  (2) 2008/05/22
Martian Headsets  (0) 2008/04/15
Posted by Johan Kim hiphapis
TAG 오픈웹
Trackback 1 Comment 0

TRACKBACK http://hiphapis.net/trackback/136 관련글 쓰기

  1. 오픈웹, 금융결제원 상대로 1심 패소  삭제

    2008/07/25 15:28TRACKBACK FROM 랜덤여신의 폐인모드

    2007년 1월의 조정 신청을 시작으로 1년 반 동안 계속된 '오픈웹 소송'의 1심 판결에서, 서울중앙지방법원이 원고 패소 판정을 내렸습니다. 오픈웹(Open Web)은 '마이크로소프트 윈도우와 인터넷 익스플로러 환경에서만 인터넷 뱅킹을 할 수 있는 것은 부당하다'며 지난 2006년에 김기창 교수를 중심으로 결성된 단체입니다. 이번 소송은 IE 전용 공인인증서를 배포하고 있는 금융결제원을 대상으로 제기되었습니다. 오픈웹은 '다른 웹 브라우저나 운영...

댓글을 달아 주세요

웹[기술|표준|접근]/생각2008/07/01 10:35

웹 접근성 향상 캠페인

장애 없는 사이버세상, 웹 접근성 향상 캠페인

아직도 이 캠페인을 하고 있었군요..!! 어제부터 이번주 금요일(08/07/04)까지 진행하는 거군요.

조금 둘러보니 예전보다 자료도 더 많아 진것 같네요..
인터넷을 장애인들이 어떻게 이용하는지 설명하는 동영상 부터 웹 접근성 소개, 장애인차별금지법 및 접근성 향상을 위한 활동 등에 대한 교육자료가 준비되어 있습니다.
질 높은 자료들이 있으니 접근성에 대해 관심있으신 분은 한번씩 둘러보셔도 좋을것 같네요..!!

그리고 엑박이 상품인 수기 공모전도 있습니다.(https://www.kado.or.kr/wa/Essay/)

ps> 약 1년전 이 캠페인에 관련되어서 썻던 포스팅: 장애없는 사이버 세상
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 생각' 카테고리의 다른 글

다음 이메일 청구서, 정말로 재인증이 필요할까?  (4) 2008/07/04
오픈웹 소송 판결 선고기일 안내  (0) 2008/07/04
웹 접근성 향상 캠페인  (0) 2008/07/01
웹 표준 경진대회  (2) 2008/05/22
Martian Headsets  (0) 2008/04/15
WSP 에 CSS3 에 추가하고 싶은 idea 하나 적었는데..  (0) 2008/03/05
Posted by Johan Kim hiphapis
TAG iabf, kado, 웹 접근성 향상 캠페인, 장애없는 사이버세상
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/134 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁2008/06/25 11:21

CSS Editors Reviewed

http://www.smashingmagazine.com/2008/06/19/css-editors-reviewed/

OS에 상관없이 CSS Editor를 16개나 Review 한 것입니다.
영어의 압박이 있긴 하지만..심심풀이 땅콩으로 볼만한 것 같습니다.

세세하게 둘러보진 않았지만..지금보니.. Mac용 Editor도 많네요. 괜찮아 보이는것들도 있고...
메인 OS가 Windows여서 Windows용이 사실 좋은데..
왠지 Mac Editor가 더 이뻐보이네요.. 이뻐보여서 그런지 왠지 기능도 더 좋을거 같고;;
(Rails랑 svn용으로만 쓰는 불쌍한 내 MacBook의 활용도가 조금 더 올라갈려나;;)

둘러보니 Linux에서도 구동되는 CSS Editor(CSSED)도 있네요!!
그리고 CSS 천재라고 불리는 Eric Meyer가 CSS Editor도 만들었다는 사실도 알았습니다.
듣는순간 촌티가 확 나면서 왠지 안쓰고 싶은 느낌이 드는 이름을 가진 Editor..
그 이름하여 Eric Meyer’s CSS Sculptor..............;;;

그래도 Eric Meyer인데!! 라는 생각으로 Eric Meyer’s CSS Sculptor 에 들어가는 순간..
순간 두 눈을 의심하게 되며, 머리속이 하얗지면서 두 손과 어깨의 힘이 쭉빠지게 됩니다.
요즘 흔히들 말하는 "멍~" 때리게 됩니다. 그리고 정확히 2.515초 후에 Scream!!! 하게 될 수 도 -ㅁ-;;
(역시 서양인들의 쎈쓰!! ㅎㅎ)

아래는 http://www.smashingmagazine.com/2008/06/19/css-editors-reviewed/ 에서 리뷰한 CSS Editors입니다.
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

[JS] IE6인지 구분하기  (0) 2008/08/20
CSS Frameworks  (0) 2008/08/01
CSS Editors Reviewed  (0) 2008/06/25
코딩 하기 전 에 문서부터 디자인을 하라  (2) 2008/03/19
탭메뉴는 어떻게 코딩 해야 할까?  (4) 2008/03/06
IE에서 display를 toggle할때 여백이 바뀌는 경우.(알수 없는 공백이 생길때)  (0) 2008/02/04
Posted by Johan Kim hiphapis
TAG CSS, css editor, Editor
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/132 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/그 외2008/06/23 17:40

Firefox3가 나오면서 개발자가 한번쯤 읽어봄직한 문서

http://developer.mozilla.org/ko/docs/Firefox_3_for_developers

요약을 할까 하다가 무의미한것 같아서 그냥 링크만 딸랑 적겠습니다. ㅎㅎ;

ps> 차니님의 자제분의 Firefox3 홍보 동영상입니다.

출처 : 지수와 함께 떠나는 Firefox 3 여행
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 그 외' 카테고리의 다른 글

브라우저 춘추전국시대가 아닌 엔진춘추전국시대  (0) 2008/09/04
구글 크롬을 잠깐 써보니..  (0) 2008/09/03
Firefox3가 나오면서 개발자가 한번쯤 읽어봄직한 문서  (0) 2008/06/23
firefox3를 설치했습니다. (내용 추가08/06/18)  (4) 2008/06/17
flowchart.com의 js  (0) 2008/05/23
vista로 국민은행(kbstar.com)가기..  (0) 2008/03/25
Posted by Johan Kim hiphapis
TAG developers, Firefox3, Firefox3 for developers
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/130 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/그 외2008/06/17 13:10

firefox3를 설치했습니다. (내용 추가08/06/18)

과거에 팝업창으로 뜨던 "암호저장여부"가 브라우져의 상단에 뿅 하고 나타납니다.(약간 맥 스타일 같기도 하고 ㅎㅎ)
Look의 IE7 느낌이 이 조금 나네요. (위에서 뿅 뜨는건 맥이니깐 Safari도 닮았다고 해야 하나;;)
OSX(mac)에서 보니 Safari(사파리)와 완전 비슷하군요;;
흠 그럼 결론은...각 OS가 제공하는 브라우져를 따라한..? ㅎㅎ

Smart Location Bar
주소표시창이 좀 더 멋지구리하게 바꼇습니다.
검색된 사이트의 title과 favicon이 표시이 합께 표시가 됩니다.
Smart Location Bar 스크린샷


Download Manager
업데이트후 최초에 다운로드목록(Ctrl+J)에서 내역 지운것들이 다시 살아나는 경우가 있지만
창 안에서 파일검색이 가능하네요. 그리고 더블클릭으로 실행하도록 바꼇구요..
그리고 다운로드중에 일시정지도 된답니다.
사용자 삽입 이미지



Status Bar
공식 Features에는 없는 내용인것 같은데..
상태표시줄에도 설치한 에드온의 actions 과 현재 이루어 지고 있는 현황이 표시되는것 같네요.
상태표시줄 스크린샷


Add-ons Manager
검색기능이 Add-ons Manager 패널 안으로 들어와서 구지 사이트로 이동하지 않아도 되네요.
Add-ons Manager 스크린샷


그 외에도
HTML, CSS 렌더링방식이 좀 더 표준에 가까워졌고
보안이 강화되었으며, 북마크 기능이 쉬워지고 영어철자검사 기능도 추가되었습니다.
열거 된 것 외에도 많은 부분이 수정이 되었으니 자세한것은 아래 링크를 참고하길

Firefox Features: http://www.mozilla.com/en-US/firefox/features/
Firefox 3: What's New, What's Hot, and What's Not: http://www.sitepoint.com/article/firefox-3-whats-new-whats-hot




CSS 렌더링이 틀려져서 그런지 종종 깨져 보이는 곳도 있네요.(티스토리 로그인 화면도 깨지는군요..)
반대로 깨져보이던게 제대로 보이는 웃긴 상황도 연출된답니다. ㅎㅎ

근데..궁극적으로 Firebug가 아직 호완이 안됩니다.
Firefox2를 업그레이드 한거라 Firefox2 실행도 안됩니다.
결론은 지워야 된다는거죠..
어흑!
Firebug 지원할때까지 당분간 Firefox3는 보류!

근데 현석님이 다신 코멘트대로 1.2로 업데이트 하니깐 되는군요..
근데 왜 부가기능에서 업데이트찾기 하니깐 없다고 뻥치는거냣!!

Firefox 3.0  다운로드 주소:
http://www.mozilla.com/en-US/firefox/

ps> 아시는 분은 아시겠지만 지금 Firefox3가 기네스에 도전하고 있습니다. (자세한내용은 http://channy.tistory.com/263)
흠흠 저는 5개 올리겠군요..! (회사컴, 맥북, 집컴 1, 집컴 2, 굴러다니던 노트북)

Download Day 2008
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 그 외' 카테고리의 다른 글

구글 크롬을 잠깐 써보니..  (0) 2008/09/03
Firefox3가 나오면서 개발자가 한번쯤 읽어봄직한 문서  (0) 2008/06/23
firefox3를 설치했습니다. (내용 추가08/06/18)  (4) 2008/06/17
flowchart.com의 js  (0) 2008/05/23
vista로 국민은행(kbstar.com)가기..  (0) 2008/03/25
관심사  (0) 2008/03/18
Posted by Johan Kim hiphapis
TAG Firefox3
Trackback 2 Comment 4

TRACKBACK http://hiphapis.net/trackback/128 관련글 쓰기

  1. 웹서핑, 그리고 Firefox 3 rc2 즈음에 이르러.  삭제

    2008/06/17 13:32TRACKBACK FROM wurifen's '巴人聚'

    97년인가, PC통신의 '이야기'라는 프로그램의 텔넷 환경이 아닌 Netscape라는 프로그램의 인터넷 환경을 처음 접했는데, 맛만 좀 보다가, 세상과 잠시 단절을 했다. 그리고 복귀한 후 달라진 것은 바로 '메일'이 '웹메일'로 바뀐 것이었는데, 더욱 신기했던 것은 바로 '웹서핑(WebSurfing)'이었다. 컴퓨터로 게시판에 글을 쓰고, 채팅도 하고, 메일도 보내는 것은 이전 PC통신 시대에도 있었던 것이지만, 이 웹서핑이라는 것은 구체적인 정보..

  2. hiphapis의 생각  삭제

    2008/06/18 14:37TRACKBACK FROM hiphapis' me2DAY

    Firefox3 출시해서 눈에 보이는 간단한것들을 리뷰해봤습니다.

댓글을 달아 주세요

  1. Favicon of http://www.wurifen.com BlogIcon 우리팬

    1. 지금 이 시각까지 FF3 최신버전은 rc3 입니다. http://www.mozilla.or.kr/ko/firefox/all-rc.html 물론 기다림님이 링크거신 daum의 ftp 주소에도 rc3가 올라와 있더군요. rc2와 비교해볼 때 윈도우 버전에선 별 다를바가 없다고는 하지만, 그냥 기분삼아.-_-; 내일(18일) 오전이면 FF3 정식이 올라온다고들 하죠. 전 오늘인 줄 알고 새벽부터 버텼다가 결국 손들었슴다. ㅠ.ㅠ

    2. FF3에서 FF2의 확장기능을 강제적으로 설치시키는 확장이 있습니다. 저도 한동안 써봤는데, 별다른 에러없이 잘 사용되더군요. (테마는 좀 무리였고...) 'Nightly Tester Tools' 라는 확장을 찾으시면 됩니다. 여기 주소는 http://www.oxymoronical.com/web/firefox/nightly 입니다. 전 모두 22개의 확장기능을 쓰는데, 이제껏 아무런 문제가 없었습니다.

    도움이 되었으면 좋겠습니다. ^^

    2008/06/17 13:30 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      오 그렇군요! 정말 감사합니다! Force Install!! ㅎㅎ

      2008/06/17 14:24 [ ADDR : EDIT/ DEL ]
  2. Favicon of http://hyeonseok.com BlogIcon 신현석

    파이어버그 1.2깔면 되요.

    2008/06/17 20:25 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      아, 그렇네요.!
      왜 업데이트찾기 하면 안되냣! ㅠ,.ㅠ

      2008/06/18 14:14 [ ADDR : EDIT/ DEL ]

웹[기술|표준|접근]/그 외2008/05/23 12:10

flowchart.com의 js

와우!
js파일중 하나가 26164줄;; 것도 압축한게;;

완전 토나온다 -ㅅ-;
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 그 외' 카테고리의 다른 글

Firefox3가 나오면서 개발자가 한번쯤 읽어봄직한 문서  (0) 2008/06/23
firefox3를 설치했습니다. (내용 추가08/06/18)  (4) 2008/06/17
flowchart.com의 js  (0) 2008/05/23
vista로 국민은행(kbstar.com)가기..  (0) 2008/03/25
관심사  (0) 2008/03/18
소리바다 상황을 보면서..  (4) 2007/10/15
Posted by Johan Kim hiphapis
TAG JavaScript
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/125 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/생각2008/05/22 11:17

웹 표준 경진대회

CDK에서 주최하는 웹 표준 경진대회..
난 왜 지금 알았을까;;
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 생각' 카테고리의 다른 글

오픈웹 소송 판결 선고기일 안내  (0) 2008/07/04
웹 접근성 향상 캠페인  (0) 2008/07/01
웹 표준 경진대회  (2) 2008/05/22
Martian Headsets  (0) 2008/04/15
WSP 에 CSS3 에 추가하고 싶은 idea 하나 적었는데..  (0) 2008/03/05
메뉴들은 뭐로 마크업 해야 될까?  (0) 2008/02/13
Posted by Johan Kim hiphapis
TAG CDK, 웹 표준 경진대회
Trackback 0 Comment 2

TRACKBACK http://hiphapis.net/trackback/124 관련글 쓰기

댓글을 달아 주세요

  1. Favicon of http://hyeonseok.com BlogIcon 신현석

    관심좀 가져줘요. ㅎㅎ

    2008/05/22 15:46 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      어흑 한동안 웹서핑을 안했더니 많이 늦었어요 ㅠ,.ㅠ

      2008/05/23 12:08 [ ADDR : EDIT/ DEL ]

웹[기술|표준|접근]/생각2008/04/15 15:09

Martian Headsets

지금 웹이 개판(?)인것에 대해 Joel on Software 이 나름의 분석을 하고 적나라한 비판을 했습니다.
꼭 읽어보시길 권합니다.

http://www.joelonsoftware.com/items/2008/03/17.html

영어가 부담스러우시다면.
http://enzine.tistory.com/category/%5BIT%5D%20Joel%20on%20Software
완벽한 한국말은 아니지만 저같은 영맹에게는 너무나 큰 도움이 되실 겁니다.
thx 4 행복한고니
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 생각' 카테고리의 다른 글

웹 접근성 향상 캠페인  (0) 2008/07/01
웹 표준 경진대회  (2) 2008/05/22
Martian Headsets  (0) 2008/04/15
WSP 에 CSS3 에 추가하고 싶은 idea 하나 적었는데..  (0) 2008/03/05
메뉴들은 뭐로 마크업 해야 될까?  (0) 2008/02/13
HTML5 초안 릴리즈, IE8 Acid2 성공~  (2) 2008/01/31
Posted by Johan Kim hiphapis
TAG IE8, joel on software, Web Standard, 웹표준
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/120 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/그 외2008/03/25 12:06

vista로 국민은행(kbstar.com)가기..

사용자 삽입 이미지


국민은행뿐만 아니라 다른 은행사이트들도 마찬가지다..
뭐만 할라카면
키보드보안키보드보안키보드보안키보드보안키보드보안키보드보안키보드보안키보드보안키보드보안
키보드보안키보드보안키보드보안키보드보안키보드보안키보드보안키보드보안키보드보안키보드보안
키보드보안키보드보안키보드보안키보드보안키보드보안키보드보안키보드보안키보드보안키보드보안
아우..즈질이야~
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 그 외' 카테고리의 다른 글

firefox3를 설치했습니다. (내용 추가08/06/18)  (4) 2008/06/17
flowchart.com의 js  (0) 2008/05/23
vista로 국민은행(kbstar.com)가기..  (0) 2008/03/25
관심사  (0) 2008/03/18
소리바다 상황을 보면서..  (4) 2007/10/15
도메인 하나 샀습니다.  (2) 2007/09/19
Posted by Johan Kim hiphapis
TAG kbstar, Vista, 국민은행, 은행홈페이지
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/116 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁2008/03/19 03:02

코딩 하기 전 에 문서부터 디자인을 하라

HTML을 코딩하는 사람들이 시안을 처음 받았을때 하는 고민은..
  • 별다른 생각없이 시안대로 코딩하거나
  • 화면구성(즉 layout, grid)을 고민.
일것이다 하지만 이것은 초보와 중수의 모습이다.
그렇다면 고수의 고민은 무엇일까..?
먼저 문서 구조를 생각한다.
가 아닐까?

자료(정보)를 담고 있다는 측면에서 보면 웹은 책, 신문 처럼 문서라고 할 수 있다. 그리고 실제로 웹은 문서이다.
책에서 중요한것중 하나는 "좋은 정보를 어떻게 보여줘야 독자들이 잘 이해할 수 있을까?" 라고 생각한다.
가장 중요한것은 장식이 아니라 정보 그 자체이다.

그러므로 정보의 성격을 구분을 해서 문서의 구조를 새우는것이 가장 중요하다.
이렇게 하면 semantic한 마크업을 보다 쉽게 할 수 있게 되고, 이후 작업인 CSS, Javascript도 접근성을 보장하며 작업하게 될 확률이 높아진다.

한마디로 문서 구조부터 생각을 하고 작업을 시작하면 표준을 준수한 결과물이 나오게 될 확률이 높아지는 것이다. (시작이 반..?)
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

CSS Frameworks  (0) 2008/08/01
CSS Editors Reviewed  (0) 2008/06/25
코딩 하기 전 에 문서부터 디자인을 하라  (2) 2008/03/19
탭메뉴는 어떻게 코딩 해야 할까?  (4) 2008/03/06
IE에서 display를 toggle할때 여백이 바뀌는 경우.(알수 없는 공백이 생길때)  (0) 2008/02/04
IE6 에서 print 했는데 글씨가 겹쳐서 나올때  (0) 2008/02/01
Posted by Johan Kim hiphapis
TAG 구조, 표준
Trackback 0 Comment 2

TRACKBACK http://hiphapis.net/trackback/113 관련글 쓰기

댓글을 달아 주세요

  1. Favicon of http://naradesign.net/ BlogIcon 정찬명

    와! 정말 중요하고 맞는 말씀.

    2008/12/06 12:47 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/그 외2008/03/18 14:49

관심사

근 1년전부터 UI, UX, HCI (이하 UI)쪽에 관심이 많이 가고있다.
사실 UI는 개발자들이 전혀 관심도 가지지 않고 신경조차 쓰지 않는 분야이다. 나 역시 그런 개발자중 한명이었다.
내가 이쪽에 관심을 가지게 되었던 이유는 아마 주변사람과 환경때문일 것 이다.
외국의 훌륭한 사이트들을 많이 접하다보니 국내와는 차이점을 느끼게 되고, 그럴때마다 회사동료가 많은것을 알려주었기 때문이었다. (thanks randomwalk)

사소하지만 알고보면 엄청난 뜻과 의도가 숨겨져 있는 아주 매력적인 일인거 같다.
그 매력은 마치..
꾀죄죄한 복장의 한 낭인이 5~6명의 무뢰배에게 포위 되어 엉거주춤 서 있었다.
당연이 구경꾼들이 모였고 많은 구경꾼들은 낭인을 향해 "하필 양아치문파에게 걸리다니..운도 없군" 하며 혀를 차고 있었다.
순간 무뢰배들이 '어깨힘좀주는 진법' 을 구사하며 낭인을 덥쳤다.
쾅 하는 굉음과함께 먼지가 자욱히 일었고 구경꾼들은 먼지가 가기만 기다리고 있었다.
먼지가 가라앉고 구경꾼들은 싸움터를 향해 봤는데 놀라운 일이 벌어져있었다.
낭인은 없고 널부러져있는 무뢰배들만 있었던 것이다.
구경꾼들중에 이 낭인의 무예를 본것 같은 느낌이라고 해야할까..?
그 무예를 보고 낭인이 마교교주라는걸 알아냈을때의 느낌이라고 해야할까..? (뭐래는거야..;;)
영화를 보면서 감독의 숨은의도를 알아챘을때의 느낌.. 뭐 그런거..?


얼마전에 문득 든 생각인데..
웹표준과 접근성 그리고 UI 컨설팅을 함께 하면 재밌을거 같다라는 생각을 했다.
그러면서 내가 한번 해보면..? 이라는 생각까지 하게 되었는데..
웹표준, 접근성은 내가 어느정도 자신이 있지만..UI에서는 '영 아니올시다' 여서 ㅎㅎ
그냥 사이트보고 내 나름의 기준을 가지고 평가(흠 평가란 말은 너무 거창한거 같은데;;)하는 정도만 가능하다.
역시 이쪽은 산업디쟈인이나 인지공학쪽을 전공한 친구들이 하는게 아마 더 멋지고 훌륭한 결과물이 나올 것 이다.



ps > 이 글의 정체는 뭐지;;
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 그 외' 카테고리의 다른 글

flowchart.com의 js  (0) 2008/05/23
vista로 국민은행(kbstar.com)가기..  (0) 2008/03/25
관심사  (0) 2008/03/18
소리바다 상황을 보면서..  (4) 2007/10/15
도메인 하나 샀습니다.  (2) 2007/09/19
Flickr팀을 만났습니다!  (2) 2007/08/24
Posted by Johan Kim hiphapis
TAG HCI, UI, UX
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/115 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁2008/03/06 14:53

탭메뉴는 어떻게 코딩 해야 할까?

우선 먼저 말하고 싶은것은 내가 적은 방법이 정답은 아니다.
정수 '2' 라는 값을 만들기 위해서
  • 1+1
  • 2/8*((16-4)/3)*2
  • sin 5/6 pi * 4
같은 많은 식들이 존재하듯이, 아래에 나온 방법도 그중 하나 일 뿐이다.

별 내용없는 두서는 이제 접기로 하고...
  • semantic markup
  • CSS가 없을때도 제대로 보이도록
  • Javascript가 동작하지 않을때도 동작하도록
위의 사항들을 고려하며 코딩되었다.

<menu id="tab_menus">
html markup 결과

    <li class="selected"><a href="#Menu_01">Menu 01</a></li>
    <li><a href="#Menu_02">Menu 02</a></li>
    <li><a href="#Menu_03">Menu 03</a></li>
</menu>
<div class="tab_right"></div>

<div id="Menu_01" class="content">
    <h3>Menu 01</h3>
    <p>Menu 01...blablablablabla</p>
    <a href="#tab_menus" class="go_tab_menu"><img src="btn_top.gif" alt="go tab menu" /></a>
</div>
<div id="Menu_02" class="content">
    <h3>Menu 02</h3>
    <p>Menu 02...blablablablabla</p>
    <a href="#tab_menus" class="go_tab_menu"><img src="btn_top.gif" alt="go tab menu" /></a>
</div>
<div id="Menu_03" class="content">
    <h3>Menu 03</h3>
    <p>Menu 03...blablablablabla</p>
    <a href="#tab_menus" class="go_tab_menu"><img src="btn_top.gif" alt="go tab menu" /></a>
</div>

tab menu 의 링크를 각각의 content에 걸어줌으로 인해 quick link의 역활을 수행하여 접근성을 높였고, 각 content 하단에 tab menu로 바로 가는 quick link도 제공함으로 더욱 완성도 높은 접근성이 보장되었다. 하지만 이렇게 보면 전혀 tab menu같지가 않다.

이제는 tab menu스럽게 꾸며보자.

body {
    font:12px arial;
}
a {
    text-decoration:none;
}
img {
    border:0;
}

/* tab menu */
#tab_menus {
    margin:0;
    padding:0;
    list-style:none;
}
#tab_menus li {
    margin-bottom:16px;
    float:left;
    padding:0px;
}
#tab_menus li a {
    padding:8px 10px;
    color:#505050;
    border-width:1px 0 1px 1px;
    border-style:solid;
    border-color:#ae9f96;
    background-color:#eae4e0;
    background-image:none;
    font-weight:bold;
    font-size:0.9em;
    display:block;
}
#tab_menus li a:hover {
    color:black;
}
#tab_menus li.selected a {
    border-bottom:0 solid white;
    background:white url("blt_arrowdown.gif") no-repeat center bottom;
    color:black;
}
CSS 적용 후 모습

.tab_right {
    margin-bottom:16px;
    border-width:0 0 1px 1px;
    border-style:solid;
    border-color:#ae9f96;
    width:80px;
    height:31px;
    float:left;
}

/* content */
.content {
    clear:both;
    padding-left:10px;
}
.content h3 {
    margin:0;
    padding:0;
    font-size:1.2em;
    color:#ff4800;
}

tab menu의 a를 block으로 잡고 hover를 주어 onMouse상태일때 Javascript없이도 변화를 줄 수 있게 하였다.
#Menu_02, #Menu_03에 display:none을 안 준 것을 궁금해 하는 독자가 있다면, 당신은 천재!
Javascript없이도 모든 content의 접근성을 보장하기 위해서다. 이건 조금 후 다시 설명하기로 하고..

자 이제는 마무리. Javascript로 tab menu 동작을 만들자.
mootools 1.11(Element.Event, Element.Selectors)을 이용하였다
var selected_menu = 0;
Javascript 적용 후 모습

var menus = $$('#tab_menus li');
var contents = $$('div.content');
contents.each(function(div, i) {
    if (i != 0) {
        div.setStyle('display', 'none');
    }
})

menus.each(function(quick_link, i) {
    quick_link.getElement("a").blur();
    quick_link.addEvent('click', function(event) {
        e = new Event(event).stop();
        contents[selected_menu].setStyle('display', 'none');
        menus[selected_menu].removeClass('selected');

        contents[i].setStyle('display', 'block');
        quick_link.addClass('selected');
        selected_menu = i;
    });
});

#Menu_01을 제외한 다른 content들은 가려주었고, tab menu의 박스에 click 이벤트를 걸어줌으로써 toggle 기능이 완성이 되었다.
만약 content들을 CSS에서 가려주었다면(#Menu_02, #Menu_03 display:none) CSS는 render가 되었는데 Javascript가 동작이 안되는 상황이 오면 다른 content에 접근할 방법이 없어진다.
Javascript로 원하는 content를 display:block으로 바꿔줘야 하는데 Javascript가 동작이 안되니 tab을 백날눌러도 그 tab의 content는 볼 수 가 없게 되는 것이다.


결론.
결국은 content는 CSS와 Javascipt에 영향을 받지 않게 설계,코딩 되어야 하고 더불어 semantic하게 markup되어야 한다는 것이다.

다운로드
미리보기 (링크걸리는줄 알았는데 그게 아니네요. 아..이럴때 개인서버가 살아있었다면..)
tab-menu.html




압축파일(html, js, images)
tab-menu.zip





ps > 이거 스크롤의 압박이;;
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

CSS Editors Reviewed  (0) 2008/06/25
코딩 하기 전 에 문서부터 디자인을 하라  (2) 2008/03/19
탭메뉴는 어떻게 코딩 해야 할까?  (4) 2008/03/06
IE에서 display를 toggle할때 여백이 바뀌는 경우.(알수 없는 공백이 생길때)  (0) 2008/02/04
IE6 에서 print 했는데 글씨가 겹쳐서 나올때  (0) 2008/02/01
mac profile  (0) 2008/01/31
Posted by Johan Kim hiphapis
TAG CSS, HTML, JavaScript, MooTools, Semantic, tabmenu, 탭메뉴
Trackback 0 Comment 4

TRACKBACK http://hiphapis.net/trackback/112 관련글 쓰기

댓글을 달아 주세요

  1. Favicon of http://sylee.kr BlogIcon sy

    좋은 소스 잘 봤습니다...
    클래스로 하면 한 페이지에 복수의 탭메뉴를 구성하는데 더 용이할 것 같습니다.

    2008/04/11 18:02 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      감사합니다:)

      복수의 탭메뉴를 구성할때 말씀하신대로 class를 부여해서 하는것도 좋은 방법이죠! ㅎㅎ

      2008/04/12 11:43 [ ADDR : EDIT/ DEL ]
  2. chan

    소스 다운받았어요ㅋㅋ 탭 코딩해야되는데 참고해야겠어요ㅋ
    감사합니다~

    2009/01/15 17:33 [ ADDR : EDIT/ DEL : REPLY ]
  3. backy

    어후 감사합니다.
    제가 진행하는 일게 도움이 될꺼 같아요!!!

    2011/01/31 02:25 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/생각2008/03/05 16:30

WSP 에 CSS3 에 추가하고 싶은 idea 하나 적었는데..

일전에 적었던 CSS 에 바라는것들에서 border options에 관한것을 Tell the CSS WG what you want from CSS3에다가 남기고 왔다.
(WSP에 CSS3에 추가했으면 하는 IDEA를 접수하고 있다. 자세한것은 군우님이 Standard Magazine에 쓰신 글을 참고 http://forum.standardmag.org/viewtopic.php?id=1962)

역시 영어는 어렵다 ㅠ,.ㅠ
친한 동생한테 번역을 부탁해서, 그걸로 코멘트를 남기긴 했는데..
흠..번역한걸 읽어보니...내가 한글로 보낸거랑 조금 내용이 틀린것 같기도 하고 ㅠ,.ㅠ
뭐 WSP에서 알아서 듣겠지 -ㅅ-;; 난 동생을 믿는다!

아참. CSS 에 바라는것들에 적었던 parent selector 가 추가가 되었다. 물런 사용법은 틀리지만 ㅎㅎ
round에 관련된것은 이미 많은 분들이 코멘트를 남겨 놓으셧다.
reset도 번역해서 올리고 싶은데..역시 짧은 영어실력으론..크흑;
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 생각' 카테고리의 다른 글

웹 표준 경진대회  (2) 2008/05/22
Martian Headsets  (0) 2008/04/15
WSP 에 CSS3 에 추가하고 싶은 idea 하나 적었는데..  (0) 2008/03/05
메뉴들은 뭐로 마크업 해야 될까?  (0) 2008/02/13
HTML5 초안 릴리즈, IE8 Acid2 성공~  (2) 2008/01/31
IE 접근금지..?  (2) 2007/12/21
Posted by Johan Kim hiphapis
TAG border dashed, border dotted, CSS, css3, parent selector, Web Standards Project
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/109 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/생각2008/02/13 10:54

메뉴들은 뭐로 마크업 해야 될까?

Q. 메뉴는 어떤 tag로 마크업을 해야 될까요~?
  1. form
  2. menu
  3. ul
  4. div
사실 이 문제에 정답! 은 없다. 뭐로 마크업을 하든 보여지는게 메뉴면 되니깐 말이다.
하지만 문서로써의 의미, 즉 semantic을 생각한다면 아마 menu가 정답에 가장 가깝지 않을까..?
"좋아! 이제부터 menu로 메뉴들을 마크업하자!!" 라고 한다면 한가지 알려주고 싶은게 한가지 있다.
그건 바로 menu보다는 ul을 쓰라는 것이다.

"아니 5초전에는 menu를 쓰라더니 지금은 ul을 쓰라고..?"
ul을 쓰라고 하는 이유는 w3가 menu 보다 ul을 사용하라고 강력하게 추천하기 때문이다.
  1. http://www.w3.org/TR/1999/REC-html401-19991224/struct/lists.html#edef-MENU
  2. http://www.w3.org/TR/1999/REC-html401-19991224/sgml/loosedtd.html#dir
첫번째 링크 타고 들어가면
We strongly recommend using UL instead of these elements.
이유는 모르겠지만 w3에서는 menu, dir 을 만들고 무지 후회를 했나보다.
(menu를 쓰는게 의미적으로 더 적합하다고 나는 생각하기 때문에, 이러한 w3입장은 솔직히 유감이다)
그렇다면 xhtml에서 menu를 빼지 않았을까..?

html 4.01 다음으로 애용되는 xhtml1-transitional 를 살펴보자
xhtml1-transitional 에는 menu가 있다. 아마도 4.01과의 호환성 때문에 존재하는것 같다
235 : <!ENTITY % lists "ul | ol | dl | menu | dir">
520 : <!-- single column list (DEPRECATED) -->
521 : <!ELEMENT menu (li)+>
522 : <!ATTLIST menu
523 :   %attrs;
524 :   compact     (compact)     #IMPLIED
525 :   >

그렇다면, xhtml 1.1에도 있을까..?
안타깝게도 xhtml1.1에는 없다. menu, dir은 사라지고 dl, dt, dd, ol, ul, li 만 존재한다
18 : <!-- Lists
19 :
20 :        dl, dt, dd, ol, ul, li
21 :
22 :     This module declares the list-oriented element types
23 :     and their attributes.
24 : -->
25 :
26 : <!ENTITY % dl.qname  "dl" >
27 : <!ENTITY % dt.qname  "dt" >
28 : <!ENTITY % dd.qname  "dd" >
29 : <!ENTITY % ol.qname  "ol" >
30 : <!ENTITY % ul.qname  "ul" >
31 : <!ENTITY % li.qname  "li" >

얼마전 초안이 나온 html5는 어떨까..?
오오오옷!!!!!! menu 가 존재한다..!! 아주 반가운 소식이 아닐 수 가 없다!! :)
더군다나 예전과는 완전 다른 입장인것 같다. 무슨소리냐 하면 html4에서는 ul을 쓸것을 강력하게 추천했지만, html5를 보면 메뉴를 써야하는 모든곳을 menu로 마크업이 가능하게 되었기 때문이다. (이 때문에 List element 가 아닌 Interactive elements에 있는건지도 모르겠다. 처음에 List element에 없어서..menu가 사라진줄 알고 실망했었다. 솔직히 아직까지 html5에서 말하는 Interactive elements의 정의가 무엇인지 잘 모르겠다)
content 메뉴, toolbar 메뉴, html 메뉴(우리가 흔히 말하는 메뉴) 를 menu를 사용해서 표현이 가능하다. (type attribute로 구분지어서 사용 가능) 말그대로 html에서 나타나는 모든 메뉴는 menu로 마크업이 가능하다.


결론은.."아직은 정답은을 알 수 없다. 하지만 html5가 나오면서 menu가 좀 더 정답에 가까워 진게 아닐까..?"

html5가 나오면 찜찜하게 ul로 메뉴를 마크업 하지 않아도 된다!! 만세!! lol
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 생각' 카테고리의 다른 글

Martian Headsets  (0) 2008/04/15
WSP 에 CSS3 에 추가하고 싶은 idea 하나 적었는데..  (0) 2008/03/05
메뉴들은 뭐로 마크업 해야 될까?  (0) 2008/02/13
HTML5 초안 릴리즈, IE8 Acid2 성공~  (2) 2008/01/31
IE 접근금지..?  (2) 2007/12/21
CSS 에 바라는것들  (7) 2007/10/17
Posted by Johan Kim hiphapis
TAG dir, HTML4.01, html5, menu, ul, xhtml1 transitional, xhtml1.1
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/105 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁2008/02/04 17:46

IE에서 display를 toggle할때 여백이 바뀌는 경우.(알수 없는 공백이 생길때)

IE에서 display:none인 element를 toggle할때(block/none) IE에서 전 과 후의 여백이 틀려지는 상황이 발생하는 경우가 있는데
사용자 삽입 이미지

이럴때 해결책은 min-height를 넣어주면 된다.

IE6은 min-height를 지원않으므로 어쩔 수 없이 Hack을 써야한다.

height:37px; /* IE6 */
height /**/:auto; /* FF, IE7 */
min-height:37px; /* FF, IE7 */

height만 적어주어도 되지 않느냐~? 란 의문이 들 수 도 있겠지만 그렇게 되면 display:none인 element가 block(show)상태가 되었을때 position:absoulte된 것 처럼 위에 덮어쓰게 된다.
사용자 삽입 이미지

크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

코딩 하기 전 에 문서부터 디자인을 하라  (2) 2008/03/19
탭메뉴는 어떻게 코딩 해야 할까?  (4) 2008/03/06
IE에서 display를 toggle할때 여백이 바뀌는 경우.(알수 없는 공백이 생길때)  (0) 2008/02/04
IE6 에서 print 했는데 글씨가 겹쳐서 나올때  (0) 2008/02/01
mac profile  (0) 2008/01/31
table 에서 overflow:hidden 하기  (0) 2008/01/24
Posted by Johan Kim hiphapis
TAG CSS, display, IE, margin, toggle
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/101 관련글 쓰기

댓글을 달아 주세요