반응형 웹 제작 준비의 핵심 8가지 간단히 (가변그리드, 미디어쿼리, 뷰포트, 플렉서블박스 등..)

반응형 웹 만들기 준비 단계 간단히 설명해드립니다

 반응형 웹이 없던 시절. 애드센스(구글 제공의 웹 광고 서비스)만 해도 다양한 광고 크기를 제공하며 어떤 크기의 기기에서든 광고가 안정적으로 걸릴 수 있도록 서비스를 제공했었습니다. 물론 현재도 그 다양한 크기의 광고들이 남아있긴 하지만, 반응형 웹이 대세를 이루면서 점차 이 크기에 대한 구분은 사라지게 되었습니다.  

반응형이란?

 과거 자주 사용되던 애드센스 HTML 코드 중에는 어떤 화면 크기 이하로 광고가 실행되지 않도록 하는 코드가 있었습니다. 이는 화면이 작은 모바일과 화면이 넓은 PC에서의 광고 구성에 차이를 두기 위함으로 반응형 웹은 이러한 차이를 자유자재로 반영하는 웹이라 할 수 있습니다. 

 

일단은 프로그램 준비부터..

1. 웹 브라우저의 준비

 일단 '크롬 Chrome'은 웹 최신기술들을 가장 빠르게 그리고 많이 지원해주는 브라우저로써 모든 운영체제에서 실행이 가능하기에 가장 추천드립니다. 설치 또한 인터넷에서 언제든지 다운받아 가능. 반면, 익스플로러의 경우 최신 기술 대응이 다소 느린 편이라 비추입니다.

2. 코드 편집기 (윈도우 기준)

 코드 편집을 도와주는 프로그램으로 윈도우에서는 에디트 플러스, 서브라임 텍스트, 노트 패드, 비쥬얼 스튜디오, 이클립스, 서브라임 텍스트(매킨토시도 가능)가 있습니다. 사실 이름이 거창해서 그렇지, 기본 기능은 메모장과도 같습니다. 다만 이러한 프로그램들을 쓰지 않으려면 모든 코드를 완벽히 외우고 내가 일일이 쳐내야 하기에 굉장히 수고스러워집니다.

※ 대부분의 교육업계쪽에선 '비주얼 스튜디오'를 가지고 학생들을 가르칩니다. 이 또한 인터넷에서 간단히 설치 가능합니다.

3. 호스팅 서버

 Hosting, 즉 '주인' 서버란 뜻입니다. 대부분이 유료이고 매월 몇천원에서 몇만원이상을 지불해야 하는 경우가 많습니다. 이는 인터넷의 어떤 공간을 내 공간으로 만들기 위해 돈을 내 세들어 산다고 보면 되는데, 이렇게만 말하면 별 것 없어보이지만 실질적으론 서버 관리에다 속도 관리 등의 측면에서 결코 쉽지 않은 부분이 많습니다. 

※ '닷홈'의 경우 무료 호스팅 신청이 가능한 사이트.

 

 

 

4. FTP 프로그램

 기본적으로 인터넷 사이트에는 '업로드'와 '다운로드'란 개념이 존재합니다. 이를 원활하게 해주는 것이 FTP 프로그램인데 여기엔 파일질라, 스마트 FTP, 사이버덕, 드라이브 파일 스트림이 있습니다. 특히 파일질라(File Zilla)의 경우 다른 유료 프로그램보다도 빠르고 오류가 적어 추천합니다.

 

 

 

핵심 기술 4가지

5. 가변 그리드

 웹에서 어떤 크기를 지정함에 있어서 예를 들어 300*600 픽셀과 같이 딱 정해둔다면 화면의 크기가 작건 크건 그 크기로만 나와 작은 화면에선 너무 커보일수도, 큰 화면에선 너무 작아보일수도 있을 것입니다. 하지만 가변 그리드에서는 이 크기를 픽셀이 아닌 퍼센트로 인지합니다. 혹 메뉴바의 텍스트 경우, 바의 길이가 100 인 상태에서 텍스트 시작점을 20%에 맞춰놓는다면, 텍스트가 20 의 지점부터 시작하지만, 바의 길이가 10 정도로 축소된 화면에서는 텍스트가 2 의 지점에서 시작하는 것입니다.

6. 미디어 쿼리

 이러한 가변 그리드가 제대로 작동하기 위해 필요한 화면 크기 감지 기술이 바로 '미디어 쿼리'입니다. '쿼리'란 보통 질문, 질의란 뜻으로 통하죠. 즉, 미디어가 어떤 상태인지 먼저 물어보는 기술이기에 이 같은 이름이 붙여졌습니다.

7. 뷰 포트

 가끔 스마트폰으로 어떤 홈페이지를 들어갔는데 글씨가 너무 작아서 당황한 적이 있으실 겁니다. 뷰포트는 이렇듯 어떤 기기에서건 좀 더 잘 볼 수 있도록 환경을 설정해주는 역할을 합니다. 미디어 쿼리와 함께 쓰여져야 하는 필수적인 기술입니다.

8. 플렉서블 박스  

 이름에서 알 수 있듯, 가변적인 박스란 뜻입니다. 우리는 웹 화면을 구성함에 있어서 '박스들을 쌓는다'는 이미지를 갖곤 하는데요. 플렉서블 박스는 이 박스들이 각 꼭지점을 기준으로 서로 자석처럼 이끌리곤 합니다. 즉 서로의 폭과 높이를 기억하고 여기에 맞춰 정렬, 확장, 축소할 수 있는 기술이 이 기술입니다.