Web 2.0 Conference Korea 발표 B/S

웹 2.0 회사 들이 가지고 있는 대표적 기술 요소들을 한번 정리해 보고자 합니다. 열 가지 모두를 가지고 있어야만 웹 2.0 서비스는 아니지만 대략적인 공통적이라는 것을 알 수 있습니다. 중요한 점은 웹 2.0 회사들이 가진 이들 특징은 기존 웹 서비스가 가기지 못했던 웹 에 대한 기본기였다는 점입니다.


1. 웹 표준(XHTML/CSS)
2 브라우저 지원(Firefox, Safari)
3 유니코드 (UTF-8)
4 논리적 주소체계 (Logical URI)
5 컨텐츠 신디케이션(RSS/Atom, RDF)
6 오픈 API (REST, SOAP, Web Services)
7 집단 지성(Folksnomy, Tag)
8 가벼운 서비스 프레임웍(Python, Ruby on Rails)
9 풍부한 사용자 경험(Ajax, Flex)
10 확장 기능 (Firefox Extensions, Widget)

Web 2.0 컨퍼런스에 대한 기술적인 기반에 대한 발표 Agenda

1. 닷컴 버블 후 기술 기반 성공 사례
– Google, Amazon, Ebay, Bittorent…

2. 웹2.0 기반 기술의 아이디어 및 철학
2.1 사람 중심 시맨틱 웹
2.2 오픈 소스 및 오픈 스탠다드
2.3 지속적인 공개 베타

3. 웹2.0을 이루는 10가지 기술 요소
3.1. 웹 표준(XHTML/CSS)
3.2 브라우저 지원(Firefox, Safari)
3.3 유니코드 (UTF-8)
3.4 논리적 주소체계 (Logical URI)
3.5 컨텐츠 신디케이션(RSS/Atom, RDF)
3.6 오픈 API (REST, SOAP, Web Services)
3.7 집단 지성(Folksnomy, Tag)
3.8 가벼운 서비스 프레임웍(Python, Ruby on Rails)
3.9 풍부한 사용자 경험(Ajax, Flex)
3.10 확장 기능 (Firefox Extensions, Widget)

4. 향후 웹2.0 기술 트렌드
4.1 Ajax 기반 비지니스 응용
4.2 사용자 중심 아이덴티티(Identity)2.0
4.3 개발자 중심 생태계 시스템
4.4 Mashup, 플랫폼 협업
4.5 모바일 웹(MobileWeb) 2.0
4.6 소프트웨어 서비스(Software Service)

덧. 이러한 기반 기술에 대해 이정환 기자님이 정리해 주신 웹 2.0 시대를 여는 10가지 큰 변화에서 정리해 주셨습니다. 잘 정리해 주신 것 같아 보관 차원에서 인용을 했습니다.

1. 웹 표준을 지켜라.
한동안 테이블이냐 CSS냐의 논쟁이 개발자들 사이에 이슈로 떠올랐다. 쉽게 설명하면 테이블은 표, CSS(cascading style sheets)는 스타일 양식이라고 할 수 있다. 만약 2단 구성으로 페이지를 만들고 싶으면 간단히 2단 테이블을 만들어 그 안에 콘텐츠를 집어넣으면 된다. 문제는 이렇게 페이지를 만들어 놓으면 나중에 고치기가 매우 어렵다는 것이다. 2단 구성을 3단 구성으로 바꾸려면 소스를 하나하나 뜯어 고쳐야 한다.

CSS는 콘텐츠와 디자인을 분리하는 방식이다. 별도의 파일로 스타일 양식을 만들어 지정해 두고 그 파일만 고쳐주면 페이지 디자인이 바뀌게 된다. 테이블을 쓰는 것보다 직관적이지는 않지만 전체적으로 디자인 원칙을 잡는데 도움이 된다. 수많은 페이지의 디자인을 하나의 CSS 파일로 관리할 수도 있다는 이야기다. CSS는 월드 와이드 웹 국제 컨소시엄인 W3C가 권장하는 표준 웹 디자인 방식이다.

