국내 웹 디자인 변천사 - 디자인 표현기법과 기술적 변화를 중심으로 -

History of Domestic Web Design - Focused on Design Expression Techniques and Technological Changes -

Abstract

웹의 활용과 기술의 발전으로 웹 디자인 영역은 점차 확대되어 가고 있지만, 관련 연구는 미비한 실정이다. 이에 웹 디자인의 변천 과정을 연구함으로써 웹 디자인 시장의 중요성을 인식하고, 향후 디자인 방향을 제시하고자 한다. 본 연구에서는 디자인의 표현기법 발현과 진화 배경과 디자인에 영향을 주는 정보기술의 흐름을 고찰하고, 이를 바탕으로 웹 디자인 변천 과정 분석 연구를 수행하였다. 이는 앞으로의 웹 디자인 영역 확장을 위한 기초 연구 자료로서 의의가 있다고 판단된다. 연구 범위로는 웹의 역사 30년을 기준으로 1990년부터 2000년대 초까지는 당시 이슈가 되었t던 웹 사이트 자료를 대상으로 하였고, 2000년대 중반부터는 웹 어워드 코리아의 대상 수상작을 분석 대상으로 선정하여 디자인 표현기법의 조형적 특성과 웹 디자인에 영향을 준 정보기술 특성을 분석하는 방법으로 연구를 수행하였다. 연구 결과 디자인 표현기법의 변화는 미니멀리즘과 스큐어모피즘으로 크게 나눌 수 있었고, 정보기술이 발전함에 따라 영향을 받으며 웹 디자인을 표현하는 방식이 다양하게 변화하는 것을 알 수 있었다. 앞으로도 다양한 디바이스의 출현과 영상 콘텐츠 활성화로 이와 조화를 이룰 수 있는 미니멀리즘의 영향을 받은 디자인이 지속할 것으로 예측된다.

The domain of Web design gradually expands with the utilization of the Web and the development of technologies, but there are insufficient related studies. Thus, this study would recognize the importance of the Web design market and present the direction of designs in the future by investigating the process of changes in Web design. This study investigated the background of the revelation and evolution of design expression techniques and the flow of the information technology affecting the design and conducted a study analyzing the process of changes of Web design based on this. It is judged that this study has significance as the baseline research material for the expansion of the Web design domain of the future. As for the scope of the research, based on 30 years of the history of the Web, this study was conducted with materials on Websites, which had become issues from 1990 through the early-2000s and selected the winners of a grand prize in Web Award Korea since the mid-2000s as the subjects of analysis. This study analyzed the formative characteristics of design expression techniques and the characteristics of the information technology that affected Web design. As a result of the research, changes in design expression techniques could be divided broadly into minimalism and skeuomorphism, and it was found that the methods of expressing Web designs changed in various ways, affected by the development of information technology. It is predicted that with the emergence of various devices and the vitalization of video contents, the designs affected by minimalism, which can harmonize with them, will continue in the future.

I. 서론

1. 연구배경 및 목적

초창기 웹 사이트 디자인은 디자이너 없이 개발자가 웹 사이트를 처음부터 끝까지 제작하던 시대였다. 따라서 디자인은 없이 정보 입력만 되어 있는 워드 문서에 가까웠다. 이후 웹 브라우저가 등장하여 사용자에게 이미지를 보여 줄 수 있는 환경이 되면서 웹 사이트에 디자인이 적용되기 시작하였다.

세계 최초의 웹 브라우저는 스위스 연구 센터인 CERN에서 영국 물리학자이자인 Tim Berners-Lee가 만든 월드 와이드 웹(WWW, World Wide Web)으로 알려져 있다. 이는 현재 웹(Web)이라는 명칭으로 불리고 있다.

