맨위로가기

웹 디자인

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
목차

1. 개요

웹 디자인은 1991년 팀 버너스리가 최초의 웹사이트를 공개하면서 시작되었으며, 인터넷과 하이퍼텍스트를 결합하여 웹의 기본 구조를 만들었다. 웹 디자인은 HTML, CSS, 자바스크립트 등의 기술 발전을 통해 발전해왔으며, 광대역 인터넷 보급과 모바일 환경의 확산에 따라 반응형 웹 디자인과 같은 새로운 트렌드를 겪고 있다. 웹 사이트 설계는 정보의 구성, 사용성, 디자인, 가시성을 고려하며, 웹 접근성을 통해 모든 사용자가 웹 콘텐츠를 동등하게 이용할 수 있도록 하는 것이 중요하다. 최근에는 인공지능 기술이 웹 디자인에 활용되면서 관련 분야와의 융합이 이루어지고 있다.

2. 역사

웹 디자인의 역사는 인터넷과 월드 와이드 웹의 발전과 궤를 같이 한다. 팀 버너스리는 인터넷 통신과 하이퍼텍스트를 결합하여 1991년 8월에 최초의 웹사이트를 만들었다.[44] 초기 HTML은 매우 기본적인 기능을 갖추고 있었지만, 사용자는 하이퍼링크를 통해 여러 페이지를 탐색할 수 있었다.

웹과 웹 디자인이 발전하면서 마크업 언어는 더 복잡하고 유동적으로 변화되었고, 그림, 표와 같은 객체들을 페이지에 추가할 수 있게 되었다. 초창기에는 표가 레이아웃 장치로도 활용되었으나, CSS가 등장하면서 표 기반 레이아웃은 점차 사용되지 않게 되었다. 서버 스크립팅과 같은 데이터베이스 통합 기술과 CSS와 같은 디자인 표준은 웹 제작 방향을 변화시키고 강화시켰다.

세계 최초의 웹 디자이너는 팀 버너스 리라고 할 수 있다. 그는 WWW를 발명하고, 1991년에 세계 최초의 웹사이트를 개설했다.

1993년 CGI가 발명되어, 웹사이트는 쌍방향성을 가지게 되었다. ADSL이나 FTTH 등의 광대역 인터넷 접속 환경이 보급되면서 웹 디자인의 폭이 더욱 넓어졌다. 1990년대 후반에는 Flash나 Silverlight를 비롯한 리치 클라이언트의 등장으로 움직임이 있고 고기능의 웹 디자인이 등장하기 시작했다.

1996년에는 CSS 1.0이 권고되었고, 1997년에는 자바스크립트의 핵심적인 사양이 '''ECMAScript'''로 표준화되었으며, 같은 해 HTML 4.0도 W3C에서 권고되었다. 표준화된 CSS를 지원하는 브라우저가 등장하면서 CSS를 사용한 디자인이 주목받게 되었고[36], Dreamweaver나 홈페이지 빌더와 같은 웹 저작 도구가 출시되기 시작했다.

2005년, 구글은 자바스크립트의 Ajax 기술을 사용한 Google Map을 발표하여, 비동기 통신에 의한 동적 HTML로 동적으로 페이지의 일부를 수정하는 유용성을 널리 알렸다.[37] 통신 회선 고속화와 요금 인하로 콘텐츠의 질도 향상되어, 2005년에는 유튜브, GYAO! 등 동영상 공유 서비스가 공개되었다.[38] 2011년 부트스트랩을 시작으로 CSS 프레임워크가 오픈 소스로 공개되기 시작하여, 반응형 웹 디자인을 쉽게 구현할 수 있게 되었다. 같은 해 웹 브라우저에서 3차원 컴퓨터 그래픽스를 표시하기 위한 표준 사양 WebGL도 발표되어 웹 디자인의 표현도 3차원으로 확장되어 가고 있다.

2. 1. 초기 (1990년대 초~중반)

월드 와이드 웹의 창시자 팀 버너스리가 1991년 8월에 최초의 웹사이트를 공개하면서 웹 디자인의 역사가 시작되었다.[44] 초기 웹사이트는 HTML이라는 마크업 언어로 작성되었으며, 초기 버전의 HTML은 헤딩, 문단, 하이퍼텍스트를 사용한 연결(하이퍼링크) 기능 정도의 기본적인 기능만 제공하였다. 사용자는 하이퍼링크를 통해 쉽게 여러 페이지를 탐색할 수 있었다.

1993년에는 CGI가 발명되면서 웹은 쌍방향성을 가지게 되었고, 웹 디자인에도 큰 변화가 일어났다. 웹사이트 작성자가 제공한 정보를 사용자가 일방적으로 받기만 했던 이전과 달리, CGI를 통해 사용자와 웹사이트 간의 상호작용이 가능해졌다.

또한, 인터넷 접속 환경의 발전도 웹 디자인에 큰 영향을 미쳤다. 다이얼 업 접속이 일반적이던 초기에는 통신 요금 문제로 이미지 사용이 제한적이었다. 인터레이스 GIF나 프로그레시브 JPEG와 같이 협대역 환경에 대응하는 이미지 파일 형식들이 등장했다. 동영상에서도 비교적 파일 크기가 작은 애니메이션 GIF가 사용되었다.

