Page semi-protected

웹 디자인

Web design

웹 디자인은 웹 사이트의 제작과 유지보수에 있어 다양한 기술과 분야를 포함합니다.웹 디자인의 다양한 분야에는 웹 그래픽 디자인, 사용자 인터페이스 디자인(UI 디자인), 표준화된 코드와 독점 소프트웨어를 포함한 저작, 사용자 경험 디자인(UX 디자인), 검색 엔진 최적화 등이 있습니다.설계 프로세스의 다양한 측면을 다루는 팀이 많은 사람들이 작업하는 경우가 많습니다.다만, 일부의 설계자는 모든 [1]측면을 커버합니다."웹 디자인"이라는 용어는 일반적으로 문서 마크업을 포함한 웹 사이트의 프런트 엔드(클라이언트 측) 디자인과 관련된 설계 프로세스를 설명하기 위해 사용됩니다.웹 디자인은 광범위한 웹 개발 범위에서 웹 엔지니어링과 부분적으로 겹칩니다.웹 디자이너는 사용성에 대한 인식을 갖고 웹 접근성 지침을 최신 상태로 유지해야 합니다.

역사

매장 내 웹 디자인 서적

1988–2001

웹 디자인은 꽤 최근의 역사를 가지고 있지만요.그래픽 디자인, 사용자 경험, 멀티미디어 아트 등 다른 분야와 연계할 수 있지만 기술적 관점에서 보면 더 적합하다.그것은 사람들의 일상생활의 큰 부분이 되었다.애니메이션 그래픽, 다양한 스타일의 타이포그래피, 배경, 비디오, 음악 없이 인터넷을 상상하는 것은 어렵다.

웹 및 웹 디자인의 시작

1989년 CERN에서 일하는 동안 Tim Berners-Lee는 글로벌 하이퍼텍스트 프로젝트(이후 월드 와이드 웹으로 알려짐)를 만들자고 제안했습니다.1991년부터 1993년까지 월드 와이드 웹이 탄생했습니다.텍스트 전용 페이지는 단순한 [2]라인 모드브라우저를 사용하여 표시할 수 있습니다.1993년 Marc Andreessen과 Eric Bina는 Mosaic 브라우저를 만들었습니다.그 당시에는 여러 개의 브라우저가 있었지만 대부분은 유닉스 기반이었고 자연스럽게 텍스트가 무거웠다.이미지나 소리와 같은 그래픽 디자인 요소에 대한 통합된 접근 방식은 없었습니다.모자이크 브라우저는 이 [3]틀을 깼다.W3C는 1994년 10월 "월드 와이드 웹의 진화를 [4]촉진하고 상호 운용성을 보장하는 공통 프로토콜을 개발함으로써 월드 와이드 웹의 잠재력을 최대한 끌어내기 위해" 만들어졌다.이로 인해 어떤 회사도 전용 브라우저와 프로그래밍 언어를 독점하지 못하게 되었고, 이는 월드 와이드 웹의 효과를 전체적으로 변화시킬 수 있었다.W3C는 계속해서 표준을 설정하고 있으며, 이는 현재 JavaScript 및 기타 언어로 확인할 수 있습니다.1994년 Andreessen은 후에 Netscape 0.9 브라우저인 Netscape Communications로 알려지게 된 Mosaic Communications Corp.를 설립했다.Netscape는 기존의 표준 프로세스에 관계없이 자체 HTML 태그를 만들었습니다.예를 들어 Netscape 1.1에는 배경색을 변경하고 웹 페이지의 테이블로 텍스트를 포맷하기 위한 태그가 포함되어 있습니다.1996년부터 1999년까지 브라우저 전쟁은 마이크로소프트와 넷스케이프가 궁극적인 브라우저 우위를 차지하기 위해 싸웠기 때문에 시작되었다.이 기간 동안 이 분야에는 Cascading Style Sheets, JavaScript, Dynamic HTML 등 많은 새로운 테크놀로지가 있었습니다.전체적으로 브라우저의 경쟁은 많은 긍정적인 창조로 이어졌고 웹 디자인이 [5]빠른 속도로 발전하는 데 도움이 되었습니다.

웹 디자인의 진화