시대의 변화에 따라 기술이 발전하고, 컴퓨터가 보급되면서 [그림 1]과 같이 1990년대 후반, 웹 사용자는 폭발적으로 증가하게 되었고, 사용성 측면을 고려한 웹 디자인의 중요성이 대두되었다. 기업이나 기관의 홍보나 정보 공유 매체 정도로만 여겨지던 초기의 웹은 이제 가장 중요한 커뮤니케이션 수단의 하나가 되었고, 웹 공간을 디자인하는 웹 디자인의 중요성을 더욱 부각하고 있다[1].

그림 1. 년도별(1993~2018) 국가 도메인 등록수

웹 사이트는 디자인적, 기술적으로 1990년대 초부터 30년가량 빠른 속도로 변화하고 있다. 더욱이 4차 산업 혁명 시대의 새로운 패러다임을 맞이하며 디자인에 대한 고찰도 필요하다고 생각된다. 이에 필자는 웹의 초창기부터 현재까지의 흐름을 이해하고 웹 디자인의 현재 트렌드를 정확히 이해하는 것이 미래에 나아가야 할 방향을 잡는데 필요하다고 생각된다. 그러나 현재 웹 디자인의 역사나 흐름에 대한 연구는 웹 아이덴티티, 웹 표준 및 웹 접근성, 웹 사용성 등이 주를 이루고 있다. 특히, 이론적으로 웹 디자인의 변천 과정을 정의한 연구는 진행되지 않았다. 따라서 필자는 본 연구에서 디자인 기법과 정보 기술에 따라 웹 디자인이 어떻게 발전되었는가를 정리하고자 한다.

표 1. 선행연구 분석

2. 연구범위 및 방법

본 연구에서는 웹 초창기부터 현재까지 웹 디자인의 표현 기법 변화를 살펴보고, 이에 영향을 주었던 정보 기술 발전과 영향을 문헌을 통해 고찰하였다. 또한, 웹 디자인의 변천 과정을 알아보기 위해 과거 웹 사이트 디자인 자료를 조사하였다. 과거의 웹 디자인들은 이미 없어지거나 리뉴얼된 사이트들이 대부분으로 1990년부터 2003년까지는 웹 발전주기를 바탕으로 웹의 패러다임에 영향을 많이 준 사이트들을 구글 검색을 통해 자료를 조사하였고, 2004년부터는 웹 어워드 코리아 대상 수상작을 대상으로 자료를 조사하였다. 이를 바탕으로 다음 [표 2]과 같이 분석 대상을 선정하였고, 시대 별 웹 디자인 변천 과정 연구를 수행하고자 한다.

표 2. 연구 대상 웹 사이트

Ⅱ. 시대적 배경

1. 디자인 표현기법

초기 웹 사이트는 디자인의 고려보다는 문서와 같은 형태로 텍스트와 이미지를 정렬하는 구성으로 제작되었다. 이러한 초기 웹 디자인은 필요한 정보만을 제공하고 사용자가 탐색하는 형태로 현재의 시점으로 보면 미니멀리즘의 영향을 받은 것이라고 볼 수 있을 것이다. 하지만, 당시 정보기술의 한계와 디자인 중요성에 대한 인식 부족으로 표현 방식에 한계를 갖고 있었던 것으로 판단된다.

1990년대 중·후반 PC가 보급되기 시작하고, 디지털 기술이 발전되기 시작했을 때 사용자는 디지털 매체에 이질감을 느꼈다. 컴퓨터 도형 처리 능력 역시 비교적 떨어졌지만, 컴퓨터 기술과 디스플레이 기술이 발전을 거치며 현실의 사물과 더욱 가깝게 표현할 수 있게 되었다. 따라서 웹 디자인을 할 때 어포던스(Affordance)의 고려가 중요해졌고, 이는 어떤 행동을 유도한다는 뜻으로 행동 유도성이라고도 한다. 본 연구에서는 도널드 노먼(Donald A. Norman)이 인간과 컴퓨터, 즉 상호작용 분야에서 사용하기 시작한 어포던스 개념을 기반으로 연구를 수행할 것이다. 도널드 노먼은 ‘지각된’이라는 의미를 부각시켜 사물의 인지된 속성이나 실질적 특성이 곧 어포던스이며 이것이 바로 사물이 어떻게 사용되는지 결정한다고 보고 있다. 본 연구에서는 지각된 어포던스의 사용자가 어떤 것을 인지하고 생각하게 하는데 도움을 주거나 유발하는 특성을 기준으로 연구를 수행할 것이다[2].