2. 2. 발전 (1990년대 후반~2000년대 초)

1990년대 후반, WWW은 큰 변화를 겪었다. 1996년 CSS 1.0이 권고되면서 웹 디자인에 큰 변화가 생겼다.[36] CSS를 통해 디자인 요소를 분리하고 효율적으로 관리할 수 있게 되었다. 1997년에는 자바스크립트의 핵심 사양이 '''ECMAScript'''로 표준화되었고, 같은 해 HTML 4.0도 W3C에서 권고되었다.

CSS 표준을 지원하는 브라우저가 등장하면서 CSS를 사용한 디자인이 주목받기 시작했고,[36] Dreamweaver나 홈페이지 빌더와 같은 웹 저작 도구가 출시되어 웹 디자인 작업을 더욱 쉽게 만들었다.

초기에는 표를 사용해 레이아웃을 구성하는 방식이 널리 사용되었다. 그러나 이는 웹 표준 준수와 웹 접근성 측면에서 문제가 있었기 때문에, 점차 CSS를 이용한 레이아웃 방식으로 전환되기 시작했다.

1993년 CGI가 발명되면서 웹 사이트 방문자가 정보를 받기만 하던 WWW에 쌍방향성이 도입되었고, 웹 디자인도 큰 전환점을 맞이했다.

인터넷 접속 환경의 발전도 웹 디자인에 큰 영향을 주었다. 다이얼 업 접속 시대에는 이미지 사용을 최소화했지만, ADSL이나 FTTH 등의 광대역이 보급되면서 이미지나 동영상을 자유롭게 사용할 수 있게 되어 웹 디자인의 폭이 넓어졌다.

1990년대 후반에는 Flash나 Silverlight와 같은 리치 클라이언트 기술이 등장하여 더욱 풍부한 표현이 가능한 웹 디자인이 나타나기 시작했다.

2. 3. 확장 (2000년대 중반~현재)

광대역 인터넷 환경이 보급되면서 이미지, 동영상 등 멀티미디어 콘텐츠 활용이 증가했다. Flash, Silverlight 등 리치 인터넷 애플리케이션 기술이 등장하여 동적인 웹 디자인이 가능해졌다. 2005년 Ajax 기술을 활용한 Google Map가 발표되어 비동기 통신에 의한 동적 HTML로 페이지 일부를 수정하는 기능이 널리 알려졌다.[37]

통신 회선 고속화와 요금 인하로 콘텐츠 질도 향상되어, 2005년 유튜브, GYAO! 등 동영상 공유 서비스가 공개되었다.[38] 2011년 부트스트랩 등 CSS 프레임워크가 오픈 소스로 공개되어 반응형 웹 디자인 구현이 쉬워졌다. 같은 해 웹 브라우저에서 3차원 컴퓨터 그래픽스를 표시하는 표준 사양 WebGL이 발표되어 웹 디자인 표현 영역이 확장되었다.

2. 4. 한국 웹 디자인의 역사

대한민국은 1990년대 후반부터 초고속 인터넷망이 보급되면서 웹 디자인 분야가 빠르게 성장했다. 2000년대 초, 프리챌, 아이러브스쿨, 싸이월드 등 커뮤니티 사이트들이 인기를 끌면서 독창적인 웹 디자인 스타일이 나타났다. 전자정부, 온라인 쇼핑, 인터넷 뱅킹 등 다양한 온라인 서비스가 활성화되면서 웹 접근성과 사용성에 대한 관심이 높아졌다. 특히, 2003년 전자정부법 시행 이후 공공기관 웹사이트의 웹 접근성 준수가 의무화되면서 웹 표준 및 웹 접근성 관련 기술이 발전했다. 최근에는 모바일 환경에 최적화된 반응형 웹 디자인, 사용자 경험(UX) 디자인, 인공지능 기반 웹 디자인 등이 주목받고 있다.

3. 웹 사이트 설계

웹 사이트 설계는 특정 주제에 대한 정보를 효과적으로 전달하기 위해 웹 페이지를 구성하고 디자인하는 과정이다. 이 과정에는 여러 관점이 존재하며, 인터넷의 발전으로 새로운 관점이 계속 등장하고 있다.

웹 사이트 설계 시 주요 고려 사항은 다음과 같다.

고려 사항설명
콘텐츠사이트에 담긴 정보는 웹 사이트의 주제와 관련되어야 한다.
이용성사용자가 사이트를 쉽게 이용할 수 있도록 인터페이스와 탐색 기능은 단순하고 직관적이어야 한다.
겉모습그래픽과 텍스트는 일관성 있는 스타일을 유지해야 하며, 전문적이고 매력적이며 타당성 있어야 한다.
가시성검색 엔진과 광고를 통해 쉽게 사이트를 찾을 수 있어야 한다.



웹 사이트는 보통 텍스트와 그림으로 구성되며, 첫 페이지는 홈 페이지 또는 Index 페이지라고 불린다. 일부 웹 사이트는 환영 메시지, 언어/지역 선택, 거부자 등을 포함하는 스플래시 페이지를 사용하기도 하지만, 빠른 탐색을 통한 정보 접근을 중시하는 현대 웹 디자인 추세에서는 점차 사용되지 않는 추세이다.

