티스토리 뷰

728x90
반응형
서울대학교의 학교 소개 웹페이지 입니다.




디자인을 위해 일반적인 시스템폰트(굴림, 돋움)를 사용하지 않고 다른 유료 상용 폰트를 사용하였습니다.

이 페이지의 HTML 마크업은 어떻게 되어있을까요?


<img title="'세계를 선도하는 대학'의 실현을 위해 SNU가 힘차게 비상합니다
                        열정 서울대학교에서는 언제나 넘쳐흐르는 열정을 느낄 수 있습니다. 각 학문분야마다 훌륭한 교수들과 학생들이 자아의 실현과 국가의 발전 및 인류의 번영에 이바지하기 위하여 연구와 교육에 힘을 쏟고 있기 때문입니다. 밤늦게까지 환하게 불을 밝히고 있는 도서관, 연구실, 실험실은 하루도 쉴 틈이 없는 서울대인들과 그들의 환호성으로 가득합니다.
                        도전 서울대학교에서는 시대를 앞서가는 도전 정신을 느낄 수 있습니다. 서울대학교는 민족의 대학으로서 우리나라의 경이적인 경제 발전과 민주화에 크게 기여해 왔으며 명실 공히 우리나라 지성의 산실로서의 역할을 충실히 해 왔습니다. 이제는 국가 발전의 동량을 육성하는 역할을 넘어서서 21세기 새로운 문명을 주도하는 대학으로 도약하고자 합니다.
                        성취 2007년 11월 영국의 'The Times'지는 서울대학교를 세계 51위의 대학으로 평가하였습니다. 부족한 재정과 여러 가지 제약 하에서 이러한 성과를 거두었다는 것은 서울대학교가 이룩한 업적과 성취가  세계의 명문대학들에 비해 결코 뒤지지 않는다는 점을 다시 한번 입증한다고 할 것입니다.
                        융화와 개방 서울대학교는 이제 민족사적 위상을 넘어 세계사적 무대로 전진할 것입니다. 이를 위한 중심원리로 저는 '융화와 개방'을 채택하고자 합니다. 우리 학생들이 '세계인'으로서의 소양과 자질을  갖추도록 하기 위하여 기초 교육을 더욱 든든하게 하고, 세계적 수준의 연구 성과를 거두기 위하여 학문분야별, 지역별 경계를 뛰어넘는 개방과 융화를 실천하려 합니다." alt="'세계를 선도하는 대학'의 실현을 위해 SNU가 힘차게 비상합니다
                        열정 서울대학교에서는 언제나 넘쳐흐르는 열정을 느낄 수 있습니다. 각 학문분야마다 훌륭한 교수들과 학생들이 자아의 실현과 국가의 발전 및 인류의 번영에 이바지하기 위하여 연구와 교육에 힘을 쏟고 있기 때문입니다. 밤늦게까지 환하게 불을 밝히고 있는 도서관, 연구실, 실험실은 하루도 쉴 틈이 없는 서울대인들과 그들의 환호성으로 가득합니다.
                        도전 서울대학교에서는 시대를 앞서가는 도전 정신을 느낄 수 있습니다. 서울대학교는 민족의 대학으로서 우리나라의 경이적인 경제 발전과 민주화에 크게 기여해 왔으며 명실 공히 우리나라 지성의 산실로서의 역할을 충실히 해 왔습니다. 이제는 국가 발전의 동량을 육성하는 역할을 넘어서서 21세기 새로운 문명을 주도하는 대학으로 도약하고자 합니다.
                        성취 2007년 11월 영국의 'The Times'지는 서울대학교를 세계 51위의 대학으로 평가하였습니다. 부족한 재정과 여러 가지 제약 하에서 이러한 성과를 거두었다는 것은 서울대학교가 이룩한 업적과 성취가  세계의 명문대학들에 비해 결코 뒤지지 않는다는 점을 다시 한번 입증한다고 할 것입니다.
                        융화와 개방 서울대학교는 이제 민족사적 위상을 넘어 세계사적 무대로 전진할 것입니다. 이를 위한 중심원리로 저는 '융화와 개방'을 채택하고자 합니다. 우리 학생들이 '세계인'으로서의 소양과 자질을  갖추도록 하기 위하여 기초 교육을 더욱 든든하게 하고, 세계적 수준의 연구 성과를 거두기 위하여 학문분야별, 지역별 경계를 뛰어넘는 개방과 융화를 실천하려 합니다." src="images/ab0201_tx1.gif"/>




