웹과 사이트가 뭔지 모르는 문외한도 이해하기 쉬운 웹사이트 개발 용어 10가지

Digital Tech/Web

by Social Marketing Korea 2016. 7. 25. 23:11

들어가기 전에

웹사이트 기획과 개발, 디자인에 직접 관여하는 입장이 아니라 웹사이트 의뢰를 맡기거나 견적을 알아볼 때 기본적인 사항을 숙지하고 있다면 매우 유용합니다. 특히 중요 용어 몇 개만 알고 있어도 개발자와의 커뮤니케이션도 쉬울 뿐만 아니라 업무를 진행하기가 용이합니다. 지금부터 소개해드리는 용어는 웹기획자, 개발자, 디자이너는 이미 숙지하고 있는 용어이며, 해당 용어들은 비관련자들의 이해와 커뮤니케이션을 위해 작성된 것임을 알려드립니다.

1. HTML5

웹 문서를 제작하는데 쓰이는 마크업 언어인 HTML(Hyper Text Markup Language)의 최신규격을 뜻합니다. HTML5의 목적은 어떤 디바이스 환경과 브라우저에서든 같은 결과를 보여주는 것입니다. 그리고 별도의 프로그램이나 플러그인(ActiveX 등)없이 HTML5 하나의 언어만으로 화려하고 동적인 효과를 구현 가능하게 해주는 것입니다. (한국인은 한국어를 쓰고 미국인은 영어를 쓰고 웹사이트는 HTML을 쓴다!)

2. 웹표준

문서에도 규격이 있듯이 웹페이지를 구현하기 위한 웹사이트에도 표준과 규격이 있습니다. 이를, 웹표준이라고 합니다. 웹표준을 지켜서 웹사이트를 제작하게 되면 이용자의 사용성과 접근성이 유리하게 됩니다. 이를 규격화하기 위한 기관으로 W3C (World Wide Web Consortium)가 있으며 마크업 언어의 권고사항을 정하고 있습니다.

3. 반응형 웹, 모바일 웹, 모바일 앱

반응형 웹은 줄여서 RWD (Responsive Web Design)이라고 합니다. 반응형이라는 이름 그대로 디스플레이 비율과 크기, 해상도에 따라 유동성있게 변하는 웹사이트를 말하며 HTML5와 멀티디바이스 지원을 근간으로 하고 있습니다. (참고로 콘텐츠의 복잡성과 기술도를 따지지 않고 반응형을 진행했다가는 처음부터 모바일웹으로 다시 제작하는 참사가 일어날 수 있습니다.)

모바일웹(Mobile Web)은 반응형 웹과 다르게 오로지 모바일에서만 최적화 설계된 웹사이트입니다. 반응형 웹은 모든 해상도와 디스플레이 비율에 대응할 수 있지만, 모바일웹은 모바일 전용으로 제작되어 데스크탑 화면에서는 불편하며 사용하기가 어렵습니다. 대신 반응형보다 모바일에서의 사용성과 접근성이 유리합니다. 그렇기 때문에 Only 모바일 웹사이트나 반응형으로 구현하기 어려운 복잡한 웹사이트를 설계할 때는 데스크탑과 모바일 웹페이지를 따로 제작합니다. (대신 개발 리소스는 반응형보다 더 들 수도 있습니다)

모바일 앱(Mobile App)은 일반적으로 Google Play Store나 Apple App Store에 올라가 있는 스마트폰 용 응용프로그램을 말하며 기타 서드파티 플랫폼의 모바일 앱도 해당됩니다. 최근에는 PC용 프로그램도 앱이라고 부르기 때문에 모바일을 꼭 붙여 읽어야 정확한 표현입니다. 모바일 웹과 다른 점은 모바일 웹은 디바이스, OS 환경에 다양하게 대응하는 반면, 더 심도있는 기능의 제공은 어렵습니다. 하지만 모바일 앱은 기타 OS 환경에 대응하지 않지만 바탕이 되는 OS에는 보다 심도 있는 기술을 적용할 수 있습니다. 또한, 사용언어 역시 웹 개발 관련 언어는 물론 Java (Android SDK) 또는 Object-C까지 활용하게 됩니다. (당연히 비용이 웹보다 비쌉니다)

4. CSS

CCS는 영어로 Cascading Style Sheets의 약자입니다. CSS는 웹문서의 전반적인 스타일(외형)을 미리 저장해 놓은 스타일 시트를 말합니다. 일정한 스타일을 규격화하여 언제든지 웹문서에 적용할 수 있어서 일관성과 함께 유지보수에도 편리합니다. 또한, HTML 문서를 화려하고 아름답게 구현해 주는 언어이기도 합니다. CSS는 자동차 공장으로 비유를 하자면 외장재나 도색처리 부분이라고 생각하시면 됩니다.