웹 사이트 제작이 완료되면, FTP 클라이언트를 사용하여 서버에 게시(업로드)해야 사람들이 인터넷에서 볼 수 있다. 게시 후에는 웹 마스터는 구글, 야후와 같은 검색 엔진에 웹 사이트를 등록하는 등 다양한 기술을 사용하여 방문자 수를 늘릴 수 있다.

3. 1. 접근성

웹 페이지와 사이트는 특정한 접근성 원칙들을 따라야 한다. 이러한 원칙들은 다음과 같다.

  • 뜻 있는 구조를 문서(웹 페이지)에 제공하는 시맨틱 마크업을 사용한다.
  • 텍스트가 아닌 요소에 상응하는 텍스트를 제공한다. (그림, 멀티미디어 등)
  • 구문을 읽을 때 이치에 맞게 하는 하이퍼링크를 사용한다. (예: "여기를 누르세요"라는 링크 이름 사용 지양)
  • 프레임을 사용하지 않는다.
  • HTML 표가 아닌 CSS를 사용한다.
  • 사용자 에이전트가 소스코드를 줄 단위로 읽게 하도록 페이지를 만든다.


HTML4에서는 웹 페이지의 모양을 CSS와 같은 스타일 시트를 사용하는 것을 권장한다. HTML은 문서 구조를 기술하고, 디자인은 CSS로 기술하는 것이 디자인 원칙이다[39]。

브라우저 전쟁 말기, CSS를 비교적 잘 구현한 인터넷 익스플로러(Microsoft Internet Explorer)가 시장을 지배하게 되면서, 웹 디자이너는 페이지를 레이아웃하는 수법으로 CSS를 이용하기 시작했다.

HTML5와 CSS3가 사양으로 제정된 이후, 많은 브라우저가 CSS를 최대한 구현하고 있다는 점[40][41], HTML5에서 테이블을 사용한 레이아웃이 '''must not'''이라는 강한 표현으로 금지된 점, 유니버설 디자인을 중시하는 관점에서 접근성 확보와 사용성 향상을 목표로 디자인이 이루어지게 된 점 등을 근거로, CSS를 사용하여 레이아웃을 수행하는 것은 웹 디자이너의 공통 인식으로 확립되어 가고 있다.

웹 디자인에서 방문자 모두가 올바르게 정보를 얻을 수 있는 접근성은 중요한 요소이다. 어떤 사용자 에이전트를 사용하든 방문자가 내용을 정확하게 얻을 수 있도록 접근성을 고려한 웹 디자인을 하는 것이 매우 바람직하다.

  • 특정 사용자 에이전트에서만 표시되거나 읽을 수 있는 콘텐츠는 피해야 한다.
  • 특정 스타일 시트를 적용하지 않아도 기사를 올바르게 읽을 수 있도록 한다.
  • 동적 콘텐츠(스크립트나 애플릿 등)가 동작하지 않는 환경에서도 기사 내용을 읽을 수 있도록 한다. 또는 동적 콘텐츠를 사용하지 않도록 한다.
  • 이미지를 표시할 수 없는 환경에서도 내용을 올바르게 읽을 수 있도록 한다. 이미지를 사용하는 경우에는, img 요소의 alt 속성을 지정하여 이미지의 개요를 설명한다. (텍스트 브라우저나 음성 지원 사용자 에이전트에 대한 배려)
  • 전경색과 배경색의 대비를 크게 한다. (시각 장애 및 인쇄 시에 대한 배려)
  • 언어 코드를 명시한다. 부분적으로 언어가 다른 경우에는 해당 부분에 대해서도 언어 코드를 명시한다. (음성 지원 사용자 에이전트에 대한 배려)
  • 문자 인코딩을 명시한다.
  • 기종 의존 문자를 사용하지 않는다.

3. 2. 레이아웃

웹 페이지는 사용자가 사용하는 브라우저의 창에 의해 디자인 영역이 제한된다. 그 안에서 어떻게 레이아웃할 것인가가 하나의 과제이다. 레이아웃 방식에는 다음과 같은 디자인이 대표적이다.

  • '''고정폭 레이아웃''': 웹 페이지에 포함된 콘텐츠의 가로 폭을 고정된 값으로 설정하는 표시 방법이다.
  • '''유동형 레이아웃''': 화면 크기에 맞춰 레이아웃 폭을 변경하는 방식이다.
  • '''반응형 레이아웃''': 휴대 전화 또는 스마트폰의 보급으로, 컴퓨터 이외의 기기에서도 레이아웃이 보기 좋게 표시될 수 있도록 하는 방법이다. 미디어 쿼리 등을 사용하여 접속하는 기기의 크기를 판별하여 그에 따라 레이아웃을 변경할 수 있다.

3. 2. 1. 고정폭 레이아웃

웹 페이지에 포함된 콘텐츠의 가로 폭을 고정된 값으로 설정하는 표시 방법이다. 디자이너는 브라우저의 창 크기에 영향을 받지 않고, 이미지와 같은 표시 결과를 얻을 수 있다. 예를 들어, 야후! 재팬(Yahoo! JAPAN)의 첫 페이지는 2017년 10월 현재 폭 950px의 고정 폭으로 레이아웃되어 있으며, 이는 최소 화면 해상도 XGA(1024×768px)의 디스플레이에서 최적으로 표시되도록 되어 있다.