이 모든 텍스트는 한개의 통이미지로 잘려져 있고, 대체텍스트로 이 이미지가 담고 있는 모든 텍스트가 들어갔습니다.





다음은 한나라당의 소개 페이지 입니다.



여기서도 마찬가지로 디자인을 위해 시스템 폰트가 아닌 상용 폰트를 사용하였습니다.

이곳은 어떻게 마크업되었을까요?


<img alt="그분들을 비롯한 서민들이 저와 한나라당에 간절히 원하는 것이 무엇인지 압니다.바로 ‘희망’입니다. 열심히 일하면 더 나은 삶이 반드시 보장되는 사회가  올 수 있다는 믿음을 달라는 것입니다. 그 동안 우리 정치는 국민이 얼마나 희망에 목말라 하는지를 외면해 왔습니다. 그래서 우리 정치는 국민과 멀어질 수밖에 없었습니다. 깊이깊이 반성합니다. 저는 국민과 자주 만나고 함께 호흡하는 것이 정치를 살리는 지름길이라고 생각합니다. 저와 한나라당은 국민과의 ‘소통’의 문을 활짝 열겠습니다. 지역, 계층간의 갈등을 해소하고 그 간극을 메우는 ‘화합’의 다리가 되겠습니다. 국정의 무한책임을 진 집권여당답게 진정한 정치를 향한 ‘쇄신’의 선봉에 서겠습니다." src="../images/hannara/hannara_01_txt04.gif"/>


이곳은 단락단락마다 이미지를 잘랐고

단락 텍스트를 담아 대체텍스트를 넣었습니다.




가볍게 두군데만 돌아봤는데 대체텍스트를 넣었다는 점에서는 일단 박수를 보냅니다.




그런데 과연 이렇게 긴 대체텍스트. 여러면에 있어서 효율적인가요?


웹접근성 가이드에서는 대체텍스트가 너무 길지 않도록 하라는 문구가 있고

이렇게 긴 텍스트 또는 이미지의 부연설명을 위한 내용을 담기 위해서 longdesc 라는 속성이

이미 html 스펙상에 존재합니다.

하지만 longdesc 속성을 사용하여 콘텐츠를 관리하면

별도의 html 문서를 하나 더 만들어서 관리해야하는 번거로움이 따르게 됩니다.

또한 그 html 문서가 계속 해서 잘 유지된다는 보장도 없습니다.

전임자가 이 파일의 존재에 대한 인수인계를 하지 않는다면

후임자는 자칫 이 html 문서를 발견하지 못하고 관리를 안하게 될 수도 있습니다.





이 페이지는 어느 재단의 연혁페이지 입니다.

연도와 내용들이 디자인을 위해서 예쁘게 꾸며졌습니다.




자 여러분들은 이 페이지를 마크업하신다면 어떻게 하시겠습니까?

아마 가장 흔한 방법이 연도를 나타나내는 이미지를 각각 자르고 그 다음에 내용들도 한줄씩 이미지를 잘라

이를 마크업하고 하나의 이미지가 하나의 연혁들을  담고 있기때문에 이를 대체텍스트로 넣을 것입니다.



자 그렇다면 몇개의 이미지를 잘라야되는지 볼까요?


약 30개의 년도 이미지를 잘라야 하고

100개 가까운 연혁 내용들을 잘라야 합니다.