웹 2.0 시대에는 이처럼 콘텐츠와 디자인의 분리가 더욱 중요하게 됐다. 이를테면 시각 장애인들을 위한 페이지를 따로 만든다고 생각해 보자. 아직도 테이블을 쓰는 많은 개발자들은 페이지를 통째로 다시 짜는 작업을 해야 한다. 하나의 파일 안에 콘텐츠와 디자인을 엉망으로 뒤섞어 놓았기 때문이다. 그러나 CSS를 쓰는 개발자들은 간단히 새로운 CSS 파일을 지정해 주는 것만으로도 전혀 다른 새로운 페이지를 만들 수 있다.

정보를 모아서 보여주기만 하면 됐던 웹 1.0 시대에는 웹 디자인이 중요했다. 이왕이면 더 예쁘게 그리고 더 보기 편하게 보여줘야 했던 것이다. 그런데 웹 2.0 시대에는 보여주는 것만으로는 부족하다. 포장도 포장이지만 무엇을 어떻게 보여주느냐가 더 중요하게 된 것이다. 이제 웹 디자인 못지않게 데이터 디자인이 중요한 시대가 됐다. 정보를 어떻게 가공하고 활용하느냐가 성공의 관건이라는 이야기다.

표준화된 CSS 방식을 도입하면 디자인을 손쉽게 바꾸는 것은 물론이고 필요에 따라 그림 파일을 뺀 텍스트 파일만 불러올 수 있고 휴대전화나 PDA 버전으로 만들 수도 있다. 시각 장애인 전용 페이지도 손쉽게 만들 수 있다. 개발과 유지·보수에 드는 비용과 시간도 크게 줄어든다. 무엇보다도 데이터의 가공과 활용이 훨씬 자유롭게 된다. 콘텐츠와 디자인이 분리될 때 데이터 디자인이 비로소 가능하게 된다는 이야기다.

웹 2.0 시대에는 운영체제나 브라우저, 표시장치에 관계없이 어디에서나 접근 가능한 페이지가 필요하게 된다. 윈도우즈에서나 맥OS에서나 리눅스에서나 또는 인터넷 익스플로러나 파이어폭스, 사파리, 오페라 등등 온갖 브라우저에서, 그리고 컴퓨터 모니터뿐만 아니라 휴대전화의 작은 화면에서도 같은 콘텐츠를 각각 최적화된 디자인으로 볼 수 있어야 한다. 콘텐츠를 가공하고 활용할 새로운 가능성을 열어두는 것이다.

CSS 방식을 도입하면 트래픽도 크게 줄어든다. 마이크로소프트는 2004년 홈페이지를 개편하면서 테이블을 모두 빼고 웹 표준을 적용했다. 메인 페이지를 기준으로 74개의 테이블이 사라졌고 페이지 용량이 40KB에서 15KB로 줄어들었다. 그 결과 하루 924GB, 연간으로 하면 329TB, 무려 CD 46만5천장 분량의 트래픽을 줄일 수 있었다. 우리나라에서도 정보통신부 등 정부기관 홈페이지가 앞장서서 웹 표준 CSS 방식을 도입하는 추세다.

2. 모든 브라우저를 지원하라.
그동안 개발자들은 인터넷 익스플로러에 맞춰서 사이트를 개발해 왔다. 그래서 익스플로러에서는 보이지만 다른 브라우저에서는 보이지 않는 사이트도 많았다. 우리나라의 경우 최근까지 익스플로러의 시장 점유율이 99%에 이를 정도였다. 익스플로러가 아니면 보이지 않기 때문에 다들 익스플로러를 쓰게 되고 다들 익스플로러로 접속하기 때문에 개발자들도 굳이 다른 브라우저를 지원할 필요를 느끼지 못했던 것이다.

그런데 생각해보자. 10만명의 1%는 1천명이지만 1천만명의 1%는 10만명이다. 당신이 개발자라면 이 10만명을 결코 무시해서는 안 된다. 게다가 세계적으로 익스플로러의 시장 점유율은 갈수록 떨어지고 있다. 익스플로러를 버리고 파이어폭스를 쓰는 사용자들이 이미 10%를 넘어섰다. 이 비율은 앞으로 더욱 늘어날 것으로 보인다. 한번쯤 당신의 사이트가 파이어폭스에서 어떻게 보이는지 살펴볼 필요가 있다.