3. 2. 2. 유동형 레이아웃

화면 크기에 맞춰 레이아웃 폭을 변경하는 방식이다.[1] 고정 폭 레이아웃에서는 화면 크기에 따라 과도한 여백이 생기거나 콘텐츠가 다 들어가지 않는 문제가 있었지만, 유동형 레이아웃은 화면 크기에 따라 유연한 표현이 가능하다. 예를 들어, 위키백과의 이 페이지는 그 기법이 사용되고 있다(2017년 10월 현재).[1]

3. 2. 3. 반응형 레이아웃

3G와 LTE 인터넷 보급이 발전하면서 웹사이트 트래픽의 상당 부분이 모바일 기기로 이동했다. 이러한 변화는 웹 디자인 업계에 영향을 미쳐 미니멀하고 가볍고 단순한 스타일로 변화를 이끌었다. 그 결과 "모바일 우선" 접근 방식이 등장하여, 더 큰 화면 크기에 맞게 적응시키기 전에 모바일 중심 레이아웃을 먼저 만드는 웹사이트 디자인을 강조했다.

휴대 전화 또는 스마트폰의 보급으로 인해, 컴퓨터 이외의 기기에서 웹 페이지를 열람하는 경우가 늘어남에 따라, 어떤 기기에서도 레이아웃이 보기 좋게 표시될 수 있도록 하는 방법이다. 미디어 쿼리 등을 사용하여 접속하는 기기의 크기를 판별하여 그에 따라 레이아웃을 변경할 수 있다.

4. 디자인 원칙 및 기술

HTML4에서는 웹 페이지의 모양을 CSS와 같은 스타일 시트를 사용하는 것을 권장한다. 디자인 원칙에 따르면, HTML은 문서 구조를 기술하고, 디자인은 CSS로 기술한다. 이에 반하는 대표적인 예로, `table` 태그를 사용한 레이아웃을 들 수 있다. 넷스케이프 내비게이터 4.x가 브라우저 시장을 지배하던 시대에, 웹 페이지를 레이아웃하는 데 디자이너가 이용한 인기 있는 수법은 `table` 태그를 사용하는 것이었다. 그리드 레이아웃처럼 페이지를 세밀하게 레이아웃하기 위해서는, 종종 중첩된 여러 겹의 테이블이 필요했다. 원래 테이블은 레이아웃이 아니라, 표 데이터만을 위해 사용되어야 한다.[39]

브라우저 전쟁 말기, CSS를 비교적 잘 구현한 인터넷 익스플로러가 시장을 지배하게 되면서, 웹 디자이너는 페이지를 레이아웃하는 수법으로 CSS를 이용하기 시작했다. HTML5와 CSS3가 사양으로 제정된 이후 특히, 많은 브라우저가 CSS를 최대한 구현하고 있다는 점[40][41], HTML5에서 테이블을 사용한 레이아웃이 '''must not'''이라는 강한 표현으로 금지된 점, 유니버설 디자인을 중시하는 관점에서 접근성 확보와 사용성 향상을 목표로 디자인이 이루어지게 된 점 등을 근거로, CSS를 사용하여 레이아웃을 수행하는 것은 웹 디자이너의 공통 인식으로 확립되어 가고 있다.

어도비 플래시는 브라우저를 통해 웹상에 동적인 콘텐츠와 다양한 미디어, 대화형 페이지를 만들 수 있지만, 사파리 등 Flash를 지원하지 않는 브라우저도 있고, 보안 취약점이 존재한다는 등의 문제가 있다. 이 때문에 접근성의 관점에서는 대체할 HTML을 준비하는 것이 바람직하다. Flash의 파일 형식은 기업인 어도비 (구 매크로미디어)가 제정했으며, 그 사양은 공개되어 있다.[42] 라이선스상, 사양서를 이용하여 해당 파일 형식의 인터프리터를 개발하는 것은 불가능하다.[43] 하지만, 파일을 출력하는 소프트웨어를 구현하는 것은 누구에게나 가능하다. 2020년 말에 Flash Player의 개발과 배포가 종료될 예정이라고 개발원 어도비에서 발표했다.

웹 디자인에서 방문자 모두가 올바르게 정보를 얻을 수 있는 접근성은 중요한 요소이다. 어떤 사용자 에이전트를 사용하든 방문자가 내용을 정확하게 얻을 수 있도록 접근성을 고려한 웹 디자인을 하는 것이 매우 바람직하다. 웹 디자인에서 코드 품질을 높이기 위해 아래와 같은 사항을 고려해야 한다.

