웹디자인#2

LeeMir, 02 March 2021

1강 - Web환경의 이해

인터넷과 웹의 차이점?
  • 인터넷 : 전 세계의 컴퓨터들이 네트워크를 통해 연결되어 파일(data)을 주고 받을 수 있는 네트워크 망
  • 웹 : 인터넷 위에서 운영되는 하나의 서비스
인터넷과 웹의 등장
  • 인터넷 : 1960년에 등장
  • 웹 : 1990년에 등장
    • Tim Berners-Lee가 1989년에 WWW(World Wide Web) 고안
      • Web, HTTP, URL, HTML, web browser 등을 만듦
    • 1991년 최초의 웹사이트 제작
    • 1994년 W3C(World Wide Web Consortium) 창립 => 현재 웹 표준을 관장하는 기관
웹의 동작 원리
  • 웹이 동작하려면 컴퓨터가 몇 대가 필요할까?
    • 클라이언트 컴퓨터(브라우저) / 서버 컴퓨터(서버) => 2대!
    • 클라이언트 => 서버(요청)
    • 서버 => 클라이언트(응답)
      • HTML문서로 응답
      • 브라우저에서 HTML문서를 시각적으로 변환
      • HTML문서를 이쁘게 하는 것 => 웹 디자인
웹 사이트
  • 웹 서버에 정보를 저장해 놓은 집합체
  • 웹 사이트는 웹 페이지들로 이루어져 있으며, 웹 페이지는 HTML 문서로 만들어진다.
  • 웹 사이트를 이용해서 할 수 있는 일은 정보검색, 쇼핑, 음악듣기, 교육, 은행업무 등 다양한 서비스
  • 웹 사이트의 현 주소
    • 반응형, Mobile First
웹 디자인

  • 웹 사이트는 웹 페이지들로 이루어져 있고, 이 웹 페이지(HTML)들을 디자인 하는 작업

  • GUI로 웹 사이트를 만드는 작업 - 사용자들에게 보여지는 모든 요소들을 디자인하는 것!
  • 웹 디자인은 ‘사용성(Usability)’과 직결됨
  • 사용자 인터페이스(User Interface, UI)를 고려한 보편적인 효율성, 편리성, 심미성이 바탕이 되어야 한다.
UI vs UX
  • UX : 사용자 경험(User eXperience)
    • 사용자가 어떤 제품, 시스템, 서비스 등을 직접적 혹은 간접적으로 이용하면서 느끼는 반응과 행동들과 같은 경험을 총체적으로 설계하는 것
    • 주관적, 정성적
    • 가치성(Value)
    • 식탁보 위에 접시와 나이프, 포크를 올려놓고 포크와 나이프의 방향은 어떻게 향하도록
    • Google : 사용자에게 가장 우선적으로 필요한 검색 창을 화면의 가운데에 위치시키고, 보조메뉴를 위치시키는 것
  • UI : 사용자 인터페이스(User Interface, 사용자 공간)
    • 사용자가 쉽고 편리하게 원하는 정보를 얻도록 설계
    • 객관적, 정량적, 보편성
    • 사용성(Usability)
    • 어떤 디자인의 식탁보를 쓸 것인지, 어떤 디자인의 나이프와 포크를 쓸 것인지
    • Google : 검색 버튼과 검색창의 위치, 그리고 아이콘과 같은 부분
웹 사이트 운영

  • 어떻게 해야 내 홈페이지가 국경 없는 전 세계 사람들이 인터넷으로 보는 것일까?

  • 웹 호스팅 + 도메인

    • 도메인 : IP주소를 텍스트로 바꿔주는 것
    • 웹 호스팅과 도메인 모두 유료 서비스
프로그래밍 언어란?
  • 프로그래밍 언어 : 사람과 컴퓨터 사이의 언어(약속)
    • = 코드, 코드를 작성하는 것을 ‘Coding 한다’라고 함
  • Front-end : 웹 브라우저로 보여지는 영역
    • HTML, CSS, JS
    • 웹 디자인을 위해서는 Front-end 영역의 언어는 사용할 수 있어야 유리하다.
  • Back-end : 서버단 DB구축 프로그래밍 언어
    • JSP, ASP, PHP, JAVA, C, C++, PYTHON