그림 2. 세계 최초의 웹 사이트 http://info.cern.ch/hypertext/WWW/TheProject.html(좌), Les Horribles Cernettes 웹 최초의 이미지 중 하나(우)

2000년대 중반에 들어서며 사용자가 낯선 컴퓨터 환경에 더욱 친밀감을 느낄 수 있도록 지각된 어포던스가 적용된 스큐어모피즘 디자인이 발전하였다. 스큐어모피즘(Skeuomorphism)이란 실존하는 사물과 유사한 형태로 표현하는 방식으로 장식적 요소가 강조되는 도구의 물질적인 형태를 그대로 모방한다는 의미를 가진다. 특히, 현실에서의 모습과 사물의 형태를 다른 매체에 그대로 재현하여 도구의 모양, 재질감 등을 실감나게 묘사하여 표현하는 특징이 있다 [3]. 하지만, 스마트 디바이스가 출현하며 사람들의 인식 수준의 제고와 사물 이해와 개괄 능력의 강화로 디자인에 있어서 정보의 신속한 전달이 더욱 중요하게 여겨지게 되었고, 디자인 스타일이 단순화되면서 추상적인 것을 추구하는 미니멀리즘으로 변화하였다.

미니멀리즘(Minimalism)은 최소한의 표현 요소로 정보를 전달하며 불필요한 것들을 제외하더라도 사물이 가진 고유의 개성과 특성을 나타낼 수 있어야 한다. 도널드 노먼은 이러한 미니멀리즘도 표면적으로는 간단해 보이지만 그 내부는 복잡할 수 있다고 하면서 심플함과 외형적 단순함을 동일시하지 않아야 한다고 하였다. 외형적 단순함이 시스템의 사용에 대한 단순함이 될 수 없으며 구체적인 표현이 제한된다면 그것을 대체할 또 다른 장치가 요구될 수밖에 없기 때문이다 [4]. 대표적인 사례로 Windows 8의 바탕 화면과 스마트폰 메트로 UI(모던 UI)에서 채택된 플랫 디자인이 있다. 플랫디자인은 불필요한 요소를 제거하고, 색채를 단순화하여 사용자가 인터페이스에 집중을 할 수 있다는 장점이 있다.

그림 3. 스큐어모피즘(좌), 플랫 디자인(우)

하지만, 오랜 기간 지속하던 미니멀리즘은 동질화가 심각하게 진행되어 개성이 없어지고, 간결하여 감정이 결핍되었다는 문제를 발생시켰다. 이러한 문제를 해결하고자 다양한 디자인 스타일이 등장하기 시작했고, 대표적으로 구글의 머티리얼 디자인(Material Design)을 꼽을 수 있다.

그림 4. 머티리얼 디자인 기법

머티리얼 디자인은 플랫 디자인의 장점을 살리면서도 빛에 따른 종이의 그림자 효과를 이용하여 입체감을 살리는 디자인 방식을 말한다. 플랫 디자인과 마찬가지로 최소한의 요소만을 사용하여 대상의 본질을 표현하는 디자인 기법인 미니멀리즘을 추구한다[5].

2. 기술적 기법

웹의 발전 과정은 서비스의 특징에 따라 구분되지만, 각 연구자마다 시대와 특징을 다르게 정의하고 있다. 본 연구에서는[표 3]와 같이 KT경제경영연구소 DigiEco자료의 웹 발전 과정을 바탕으로 웹 정보기술의 출현 시기를 적용하여 재편집하였다. 웹 서비스 특징을 기준으로 웹 1.0, 웹 2.0, 웹 3.0으로 정의하였고, 웹 발전 주기별 정보기술은 본 연구의 핵심 주제인 웹 디자인의 변화와 직접적인 영향을 미치는 대표적인 기술로 한정하였다.