고려 사항
특정 사용자 에이전트에서만 표시되거나 읽을 수 있는 콘텐츠는 피해야 한다.
특정 스타일 시트를 적용하지 않아도 기사를 올바르게 읽을 수 있도록 한다.
동적 콘텐츠(스크립트나 애플릿 등)가 동작하지 않는 환경에서도 기사 내용을 읽을 수 있도록 한다. 또는 동적 콘텐츠를 사용하지 않도록 한다.
이미지를 표시할 수 없는 환경에서도 내용을 올바르게 읽을 수 있도록 한다. 이미지를 사용하는 경우에는, `img` 요소의 `alt` 속성을 지정하여 이미지의 개요를 설명한다. (텍스트 브라우저나 음성 지원 사용자 에이전트에 대한 배려)
전경색과 배경색의 대비를 크게 한다. (시각 장애 및 인쇄 시에 대한 배려)
언어 코드를 명시한다. 부분적으로 언어가 다른 경우에는 해당 부분에 대해서도 언어 코드를 명시한다. (음성 지원 사용자 에이전트에 대한 배려)
문자 인코딩을 명시한다.
기종 의존 문자를 사용하지 않는다.


4. 1. 마케팅 및 커뮤니케이션 디자인

웹사이트의 마케팅 및 커뮤니케이션 디자인은 목표 시장에 효과적인 요소를 파악하는 것에서 시작한다. 디자이너는 특정 연령대나 문화적 흐름 등 잠재 고객의 트렌드를 이해해야 한다.[12] 또한 기업간 거래(B2B) 웹사이트와 같이 디자인하는 웹사이트 유형에 따라 디자인 고려 사항이 달라질 수 있다. 예를 들어 B2B 웹사이트는 소비자 대상 웹사이트와 달리 콘텐츠의 명확성, 정확성, 웹 탐색의 용이성이 디자인보다 우선시되어야 한다.[12]

디자이너는 웹사이트를 통해 유리한 이미지를 구축할 수 있도록 소유주 또는 비즈니스의 평판을 고려해야 한다. 웹 디자이너는 웹사이트의 작동 방식, 텍스트, 사진, 그래픽, 레이아웃 등 모든 요소를 지속적으로 업데이트하고 변경한다.[13] 웹사이트 작업을 시작하기 전, 고객과 레이아웃, 색상, 그래픽, 디자인에 대해 논의하고, 다른 디자이너와 함께 테스트, 작업, 마케팅 및 소통을 통해 웹사이트 레이아웃과 적절한 요소를 찾는다.[13]

4. 2. 사용자 경험(UX) 디자인

사용자 경험(UX)은 웹 디자인에서 매우 중요한 요소이다. 사용자 경험 디자인은 레이아웃, 명확한 지침, 웹사이트의 라벨링과 관련이 있으며, 사용자가 사이트를 얼마나 편리하고 효율적으로 이용할 수 있는지에 큰 영향을 미친다.[14] 사용자가 웹사이트의 유용성을 인식하면 계속 사용할 가능성이 높아지기 때문이다.

사용자 경험 디자인은 웹사이트의 인터랙티브 디자인과도 밀접하게 관련되어 있다. 사용자가 사이트에서 어떻게 상호 작용할 수 있는지 얼마나 잘 이해하는지는 인터랙티브 디자인에 달려있다. 따라서, 고급 대화형 기능이 필요한 경우, 플러그인 설치 필요성, 코딩 시간 및 비용, 브라우저 호환성 등을 고려하여 신중하게 결정해야 한다.

사용자 인터페이스 디자인 또한 사용자 경험 디자인의 중요한 부분이다. 페이지 레이아웃 품질은 사용자 인터페이스 디자인에 영향을 미치며, 페이지 픽셀 너비, 객체 정렬 등도 고려해야 할 중요한 요소이다.

2000년대에는 유동형 레이아웃이 인기를 얻었다. 이는 브라우저가 사용자의 화면 크기, 글꼴 크기 등을 고려하여 레이아웃을 조정하는 방식이다.[16] 이는 HTML 테이블 기반 레이아웃이나 그리드 기반 디자인보다 유연하지만, 화면 낭독기 사용 및 다양한 창 크기를 고려해야 하기 때문에 채택 속도가 느렸다.

최근에는 반응형 웹 디자인이 주목받고 있다. 이는 CSS3를 기반으로 하며, 장치별 사양을 더 깊이 설정하여 다양한 기기에서 최적화된 화면을 제공한다. 구글은 2018년 3월부터 모바일 우선 색인 생성을 시작한다고 발표했으며,[17] 반응형 웹 디자인을 사용하는 사이트가 이에 유리하다.

종합하면, 웹 디자인에서 사용자 경험(UX) 디자인은 사용자가 웹 사이트를 편리하고 효율적으로 이용할 수 있도록 설계하는 핵심적인 과정이다. 정보 구조 설계, 인터랙션 디자인, 사용성 테스트 등을 통해 사용성을 최적화해야 한다.

4. 3. 프로그레시브 인핸스먼트

'''프로그레시브 인핸스먼트'''는 웹 디자인 전략으로, 모든 사람이 웹 페이지의 기본적인 내용과 기능에 접근할 수 있도록 웹 콘텐츠를 우선시하며, 추가적인 브라우저 기능이나 더 빠른 인터넷 접속을 가진 사용자에게는 향상된 버전을 제공한다.[15]

이는 HTML을 통해 콘텐츠를 제공하고, CSS를 통해 기술적으로 가능한 범위 내에서 스타일과 애니메이션을 적용한 다음, 자바스크립트를 통해 추가적인 향상을 적용하는 것을 의미한다. 페이지의 텍스트는 자바스크립트가 시작되어 콘텐츠를 로드할 때까지 기다릴 필요 없이 HTML 소스 코드를 통해 즉시 로드되므로, 최소한의 로딩 시간과 대역폭으로 읽을 수 있으며, 텍스트 기반 브라우저를 통해서도 읽을 수 있고, 하위 호환성을 극대화한다.[15]