파이어폭스를 쓰는 사용자들은 파이어폭스를 지원하지 않는 사이트에 잘 가지 않게 된다. 주목할 것은 이들이 대부분 웹 2.0 시대의 오피니언 리더라는 사실이다. 이들은 발 빠르게 변화를 따라잡고 유행을 선도하고 이슈를 제기한다. 파이어폭스를 지원하지 않는다는 건 이들을 받아들이지 않겠다는 의미다. 익스플로러의 시장 점유율이 떨어지는 것보다 더 빠른 속도로 당신의 사이트는 사용자들을 잃게 될 수 있다.

핵심은 이제 익스플로러가 유일한 브라우저가 아닐 수도 있다는 것이다. 익스플로러 뿐만 아니라 파이어폭스를 비롯해 모든 브라우저를 받아들이는 최선의 대안은 결국 철저하게 표준을 따르는 것이다.

3. 문자 인코딩을 UTF-8로 바꿔라.

컴퓨터의 이진수를 문자로 바꾸는 과정을 인코딩이라고 하는데 당연히 쓰는 언어에 따라 인코딩 체계가 다 다르다. 우리나라 사이트는 그동안 대부분 EUC-KR이라는 방식을 사용해 왔다. 그런데 문제는 한글이 아닌 다른 언어로 된 운영체제에서는 이 방식의 페이지를 읽지 못한다는 것이다. 이를테면 ‘공기업 민영화’라는 단어는 ISO 방식에서 ‘°ø±â¾÷ ¹Î¿µÈ­’로 보인다. 이런 문제를 해결하는 대안이 바로 유니코드라고 불리는 UTF-8 방식이다.

UTF-8은 한글과 한자를 비롯해 4만자에 이르는 세계 대부분 나라의 언어를 포함하고 있다. 만국 공통의 문자 부호 체계인 셈이다. UTF-8 방식으로 인코딩된 페이지는 세계 어느 나라 어느 언어로 된 운영체제에서도 특별한 설정 없이 우리가 보는 것과 똑같은 페이지를 보여준다. 세계적으로 웹 2.0 시대를 주도하는 사이트들은 이미 UTF-8 인코딩을 적용해 한글뿐만 아니라 세계 모든 나라의 언어를 자유롭게 쓰고 읽을 수 있다.

파일 이름이 한글로 된 페이지가 열리지 않았던 경험이 다들 한번쯤 있을 것이다. 브라우저가 EUC-KR 방식으로 인코딩된 페이지의 주소 읽지 못하기 때문이다. 브라우저의 설정을 바꿔주면 되지만 더 근본적인 대안은 페이지를 처음부터 UTF-8로 만드는 것이다. 사용자들에게 설정을 바꿀 것을 요구하지 말고 누구나 쉽게 불편없이 접근할 수 있도록 표준을 따르는 사이트를 만들라는 것이다. 그게 웹 2.0의 기본 철학이다.

인코딩 문제만 해결된다면 우리나라의 사이트가 세계를 무대로 활동하는 것도 얼마든지 가능하다. 세계 모든 나라를 상대로 활동하는 구글의 경우만 봐도 잘 알 수 있다.

4. 짧고 이해하기 쉬운 주소를 만들어라.
웹 2.0 시대에는 페이지의 주소가 더욱 중요한 의미를 갖는다. 주소는 수많은 페이지들을 서로 연계하고 가치를 부여하는 링크의 기본이기 때문이다. 쉽게 복사해서 붙여 넣을 수 있을 만큼 짧아야 하고 한번 보고 외울 수 있을 만큼 직관적이면 더욱 좋다. 본문의 내용을 예측할 수 있도록 파일 이름에 의미를 담아내는 것도 한 방법이다. 관리자의 입장이 아니라 사용자의 입장에서 생각해야 한다는 이야기다.

관리하기 위한 주소가 아니라 보여지고 복사되고 링크되기 위한 주소라는 발상의 전환이 중요하다. 무엇보다도 사용자들에게 이 주소가 앞으로 영원히 바뀌지 않는다는 확신을 줄 수 있어야 한다.

