웹표준으로 작업한 프로젝이 오픈이 되어서 작업을 하면서 느꼈던 내용을 조금씩 적어보려고 합니다.
여태 했던
작업은 디자인-코딩을 혼자서 하거나, 규모가 크지 않거나, 디자인 요소가 많거나 적거나 했던지라 큰 무리가 없었는데 그에 비해
이번 프로젝트는 웹사이트의 규모와 컨텐츠의 종류등 방대해서 긴장하고 진행했던 프로젝트였습니다. 게다가 작업 인력 투입도 턱없이
적었습니다. 나중에 가서는 이런 저런 상황들 때문에 스스로 타협해버린 부분도 많아서 정말 아쉬운 마음이 컸습니다.
그래서 이름하여 "웹표준 작업 후기" 라는 타이틀로 제가 느낀 많은 이야기를 하고자 합니다.
이번글은 1탄! "웹접근성 보장과 업무협업"입니다.
다른분들도 비슷하실테지만 제가 작업한 방식은 아래와 같습니다.
디자인팀장님이 메인디자인, 서브디자인, 가이드디자인 PSD를 만드시고 가이드를 잡아 주시면 코더인 제가 슬라이스를 하고 이미지 파일명을 적습니다.
서브 디자이너들이 메인 디자이너분이 가이드해 놓은 내용에 맞게 서브 디자인 PSD를 만들어 내는 동시에 저는 메인코딩과 서브레이아웃(빈페이지)을 코딩하고 기타 샘플페이지들을 작업합니다.
그리고 제가 메인 디자이너분과 조율하여 개발에 관련된 테이블이나 폼, 버튼등을 샘플페이지로 작업하여 개발자에게도 넘겨 드리고 텍스트로 처리되는 페이지들은 메인디자이너의 가이드를 토대로 스토리보드를 보고 제가 코딩을 합니다.
디자인 부분은 제외하고 코딩 부분만 따졌을 때에 작업하면서 주의해야 했던 부분은 아래와 같습니다.
- 퀄리티 있는 디자인 결과물을 어떻게 처리 할 것인가? (텍스트 보다 이미지가 많거나 도식화 되어 있는 경우)
- 다른 작업자(서브 코더)와의 작업이 효과적으로 진행되고 있는가?
우선, 클라이언트가 까다롭게 디자인을 요청하면서 단순 텍스트까지 이미지로 꾸며주길 원했습니다. 그리고 설명같은 경우 도식화 하여 내용을 한눈에 알아볼 수 있도록 '일반사용자'를 배려한 작업을 했습니다.
(우리는 모든 사용자를 배려해야 하기 때문 일반사용자의 배려라는건 참 고민스럽습니다. 사용자 경험도 마찬가지구요. 사실 고민을 하지만 잘 모르겠습니다.)
이미지로 된 텍스트 영역을 bg로 처리하기에는 무리가 있어서 alt값을 일일이 입력하여 작업을 했고, 하다보니 이미지 갯수가 너무 늘어나게 되버리더군요. 그래서 정말 많은 텍스트는 간단하게 요약을 하여 alt값을 넣기도 했습니다. 플래시의 경우는 신현석님의 플래시 오브젝트 표준으로 사용하기 페이지를 참고했는데 역시 대체 텍스트 때문에 파일 라인이 엄청 늘어나더군요. :)
그리고 정작 난감한 문제는 도식화 된 영역을 의미에 맞도록 작업하는 것이였습니다.
css를 뺐을때 의미있는 흐름을 만드는것도 쉬운건 아니지만 IE6,7과 불여우, 오페라 등의 브라우저를 맞추는게 꽤나 시간이 걸리더군요. 특히 말하면 입아플 IE6은 정말이지... 그렇지만 정말 올바른 마크업을 할 경우에는 IE6도 잘 따라와 준다는건 제 잘못이 크다는 것이겠죠? 그래서 결과적으로 더 많이 배우고 알 수 있는 계기가 되었습니다. 역시 뭐든지 해보지 않고는 모르는 일이죠. ^^
혼자 고민하고 해결하면서 배워나가는 일은 스스로 나아지고 있다는 느낌을 갖게 되었지만 다른 작업자와의 업무협업에 관해서는 즐겁지만은 않았습니다.
표준작업이든 기존의 테이블 작업이던 다른 사소한 일에서도 제가 중요하게 여기는 부분 중 하나가 바로 "네이밍" 인데요, 제가 기억력이 나빠서 바쁘게 일하다 보면 솔직히 나중에 가면 내가 지은 이름도 제 각각인 경우도 있습니다. 그래서 그런지 더 네이밍에 집착을 하고 예민하게 굴기도 합니다.
제가 네이밍을 하는 경우는 보통 세가지가 있는데
① 페이지이름 ② 이미지이름 ③ 스타일시트의 아이디/클래스명 입니다.
페이지이름은 기획자가 잡아주는 경우도 있겠으나 보통은 프로그래머와 간단한 조율만 가지고 제가 정하며 추후에 프로그래머가 일부 변경도 하기도 합니다. 그래서 온전하게 제 몫인, 그래서 제일 민감하고 중요하고 신중한 부분은 이미지명과 스타일시트입니다.
다른 작업자 분이 최대한 알아보기 쉽게 해야 할 수 있어야 한다고 생각을 했고, 무엇보다 작업 완료 후 클라이언트 교육 문제가 있기 때문이였습니다.
또 하나, 협업을 염두하고 작업을 해야 해서 스타일시트 파일은 엄청나게 늘어나게 되었습니다. 스타일시트가 많은게 좋지 않다는 것은 알지만 위와 같은 이유들 때문에 최대한 보기 쉽고 동시에 같은 파일을 열지 않도록 파일을 쪼갰습니다.
하지만 코딩에 대한 인력이 당초 저뿐이였지만 일정이 빠듯하여 잠깐 서브코더가 투입이 되었을 때 문제가 생겼습니다.
"의미에 맞게" 작업하라는 의도가 충분히 전달되지 않았던 문제였는지 서브코더는 단순히 table를 div로 대체한 수준의 작업을 하셨습니다. 미처 확인하지 못하고 지나가다 보니 작업하신 모든 페이지를 다시 코딩해야 할 지경이였고 이미지 파일명도 마찬가지였고, class명도 그랬습니다. 이미 많이 진행되어 제가 고치기도 애매한 상황인데다가 작업자분의 class명을 제가 알아먹을 수가 없었습니다.
결국은 큰소리가 나면서 서브 코더가 수정을 하기로 했지만 사이트 오픈때 까지도 제가 의도하지 않은 부분에 대해서 끝내수정되지 않은 부분이 많이 있었습니다.
결과적으로 이 프로젝의 경우에는
웹접근성에 대한 노력을 했고 제 능력에서는 최대한 보장하고 배려 했다고 생각하지만 사실 여의치 않던 부분도 많았고 내부 인력들에 대한 협업은 시행착오를 겪었고 제가 그에 대한 충분한 배려가 없었던 것 같습니다.
+추가글
말이 나온김에 조금 덧붙이자면 "웹표준 작업" 이라는 것은 아직도 착각하시는 분들이 계신데 table을 div로 바꾸는 것이 아니죠. 그럼 기존과 차이점이 없지 않나요? 또 혹자들은 앞으로는 드림위버든 익스프레션이든 다양하고 쉬운 소프트웨어들이 나올 것이기 때문에 공부하지 않아도 될 것 처럼 말합니다. 더 충격적인 사실은 웹표준을 swf로 포장 하려는 사람들이 많다는 것입니다. (망할!)
바른 웹사이트를 제공해야 하는 개발자들은 우리들 "사람"입니다. 또한 웹표준 사이트를 평가하거나 실제 사용하는것도 물론 "사람"들입니다. 그냥 사람들이 아니라 조금은 불편한 조건의 사람들도 있습니다.
본질이 뭔지 파악조차 못하고 소프트웨어만 믿는 사람들이나 얄팍한 생각과 지식으로 눈가리고 아웅하는사람들은 올바른 퍼블리싱을 하겠다고 많은 노력을 하는 퍼블리셔분들과 그들의 성과를 보지 못하고 생각하지 못하는 것 같습니다.
(안일하고 쉽게 가려는 생각을 가지고 있다면 이러한 혜택을 받을 수 있는 직업으로 바꾸시는게..)
'Web Web Web' 카테고리의 다른 글
| 탈퇴버튼 숨긴다고 포기할줄 알았더냐 (2) | 2008/07/14 |
|---|---|
| 웹표준 작업 후기 - 2. 퍼블리셔의 중추적 역할을 알아주세요 (4) | 2008/07/08 |
| 웹표준 작업 후기 - 1. 다양한 웹접근성 보장과 업무협업 (6) | 2008/06/30 |
| 미래웹기술포럼의 후기 및 정리 입니다. (2) | 2008/06/21 |
| 미래웹기술포럼에서 받은 기념품 자랑합니다 (8) | 2008/06/19 |
| RIA가 대세라고 졸졸 따라다니면 될까요? (4) | 2008/06/17 |
댓글을 달아 주세요
웹표준은 정말 중요하고 웹사이트라면 모든 유저들에게 접근성과 동일하게 웹서비스가
제공되어야 하는 것이 마땅하나 가끔은 이런 생각을 해봅니다.
웹은 점점 빠른 속도로 발전하고 있고 RIA라고 불리어지고 있는데
웹표준을 고수하다보면 때로는 신기술에 대한 것, 즉 웹의 발전을 방해(? 발전이 더디어지는)하는 일이
발생하지 않을까라는 생각이 듭니다.
웹표준 입장에서 보았을 때 Silverlight라던지 Flex라던지 모두 비판적일 수 밖에 없네요.
또한 ActiveX... <--- 이건 저도 정말 싫은걸요? 자꾸 설치하라고 떠서; Java Applet으로 대체할 수 없나?
하지만 개발적 입장에서 보았을 때에는 더 빠르고 편리하고, 표준으로 구현할 수 없는 서비스들이
극소수의 유저를 배려하기 위해 사용할 수 없을 때 마이너스 효과가 도래하지 않을까요?
사용자는 좀 더 화려하고 파워풀한 기능을 요구하고 있는데 이럴 때의 웹표준은 어떻게 지켜야할지 모르겠습니다.
웹표준과 접근성을 100% 지키려면 swf 빼고, 정말 의미에 맞는 HTML(기본적인 HTML)만 사용해야만 하고
css도 Hack을 쓰지말고 의미에 맞는 가장 기본적인 css만 사용하여만하고(새로 추가된 css의 경우
다른 기기들에서 적용되지 않습니다.), Javascript를 사용하지 않았을 때에 이로서 모든 기기와 브라우져들에서
똑같이 보이고 똑같이 사용할 수 있으리라 생각됩니다. 이렇게 제작하면 어떤 회사들이 홈페이지 의뢰를 할지....
[ 웹표준을 swf로 포장 하려는 사람들이 많다는 것입니다. ] 이 글에서 이렇게 주저리주저리 써봅니다.
웹표준은 아니지만 swf는 전세계 90% 이상의 컴퓨터에 구현이 가능하고 추가적인 ActiveX라던지
프로그램을 설치하지 않고 기능 구현이 가능하며, 모바일 PDA PMP 등의 기타 기기들에서도 작동가능합니다.
또한 요즘 모바일은 풀브라우징 서비스를 내놓고 있는 상태입니다.
swf가 웹표준을 대체할 순 없지만 OS환경에 구애받는 ActiveX나 브라우저에 구애받는 Javascript와 CSS,
화면 해상도에 따른 Size 문제는 제작시 OS나 브라우저를 신경쓰지 않아도 해결이 가능한 사항이라
웹표준을 대체한다라고 말들이 나오는 것 같습니다.
저는 개발자이기에 그렇습니다. 웹표준적인 것과 그렇지 않은 것...
이 두 가지 입장을 모두 무시할 수 없습니다.
그래서 더더욱 혼란스럽습니다. ( 우리보고 대체 어떻게 하라고~~~!! 우씨!!!! -_-;;; )
유도리 있게 작업을 하는 방법밖에 없는 건지 모르겠군요.
웹표준에 대한건 저보다는 정리정돈님이 더 지식이 많으시기에 정리없이 이렇게 주저리 주저리 글을
남기고 도망갑니다~ 슝~~~З ㅋㅋ
전에도 관련되서 잠깐 언급을 했던 것 같은데요, 이노베이션과 스탠다드는 공존해야 한다는 것입니다.
하지만 모든 이노베이션은 스탠다드에 기초해야 된다고 생각을 합니다. 혁신만을 쫒게 되면 IE가 지배하는 브라우저 시장 또는 엑티브X 없이는 인터넷 뱅킹을 못하는 지금의 모습에서 나아 질 수 없을 것 같네요. (위에 말씀하신 css hack이라던가 브라우징 맞추는 일을 힘들게 한 것도 표준을 간과한 결과이기도 하죠.)
모바일 브라우저의 경우에도 터치폰인 오즈가 제가 알기로는 국내 모바일 브라우저 제작사인 인프라웨어의 폴라리스6이 들어간걸로 알고 있습니다. 폴라리스는 Acid2테스트를 통화했구요, 다른 모바일에서도 아마 오페라나 사파리가 들어가게 되지 않을까 싶구요, 파이어폭스도 모바일 브라우저 출시 준비를 하고 있다네요. 아직까진 IE브라우저를 쓰는 모바일은 제가 알기로 없는데 무브넥스트님 말대로 모든 os에 플래시플레이어가 깔려있다고 해도 그렇다고 모든 html을 swf로 할 수도 없는 일이죠. 그러니까.. 웹표준은 극소수의 유저를 배려하는 일뿐만 아니라 html 본연의 의미를 살려주는 일이기도 한거죠.
제 이야기가 좀 어설프겠지만 나중에 다시 이야기 하면 좋을 것 같네요. 그리고 아래 멋있는 정리를 해주신 신현석님 말씀이 제 부족한 생각에 너무 큰 도움을 주셔서 다행이네요.
MoveNext// 웹표준 적용한다고 플래시나 액티브엑스, 플러그인을 사용하지 않아야 하는 것은 아닙니다. 그런 요소들을 웹페이지에 적용하기 위해서 사용하는 OBJECT라는 태그도 엄연히 HTML 스펙상의 표준입니다.
RIA를 사용할 때 표준을 잘 알고 상호운용성(MS에서 중요시 하는)이나 접근성을 위한 기능들을 잘 알고 활용해서 만들어야 하는데 그러한 경우가 많지 않아서 경계를 하는 것입니다. 컴포넌트에서 이미 잘 제공하고 있는 기능들을 단지 시각적인 이유로 있는 기능들 다 빼놓고 후지게 만들고 있는 경우가 너무나 많습니다. 제대로 잘만들어서 시각적으로도 뛰어나고, 접근성, 사용성 모두 높은 기능을 만들어 써야 한다는 것입니다. 대부분의 기술들에는 이러한 것들을 잘 고려한 기능들이 이미 다 들어있습니다. 자바스크립트도 Graceful Degradation이나 Progressive Enhancement 개념을 적용해서 만들면 제작할때나 나중에 수정할때 아주 큰 도움을 얻을 수 있습니다. 사용할 때는 물론이고요. 많은 사람들이 이러한 것을 잘 모르고 고민을 안해봤기 때문에 웹표준은 한계가 많다라고 하는 것이지, 실제로는 이러한 것들을 다 잘 적용할 수 있게 웹표준은 열려 있습니다.
그리고 플래시 플레이어가 90%이상 깔려있다는 것은 데스크탑 환경에서나 그렇지 실제로는 그렇지 않습니다. 어도비의 홍보성 멘트죠. PDA나 PMP에 깔려 있는 경우가 있는 것이지 안깔려 있는 경우가 훨씬 더 많습니다. 당장 제 핸드폰(Razr)에도 안깔려 있고, 제 차의 네비게이션에도 없고, 제가 쓰는 iPOD touch에도 없네요. 제가 너무 오래된 기계를 쓰는 걸까요? 그렇지는 않은 것 같습니다. 지금 같은 상황일 수록 플래시에 대해서 올바로 이해하고 한계를 명확하게 알고 고민해야 하는 때 입니다. 어도비의 말을 너무 믿지 마세요. 매크로 미디어 인수되는거 보세요. 일개의 회사일 뿐입니다. 워낙 많이 쓰니까 원래 탑재된 것으로 알고 계시는 분들이 많은데 윈도우에서도 당연히 처음에 한번 설치해 주어야만 하는 Active-X고요.
웹은 점차 확장되고 있습니다. 지금이 바로 웹표준이나 접근성, 상호 운용성을 올바로 이해하고 경쟁력을 키워나갈 수 있는 절호의 찬스인 것이지요. 웹표준이 맞다 틀리다가 아니라 사용자를 위해서 어떠한 가치를 키워야 하는가를 고민해야 합니다. 시각의 차이입니다. 많은 사람들이 좀더 긍정적이고 스스로에게 도움이 되는 방향으로 생각을 했으면 좋겠습니다. 저도 물론 많이 노력 할 것이고요.
제가 모르는 많은 부분을 말씀해 주셔서 정말 고맙습니다. 신현석님 말씀처럼 가능하지만 간과하는 부분이 많이 있는데 이런 부분은 역시나 '인식'이 중요한 것 같습니다. 그리고 인식을 위한 '알리는 일'도요. 그래서 오픈웹이나 신현석님을 비롯한 많은 분들의 노력이 필요한 것 같습니다. 저도 그러한 노력의 하나가 되었으면 좋겠구요.
댓글 정말 고맙습니다. 많이 배우게 되었어요!!
정리정돈님 정말 정리정돈 잘하시는 것 같아요. 부러워요~
도움이 많이 되었습니다.
도움이라고 해주시니까 정말 고맙습니다.
다른분도 아니고 항상 도움 많이 받고 있는 신현석님에게 들으니 기분 상당히 좋은걸요~
댓글 고맙습니다.