태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

21세기 웹디자인의 변화

분류: Design News/Design Column 작성일: 2014.01.03 07:40 Editor: 마루[maru]

인터넷에 올라온 첫 번째 사이트는 오늘날과 완전히 다른 모양이었고, 디자이너들은 지금도 인터넷과 상호작용하는 새롭고 멋진 방법을 선보이고 있다. 빠르게 변하는 디자인의 최신 동향을 무작정 따라잡기에 앞서, 인터넷 탄생과 함께 시작하는 21세기 디자인의 진화를 살펴보자.


아르파네트(ARPANET)ARPANET(Poster 출처-zazzle.com)


인터넷의 기원은 1969년 미국 국방성 지원으로 미국 네 개의 대학을 연결하기 위한 ‘아르파네트(ARPANET)’다. 처음엔 군사적 목적으로 구축했지만, 프로토콜로 TCP/IP를 채택하면서 일반인을 위한 아르파네트와 군용 ‘밀넷(MILNET)’으로 분리돼 현재의 인터넷 환경 기반을 갖춘다. 1982년에는 인터넷 프로토콜 스위트를 만들고, 사람들에게 인터넷을 통해 일반적인 지침을 제공하는 방법이나 데이터를 수신, 전송하는 패키지로 표준화했다. 1990년대 중반 팀 버너스 리가 최초의 브라우저를 발표한 이후 인터넷은 진화를 계속했고, 디자인이라는 하나의 산업영역을 가져다줬다.


팀 버너스 리팀 버너스 리(Tim Berners-Lee)


1990년대 초반은 인터넷 탄생 초기여서 사이트 대부분은 HTML 1세대인 텍스트 기반으로 엄격한 편이었다. 에서 단순한 텍스트 페이지를 보는 게 전부였지만, 빠르게 단순한 이미지를 통합하거나 변경할 수 있었다. 화려하진 않아도 기본 텍스트 기능을 갖춘 간단한 사이트는 사람들에게 이전에 접하지 못했던 경험을 제공했다. 


History of HTMLHistory of HTML


90년대 중반까지는 텍스트가 사이트를 주도하지만, 디자이너가 몇 가지 텍스트 효과를 추가하기 시작했다. 디자이너는 화면에 걸쳐 텍스트가 이동하는 롤을 만들고 텍스트 요소를 더 눈에 띄도록 만드는 플래시 효과를 좋아했다. 컬러 텍스트 및 스크롤 막대를 사이트에 참조하고, 많은 사이트가 방문자 수 또는 사이트 시작 날짜를 등을 보여주는 카운터를 화면 하단에 표시하기도 했다.


모두가 인터넷을 할 수 있던 90년대 후반은 사이트를 갖는 것 자체가 기업의 중요한 일이었다. 1사 1홈이 하나의 신드롬이었고, 개인이나 기업을 돋보이게 했다. 90년대 후반에도 여전히 아주 기본적인 기능을 유지했지만, 클릭하면 사이트에서 음악이 재생됐고 텍스트 색상을 변경할 수 있었다. 중앙의 텍스트와 다양한 색상을 특징으로 한 것이 90년대 후반 사이트의 모습이다. 


엔젤파이어(Angelfire)엔젤파이어(Angelfire)지오시티(Geocities)지오시티(Geocities)


특히, 90년대 중반에서 후반에 이르러 사이트에 테이블 기반 디자인이 적용됐고, 최초의 온라인 페이지 빌더가 등장한다. 테이블 텍스트를 단순히 라인화하지 않은 다이나믹한 레이아웃을 허용해 다중 컬럼 및 섹션을 적용한 사이트가 가능해졌다. ‘엔젤파이어(Angelfire)’ 및 ‘지오시티(Geocities)’ 같은 온라인 페이지 빌더는 크게 주목받으며 명성을 얻었다. 이는 사람들이 인터넷과 더 많이 상호작용하고 ‘월드 와이드 (www)’에 참여하는 것을 허용했다.



2000년을 돌아보면, ‘CSS(Cascading Style Sheets)’의 높아진 인기를 논하지 않을 수 없다. 코드로 배경색, 텍스트 크기 및 스타일 같은 사이트의 다양한 기능을 변경할 수 있으니 디자이너는 더 이상 모든 단일 페이지를 작성할 필요가 없었다. 대신 그들은 사이트의 각 페이지가 실질적으로 보유할 코드를 작성했다. 2000년대 중순에서 후반까지 가장 눈에 띄는 디자인 요소는 ‘자바스크립트(JavaScript)’다. 물론 자바스크립트는 90년대 중반부터 있었지만 2000년대 중반까지 크게 주목받지는 못했다. 사이트는 자바스크립트 활용으로 드롭다운 메뉴, 확장된 고급 내비게이션 페이지 및 양식을 구현할 수 있었다. 시맨틱 의 움직임과 XML 코딩도 등장한다.


Egopop.netEgopop.net


Digitalhands.netDigitalhands.net


현재의 디자인은 1990년대 이후 확실히 많이 바뀌었다. 반응형 디자인, 패럴렉스와 플랫 디자인 등과 같은 2013년 최신 디자인 트렌드를 마주하고 있지만, 다음 세대에는 디자인이 또 어떤 진화를 거듭할 것인지 설렘을 갖고 기다려 보자.


※ 이 글은 월간 (web) 2013년 12월호 [월별 특집 & 기획] 칼럼 기고글입니다.


저작자 표시 비영리 변경 금지
신고
※글에 대한 여러분 의견을 남겨 주십시오. 감사합니다!
  1. Favicon of http://chunchu.tistory.com BlogIcon 천추 2014.01.03 16:02 신고  댓글주소  수정/삭제  댓글 남기기

    반응형 웹 그까이꺼 텍스트 넣고 센터 정렬 이면 끝이던 시절이 있었습니다.

    웹 표준의 주창자들은 아이콘 하나도 무거워서 쓰지 않던 시절의 사람들이지요!!!
    저도 HTML 초창기에는 로고도 단순하게 "daWnmart"에 텍스트 값에 특성값 넣고 쓰던 시절도 있었는데....

    잘읽고 갑니다.


우드스