1996년 마이크로소프트는 자체 기능과 HTML 태그를 갖춘 최초의 경쟁 브라우저를 출시했다.또한 스타일시트를 지원하는 최초의 브라우저로 당시에는 불분명한 오서링 기법으로 여겨졌으며 오늘날 웹 디자인의 [5]중요한 측면입니다.테이블의 HTML 마크업은 원래 표 형식의 데이터를 표시하기 위한 것입니다.그러나 설계자들은 HTML 테이블을 사용하여 그렇지 않으면 불가능한 복잡한 다중 열 레이아웃을 만들 수 있다는 가능성을 빠르게 깨달았습니다.이때 디자인과 좋은 미학이 좋은 마크업 구조보다 우선하는 것처럼 보였고 의미론이나 웹 접근성에는 거의 관심이 없었다.HTML 사이트들은 디자인 옵션이 제한되었고, 이전 버전의 HTML에서는 더욱 제한적이었다. 복잡한 디자인을 만들기 위해, 많은 웹 디자이너들은 복잡한 테이블 구조를 사용하거나 심지어 빈 스페이서를 사용해야 했다.빈 테이블 셀이 [6]접히는 것을 막기 위한 GIF 이미지.CSS는 프레젠테이션과 레이아웃을 지원하기 위해 W3C에 의해 1996년 12월에 도입되었습니다.이를 통해 HTML 코드는 의미와 프레젠테이션이 아닌 의미성을 가질 수 있었고 웹 접근성이 향상되었습니다(테이블리스 웹 디자인 참조).

1996년에 플래시(원래 FutureSplash)가 개발되었습니다.당시 Flash 콘텐츠 개발 툴은 기본적인 레이아웃과 그리기 툴, ActionScript의 제한된 선구자, 타임라인을 사용하여 현재에 비해 비교적 단순했지만 웹 디자이너는 HTML, 애니메이션 GIF 및 JavaScript의 한계를 넘어설 수 있었습니다.그러나 플래시에 플러그인이 필요했기 때문에 많은 웹 개발자들은 호환성 부족으로 인해 시장 점유율이 제한될 것을 우려하여 플러그인의 사용을 피했습니다.대신 디자이너는 gif 애니메이션(동작 그래픽을 완전히 사용하지 않는 경우)과 위젯용 JavaScript로 되돌아갔습니다.그러나 플래시의 장점은 특정 타깃 시장 사이에서 충분히 인기를 끌었고 결국 대부분의 브라우저에 적용되며 전체 [6]사이트를 개발하는 데 사용될 만큼 강력했다.

첫 번째 브라우저 전쟁 종료

상세 정보:브라우저 전쟁 © 제1차 브라우저 전쟁 (1995-2001)

1998년 Netscape는 오픈 소스 라이선스로 Netscape Communicator 코드를 출시하여 수천 명의 개발자들이 소프트웨어 개선에 참여할 수 있도록 하였다.그러나 이들 개발자는 웹에 대한 표준을 처음부터 시작하기로 결정하였고, 이는 오픈 소스 브라우저의 개발을 이끌었고 곧 완전한 애플리케이션 [5]플랫폼으로 확장되었습니다.Web Standards Project는 HTML 및 CSS 표준에 대한 브라우저 컴플라이언스를 확립하여 촉진하였습니다.Acid1, Acid2, Acid3 등의 프로그램은 브라우저가 웹 표준을 준수하는지 테스트하기 위해 작성되었습니다.2000년 Internet Explorer는 HTML 4.01과 CSS 1을 완전히 지원하는 최초의 브라우저인 Mac용으로 출시되었습니다.또한 [5]PNG 이미지 포맷을 완전히 지원하는 최초의 브라우저이기도 합니다.2001년, Microsoft가 Internet Explorer를 보급하기 위한 캠페인을 벌인 후, Internet Explorer는 웹 브라우저 사용률 96%에 도달했습니다.이것은 Internet Explorer가 실제 [7]경쟁 상대가 없었기 때문에 최초의 브라우저 전쟁이 끝났음을 의미합니다.

2001–2012

21세기 초부터 웹은 사람들의 삶에 점점 더 통합되었다.이 일이 일어나면서 웹의 기술도 발전했다.사람들이 웹을 사용하고 접속하는 방식에도 큰 변화가 있었고, 이는 사이트 설계 방식을 바꾸어 놓았다.