5. 콘텐츠의 유통 방식을 고민하라.
웹 1.0 시대에 사용자들은 뉴스를 보려면 뉴스 사이트를 직접 찾아가야 했다. 브라우저의 검색창에 주소를 직접 입력하기도 하고 주소를 즐겨찾기에 넣어두고 클릭해서 찾아가기도 했다. 그런데 웹 2.0 시대에는 굳이 뉴스 사이트를 찾아가지 않아도 뉴스를 읽을 수 있는 방법이 많다. 콘텐츠의 유통을 고민하는 개발자라면 RSS를 주목해야 한다. RSS(Really Simple Syndication)는 ‘정말 간단한 발행’의 약자다.

신문을 보려고 신문사까지 찾아갈 필요가 없는 것처럼 이제 뉴스를 보려고 굳이 뉴스 사이트를 찾아갈 필요가 없게 됐다. 뉴스 사이트의 RSS 주소만 알면 실시간으로 최신 뉴스를 확인할 수 있다. 자주 찾아가는 블로그의 RSS 주소를 모두 모아놓고 새로 올라온 글만 찾아 읽을 수도 있다. RSS는 콘텐츠의 발행과 구독이라는 새로운 정보 유통 방식을 만들어 냈다. 이제 시작일 뿐이지만 그 가능성은 무궁무진하다.

이를테면 네이버 뉴스에서는 특정 주제로 검색을 하고 그 검색 결과를 RSS로 만들 수 있다. 이 주소를 RSS 구독기에 집어넣으면 새로운 뉴스가 뜰 때마다 바로 바로 확인할 수 있게 된다. 굳이 뉴스를 찾으러 가지 않아도 찾아와서 알려주는 시대가 된 것이다. RSS 주소를 모아서 링크를 뽑아내 조합하면 전혀 다른 뉴스 사이트를 만들 수도 있다. 이 사이트는 특정 주제의 뉴스만 모아 실시간으로 업데이트하게 된다.

MP3 플레이어 아이포드를 활용한 포드캐스팅도 돋보인다. 포드캐스팅은 아이포드(iPod)와 방송(broadcasting)의 합성어인데 음성 파일을 만들어 주기적으로 업데이트하고 그 목록을 RSS로 제공하는 것을 말한다. 이 주소를 입력해 두면 컴퓨터에 연결할 때마다 자동으로 아이포드에 새로 업데이트된 파일이 저장된다. RSS는 이제 텍스트뿐만 아니라 멀티미디어까지 포괄해 콘텐츠 유통의 광범위한 표준으로 자리 잡고 있다.

6. API를 공개해 사용자들을 끌어들여라.
구글(아마존, 이베이)은 굳이 사용자들을 잡아두려고 하지 않는다. 그냥 잠깐 들러서 놀다 가라는 식이다. 사용자들이 더 쉽고 편리하게 찾아올 수 있도록 구글은 수많은 API를 공개하고 있다. API(Application Programming Interface)는 응용 프로그램 인터페이스의 약자로 이 경우 구글과 다른 사이트가 소통하는 방식을 말한다. 구글의 API를 활용하면 구글의 서비스를 가져다가 아무데나 자유롭게 붙여 쓸 수 있다.

가장 간단하게는 당신의 개인 홈페이지에서 직접 구글의 검색 서비스를 제공할 수도 있다. 당신은 검색 서비스를 공짜로 얻어서 좋고 구글은 사용자가 늘어서 좋다. 좀 더 복잡하게는 구글의 지도 서비스를 가져다가 특정 위치를 클릭하면 그곳의 뉴스가 뜨는 사이트를 만들 수도 있다. 당신이 부동산 정보 사이트를 운영한다면 매매 정보를 지도와 결합해서 고객들에게 보여줄 수도 있다.

구글은 이를 공짜로 내줄 뿐만 아니라 누구나 쉽게 가져다 쓸 수 있도록 API까지 공개하고 있는 것이다. 구글은 사용자들을 붙잡아 두지는 않지만 계속해서 찾아오게 만든다. 그리고 결국 구글에 의존하도록 만든다. 수많은 사용자들이 구글을 활용해 돈을 벌려고 뛰어들고 구글 역시 그 과정에서 새로운 수익모델을 찾는다. 이처럼 API를 조합해 전혀 다른 새로운 서비스를 만들어 내는 걸 매쉬 업(혼합, mash-up)이라고 한다.