예를 들어, 미디어위키 기반 사이트는 프로그레시브 인핸스먼트를 사용하며, 자바스크립트와 CSS가 비활성화된 상태에서도 페이지의 콘텐츠가 HTML 소스 코드에 포함되어 있기 때문에 사용할 수 있다.

4. 4. 타이포그래피

웹 디자이너는 다양한 서체나 유형 스타일을 사용하는 대신, 비슷한 스타일의 웹사이트 글꼴을 몇 개로 제한하는 것을 선택할 수 있다. 대부분의 브라우저는 디자이너가 복잡성을 피하기 위해 주로 사용하는 특정 수의 안전한 글꼴을 인식한다.

글꼴 다운로드는 나중에 CSS3 글꼴 모듈에 포함되었으며, 이후 Safari 3.1, Opera 10, Mozilla Firefox 3.5에 구현되었다. 이는 웹 타이포그래피에 대한 관심과 글꼴 다운로드 사용을 증가시켰다.[18]

대부분의 사이트 레이아웃은 텍스트를 단락으로 나누고 가운데 정렬된 텍스트를 피하기 위해 여백을 사용한다.

4. 5. 모션 그래픽

페이지 레이아웃과 사용자 인터페이스는 모션 그래픽의 사용에 영향을 받을 수 있다. 모션 그래픽 사용 여부는 웹사이트의 타겟 시장에 따라 달라질 수 있다. 엔터테인먼트 지향적인 웹사이트에서는 모션 그래픽이 예상되거나 최소한 더 좋은 반응을 얻을 수 있다. 그러나 비즈니스, 커뮤니티, 정부와 같이 더 진지하거나 공식적인 관심사를 가진 웹사이트 타겟 고객은 오락이나 장식 목적으로만 사용되는 애니메이션을 불필요하고 산만하다고 생각할 수 있다. 그렇다고 해서 콘텐츠와 관련된 애니메이션 또는 비디오 프레젠테이션으로 더 진지한 콘텐츠를 향상시킬 수 없다는 의미는 아니다. 어느 경우든, 모션 그래픽 디자인은 보다 효과적인 시각 효과와 산만한 시각 효과 사이의 차이를 만들 수 있다.

사이트 방문자가 시작하지 않은 모션 그래픽은 웹 접근성 문제를 일으킬 수 있다. 월드 와이드 웹 컨소시엄의 접근성 표준은 사이트 방문자가 애니메이션을 비활성화할 수 있도록 요구한다.[19]

4. 6. 코드 품질

웹 디자이너는 표준을 준수하는 것을 좋은 관행으로 여길 수 있다. 이는 일반적으로 요소가 수행하는 작업을 지정하는 설명을 통해 이루어진다. 표준을 준수하지 않는다고 해서 웹사이트를 사용할 수 없거나 오류가 발생하기 쉬운 것은 아니지만, 표준은 읽기 쉽도록 페이지의 올바른 레이아웃과 코드화된 요소가 적절하게 닫혔는지 확인하는 것과 관련될 수 있다. 여기에는 코드 오류, 더 조직적인 코드 레이아웃, ID 및 클래스가 제대로 식별되었는지 확인하는 것이 포함된다. 잘못 코딩된 페이지는 때때로 구어체로 태그 수프라고 불린다. W3C를 통한 유효성 검사[9]는 올바른 DOCTYPE 선언이 이루어진 경우에만 수행할 수 있으며, 이는 코드의 오류를 강조하는 데 사용된다. 이 시스템은 웹 디자인 표준을 준수하지 않는 오류와 영역을 식별한다. 이 정보는 사용자가 수정할 수 있다.[20]

HTML4에서는 웹 페이지의 모양을 CSS와 같은 스타일 시트를 사용하는 것을 권장한다. 디자인의 원칙으로, HTML은 문서 구조를 기술하고, 디자인은 CSS로 기술한다. 이에 반하는 대표적인 예로, `table` 태그를 사용한 레이아웃을 들 수 있다. 넷스케이프 내비게이터 4.x가 브라우저 시장을 지배하던 시대에, 웹 페이지를 레이아웃하는 데 디자이너가 이용한 인기 있는 수법은 `table` 태그를 사용하는 것이었다. 그리드 레이아웃처럼 페이지를 세밀하게 레이아웃하기 위해서는, 종종 중첩된 여러 겹의 테이블이 필요했다. 원래, 테이블은 레이아웃이 아니라, 표 데이터만을 위해 사용되어야 하는 것이다.[39]

브라우저 전쟁 말기, CSS를 비교적 잘 구현한 인터넷 익스플로러가 시장을 지배하게 되면서, 웹 디자이너는 페이지를 레이아웃하는 수법으로 CSS를 이용하기 시작했다.