브라우저[when?] 전쟁이 끝난 후 새로운 브라우저가 출시되었습니다.이들 중 상당수는 오픈 소스입니다.즉, 개발 속도가 빨라지고 새로운 표준을 지원하는 경향이 있습니다.많은[weasel words] 사람들이 새로운 옵션을 마이크로소프트의 Internet Explorer보다 더 낫다고 생각한다.

W3C는 HTML(HTML5)과 CSS(CSS3)에 대한 새로운 표준과 새로운 JavaScript API를 각각 새로운 개별 [when?]표준으로 출시했습니다.HTML5라는 용어는 HTML의 새로운 버전과 JavaScript API의 일부만을 지칭하는 데 사용되지만, 새로운 표준(HTML5, CSS3, JavaScript)의 전체 스위트를 지칭하는 데 사용하는 것이 일반적이 되었습니다.

2012년 이후

3G와 LTE 인터넷 커버리지의 향상으로 웹사이트 트래픽의 상당 부분이 모바일로 생성되었습니다.이는 웹 디자인 산업에 영향을 미쳤고, 이를 최소화하고, 가볍고, 단순화된 스타일로 이끌었습니다.특히 모바일 지향 레이아웃으로 웹 사이트 디자인을 먼저 만든 뒤 더 높은 화면 차원에 맞춰야 한다는 '모바일 퍼스트' 방식이 등장했다.

도구와 테크놀로지

웹 디자이너는 자신이 관여하는 생산 프로세스의 일부에 따라 다양한 도구를 사용합니다.이러한 툴은 새로운 표준과 소프트웨어에 의해 시간이 지남에 따라 갱신되지만, 그 배경의 원칙은 변하지 않습니다.웹 디자이너는 벡터 및 래스터 그래픽 편집기를 모두 사용하여 웹 형식의 이미지를 만들거나 프로토타입을 디자인합니다.웹사이트를 만드는 데 사용되는 기술로는 HTML이나 CSS와 같은 W3C 표준이 있으며, WYSIWYG 편집 소프트웨어로 손으로 코딩하거나 생성할 수 있습니다.웹 디자이너가 사용할 수 있는 기타 도구에는 웹 사이트가 웹 접근성 [9]가이드라인을 충족하는지 확인하기 위한 사용성과 접근성을 위한 마크업 검증[8] 도구 및 기타 테스트 도구가 있습니다.

스킬과 테크닉

마케팅 및 커뮤니케이션 설계

웹 사이트의 마케팅 및 커뮤니케이션 디자인은 목표 시장에 적합한 것을 식별할 수 있습니다.이것은 연령대나 특정 문화의 가닥일 수 있습니다.따라서 디자이너는 청중의 경향을 이해할 수 있습니다.또한 설계자는 자신이 설계하는 웹사이트의 유형을 이해할 수 있습니다. 즉, (B2B) 기업간 웹사이트 설계 고려사항은 소매 또는 엔터테인먼트 웹사이트와 같은 소비자 대상 웹사이트와 크게 다를 수 있습니다.특히 B2B 웹사이트에서 사이트의 미학이나 전체적인 설계가 콘텐츠의 명확성과 정확성 또는 웹 [10]내비게이션의 용이성과 충돌하지 않도록 주의 깊게 검토할 수 있습니다.또한 설계자는 사이트가 나타내는 오너 또는 비즈니스의 평판을 고려하여 그들이 호의적으로 묘사되도록 할 수 있습니다.

사용자 경험 설계 및 인터랙티브 설계

웹 사이트의 내용에 대한 사용자의 이해는 웹 사이트의 작동 방식에 대한 사용자의 이해에 좌우되는 경우가 많습니다.이것은 사용자 경험 설계의 일부입니다.사용자 경험은 웹 사이트의 레이아웃, 명확한 지침 및 라벨링과 관련이 있습니다.사용자가 사이트에서 상호 작용할 수 있는 방법을 얼마나 잘 이해하는지는 사이트의 대화형 설계에 따라 달라질 수 있습니다.사용자가 웹 사이트의 유용성을 인식하면 계속 사용할 가능성이 높아집니다.웹 사이트 사용에 정통하고 숙련된 사용자는 더 독특하지만 직관적이지 않거나 사용자 친화적이지 않은 웹 사이트 인터페이스가 유용할 수 있습니다.그러나 경험이 적은 사용자는 직관적이지 않은 웹 사이트 인터페이스의 장점이나 유용성을 덜 볼 수 있습니다.이것에 의해, 유저의 [11]스킬에 관계없이 가능한 한 많은 유저를 수용할 수 있도록, 보다 보편적인 유저 익스피리언스와 액세스의 용이성이 향상됩니다.사용자 경험 설계와 인터랙티브 설계의 대부분은 사용자 인터페이스 설계에서 고려됩니다.