표 3. 웹의 발전 주기

웹 1.0은 1990년대 인터넷의 등장으로 시작되었다. 하이퍼텍스트 위주의 웹 환경으로 텍스트와 링크가 주된 형태였고, 음악, 동영상 등 멀티미디어 사용이 극도로 제한되어 있었다. 웹 사이트는 운영자가 사용자에게 일방적으로 콘텐츠를 제공하는 형태로 이루어졌고, 오늘날과 같이 동적인 데이터를 제공하는 서비스는 존재하지 않았다. 기술의 한계로 웹 사이트를 구성하는 저장 공간이 충분하지 않았고, 속도 저하 현상이 보편적이었다. 따라서 웹 1.0 초중반에는 동영상이나 플래시 사용이 리소스 낭비로 여겨졌지만, 후반에 들어서며 자바스크립트와 플래시의 등장으로 웹 사이트에서 인터페이스의 시각적 표현 요소가 동적으로 변화하게 되었다.

웹 2.0(Web 2.0)은 개방, 참여, 공유를 바탕으로 사용자가 직접 정보를 생산하여 쌍방향으로 소통하는 웹 기술을 말한다[6]. 사용자는 블로그를 비롯한 웹 사이트를 직접 운영하고, 동영상을 올리며 커뮤니티를 만들었고, 그들만의 콘텐츠를 만들어내기 시작했다. 즉, 사용자가 직접 콘텐츠를 생산하고, 소비하며 유통하였다. 이러한 서비스 형태와 더불어 웹 기술은 웹 마크업 기술을 기반으로 웹 애플리케이션 기술, 그리고 웹 플랫폼 기술로 진화하고 있다[7]. CSS는 플래시와 달리 HTML 구조를 유지하며 페이지를 디자인할 수 있고, 컬러, 타이포그래피, 레이아웃, 심지어 애니메이션까지 구현할 수 있다. 이러한 마크업 기술을 기반으로 스마트 디바이스에서 데이터 로드를 줄일 수 있는 그리드 시스템이 주를 이루게 되었고, HTML과 CSS를 포함하는 시각적 라이브러리인 부트스트랩과 같은 프레임워크가 출현하였다. 또한, 스마트 디바이스에서 미디어 쿼리 등을 사용하여 동일한 콘텐츠 및 페이지를 해상도에 맞추어 작동하도록 만드는 반응형 웹 기술이 보급되었다.

웹 3.0은 컴퓨터가 시맨틱 웹 기술을 이용하여 웹페이지의 내용을 이해하고 개인 맞춤형 정보를 제공할 수 있는 지능형 웹 기술을 말한다[8]. 맞춤형 서비스를 제공할 수 있는 콘텐츠 우선순위 측면이 강조되기 시작하며, 현재 웹의 핵심 마크업 언어인 HTML5와 CSS3를 활용하여 시각적 요소를 단순화하는 기법인 플랫 디자인을 적용하게 되었다. 또한, 비트맵 이미지를 사용하는 웹 환경에서 SVG(Scalable Vector Graphics)를 활용하여 맞춤형 벡터 그래픽을 표현하게 되었고, 제4차 산업혁명에 맞추어 실재감 넘치는 VR 콘텐츠가 확산하고 있는 추세이다.

Ⅲ. 디자인 표현기법과 기술적 기법의 특성

1. 웹 디자인 1.0

