부서원들과 같이 하는 세미나를 위해서 정리했었던 자료 중의 일부입니다. 대충 알고 있었던 것도 막상 누가 물어보면 한마디로 설명하는 것은 어렵다고 종종 느낍니다. 세미나 발표 준비를 하면서 모르면서 알고 있었다고 착각했던 부분을 많이 발견할 수 있어서 좋았습니다.

약간 엉뚱한 이야기지만, 포스트를 작성하는 동안 '그림1’을 다시 보면서 최근 읽고 있는 'The world is flat'이라는 책의 내용이 생각났습니다. 그 책의 처음에는 기업의 아웃소싱에 대한 사례가 많이 나옵니다. 기업의 핵심 업무가 아니고 밖에서 할 수있는 업무들은 보다 싼 비용으로 처리할 수 있는 해외의 조직으로 넘기는 사례가 늘어나고 있다는 것이죠. 각 업무단의 코드에는 핵심로직만 남기고 공통적인 처리는 따로 정의해 둔 것을 weaving해서 쓴다는 내용과 왠지 비슷하게 보이더군요. (그런데 책을 아직 1장 밖에 못 읽었어요)

제가 있는 프로젝트의 UI 표준은 2004년 10월경에 처음 정해졌습니다. 연속 사업 중 첫 번째 사업 때 정해진 틀을 수정없이 Copy&paste로 입혀서 쓰고 있는 중이였습니다. 디자이너가 HTML로 파일을 만들어 주었을 당시에는 팀원 중에 웹표준에 대해서 신경을 썼던 사람이 없었습니다. 지금 다시 들어다보니 CSS를 잘 정의했으면 훨씬 깔끔하게 중복없이 만들수 있었던 코드가 많이 보입니다.

저도 작년에 파주시 프로젝트에서 웹표준에 맞춰서 개발을 하고 있다는 말을 듣기 전까지는 스스로 css를 정리해볼 생각은 없었습니다. 그런 작업은 디자이너의 영역이라고 안이한 생각을 했었습니다. 새로 프로젝트 들어가면 깔끔하게 UI표준 만들어주는 사람을 만나기를 바라는 마음만 있을 뿐이였습니다. 그러다가 정동인씨나 최효근씨 같은 후배들에게 배우고 느낀 바가 많아서 저도 현재의 프로젝트에서도 서서히 적용하겠다는 의지를 가지게 되었습니다.

이번에 고객이 다른 업무와 독립적으로 쓰여질 프로그램을 요청했는데, 그 페이지에는 새로운 CSS를 만들어서 적용하고 싶었습니다. 현재 프로젝트에 남은 3명의 인원만으로는 모든 페이지를 다 갈아 엎는 것은 무리라고 생각했었는데 적당한 시작점을 찾은 것이였습니다.

처음 수정한 부분은 화면의 큰 제목과 하위 제목이였습니다.

와 같이 보여지는데, 기존 코드로는

로 나와있는 부분입니다. CSS를 새로 만들고 나니 마크업은 아래와 같이 딱 두줄로 바꿀수가 있었습니다.

CSS에 다음과 같이 배경이미지, 선 등을 넣어서 정리했습니다. 매 페이지마다 반복되는 글자 앞의 이미지, 선과 여백을 위한 table, tr, td 문장들이 모두 정리됩니다.

그리고 새로 개발되는 화면에 좌측 메뉴부분이 있는데, css에서 float:left 선언을 이용하니 table없이 레이아웃을 잡을 수가 있었습니다. 웹표준을 설명하는 자료에서 많이 드는 예제이죠. 반복되는 class 지정에도 선택자를 잘 활용하면 클래스 지정없는 태크만으로 처리할 수 있는 부분이 많아보였습니다.

이제 기초적인 것을 적용시킨 것 뿐이고 제가 공부할 것이 아직 많아서 갈 길이 멀다는 기분이에요. 그래도 간결한 jsp를 보니 몇달만에 방청소 했을 때보다 더 속이 시원합니다.

그동안 UI단 코드의 중복에는 지나치게 관대하게 살아왔었다고 반성했습니다.