PC에서 인텔의 CPU가 차지하는 역할처럼 이 매쉬 업 서비스의 핵심은 결국 데이터다. CPU 없이 PC가 돌아가지 않는 것처럼 이제 구글 없이는 아무것도 할 수 없는 기업들이 늘어나고 있다. 핵심 데이터를 구글이 쥐고 있기 때문이다. 더 많이 개방하고 더 많이 내줄수록 구글의 영향력은 더욱 커진다. 최근에는 구글 뿐만 아니라 야후와 마이크로소프트도 잇달아 API를 공개하고 구글을 견제하기 시작했다.

7. 집단지성을 활용하라.
웹 2.0과 함께 폭소노미라는 말이 유행이다. 폭소노미(Folksonomy)는 굳이 풀어쓰면 대중(fork)의 분류(nomos) 법칙(order)이라는 뜻이다. 플리커나 딜리셔스에서 쓰는 태그가 대표적인 폭소노미의 사례다. 사용자들이 사진을 올리고 직접 태그를 붙여두면 사진 검색이 훨씬 편리하고 정확해진다. 딜리셔스의 경우 수많은 태그를 모으면 넘쳐나는 정보들 가운데 우선순위를 가리는데 큰 도움이 된다. 이게 바로 집단지성의 힘이다.

폭소노미 역시 이제 시작 단계다. 태그를 수평적으로 늘어놓을 게 아니라 넘쳐나는 태그들 사이의 계층 관계를 잡을 필요도 있고 숨은 문맥을 읽어낼 필요도 있다. 게다가 아직도 대부분의 사용자들은 태그를 귀찮아한다. 폭소노미의 관건은 어떻게 사용자들을 불러모으고 적극적인 참여를 끌어낼 것이냐다. 사용자들이 직접 태그를 붙이도록 만드는 게 가장 확실하겠지만 결코 쉬운 일은 아니다.

집단지성의 더 명확한 사례는 구글의 페이지 랭크라고 볼 수 있다. 백악관 홈페이지에는 ‘백악관’이라는 한글 단어가 전혀 없지만 구글에서 ‘백악관’이라고 치면 바로 이곳으로 올 수 있다. 수많은 사용자들의 자발적인 링크가 이곳을 가리키고 있기 때문이다. 구글은 가장 많은 링크가 가리키는 곳을 우선순위로 올려놓는다. 아마존의 서평이나 이베이의 평판 시스템도 집단지성이 새로운 가치를 만들어내는 좋은 사례다.

집단지성을 논의할 때는 시맨틱 웹이라는 개념을 빼놓을 수 없다. 시맨틱(semantic) 웹은 의미를 살린 웹이라는 뜻인데 다른 말로 하면 좀 더 인간 중심의 웹, 또는 사람을 더 잘 이해하는 웹이라고 할 수 있다. 이를테면 태그에서 집단지성을 읽는 게 아니라 텍스트의 행간을 직접 읽고 핵심을 짚어낼 수 있어야 한다는 것이다. 시맨틱 웹은 그래서 기계가 더 잘 이해할 수 있도록 콘텐츠를 표준화·구조화해야 해야 한다는 의미도 된다.

8. 가벼운 플랫폼을 써라.
개발자들 사이에서는 몇 년 전부터 PHP를 비롯해 파이썬이나 펄 같은 스크립트 언어가 부쩍 인기다. 자바나 C, C++, 비주얼 베이직 같은 전통적인 프로그래밍 언어보다 배우기도 쉽고 개발과 유지·보수도 훨씬 간단하기 때문이다. 굳이 닭 잡는데 소 잡는 칼을 꺼낼 필요가 없기 때문이기도 하다. 리눅스와 아파치, MySQL 등 공개 소프트웨어를 조합한 LAMP나 루비 온 레일즈 같은 개발 플랫폼은 기존의 자바나 닷넷 프레임을 위협하는 지경까지 왔다.