5. 미디어 쿼리

미디어쿼리(Media Query)는 반응형 웹을 구현하기 위한 기술 중 하나입니다. 주로 CSS를 사용하며 이를, 인간의 언어로 풀어서 말하면, 아래와 같습니다.

“브라우저야, 화면 가로사이즈가 1024px 이상이면 데스크탑 레이아웃으로 보여주고 640px 에서 1023px 사이이면 태블릿 레이아웃, 그리고 639px 이하면 무조건 모바일 웹 레이아웃으로 출력해. 알았지? 이미 3가지 패턴의 레이아웃을 만들어 놓았어”

이런 느낌입니다. 이를 구현해 주는 것이 CSS의 속성입니다.

6. JQuery (JS)

제이쿼리는 새로운 언어가 아니라 기존의 JavaScript의 라이브러리 중 하나입니다. 한마디로 자바스크립트 중에서 웹사이트 개발을 위해서 가장 많이 사용하고 인기 있는 것들을 묶은 패키지 상품을 JQuery라고 생각하면 됩니다. 오픈 소프트웨어이기 때문에 다른 언어에 붙이기가 쉽고 사용하기 편리하며 지속적인 업데이트에도 용이합니다. (제이쿼리의 슬로건은 ‘적게 쓰고, 더 많은 것을 할 수 있다.’입니다)

7. 디바이스 파편화

디바이스 파편화는 생각보다 매우 간단한 말입니다. 물건이 깨지면 파편이 튀게 되고 많은 부분으로 나뉘게 됩니다. 디바이스 파편화라는 말은 다양한 제조사, 브라우저, 해상도, OS 등 스마트폰(혹은 디바이스)이 다양해짐에 따라 웹사이트 최적화가 어려워질 때 많이 사용합니다. (웹 개발자 죽어나는 소리가 들리십니까)

8. 메타 태그

메타 태그(Meta Tag)는 일반적으로 웹페이지 문서 맨 위쪽에 위치하는 태그입니다. 주로 브라우저의 환경을 제어하거나 검색 엔진이 해당 문서를 indexing 하기 쉽도록 도와주는 정보라고 생각하면 됩니다. 주석과 같이 코드를 뜯어보지 않는 한 이용자는 웹페이지 문서 상에서 메타태그의 존재를 확인 할 수 없습니다.

주석은 개발자와의 커뮤니케이션을 위한 단순 설명문으로 동작에는 영향이 없습니다. 하지만 메타태그는 백그라운드에서 브라우저 환경이나 검색 엔진에 다양한 정보를 제공하는데 사용합니다. 이는 최근 검색 엔진 최적화에 있어서 더 중요해지고 있습니다.

9. 패럴랙스 스크롤링

패럴랙스 스크롤링 (Parallax Scrolling)은 주로 외국의 반응형 웹사이트에서 많이 사용하던 기법입니다. 하지만 최근 국내에서도 반응형 웹이나 워드프레스 홈페이지가 많이 생기면서 사용이 늘어났습니다. 쉽게 말해 마우스 스크롤을 움직일 때마다 웹사이트의 배경화면이나 오브젝트가 동적으로 움직이는 기법을 뜻합니다. 말로 설명하기 힘든 기법이지만 아래의 사이트를 보면 어디선가 본적이 있다고 느낄 것입니다.

https://ihatetomatoes.net/happy-25th-birthday-game-boy/

http://neomam.com/interactive/13reasons/

http://www.dangersoffracking.com/

10. 크로스브라우징

크로스브라우징(Cross-Browsing)이란 웹 표준에 있어서 핵심이 되는 요소 중 하나입니다. 익스플로러, 크롬, 사파리, 파이어폭스 등 디바이스의 OS나 웹브라우저 종류도 다양해졌는데요. 각기 다른 OS와 브라우저에서는 같은 웹 페이지라도 보여지는 부분과 실행 가능한 프로그램이 달라서 상당한 골칫거리였습니다. 크로스브라우징은 쉽게 말해 어느 OS환경과 브라우저에서도 똑같은 화면과 사용자 경험을 주기 위한 기술을 말합니다.

디바이스 파편화와 브라우저의 다양성, 웹표준 미준수, 구형 익스플로러, 액티브 X 등이 크로스브라우징 구현에 걸림돌이 되고 있습니다. (모든 웹 노동자들은 ‘익스플로러 & 액티브X’의 퇴출을 기도하고 있습니다. 그러나 액티브X를 퇴출시키면서 EXE 프로그램을 깔라니요…)