HTML5와 CSS3가 사양으로 제정된 이후 특히, 많은 브라우저가 CSS를 최대한 구현하고 있다는 점[40][41], HTML5에서 테이블을 사용한 레이아웃이 '''must not'''이라는 강한 표현으로 금지된 점, 유니버설 디자인을 중시하는 관점에서 접근성 확보와 사용성 향상을 목표로 디자인이 이루어지게 된 점 등을 근거로, CSS를 사용하여 레이아웃을 수행하는 것은 웹 디자이너의 공통 인식으로 확립되어 가고 있다.

웹 디자인에서 코드 품질을 높이기 위해 아래와 같은 사항을 고려해야 한다.

고려 사항
특정 사용자 에이전트에서만 표시되거나 읽을 수 있는 콘텐츠는 피해야 한다.
특정 스타일 시트를 적용하지 않아도 기사를 올바르게 읽을 수 있도록 한다.
동적 콘텐츠(스크립트나 애플릿 등)가 동작하지 않는 환경에서도 기사 내용을 읽을 수 있도록 한다. 또는 동적 콘텐츠를 사용하지 않도록 한다.
이미지를 표시할 수 없는 환경에서도 내용을 올바르게 읽을 수 있도록 한다. 이미지를 사용하는 경우에는, `img` 요소의 `alt` 속성을 지정하여 이미지의 개요를 설명한다. (텍스트 브라우저나 음성 지원 사용자 에이전트에 대한 배려)
전경색과 배경색의 대비를 크게 한다. (시각 장애 및 인쇄 시에 대한 배려)
언어 코드를 명시한다. 부분적으로 언어가 다른 경우에는 해당 부분에 대해서도 언어 코드를 명시한다. (음성 지원 사용자 에이전트에 대한 배려)
문자 인코딩을 명시한다.
기종 의존 문자를 사용하지 않는다.


5. 동적 웹 기술

접속 시 열람자나 상황에 따라 콘텐츠를 생성하는 방법에는 두 가지가 있다. 서버 사이드 기술과 클라이언트 사이드 기술이 그것이다.

; XML을 HTML로 변환하는 경우

5. 1. 서버 사이드

웹 서버 측에 준비된 특별한 소프트웨어를 통해 사용자의 요청에 응답하는 HTML 페이지를 자동으로 생성한다. 소프트웨어는 각종 프로그래밍 언어로 작성되는 경우가 많으며, 데이터베이스를 이용하는 경우도 많다.

; 주요 프레임워크

; 주요 언어

; 주요 데이터베이스

; XML을 HTML로 변환하는 경우

5. 2. 클라이언트 사이드

접속 시 열람자나 상황에 따라 콘텐츠를 생성하는 방법에는 두 가지가 있다. 서버에서 발신한 정보를 클라이언트 사이드 (브라우저나 리치 클라이언트 환경)가 다양하게 해석하여 동적인 페이지를 구현한다. 서버에서 스크립트나 애플릿을 포함한 콘텐츠를 보내고, 클라이언트 측에서 해당 스크립트나 애플릿을 실행한다. 이를 통해 HTML로는 표현할 수 없는 장식이나 동적인 페이지가 표현된다. 클라이언트 측에서 사용되는 대표적인 스크립트 언어는 자바스크립트이다. 실행 결과가 실행 환경에 따라 달라지기 때문에, 금전을 다루는 경우 등 작은 오류도 허용되지 않는 경우에는 사용되는 경우가 적다. 또한, SEO 및 접근성에서 다양한 문제가 있다. 사용할 경우에는 대체 텍스트 등이 권장된다.

6. 인공지능과 웹 디자인

챗GPT와 기타 인공지능 모델은 웹사이트 작성과 코딩에 사용되어 웹사이트 생성을 더 빠르고 쉽게 만들어준다. 디자인 과정에서 시간이 많이 소요되는 작업을 위해 AI를 사용하는 것에 더 익숙해짐에 따라, 디자인에 인공지능을 사용하는 것에 대한 윤리적 함의에 대한 논의가 여전히 진행 중이다.[35]

7. 관련 분야

웹 디자인과 관련된 분야는 다음과 같다.

분야분야분야



웹사이트 제작에는 웹 디자이너와 웹 개발자라는 두 가지 주요 직업이 있으며, 이들은 웹사이트에서 종종 긴밀하게 협력한다.[34] 웹 디자이너는 웹 페이지의 레이아웃, 색상, 타이포그래피를 포함한 시각적 측면을 담당한다.

웹사이트 제작에 참여할 수 있는 추가 직업은 다음과 같다.


  • 로고, 레이아웃, 버튼 등 사이트의 시각 자료를 제작하는 그래픽 디자이너
  • 인터넷에서 마케팅 및 프로모션 기법을 사용하여, 사이트의 시청자를 타겟팅하는 전략적 솔루션을 통해 웹 존재감을 유지하는 데 도움을 주는 인터넷 마케팅 전문가
  • 특정 웹사이트에 통합할 올바른 단어를 조사하고 권장하며, 수많은 검색 엔진에서 웹사이트의 접근성을 높이고 검색될 수 있도록 하는 SEO 작가
  • 사이트의 타겟 시청자에게 어필할 페이지의 텍스트 콘텐츠를 만드는 인터넷 카피라이터[1]
  • 사용자 경험 (UX) 디자이너는 정보 아키텍처, 사용자 중심 디자인, 사용자 테스트, 상호 작용 디자인 및 때때로 시각 디자인을 포함하는 사용자 중심 디자인 고려 사항의 측면을 통합한다.

