HTML & CSS 정리해본 예

정상혁정상혁

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

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

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

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

image

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

<table border="0" cellpadding="0" cellspacing="0" width="100%">
 <!-- 제목 -->
 <tr>
  <td>
   <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr><td class="title1"><img src="/image/title_header.gif" align="absmiddle">&nbsp;감사사항 목록</td></tr>
    <tr><td class="tilte_space"></td></tr>
    <tr><td class="title_line"></td></tr>
    <tr><td class="tilte_space"></td></tr>
   </table>
  </td>
 </tr>
 <!-- 조회조건 -->
 <tr>
  <td>
   <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td align="left" class="title_small">
            <img src="/image/title_small.gif" align="absmiddle">&nbsp;조회조건
        </td>
    </tr>
   </table>
  </td>
 </tr>

로 나와있는 부분입니다. 이걸 css를 새로 만들고 나니

  <h1>감사사항 목록</h1>
  <h2>조회조건</h2>

이렇게 딱 두줄로 바꿀수가 있네요. CSS에 다음과 같이 배경이미지, 선 등을 넣어서 정리한 것이죠. 매페이지마다 반복되는 글자 앞의 이미지, 선과 여백을 위한 table, tr, td 문장들이 모두 정리됩니다.

h1 {
  font-size:14px; color:#5C5C5C;
  font-family: 돋움, arial;
  font-weight:bold;
  height:14px;
  padding-left: 20px;
  padding-bottom: 10px;
  margin: 10px 10px 2px 10px;
  background-image: url(/image/title_header.gif);
    background-position: 0% 10% ;
  background-repeat: no-repeat;
  border-color:#C0C3C6;
  border-width:1px;
  border-bottom-style: solid;
}

h2 {
  font-family: 돋움, arial;
  font-weight:bold;
  font-size:12px;
  height:13px;
  color: #4f4f30;
  padding-left: 20px;
  margin-bottom: 4px
  padding-bottom: 10px;
  margin: 10px;
  background-image: url(/image/title_small.gif);
  background-position: 0% 0% ;
  background-repeat: no-repeat;
}

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

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

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

웹표준관련 권장 자료

(부서 후배 최효근씨가 추천해준 자료입니다)

  • 한국소프트웨어진흥원의 실전웹표준가이드

  • Head First HTML(XHTML, CSS) -한빛미디어-

  • 실용예제로 배우는 웹표준 -에이콘- // 본격적인 활용기

  • 웹2.0을 이끄는 방탄웹 -에이콘- // 아이디어가 넘치는 책

  • CSS 마스터 전략 -에이콘-

  • CSS designing without tables -sitepoint-(원서) // 무릅을 탁 치게 되는 책

  • CSS the css anthology -sitepoint-(원서)

코드와 예술

정상혁정상혁

CCK(Creative Commons Korea)의 'Code can be an art.' 행사 소식을 처음 들었을 때, 생각났던 자료들을 정리해서 올려봅니다.

다음은 임백준님의 책 '누워서 읽는 알고리즘' 중 '문학적 프로그래밍’이라는 장에서 소개 된 내용입니다. Art of computer proramming으로 유명한 카누스 교수가 1974년 11월 미국 샌디에이고에서 열린 ACM(Association for computer Machinery) 연례회의에서 '예술로써의 컴퓨터 프로그래밍(Computer programming as an Art)라는 제목의 강연을 했다고 합니다. 그 강연은 다음과 같은 말로 끝이 맺어졌습니다.

우리는 컴퓨터 프로그래밍을 하나의 예술로 생각한다. 그것은 그 안에 세상에 대한 지식이 축적되어 있기 때문이고 기술과 독창성을 요구하기 때문이고 그리고 아름다움의 대상을 창조하기 때문이다. 어렴풋하게나마 자신을 예술가라고 의식하는 프로그래머는 스스로 하는 일을 진전으로 즐길 것이며, 또한 남보다 더 훌륭한 작품을 내놓을 것이다.

We have seen that computer programming is an art, because it applies accumulated knowledge to the world, because it requires skill and ingenuity, and especially because it produces objects of beauty. A programmer who subconsciously views himself as an artist will enjoy what he does and will do it better. Therefore we can be glad that people who lecture at computer conferences speak about the state of the Art.

위 강연의 PDF파일을 찾았는데 7페이지 밖에 안 되는군요. 이정도면 출력해서 퇴근길에 읽어볼만 한것 같습니다.

http://faq.ktug.or.kr/faq/LiterateProgramming?action=download&value=knuth-turingaward.pdf

그리고 1992년에 출판된 책 '문학적 프로그래밍(Literate Programming, Center for the Study of Language and Information,1992)은 카누스 교수의 논문과 '생각하는 프로그래밍’의 저자 존베틀리의 칼럼이 묶여진 책입니다. 이 책의 서문은 다음과 같습니다.

