디지털 대장장이, 개발자 그리고 프로그래밍
‘냉철한 눈초리로 컴퓨터 화면을 마주하며 말 없이 각종 코드를 입력하며 유에서 무에서 창출하는 사람’ 개발자라는 직업을 가진 인물에 대해 우리가 일반적으로 갖는 이미지입니다. 몇 년 전부터 돌풍을 일으킨 코딩교육의 인기도 개발자라는 직종이 새롭게 각광받으며 시작되었습니다. 소비활동에서 오프라인과 온라인의 경계가 모호해지고 심지어는 온라인을 통한 마케팅이 더욱 치열해짐에 따라 개발자의 위상은 날로 높아지는 중입니다. 온라인 내의 집이라고 할 수 있는 홈페이지를 만들 때에도 유능한 개발자들이 투입되어 설계부터 운영에도 깊이 관여를 하죠.
비전문가도 알아두면 좋을 홈페이지 개발 용어
전업 개발자가 아니더라도 홈페이지를 만들기 위한 프로그래밍 지식을 쌓아두는 것은 무척 소중한 스펙이 되어줍니다. 어딘가에 단순히 자랑을 하는 스펙을 넘어 내가 필요할 때 사용할 수 있다는 점에서 더욱 중요한데요. 이번 시간에는 홈페이지를 만들 때 알아두면 좋을 개발 용어들과 관련 정보를 소개하고자 합니다.
프로그래밍에도 통용되는 ‘언어’가 따로 있다?
어떤 사이트를 만들던지 프로그래밍 언어에 대한 개념을 정립할 필요가 있습니다. 프로그래밍 세상에서 통용되는 언어들은 현실세계의 언어처럼 매우 다양하게 존재합니다. 조금 다른 점이라면 유행에 따라 순위를 매긴다는 부분입니다. 이런 현상이 일어나는 이유는 문제가 발생하거나 수정이 필요할 때 최대한 빠르게 조정이 가능해야 하기 때문입니다. 즉, 다루기 쉽고 간결하면서 사용폭이 넓은 언어가 많이 쓰인다는 이야기입니다. 대표적인 프로그래밍 언어로는 자바(Java), 파이썬(Python), C++, C 등이 있습니다.
이제 프로그래밍 언어의 개념을 이해했으니 본격적으로 홈페이지를 제작할 때 알아야 할 개발 용어들을 살펴볼 시간입니다. 필요에 의해 해당 정보를 찾던 분이라면, 의외로 자주 들었던 명칭들이 나와 놀라실 수도 있습니다. 내용까지는 잘 몰랐지만 기사를 포함한 다양한 콘텐츠를 통해 접했을 확률이 큽니다.
HTML·CSS
HTML이 웹사이트의 기본 골격이라면 CSS는 해당 공간을 컬러풀하게 꾸며주는 스타일링 역할을 담당합니다. CSS을 풀어 쓰면 ‘Cascading Style Sheets’인 만큼 웹문서의 외형을 결정하는 중요한 개념입니다.
반응형 웹·적응형 웹
언제 어디서든 온라인 세상에 접속하고 싶다는 열망은 컴퓨터, 스마트폰, 태블릿PC까지 다양한 디바이스가 세상에 나오도록 이끌었습니다. 웹 디자인 시장에서는 저마다의 디바이스를 사용하는 소비자가 늘어남에 따라 한 가지 고민을 하게 되었습니다. 모든 기기에 맞추어 웹페이지를 제작하자니 너무도 번거로우며 홈페이지 오픈 시간도 덩달아 늘어나게 된다는 것이었죠.
반응형 웹은 A라는 웹사이트에 다양한 디바이스로 접속하면 그에 맞춰 레이아웃이 적용되는 것을 의미합니다. 사무실 컴퓨터로 보던 웹 문서가 퇴근길 스마트폰에서도, 집 안에 있는 태블릿PC로 접속해도 이질감 없이 쾌적하게 보이게 되었습니다. 적응형 웹은 반대로 특정 해상도나 디바이스가 고정되어 있고 해당 비율에 따라 웹페이지를 만드는 개념입니다.
미디어 쿼리(Media Query)
반응형 웹이 무엇인지 알게 됐다면 미디어 쿼리에 대한 이해도 쉬워집니다. 화면에 출력되는 가로 세로 크기가 다른 디바이스에 어색함 없이 웹사이트를 구현하기 위해 꼭 필요한 기술인데요. 앞서 설명한 CSS를 사용한다는 것이 특징입니다. 컴퓨터 화면에서는 홈페이지의 전체 카테고리가 상단에 가로형으로 고정되어 있었다면, 태블릿PC에서는 왼쪽으로 세로 고정이 되는 것도 모두 미디어 쿼리가 적용된 결과입니다. 사소하지만 사용자 경험에 큰 영향을 주는 부분들을 미디어 쿼리로 간단히 조정이 가능합니다.
메타 태그(Meta Tag)
기본적이고 핵심 역할을 하는 홈페이지 개발 용어들을 소개해드렸습니다. 마지막으로 안내할 메타 태그는 html 문서에 작성하는 태그 중 하나입니다. 해당 문서의 핵심 키워드나 작성자, 내용에 대한 설명 등을 정렬화하여 보여주는 역할을 합니다. 웹을 만들 때 꼭 포함하는 정보들은 메타 태그를 통해 구글 등의 검색엔진에 노출되는 원리입니다. 구글에서는 자신들의 시스템에서 이해 할 수 있는 메타 태그 예시를 따로 페이지를 마련해 안내하고 있습니다. 이처럼 검색엔진최적화(SEO. Search Engine Optimization)를 고려한다면 잊지 말고 메타 태그를 잘 챙겨야겠죠.
디지털 커뮤니케이션에 윤기를 더해주는 개발 용어
개발 업무에 관심을 갖고 들여다보기 시작하면 프로그래밍은 하나의 세계라는 생각이 들 정도입니다. 고유의 사용 언어가 존재하고, 구현하려는 정보들을 각각의 언어로 표현이 가능하기 때문에 어떤 방법을 선택할 것인지도 중요하게 작용합니다. 웹페이지나 서비스에 문제가 터지면 야근과 피로에 시달리는 개발자에 대한 이미지가 이제야 조금씩 이해되는 듯합니다. 오늘 짚어본 용어들은 기본적이기에 자주 들을 수 있는 표현이기도 합니다. 이제는 외계어가 아닌. 커뮤니케이션의 화제로 삼아 개발자와 디자이너, 기획자들과 활발한 대화를 이어나가보시길 바랍니다.
