1. 웹사이트 구조에 대해

멋진 웹사이트를 제작하려면, 우선 웹사이트가 무엇인지 아는 것이 중요합니다. TV나 잡지등의 다른 미디어와의 차이점과 표시하는 형태, 검색방식, 웹사이트를 구성하는 파일에 대해서 알아 봅시다.

1.웹사이트의 특징

제품정보나 쇼핑등은 확인하기 위해서는 지금 생활에서 빠질 수 없는 것이 웹사이트지만, TV나 잡지와의 가장 큰 차이점은 무엇일까? 그것은 양방향 의사소통이 가능하다는 것이 아닐까라고 생각합니다. 일부 지상파TV 디지털방송을 제외하고 기본적인 TV나 잡지는 일방적으로 정보를 발신할뿐이지만, 웹사이트에서는 사용자가 구매 및 문의, 신청등의 작업을 할 수 있습니다. 또한 SNS을 통해 공유하여 “좋아요!”등의 간단하고 빠른 응답률을 늘릴 수 있는 것들이 늘어나고 있다는 것입니다.

즉, 웹사이트는 단순하게 “본다”를 위한 것이 아니라, “사용”한다는 것입니다. 사용한다는 것만큼 겉모양이 깔끔하면 그만큼 좋다라는 것이 아니라, 사용의 용이성도 고려되어야 합니다. 우선 이른 부분을 잘 이해하고 있다면 꽤 우수한 웹사이트를 제작하는데 가장 중요합니다.

2. 여러 웹페이지가 모인 것이 웹사이트다

정말로 사용하기 쉬운 웹사이트는 어떤 것일까요?

이는 실제 오프라인 매장을 생각해 보면, 편의점을 생각해 봅시다. 편의점을 가면, 잡지, 도시락, 음료, 생활용품등이 각 상품별로 카테고리로 나뉘어 진열되어 있습니다. 간혹 제품을 찾는 것이 있어도, 음료를 구입하는데 주저하지 않습니다.

웹사이트도 마찬가지입니다. 상품소개페이지, 회사소개 페이지, 문의페이지등 정보의 카테고리에 의해 제대로 페이지로 나누어진 웹사이트는 매우 멋진 정보를 바로 보여주게 됩니다. 이것이 이상적인 웹사이트 디자인입니다.

이처럼 정보의 종류와 목적에 따라 분할된 각 페이지를 웹페이지라고 하며, 그 집합체를 웹사이트라고 합니다. 웹사이트의 가장 큰 특징은 페이지와 페이지를 링크하여 그 페이지를 오갈 수 있습니다. 이런 점도 일반적인 잡지같은 미디어와의 큰 차이점이라고 말할 수 있습니다.

3. 웹사이트가 표시되는 구조

웹사이트는 인터넷에 게시하면 24시간 언제든 어디서든 자유롭게 전세계 사람들이 볼 수 있습니다. 제작한 웹사이트를 공개하기 위해서는 서버라는 인터넷 공간에 웹사이트 데이터를 업로드해야 합니다.

서버가 있는 장소, 즉, 인터넷 주소가 URL로 웹브라우저에서 입력하여 웹사이트로 연결되어 표시됩니다. 웹브라우저는 HTML파일이라는 웹사이트를 만들기 위한 문서를 읽어들여 사용자가 볼 수 있는 형태로 표시하는 전용 소프트웨어입니다. 대표적인 것이  Google Chrome, Microsoft Internet Explorer, Apple Safari, Firefox, Microsoft Edge등이 있습니다.

4. 웹사이트가 검색되는 형태

웹사이트를 서버에 업로드하면, 누구나 볼 수 있는 상태가 되지만, 단순하게 업로드만 했다고 해서 URL을 아는 사람만 찾아주는 상태가 됩니다. 더 많은 다양한 사람들에게 보여주기 위해서는 Google, Naver등의 검색결과에 표시되도록 해둘 필요가 있습니다.

검색결과에 나타나게 하는 것은 검색엔진이라는 컴퓨터에 정보를 제공해야 합니다. 검색엔진은 인터넷의 웹사이트를 순회하고 데이터를 수집하고 있습니다. 이 순회시스템을 크롤러라고 하며 그 웹사이트가 무엇을 게재하고 언제 만들어진 것인지, 어떤 언어로 작성된 것인지에 대한 다양한 모든 정보를 수집합니다. 이 정보를 데이터베이스에 저장한 것을 인덱스라는 색인된 웹사이트 중에서 검색창에 입력된 키워드에 대한 최적화된 웹사이트를 표시시킨다는 것이 검색의 작동원리입니다. 즉, 검색결과에 올바르게 표시되도록 하려면 반드시 검색엔진에 올바르게 이해할 수 있도록 코드를 작성해야 합니다.

