안녕하세요? ^^ 현대해상에 파견되면서 부터 정말 열심히 웹표준을 접하고 있는 일인중 한명입니다.
자주 들르면서도 인사를 못드리고 지나쳐갔었군요.
딱히 여쭤 볼 곳도 없고 하여 경험을 듣고자 여쭈어 봅니다.
전 현재 8년조금 넘은 웹디자이너 입니다.
솔직히 아무리 디자인 공부를 한다고 해도 젊고 새로운 브레인에비하면 날이 갈수록 디자인의 신선함및 감각이 떨어져 가는것을 몸으로 체감이 됩니다. 이젠 젊은 머리와 손에게 눈에 보이는 디자인 부분은 넘길 수 밖에 없는 것인가..하는 생각이 갈 수록 커지는군요.
그리하여 자꾸 시선이 돌아가는 곳이 표준웹가능한 퍼블리셔로의 비중을 많이 두면 되지 않을까 하는 생각이 자주 듭니다.
물론 디자인을 겸할 수도 있겠지요,^^ 할 수 있는 부분이니…
실제 퍼블리셔라 함은 순수 코더의 역할만이 있는것인지…
아시는 영역에 대하여 정보를 주시면 감사하겠습니다.
나이도 이제 30대 중반인지라..ㅡ.ㅡ;; 열심히 어언 10년 가까지 웹디를 해온 시절에 비해 불투명한 미래때문에 요즘 너무 갈등이 심합니다.(오죽하면 이글 쓰기전에 제빵관련을 검색해 봤겠습니까… )
솔직히 전 이일을 평~~~~생은 아닐지라도 일 할 수 있을때만큼은 계속 하고 싶은것이 솔직한 심정이지만,
제 입장이 사업을 차리고 그럴 입장도 아니기에..
김진환님, 안녕하세요? 제빵기능사는 저도 한때 관심있게 생각하던 직업중의 하나였는걸요 ^^; 뭐 제빵만 있었던가요. 사회복지사, 기자 등등.. 이거 아니면 어떤 직업으로 만족하면서 살 수 있었을까 많은 사람들이 비슷한 생각을 한번쯤은 해보았을 줄로 압니다. 저보다 경험이 많으시지만 저 또한 디자이너로 6년간 일했고 웹 퍼블리셔라는 직업으로 전업한지는 1년이 조금 넘었습니다. 그래서 김진환님의 고민에 더욱 공감하고 있습니다. 친구들은 대표이사 직함 가지고 사회생활 하는데 나는 배짱도 없나 싶은 생각도 들구요. 하지만 저는 나름대로 직업적 소신을 중요하게 생각하고 그 소신을 실현하는 직업중의 하나로서 지금 지닌 직업에 만족하고 있습니다. 아마도 디자이너가 되기 전부터 저는 사회적인 형평이나 인권에 대하여 많은 관심을 가지고 있었던것 같습니다. 현재의 직업이 아니었다면 아마도 시민단체나 사회복지단체에서 일을 하고 있지 않을까 생각합니다. 현재의 일은 순전히 적성이나 전공과는 무관하게 좋아하는 일이었지만 좋아하는 일을 하면서도 늘 생각하던 소신을 펼칠 수 있다고 생각한 것이 웹 퍼블리셔 였습니다. 만약 웹 퍼블리셔라는 직업을 지니고 김진환님께서 평소 가치있게 생각하고 계신 어떤것을 실현할 수 있는 기회가 있거나 적어도 이 직업을 즐기실 수만 있다면 추천드리는데 주저하지 않을것 같습니다. 웹 퍼블리셔의 업무관련 기술은 ‘웹 표준, 웹 접근성, HTML, CSS, Javascript, 유관부서와의 커뮤니케이션’ 정도로서 그동안 HTML/CSS 코드를 직접 작성하고 Javascript코드를 이해하고 응용할 수 있는 수준이라면 전업하기에 어렵지는 않을 것으로 생각됩니다. 대신 전업하시기 전에는 충분한 포트폴리오도 필요하겠지요. 한편 전업을 할 것인지의 여부를 떠나서 웹 퍼블리셔로 전업을 해도 충분할 정도의 역량을 쌓아두는 것도 나쁘지 않다고 생각합니다. 어차피 웹 표준 코드를 작성하고 웹 접근성이 현재의 업무중 일부라면 이미 웹 퍼블리셔라고 생각합니다. 디자인을 하고 있다고 해서 웹 퍼블리셔는 아니라고 말할 수는 없으니까요. 디자인 업무에 대하여 잘 모르는 웹 퍼블리셔보다 훨씬 경쟁력 있다고 생각합니다.
소신에 따라서 옳은 결정 내리시리라 믿습니다. 김진환님도 항상 건강하시고 행복하세요. ^^
PS : 4월 9일은 CSS Naked Day (http://naked.dustindiaz.com/) 입니다. CSS를 벗겨내도 페이지를 탐색할 수 있다는 것을 보여줌으로써 웹 표준을 알리고 장려하는 세계적인 운동 입니다. 저는 미리 동참했을 뿐이구요. 아직 리뉴얼은 아닙니다 ^^
김진환
2008년 4월 8일, 9:35
어이쿠!! 이렇게 빨리 답변을 정성스레 달아 주셔서 너무 감사드립니다. ^^
사람이 어떠한 고민을 가지고 있을때, 이미 그 답은 정해져 어느정도 정해 놓고 있다고들 합니다.
단지 불안감과 불확신감에서 오는 심리적 부담때문에 여기저기 자문도 구해보고 점??술의 이야기에도 귀기울여 보곤 하겠지요.
저도 어쩌면 똑같은 부류일지도 모르겠습니다.
정성스러운 답변에 한결 마음이 편안해지는 것 같습니다.
다시한번 감사드리며 오늘도 먼가를 얻어가 볼까 하는 마음에 들르게 되었네요 ^^
김일규님, 안녕하세요?
제니하우스를 잘 보았습니다. 나름 웹 표준을 준수하고자 노력하시는 모습이 보기 좋습니다 ^^;
조언을 요청하셔서 간단하게 살펴보고 개선할점 몇가지만 코멘트 해드리겠습니다.
1. 제니하우스 로고가 현재 body의 배경이미지로 처리되어 있는데 이것은 h1 요소와 img 요소를 이용하여 전경이미지로 처리하시는 것이 의미적으로 맞을것 같습니다. 그리고 클릭이 가능하도록 처리하고 클릭 했을 때 초기화면으로 이동하는 UI가 사용성을 높여준다고 생각합니다. 이렇게 되면 ‘메인페이지’ 라는 타이틀은 h2가 되어야 겠지요 ^^
2. HTML을 선형화 했을 때 right 영역이 content 영역보다 먼저 등장하고 있는데요. 사용자들이 중요하게 생각하는 내용이 무엇인지 생각할 때 right 영역보다는 content 영역이 HTML 구조상 먼저 등장하는 것이 맞지 않는지 생각해볼 문제라고 생각합니다. right 영역은 보조 네비게이션 영역으로서 content 영역에 비하면 중요도나 접근이 빈번하지 않다는 가정하에 그렇구요. 키보드만을 사용하는 사람들은 본문에 이르기 위하여 Tab 키를 무척 많이 눌러야 할것 같습니다. 이렇게 링크가 많은 경우에는 ‘메뉴 건너뛰기’링크를 제공해 주시면 키보드 사용자와 시각장애인들의 접근성을 높여줍니다. 메뉴 건너뛰기 예제 입니다. http://naradesign.net/open_content/reference/navigation.html Tab키만을 이용해서 조작해 보세요.
3. ‘빠른메뉴’와 ‘대륙바로가기’ 라는 제목은 동등한 수준의 헤딩일 것이라고 생각했는데 h5, h3 으로 다릅니다. ‘메인페이지’라는 제목이 h2라고 가정할 때 ‘빠른메뉴, 대륙바로가기’는 동등하게 h3이 되는것이 맞다고 생각합니다.
4. 불필요한 태그의 중첩. [div class="headlineSub"][h3]제니하우스 새소식[/h3][/div] 이 부분의 HTML 코드 가운데 div는 제거하고 h3 요소만으로도 충분히 디자인 표현이 가능해 보입니다. div 태그는 스스로 아무 의미가 없으므로 콘텐츠 덩어리를 그룹핑 하거나 분리하는 용도로 최소한의 사용만을 권장합니다.
5. CSS 파일이 6개로 분리되어 있습니다. 이런 부분은 저도 초기에 유지보수 이점 때문에 사용하던 방식이었지만 http 요청수를 증가시키는 방법이므로 CSS 파일은 1개로 통합하는 것이 좋습니다.
6. 80여개가 넘는 국가별 국기 이미지가 각각 존재하고 배경처리 되어 있는데요. 이 배경이미지는 1개의 통합 이미지로 저장하고 background-position 기법을 이용하여 같은 배경 이미지를 사용하되 배경이미지의 위치값을 다르게 배치하면 웹 페이지의 속도 퍼포먼스가 훨씬 좋아질 것으로 생각됩니다. 80여개의 이미지는 그만큼의 http 전송을 요구하기 때문에 사이트가 느려지는 원인이 됩니다.
7. content 영역 안쪽의 li 요소 안쪽에는 제거해도 표현상 무리가 없는 span 요소들이 보입니다. span 역시 div와 같이 아무런 의미가 없는 요소로서 텍스트를 그룹핑하거나 분리하는 역할만 합니다. 제가 보기에는 a 요소를 활용하여 표현이 가능하고 a를 감싸고 있는 span은 제거해도 될 것 같습니다.
8. a요소에 title 속성은 오히려 중복 콘텐츠를 제공하여 사용성을 떨어뜨립니다. 이미 a요소 내부에 텍스트로 설명이 되었으므로 title을 제공하는 것은 시각장애인 입장에서 같은 문장을 두 번씩 읽게 만드는 결과를 가져옵니다. 이런 경우에는 빼도 무방할 것 같습니다.
9. 하단의 copy 영역 내부 p 요소는 address 요소로 치환하는 것이 의미적으로 맞을것 같습니다. address 요소는 저작자 및 연락처 정보를 마크업하는 요소 입니다.
10. ‘사이트소개 | 기부안내 …’ 이와 같은 요소 또한 목록이어서 ul, li 요소로 마크업 하는것이 시멘틱 할것 같습니다. 메뉴목록을 수평으로 배치하실 때 사용하셨던 display:inline 기법으로 동일한 뷰를 얻으실 수 있을것 같습니다.
휴~ 쓰다보니 10개를 채웠네요. 힘들었습니다. (ㅡㅡㆀ)
뭐 제 의견이 꼭 정답은 아닐 수 있습니다.
다른분들의 조언도 부탁해 보시고 다른 의견이 있으면 공유해 주세요.
좋은 하루 되시구요 ^^;
h1을 언제 사용하는 것이 좋은지에 대한것은 명확하게 정의가 내려져 있습니다. 현재 페이지를 계층구조에 따라 다른 문서의 형태로 옮긴다고 가정할 때 가장 큰 제목이 되는 것이 바로 h1 입니다. 따라서 로고는 확실히 h1이 맞다고 판단됩니다. 한편 하나의 페이지에서 h1을 몇번이고 사용할 수 있는지에 대한 것은 명확하게 정의 내려진 바 없으므로 논쟁할 수도 있는 부분입니다. h1을 사이트 로고에 한번 사용한다면 여기에 이의를 제기할 수 있는 사람은 아무도 없지만 h1을 사이트 로고에도 적용하고 콘텐츠 영역의 제목에도 적용한다면 이것은 명확히 틀렸다고는 할 수 없지만 논쟁의 대상이 될 수 있다는 의미 입니다. h1을 하나의 페이지에 몇번 사용할 수 있는지에 대해서는 W3C의 스펙에 표현되어 있지 않기 때문입니다. 웹 표준 교과서를 지금 확인해 보지 못해서 어떤 의도로 “메인페이지 정도가 좋다” 라고 말했는지 정확히 이해가 되지 않는데요. 제 생각은 h1은 메인뿐만 아니라 서브페이지에서도 사이트 로고에 일관되게 사용하는 것이 좋습니다. 제 의견은 로고에 h1, 콘텐츠 영역의 헤드라인(현재 h1으로 마크업된)이 h2가 되는것이 제니하우스의 계층구조를 잘 표현하는 방법이라고 생각합니다. 제가 제안하는 방법대로 마크업 된다면 누구도 이의를 제기할수는 아마 없을껍니다. 하지만 이미 말씀드린대로 h1을 두번 사용한다면 이것을 틀렸다고 할 수는 없으나 논쟁꺼리는 될 수 있습니다.
address 태그는 한 페이지에 몇번 등장해도 무방합니다. 현재는 콘텐츠 영역에서만 사용중이신데요. address 태그는 저작자의 정보를 표현하는 모든 콘텐츠에 사용할 수 있습니다.
권경득님, 메일로 답변을 드리긴 했는데 깊이있게 조언드리지 못한것 같아 죄송스럽습니다. 꼭 필요한 말만 한다는 것이 자칫 ‘이건 틀렸으니 이렇게 하세요’ 와 같은 뉘앙스로 말한것 같아서 더욱 그렇습니다. 앞으로는 회신을 늦게 드리더라도 성실하게 답변을 드려야겠다는 생각을 했습니다. 감사합니다.
이승희님께서 올려주신 코드 한줄은 표준 DTD입니다. 표준 DTD를 사용한 경우 브라우저들은 표준모드로 동작하고 DTD가 없는경우 Quirks Mode(어물쩡한 대충모드)로 동작합니다. 이는 IE나 FF나 마찬가지 이지요. DTD를 넣고 표준모드로 동작하도록 한 다음 양쪽 브라우저에서 모두 잘 보이도록 해보세요. 그 밖에 어떤 코멘트를 드려야 할지 질문내용이 구체적이질 않아서 좀 막막 하네요. ^^
이승희
2008년 1월 29일, 9:18
감사합니다… 그런데 말씀 하신 표준 dtd를 넣으면 FF 에서는 JS 파일이 안보이거든요..
JS 파일에 이미지가 있는데 이미지가 다 안보이더라구요.. 그래서 말씀하신 어물쩡한 대충모드를 했더니 보이더라구요;;;;
JS 파일은 FF에서는 안보이는건가요??
아마 IE전용 Javascript를 사용하신것 같습니다. 표준 Javascript 를 사용하셔야 할 것 같아요. ^^
이승희
2008년 1월 30일, 10:43
^^ 감사합니다.
말씀대로 표준 DTD 사용을했습니다.
여전히 보이지 않는 js에서 여러곳을 둘러보니까 “표준자바스크립트 상 IE 전용인 document.all 등의 문법”이 사용됬을것이라고하는데요
현재 js 파일에는
iebrowser=document.all
이런식으로 작업이 되엇습니다.
그럼 FF 에서는 표준자바스크립트상 document.documentElement 을 사용하라고하는데요
iebrowser=document.all 이면 FF에서는 ffbrowser=document.documentElement 을 사용하면될까요?
한가지더~! FF에서 자바스크립트 콘솔을 사용하라고하는데요
깔았는데
제컴터에서는 자바스크립트 콘솔은 없구요.. 자바콘솔이있네요 사용하는 방법을 알수있을까요?
제가 자바스크립트는 다루지 않아서 자세한 답변은 드리기 어려울 것 같습니다. 하지만 표준 자바스크립트(DOM)를 사용하시면 브라우저 벤더를 막론하고 모두 적용이 가능하기 때문에 IE 코드 따로 FF 코드 따로 작성하지 않으셔도 됩니다. FF에서는 Firebug라는 확장툴을 설치하시면 HTML/CSS/Javascript 를 디버깅할 수 있는 인스펙터를 활성화 할 수 있습니다. 자바스크립트 콘솔을 사용하라는 언급은 지금 설명드린 Firebug를 두고 말씀하신 것으로 추측됩니다. 좋은하루 되세요. ^^
안녕하세요, 제 블로그에 답을 남겨 주셔서 감사합니다,
하지만, 장애인에 대한 비유는 뭔가 잘못됬다고 생각이 듭니다,
장애인들은 자신이 되고 싶어서 된것이 아니지만,
웹브라우져 선택과 OS선택은 자신이 하고 시어서 하는 것이기 때문이죠,
그래서 일반인들에게 장애인들을 위해서 계단외에 경사길을 만들어야 한다는 것은 납득이 갈지 모르지만, 이런 근거로 주장을 한다면, 그건 너희들이 그렇게 선택한 것이니 참으라 하는 것으로 반박 당할수 있기 때문입니다, 사회적 약자라는 것은 인정하지만요,,
그런 의미에서 웹표준에 대한 근거로 장애인 비유를 쓰는것은 그다지 좋지 않은거 같습니다,
그것보다는 표준을 지킴으로서 얻을수 있는 효율성과,
다양성이 없어졌을때 생길수 있는 위험함 (공룡의 멸종 같은것이 그렇죠, 지구에 만약 공룡같이 큰동물만 살았다면 지구에는 생명체가 안남아있을겁니다, 어떤 환경이 올지는 아무도 모르는 겁니다, 그래서 다양한 것이 있지 않으면, 어떤 한 위기에서 살아남지 못할수 있는 것이죠), 그리고 다양성이 있을때 생기는 우리들의 발전 가능성 (다양하다는 것은 그만큼 생각이 다양한 것이고, 그만큼 좋은 아이디어를 만들수 있을 가능성이 높아지는 것입니다) 등,, 다양성을 포용할수 있는 표준이란 개념을 가지고 주장을 계속해야 할거 같습니다,,
친구분께서 소수라는 이유 때문에 그런 사람들을 고려하지 않아도 되는 것처럼 말씀하셨다기에 그런 논리라면 장애인도 소수이니까 고려하지 않아도 될까요? 라고 반문하는 차원에서 장애인이라는 언급을 한 것입니다. 수상한 사람님의 의도는 충분히 이해합니다. ‘어쩔 수 없이 불리한 환경에 처한 사람’을 고려하는 것은 ‘장애를 제거’ 하는 시각으로 바라보기 때문에 다소 자기 방어적인 느낌으로 문제해결에 접근하게 되는데 ‘본인의 선택에 의하여 불리한 환경에 처한 사람’의 욕구를 만족시켜주는 것은 유니버설 디자인의 관점으로서 보다 적극적으로 문제를 해결하거나 예방하려는 노력이고 수상한 사람님의 의견이 이와 비슷한 것으로 생각 됩니다. 결국 장애가 없더라도 권익이 보호되어야 한다는 주장에는 저 또한 매우 동의하는 측면입니다. 감사합니다.(__)
안녕하세요? ^^ 현대해상에 파견되면서 부터 정말 열심히 웹표준을 접하고 있는 일인중 한명입니다.
자주 들르면서도 인사를 못드리고 지나쳐갔었군요.
딱히 여쭤 볼 곳도 없고 하여 경험을 듣고자 여쭈어 봅니다.
전 현재 8년조금 넘은 웹디자이너 입니다.
솔직히 아무리 디자인 공부를 한다고 해도 젊고 새로운 브레인에비하면 날이 갈수록 디자인의 신선함및 감각이 떨어져 가는것을 몸으로 체감이 됩니다. 이젠 젊은 머리와 손에게 눈에 보이는 디자인 부분은 넘길 수 밖에 없는 것인가..하는 생각이 갈 수록 커지는군요.
그리하여 자꾸 시선이 돌아가는 곳이 표준웹가능한 퍼블리셔로의 비중을 많이 두면 되지 않을까 하는 생각이 자주 듭니다.
물론 디자인을 겸할 수도 있겠지요,^^ 할 수 있는 부분이니…
실제 퍼블리셔라 함은 순수 코더의 역할만이 있는것인지…
아시는 영역에 대하여 정보를 주시면 감사하겠습니다.
나이도 이제 30대 중반인지라..ㅡ.ㅡ;; 열심히 어언 10년 가까지 웹디를 해온 시절에 비해 불투명한 미래때문에 요즘 너무 갈등이 심합니다.(오죽하면 이글 쓰기전에 제빵관련을 검색해 봤겠습니까… )
솔직히 전 이일을 평~~~~생은 아닐지라도 일 할 수 있을때만큼은 계속 하고 싶은것이 솔직한 심정이지만,
제 입장이 사업을 차리고 그럴 입장도 아니기에..
아무쪼록 그냥 생각을 여쭙습니다.
참…그리고 지금 사이트 리뉴얼 중이신가요? ^^ 기본 골자만 보이는군요..
항상 건강하시고 행복하세요~
김진환님, 안녕하세요? 제빵기능사는 저도 한때 관심있게 생각하던 직업중의 하나였는걸요 ^^; 뭐 제빵만 있었던가요. 사회복지사, 기자 등등.. 이거 아니면 어떤 직업으로 만족하면서 살 수 있었을까 많은 사람들이 비슷한 생각을 한번쯤은 해보았을 줄로 압니다. 저보다 경험이 많으시지만 저 또한 디자이너로 6년간 일했고 웹 퍼블리셔라는 직업으로 전업한지는 1년이 조금 넘었습니다. 그래서 김진환님의 고민에 더욱 공감하고 있습니다. 친구들은 대표이사 직함 가지고 사회생활 하는데 나는 배짱도 없나 싶은 생각도 들구요. 하지만 저는 나름대로 직업적 소신을 중요하게 생각하고 그 소신을 실현하는 직업중의 하나로서 지금 지닌 직업에 만족하고 있습니다. 아마도 디자이너가 되기 전부터 저는 사회적인 형평이나 인권에 대하여 많은 관심을 가지고 있었던것 같습니다. 현재의 직업이 아니었다면 아마도 시민단체나 사회복지단체에서 일을 하고 있지 않을까 생각합니다. 현재의 일은 순전히 적성이나 전공과는 무관하게 좋아하는 일이었지만 좋아하는 일을 하면서도 늘 생각하던 소신을 펼칠 수 있다고 생각한 것이 웹 퍼블리셔 였습니다. 만약 웹 퍼블리셔라는 직업을 지니고 김진환님께서 평소 가치있게 생각하고 계신 어떤것을 실현할 수 있는 기회가 있거나 적어도 이 직업을 즐기실 수만 있다면 추천드리는데 주저하지 않을것 같습니다. 웹 퍼블리셔의 업무관련 기술은 ‘웹 표준, 웹 접근성, HTML, CSS, Javascript, 유관부서와의 커뮤니케이션’ 정도로서 그동안 HTML/CSS 코드를 직접 작성하고 Javascript코드를 이해하고 응용할 수 있는 수준이라면 전업하기에 어렵지는 않을 것으로 생각됩니다. 대신 전업하시기 전에는 충분한 포트폴리오도 필요하겠지요. 한편 전업을 할 것인지의 여부를 떠나서 웹 퍼블리셔로 전업을 해도 충분할 정도의 역량을 쌓아두는 것도 나쁘지 않다고 생각합니다. 어차피 웹 표준 코드를 작성하고 웹 접근성이 현재의 업무중 일부라면 이미 웹 퍼블리셔라고 생각합니다. 디자인을 하고 있다고 해서 웹 퍼블리셔는 아니라고 말할 수는 없으니까요. 디자인 업무에 대하여 잘 모르는 웹 퍼블리셔보다 훨씬 경쟁력 있다고 생각합니다.
소신에 따라서 옳은 결정 내리시리라 믿습니다. 김진환님도 항상 건강하시고 행복하세요. ^^
PS : 4월 9일은 CSS Naked Day (http://naked.dustindiaz.com/) 입니다. CSS를 벗겨내도 페이지를 탐색할 수 있다는 것을 보여줌으로써 웹 표준을 알리고 장려하는 세계적인 운동 입니다. 저는 미리 동참했을 뿐이구요. 아직 리뉴얼은 아닙니다 ^^
어이쿠!! 이렇게 빨리 답변을 정성스레 달아 주셔서 너무 감사드립니다. ^^
사람이 어떠한 고민을 가지고 있을때, 이미 그 답은 정해져 어느정도 정해 놓고 있다고들 합니다.
단지 불안감과 불확신감에서 오는 심리적 부담때문에 여기저기 자문도 구해보고 점??술의 이야기에도 귀기울여 보곤 하겠지요.
저도 어쩌면 똑같은 부류일지도 모르겠습니다.
정성스러운 답변에 한결 마음이 편안해지는 것 같습니다.
다시한번 감사드리며 오늘도 먼가를 얻어가 볼까 하는 마음에 들르게 되었네요 ^^
오늘 하루도 즐거운 하루 되시고~ 내일 선거일인데 어찌..쉬시는지요? ^^ 선거하시고 즐거운 휴일 되세요~
(PS. 아아..CSS Naked Day 라는 의미있는 운동도 있군요.^^ 대한민국의 몇%나 가능할지 사뭇 궁금해 집니다. ^^)
안녕하세요, 즐겨찾기 해놓고 웹표준 공부하면서 사이트를 제작하고 있습니다.
현재 제작중인사이트인데 조언좀 부탁드립니다.
코딩이 맞게 되어 있는지 모르겠음 ㅡㅡ;;
덧글 남겨주시면 수시로 들러서 확인하겠습니다 ㅡㅡ;;;
김일규님, 안녕하세요?
제니하우스를 잘 보았습니다. 나름 웹 표준을 준수하고자 노력하시는 모습이 보기 좋습니다 ^^;
조언을 요청하셔서 간단하게 살펴보고 개선할점 몇가지만 코멘트 해드리겠습니다.
1. 제니하우스 로고가 현재 body의 배경이미지로 처리되어 있는데 이것은 h1 요소와 img 요소를 이용하여 전경이미지로 처리하시는 것이 의미적으로 맞을것 같습니다. 그리고 클릭이 가능하도록 처리하고 클릭 했을 때 초기화면으로 이동하는 UI가 사용성을 높여준다고 생각합니다. 이렇게 되면 ‘메인페이지’ 라는 타이틀은 h2가 되어야 겠지요 ^^
2. HTML을 선형화 했을 때 right 영역이 content 영역보다 먼저 등장하고 있는데요. 사용자들이 중요하게 생각하는 내용이 무엇인지 생각할 때 right 영역보다는 content 영역이 HTML 구조상 먼저 등장하는 것이 맞지 않는지 생각해볼 문제라고 생각합니다. right 영역은 보조 네비게이션 영역으로서 content 영역에 비하면 중요도나 접근이 빈번하지 않다는 가정하에 그렇구요. 키보드만을 사용하는 사람들은 본문에 이르기 위하여 Tab 키를 무척 많이 눌러야 할것 같습니다. 이렇게 링크가 많은 경우에는 ‘메뉴 건너뛰기’링크를 제공해 주시면 키보드 사용자와 시각장애인들의 접근성을 높여줍니다. 메뉴 건너뛰기 예제 입니다. http://naradesign.net/open_content/reference/navigation.html Tab키만을 이용해서 조작해 보세요.
3. ‘빠른메뉴’와 ‘대륙바로가기’ 라는 제목은 동등한 수준의 헤딩일 것이라고 생각했는데 h5, h3 으로 다릅니다. ‘메인페이지’라는 제목이 h2라고 가정할 때 ‘빠른메뉴, 대륙바로가기’는 동등하게 h3이 되는것이 맞다고 생각합니다.
4. 불필요한 태그의 중첩. [div class="headlineSub"][h3]제니하우스 새소식[/h3][/div] 이 부분의 HTML 코드 가운데 div는 제거하고 h3 요소만으로도 충분히 디자인 표현이 가능해 보입니다. div 태그는 스스로 아무 의미가 없으므로 콘텐츠 덩어리를 그룹핑 하거나 분리하는 용도로 최소한의 사용만을 권장합니다.
5. CSS 파일이 6개로 분리되어 있습니다. 이런 부분은 저도 초기에 유지보수 이점 때문에 사용하던 방식이었지만 http 요청수를 증가시키는 방법이므로 CSS 파일은 1개로 통합하는 것이 좋습니다.
6. 80여개가 넘는 국가별 국기 이미지가 각각 존재하고 배경처리 되어 있는데요. 이 배경이미지는 1개의 통합 이미지로 저장하고 background-position 기법을 이용하여 같은 배경 이미지를 사용하되 배경이미지의 위치값을 다르게 배치하면 웹 페이지의 속도 퍼포먼스가 훨씬 좋아질 것으로 생각됩니다. 80여개의 이미지는 그만큼의 http 전송을 요구하기 때문에 사이트가 느려지는 원인이 됩니다.
7. content 영역 안쪽의 li 요소 안쪽에는 제거해도 표현상 무리가 없는 span 요소들이 보입니다. span 역시 div와 같이 아무런 의미가 없는 요소로서 텍스트를 그룹핑하거나 분리하는 역할만 합니다. 제가 보기에는 a 요소를 활용하여 표현이 가능하고 a를 감싸고 있는 span은 제거해도 될 것 같습니다.
8. a요소에 title 속성은 오히려 중복 콘텐츠를 제공하여 사용성을 떨어뜨립니다. 이미 a요소 내부에 텍스트로 설명이 되었으므로 title을 제공하는 것은 시각장애인 입장에서 같은 문장을 두 번씩 읽게 만드는 결과를 가져옵니다. 이런 경우에는 빼도 무방할 것 같습니다.
9. 하단의 copy 영역 내부 p 요소는 address 요소로 치환하는 것이 의미적으로 맞을것 같습니다. address 요소는 저작자 및 연락처 정보를 마크업하는 요소 입니다.
10. ‘사이트소개 | 기부안내 …’ 이와 같은 요소 또한 목록이어서 ul, li 요소로 마크업 하는것이 시멘틱 할것 같습니다. 메뉴목록을 수평으로 배치하실 때 사용하셨던 display:inline 기법으로 동일한 뷰를 얻으실 수 있을것 같습니다.
휴~ 쓰다보니 10개를 채웠네요. 힘들었습니다. (ㅡㅡㆀ)
뭐 제 의견이 꼭 정답은 아닐 수 있습니다.
다른분들의 조언도 부탁해 보시고 다른 의견이 있으면 공유해 주세요.
좋은 하루 되시구요 ^^;
정찬명님 말씀 너무 감사합니다.
너무 많은 도움이 될것 같습니다.
사실 처음 이곳을 발견하고 수준높고 지적인? 좋은 정보와 때문에..
즐겨찾기 해놓고 오다보니..
어느날 정찬명님이 유명하신 분이란걸 깨닫고 ㅡㅡ;;
혹시나 하는 마음에 질문을 드렸는데 이렇게 좋은 정보와 지적을 주실주는 몰랐습니다.
프린터부터 해야겠네요.. ㅡㅡ;;
앞으로도 자주 방문하여 좋은 정보와 소식 종종 전해드리겠습니다.
말씀 너무 감사합니다.
김일규님 저 그렇게 유명하지 않습니다 ㅡㅜ; 어쨌든 도움이 되시면 좋겠습니다. 좋은하루 되세요!
프린터 해서 하나씩 찬명님의 지적대로 수정하고 있습니다.
근데 몇가지 궁금한게 있어요..
하나.
로고를 그냥 h1 으로 마크업하지 않아도 되나요?
웹표준 교과서나 여타 책에서 보니깐..
실제로 h1 으로 로고를 마크업하는것은 메인페이지정도가 좋다고 하고..
근데 보통 h1 으로 로고를 마크업 하기도 한다고 하구요.. 둘다 맞는거 같기도 한데..
방금 로고부분을 수정했는데 그냥 h1 을 메인페이지 페이지 헤드라인 제목으로 해도 되는지요…
둘.
http://www.jennyhouse.info/ko/intro.php
위주소 문서 하단에 address 태그를 이미 사용중인데.. (보통일반웹문서 하단에는 모두 있음..문서공개일,갱신일,연락처 기재)
그래서 맨하단은 그냥 카피id 로 남겼던 것인데..
각문서 하단의 address 와 카피라이터 address 중 어떻게 사용해야 할지 궁금해요..
김일규님, 안녕하세요? 댓글이 좀 늦더라도 양해 부탁드립니다 ^^
h1을 언제 사용하는 것이 좋은지에 대한것은 명확하게 정의가 내려져 있습니다. 현재 페이지를 계층구조에 따라 다른 문서의 형태로 옮긴다고 가정할 때 가장 큰 제목이 되는 것이 바로 h1 입니다. 따라서 로고는 확실히 h1이 맞다고 판단됩니다. 한편 하나의 페이지에서 h1을 몇번이고 사용할 수 있는지에 대한 것은 명확하게 정의 내려진 바 없으므로 논쟁할 수도 있는 부분입니다. h1을 사이트 로고에 한번 사용한다면 여기에 이의를 제기할 수 있는 사람은 아무도 없지만 h1을 사이트 로고에도 적용하고 콘텐츠 영역의 제목에도 적용한다면 이것은 명확히 틀렸다고는 할 수 없지만 논쟁의 대상이 될 수 있다는 의미 입니다. h1을 하나의 페이지에 몇번 사용할 수 있는지에 대해서는 W3C의 스펙에 표현되어 있지 않기 때문입니다. 웹 표준 교과서를 지금 확인해 보지 못해서 어떤 의도로 “메인페이지 정도가 좋다” 라고 말했는지 정확히 이해가 되지 않는데요. 제 생각은 h1은 메인뿐만 아니라 서브페이지에서도 사이트 로고에 일관되게 사용하는 것이 좋습니다. 제 의견은 로고에 h1, 콘텐츠 영역의 헤드라인(현재 h1으로 마크업된)이 h2가 되는것이 제니하우스의 계층구조를 잘 표현하는 방법이라고 생각합니다. 제가 제안하는 방법대로 마크업 된다면 누구도 이의를 제기할수는 아마 없을껍니다. 하지만 이미 말씀드린대로 h1을 두번 사용한다면 이것을 틀렸다고 할 수는 없으나 논쟁꺼리는 될 수 있습니다.
address 태그는 한 페이지에 몇번 등장해도 무방합니다. 현재는 콘텐츠 영역에서만 사용중이신데요. address 태그는 저작자의 정보를 표현하는 모든 콘텐츠에 사용할 수 있습니다.
의문이 풀리셨는지 모르겠습니다. 궁금한게 있으시면 언제든 댓글 주세요 ^^
찬명님 조언 감사합니다. 오늘 그동안 찬명님께서 말씀하신데로.. 로고가 h1,
메인페이지가 h2
제니하우스 새소식, 설문조사, 빠른메뉴등 검은글씨부분이 부분이 h3, 게시판이름부분이 h4 로 사이트 전체를 셋팅했습니다.
저조차 분석한다고 보다보니 꽤 오래걸리더군요..
처음에 헤드라인 메인페이지 부분을 h1 으로 저정한것들이, 즉 요소들이 밀리다보니.. 헤깔리더라구요..
어쨌든 찬명님 말씀대로 지정하고 나니깐 너무 뿌뜻합니다.
예전에 또 지적해주셨던 부분이.. 하나 더 있는게 그부분은 제가 잘 몰라 임시방편으로 해결해 놓은 부분이 있습니다..
국가별 이미지들에 id 를 주고 80여개가 출력됐었지요..
메인페이지에서 방문객들에게 너무 많은 부담을 주는것같아서 그냥 갯수를 줄였습니다 ㅡㅡ;;
백그라운드 이미지를 지정할경우에 사이트메인 왼쪽부분에 사용자 설정메뉴에서 폰트를 크게 설정할경우 밀리는현상이 생길것 같더라구요..
그래서 그냥 id 로 지정한것을 그냥 쓰고 갯수를 줄였습니다.
개개체를 id 로 다 지정한거는 별도의 페이지에서두 이 id 지정한것들이 유용하게 쓰이거든요..
아직도 정리하고 최적화 할 것이 무척 많겠지만..정말 열성을 다하면서 배워가며 제작하고 있습니다.
책을 항상 갖고 다니면서 읽구요.. 너무 잼있고 뿌듯합니다..
간혹 세계도시풍경도 한번 둘러보시면 눈이 즐거우실거에요..
그리고 시간이 되신다면 ㅡㅡ;; 저희사이트 자유게시판에 네이버 웹표준화팀 정찬명이라고 수고한다고 간단한 글 하나만 ㅋㅋ 그럼 영광으로 생각하겠습니다. ㅡㅡ;
항상 도움을 받아서 정말 고맙습니다.
적어도 메인페이지 정도만은 찬명님께 계속 조언받고 싶어요.
저희사이트는 외국인이 방문하여 한국도시풍경을 보는 곳이라 굉장히 잘 만들고 싶거든요..
자유게시판에 개편 축하 코멘트 남겨드렸습니다. 한편 저는 개인적인 코멘트를 할 때 꼭 필요한 경우가 아니라면 회사를 연관짓는것이 옳지 않다고 생각해서 ‘네이버’ 라는 언급은 하지 않는점 양해해 주세요 ^^
안녕하세요~
조언을 좀구하고자 메일을 보내드렸습니다.
바쁘시더라도, 확인하시고 답변주시면 감사하겠습니다.
남은시간도 알차게 보내시고, 다가오는 주말도 즐겁게 보내세요!!
권경득님, 메일로 답변을 드리긴 했는데 깊이있게 조언드리지 못한것 같아 죄송스럽습니다. 꼭 필요한 말만 한다는 것이 자칫 ‘이건 틀렸으니 이렇게 하세요’ 와 같은 뉘앙스로 말한것 같아서 더욱 그렇습니다. 앞으로는 회신을 늦게 드리더라도 성실하게 답변을 드려야겠다는 생각을 했습니다. 감사합니다.
안녕하세요?
새해 복 많이 받으세요~~~
우선 올해 들어 첨 글을 남기니 새해 인사부터 합니다…^^
콱에서 한번 뵌적도 잇고 한데요… 찬명님의 홈피를 통해 콱을 알아서
작년 초에 세미나도 몇번 갔지요…^^
그런데 요즘 찬명님의 홈페이지가 도메인 주소로 치면 안 열리는 현상이 나옵니다.
전에 저장되어있던 주소로 치고 최근에 몇번 들어왔거든요…
제 컴에서만 이런 반응인건지…ㅡㅡㅋ
지현님, 안녕하세요? ^^ 잘 지내고 계시죠? ㅎㅎ
지현님도 새해 복 많이 받으시구요.
도메인 주소를 직접 입력했는데 연결이 되지 않는것은..
철자를 잘못 입력했거나 URL을 해킹당하고 있을수도 있는… (ㅡㅡ;)
아니면 통신사업자 또는 지현님 PC에서 제 블로그 주소를 유해사이트로 등록했거나 ㅜㅜ;
naradesign.net ← 복사해서 붙여넣기로 테스트 한번 해봐주시겠어요?
이래도 접속이 안되면 정말 뭔가 문제긴 문제네요 ㅎㅎㅎ.
나라디자인 접속이 잘 안되서 좀 그렇긴 하지만..
좋은 하루 되세요 ^^;
IE 6.0 에서는 제대로 JS 파일 이미지가 보입니다.
그런데 파이어폭스에서는 저걸 넣으면 안보이는데요
어케 해결가능할까요?
위에 이게 빠졌어요..
이승희님 ㅡㅡ; HTML 꺽쇠는 [ ] 으로 변환해서 올려주셔야 입력이 됩니다.
방명록에 그런 안내 코멘트를 넣는다는 것이 깜빡 잊고 있었네요.
빠른 시일내에 꼭 고쳐야겠습니다.
다시한번 부탁드립니다.
아 다시 올렸습니다. ^^
[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]
이승희님께서 올려주신 코드 한줄은 표준 DTD입니다. 표준 DTD를 사용한 경우 브라우저들은 표준모드로 동작하고 DTD가 없는경우 Quirks Mode(어물쩡한 대충모드)로 동작합니다. 이는 IE나 FF나 마찬가지 이지요. DTD를 넣고 표준모드로 동작하도록 한 다음 양쪽 브라우저에서 모두 잘 보이도록 해보세요. 그 밖에 어떤 코멘트를 드려야 할지 질문내용이 구체적이질 않아서 좀 막막 하네요. ^^
감사합니다… 그런데 말씀 하신 표준 dtd를 넣으면 FF 에서는 JS 파일이 안보이거든요..
JS 파일에 이미지가 있는데 이미지가 다 안보이더라구요.. 그래서 말씀하신 어물쩡한 대충모드를 했더니 보이더라구요;;;;
JS 파일은 FF에서는 안보이는건가요??
아마 IE전용 Javascript를 사용하신것 같습니다. 표준 Javascript 를 사용하셔야 할 것 같아요. ^^
^^ 감사합니다.
말씀대로 표준 DTD 사용을했습니다.
여전히 보이지 않는 js에서 여러곳을 둘러보니까 “표준자바스크립트 상 IE 전용인 document.all 등의 문법”이 사용됬을것이라고하는데요
현재 js 파일에는
iebrowser=document.all
이런식으로 작업이 되엇습니다.
그럼 FF 에서는 표준자바스크립트상 document.documentElement 을 사용하라고하는데요
iebrowser=document.all 이면 FF에서는 ffbrowser=document.documentElement 을 사용하면될까요?
한가지더~! FF에서 자바스크립트 콘솔을 사용하라고하는데요
깔았는데
제컴터에서는 자바스크립트 콘솔은 없구요.. 자바콘솔이있네요 사용하는 방법을 알수있을까요?
아 허접한 질문 .. 답변 잘해주셔서 너무 감사드리구요..
좋은하루되세요 ^^
제가 자바스크립트는 다루지 않아서 자세한 답변은 드리기 어려울 것 같습니다. 하지만 표준 자바스크립트(DOM)를 사용하시면 브라우저 벤더를 막론하고 모두 적용이 가능하기 때문에 IE 코드 따로 FF 코드 따로 작성하지 않으셔도 됩니다. FF에서는 Firebug라는 확장툴을 설치하시면 HTML/CSS/Javascript 를 디버깅할 수 있는 인스펙터를 활성화 할 수 있습니다. 자바스크립트 콘솔을 사용하라는 언급은 지금 설명드린 Firebug를 두고 말씀하신 것으로 추측됩니다. 좋은하루 되세요. ^^
감사합니다. ^^
좋은 하루되세요 ^^
안녕하세요~
잘지내시는지요. ㅎㅎ 너무 오랜만에 찾아와서 급 질문해서 속보이지만,, ^^;
속사정을 꺼내봅니다 ㅎㅎ
포털 작업을 하게 되었는데요.
폴더,파일 네이밍 같은 부분은 전문가에게 받고 싶어서 찾게 되었습니다
제가 기존에 작업했던 방식이라던지, 관공서에서는 쓰는 폴더구조라던가, 네이밍 말고, 포털에서 별도로 쓰는 권장 구성이 있는지 여쭤보고 싶어서요 ^^;
html.nhndesign.com 에서 이미지 네이밍 구조도 참고했구요..
지금 네이버는 어떤식으로 네이밍으로 하는지 궁금합니다 ^^;
새해복 많이 받으세요 (’ㅇ’)
강성국님 안녕하세요? 회신이 많이 늦어 죄송합니다. ㅡㅡ;
네, 물론 있습니다. 저희팀에서 기존의 HTML/CSS/IMAGE 관련 공통 가이드를 재편집하고 있고 현재는 구성원들의 검토를 거치는 중입니다. 또 이것을 개편될 html.nhndesign.com 에 수록할 예정인데 오픈일정이 확실히 정해지지 않았습니다.
공개 목적으로 만들어지고 있지만 아직 완성되지 않은 내용이라서 죄송하게도 벌써 공유해드리기는 어렵습니다.
기약이 없어서 기다려달라고 말씀드리기는 어려우니 직접 한번 만들어보시는것은 어떨까요 ^^
강성구님도 새해 복 많이 받으세요 ^^
답변해주셔서 감사합니다 -_-;;
지금 홈페이지에 확인해보러 가야겠네요 ㅎ_ㅎ;;
주말잘보내세요~ ^_^/
정신없이 살다보니 내일모레 벌써 꺾이는군요.. 에혀 ==3
찬명님, 새해 복 터지게 받으세용~ ㅎ
3학년 진급을 축하드립니다! 제가 받는 복에 두배 더해서 훈님도 2008년에 큰 복 받으시길 기원드립니다! ^^
안녕하세요, 제 블로그에 답을 남겨 주셔서 감사합니다,
하지만, 장애인에 대한 비유는 뭔가 잘못됬다고 생각이 듭니다,
장애인들은 자신이 되고 싶어서 된것이 아니지만,
웹브라우져 선택과 OS선택은 자신이 하고 시어서 하는 것이기 때문이죠,
그래서 일반인들에게 장애인들을 위해서 계단외에 경사길을 만들어야 한다는 것은 납득이 갈지 모르지만, 이런 근거로 주장을 한다면, 그건 너희들이 그렇게 선택한 것이니 참으라 하는 것으로 반박 당할수 있기 때문입니다, 사회적 약자라는 것은 인정하지만요,,
그런 의미에서 웹표준에 대한 근거로 장애인 비유를 쓰는것은 그다지 좋지 않은거 같습니다,
그것보다는 표준을 지킴으로서 얻을수 있는 효율성과,
다양성이 없어졌을때 생길수 있는 위험함 (공룡의 멸종 같은것이 그렇죠, 지구에 만약 공룡같이 큰동물만 살았다면 지구에는 생명체가 안남아있을겁니다, 어떤 환경이 올지는 아무도 모르는 겁니다, 그래서 다양한 것이 있지 않으면, 어떤 한 위기에서 살아남지 못할수 있는 것이죠), 그리고 다양성이 있을때 생기는 우리들의 발전 가능성 (다양하다는 것은 그만큼 생각이 다양한 것이고, 그만큼 좋은 아이디어를 만들수 있을 가능성이 높아지는 것입니다) 등,, 다양성을 포용할수 있는 표준이란 개념을 가지고 주장을 계속해야 할거 같습니다,,
친구분께서 소수라는 이유 때문에 그런 사람들을 고려하지 않아도 되는 것처럼 말씀하셨다기에 그런 논리라면 장애인도 소수이니까 고려하지 않아도 될까요? 라고 반문하는 차원에서 장애인이라는 언급을 한 것입니다. 수상한 사람님의 의도는 충분히 이해합니다. ‘어쩔 수 없이 불리한 환경에 처한 사람’을 고려하는 것은 ‘장애를 제거’ 하는 시각으로 바라보기 때문에 다소 자기 방어적인 느낌으로 문제해결에 접근하게 되는데 ‘본인의 선택에 의하여 불리한 환경에 처한 사람’의 욕구를 만족시켜주는 것은 유니버설 디자인의 관점으로서 보다 적극적으로 문제를 해결하거나 예방하려는 노력이고 수상한 사람님의 의견이 이와 비슷한 것으로 생각 됩니다. 결국 장애가 없더라도 권익이 보호되어야 한다는 주장에는 저 또한 매우 동의하는 측면입니다. 감사합니다.(__)
또 짤렸네요. 꺽쇠를 쓰면 짤리는것 같어요.. 편집도 안되서 도배아닌 도배를 ^^;;;;;
아래게시판 완성되면 다시 알려드리겠습니다. ^^
좋은 하루되세요. ^-^
몇일전 말씀드렸던 게시판 디자인
http://openbbs.com/web/core/bbs/?section=list
와~ 게시판 만들줄 모르는 제가 보기에는 굉장히 멋져 보이세요 ^^
꺽쇠 넣으면 안된다는 주의내용이 댓글쓰기 화면에는 포함되어 있는데 여기 방명록에는 없네요.
방명록에도 넣어야겠어요.
감사합니다(__)