어제 있었던 스티브 잡스씨의 MWSF 07 개막연설에서 보여준 iPhone의 데모 영상은, 휴대전화와 iPod 그리고 인터넷 통신 장비의 완벽한 조화로 이루어진 또 하나의 만능 개인 휴대 장비로서 많은 사용자들로부터 열광과 찬사를 받았지만, 이를 지켜본 웹 개발자들에게도 다른 시각의 가능성을 제시해 준 사건이었음이 분명하다.
그것은 지금까지 비교적 작은 크기의 휴대 장치 스크린과 느린 접속 속도에 초점이 맞추어졌던 WAP과 이동 통신용 웹 페이지의 정의를 다시 되돌아 보는 계기가 된 것이었다. 소개 시연에서 보여주었던 iPhone에서 실행되는 Safari의 웹 브라우징은 화면 크기의 제약에서 벗어난 새로운 시도로서, 160 ppi 해상도를 가진 320×480의 고해상도 화면 위에서, 손가락 끝에서 자유자재로 확대되고 축소되는 웹 페이지의 모습은 그야말로 진정한 One Web
의 새로운 가능성을 일깨워준 것이었다.
지금까지의 Mobile Web
개발에 있어서 대세로 여겨져 왔던 CSS2의 handheld media type을 비롯한 여러가지 휴대 장치를 염두에 둔 기술들을 이용해서 독립된 또 하나의 웹 페이지의 필요성이 고려되고 있는 상황이, 기술과 장치의 발전과 더불어 실현된 상상력이 더해지면서 진정한 하나의 웹으로 다가갈 수 있다는 가능성을 보여주었다. 이것이 가져다 줄 미래의 mobile 웹 개발 방향에 미치는 파급 효과는 아직 예측할 수 없으나, 한 가지 변하지 않는 공통적인 필요 충분 조건은 바로 여태까지 강조되어 온 것으로 웹 표준에 맞춘 사이트일 것이다. 여기에 더해, 요즘 주목받고 있는 유연한 배치(elastic layout)도 큰 몫을 담당하리라고 본다.
그나저나, 한국에서의 진정한 Mobile Web
체험은 그야말로 아직 다른 나라 얘기이다. 🙁
웹 사이트 개발 과정 중에서 사이트의 기본 틀(wireframes)을 잡는 과정은 전체 웹 사이트의 구조와 전달 형식을 규정짓는 단계로서, 아마도 사이트의 규모가 커질수록 그 중요성은 더욱 커질 것이다.
기본 틀을 잡는다는 것은, 페이지의 헤딩이나 이동 메뉴, 문서의 꾸림 정보, 사이드바 그리고 어플리케이션 인터페이스와 같은 사이트에 포함될 주요 요소들을 추가/정의하고 위치를 잡는 작업이다.
이렇게 계획 단계에서 기본 틀을 제대로 잡는 것이 중요한 이유로는, 웹 개발 팀원들 간의 의견 교환을 통한 기본 개발 지침과 방향을 마련하게 되면서 나중에 발생할 수 있는 여러가지 변경 사항들에 관한 의견 소통을 원활하게 하고, 또 사이트가 포함하게 될 각 요소 간의 관계들을 일목요연하게 나타내면서 훨씬 수월하고 효과적으로 사이트의 동작과 스타일들을 표현할 수가 있기 때문이다.
그런데, 이러한 중요성에도 불구하고 작업의 특성상 하얀 종이 위에 사이트의 기본 틀을 여러 번 그리고 고치기란 번거로운 작업이 아닐 수 없다. 그래서 이런 수작업을 보다 효과적으로 수행하는데 도움을 받을 수 있는 도구로 다양한 도표 제작 어플리케이션인 OmniGraffle를 사용하게 되면 그 기능을 충분히 대신할 수가 있게 된다.
OmniGraffle이 사이트의 기본 틀을 잡는 과정에서 특히 빛을 발하는 기능들 중에는, stencil이라고 불리는 여러 도표들에서 사용될 수 있는 다양한 모양의 기호 형판들의 모음집이라 할 수 있는데, 기본적으로 제공되는 것들 이외에 사용자들이 stencil을 직접 제작해서 올려놓은 사이트도 있다. 물론, 이 곳의 User Interface 항목에는 사이트의 wireframe들에 사용될 수 있는 다양한 기호들의 stencil들을 내려받을 수가 있어서, 이것들을 불러와서 좀 더 사실적이고 유연한 사이트의 틀을 표현할 수가 있다.
앞의 stencil들을 모아놓은 Graffletopia라는 사이트는 Summer of Rails의 여러 프로젝트들 중의 하나로서, 어쩐지 군더더기 하나 없이 산뜻하게 만들어져 있는 모습이다. 8)
새로 덧붙임: 틀을 잡을 때 특히 강조되는 것으로, 중요한 것에 치중하라는 얘기가 있다.
이 말은, 웹 디자인 과정에서 UI(User Interface) 요소들의 중요도에 따라 접근하면서 디자인을 확장하라는 얘기이다. 먼저, 웹 페이지에서 꼭 필요한 요소들은 무엇인지부터 시작해서, 그 중요도에 따라 적용이 가능한 여러 표현 방법들을 고민하는 것이다.
이러한 과정은 웹 사이트의 틀(wireframe)을 잡는 과정과 함께 동반적으로 이루어지는 작업이며, 틀을 잡는 작업의 보조적 장치로서 Page Description Diagrams이 필요해지는 이유이다.
이것은 곁가지들만 치다 몸통을 베어내는 실수를 막으려는 또 하나의 안전장치로 볼 수도 있다.
CSS 3의 선택자들(selectors) 가운데에는 HTML 요소들이 가지고 있는 특정한 형태의 속성 값에 따라서 선택적으로 모양을 정의해 주는 것이 가능하다.
그래서, CSS 3에 새로 소개된 추가 속성 선택자들 중에서 [att^=val] 형태의 선택자를 이용하면 문서 밖으로의 연결 고리들을 따로 구분해서 꾸며줄 수도 있다. 이렇게 하면, 독자들에게 새로운 창에서 바깥 연결 고리들을 따로 열 수 있게 하는 선택권을 줄 수가 있는 것이다.
실제 사용 예를 보면, 모든 외부 연결 고리들은 http:로 시작하기 때문에, 다음과 같이 정의해 줄 수 있다:
a[href^="http:"] {
background: url(images/externalLink.gif) no-repeat right top;
padding-right: 10px;
}
이렇게 하면, 모든 외부 연결 고리들은 externalLink.gif 그림 파일의 배경을 덤으로 갖게 된다. 물론, 내부 문서들로의 연결할 때 상대적 URLs 대신에 절대적인 주소를 사용한 경우도 있기 때문에, 다음과 같은 정의도 필요하다:
a[href^="http://www.yoursite.com"], a[href^="http://yoursite.com"] {
background-image: none;
padding-right: 0;
}
이 기술은 Mozilla 계열과 Safari 그리고 IE7을 포함한 대부분의 표준을 지원하는 브라우져들에서 적용 가능하만, 그렇지 않은 경우라도 단지 무시만 해버린다.
물론, 전자 우편이나 AIM 주소 등에도 비슷하게 적용해 줄 수가 있음.
Robert씨의 블로그에는 유능한 웹 인터페이스 개발자를 구할 때, 꼭 물어봐야 할 몇 가지 사항들을 적어놓은 글이 올라와 있다.
그 곳에 올려진 질문 항목들을 옮기면 다음과 같다:
- 왜 DOCTYPE이 중요한가?
- Quirks Mode, Almost Standards Mode 그리고 Strict Mode의 차이점은 무엇인가?
- 의미론적(semantic) 코딩이란 무엇이고, 이것이 왜 중요한가?
- 박스 모델(box model)이란 무엇인가?
- hasLayout의 문제를 설명하고 이것에 대한 대처 방법은?
- CSS에 정의되어 있는 한정성(specificity)이란 무엇인가?
- CSS에서의 float들은 어떻게 동작하는가?
- WAI란 무엇인가?
- 만약 글꼴 크기를 픽셀(pixels) 단위로 지정했을 경우, Internet Explorer에서는 어떤 문제가 발생하가?
- Internet Explorer에서는
alt 속성을 어떻게 처리하고 있으며, 결과적으로 어떤 부작용이 발생할 수 있는가?
대부분의 항목에 대한 질문과 해답은 이미 웹 상에서도 많이 논의되었던 것들이지만, Almost Standards Mode의 존재는 처음 알았다.
물론 위에서 던져진 질문들 중에서, Internet Explorer와 관련된 박스 모델과 hasLayout 문제 그리고 alt 속성 처리와 글꼴 크기 관련 문제는 Internet Explorer 7의 발표와 함께 험난했던 과거의 웹 개발 기록으로만 남게 될 듯하지만, 새로운 상황에 대처하기 위한 또 다른 골치거리들이 등장할 터이고, 따라서 의미론적 코딩과 웹 접근성에 관한 고찰 그리고 웹 표준에 대한 이해는 한결 더 중요하게 요구되어 질 것이다.
– 새로 덧붙임: 친절하게도 Robert씨는 자신의 블로그에 썼던 유능한 웹 인터페이스 개발자를 구할 때, 꼭 물어봐야 할 항목들에 대한 해답들을 올려놓았다. JavaScript에 대한 이해와 접근성에 끼칠 수 있는 폐해가 추가 덕목으로 더해졌다.
– 추가 참고의 글들
물론 여기에 소개된 꼼수들은 완전한 세상에 살고 있다면 불필요한 과정이겠지만, 냉험한 현실 속의 웹 브라우저들은 개발자들에게 차별 대우를 요구한다.
IE 7에서는 이제 CSS의 maxHeight 속성을 이해한다는 것을 이용해서, 다음과 같은 JavsScirpt 코드로 구별할 수 있다:
if (typeof document.body.style.maxHeight != "undefined") {
} else {
}
IE 7의 변화에 따른 다음과 같은 더 간단한 방법도 있다:
if (window.XMLHttpRequest) {
} else {
}
물론, 전통적으로 사용되어 왔던 MSDN에 자세하게 소개되어 있는 조건부 주석을 이용한 구별 방법도 유효하다:
... 기타 브라우져들을 위한 코드
덤으로, CSS 속성 이름 앞에 * 혹은 .(점) 그리고 _(밑줄)이 붙어있는 경우에는 브라우져들 마다 제각기 다르게 인식한다는 것을 이용해서 다음과 같은 방법을 사용할 수도 있다. (IE8의 경우 스타일 선언문 마지막에 꼭 “\9″을 붙여주어야 한다.):
#header {
margin: 10px;
margin: 12px\9;
*margin: 15px;
_margin: 20px;
}
* html #someDiv { color: red }
*+html #someDiv { color: red }
– 참고 글