따라서, 웹사이트는 사람만 본다는 것이 아니라, 웹브라우저나 검색엔진을 열람하는 것도 있다는 것을 이해하고 있자. 인간이 이해하기 쉬운 디자인을 생각할 때 컴퓨터가 이해할 수 있는 코드를 작성할 수 있는 웹디자이너의 역할이 중요합니다.

5.웹사이트를 구성하는 파일

웹사이트는 HTML파일뿐만 아니라, 다양한 파일로 구성되어 있습니다. 구체적으로 어떤 파일들이 있는지 살펴봅시다.

HTML파일

우선 HTML파일이 있습니다. 이것은 웹페이지 자체를 나타내는 파일에서 웹브라우저는 HTML파일을 읽어들여 웹페이지를 표시합니다. 확장자는 .html또는 .htm입니다. 어느쪽이든 사용해도 상관없지만, 하나의 웹사이트에 병용하게 되면 잘못된 링크로 인해 깨진 링크가 있어 피해야 합니다.

CSS파일

웹페이지 스타일을 지정하는 파일인 CSS파일이 있습니다. HTML단체에서는 문자가 나열된 형태처럼 단순한 웹페이지이지만, CSS에서 레이아웃이나 글꼴크기, 색상등 다양한 지정을 할 수 있습니다. 확장자는 .css입니다.

HTML파일과 CSS파일은 모두 텍스트 데이터에서 만들어진 파일입니다. 따라서 메모장등의 운영체제와 같이 제공하는 소프트웨어로 작성할 수 있지만, 더 강력한 편집기, Visual Studio code, Sublime Text, VI와 같은 것을 사용하는 것이 일반적입니다. 이 강좌에서는 나오지 않지만 JavaScript파일(.js)등도 있지만 이 부분은 따로 강좌를 진행할 예정입니다.

또한 웹사이트를 구성하는 파일 중 일부는 텍스트 파일 이외의 파일도 있습니다. 가장 많이 사용되는 것이 이미지 파일이 있습니다. 웹페이지에 사진이나 아이콘등 이미지파일이 사용됩니다. 이미지파일은 JPEG, GIF, PNG등 여러가지 형태가 있습니다.

기호, 아이콘등의 단색이미지는 GIF파일

GIF파일은 단색아이콘 및 단색이미지등의 간단한 이미지로 사용됩니다. JPEG파일은 약 1677만 색상을 사용할 수 있지만, GIF는  256색상밖에 사용할 수없기 때문에 사진등에는 적합하지 않습니다. 애니메이션 GIF라는 움직이는 이미지를 만들때 요즘 많이 사용합니다.

사진이나 그라데이션은 JPEG파일

JPEG파일은 사진이나 그라데이션등 디테일한 색상을 가진 이미지에 사용됩니다. 이미지 저하없이 압축할 파일크기를 줄일 수 있는 장점이 있지만, 사실 저장될 때마다 화질 저하가 있기 때문에 단색이미지 및 직선등은 잡음이 발생할 수 있습니다. (이런 부분은 PNG파일을 추천함)

깔끔하게 사용할 수 있는 PNG파일

JPEG파일과 GIF파일 모두의 장점을 가지는 것이 PNG파일입니다. PNG파일은 화질 열화가 없고, 색상도 JPEG과 같은 약 1677만색을 사용할 수 있어 사진에 단색의 이미지에 사용학 ㅣ좋습니다. 그러나 파일크기는 JPEG모다 커진다는 단점이 있어 웹페이지의 모든 이미지를 PNG를 사용하는 것은 좋은 것은 아닙니다.

 

그외 이미지 이외에도 오디오파일 및 동영상파일도 사용할 수 있습니다. 오디오 파일도 이미지처럼 여러가지 타입이 있지만, 가장 많이 사용하는 것이 MP3파일이 있습니다. 동영상의 경우, 웹사이트에게 게재할 경우 mp4포멧을 많이 사용하고 있습니다.

Site Footer