참조

[1] 웹사이트 Different jobs and responsibilities of various people involved in creating a website https://www.arts-wal[...] Arts Wales UK 2012-03-17
[2] 웹사이트 The History of Website Design: 30 Years of Building the Web [2022 Update] https://www.smamarke[...] 2022-10-12
[3] 웹사이트 Longer Biography http://www.w3.org/Pe[...] 2012-03-16
[4] 웹사이트 Mosaic Browser http://www.techopedi[...] 2012-03-16
[5] 서적 Building Internet Firewalls https://archive.org/[...] O'Reily & Associates
[6] 서적 Web Design In a Nutshell https://books.google[...] O'Reilly Media
[7] 웹사이트 The Evolution of Web Design http://sixrevisions.[...] Six Revisions
[8] 웹사이트 AMO.NET America's Multimedia Online (Internet Explorer 6 PREVIEW) http://amo.net/NT/01[...] 2020-05-27
[9] 웹사이트 W3C Markup Validation Service http://validator.w3.[...]
[10] 웹사이트 Web Accessibility Initiative (WAI) http://www.w3.org/WA[...]
[11] 웹사이트 What is Web Design? https://www.interact[...] 2022-10-12
[12] 학술지 The Role of Aesthetics in Web Design
[13] 웹사이트 What is a Web Designer? (2022 Guide) https://brainstation[...] 2022-10-28
[14] 학술지 Web Acceptance Model (WAM): Moderating effects of user experience
[15] 웹사이트 Building a resilient frontend using progressive enhancement https://www.gov.uk/s[...] 2021-10-27
[16] 문서 <table>-based markup and [[spacer .GIF]] images
[17] 뉴스 Rolling out mobile-first indexing https://webmasters.g[...] 2018-06-09
[18] 웹사이트 20 Do's and Don'ts of Effective Web Typography http://webdesignledg[...] 2012-03-19
[19] 웹사이트 World Wide Web Consortium: Understanding Web Content Accessibility Guidelines 2.2.2: Pause, Stop, Hide http://www.w3.org/TR[...]
[20] 웹사이트 My Web site is standard! And yours? http://www.w3.org/QA[...] 2012-03-21
[21] 웹사이트 Static Website Generators Reviewed: Jekyll, Middleman, Roots, Hugo https://www.smashing[...] 2016-10-26
[22] 웹사이트 Is Your Homepage Doing What It Should? http://www.usableint[...] Usable Interface
[23] 웹사이트 The Ten Most Violated Homepage Design Guidelines http://www.nngroup.c[...] Nielsen Norman Group 2003-11-10
[24] 웹사이트 Essential Tips for Designing an Effective Homepage http://sixrevisions.[...] Six Revisions 2009-08-20
[25] 웹사이트 Is Home Page Design Relevant Anymore? http://www.uie.com/b[...] User Interface Engineering 2005-09-29
[26] 웹사이트 10 Usability Tips Based on Research Studies http://sixrevisions.[...] Six Revisions 2010-09-15
[27] 웹사이트 Myth #17: The homepage is your most important page http://uxmyths.com/p[...]
[28] 웹사이트 The decline of the homepage http://giraffeforum.[...] 2010-04-18
[29] 웹사이트 Prioritizing Design Time: A Long Tail Approach http://www.uie.com/a[...] User Interface Engineering 2006-04-24
[30] 웹사이트 Usability Tools Podcast: Home Page Design http://www.uie.com/b[...] 2007-08-06
[31] 웹사이트 Image Carousels: Getting Control of the Merry-Go-Round http://www.usability[...] Usability.gov 2013-04-22
[32] 웹사이트 Homepage Sliders: Bad For SEO, Bad For Usability http://searchenginel[...] 2013-06-19
[33] 웹사이트 Image Carousels and Sliders? Don't Use Them. (Here's why.) https://cxl.com/blog[...] CXL 2019-06-08
[34] 서적 Careers in Web Design https://archive.org/[...] The Rosen Publishing Group, Inc.
[35] 서적 ChatGPT for Web Design : Create Amazing Websites PACKT Publishing
[36] 웹사이트 https://mayonez.jp/t[...]
[37] 웹사이트 https://qiita.com/a_[...]
[38] 웹사이트 http://sandsun.jp/co[...]
[39] 문서 아무런 맥락에서 테이블 사용이 문제라고 오해하여, 표 데이터 마크업에도 테이블을 기피하는 경우가 많이 보인다. 물론 표 데이터를 테이블로 마크업하는 것은 적절하다.
[40] 문서 최신 브라우저에서는 CSS에서의 큰 문제는 해결되었지만, 과거 브라우저(Microsoft Internet Explorer 6이나 Netscape Navigator 등)에서는 그렇지 않다. 사용자는 오래된 브라우저를 계속 사용하는 경우가 많으므로, 디자이너는 사용할 수 있는 스타일 등에 주의해야 한다.
[41] 웹사이트 http://caniuse.com/
[42] 웹사이트 http://www.adobe.com[...]
[43] 웹사이트 http://www.adobe.com[...]
[44] 웹인용 Berners-Lee on the read/write web http://news.bbc.co.u[...] BBC 뉴스


본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com