WEB-DEVELOPMENT

  • bug_report

Web Development

웹 개발

웹은 사전적 의미로는 거미줄을 의미한다. 본래 의미와는 다르게 오늘날 Web이라는 용어는 일반적으로 인터넷을 의미하는 관용적인 명사로 사용 되지만 실제로는 인터넷의 하위 분류 개념이다.

웹의 정확한 명칭은 World Wide Web이다. 이것을 줄여서 Web이라 부르는 것이다. 웹은 URL을 통해서 거미줄처럼 연결되어 있는 각 컴퓨터(서버)의 허가된 콘텐츠(웹 문서 등)를 공유하는 것을 핵심으로 한다.

과거의 웹은 단순히 정보를 전달하는 수준이었지만 현대의 웹은 전자상거래, 문서 작성, 멀티미디어 작업 등 그 이상의 역할을 할 수 있도록 기반 기술이 발전되었다. 따라서 단순한 웹 문서 편집이 아닌 견고한 설계를 토대로 웹 기반 소프트웨어를 개발을 할 수 있는 능력이 필요하게 되었다. 

흔히 웹 (Web)은 모바일의 앱(App)으로 역할이 대체될 것이라고 하지만 웹(Web)은 정보 검색이라는 거대한 생태계를 가지고 있다.

앱(App)은 휴대가 간편한 모바일 기기에서 동작하다 보니 접근성이 뛰어나며 바로 작동을 시켜 원하는 결과를 만들어 낼 수 있지만  네트워크에 연결되어 작동될 수 있는 설치가 필요한 응용 프로그램일 뿐이다. 업데이트를 위해서는 사용자의 동의와 재설치가 필요하다.

반면 웹(Web)은 검색이라는 날개를 달고 자유롭게 실행 화면을 전환한다. 어떠한 기능을 동작하기 위해서는 설치라는 절차가 없으며 곧바로 결과를 찾을 수 있다. 업데이트를 즉각 적용할 수 있어 사용자가 업데이트를 해주기를 기다릴 필요도 없다.

이렇게 단순한 비교 만으로도 웹(Web)은 앱(App)에 대체되는 기술이 아닌 앞으로 지속적으로 발전하고 있는 콘텐츠 생산, 검색, 거래를 위한 거대한 플랫폼이다. 웹(Web)과 앱(App)은 각자의 역할에 따라서 공생하면서 소프트웨어 시장을 주도할 것이다.

정교하고 정확한 웹을 개발하기 위해서는 많은 개발 지식과 노하우를 필요하다. 이곳에서 제공되는 다양한 지식들이 모던 웹 개발에 적절한 도움이 되었으면 한다.

  • Architectural

  • Issue

  • Marketing

    웹사이트 마케팅은 개발자의 주 업무는 아니다. 하지만 검색에 최적화된 웹사이트를 위해서 구현 단계에서 개발자의 역할이 필요하다.

    • Marketing > Branding

      • 파비콘(favicon) 설정

        웹브라우저 탭 상자와 URL 입력 상자 내에 웹사이트를 상징하는 아이콘을 지정할 수 있다. 보통 이것을 파비콘(favicon)이라 부른다.

  • Media technologies

    웹에서 미디어를 다루는 기술적 문서를 다룬다.

    • 자동 재생 가이드

      비디오, 오디오 요소들은 대표적인 미디어이다. 콘텐츠 구성 요소로써 정보와 감성 전달력이 매우 뛰어나지만 웹브라우저의 이용자 입장에서 본다면 자동으로 비디오, 오디오 요소들이  시작되는 것은 선택의 관점에서 ..

  • Network works

    네트워크 작업과 관련된 문서

  • UX and UI

    • UX and UI > Animation

    • UX and UI > Navigation

      • 화면 스크롤시 getBoundingClientRect() 메소드 사용

        화면을 특정 위치로 스크롤하기 위해서는 해당 위치의 문서 상단으로 부터 떨어진 거리를 구해야 한다. 주로 offsetTop 속성을 사용하지만 getBoundingClientRect() 메소드를 사용하는 경우도 있..

      • 화면 스크롤에 따른 효과 적용

        웹 페이지를 스크롤시 뷰포트시에 진입할 경우 시각적 효과를 적용하여 집중과 전달력을 높히는 기본적인 설계에 대해 알아보자.

      • 휠(wheel)을 이용한 화면 단위 이동

        대부분의 마우스 입력 장치에는 휠(wheel)을 지원한다. 보통 이 휠을 이용하여 화면을 스크롤하는데 이러한 방식으로 화면 단위로 스크롤시키는 기본적인 개념을 알아보자.

  • Web Browser

    웹(web)은 웹브라우저라는 검색 도구를 통해 검색하고 그 결과를 확인한다. 개발자가 작성한 코드들은 웹브라우저 핵심인 엔진에서 최종 처리되어 사용자들에게 보여진다. 따라서 웹브라우저 엔진에 대한 이해가 있어야 웹 개발의 최적화가 수월할 것이다.

    • Web Browser > General

      웹브라우저에 관한 일반적인 문서

    • Web Browser > Blink

      Blink는 크로미니움을 오픈소스 프로젝트를 기반으로 한 다양한 웹브라우저에서 사용되고 있는 오픈소스 엔진이다. 대표적으로 크롬(Chrome) 웹브라우저가 있고 최근에는 마이크로소프트사의 엣지(Edge) 웹브라우저에서도 채택되었다.

    • Web Browser > V8

      보통 Blink 엔진에서 함께 사용되는 자바스크립트 전용 처리 엔진이다.