웹디자이너가 존경스럽다.

2009.03.12 11:54 IT·인터넷/블로그

디자인에 대해서는 다른 분이 만들어 놓은 것을 보고 놀라는 재능뿐이라 그분들의 능력이 참 부럽습니다. 가장 부러운 능력은 색깔 감각입니다. 구성이 좋아도 색상이 맞지 않으면 얼마나 촌스럽고 조잡스럽습니까. 두세 가지 색상을 사용하더라도 조화롭고 돋보이게 만들어 내는 그 능력이 참으로 부럽습니다.

거기에다가 참을성도 많아야 할 것 같아요. 이유야 여러 가지겠지만 그중에 웹브라우저 별로 출력을 맞추는 것도 고된 일이 아닐까 싶습니다. 예전부터 그렇겠구나 생각만 했습니다만, 이번에 부탁을 받고 스크롤에 따라 함께 이동하는 레이어를 만들어 보다가 가뜩이나 경험 없는 저로서는 정말 열 많이 받았습니다.

만들어 놓고 보니 몇 줄 될지도 않았습니다. 이 몇 줄 때문에 날린 시간이 너무 아깝지만, 정작 이렇게 시간을 허비하고 지치게 만든 것이 프로그램 코드가 아니라 브라우저에 따라 실행이 되기도 하고 안 되는 경우가 있기 때문입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

웹 디자인 경험이 별로 없는 저로서는 당연히 웹 검색에 의지했습니다. 그리고 얼마 되지 않아서 몇 가지 자바 스크립트 코드를 얻었습니다. 저는 평소에 IE를 사용하기 때문에 당연히 IE에서 테스트해 보았고, 정상적으로 잘 되길레 일이 쉽게 끝나나 보다 했습니다. 싱겁다는 생각마저 하면서 말이죠.

저는 뭐 당연히 다른 브라우저에서도 잘 되겠지 싶었는데, 이런~ 파이어팍스에서는 제대로 실행되지 않네요. IE에서는 잘도 오르내리는 레이어가 파이어팍스에서는 꼼짝도 않더라는 거죠. 그래서 다시 다른 방법을 찾아 보았습니다. 웹 검색을 하면서 느낀 것인데, 웹의 정보도 대부분 Microsoft의 IE와 관련한 정보가 많군요.

그래도 다행히 파이어팍스까지 지원하는 코드를 구했고, 올려진 샘플코드로 테스트해 보니 파이어팍스에서도 잘 되네요. 그래서 자바 스크립트와 레이어 부분을 복사해서 저의 html 파일로 복사했는데, 어랍쇼! 이번에는 파이어팍스뿐만 아니라 IE에서도 안 되네요. 그래서 제 파일 안에 다른 자바 스크립트와 충돌이 되나 싶어서 이것도 지우고 저것도 지워가면서 확인해 보았지만 역시 실행되지 않았습니다. 샘플은 되는데. 그리고 그대로 복사해서 붙여 넣은 것인데, 왜 안 될까? 한참 헤맸습니다.

그러다가, 어쩌다가 샘플의 시작이 <html>이라는 것이 눈에 띄었습니다. 제 파일은,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

이렇게 복잡하게 시작하는데 말이죠. 그래서 이행을 삭제하고 실행해 보았습니다. 이런!! 실행이 잘 되네요. 아~ 4#3G&H*EF5iㅊ00ㅕ48-0숃6ㄱs$%!!! 자바 코드만 눈여겨보았는데, 결론은 무식한 것이 죄였습니다. 이 메타 라인이 웹 표준을 지키기 위해 넣은 코드인데, 이 메타 코드에 따라 같은 문서의 내용이라도 서로 다르게 해석이 된다네요. 이런 기본적인 지식도 없이 웹에서 얻은 샘플에 의지했으니 몸 고생한 것은 당연한 거죠.

그러나, 그렇다고 저 행을 모두 없애기에는 뭔가 찜찜해서 아래와 같이 줄여 보았습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

잘됩니다. IE에서만. --

<html xmlns="http://www.w3.org/1999/xhtml">

그래서 다시 찾은 코드가 <html xmlns="http://www.w3.org/1999/xhtml"> 입니다. 뭔 뜻인지는 정확히는 어려워서 모르겠고, 대충 끄덕끄덕 그렇구나 하고 읽고 넘어 갔습니다. 결국, IE와 파이어팍스, 크롬까지 모두 잘 되는 것을 보고 안심을 했습니다만, 웹 디자인이 디자인 실력만 있다고 해서 되는 것이 아니군요. 디자인뿐만 아니라 학습할 것도 많고 알아야 할 것도 많은 것으로 생각됩니다. 그래서 인터파크나 옥션처럼 화려한 웹 사이트를 보면 더욱 존경스러운데, 어떻게 웹 디자인 쪽은 그마만큼 페이가 높은지 모르겠네요. 고생해서 실력 쌓은 분은 그마만큼 대우를 받으셔야 할 텐데 말이죠. 물론 실력이 출중하신 분 더 말씀 드릴 필요가 없구요.

