정보통신부 홈페이지가 열렸습니다.

freshworks · Post by **freshworks** » 2005 10 29 18:00 09

정통부 홈페이지가 재경부에 이어서 두번째로 XHTML, CSS 기반으로 열렸습니다. 아직 버그도 많고 잘못된 부분도 많습니다.
짧은 기간동안 개인적인 부족함과 여러 문제점들로 인해서 반쪽짜리 웹표준과 접근성이 되었습니다만, 앞으론 더 나은 결과물을 만들 수 있지 않을까 합니다.
올해부터 공공부문에서 접근성과 XHTML, CSS에 대해서 점점 관심을 높여가니 조금씩 정착되리라 생각됩니다.
아직까지 표준과 비표준에 대해서 모르는 경우가 태반이고, 브라우저의 텍스트 크기변경을 이용하지 않고 비표준 속성인 zoom을 이용한 화면 확대/축소 버튼 처럼 실제 큰 도움이 되지 않는 요소들을 원하는 경우가 발생하므로 지금 시점에서 먼 미래를 내다봤을때 올바른 웹 표준과 접근성이 정착되도록 이순간에도 표준 알리기에 힘쓰는 사람들끼리 더욱 많은 토론을 하고 정보를 교환했으면 합니다.
두서 없는 글 끝까지 읽어주셔서 감사합니다.

Post by **hyeonseok** » 2005 11 01 13:13 16

수고 많으셨습니다.

풍경 · Post by 풍경 » 2005 11 03 02:27 01

아직은 첫페이지 로딩만 거의 1분 이상 걸리네요.

하루 하루 나아지기를 기다려 보아야겠네요

빛알갱이 · Post by **빛알갱이** » 2005 11 03 03:51 42

저도 우선 노고에 감사를 드립니다 !!

풍경 wrote:아직은 첫페이지 로딩만 거의 1분 이상 걸리네요.

flash가 여러 개 있으니... 정부 기관의 웹 사이트에서 플래시를 이렇게 많이 쓰는 나라도 그리 흔치 않을 듯

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko-KR">
<head>
	<title>정보통신부 홈페이지에 오신 것을 환영합니다</title>
	<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />

charset을 표시하는 meta는 head의 맨 처음에 나와야 하는데, title 다음에 나왔네요. 대부분의 브라우저가 그런 경우에도 잘 처리하지만, 그래도 일부러 브라우저에게 일을 더하게 할 필요는 없겠지요?

xml-lang과 lang의 값이 굳이 다르게(하나는 ko이고 다른 하나는 ko-KR) 주신 까닭은 무엇인지도 궁금해지네요.

아마도 '고객인 정통부의 요구'때문이었으리라고 짐작합니다만, 순전히 주소창을 간소화하기 위한 프레임 사용을 하지 않았다면 더 좋았을 것입니다. 이런 식으로 만들어 놓으면 웹의 가장 기본적인 특징 중 하나인 교차 참조를 위한 주소를 알아내기 위해 사용자가 추가적인 노력을 해야 합니다. 재경부 웹 사이트는 저와 이 부분에 대한 생각이 같으신 현석님 '작품'이어서인지 프레임을 쓰지 않았네요.

손님 · Post by 손님 » 2005 11 03 04:56 05

이제 정부기관 홈페이지들이 점점 웹표준에 맞게 변하는가 보군요

고무적인 일입니다..

그런데, 재경부 홈페이지를 현석님이 작업하셨군요..

모두 부럽습니다.. ^^

전 언제쯤이나 두 분처럼 될지..

lefthander · Post by **lefthander** » 2005 11 05 13:24 15

사실 재경부 웹사이트에서도 한국 웹사이트들의 고질적인 문제들이 보입니다. 우선 이미지 사용이 너무 과도해서, 저 같은 저사양 시스템에서는 로딩이 꽤 느립니다. 특히 텍스트나 CSS 속성으로 충분히 대체할 만한 곳에도 어김없이 이미지가 쓰였습니다.