1993년 KAIST에서 한국 최초의 웹 사이트가 만들어진 이후 초고속 인터넷의 등장과 더불어 인터넷이 대중화되는 데에 시발점이 되었다. 초기에는 외국의 유명한 비즈니스 모델을 복제하여 한국에서 서비스하는 것이 일반화되어 있었다[9]. 신문 서비스 및 야후코리아가 시작한 검색 서비스를 비롯해 유사한 포털 사이트들의 등장, 웹 기반의 메일 서비스의 국내 버전과 다음의 한 메일 등이 대표적인 것들이다. 이는 웹 1.0을 대표하는 서비스 형태로 생산자가 사용자에게 일방적으로 콘텐츠를 제공하는 단방향 서비스가 주를 이루었다.

1990년대를 대표하는 국내 포털 서비스로는 [그림 5]와 같이 심마니, 야후, 엠파스, 다음, 네이버, 라이코스, 구글 사이트가 있었다. 현재 포털 사이트 1위를 차지하고 있는 네이버는 이 시기에 다른 포털 서비스보다 부각을 나타내지는 않았었지만, 2000년대 들어서 공격적인 마케팅 광고와 다양한 서비스 확대로 현재까지 업계 1위를 지키고 있다. 또한, 1990년대 후반부터 2000년대 초까지는 [그림 6]과 같은 커뮤니티가 활성화된 시기로 웹 2.0의 참여와 공유의 특성을 보이는 시기로 10대, 20대를 중심으로 타인과의 소통 채널 역할을 한 아이러브스쿨, 다 모임, 프리챌, 그리고 현재의 블로그 시초라고 할 수 있는 싸이월드가 웹 시장의 부흥을 이끌었다.

그림 5. 1990년대 포털 사이트 (심마니, 야후, 엠파스, 다음, 네이버, 라이코스, 구글)

그림 6. 1990년대 후반~2000년 초 커뮤니티 사이트 (아이 러브스쿨, 다모임, 프리챌, 싸이월드)

웹 디자인 1.0의 특성을 다음과 같이 구분하였다.

1. 기본 웹 폰트와 이미지 : 초창기 정보 탐색의 중요성이 강조되던 시기로 사용자 컴퓨터 환경의 기본 웹 폰트를 활용한 하이퍼 텍스트 링크와 실제 사진을 활용한 이미지가 주된 구성요소였다.

2. 정형화된 그리드 레이아웃 : HTML의 table 태그를 사용하여 그리드를 맞추고 페이지 레이아웃을 디자인하였다. 편리하게 정보를 구성할 수 있다는 장점이 있었지만, table 태그로 이루어진 레이아웃은 정형화된 틀에 얽매이게 만들어 페이지를 유동적으로 만들기 어렵다는 단점을 갖고 있었다. 특히, [그림 5][그림 6]에서 볼 수 있듯이 비슷한 레이아웃을 사용할 수밖에 없는 한계점을 갖고 있었다.

3. 브랜드 워드마크 및 아이덴티티 컬러 강조 : 비슷한 레이아웃의 한계점을 탈피하기 위해 각 브랜드는 워드마크 강조와 아이덴티티 컬러를 활용하여 개성을 부여하였다.

4. 애니메이션 효과의 시작 : 자바스크립트와 플래시를 활용한 애니메이션 효과를 사용하기 시작하였다. 1990년대에는 컴퓨터 성능의 한계로 웹 페이지의 극히 일부 영역에만 사용되었다. 하지만, 1990년 후반, 기술의 발전과 디자인 스킨을 적용할 수 있었던 싸이월드의 성공으로 플래시와 자바 스크립트를 활용한 애니메이션 디자인이 웹 사이트에 확대되기 시작했다.

웹 디자인 1.0은 디자인의 역할이 이제 막 부각되기 시작한 시기로 미적인 측면의 고려보다 얼마나 많은 정보 탐색이 가능한지에 대한 측면이 강조되었다.

2. 웹 디자인 2.0