컴퓨터 프로그램을 작성하는 일은 재미있다. 그리고 잘 작성된 프로그램을 읽는 것도 재미있다. 세상에서 가장 즐거운 일 중 하나는 여러분이 작성한 컴퓨터 프로그램을 다른 사람들 혹은 여러분 자신이 읽고 기쁨을 얻는 것이다. 컴퓨터 프로그램은 또한 유용한 작업을 수행할 수도 있다. 세상에서 가장 큰 성취감을 맛보는 순간은 여러분이 창조한 무엇이 사회의 부와 진보에 기여한다는 사실을 깨닫는 순간이다. 어떤 사람들은 컴퓨터 프로그램을 작성함으로써 돈을 벌기도 한다. 따라서 프로그래밍은 세 가지 측면에서 결실을 맺는 행위다. 미학적으로, 인류학적으로 그리고 경제적인 면이 바로 그러한 결실에 해당한다.

카누스 교수의 관련 논문도 PDF파일로 구할 수 있었습니다. http://faq.ktug.or.kr/faq/LiterateProgramming?action=download&value=knuthweb.pdf

얼마 전에 '문장강화'(이태준 저)라는 글쓰기에 관한 책을 읽었습니다. 1940년에 처음 나온 책임에도 불구하고 아직까지 이 책을 넘어서는 글쓰기 공부책이 없다고 말하는 사람이 많더군요. 책에 들어간 예문이 다 옛날 글이라는 것이 아쉽지만, 그럼에도 이 책이 그런 찬사를 받는 것에는 그럴만한 이유가 있다고 느껴졌습니다. 제가 제일 감탄을 했던 내용은 글을 고쳐서 다듬는 '퇴고’에 대한 예시였습니다. 저자는 얼핏 보기에 별 흠이 없어 보이는 문장을 점차적으로 고치는 과정을 보여줍니다. 그 부분을 읽을 때 저는 마틴파울러가 쓴 책 '리팩토링' 제1장을 읽을 때와 굉장히 흡사한 느낌을 받았습니다. 퇴고가 코드를 리팩토링하는 것과 비슷하게 느껴진 것이죠. 유심히 안 보면 이상 없어 보이는 코드나 문장들이 여러 관점에서 따져가니 고칠 점이 투성이인 것들이였습니다. 그리고 고쳐진 최종결과물들은 처음에 비해서 훨씬 명확하고 이쁜 코드와 문장들이였고요. 그때 다시 한번 코드와 문학, 넓게는 예술과 유사점이 있다는 것을 떠올렸습니다.

많은 분들이 아시겠지만 '해커와 화가’라는 책에서는 미술과 프로그래밍의 유사점을 이야기하고 있습니다. 이 책의 저자인 폴그레이엄은 특이하게도 미술과 전산을 같이 전공한 사람입니다. 그 예 중의 하나가,세계적인 명화들을 엑스레이 투시해보면 그 아래에는 수많은 스케치 후에 많은 시행착오를 거친 선의 흔적들이 남아있다고 합니다. 코딩도 마찬가지의 과정을 거치는 것이고, 그것을 죄악시 할 필요가 없다고 저자는 이야기합니다. 저도 자바 코딩을 할 때 처음에는 전체의 클래스 선언과 비어있는 메소드부터 만들어서 틀을 잡은 다음에 나중에 메서드 안의 내용을 구체적으로 채워넣을 넣는 순서로 진행을 합니다. 그러고보니 그것이 스케치하는 것과 비슷하게도 느껴지더군요.

재미있게도 이외수님의 '글쓰기의 공중부양’이라는 책에도 비슷한 내용이 나옵니다. 여기서 저자는 글을 쓸 때 처음부터 한꺼번에 모든 부분을 구체적으로 쓸려고 하지말고 글 전체의 틀을 구어체로 스케치한 후에 나중에 세부묘사를 채워넣으라고 합니다. 인물화를 그릴 때 처음부터 이목구비의 정밀묘사를 하면서 그려나간다면 나중에 이목구비가 따로 노는 그림이 된다는 비유가 나오더군요. 이렇게 그림,글, 코딩이 다 통하는게 있나봅니다.

전 한때는 코딩 혹은 프로그래밍은 예술이라는 말이 지나치게 순진하다고 느껴졌었기에 밖으로 꺼내기에는 민망하다고 느낀 적도 많았습니다. 개발자 커뮤니티 사이트에 이런 글이 올라간다면 '코딩은 노가다인 걸 아직 모르냐?','고생을 덜해봤냐?' 같은 욕을 바가지로 퍼먹여줄 글이 될 수도 있겠죠 ^^; 하지만 프로그래밍을 하면 할수록 그 것이 진실이라는 생각만 강해지고만 있어요. 위에서 유명한 아저씨들도 다 그렇게 이야기하고 있는 것 보니 위안이 되네요.