이 한페이지를 위해서 웹퍼블리셔는 130개의 이미지를 자르는 시간과, 노동을 감내해야합니다.

이렇게 디자인된 텍스트들로 꾸며진 정보들이 일정량 이상이라면

이런 방식으로는 시간을 다투어야 하는 프로젝트일정상에도 부하가 걸립니다.


또한 스크린리더기를 통하여 접근하는 분들에게도 과연 얼만큼이나 정보습득이 쉬울까요?

게다가 이미지에 대한 request만 130여개가 요청되므로

request를 줄이라는 웹사이트 퍼포먼스 극대화 전략에서도 반대되는 행위이며

퍼포먼스상에서도 무리가 따릅니다. (물론 정적인 html 페이지이므로 그렇게 심각할 정도는 아니겠지만요)




그래서 저는 많은 양의 정보텍스트가 디자인되어 있는 경우 여러분들께 이러한 방법을 추천합니다.


<div class="img_wrapper" style="position:relative;width:600px;height:500px">
  <h2>여러분 환영합니다.</h2>
  <p>우리는 할수 있습니다. 할수 있다는 마음가짐으로 함께 열심히 뜁시다.</p>
  <h3>2010 회사 5대 전략</h3>
  <ul>
    <li>아껴쓰기</li>
    <li>나눠쓰기</li>
    <li>바꿔쓰기</li>
    <li>다시쓰기</li>
  </ul>
  <p>여러분들의 적극적 협력하에 우리모두 이겨냅시다. <strong>다음해에는 여러분에게 두둑한 보너스를!</strong></p>
  <img src="intro.jpg" style="position:absolute;top:0;left:0;" alt="">
</div>




이미지를 크게 하나로 잘라 리퀘스트요청을 최소화 함과 동시에 이미지 슬라이스에 투입되는 시간을 줄입니다.

부모 엘리먼트안에 텍스트들을 의미있게 마크업하고, 크게 자른 이미지를 img 태그를 사용하여 넣습니다.

이미지를 background로 넣지 않는 이유는 검색엔진이 이미지를 크롤링할수 있도록 하려는 의도도 담겨있습니다.

부모엘리먼트에 position:relative를 선언하고 width, height를 이미지의 크기에 맞게 선언합니다.

그리고 img에 position:absolute;top:0;left:0을 선언하면

이미지가 텍스트위에 위치하게 되어 텍스트는 이미지에 가려 보이지 않게 되고

사용자가 시각으로 보는 브라우저에는 디자인된 페이지가 보이게 됩니다.



이와 같은 방법을 사용할때는 다음과 같은 문제점이 발생할수 있습니다.

순수하게 html로 마크업된 내용이 이미지크기보다 길어 이미지에서 삐져 나와 보이는 경우가 있습니다.

이럴때는 부모엘리먼트에 overflow:hidden으로 선언하여 height 를 넘는 부분을 안보이게 할수도 있지만

그렇게 한다면 이미지를 끈 상태에서는 overflow 밖으로 넘어간 콘텐츠는 보이지 않기 때문에

overflow:hidden으로 관리하기 보다는 line-height를 줄이거나 font-size를 약간 줄임으로서

어떻게든 이미지 영역 밖으로 넘어가지 않도록 하는 것을 추천합니다.



그리고 이와 같이 마크업한다면 이미지 텍스트 내용에서도 상대적으로 중요한 문구들이 있는데

이 부분에서 마크업상으로 <strong> 태그들을 사용하거나 의미있는 마크업을 할수 있습니다.



하지만 제가 제안한 이 방법도 디자인과 의미있는 마크업과의 일종의 타협이라고 볼수 있습니다.

이미지 슬라이스가 귀찮다고 무작정 이 방법을 통해서만 모든 페이지를 만든다면

그것 역시 바람직하다고 말할수 없습니다.



웹퍼블리셔들의 꼼꼼함이 보다 건강한 정보습득을 가능하게 합니다.









728x90
반응형
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함