이들 공개 개발 플랫폼의 장점은 무엇보다도 가볍고 빠른데다 라이브러리가 많고 꾸준히 업데이트되고 있다는 것이다. 과거와 달리 기능도 크게 개선됐다. 웹 2.0 시대에 들어서면서 서버·클라이언트 환경 보다는 인터넷 기반 개발 환경이 더욱 중요하게 된 것도 가벼운 개발 플랫폼이 주목받는 이유다.

9. Ajax, 더 많은 기능을 제공하라.

지난해 6월 다음 커뮤니케이션의 메일 주소록에는 작은 변화가 있었다. 전에는 한 사람의 주소를 입력하면 엔터 키를 누르고 페이지가 바뀌고 난 다음에야 다시 새로운 사람의 주소를 입력할 수 있었다. 그런데 지금은 엔터 키를 누르면 새로운 목록이 추가될 뿐 페이지는 바뀌지 않는다. 그 자리에서 바로 주소를 계속 입력할 수 있다. AJAX의 수많은 응용 사례 가운데 하나다.

AJAX는 비동기식 자바 스크립트와 XML의 합성어로 ‘에이잭스’라고 읽는다. 구글의 지도 서비스나 검색 사이트의 추천 검색어 서비스 등이 AJAX의 대표적인 사례다. 다음의 메일 주소록의 경우 처음 이 페이지를 열면 브라우저가 해야 할 명령까지 미리 따라 온다. 그래서 주소를 입력하고 엔터 키를 누르면 굳이 서버에 묻지 않고도 바로 새로운 목록을 추가할 수 있는 것이다. 페이지를 다시 열지 않고도 서버와 데이터를 주고받을 수 있다는 이야기다.

구글의 개인화 서비스는 더욱 놀랍다. 마우스로 끌어다 옮기는 것만으로도 메뉴 구성을 마음먹은 대로 바꿀 수 있다. 아무런 프로그램도 따로 설치할 필요 없고 바꾼 결과는 그대로 저장된다. 보이는 대로 적용되는 이른바 위지위그(WYSIWYG) 방식이 웹에도 도입되기 시작한 것이다. 과거 엑티브 엑스나 플래시로 구현했던 기능들을 머지않아 AJAX가 모두 대체할 것으로 보인다.

특별히 새롭거나 복잡한 기능은 아니지만 AJAX의 핵심은 사용자들에게 더 편리하고 직관적인 서비스를 제공한다는 것이다. 사용자들은 기다리는 시간이 줄어들고 대신 브라우저가 더 많은 일을 맡게 된다. 이런 간단한 기능뿐만 아니라 엑셀이나 워드 같은 복잡한 소프트웨어도 웹으로 옮겨가는 추세다. 프로그램을 설치하지 않고도 마이크로소프트 오피스와 거의 비슷한 기능을 이용할 수 있는 씽크프리 같은 사이트도 있다.

10. 브라우저의 한계를 넘어서라.
마이크로소프트는 아예 라이브닷컴을 통해 소프트웨어 서비스를 계획하고 있다. 웹에서 오피스 등의 소프트웨어를 쓸 수 있게 만든다는 것이다. 이제 소프트웨어의 판매가 아니라 서비스로 개념이 바뀌는 것이다. 심지어 이제는 인터넷만 연결돼 있다면 윈도우즈가 없어도 지금까지 해왔던 모든 걸 할 수 있게 될 거라는 전망도 나온다. 웹과 어플리케이션의 결합을 일컬어 웨블리케이션(weblication)이라고 한다.

마이크로소프트는 윈도우즈의 차기 버전 비스타에서 아예 검색 기능을 운영체제에 통합시킬 계획이다. 한편 야후를 비롯한 포털 사이트들이 내놓고 있는 위젯 서비스를 보면 바탕화면에 검색 창이나 날씨 정보를 띄우는 등 브라우저의 한계를 벗어난 새로운 실험을 모색하고 있다. 서로의 영역을 침범하고 있는 셈이다. 바야흐로 웨블리케이션 시대, 마이크로소프트와 구글 또는 야후의 한판 맞대결도 중요한 관심거리다. 여기에 새로운 기회가 있다.

여러분의 생각

의견 쓰기

이름* 이메일* 홈페이지(선택)