고급 인터랙티브 기능에는 고급 코딩 언어 기술이 아니면 플러그인이 필요할 수 있습니다.플러그인이 필요한 인터랙티브 사용 여부는 사용자 경험 설계에서 중요한 결정 사항입니다.대부분의 브라우저에 플러그인이 프리 인스톨 되어 있지 않은 경우는, 컨텐츠에 액세스 하기 위해서만 플러그인을 인스톨 할 수 있는 방법과 인내심을 유저에게 빼앗길 우려가 있습니다.기능이 고급 코딩 언어 기술을 필요로 하는 경우, 기능이 사용자 경험에 추가하는 기능 강화에 비해 코딩하는 데 시간 또는 비용이 너무 많이 들 수 있습니다.또, 고도의 인터랙티브가 낡은 브라우저나 하드웨어 구성과 호환성이 없는 경우도 있습니다.신뢰할 수 없는 기능을 게시하는 것은 시도하지 않는 것보다 사용자 경험에 좋지 않을 수 있습니다.그것이 필요할 것 같거나 위험을 감수할 가치가 있는지 여부는 대상 독자에게 달려 있습니다.

점진적 확장

점진적 강화 순서
주요 기사: 점진적 확장

프로그레시브 확장이란 웹 콘텐츠에 중점을 두고 누구나 웹 페이지의 기본 콘텐츠와 기능에 액세스할 수 있도록 하는 웹 디자인 전략입니다.또, 브라우저의 추가 기능이나 고속의 인터넷 액세스를 가지는 유저에게는, 그 대신에 확장 버전이 제공됩니다.

실제로는 HTML을 통해 콘텐츠를 제공하고 CSS를 통해 스타일링 및 애니메이션을 기술적으로 가능한 범위까지 적용한 후 JavaScript를 통해 더욱 향상된 기능을 적용하는 것을 의미합니다.페이지의 텍스트는 JavaScript가 콘텐츠를 시작 및 로드하는 것을 기다리지 않고 HTML 소스 코드를 통해 즉시 로드되므로 최소한의 로드 시간과 대역폭으로 콘텐츠를 읽을 수 있으며 텍스트 기반 브라우저를 통해 이전 버전과의 [12]호환성을 극대화할 수 있습니다.

예를 들어 Wikipedia를 포함한 MediaWiki 기반 사이트는 JavaScript 및 CSS가 비활성화되어 있는 동안에도 페이지 내용이 페이지의 HTML 소스 코드에 포함되어 있기 때문에 점진적인 확장을 사용합니다.반례 Everipedia는 JavaScript에 의존하여 페이지 내용을 로드합니다.빈 페이지가 JavaScript deac과 함께 표시됩니다.길들여졌다.

페이지 레이아웃

사용자 인터페이스 설계의 일부는 페이지 레이아웃의 품질에 영향을 받습니다.예를 들어, 설계자는 레이아웃을 설계할 때 사이트의 페이지 레이아웃이 다른 페이지에서 일관성을 유지해야 하는지 여부를 고려할 수 있습니다.페이지 픽셀 폭은 레이아웃 설계에서 객체를 정렬하는 데 필수적인 것으로 간주될 수도 있습니다.일반적으로 가장 인기 있는 고정 폭의 웹 사이트는 현재 가장 인기 있는 브라우저 창의 화면 해상도와 현재 가장 인기 있는 모니터 크기를 일치시키기 위해 동일한 설정 폭을 가집니다.또한 대부분의 페이지는 큰 화면의 미관을 고려하여 중앙에 정렬되어 있습니다.

