관공서 UI의 실태

Posted by EveR™

요즘 너무바빠서 블로그 관리에 소홀이 하다가 오랜만에 포스팅을 하게되었습니다. 이게 8월의 첫 포스팅이네요. 첫 포스팅 내용이 부천시청 사이트를 관점으로 둔 우리나라의 어처구니 없는 UI구조를 잠깐 접해본 경험담입니다. 입사한지도 얼마 되지 않았는데 갑작스럽게 일이 많아지니 참 정신없네요. ^^

현재 작업하고 있는 UI의 일부분
황당하기 짝이 없는 디렉터리 구조

관공서 사이트인 XXXX 사이트에 대한 퍼블리싱 작업을 처음부터 저희쪽에서 진행한것이 아닙니다. 어느 웹에이전시의 요구사항으로 페이지 일부분에 대한 퍼블리싱 작업을 하게 되었습니다. 그 에이전시로 부터 기존에 작업한 디렉터리 및 HTML,CSS,JS파일들을 모두 넘겨받았으며 지시사항으로는 기존에 설계되있는 디렉터리 구조와 UI를 지켜가며 작업을 진행해 달라는 것이였습니다. 뿐만 아니라 img,css,js파일들에 대해서도 어떻게 파일명을 정하며 어느 디렉터리에 넣어달라는 가이드가 있더라고요. 처음에 이 작업을 지시 받으면서 파일들을 열어본 순간 머릿속이 멍해지는 느낌이 들었습니다. 기존에 작업되있는 모든 파일들을 하나하나 볼 때마다 엄청난 압박감이 듭니다.

저희 회사 대리님께서는 CMS를 사용하는 회사들은 이렇게 규격화된 파일명들을 이용하여 모든 파일들을 프로그램으로 관리한다는데 어떤 프로그램을 만들어서 어떻게 관리하는지 도저히 짐작이 가지않습니다. CMS라는게 위젯, 모듈, 플러그인, 레이아웃 으로 분리되어 각 영역별로 프로그램으로 관리해주는 시스템을 말하는건데 도대체 이렇게 복잡하게 파일명을 짜서 어떻게 관리할지 참 궁금하네요. 난생 처음 격는 UI 및 디렉터리 설계 때문에 파일명 하나 짓는데 고민을 많이 하게 되고 어느 디렉터리에 어느 파일을 저장해야 할지 계속 난감해 하고 있습니다.

그리고 제가 사회의 퍼블리싱 작업에 대한 전반적인 흐름을 봤을 때는 사회에서 퍼블리싱 작업을 할 때는 정성스러운 마크업따위는 별 중요치 않은거 같습니다. 깔끔하고 정성스러운 UI? 마이크로포멧? 이런건 자기 개인홈페이지를 만들때나 써먹지 사회에서는 별로 필요없어 보입니다. 사회에서는 항상 빠른 진행을 요구하며 사회에서의 CSS 적용은 프로그램의 함수 개념과 똑같은거 같습니다. 빠른 진행을 위해서는 기존에 잘 짜놨던 CSS를 잘 배껴다가 쓸 줄 알아야 하더군요. UI작업은 웹접근성 평가시에 감점요인만 없도록 설계해주면 됩니다. 지금작업하고 있는 부천시청 사이트 같은 경우 그냥 기존에 짜여져 있던 UI구조에 대해 어디에 위치해 있는지 빠르게 분석 후 잘 긁어다 쓴 후 시안에 맞춰 CSS를 살짝 수정해주면 끝이고요. 이게 단순히 이 사이트 뿐만 아니라 항상 빠른것을 원하는 우리나라 IT의 현실인거 같습니다.

우리나라 IT기업들은 아직 “크레이티브하다”라는 개념이 존재하지 않는거 같습니다. 풀어서 말하면 우리나라의 IT기업들은 지극히 계산적이고 기계적이라는 뜻입니다. 옛날이나 지금이나 웹표준,웹접근성을 떠나서 포샵만으로 설계한 억지스러운 레이아웃 시안을 퍼블리셔들에게 보내서 퍼블리싱 해달라고 요청하는 에이전시들이 많습니다. 그래도 퍼블리셔들이 막상 작업하게 되면 웹표준 및 웹접근성에 준수하는 결과물을 만들어 내긴합니다. 다양한 CSS핵이나 jQuery같은걸 이용하면 많이 극복이 되더군요. 하지만 단순히 기기적인 평가와 접근성 품질마크를 획득한거 가지고 마냥 좋아하면 될까요?

이같은 우리나라의 현실이 안타까워 매우 피곤함에도 불구하고 이런글을 쓰게 됬습니다. 진정한 웹접근성이 성립되기 위해서는 우리나라에서 기존에 작업했던 테이블방식의 레이아웃 개념은 좀 버려야 될꺼 같습니다. 이미지 텍스트는 이제 그만좀 쓸때가 되지 않았나 싶습니다. 이젠 가독성이 좋은 일반 텍스트를 기반으로 한 컨텐츠 위주의 레이아웃 설계에 중점을 둬야 될 때가 되지 않았나 싶습니다. 내일 또 작업을 진행해야 하는데 한숨만 나옵니다. ㅠㅠ. 이상으로 저의 허접한 포스팅은 여기까지 마치겠습니다. 좋은 밤 되세요. ^^

포스트에 대한 의견

사용할 수 있는 HTML 태그 : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>