예를 들면 '국정브리핑'(#briefing) 부분은 외각선과 배경색을 이미지 하나를 통채로 배경으로 써서 구현했는데, 이는 div 태그와 CSS 속성의 조합으로 충분히 대체할 수 있습니다.

또 800x600 같은 저해상도에 충분히 대비가 되어있지 않고, 철저하게 픽셀 기반 레이아웃이라 브라우저에서 글자 크기를 임의로 확대/축소할 때 제대로 대응하지 못하고 레이아웃이 깨집니다(이 점은 국내만의 문제는 아닙니다만). http://www.msn.com 이나 http://www.yahoo.com 등에서 글자 크기 확대/축소를 해보면 웹페이지가 똑똑하게 반응하는 것이 볼 수 있을 겁니다.

성공적인 웹사이트는 사실 웹 표준에만 집착해서 테이블 안 쓰고, (x)html, css 적합성 검사 통과만 적당히 한다 해서 만들어지는 것은 아니고, 사용자 접근성이나 편의성의 관점에서 다각도로 숙고해야 할 문제가 되겠습니다.

freshworks · Post by **freshworks** » 2005 11 05 21:36 44

빛알갱이 wrote:
풍경 wrote:아직은 첫페이지 로딩만 거의 1분 이상 걸리네요.
flash가 여러 개 있으니... 정부 기관의 웹 사이트에서 플래시를 이렇게 많이 쓰는 나라도 그리 흔치 않을 듯

메인 페이지를 보시면 이글을 처음 적었을때와는 다르게 <a href="http://www.ypbooks.co.kr/ypbooks/WebHom ... >블루오션</a>을 연상케하는(?) 디자인으로 추가변경이 되었음을 알 수 있습니다.(개인적으로 블루오션 전략에 대해서 금광을 발견한 카우보이 마냥 흥분하는 분위기가 조금 이해가 안됩니다만...)
안그래도 많다 못해 흘러넘치는 이미지들과 커다란 플래시로 인해서 CPU 사용률과 리소스 사용률이 급격하게 올라감을 알 수 있습니다. 이러한 문제는 디자인 트렌드(국내에서만)를 따르다보니 결국 무거운 사이트가 되어버렸습니다.

뭔가 웹 페이지에서 움직이는게 당연히 필요하다고 생각하는게 일반적인데, 심한 말이긴 합니다만 과연 매크로미디어사가 플래시를 안만들었다면, 화면상에 움직이는게 없으면 온몸이 근질거림 증상을 어떻게 해결했을지도 참 궁금할 따름이죠.

플래시 네비게이션은 말씀안드려도 되겠지만, 매크로미디어에서 아무리 접근성에 관련된 부분을 제공하더라도 근본적으로 플로그인이기 때문에 플래시로 네비게이션 메뉴를 제공하는 것은(따로 fallback을 제공하더라도) 좋지 못한 것이라고 생각합니다.

아무튼 사람마다 틀리겠지만, 저 메인화면을 보고 부드럽고 멋진 디자인이다라고 생각하는 사람도 있는 반면에, 저처럼 파스텔로 그린 무인도 풍경화로 생각하는 사람도 있겠죠.

빛알갱이 wrote:charset을 표시하는 meta는 head의 맨 처음에 나와야 하는데, title 다음에 나왔네요. 대부분의 브라우저가 그런 경우에도 잘 처리하지만, 그래도 일부러 브라우저에게 일을 더하게 할 필요는 없겠지요?

xml-lang과 lang의 값이 굳이 다르게(하나는 ko이고 다른 하나는 ko-KR) 주신 까닭은 무엇인지도 궁금해지네요.

빛알갱이님 덕분에 수정했습니다. 고맙습니다.

빛알갱이 wrote:아마도 '고객인 정통부의 요구'때문이었으리라고 짐작합니다만, 순전히 주소창을 간소화하기 위한 프레임 사용을 하지 않았다면 더 좋았을 것입니다.

저도 프레임으로 왜 감싸는지에 대해서 이해가 안됩니다. 빛알갱이님께서 말씀하신대로 URL을 짧게 보여주기 위한것 외엔 이득이 전혀 없는데도 말이죠. 아마도 기존 정통부 홈페이지가 그러게 되어 있었기 때문에 이번에도 그렇게 했으리라 생각됩니다. 정통부 외에도 각 공공기관을 비롯해서 이런 경우가 많은데, 넌센스인거 같습니다.

lefthander wrote:또 800x600 같은 저해상도에 충분히 대비가 되어있지 않고, 철저하게 픽셀 기반 레이아웃이라 브라우저에서 글자 크기를 임의로 확대/축소할 때 제대로 대응하지 못하고 레이아웃이 깨집니다(이 점은 국내만의 문제는 아닙니다만). http://www.msn.com 이나 http://www.yahoo.com 등에서 글자 크기 확대/축소를 해보면 웹페이지가 똑똑하게 반응하는 것이 볼 수 있을 겁니다.

처음 글에서 ie의 zoom attribute를 언급한 이유도 이것인데, 기존 디자이너들이 글꼴이 예쁘지 않다는 이유 또는 선입견과 화려함만을 추구하는 국내 디자인 행태(트렌드)로 온통 이미지를 덕지덕지 사용해서 높은 트래픽 증가와 fix된 레이아웃 덕분에 위에 말씀하신 flexible(liquid) 레이아웃의 이득을 보지 못하게 된 결과입니다. 정보제공자의 역할에 대한 망각으로 화려함을 중요시하는 풍토는 공공기관도 일반 상업사이트와 마찬가지일겁니다. 이부분은 개발사나 클라이언트 모두 각성해야될 부분입니다.

lefthander wrote:성공적인 웹사이트는 사실 웹 표준에만 집착해서 테이블 안 쓰고, (x)html, css 적합성 검사 통과만 적당히 한다 해서 만들어지는 것은 아니고, 사용자 접근성이나 편의성의 관점에서 다각도로 숙고해야 할 문제가 되겠습니다.

반쪽짜리 웹표준이라 언급한 이유도 lefthander님이 말씀하신 내용과 같습니다. 실상 테이블만 안썼지 XHTML+CSS를 사용해서 접근성을 고려한 부분이 많이 부족합니다. 자칫 테이블을 안쓰고 XHTML과 CSS를 사용하는게 기존 문제점들은 고쳐지지 않고 하나의 유행처럼 흘러가선 안되겠죠. 말씀하신대로 XHTML+CSS가 제대로 알려지지 않은 상황에서 지침서대로 W3C Validation만 통과하면 땡이라고 생각하는게 대부분입니다. 그나마 통과라도 하면 다행이구요.

Semantic Markup도 중요하고 이것저것 다 중요하지만 (한국만의) 디자인 트렌드라는 명목하에 아무 생각도 없이 레이아웃이 그려지고, CSS의 장점(Layer 개념이 아닙니다)을 잘 살리지 못하고 직소퍼즐마냥 틀안에 꽉채우기식 UI에 대해서 올바른 지침서가 필요하다는 생각이 듭니다.

외국애들은 아직도 56Kbps 모뎀을 쓰니까 우리처럼 화려하게 이미지를 쓸 수 없으니까 디자인이 저 모양인거고, 우리나라는 브로드밴드 환경이니까 이정도는 뭐 괜찮지 않느냐는 이야기를 들으면 우리나라는 인터넷회선강국이므로 자원을 펑펑 써도 된다는 얘기로 밖에 들리지 않더군요. 그리고 개인적인 생각으론 국내 웹 디자인이 과연 유럽, 일본, 미국에 비해서 발전했고 나은가에 대해서도 회의적인 생각입니다.

적절히 사용된 이미지와 잘 구성된 타이포그래피(아무리 굴림, 돋움이라도)를 사용한 디자인, 얼마나 크나큰 이득을 얻을 수 있는지 알아야 합니다.

마지막으로, 이 글이 빙 둘러서 얘기하지 않고 직설적으로 얘기하고 싶었기 때문에 감정적인 부분이나 심한 표현이 있습니다. 제 시각이 맘에 안드시는 분들도 계실테구요. 하지만, 분명 한국 웹이 다른 나라에 비해서 장점이 존재하지만 아직 드러나지 않은 단점들이 너무나 많기에 무조건 앞만 보고 달려가기 보다는 조금 천천히 걷더라도 하나씩 기본을 쌓아갔으면 하는 바램입니다.

yser=이서 · Post by **yser=이서** » 2005 11 05 22:48 46

lefthander wrote:성공적인 웹사이트는 사실 웹 표준에만 집착해서 테이블 안 쓰고, (x)html, css 적합성 검사 통과만 적당히 한다 해서 만들어지는 것은 아니고, 사용자 접근성이나 편의성의 관점에서 다각도로 숙고해야 할 문제가 되겠습니다.

맞는 말입니다.
테이블은 꼭 써야할 곳에는 알맞게 쓰고, w3c validator 는 어디까지나 최소한의 규칙을 준수하기 위한 참고로서 봐야합니다. 오히려 중요한 것은 문서 자체로서의 완성도와 의미를 잘 나타내는 내용이라고 봅니다.

정통부 홈페이지가 올바르게 개편되고 아직은 부족하더라도 이러한 움직임이 점점 쌓여서 큰 물결을 이끌고 올 것이라고 믿습니다. 노력하시는 분들께 격려와 감사를 드립니다. 국내 웹이 발전해나가는 밑거름이 되기를.

lefthander · Post by **lefthander** » 2005 11 05 23:05 25

정통부 웹사이트에 대해서 개인적으로 왼쪽 네비게이션과 오른쪽 퀵링크, 게시판 버튼, 웹사이트 하단(footer) 등 불필요하게 사용된 이미지들을 전부 텍스트로 대체하면 좋겠습니다. 트래픽이 줄고 유지/보수가 간편해지고, 가독성 측면에서도 이미지보다는 텍스트가 좋습니다.

네비게이션의 롤오버 효과는 a 태그에 display: block 속성을 줘고, a:hover 에 배경색 속성을 주는 식(크로스 브라우징 핵)으로 대체할 수 있을 겁니다.

yser=이서 · Post by **yser=이서** » 2005 11 05 23:06 41

저도 프레임으로 왜 감싸는지에 대해서 이해가 안됩니다. 빛알갱이님께서 말씀하신대로 URL을 짧게 보여주기 위한것 외엔 이득이 전혀 없는데도 말이죠. 아마도 기존 정통부 홈페이지가 그러게 되어 있었기 때문에 이번에도 그렇게 했으리라 생각됩니다. 정통부 외에도 각 공공기관을 비롯해서 이런 경우가 많은데, 넌센스인거 같습니다.

이 경우는 한 명의 입김에 의한 인상의 영향이 큽니다. 대개 윗선의 높은 사람이 보기에 주소창이 복잡해보이면 '미관 상 좋아보이지 않는다' 는 이유로 간단하게 할 것을 요구할 가능성이 높습니다. 한 마디로 그 주소를 쳐서 들어가는 사이트의 내용보다는 먼저 주소창에 보이는 몇 안되는 url 글자의 인상을 더 중시하는 것이죠. 그게 한 때의 유행이기도 하지만 반대로 프레임을 쓰지 말아야 하는 이유를 설득하기도 만만찮습니다. 기술을 모르는 입장에서는 주소창이 그냥 깔끔했으면 좋겠는데, 프레임을 쓸 때의 문제점 같은 건 별로 문제같아 보이지 않게 느껴진다는 겁니다.

여기서 핵심은 방문자와는 상관 없다는 사실입니다. 방문자가 어떻게 보느냐보다는 자신(즉 클라이언트의 대표)이 보기에 이상하면 그건 안되는 거라 인식합니다. 흔히 일어나는 오류 중 하나로, '고객이 원하는 사이트가 아닌 자신이 보기 좋은 사이트' 를 만들기 원하는 클라이언트가 입김이 셀때 종종 발생하는 현상이라 생각합니다.

반쪽짜리 웹표준이라 언급한 이유도 lefthander님이 말씀하신 내용과 같습니다. 실상 테이블만 안썼지 XHTML+CSS를 사용해서 접근성을 고려한 부분이 많이 부족합니다. 자칫 테이블을 안쓰고 XHTML과 CSS를 사용하는게 기존 문제점들은 고쳐지지 않고 하나의 유행처럼 흘러가선 안되겠죠. 말씀하신대로 XHTML+CSS가 제대로 알려지지 않은 상황에서 지침서대로 W3C Validation만 통과하면 땡이라고 생각하는게 대부분입니다. 그나마 통과라도 하면 다행이구요.

Semantic Markup도 중요하고 이것저것 다 중요하지만 (한국만의) 디자인 트렌드라는 명목하에 아무 생각도 없이 레이아웃이 그려지고, CSS의 장점(Layer 개념이 아닙니다)을 잘 살리지 못하고 직소퍼즐마냥 틀안에 꽉채우기식 UI에 대해서 올바른 지침서가 필요하다는 생각이 듭니다.

한 때 블로그를 위주로 xhtml, 웹표준 에 대한 관심이 이상과열된 적이 있었습니다. 마치 웹표준이 모든 것을 해결하는 것처럼, html은 이제 절대 쓰지 말야아하며 xhtml 이 대세다라는 식의 열기가 후끈했던 때였죠. 항상 이런 때를 조심해야 합니다. 정보의 왜곡이 가장 일어나기 쉬운 때이기도 하며, 기존의 유저와 신규 유저간의 정서적 마찰이 일어날 우려가 높기 때문입니다. 이 때 제대로 인식하고 있는 사람이 갈 길을 제시하고 둘 사이를 메꾸어주는 역할을 해주면 정말 좋지요. 무조건 한 쪽 끝으로만 몰고가려는 여론을 누그러뜨려주니까요.

지금 웹디자이너들은 거의 대부분이 테이블 방식에 익숙해서 레고 블럭처럼 끼워맞추는 사각 디자인에 익숙하리라 생각합니다. 외국, 특히 일본쪽 개인 홈페이지 중에는 CSS 레이아웃을 적극 활용하여 테이블로서는 생각하기 힘든 자유로운 기발한 발상의 디자인을 한 곳도 꽤 있습니다. 그러나 국내는 지금 패러다임이 변화하는 시기에 적절한 중간 매개체 역할을 해주는 곳이 없어서 다들 웹표준에는 관심이 있는데 막상 접근성(UI 포함)이나 틀에서 벗어난 디자인은 생각이 못미치는 경우가 많아 보입니다. 생각해내는 틀이 고정되어서 그렇기도 하지만, 웹디자인 잘하는 사람이 이런 면에도 눈을 떠서 멋진 디자인과 설명으로 알려지기 시작한다면 빠르게 전파되지 않을까 합니다. 우리나라의 입소문 알림은 타국에 지지 않으니까요. (무시무시할 정도)

validator 와 디자인에 대한 생각은 전에 정리한 글이 있습니다.
http://yser.egloos.com/1878855

freshworks · Post by **freshworks** » 2005 11 06 01:57 36

기억나는 외국 공공 사이트들 중에 아래 두 곳이 국내와 비교할만한 사례인거 같습니다.

http://www.unicef.se/

http://www.scotland.gov.uk/

freshworks · Post by **freshworks** » 2005 11 06 02:23 30

yser님이 말씀하신 웹 표준 이상과열 현상이 정보의 왜곡으로 이어질 수 있다는 의견에 저도 동감합니다. 웹 표준의 대부 <a href="http://www.zeldman">Jeffrey Zeldman</a>이나 <a href="http://www.alistapart.com/">ALA</a>, <a href="http://www.webstandards.org/">WaSP</a> 등등 주목할만 사이트들이 흐름에 맞춰 그때마다 좋은 방향을 제시해줬고 그 바탕은 forum같은 토론문화에서 비롯되어 더욱 발전, 보편화 시켰다고 생각합니다.

국내에도 블로그를 통한 웹 표준 알리기 전도사분들이 계시지만, 그 의견과 목소리들이 중심을 이룰 수 있는 사이트들이 생겨났으면 합니다.

제가 만난 사람들 중에선 웹 표준이나 Ajax, Web 2.0에 대해서 아예 관심이 없거나, 실제 외국의 대형 사이트들이 웹 표준으로 바뀌고 구현되어 있고, 재경부처럼 잘 만들어진 사이트가 존재함에도 불구하고 '국내 현실도 모르는 사상가들의 외침' 정도로 치부하는 경우도 있었죠.

이러한 점에서 웹 표준화 프로젝트같은 흥미롭고 유익한 정보들을 정리해서 알릴 수 있는 공간의 필요성이 느껴지더군요.

조만간 그런 공간이 생겨나겠죠.

Post by **hyeonseok** » 2005 11 06 12:32 04

lefthander wrote:사실 재경부 웹사이트에서도 한국 웹사이트들의 고질적인 문제들이 보입니다. 우선 이미지 사용이 너무 과도해서, 저 같은 저사양 시스템에서는 로딩이 꽤 느립니다. 특히 텍스트나 CSS 속성으로 충분히 대체할 만한 곳에도 어김없이 이미지가 쓰였습니다.

예를 들면 '국정브리핑'(#briefing) 부분은 외각선과 배경색을 이미지 하나를 통채로 배경으로 써서 구현했는데, 이는 div 태그와 CSS 속성의 조합으로 충분히 대체할 수 있습니다.

또 800x600 같은 저해상도에 충분히 대비가 되어있지 않고, 철저하게 픽셀 기반 레이아웃이라 브라우저에서 글자 크기를 임의로 확대/축소할 때 제대로 대응하지 못하고 레이아웃이 깨집니다(이 점은 국내만의 문제는 아닙니다만). http://www.msn.com 이나 http://www.yahoo.com 등에서 글자 크기 확대/축소를 해보면 웹페이지가 똑똑하게 반응하는 것이 볼 수 있을 겁니다.

성공적인 웹사이트는 사실 웹 표준에만 집착해서 테이블 안 쓰고, (x)html, css 적합성 검사 통과만 적당히 한다 해서 만들어지는 것은 아니고, 사용자 접근성이나 편의성의 관점에서 다각도로 숙고해야 할 문제가 되겠습니다.

모든 사람이 완벽하게 사용할 수 있는 웹페이지는 물론 좋습니다. 하지만 웹표준이나 접근성을 고려한다고 해도 모든 사용자들이 같은 환경에서 웹사이트를 이용하게 만들 수는 없습니다. 웹표준이 모든 사람들에게 같은 경험을 줄 것이라는 생각은 웹표준 프로젝트가 처음 태동할때 사람들이 가졌던 이상적이지만 잘못된 낡은 생각 입니다. 가장 중요한 것은 모든 사용자가 접근하게 할 수 있는 사이트로 만드는 것이지 모든 사용자에게 같은 기능을 제공하는 사이트는 만들 수 없습니다. 컴퓨터 사양이 문제가 된다고 생각하는 사용자는 이미지, css, javascript기능을 끄고 웹사이트를 이요하면 될 것 입니다. 그러한 상황에서도 웹사이트를 정상적으로 이용 할 수 있으면 정말로 접근성 높은 사이트가 되겠지요.
http://www.hicksdesign.co.uk/journal/is-1024-ok 이글도 참고적으로 읽어보시면 좋을 것 같습니다.

그리고 말씀하신 #briefing 부분은 css만으로 대체가 불가능 한 디자인입니다. 다시 확인해 보시기 바랍니다. 이미지 크기를 줄인다 해도 전체적인 용량차이가 컴퓨터 사양을 탈 정도로 심하게 줄지는 않습니다. 오히려 사람 손만 더 많이 타서 비용만 발생시킬 뿐입니다. 그리고 이 부분을 css로 표현 하느냐 이미지로 표현하느냐 하는 것은 단지 표현의 문제이지 접근성이나 전송량과 크게 상관이 없습니다. 전송량을 줄이기 위해서 디자인 적인 요소를 줄이는 것을 옳지 않은 판단 입니다.

lefthander wrote:정통부 웹사이트에 대해서 개인적으로 왼쪽 네비게이션과 오른쪽 퀵링크, 게시판 버튼, 웹사이트 하단(footer) 등 불필요하게 사용된 이미지들을 전부 텍스트로 대체하면 좋겠습니다. 트래픽이 줄고 유지/보수가 간편해지고, 가독성 측면에서도 이미지보다는 텍스트가 좋습니다.

네비게이션의 롤오버 효과는 a 태그에 display: block 속성을 줘고, a:hover 에 배경색 속성을 주는 식(크로스 브라우징 핵)으로 대체할 수 있을 겁니다.

"display: block과 :hover에 배경주는 식"이 왜 "크로스 브라우징 핵"인지 알 수 없군요. 출처가 어딘지 말씀해 주시겠습니까? 제가 알기로 이 효과는 Pure CSS hover, pure CSS drop down 등으로 명명되는 효과입니다.

그리고 사용된 이미지들은 절대로 "불필요한" 이미지가 아닙니다. 디자인 적으로 필요하기

lefthander · Post by **lefthander** » 2005 11 06 16:03 35

hyeonseok wrote:"display: block과 :hover에 배경주는 식"이 왜 "크로스 브라우징 핵"인지 알 수 없군요. 출처가 어딘지 말씀해 주시겠습니까? 제가 알기로 이 효과는 Pure CSS hover, pure CSS drop down 등으로 명명되는 효과입니다.

물론 순수 표준은 맞지만 IE 에서는 제대로 지원이 되지 않는 관계로 그런 식으로 표현을 했습니다. IE에서는 a요소 외에는 :hover 가 적용이 되지 않기 때문에, 사실 li 요소에 직접 적용해도 되니 이 방법은 꼼수라고도 볼 수 있죠. 하지만 용어 사용이 부적절했다고 인정합니다.

그리고 #briefing 에서 그러데이션은 물론 이미지를 사용해야 겠지만(위에서도 본래 그런 의미로 언급했지만) 그 외는 가능하리라 생각됩니다만. 곧 직접 시험해보겠습니다.

lefthander · Post by **lefthander** » 2005 11 06 16:14 32

hyeonseok wrote:그리고 사용된 이미지들은 절대로 "불필요한" 이미지가 아닙니다. 디자인 적으로 필요하기 ㅤㄸㅒㅤ문에 그렇게 사용을 한 것입니다. 이미지를 전부 텍스트로 바꾸는 작업은 그 이전에 한글폰트에 대한 문제가 해결 되어야 합니다. 한글 폰트의 문제만 해결 되면 당연히 외국처럼 텍트위주로 사이트를 만들 수 있습니다. 이 부분에 이미지를 사용해서 접근성이 떨어지거나 하는 것도 아닙니다.

위에서 ‘한글 폰트 문제’라고 언급한 부분은 정확하게 어떤 의미로 쓰인 건지 잘 모르겠습니다. 리눅스/맥 환경까지 고려할 때, 그런 환경에 기본적으로 포함된 글꼴 품질 때문에 이미지를 쓰는 것이 낫다는 것입니까? 아니면 윈도우즈의 기본 폰트가 그다지 예쁘지 않아서 이미지를 쓰는 것이 낫다는 말씀인가요? 혹은 다른 이유가?

제가 언급한 부분들을 직접 보신 것이 맞다면 지적을 이해하기가 좀 힘들군요. 흔히 쓰이는 9/10pt 크기의 텍스트를 이용한다해도 전혀 문제가 없어 보이는데요. 오히려 이미지로 된 텍스트들이 흐릿해서 가독성이 떨어지는 면이 있는 듯합니다(보편적인 한국어 윈도우즈 환경에서 본다면).

lefthander · Post by **lefthander** » 2005 11 06 16:26 38

아 위에서 그러데이션은 글 쓰면서 제가 기억을 혼동한 것이고 왼쪽 위의 모서리 부분을 말한 겁니다.

빛알갱이 · Post by **빛알갱이** » 2005 11 06 20:27 12

yser=이서 wrote:
저도 프레임으로 왜 감싸는지에 대해서 이해가 안됩니다. 빛알갱이님께서 말씀하신대로 URL을 짧게 보여주기 위한것 외엔 이득이 전혀 없는데도 말이죠. 아마도 기존 정통부 홈페이지가 그러게 되어 있었기 때문에 이번에도 그렇게 했으리라 생각됩니다. 정통부 외에도 각 공공기관을 비롯해서 이런 경우가 많은데, 넌센스인거 같습니다.
이 경우는 한 명의 입김에 의한 인상의 영향이 큽니다. 대개 윗선의 높은 사람이 보기에 주소창이 복잡해보이면 '미관 상 좋아보이지 않는다' 는 이유로 간단하게 할 것을 요구할 가능성이 높습니다. 한 마디로 그 주소를 쳐서 들어가는 사이트의 내용보다는 먼저 주소창에 보이는 몇 안되는 url 글자의 인상을 더 중시하는 것이죠. 그게 한 때의 유행이기도 하지만 반대로 프레임을 쓰지 말아야 하는 이유를 설득하기도 만만찮습니다. 기술을 모르는 입장에서는 주소창이 그냥 깔끔했으면 좋겠는데, 프레임을 쓸 때의 문제점 같은 건 별로 문제같아 보이지 않게 느껴진다는 겁니다.

그 높지만 무지한

이에게 이렇게 말하면 어떨까요? 게시판에 올라온 글 몇 개를 가리키거나 찾아갈 때, A와 같이 하는 것과 B와 같이 하는 것 중 어느 것이 더 편할까요?
그 높은 분은 그냥 비서가 깨끗하게 인쇄해서 대령하는 글만 본다면 .....

A.
1. 정통부 홈페이지로 간다 (주소 가르쳐 줌)
2. ... 게시판 메뉴를 누른다
3. 10월 28일 정오 경에 올라온 제목이 '....'인 글과 10월 29일 오후 5시 경에 올라온 제목이 '...'인 글을 읽어 보십시오. 11월 6일 현재 그 글은 각각 10페이지와 8페이지에 있지만, 이 글을 읽으실 때 쯤에는 더 뒤로 밀려나 있을지도 모릅니다.

B. 클릭만 하면 되도록 두 글의 URL을 직접 줍니다. (물론, frame으로 되어 있어도 주소를 찾는 수고를 해서 그렇게 줄 수 있습니다.)

이것과 비슷한 경우로 다음 카페가 있습니다. 거기는 주소를 찾아서 주기가 정통부 경우보다 더 힘듭니다. 게시판의 글을 누르면 javascript를 통해 url을 만들어서 frame에 뿌립니다. 그러니, url을 주고 그 사이트에 가서 읽도록 하지 않고, 출처도 밝히지 않은 채로 글 전체 퍼나르기(저작권 침해)가 그렇게 유행인지도... 뭐, 닭이 먼저인지 달걀이 먼저인지 모르겠지만....

Post by **hyeonseok** » 2005 11 07 10:49 36

lefthander wrote:위에서 ‘한글 폰트 문제’라고 언급한 부분은 정확하게 어떤 의미로 쓰인 건지 잘 모르겠습니다. 리눅스/맥 환경까지 고려할 때, 그런 환경에 기본적으로 포함된 글꼴 품질 때문에 이미지를 쓰는 것이 낫다는 것입니까? 아니면 윈도우즈의 기본 폰트가 그다지 예쁘지 않아서 이미지를 쓰는 것이 낫다는 말씀인가요? 혹은 다른 이유가?

맥과 리눅스는 상황이 그나마 괜찮지만, Major OS인 Windows의 경우는 폰트 상황이 별로 좋지 않다는 것을 말한 것입니다. 실제적으로 사용할 수 있는 폰트가 돋움, 굴림 정도 인데..(보통 sans-serif를 쓰니까요.) 이 폰트들은 가독성은 높을지 모르지만 디자인의 완성도에 있어서는 정말....꽝입니다. 사실 기본 서체이고 다른 대안이 없기 때문에 사용하는 것이지 디자인적인 완성도를 생각한다면 사용하기는 힘든 서체 입니다. 그래서 우리나라의 웹디자이너들이 이미지 폰트를 많이 사용하는 것일 것입니다. 이러한 상황이 나아지지 않는다면 텍스트에 이미지를 사용하는 것은 계속 될 것입니다.

lefthander wrote:제가 언급한 부분들을 직접 보신 것이 맞다면 지적을 이해하기가 좀 힘들군요. 흔히 쓰이는 9/10pt 크기의 텍스트를 이용한다해도 전혀 문제가 없어 보이는데요. 오히려 이미지로 된 텍스트들이 흐릿해서 가독성이 떨어지는 면이 있는 듯합니다(보편적인 한국어 윈도우즈 환경에서 본다면).

저는 이 부분에 안티알리아스 적용안된 일반 서체를 쓰는것은 디자인 적으로 문제가 될 수 있다고 봅니다. 가독성과 디자인을 생각해 볼 때 가독성은 약간 떨어지지만 디자인 적으로 더 우수 하기 때문에 사용했을 것으로 생각 되고 약간 떨어지는 가독성이 크게 문제되지는 않기 ㅤㄸㅒㅤ문에 현재와 같이 가는 것이 맞다고 봅니다.

빛알갱이 · Post by **빛알갱이** » 2005 11 10 11:52 22

'안전 마크'를 달고 있는데, 회원 로그인할 때에 https를 쓰지 않고, http를 쓰네요. 그 사이트의 홈페이지 개선 의견에 글을 올리려고 가 봤더니, '비회원으로서도 쓸 수 있다'고 써 놓았지만, 쓸 방법을 찾을 수가 없어서 - 있는지 모르겠지만, 거기에 있는 방법은 제 머리로 해독 불능- 여기에 글을 씁니다.

빛알갱이 · Post by **빛알갱이** » 2005 11 11 02:57 46

hyeonseok wrote: 맥과 리눅스는 상황이 그나마 괜찮지만, Major OS인 Windows의 경우는 폰트 상황이 별로 좋지 않다는 것을 말한 것입니다. 실제적으로 사용할 수 있는 폰트가 돋움, 굴림 정도 인데..(보통 sans-serif를 쓰니까요.) 이 폰트들은 가독성은 높을지 모르지만 디자인의 완성도에 있어서는 정말....꽝입니다. 사실 기본 서체이고 다른 대안이 없기 때문에 사용하는 것이지 디자인적인 완성도를 생각한다면 사용하기는 힘든 서체 입니다. 그래서 우리나라의 웹디자이너들이 이미지 폰트를 많이 사용하는 것일 것입니다. 이러한 상황이 나아지지 않는다면 텍스트에 이미지를 사용하는 것은 계속 될 것입니다.

한국 맥 사용자들이 윈도우즈보다 글꼴 상황이 좋다는 말을 들으면 어떻게 반응할 것인지 궁금합니다.

아마도 디자인 측면에 중점을 두시다 보니까, 다른 측면의 문제점은 놓치신 듯 합니다. 애플 코리아가 욕 먹는 이유가 여럿 있지만, 가장 큰 것이 도대체 제대로 된 한글 글꼴 (현대 한국어 음절 11,172자를 모두 다 지원하는) 하나 아직 OS에 기본으로 넣어 놓지 않았다는 것입니다. 그래서, 은 글꼴을 가져다 깔기도 하고, 윈도우즈ㅤㅁㅛㅇ 돋음/바탕/굴림(체)를 불법으로 가져다 쓰기도 합니다. 리눅스의 글꼴 사정은 한국어용이든 아니든 2002년 정도까지 윈도우즈에 비할 수 없이 나빴지요. 그 무렵 Xft가 20년 된 X11 코어 글꼴 처리 부분을 대체하면서 truetype 글꼴을 자유롭게 쓸 수 있게 되면서 사정이 급변했습니다. MS 변호사의 실수(?)로 MS core truetype 글꼴(라틴 글자용)을 자유롭게 쓸 수 있고, 백묵에 이어 은 글꼴의 발표로 한국어 글꼴 사정도 나아졌습니다. 하지만, 아직도 윈도우즈용 한국어용 글꼴을 불법으로 쓰는 리눅스 사용자도 있습니다. 그 까닭은? Xft/fontconfig가 하는 anti-aliasing에 만족하지 못 하고 - anti-aliasing을 꺼 놓는 경우도 많습니다-, 비트맵 (Windows의 한국어 truetype 글꼴에는 작은 사이즈에는 비트맵이 들어 있습니다)을 작은 사이즈에서 선호하기 때문입니다. 그래서, 은글꼴에 바탕/굴림/돋음처럼 작은 사이즈에 대해 비트맵을 넣자는 얘기가 계속 나오고 있습니다. 작업량이 만만치 않아서 아무도 손을 대고 있지 못 하지만요.

디자인 측면에서? 한글 부분은 잘 모르겠습니다. 제 눈은 그리 밝지 못 해서요. 라틴 글자 부분과 숫자 부분은 바탕/굴림/돋음에 들어 있는 것은 정말 꽝입니다. 가끔 국제 학회 등에서 한국인들이 발표할 때 파워포인트 슬라이드에 이들 글꼴(한글은 물론 한 글자도 없습니다)을 쓰는 것을 보면 웃음이 나옵니다. (이 글을 읽는 분 가운데 파워포인트 등으로 슬라이드를 -오픈 오피스로 만들 때에도 마찬가지- 만들 때 절대 이들 글꼴을 라틴 글자/숫자에 쓰지 마십시오. )

웹 저작 시에는 CSS에서 라틴 글자용 글꼴 이름을 한글 글꼴보다 먼저 지정하면 라틴 글자/숫자는 그 글꼴에서 가져 오고, 한글만 한글 글꼴에서 가져 오니까 훨씬 낫습니다.

lefthander wrote:제가 언급한 부분들을 직접 보신 것이 맞다면 지적을 이해하기가 좀 힘들군요. 흔히 쓰이는 9/10pt 크기의 텍스트를 이용한다해도 전혀 문제가 없어 보이는데요. 오히려 이미지로 된 텍스트들이 흐릿해서 가독성이 떨어지는 면이 있는 듯합니다(보편적인 한국어 윈도우즈 환경에서 본다면).
저는 이 부분에 안티알리아스 적용안된 일반 서체를 쓰는것은 디자인 적으로 문제가 될 수 있다고 봅니다. 가독성과 디자인을 생각해 볼 때 가독성은 약간 떨어지지만 디자인 적으로 더 우수 하기 때문에 사용했을 것으로 생각 되고 약간 떨어지는 가독성이 크게 문제되지는 않기 ㅤㄸㅒㅤ문에 현재와 같이 가는 것이 맞다고 봅니다.

그런 측면이 있겠지만, 다른 측면도 있는 듯 하군요. 그 중에 하나는 한국과 서구의 문화적 차이인 것 같기도 하고요. 원래 이에 대해 자세히 썼는데, 다른 탭으로 갔다가 브라우저를 종료시키는 바람에 다 날아가서 다시 쓰기 귀찮아서 '문화적 차이'라고 대단히 함축적으로만 씁니다.

사용 편의성 측면에서: 글꼴 모양이 너무 안 좋아서 그림을 쓰는 게 불가피하다고 합시다. 그런데, 그 그림에 들어가는 글자들은 하나 같이 왜 콩만 할까요? (예들 들어, 재경부 웹 페이지 최하단에 있는 주소, 전화 번호, 이메일은 정말 작습니다. 그 사이트의 다른 그림 글씨들 크기도 제 눈에는 너무 작습니다.) 저는 아직 노안이 되기에는 젊은데도 한국 웹 사이트들에 있는 그림 속의 글자들이 읽기가 편하지는 않더군요. 차라리 약시라서 화면 확대기를 사용하는 사람들은 상관이 없을 것 같습니다. 돋보기를 끼기에는 어중간한 사람들이 오히려 힘들 것 같아요. 오페라처럼 글자 크기를 키우면 그림도 커지는 브라우저(파이어폭스도 곧 지원할 예정이기는 하지만, 아직은 아닙니다)를 쓰면 그런 문제를 피할 수도 있겠지요. 하지만, 비트맵으로 콩만하게 그려 놓은 글자를 키웠을 때 모양이 예쁘지 않으리라는 것은 자명하겠지요? 그냥 글자로 해 놓았다면, 글자를 키웠을 때에도 모양이 - 비트맵 글꼴을 쓰지 않는 한- 미워지지는 않았겠지요.

그려 놓은 글자의 또다른 문제는 색깔입니다. 대부분의 브라우저는 웹 페이지에서 지정한 색깔을 무시하고, 자신이 보기에 편한 색깔을 지정할 수 있도록 해 줍니다. 하지만, 그림으로 그려 놓은 글씨는 그런 방법으로 색깔을 바꿀 수 없습니다. 색맹이나 색약인 사람에게 잠재적으로 접근성 문제를 불러 일으킬 수 있습니다. 이 역시 차라리 전맹이라서 화면 낭독기를 쓰는 이는 문제가 안 되겠지요. 대체 텍스트가 충실하게 들어 있으니까요.

아이콘들은 또 왜 그리 작은지. 손의 동작에 아무런 지장이 없는 저도 때로는 정확히 가리키기 힘들 때가 있는데 (예를 들어, zeroboard에서 흔히 보이는 아이콘들), 손의 사용이 약간 힘든 이들은 몇 번씩 잘못 가리키지는 않을까요?

굴림/바탕/돋음이 마음에 안 든다면 차라리 웹 글꼴(MS IE만 지원하는)을 쓰고, 다른 브라우저를 위해서 웹 글꼴 이외에 다른 글꼴을 CSS에서 지정하면 어떨까요? 웹 글꼴을 만드는 것이 손이 많이 가서 굳이 그림을 써야겠다면, 글씨 크기를 지금보다 충분히 크게 하고, 배색에도 세심하게 신경을 써서 (아무리 신경을 써도 사용자에게 완전한 선택권을 주는 것보다는 못 하지만) 위에서 언급한 문제를 최대한 피할 수 있도록 했으면 좋겠습니다. 크기를 충분히 크게 한다고 했지만, 그다지 'future-proof'한 얘기는 아닙니다. 작은 장치들이 인터넷에 널리 쓰이는 한편으로 모니터의 해상도는 계속 높아지고 있습니다. (모니터의 물리적 크기는 별로 커지지 않고). 초고해상도 모니터를 쓰는 이들은 그림 글씨를 지금보다 많이 키운다고 해도 여전히 글씨가 콩알만하게 보일 수 있습니다.

Mozilla 한국 커뮤니티

정보통신부 홈페이지가 열렸습니다.

정보통신부 홈페이지가 열렸습니다.

수고하셨습니다..

Who is online