이 댓글을 비밀 댓글로
    • 종요
    • 2009.03.12 12:33
    전 이런 내용을 잘 모르지만 그래서 사람들이 웹표준을 찾는 거군요. 다양한 워드프로세서에서 완벽하지는 않지만 타 워드프로세서의 파일형식을 지원하는 것처럼 간단한 문제인줄 알았는데 뭐가 많이 복잡해 보이네요. 그리고 소개해 주신 멀티 데스크탑 프로그램(desktops)은 너무 잘 쓰고 있습니다. 저한테 정말 필요한 프로그램입니다. ^^
    • 네, 말씀과 같이 표준의 중요성을 다시금 느꼈습니다.
      다 만들었다고 생각했는데 표준을 지키지 않은 다른 요인으로
      마무리할 일을 다시 풀어 놓는다면 얼마나 한심하겠습니까.
    • 다양한 워드프로세서에서 타 워드프로세서 파일 형식을 지원하는 것이 대부분의 경우에 더 어려울 것 같습니다.

      아무리 브라우저들(특히 IE6)가 웹 표준을 안 지킨다거나 웹 표준을 지키는 경우에도 구현 사항이 달라질 수 있다고 해도 어느 정도 공통점을 갖고 있는 것인데, 워드 프로세서들이 독점적인 파일 포맷을 이용하면 이건 리버스 엔지니어링으로 밖엔 해결할 수 없거든요.

      그렇지만 서로 다른 문제일 수 밖에 없는 이유는, 그것은 워드프로세서가 문서를 읽으려고 노력하는 것이고, 이것은 문서가 여러 웹 브라우저에 읽히려고 노력하는 것이기 때문에 방향도 다르군요.
  1. 티스토리 메인에서 보고 관심있는 분야여서 한번 들어와봤어요 ^^

    예전에는 일반적으로 웹디자이너가 디자인 및 코딩까지도 모두 담당하는 경우가 많았는데
    그때는 웹표준코딩보다는 흔히 말하는 테이블코딩(테이블레이아웃코딩)이었죠-
    요즘은 웹표준이 대두되면서 웹표준을 전문으로 하는 코더로 웹퍼블리셔라는 직업이 있어요
    웹표준 코딩 외에도 다른 웹 관련 스크립트 등도 같이 다룬다죠 ㅎ
    일반 웹코더에 비해 그나마 조금더 대우를 받는다고는 하는데..

    뭐 아무튼, 그냥 아는 얘기가 나와서 한번 떠들고 갑니다 ^^;
    글 잘 읽고 가요- 좋은 하루 되세요 ^^
    • 웹퍼블리셔라는 직업이 있군요. 웹 디자인에 관심있는 분이라면
      도전해 볼만하겠는데요. ^^ 좋은 말씀 감사합니다.
    • seti
    • 2009.03.12 13:28
    네임스페이스를 지정하는 것이여요. 정확히는 html 이 아닌 xhtml 양식으로 작성하겠다는 의미를 포함하고 있습니다.
  2. 아아 이렇게 공감갈 수가...
    • dmasi
    • 2009.03.12 22:09
    웹표준 정말 뭐같죠 -_-.. 몇몇 파워블로거들 이야기만 들으면서 웹표준을 외치는 아해들이 있는데... 정말 짜증남; 중요한건 웹표준이 아니라 '모든 브라우저에게 보이도록 하기 위한 css와 노하우' 뿐인데 말이죠 -_- 정작 웹표준을 지킨 페이지들이 얼마나 밋밋한지 그네들이 잘 모름(호환도 어찌나 안되던지). 더군다나 그 웹표준도 버전별로 얼마나 상이한지... 어제의 표준이 오늘의 비표준이라 '표준도 안지킨 쓰레기 홈페이지' 라면서 악플 달리기 일쑤고... 하루가 다르게 뭐시 어쩌네 하면서 나오는 것들 -_-; 적응도 안되고 힘들기만하다는. 특히 언젠가부터 '텍스트 브라우저' 에서도 모든 컨텐츠가 표기되야 완벽한 홈페이지라면서 떠들기 시작해서 -_-; 대부분의 html 적 시절 테그는 접어야 하는 불상사도 생겼었죠. 쩝...
    걍 편하게 코딩하는게 젤 좋습니다. -_-;
    떠있는 레이어에 대해서 한가지 팁을 드리자면... 거의 모든 브라우저가 공통으로 되는건데 iframe 으로 화면전체를 체워서 보여주고 싶은 페이지를 열고 본페이지는 레이어를 띄우거나 서브 도메인 사이트 들처럼 프레임을 나눈 다음에 height 값이 0인 프레임에 레이어를 넣어놓고 다른 프레임을 전체 화면으로 체워서 보여줄 페이지를 넣으면 실제 화면에선 언제나 레이어가 떠있는것 처럼 나옵니다. 이경우엔 거의 대부분 브라우저에서 다되죠. 스크립트들처럼 시스템 타지도 않구요.
    • 자세한 말씀과 좋은 팁 감사드립니다. 그런데 iframe과 프레임을 사용하는 것은
      꺼리는 부분이 아닌가 싶습니다만.... ^^;
    • neoaeo
    • 2009.03.12 23:15
    그 글쎄 디자이너중엔 파폭이나 크롬에서까지 테스트 하는 분이 얼마나 될지;; (적어도 우리나라에서;;;)
    • 그래도 책임감이 있는 분은 가능한한 유명 브라우저에 대해서는
      확인하시지 않아까요? ^^
    • 제품디자이너입니다...하지만 저도 파폭에서는 테스트 한번 해봅니다.....아직 익숙치 않은 웹환경에 적응할려니 많이 힘들죠. 특히나 제품 베이스로 하다 보니요.
      • aperire
      • 2009.03.13 09:09
      우선 제가 안하가든요; 하는분도 못봤고;
      제가 웹 운영을 하기 때문에 외부에서 새롭게 리뉴얼하면.
      파폭부터 크롬이나 넷스케이프에서 한번씩 돌려봅니다만..
      완벽하게 돌아가는거 별로 보지 못했습니다.
      (심지어 웹표준을 지켰다고 하는것도요;;)
      참고로 국내에서 좀 한다고 하는 업체들에서 만든것들이죠.

      물론 이유야 우리나라 웹환경이 멋지고 이쁜걸 좋아서이기도 하고 우선 클라이언트가 IE만 사용해서 확인하는것도 있고요;
      (크롬이나 폭스에서 깨진다고 딴지걸면 어떻게든 해결하겠지요 모 싫은 그런게 있는지도 모르는경우가 다반사입니다..)

      요즘은 그나마 많이 안깨지면 다행이라고 생각합니다.
    • ㅁㄴㅇㄹ
    • 2009.03.14 05:00
    대한민국 웹의 발전에 일익을 분명 했던 직업군인데, 반면, 그만큼
    가장 대접 못 받고 박봉에 대부분 치질이 있을 정도로 열악한 환경에서
    고된 중노동을 하고 있는 사람들이 웹디자이너분들입니다.
  3. 길석님. 재미있는 프로그램으로 늘 유쾌해집니다.
    저도 이제 티스토리 시작하려합니다. 자주 놀러올께용~
    • 윤서리
    • 2009.04.20 13:33
    전 파폭,오페라,사파리,크롬에서 테스트를 하는데요..
    DTD에 따라 다르게 해석되는 모양을 보고있자면 정말 눈물 날때가 많네요..ㅠ_ㅠ

    지금도 크롬만 빼고 모두 정상적으로 표현이 되서 크롬에 관한 DTD를 검색해 보다가 오게 되었네요..
    으헝..아무튼 글 보고 이렇게 생각해주시는 분도 계시구나 하고..훌쩍 거리고 갑니다.
    • 아우~ 일을 겨우 끝냈다 싶었는데, 다른 브라우저에서 엉뚱하게 출력되면,
      정말 밉습니다.
    • 의외로 생각해주시는 분들 많습니다. ^^;
      저도 초기에 하드코딩 했던 시절에는 많이 애먹었던 기억이 나네요.
      웹디는 아니였지만요.
  4. 장애인과 같은 사회적 약자를 위해서 앞으로는 공공기관에서부터 점점 표준화를 의무규정화해서
    확대할 것이라고 했던 기억이 나네요^^ 어디 사회적 약자만을 위한 표준화이겠습니까? 표준화에
    대한 인식을 높여서 모든 국민이 인터넷을 이용함에 편리함을 누렸으면 좋겠습니다.
    • 네, 표준은 절실합니다. 앞으로 OS에서 바로 실행되는 에플리케이션보다
      웹에서 실행하는 프로그램이 더욱 많아 질 것으로 생각되기 때문에
      표준은 더욱 필요하다고 생각합니다.