2000년부터 2005년까지 한국은 OECD 국가 중 초고속 인터넷 가입자 비율이 가장 높은 나라였고, 현재까지 가장 빠른 속도로 인터넷을 이용하는 국가로 유명해졌다 [10]. 이는 오프라인에 집중되어 있던 비즈니스가 웹 환경으로 확장되는 현상으로 이어졌고, 국내 기업과 기관에서는 당연히 자사 웹 사이트가 있어야 한다는 인식의 전환으로 이어졌다. 현재는 많은 기업과 기관에서 웹 사이트를 온라인 공간의 브랜드 중심 역할로 활용하고 있다. [그림 7]의 Global MOMU, 기아 SOUL, 현대카드, CJ 그룹, KB국민은행, 현대자동차 기업문화 PR 사이트 모두 그룹을 대표하는 사이트거나 브랜드 홍보를 위한 마이크로 사이트였다. 이처럼 2000년대 초반부터 본격적으로 웹 디자인에 대한 사용성과 미적인 측면이 고려되기 시작하였다.

그림 7. 2000년대 중반~2010년 초 웹 어워드 코리아 대상 사이트(Global MOMU, 기아 SOUL, 현대카드, CJ 그룹, KB국민은행, 현대자동차-기업문화-PR)

웹 디자인 2.0의 특성을 다음과 같이 구분하였다.

1. 스큐어모피즘 디자인 : 디지털 환경이 낯선 사용자를 위해 현실 세계의 메타포를 웹 디자인에 적용하는 노력이 이루어졌다. [그림 7]과 같이 Global MOMU는 퍼즐 형태, 기아차 SOUL은 자동차 외관을 3D 디자인으로 구현하여 사용자가 매장에서 보는 것과 동일하게 디자인하였다. 현대카드는 실제 신용카드 디자인과 동일한 일러스트를 사용하였고, CJ 그룹은 실사 아이콘을 활용하여 콘텐츠를 소개하였다. 또한, KB 국민은행은 사랑의 의미를 담은 하트 일러스트와, 네입 크로버, 선물 상자 아이콘 등을 입체적인 형태로 디자인하였고, 현대자동차 기업문화 PR은 비주얼 영역에 가상의 도시 공간과 각종 아이콘을 3D 이미지로 만들었다. 이는 어포던스를 높여 사용자가 웹 사이트에서 제공하는 정보를 쉽게 인지하고 지각할 수 있도록 실재감 넘치는 스큐어모피즘을 적용한 것이다.

2. 플래시 애니메이션의 부흥 : 2000년대는 플래시 애니메이션이 부흥했던 시기로, 얼마만큼 다양한 애니메이션이 적용되었느냐에 따라 웹 사이트 디자인의 퀄리티가 결정되었던 시기였다. 같은 시기에 많이 사용되던 스큐어모피즘 디자인은 플래시 애니메이션을 통해 사실적인 효과를 극대화할 수 있었고, 서로에게 긍정적인 시너지를 주었다.

3. HTML과 CSS의 활용 : HTML과 CSS를 활용하여 [그림 7]과 같이 다양한 형태의 레이아웃 구현과 웹에서 사용할 수 있는 폰트체가 확대되었다. 컴퓨터 환경의 기본 폰트체가 아닌 다양한 웹 폰트체를 사용하게 되며 웹 디자인에서 타이포그래피의 중요성이 인식되기 시작했다.

4. 반응형 웹 : 2000년 후반, 모바일 사용률이 높아지며 기존의 PC 디자인만을 제작하던 방식에서 모바일, 태블릿, PC 해상도에 최적화된 디자인 적용 방식인 반응형 웹 레이아웃이 확대되며 시장의 변화를 가져왔다. 특히, [그림 7]의 현대자동차 기업문화 PR은 국내 반응형 웹 시장을 선도했다고 할 수 있을 만큼 파격적인 그리드 레이아웃을 선보이며 사이트를 구성하였다.

2007년대 애플 아이폰을 비롯한 스마트폰이 출시된 이후, 사용자는 터치스크린 기반 디지털 기기에 익숙해지기 시작했다. 디지털 환경에 대해 사람들은 더는 이질감을 느끼지 않았고, 사용자가 이미 알고 있는 기능에 대해 설명을 해주는 메타포를 디테일하게 표현하는 스큐어모피즘에 대해 부담을 느끼고, 식상해하기 시작하였다.

