Web Design
웹 디자인(영어: web design)은 웹 브라우저가 해석하고 그래픽 사용자 인터페이스 (GUI)로 보여 주기에 알맞은 마크업 언어 형식으로 인터넷을 통해 전자 매체 콘텐츠 전달의 개념을 정하고 계획하고 모델로 만들어 실행하는 과정이다.
웹 디자인의 목적은 웹 사이트를 만드는 것이다. 이러한 웹 사이트에는 전자 파일이 한데 모여 있고, 웹 서버/서버에 상주하여 최종 사용자에게 요청한 웹 페이지 형식으로 콘텐츠와 상호작용 기능/인터페이스를 제공한다. 텍스트, 비트맵 그림 (GIF, JPEG, PNG), 폼과 같은 요소들은 HTML/XHTML/XML 태그를 사용하는 페이지 위에 놓을 수 있다. 벡터 그래픽스, 애니메이션, 비디오, 소리와 같은 복잡한 미디어를 보여줄 때에는 플래시, 퀵타임, 자바 런타임 환경과 같은 별도의 플러그인을 요구한다. 플러그인은 HTML/XHTML 태그를 사용함으로써 웹 페이지에 추가할 수 있다.
W3C 표준과 호환되는 브라우저는 웹 페이지 요소와 객체의 위치를 정하고 이용하기 위해 CSS와 XHTML/XML의 결합을 촉진시켰다. 마지막 표준은 되도록 플러그인을 이용하지 않고 브라우저의 기능이 다양한 매체와 접근성 옵션을 클라이언트에 전달하게끔 하고 있다.
웹 페이지는 보통 정적 페이지와 동적 페이지로 나눌 수 있다.
- 정적 페이지: 사용자(웹 마스터/프로그래머)가 페이지를 수동으로 업데이트하지 않는 경우 모든 요청마다 콘텐츠와 레이아웃을 바꾸지 않는다.
- 동적 페이지: 컴퓨팅 환경(사용자, 시간, 데이터베이스 수정 등)에서 최종 사용자의 입력이나 변경에 따라 겉모양이나 콘텐츠를 수정한다. 콘텐츠는 클라이언트 쪽에서 클라이언트 스크립팅 언어(자바스크립트, JScript, 액션스크립트 등)를 사용하여 DOM 요소를 변경함으로써 이를 변경될 수 있다. 동적 콘텐츠는 서버 스크립팅 언어(코드퓨전, ASP, JSP, 펄, PHP, 파이썬 등)를 이용하는 서버 위에 컴파일되기도 한다.
두 가지 접근 모두 보통 복잡한 응용 프로그램에 쓰인다.
커뮤니케이션 디자인과 정보통신기술 분야가 전형화됨에 따라, 웹 페이지에 특화된 웹 디자인과, 모든 웹 기반 서비스의 완전한 논리를 위한 웹 개발을 구분하는 경향이 생겨났다.
See also
Favorite site
- Wikipedia (en) 웹디자인에 대한 설명
- [추천] Godly — Astronomically good web design inspiration - 인터넷 전체에서 얻은 천문학적으로 좋은 웹 디자인 영감. 직접 선택한 디자인 영감. - 웹디자인 샘플 찾을 때 좋음
- Dribbble - Discover the World’s Top Designers & Creative Professionals - 드리블!
- [추천] 40+ Fresh and Free Web UI and Mobile Kits for Developers and Designers
- [추천] U.S. Web Design Standards
Look & Fell 참조
Open Source Web Design List
- http://www.oswd.org/
- http://opensourcetemplates.org/
- http://www.openwebdesign.org/browse.php
- http://www.templateworld.com/free_templates.html
- http://www.templatesbox.com/
- http://templates.arcsin.se/
- http://www.code-sucks.com/free-css-templates/
- http://www.solucija.com/home/css-templates/
- [추천] https://cruip.com/demos/stellar/?ref=opl
Guide
Web UI Component Site Design
- Open-Source UI elements - made with CSS
-
MUI: The React component library you always wanted- 그닥 ... - Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
- Free Open Source Tailwind CSS Components | HyperUI - Simple !
- The best Tailwind templates & UI kits on the internet | Tailwind Awesome
Background
- Isotope | Premium website background pack library - 웹사이트 배경 모음
- 33 Animated Backgrounds Examples (With Pure CSS)
- 15+ Amazing CSS Backgrounds
- 48+ Best Shopify CSS Animated Backgrounds Themes Free & Premium 2023 – AVADA Commerce Blog
11ty
- Starter Projects — Eleventy - 스타터 프로젝트 목록