2000년 경에 유체 레이아웃의 인기가 높아져 브라우저가 판독기의 화면 상세(창 크기, 창과 관련된 글꼴 크기 등)에 따라 사용자 고유의 레이아웃을 조정할 수 있게 되었습니다.페이지 레이아웃 설계 원리와 코딩 기술 모두에서 HTML 테이블 기반 레이아웃과 그리드 기반 설계의 대안으로 성장했지만 [note 1]채택이 매우 느렸습니다.이는 설계자가 제어할 수 없는 화면 판독 장치와 다양한 윈도우 크기를 고려했기 때문입니다.따라서 디자인은 브라우저로 전송되고 브라우저에 의해 디스플레이 창에 최대한 맞춰지는 단위(사이드바, 콘텐츠 블록, 임베디드 광고 영역, 내비게이션 영역)로 분할될 수 있습니다.이러한 디스플레이는 종종 주요 콘텐츠 단위의 상대적 위치를 변경할 수 있지만 사이드바는 측면보다는 본문 텍스트 아래로 이동될 수 있습니다.디바이스 창에 맞지 않는 하드 코드화된 그리드 기반 레이아웃보다 유연한 디스플레이입니다.특히 블록 내의 콘텐츠는 영향을 받지 않으면서 콘텐츠 블록의 상대 위치가 변경될 수 있습니다.이것에 의해, 유저가 페이지를 수평으로 스크롤 할 필요도 최소한으로 억제됩니다.

응답성이 뛰어난 Web 설계는 CSS3에 기초한 새로운 접근법이며, CSS의 강화된 사용을 통해 페이지 스타일시트 내의 디바이스별 사양을 보다 상세하게 할 수 있습니다.@media2018년 3월 구글은 모바일 우선 [13]인덱싱을 출시할 것이라고 발표했다.응답성이 뛰어난 설계를 사용하는 사이트는 이 새로운 접근방식을 확실하게 충족할 수 있도록 배치되어 있습니다.

타이포그래피

주요 기사: 타이포그래피

웹 디자이너는 광범위한 서체 또는 서체 스타일을 사용하는 대신 유사한 형식의 웹 사이트 서체 종류를 몇 개로 제한할 수 있습니다.대부분의 브라우저는 특정 수의 안전한 글꼴을 인식하며, 디자이너는 복잡한 문제를 피하기 위해 주로 이 글꼴을 사용합니다.

글꼴 다운로드는 나중에 CSS3 글꼴 모듈에 포함되었으며 이후 Safari 3.1, Opera 10 및 Mozilla Firefox 3.5에서 구현되었습니다.그 후 웹 타이포그래피와 폰트 다운로드에 대한 관심이 높아졌습니다.

대부분의 사이트 레이아웃에는 텍스트를 단락으로 분할하고 가운데 정렬된 텍스트를 피하기 위한 [14]음의 공간이 포함되어 있습니다.

모션 그래픽스

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

사이트 방문자가 시작하지 않은 모션 그래픽으로 인해 접근성 문제가 발생할 수 있습니다.World Wide Web Consortium Accessibility 표준에서는 사이트 방문자가 [15]애니메이션을 비활성화할 수 있어야 합니다.

코드 품질

웹 사이트 설계자는 표준을 준수하는 것이 좋은 관행이라고 생각할 수 있습니다.이것은 보통 요소의 동작을 지정하는 설명을 통해 수행됩니다.표준에 준거하지 않는다고 해서, Web 사이트를 사용할 수 없거나 에러가 발생하기 쉬운 것은 아닙니다만, 표준에서는, 코드화된 요소가 적절히 닫혀 있는 것을 확인할 수 있을 뿐만 아니라, 읽기 쉽도록 페이지를 올바르게 레이아웃 할 수 있습니다.여기에는 코드의 오류, 코드의 보다 조직화된 레이아웃, ID 및 클래스가 올바르게 식별되는 것이 포함됩니다.코드화 상태가 좋지 않은 페이지를 구어체로 태그 수프라고 부르기도 합니다.W3C를[8] 통한 검증은 코드의 오류를 강조 표시하는 데 사용되는 올바른 DOSCTYPE 선언이 이루어진 경우에만 수행할 수 있습니다.시스템은 웹 설계 표준에 준거하지 않는 오류 및 영역을 식별합니다.이 정보는 사용자가 [16]수정할 수 있습니다.

생성된 콘텐츠

웹 사이트를 생성하는 방법에는 정적 또는 동적 두 가지가 있습니다.

정적 웹 사이트

주요 기사:정적 웹 페이지