3. 웹 디자인 3.0

미니멀리즘에 영향을 받은 웹 디자인 3.0은 단순하고 기하학적인 형태를 사용했으며, 이미지와 조형 요소를 최소화하고 단색의 사용과 단순함, 명료성 등을 강조하는 기본 구조로 구성되어 있다. 이는 사용자가 쉽게 익숙해질 수 있는 인터페이스와 기능을 보다 능률적으로 활용할 수 있는 환경을 제공하는 것이다[11]. 복잡한 그래픽 효과에 대한 부정적 여론이 형성되자 2012년 마이크로소프트(Microsoft)는 대대적인 GUI 개선 작업을 통해 메트로 UI(모던 UI)를 Windows 8에 적용하였고, 바탕 화면과 각종 스마트폰에 채택한 플랫 디자인이 주목받기 시작하였다. 이후 2013년 애플의 IOS7을 기점으로 플랫디자인은 GUI를 비롯한 웹 디자인에서도 메가 트렌드로 자리 잡았다.

웹 디자인 3.0의 특성을 다음과 같이 구분하였다.

1. 플랫 디자인 : [그림 8]과 같이 신한카드, 한화 갤러리아 백화점, 기아자동차, 아모레퍼시픽, CJ 문화 재단, Lifeplus까지 모두 플랫 디자인의 특성이 적용되어 있다. 명확한 그리드 레이아웃과 배제된 효과, 라인 형태의 심플한 일러스트 아이콘, 타이포 그래피 강조, 단순한 컬러 등 최소한의 디자인 요소로 구성되어 있다.

그림 8. 2010년 중반~후반 웹 어워드 코리아 대상 사이트 (신한카드, 한화 갤러리아 백화점, 기아자동차, 아모레퍼시픽, CJ문화재단, Lifeplus)

2. 사진과 영상 : 3D 및 벡터 이미지 플래시 애니메이션을 사용하던 웹 디자인 2.0 시기와 다르게 전체 사진 및 동영상 배경을 주로 사용하였다. 현실과 유사한 어포던스를 적용한 스큐어모피즘 디자인이 아닌 실제 사진과 영상을 제공하여 사용자에게 사실적인 콘텐츠를 제공하고 있다.

3. 모션 UI : 과도한 애니메이션의 사용보다는 콘텐츠를 이용하기 위한 버튼 및 이미지 슬라이드 등 마이크로 인터랙션 측면의 모션이 사용되고 있다. 이러한 모션 UI는 명료한 화면 구성과 빠른 전송 속도를 앞세워 빠르게 퍼져 나가고 있다.

4. 머터리얼 디자인 : [그림 8] 아모레퍼시픽에 사용된 아이콘은 머티리얼 디자인으로 플랫 디자인의 확장으로 보이기도 하지만, 스큐어모피즘의 특징인 텍스처와 그림자 등 유사한 형태로 적용하고 있다. 이는 스큐어모피즘과 플랫 디자인의 특징 중 장점을 바탕으로 단점을 보완하여 새로운 디자인 형태를 탄생시킨 것으로 볼 수 있다.

이러한 조형 요소와 모션의 최소화는 스마트 디바이스의 해상도가 다양해지면서, HTML5와 CSS3의 적용과 반응형 웹 디자인 적용 시 효율성과 성능 부분에서 우수한 효과와 사용성을 보이고 있다.

4. 웹 디자인 변천 과정

