안녕하세요 반갑습니다.
한국은 처음 왔습니다. 잘 부탁드립니다.
저는 swwwitch라는 제작회사를 하고 있습니다. 지금 저것은 저희회사 로고입니다만 저희 회사 로고중간의 www는 World Wide Web을 표현하고 있습니다. 일본에서는 w가 'ㅋ' 이고 웃다는 뜻을 갖고 있습니다 그래서 www는 'ㅋㅋㅋ' 가 됩니다. 감사합니다
드림위버나 일러스트 같은 책도 쓰고 있구요
그래서 CSS Nite같은 행사를 하고 있습니다. 집에서는 저런식으로 하하하
오늘은 일본의 웹표준 역사에 대해 말하려고 합니다.
먼저 2002년 10월에 WIRED라는 미국의 한 잡지사가 CSS 레이아웃을 적용했습니다. 이 당시에 저희는 너무 빨리 나온게 아닌가 하고 깜짝 놀랐습니다. 2002년 11월 일본에 웹디자인이라는 잡지가 있는데 CSS로 디자인하는 웹사이트라는 내용을 오후지 미키시가 특집 기사로 쓰셨습니다.
혹시 오후지 미키씨를 아시는분 계신가요? 오후지 미키씨는 한국에서 HTML사전도 만드시고... 아마 보시면 아실겁니다.
2003년 미국에서는 Jeffrey Zeldman이 Designing with Web Standard라는 책을 집필했습니다. 저는 이 책을 일본해서 구하지 못해서 미국의 아마존에서 주문했던 기억이 있습니다.
여러 분도 잘 알고계시겠지만 2003년 5월에는 CSS Zen Garden 이라는 실험들이 행해졌습니다. 모르시는 분들을 위해서 설명을 드리자면 HTML은 고정되어 있고 CSS만으로 레이아웃을 바꿔나가는 사이트입니다.
여기 사이트 있으니 보시지 않은 분들은 한번 봐주시기 바랍니다. 아까 책들의 일본어 버전이 나오고 있습니다 일본에서도 많이 팔렸던 책입니다. 그러다가 일본의 미츠에 링크스라는 유명한 회사에서 웹표준 블로그라는 형식으로 웹표준 기사를 쓰기 시작했습니다. 오늘 또 발표해주실 웹표준 교과서가 굉장히 많이 팔렸습니다. 웹을 하시는 분들이라면 한권쯤 갖고 계실 책입니다.
2005년 10월에는 지금 이 CSS Nite라는 행사를 하게 되었습니다. 2006년 7월에 웹표준의 날 이벤트로 200명 행사를 했는데 한국돈으로 20만원 정도를 내고 참가해야 했습니다. 그래서 이렇게 여러곳에서 Show Case가 생겨 CSS를 적용한 사이트들이 왕성한 활동을 하고 있습니다. 웹표준에 대한 레이아웃에 대해 서적, 세미나, 잡지, 사이트 사례, 쇼케이스, 커뮤니티 같은 것이 웹표준을 위해 필요한게 아닌가 생각합니다.
이런식으로 에코시스템에 이런 것이 필요하지 않을까 생각합니다. 조금 관점을 바꿔 제작자의 입장에서 보면 2006년 중반부터 많은 사람들이 CSS 레이아웃을 습득하기 시작했습니다. 그래서 처음에는 HTML에 모두 집어 넣었던 것들을 구조화하고 분리하는 작업이 시작되었습니다.
2007년 이후부터.. 약 2년전 입니다만 신규 안건이나 리뉴얼 안건에서 CSS 레이아웃을 사용하는 것이 당연한 것으로 인식되기 시작했습니다. 그래서 2008년부터는 CSS관련 여러 테크닉 - 예를 들어 둥근 모서리를 만든다거나 - 들이 고정되면서 틀이 서서히 갖추어 졌습니다.
쇼케이스 등에서 어떤것들을 보고싶다거나 할때 파이어 폭스의 파이어버그를 설치하여 사용하는 것으로 알고 있습니다. 저도 이것을 사용하고 있습니다.
현재 현황에 대해 이야기 하자면 두가지가 있습니다. 처음에 W3C 권고 사항, 즉 정확성에 초점을 두었다면 이젠 점점 융통성 있는 워크플로우가 중시되었습니다. 2009년 현재 상황에 이르러서는 웹표준 이슈는 이제는 당연한 것으로 인식하고 있습니다.
혹시 질문있으십니까?
CSS 전파에 도움되는 것들은 세가지가 있습니다
첫째는 블로그의 대두가 있습니다. 이것은 같은 HTML소스를 가지고 CSS로 여러 레이아웃을 나타낼 수 있습니다.
두번째는 SEO(검색엔진의 최적화)효과를 들수 있는데요. 전에 검색엔진에서 블로그 사이트가 상위에 표시되던 시기가 있었는데 이것이 문서의 구조화가 잘 되어있기 때문인데 이것이 구조화의 중요성을 인지시켰습니다.
세번째는 웹 접근성에 대한것인데요. 일본에서는 2004년 6월 부터 JISx8341-3이라는 것이 있는데 이것이 일본어로 야사시라는 뜻으로 발음되는데요
야사시 다들 아시죠? 음... 좀 쉽다, 친절하다 라는 뜻으로 사용되는데 JIS야사시 라고 읽는다고 합니다. 그런 것이 국가적 차원에서 웹표준 권고안으로 적용되었습니다. 의무는 아니지만 권고사한으로 이것이 CSS 발달에 도움이 되었습니다. 내년에 개정판이 나온다고 합니다.
구현과 도구
이런 것들을 구현하는 것을 복습하는겸 해서 한번 훑어보도록 하겠습니다. 일단 첫째로 핸드코딩, 혹은 하드코딩이라고 불리는 것과 두번째로 저작도구를 이용하는 방법이 있겠습니다.
먼저 핸드코딩을 한다는 것은 OS기반의 텍스트 에디터를 사용하거나 고기능 텍스트 에디터를 사용하는 것을 말합니다. 저작도구 사용에는 많이 쓰고 있는 드림위버, MS에서 밀고 있는 익스프레션웹, 그리고 일본에는 IBM 홈페이지 빌더 라는 것이 있습니다.
텍스트 에디터의 특징은 무료나 저렴한 가격을 들 수 있습니다. 드림위버의 경우는 10년의 역사를 가지고 있고 점점 발전하여 많은 기능을 포함하게 되었습니다. 맥과 윈도우에서 모두 쓸 수 있구요. 일러스트레이터나 포토샵 같은 어도비 계열사로 호환이 가능합니다.
익스프레션 웹은 2007년 2월 부터 판매되기 시작해서 최신버전인 3버전까지 있습니다. 간간히 하는 농담중에 MS의 Ver 3 전략을 혹시 알고 계십니까? 익스플로러도 그렇구요 익스프레션 웹도 그렇구요. Ver 3 까지는 일부러 조금 이상하게 만들어내서 모두 방심하고 있는 틈을 타 Ver 4에서 부터 완전 발전된 형태로 나오는 특징이 있습니다. 그래서 Ver 4는 아마 굉장한 것이 나오지 않을까 기대합니다
아까같은 슈퍼프리뷰같은 것도 굉장히 좋다고 생각합니다. 이것이 Ver 2의 화면입니다. 일단 아까 보셨던 Ver3와는 레이아웃이 많이 다른데요 이것은 비쥬얼 스튜디오와 레이아웃이 비슷하여 개발자들이 한때 선호하는 경향이 있었습니다.
IBM 홈페이지 빌더의 경우 프로들은 전혀 사용하고 있지 않습니다. 뭐랄까 소스가 지저분해 지는 경향이 있기 때문입니다. 그래서 거의 쓰지않습니다. 엉터리가 많답니다. 학교나 관공서등에서는 싸다는 이유로 많이 사용하고 있습니다. IBM이기 때문에 괜찮지 않을까 생각하는 사람도 있을것 같습니다.
일본 웹디자이너들은 매일 빨리 없어져 버려라 하고 생각합니다. 하하. 이렇게 4가지, 단순함과 고기능성, 가볍거나 무겁거나로 나누어 배치해 보려고 합니다.
가볍고 단순한 것은 텍스트 에디터 쪽이고 고기능이 될수록 점점 무거워 질것입니다. 여기서 짚고 넘어가야 할점은 HTML이나 CSS나 JS나 결국 텍스트 에디터만 있어도 모두 쓸 수 있다는 것입니다. 그러면 우리는 왜 드림위버나 익스프레션 웹 등을 사용해야 하는가에 대해 살펴보겠습니다.
웹사이트라는 것은 한페이지로 모두 해결되는 것이 아닙니다. 파일명의 변경이나 디렉토리 갱신 등 수정의 경우 링크 등이 깨지게 되는데 이런 저작도구들은 자동으로 그런 수정을 도와줍니다. 템플릿이나 라이브러리를 사용하여 웹페이지들을 만들게 될때 재활용 할수 있는 그런 것들을 제공할 수 있습니다.
두번째로 코딩자체에 대한 기능인데요. 코딩 속도를 높여주거나 포맷을 지원해서 분산기능 같은것을 지원해주기도 하구요. 소스코드의 벨리데이션 체크를 도와주거나 합니다. 드림위버의 코딩데모를 잠시 보여드리려고 하는데요.
드림위버는 코드뷰와 디자인뷰가 있는데요 이쪽이 지금 디자인 뷰 입니다. 먼저 코드뷰에서 해보려고 합니다. 태그를 시작하고 나서 닫으려고 할때 <를 누르고 슬래시 키를 누르면 자동으로 완성됩니다. 그래서 태그안에 스페이스를 누르면 팝업이 나오게 되고 아이디누르면 코드가 자동으로 완성됩니다. 그래서 일본에서도 코드뷰를 사용하시는 분이 많은데 드림위버의 특징이라면 디자인뷰에 있다고 생각합니다.
이제 디자인뷰에 대해서 잠깐 살펴보도록 하겠습니다. 신규로 새로운 파일을 만들어 보겠습니다. 일단 문자를 입력하고 선택해서 머리글 ()태그를 선택하면 이런식으로 H1 태그가 자동으로 들어가게 됩니다.조금 이상하긴 하지만 넘어가주시기 바랍니다. 현재 한글판을 사용하고 있는데요 원래 저런것들은 설정이 가능하답니다. 오늘은 자잘한 부분은 넘어가주셨으면 합니다. 그래서 이렇게 메뉴를 이용할수도 있지만 Ctrl + 1 이라는 단축키를 이용할수도 있습니다. 아까 그파일을 넣고 방금 파일을 복사해 넣겠습니다. 아까 파일에 보면 공백행이 있는것이 있고 없는 것이 있습니다. 코드뷰에서 보면
태그로 싸여 있습니다. 공백이 없었던 부분에서는
로 처리되어 있습니다. 이쪽에서 제가 하고 싶었던 것은 이것을 리스트로 만들려고 합니다. 그래서 이부분을 선택하고 프로퍼티 창에서 이 아이콘을 선택하면 UL과 LI 태그로 자동적용 됩니다. 아무리 굉장한 하드코더일 지라도 이것이 훨씬 빠르다고 생각합니다. 이런식으로 선택을 해서 링크쪽을 누르게 되면 각각 다른 링크를 걸수 있습니다. 예를 들어 이부분은
태그로 되어있는데 이것을
태그로 바꿔 보려 합니다. 혹시라도 의 스펠링을 잊어버리는 경우가 있을수 있습니다. 디자인뷰에서 아까 부분에 커서를 놓아두고 Ctrl+T를 누릅니다. 한번 더 누릅니다. 이러면 태그가 나오게 되는데요 여기서 p를 지우고 ad를 누른 후
를 선택하고 엔터를 누르면 적용됩니다. 보시면 정확이 로 감싸져 있는것을 알 수 있습니다. 그래서 이런식으로 하게되면 디자인 뷰에서도 빠르게 작업할 수 있습니다. 기존에 사용하시는 분들이나 이 기능을 쓰지 않으신 분들은 이러한 방법을 한번 사용해 보시는것도 좋을것 같습니다.
이것 외에도 익스프레션 웹에도 많은 기능이 있을텐데요 단순히 코드만 입력할 것이 아니라 이런 기능을 이용하는 것도 좋을것 같습니다. 일단 이번엔 CSS 이야기를 할것인데요. CSS 같은 경우 회사마다 코드 포맷등을 명시해 둘것이라 생각합니다. 환경설정에서 CSS 버튼이 있는데요 밑에 보면 샘플이 나오게 됩니다. 여기 보시면 들여쓰기여부에 대해서도 설정할 수 있습니다. 그래서 지금 탭으로 되어있는걸 Space로 비교를 하게 되면 이렇게 됩니다. 이러한 설정을 바꿈으로 해서 자기스타일의 코드로 바꿀 수 있습니다. 이렇게 띄어쓰기 없는 상태로 넘어가도록 하겠습니다. 아 잠시만요. 이런식으로 한번에 변화시킬 수 있습니다. 자기 스타일로 한 것을 회사내에서 작업할 때 팀작업에도 많은 도움이 됩니다. 이렇게 코드 뷰 아니라 디자인뷰에서도 많은것을 할 수 있다는 것에대해 설명드렸습니다.
코딩 품질에 대해서
CSS의 문법에 대한것은 밸리데이터로 검사할 수 있는데요. 화면에 보이는것은 W3C 벨리데이터 화면이구요 드림위버에서도 자체적으로 검사할 수 있습니다. 보통 문법적인 오류를 체크하는것이 필요한 요소라고 생각합니다. 최근에는 표시속도를 개선한다고 하는 트렌트가 나타나기 시작했습니다. 그 요인중 하나로 문법적 오류가 없는 쪽이 빠르다고 하고 있습니다.
이것이 최근 소개되고 있는 High Performance Web Sites 라는 책입니다. 구글의 경우 500ms가 늦어질 경우 20%가 검색이 되지 않습니다. 아마존의 경우 100ms 늦어질 경우 1%정도의 손실이 있습니다. 아마존의 1%는 굉장한 수치 입니다. 그래서 이런 부분에 대해 관심있으신 분은 이 책을 한 번 보시는게 좋을것 같습니다.
코딩규칙을 기본으로 규칙화 하는 것이 보호하기 쉬운 환경이라고 생각합니다. 예를 들면 작년 인터뷰에도 말했던 것인데 코드에 띄워쓰기를 지키려고 규약을 만들었는데 이것이 회사들끼리 다르다 보니까 오히려 섞이고 어긋나거나 따로노는 경향이 생겨서 요즘은 그런것 없이 하고 있습니다. 그래서 코딩을 할때는 띄워쓰기를 하는 것이 편하기도 하지만 띄워쓰기가 없는 것이 파일도 작아지고 네.. 그렇습니다.
이제 말씀 드릴 것은 웹표준이 돈이 되는가 하는 내용입니다.
웹표준이라는 것은 일본에서 그저 트렌트 같은 것으로 이슈가 되었는데 지금은 당연한 것으로 인식되고 있습니다. 아까도 SEO 효과 같은 것을 이야기 했는데 그것에 모든 곳에 적용이 되면 차별성 같은게 떨어지는 것이죠. 그래서 일단 이후 예상되는 것이 노하우가 보급될 것이고, 이렇게 되면 누구나 일정 이상의 품질을 같게 될 것입니다. 그렇게 되면 상대적으로 부가가치의 하락하게 되고 페이지당 가격이 떨어질 것입니다. 또 그렇게 되면 임금이 싼 국가를 활용하게 될 것이고 일본 국내의 업무의 양과 가격이 하락될 것입니다.
일본같은 경우에는 여기엔 안나와있지만 아까 발표한 후루쇼 타카시님이 발표하신 CMS같은 것이 최근 1~2년 사이 활발이 유행하고 있다고 합니다. 그래서 그런 결과로 이제 제작 비용을 내기가 힘들어지고 있습니다. 기업쪽이나 클라이언트 쪽에서는 신사같은 요구를 하게 되겠지만 갱신을 자유자재로 할수있는 환경으로서의 CMS가 결국에는 우리의 목을 조르는 현상을 가져오게 되었습니다.
그런 서글픈 뉴스뿐 아니라 앞으로 이들은 이제 어디에 부가가치를 둘것인가 하는것이 진행해야 할것인가 하는 이야기를 하겠습니다.
여러분 이책 혹시 아시는분 계신가요? AJax를 하시는 Jesse James Garret 라는 분이 쓴 책입니다. 그 책 안에 이러한 화면이 나오는데요 PDF파일에서 다운로드 받을수 있습니다. 복잡하게 보이는데 정리하면 이렇습니다. 웹표준이나 코딩을 한다는 것은 이런 접합면 Surface 부분 같습니다. 그다음 이제 어디에 무엇을 넣을것인가 그런것.. 이제 어떤식으로 컨텐츠를 안에 배치할 것인가.. 여기까지가 일본 웹디자이너가 관리했던 부분이구요. 하지만 그 밑에 비전이나 전략들을 가지고 생각하지 않으면 앞으로 비지니스 적으로 성공하지 못 할 것입니다. 그래서 코딩 보다는 컨텐츠, 컨텍스트가 더 중요해 질 것입니다. 유저들이 사이트에 방문해서 어떤마음으로 오고 어떤 컨텐츠를 사용하고 하는 앞뒤 요소를 생각하는 것이 코딩상 더 중요해 질 것입니다.
그래서 사이트 이용자에게 유익하고 쓰기 편한 것을 제공하고, 부가가치를 높여 사이트의 가치를 높이는 것이 궁극적으로도 단가에도 경쟁력 있으니까 일본에서도 이런것을 높이는 것에 대한 생각이 점점 커지고 있습니다. 이런식으로 앞으로 나오게될 HTML5나 CSS3등 새로운 동향을 체크하면서 오늘은 이것으로 마치겠습니다 감사합니다.
감사합니다.
질문 타임
바이트수를 줄이기위해 인덴트를 줄이는게 좋다고 하셨는데 그럼 인덴트를 쓰지 않는것이 좋은지...?
아까 인덴트를 줄이는게 좋다고 말했던 이유는 두가진데요
첫째는 방금 말하셨던 것처럼 바이트를 줄이는 것이지만
그것보다 중요한것은 통일성을 얘기 하는거거든요.
기업간에 교류를 할때 인덴트를 각자의 방식으로 사용하면 섞이게 되잖아요
그래서 그럴바에는 차라리 없애서 통일을 하자는 의미였고
바이트 줄임으로 인한것은 크게 영향력이 없다고 합니다.
사람이 인식하는 수준은 아닌것 같습니다.
그러나 대기업에서는 그런것도 신경쓰고 있습니다.
그래서 인덴트를 줄이는데 신경쓰는것 보다 이미지를 줄이는데 신경쓰는것이 좋은것 같습니다.