정적 웹 사이트는 정적 웹 사이트의 모든 페이지마다 고유한 파일을 저장합니다.페이지가 요청될 때마다 동일한 내용이 반환됩니다.이 콘텐츠는 웹사이트 설계 중에 한 번 작성됩니다.이것은 보통 수동으로 작성되지만, 일부 사이트에서는 결과가 완료된 페이지로 장기간 저장되는 동적 웹 사이트와 유사한 자동 생성 프로세스를 사용합니다.자동으로 생성된 이러한 정적 사이트는 2015년경 지킬과 Adobe [17]Muse와 같은 생성기를 통해 더욱 인기를 끌게 되었습니다.

정적 웹 사이트의 장점은 서버가 정적 콘텐츠만 제공하면 되고 서버 측 스크립트는 실행되지 않기 때문에 호스트하기가 더 간단하다는 것입니다.이로 인해 서버 관리가 덜 필요했고 보안 취약점이 노출될 가능성도 줄어들었습니다.또, 저비용의 서버 하드웨어로 페이지를 보다 신속히 처리할 수 있었습니다.저렴한 웹 호스팅이 확장되어 동적 기능도 제공되고 가상 서버는 짧은 간격으로 저렴한 비용으로 높은 성능을 제공함에 따라 이러한 이점은 그다지 중요하지 않게 되었습니다.

거의 모든 웹 사이트에는 정적 콘텐츠가 있습니다. 이미지나 스타일시트 등의 지원 자산은 동적 페이지가 매우 많은 웹 사이트에서도 정적입니다.

동적 웹 사이트

주요 기사:동적 웹 페이지

동적 웹 사이트는 즉시 생성되며 서버 측 기술을 사용하여 웹 페이지를 생성합니다.일반적으로 1개 이상의 백엔드 데이터베이스에서 콘텐츠를 추출합니다.어떤 것은 카탈로그를 조회하거나 수치 정보를 요약하기 위한 릴레이셔널 데이터베이스 또는 MongoDB나 NoSQL 등의 문서 데이터베이스를 사용하여 블로그 게시물이나 Wiki 기사 등의 대규모 콘텐츠를 저장할 수 있습니다.

설계 프로세스에서 동적 페이지는 종종 정적 페이지를 사용하여 조롱되거나 와이어 프레임화됩니다.동적 웹 페이지를 개발하는 데 필요한 스킬셋은 정적 페이지보다 훨씬 광범위하며, 서버 측 및 데이터베이스 코딩과 클라이언트 측 인터페이스 설계를 포함합니다.따라서 중간 규모의 동적 프로젝트도 거의 항상 팀워크입니다.

동적 웹 페이지가 처음 개발되었을 때 일반적으로 Perl, PHP 또는 ASP와 같은 언어로 직접 코딩되었습니다.이들 중 일부, 특히 PHP와 ASP는 서버 측 페이지가 완성된 클라이언트 측 페이지의 구조와 비슷하고 데이터가 '태그'로 정의된 위치에 삽입되는 '템플릿' 접근 방식을 사용했습니다.이는 Perl과 같은 순수 절차적 코딩 언어로 코딩하는 것보다 더 빠른 개발 수단이었다.

이 두 가지 접근 방식 모두 콘텐츠 관리 시스템과 같은 애플리케이션 중심의 고급 도구로 많은 웹 사이트에서 대체되었습니다.이들은 범용 코딩 플랫폼을 기반으로 구축되며, 웹 사이트가 시간순으로 작성된 블로그, 주제지 또는 뉴스 사이트, Wiki 또는 사용자 포럼 등 잘 알려진 몇 가지 모델 중 하나에 따라 콘텐츠를 제공하는 것으로 가정합니다.이러한 툴에 의해, 이러한 사이트의 실장은 매우 간단하게 실시할 수 있습니다.또한 코딩은 필요 없습니다.

콘텐츠 자체(템플릿 페이지도 포함) 편집은 사이트 자체와 서드파티 소프트웨어를 사용하여 수행할 수 있습니다.모든 페이지를 편집할 수 있는 기능은 특정 카테고리의 사용자(관리자 또는 등록된 사용자 등)에게만 제공됩니다.경우에 따라 익명 사용자가 특정 웹 콘텐츠를 편집할 수 있으며, 편집 빈도는 낮아집니다(예: 포럼 - 메시지 추가).익명으로 변경된 사이트의 예로는 위키피디아가 있습니다.