인용자료 출처

  • 'KTUG(Korean TeX User Group)의 문학적 프로그래밍에 관한 전반적인 소개' http://faq.ktug.or.kr/faq/LiterateProgramming ACM 강연의 원문, PDF 파일

  • 누워서 읽는 알고리즘, 임백준 ( ACM 강연의 번역내용, '문학적 프로그래밍' 서문 번역내용

Code can be an art 행사 참석 후기

정상혁정상혁

지난 2007/05/19(토)에 CCK(Creative Commons Korea)에서 주최한 ccSalon 행사가 있었습니다 . 이날의 행사 제목은 'Code can be an art’였었죠

관련 글과 같이 올릴려고 하다 보니 거의 2주가 지나서야 후기를 쓰게 되네요.

저는 이 행사를 김국헌님의 블로그에서 알게되어 혼자 행사장을 찾아갔었습니다. 제가 워낙 길치라서 노트북에다 약도를 저장해서 띄워놓고 화면을 계속 보고 갔는데도 힘들게 행사장을 찾아갔습니다. -_- 길에서 걷는 중에 노트북을 펴놓고 화면과 주위를 번갈아 가는 모습을 이상하게 본 사람도 있었을 것 같습니다.^^;

주요 행사 내용 중에 다음과 같은 내용들이 인상깊었었습니다.

DJ성우님의 발표

개발자와 DJ의 공통점으로 '밤늦게 컴퓨터 앞에서 작업하는 일이 많다','이미 있는 것으로부터 새로운 창조물을 만든다' 등을 드신 것이 기억납니다. 그리고 개발자들도 DJ들처럼 공동작업 그룹 같은것을 자발적으로 결성해서 활동하면 어떨까 하는 제안도 신선하게 들렸습니다.

  • 미디어 아티스트 최승준님의 발표

최승준 님의 '입자인생'(http://beingmedia.tistory.com/entry/입자인생Net )이라는 작품은 예술적이면서 철학적인 설명을 해주셔서 심오하게 까지 느껴졌습니다. 그런 것 프로그래밍 할려면 물리학이나 수학도 많이 알아야 될 것 같다고 생각하니 저런 작품들은 여러 분야들의 종합성과물이라는 생각이 들었습니다.

황리건님의 발표

황리건님의 작품 중에는 맨 마지막 것이 가장 기억에 남습니다. 화면에 보이는 선의 한 부분을 클릭하면 거기서 원이 추가 되고 선분은 나누어져서 새로운 움직임을 보여주는 프로그램이였습니다. 이 작품을 꼭 보여주시고 싶어 하시면서, 이 것을 한달동안 힘들게 만드셨다고 말씀하시는데, 창작자로써의 뿌듯함이 느껴지시는 것 같았습니다. 요즘은 고객이 만들라고만 한 프로그램만 만들고 있는 저로서는 부러웠어요 ^^;

코드잼

QB로 만든 Code can be an art 출력 글에서 썼듯이 코드만 짜가고 발표는 못했습니다. 그래도 기획하신 분의 의도, 발표하신 분들의 기분은 알 수 있을 것 같았습니다.

패널토론 8Bit 키드의 생애

80년대 초반 컴퓨터를 처음 시작한 세대들의 추억담이였습니다. 저보다는 앞세대의 분들이였고 사용한 기계와 환경은 달랐지만, 그런 이야기를 하시면서 어떤 기분이 드실지는 왠지 알 것 같았습니다. 아마 제가 '허큘리스’라는 말만 들어도 느껴지는 기분과 비슷하지 않을까요? ^^;

패널토론 예술로서의 코드

타이틀이 맞는지 모르겠군요. 김창준님이 귀여니의 시구를 인용하시던 부분에서 웃지 않을수 없었습니다. 앞의 다른 순서들이 '코드로 만든 결과물인 예술', '만든다는 것의 기쁨’에 초점이 맞춰진 것이라면 이 순서는 '코드 자체로써의 예술’에 중심을 둔 것 같습니다.

모든 순서가 끝난 뒤에 뒤풀이가 있었습니다. 저는 아는 사람도 없고 해서 분위기가 어색하지 않을까 걱정을 했었는데, 저녁 식사 때부터 같은 테이블에 앉았던 자원봉사자 분들이 재밌는 자리를 만들어주셔서 편하게 술자리를 할 수 있었습니다 ^^; 그리고 개인적으로 평소 애독하는 블로그의 주인이신 류한석님, 김국헌님을 가까이서 뵐 수 있어서 영광이였습니다~ ^^ 같은 테이블에 앉았던 대학생 분은 그 두분께 블로그 내용이 인쇄된 종이에다가 사인을 해달라고 부탁하더군요.

보통 저는 술자리에 참석하면 끝까지 남거나 쓰러지거나 둘 중에 하나였었는데, 이날은 아내가 근처까지 데리러 오는 바람에 먼저 일어날수 밖에 없어서 무척 아쉬웠습니다.

다음 모임때부터는 저도 자원봉사자로 참여하겠다고 했는데 빨리 그 때가 왔으면 좋겠네요~