본 연구의 분석 결과 디자인 표현기법 측면에서는 초창기 웹 디자인은 기술적 한계와 디자인 인식 부족으로 텍스트와 이미지를 정형화된 그리드 레이아웃에 맞추어 디자인하였다. 또한, 기술이 발전된 이후에는 디지털 환경이 낯설었던 사용자의 어포던스를 고려해 현실과 유사한 형태의 스큐어모피즘이 오랜 기간 사용되었다. 하지만, 시대가 변화하며 사용자가 디지털 환경에 이질감을 느끼지 않게 되면서 간결한 형태의 미니멀리즘이 시장을 선도하기 시작하였다. 대표적으로 메타포의 조형 요소를 최소화하고 단색 사용과 단순함, 명료성 등을 강조하는 플랫 디자인과 플랫디자인을 기반으로 스큐어모피즘의 장점을 조합한 머티리얼 디자인이 지속해서 사용되고 있다.

정보 기술적 측면에서는 초창기 하이퍼텍스트로 정보를 탐색하고, HTML의 Table 태그를 사용하여 정형화된 레이아웃을 제공하였다. 2000년대 초·중반에는 스큐어모피즘과 함께 플래시, 자바스크립트를 활용하여 실재감 넘치는 애니메이션이 확산하였고, 2007년 아이폰의 등장과 함께 멀티 디바이스에 대응할 수 있는 반응형 웹이 보급되기 시작하였다. 이후, HTM 5와 CSS3를 통해 다양한 레이아웃과 애니메이션을 표현할 수 있게 되었고, 간결한 버튼 및 슬라이드 등의 모션 UI가 확산하였다.

표 4. 웹 디자인 변천 특성 분석

Ⅳ. 결론

현재의 웹 디자인은 콘텐츠와 그 콘텐츠를 사용하는 사용자 경험을 중심으로 발전해 나가고 있다. 사용자는 텍스트나 이미지를 읽는 것보다 영상 콘텐츠에 흥미를 느끼고, 이를 제어할 수 있는 플랫 디자인의 메타포를 지각하는 것이 자연스러워졌다. 이러한 점들을 바탕으로 향후 웹 디자인의 방향에 대해서 두 가지로 예측해 볼 수 있다. 첫째, AR(augmented reality) 콘텐츠를 기반으로 간결한 메타포 형태의 디자인이 확대될 것으로 보인다. 이는 가상현실(virtual reality, VR)의 한 분야로 실제로 존재하는 환경에 가상의 사물이나 정보를 합성하여 마치 원래의 환경에 존재하는 사물처럼 보이도록 하는 컴퓨터 그래픽 기법이다[12]. 2018년 Gartner의 조사에 따르면, 약 46%의 소매업체가 2020년에 AR 기술을 쇼핑 기술에 적용할 예정이라고 예측하였다. 둘째, 스마트 디바이스의 새로운 인터랙션 형태가 등장할 것 같다. 전체 스크린, 듀얼 화면, 리프팅 카메라, 폴더블까지 새로운 제품은 지속적으로 출시되고 있으며 이러한 형태의 디바이스 등장은 웹 페이지의 크기 변화가 아닌 여러 콘텐츠를 한꺼번에 탐색할 수 있는 새로운 인터랙션을 제공해야 할 것이다.

이처럼 앞으로 발전되고, 확장될 웹 디자인 영역의 중요성을 인식하고, 다양하고 깊이 있는 연구가 필요할 것이다. 본 연구에서는 웹 디자인 분야의 변천 과정을 고찰하고, 분석하여 연구를 수행함으로써 불분명했던 웹 디자인 역사를 정의하였다는 데 의의가 있다고 판단된다. 이는 웹 디자인을 공부하는 학생 및 디자인사를 연구하는 분야에 기초 자료가 될 것이다. 하지만, 자료 조사의 한계와 시각적 요소의 정량적 분석을 진행하지 못한 한계점이 갖고 있다. 연구 대상을 메인 페이지만으로 하였기 때문에 서브페이지의 디자인 표현 기법 및 기술적 기법에 대한 추가적인 자료 조사가 이루어져야 한다. 이는 시각적, 기술적 수치를 바탕으로 한 정량적 분석을 위해 향후 지속적인 후속 연구가 필요하다.