홈페이지 디자인

Jakob Nielsen과 Kyle Soucy를 포함한 사용성 전문가들은 종종 웹사이트의 [18]성공을 위한 홈페이지 디자인을 강조하며 웹사이트에서 홈페이지가 가장 중요한 페이지라고 주장해 왔다.닐센, 야코프, 타히르, 마리(2001년 10월), 홈페이지 사용 적합성:50웹 사이트 Deconstructed, 뉴 라이더 출판사, 국제 표준 도서 번호는 2000년대에 978-0735711020[19][20]그러나 의사들이 웹 사이트 트래픽의 수가 점차 많아지고 홈페이지를 피했다, 직접 내부 콘텐츠 페이지에 검색 엔진, e-newsletters을 찾기 시작했다. 그리고 RSS피드.[21]많은 실무자들이 홈페이지는 대부분의 사람들이 [22][23][24][25]생각하는 것보다 덜 중요하다고 주장하도록 유도한다.Jared Spool은 2007년에 사이트의 [26]홈페이지는 사실 웹사이트에서 가장 중요하지 않은 페이지라고 주장했다.

2012년과 2013년에 회전식 배너('슬라이더' 및 '회전식 배너'라고도 함)는 홈페이지에서 매우 인기 있는 디자인 요소가 되었으며, 좁은 공간에서 [27][28]특집 또는 최근 콘텐츠를 보여주는 데 자주 사용되고 있습니다.많은 실무자들은 회전목마가 비효율적인 디자인 요소이며 웹사이트의 검색 엔진 최적화와 [28][29][30]사용성을 해친다고 주장한다.

직업

웹사이트를 만드는 데는 주로 두 가지 일이 있습니다. 웹 디자이너와 웹 개발자는 종종 웹사이트에서 [31]긴밀히 협력합니다.웹 디자이너는 웹 페이지의 레이아웃, 색칠 및 인쇄술을 포함한 시각적 측면을 담당합니다.웹 디자이너는 HTML이나 CSS와 같은 마크업 언어에 대한 실무 지식도 가지고 있지만, 지식의 정도는 웹 디자이너마다 다릅니다.특히 소규모 조직에서는 한 사람이 전체 웹 페이지를 설계하고 프로그래밍하는 데 필요한 기술을 필요로 하지만 대규모 조직에서는 시각적 측면만 담당하는 웹 디자이너가 있을 수 있습니다.

웹 사이트 작성에 관여할 수 있는 기타 작업은 다음과 같습니다.

  • 로고, 레이아웃, 버튼 등 사이트의 비주얼을 작성하는 그래픽 디자이너
  • 인터넷 마케팅 스페셜리스트는 사이트 시청자를 대상으로 한 전략적인 솔루션을 통해 인터넷에서의 마케팅 및 판촉 기법을 사용하여 웹의 존재감을 유지할 수 있도록 지원합니다.
  • SEO 라이터는 특정 웹사이트에 삽입할 올바른 단어를 조사 및 추천하여 웹사이트 접근성을 높이고 다양한 검색 엔진에서 찾을 수 있도록 합니다.
  • 사이트의[1] 대상 시청자에게 어필하기 위해 페이지의 쓰여진 내용을 만드는 인터넷 카피라이터
  • 사용자 경험(UX) 설계자는 정보 아키텍처, 사용자 중심 설계, 사용자 테스트, 인터랙션 설계 및 경우에 따라 시각적 설계를 포함하는 사용자 중심 설계 고려 사항을 통합합니다.

「 」를 참조해 주세요.

「 」를 참조해 주세요.

관련 분야

메모들

  1. ^ <table>- 베이스 마크업 및 스페이서.GIF 이미지
  1. ^ a b Lester, Georgina. "Different jobs and responsibilities of various people involved in creating a website". Arts Wales UK. Retrieved 2012-03-17.
  2. ^ "Longer Biography". Retrieved 2012-03-16.
  3. ^ "Mosaic Browser" (PDF). Archived from the original (PDF) on 2013-09-02. Retrieved 2012-03-16.
  4. ^ Zwicky, E.D, Cooper, S and Chapman, D.B. (2000). Building Internet Firewalls. United States: O’Reily & Associates. p. 804. ISBN 1-56592-871-7.{{cite book}}: CS1 maint: 작성자 파라미터 사용(링크)
  5. ^ a b c d Niederst, Jennifer (2006). Web Design In a Nutshell. United States of America: O'Reilly Media. pp. 12–14. ISBN 0-596-00987-9.
  6. ^ a b Chapman, Cameron, The Evolution of Web Design, Six Revisions, archived from the original on 30 October 2013
  7. ^ "AMO.NET America's Multimedia Online (Internet Explorer 6 PREVIEW)". amo.net. Retrieved 2020-05-27.
  8. ^ a b "W3C Markup Validation Service".
  9. ^ W3C. "Web Accessibility Initiative (WAI)".
  10. ^ THORLACIUS, LISBETH (2007). "The Role of Aesthetics in Web Design". Nordicom Review. 28 (28): 63–76. doi:10.1515/nor-2017-0201. S2CID 146649056. Archived from the original on 2021-02-24. Retrieved 2014-07-18.
  11. ^ Castañeda, J.A Francisco; Muñoz-Leiva, Teodoro Luque (2007). "Web Acceptance Model (WAM): Moderating effects of user experience". Information & Management. 44 (4): 384–396. doi:10.1016/j.im.2007.02.003.
  12. ^ "Building a resilient frontend using progressive enhancement". GOV.UK. Retrieved 27 October 2021.
  13. ^ "Rolling out mobile-first indexing". Official Google Webmaster Central Blog. Retrieved 2018-06-09.
  14. ^ Stone, John (2009-11-16). "20 Do's and Don'ts of Effective Web Typography". Retrieved 2012-03-19.
  15. ^ 월드 와이드 웹 컨소시엄:Web Content Accessibility Guidelines 2.2.2의 개요: 일시정지, 정지, 숨기기
  16. ^ W3C QA. "My Web site is standard! And yours?". Retrieved 2012-03-21.
  17. ^ Christensen, Mathias Biilmann (2015-11-16). "Static Website Generators Reviewed: Jekyll, Middleman, Roots, Hugo". Smashing Magazine. Retrieved 2016-10-26.
  18. ^ Soucy, Kyle, Is Your Homepage Doing What It Should?, Usable Interface, archived from the original on 8 June 2012
  19. ^ Nielsen, Jakob (10 November 2003), The Ten Most Violated Homepage Design Guidelines, Nielsen Norman Group, archived from the original on 5 October 2013
  20. ^ Knight, Kayla (20 August 2009), Essential Tips for Designing an Effective Homepage, Six Revisions, archived from the original on 21 August 2013
  21. ^ Spool, Jared (29 September 2005), Is Home Page Design Relevant Anymore?, User Interface Engineering, archived from the original on 16 September 2013
  22. ^ Chapman, Cameron (15 September 2010), 10 Usability Tips Based on Research Studies, Six Revisions, archived from the original on 2 September 2013
  23. ^ Gócza, Zoltán, Myth #17: The homepage is your most important page, archived from the original on 2 June 2013
  24. ^ McGovern, Gerry (18 April 2010), The decline of the homepage, archived from the original on 24 May 2013
  25. ^ Porter, Joshua (24 April 2006), Prioritizing Design Time: A Long Tail Approach, User Interface Engineering, archived from the original on 14 May 2013
  26. ^ Spool, Jared (6 August 2007), Usability Tools Podcast: Home Page Design, archived from the original on 29 April 2013
  27. ^ Bates, Chris (9 October 2012), Best practices in carousel design for effective web marketing, Smart Insights, archived from the original on 3 April 2013
  28. ^ a b Messner, Katie (22 April 2013), Image Carousels: Getting Control of the Merry-Go-Round, Usability.gov, archived from the original on 10 October 2013
  29. ^ Jones, Harrison (19 June 2013), Homepage Sliders: Bad For SEO, Bad For Usability, archived from the original on 22 November 2013
  30. ^ Laja, Peep (8 June 2019), Image Carousels and Sliders? Don't Use Them. (Here's why.), CXL, archived from the original on 10 December 2019
  31. ^ Oleksy, Walter (2001). Careers in Web Design. New York: The Rosen Publishing Group, Inc. pp. 9–11. ISBN 9780823931910.

외부 링크