1일차 교육내용
-1.1 웹사이트 개발 및 서비스 절차
-1.2 도메인과 DNS
-1.3 도메인 구매와 관리방법
-1.4 웹(WWW) & HTTP & HTML
-1.5 반응형웹(Responsive Web)?
-1.6 디자인& 퍼블리싱 한방에 끝내기
벌써 1회차 교육의 마무리를 달려가고 있네요.
자,오늘은 반응형웹, ResponsiveWeb이 무엇이고 어떠한 원리에 의해 작동되는지 알아보는 시간입니다.
1. ICT(정보통신기술) 패러다임 변화의 산물! 반응형웹
반응형웹은 ICT(정보통신기술)분야의 패러다임과 맞닿아 있습니다.
웹이란 생태계가 PC기반 환경에서 모바일혁명이라 불리우는 모바일기반 스마트 디바이스(태블릿,스마트폰,스마트TV,스마트와치....))환경으로의
변화에서 반응형웹은 기인하게 되었습니다.
스마트폰 및 각종 스마트 디바이스들의 급속한 보급에 따라 최근 몇년사이 웹개발 및 서비스 환경에도 큰 변화가 발생하였는데요.
그중 대표적인 부분이 One Source Multi-Device 환경을 웹사이트가 지원해야 한다는것입니다.
스마트 디바이스가 본격적으로 보급되던 몇년전까지만 해도 웹사이트를 개발할때는 최소 해상도(1280*800, 1024*768)를 정해놓고 일반모니터용,태블릿용,스마트폰용 웹사이트를 별개로 개발하고 그 도메인과 웹사이트를 분리, 구축하여 서비스하였습니다.
이러한 경우를 굳이 용어를 붙여 애기하자면 Multi Source Multi-Device 이겠죠.
몇가지 대표적 모니터 평균 해상도를 정해놓고 웹사이트를 개별적으로 개발하고 접근도메인이나 웹사이트를 분리 구축한거죠.
CASE1.여러분을 만나게 해준 온오프믹스닷컴 예를들면
스마트폰/태블릿전용 웹사이트: http://m.onoffmix.com/
일반모니터용 웹사이트 : http://www.onoffmix.com (1280*800, 1024*768)
상기사이트를 스마트폰으로 접속해보면 내가 원하지도 않았는데 시스템에서 모바일 전용 웹사이트를 기본으로 보여주고 보여지는 모습 또한 PC모니터로 보여지는 모습과 내용과는 다소 차이가 있어 이질감 마저 느끼게합니다.
사용에 불편함이 있어 다시한번 PC버전을 클릭해서 들어가구요. 여러모로 불편하죠.
반대로 PC버전 웹사이트를 스마트폰으로 보면 늘렸다.줄였다.스크롤을 올렸다 내렸다. 난리 아닌 난리가 나시지 않나요? ^^;
CASE2.그럼 믹스드코드닷컴은 어떤가요?
http://www.mixedcode.com PC 모니터로 접근해도,태블릿으로 접근해도,어떤 기종의 스마트폰으로 접속해도 동일 URL 주소로 접속하며
동일 컨텐츠가 제공되어지지만 해당 디바이스에서 보기 편하게 알아서 컨텐츠가 정렬되어 보여집니다.
그렇습니다. 믹스드코드닷컴은 반응형웹사이트 기술을 이용해 개발되어진 One Source Multi-Device 웹사이트이기 떄문입니다.(짤 자랑중...)
너무 비교가 적나라한가요? ^^;
그럼 One Source Multi-Device 와 Multi Source Multi-Device 의 장단점은 어떤게 있을까요?
위와 같이 디바이스별 해상도를 지원하기 위해 개별로 웹사이트를 구축하는것과 하나의 소스로 다양한 디바이스를 지원하는것에는
다소 장단점이 상존하긴 하지만 개발 측면이나 개발비용,유지보수비용 측면에서 보면 One Source Multi-Device 가 훨씬 유리합니다.
Multi Source Multi-Device의 장점을 굳이 들자면 각각의 디바이스,또는 해상도에 최적화된 완벽한? 웹사이트를 개발할수 있다는 정도입니다.
여러개의 해상도별 웹사이트를 구축하면 비용이 많이 발생하며 추후 유지보수시에는 그 비용을 예측하기 힘들게 추가로 발생하게 됩니다.
그런데 문제는 갈수록 디바이스의 종류와 해상도의 종류는 증가하고 있는 추세이며 그분포 또한 예측하기 어려울 정도로 동적으로 변화하고 있으며 새로운 종류의 스마트기기는 또 생겨날것입니다.
UX(사용자경험) 관점에서 봐도 Multi Source Multi-Device는 사용자의 동일 제공 서비스에 대한 디바이스별로 다르게 보이는 모습과
동일 서비스의 접근경로의 분산화는 그리 바람직하지 않습니다.
또한 요즘은 웹사이트 이용이 PC보다는 스마트폰 디바이스를 이용하는 사용자가 더 많아지고 있는 상횡에서 해상도의 기준이 PC모니터에서 스마트기기의 해상도가 개발의 기준으로 자리매김 해가고 있습니다.
다음의 링크정보를 보시면 작년 2015년 시점 사용자 해상도 사용 분포정보를 확인할수 있으며
모바일 과 데스크톱 기반 해상도의 분포와 사용분포도를 확인해보면 최소해상도를 어디에 맟출지 반응형 웹사이트 지원 해상도를 어느선에 맞출지를
판단해볼수 있습니다.
http://crossdesign.co.kr/%EB%B0%98%EC%9D%91%ED%98%95-%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%A0%9C%EC%9E%91%EC%97%90%EC%84%9C-%EC%A4%91%EC%9A%94%ED%95%9C-%ED%95%B4%EC%83%81%EB%8F%84%EC%9D%98-%EC%9D%B4%ED%95%B4-%EB%B0%8F/
2.캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)?
반응형 웹(Responsive Web) 이란
하나의 웹사이트 소스를 이용 해당 웹사이트를 이용하는 PC,태블릿(노트북,IPAD..),스마트폰의 브라우저 환경 및 해상도에 최적화된 서비스를 제공하는
One Source Multi-Device 개발전략 또는 관련 기술을 통칭해 말하는 것입니다.
그럼 반응형 웹사이트는 어떻게 만들어지는것일까요?
반응형 웹사이트의 원리는 웹사이트의 스타일 즉,보여지는 모습을 제어할수 있는 웹 개발 기술요소에 있습니다.
그런것을 우리는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)라고 말합니다.
CSS에 대한 위키님의 정의를 한번 보겠습니다.
"종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로,
HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.
마크업 언어(HTML,XML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리 같은 꾸미는 역할을 담당한다고 할 수 있다.
즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.
CSS Zen Garden은 하나의 HTML(필요에 따라 최소한의 수정이 있다.)을 CSS만으로 얼마나 다양하게 표현할 수 있는지 알 수 있는 웹사이트이다.
현재 최신 CSS3 버전의 경우 그림자 효과, 그라데이션, 변형 등 그래픽 편집 프로그램으로 제작한 이미지를 대체할 수 있는 기능이 추가되었다.
또한 다양한 애니메이션 기능이 추가되어 어도비 플래시를 어느 정도 대체하고 있다."
위에서 말한내용중 이문구가 딱 적당한 설명으로 좋겠네요.
마크업 언어(HTML,XML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리 같은 꾸미는 역할을 담당한다
웹페이지의 구조와 내용을 HTML이 담당한다면 CSS는 그 HTML의 구조와 내용을 보기좋게 예쁘게 꾸며주는 역할을 하는것이죠.
Software공학에서 SoC(Seperation of Concern)이란 말이 있습니다.
S/W를 개발할때 관심사의 분리기법을 이용, 각각의 관심사에 따라 사용 기술과 구현방법을 달리하여 분리하는것이죠.
웹페이지 한장을 개발할때도 SoC원리가 반영되어 페이지의 기본구조와 내용 그리고 보여지는 스타일을 HTML 와 CSS로 구분하여 표현하고
소스 또한 분리개발할수 있게 한것입니다.
반응형 웹사이트는 다양한 디바이스의 해상도를 하나의 소스로 지원하기 위한 CSS 프레임워크라는 일반적인 HTML 소스를 쉽게
반응형 웹페이지로 스타일링 해줄수 있는 강력하고 사용이 쉬운 스타일시트 프레임워크 라이브러리(특정기능구현에 포커싱되어 개발된 1차 프로그래밍된 덩어리)를
이용해 개발되어집니다.
대표적인 반응형 웹 지원 스타일시트 프레임워크에는 다음과 같은 종류가 있습니다.
TOP1: Bootstrap
http://getbootstrap.com/
TOP2: Foundation6
http://foundation.zurb.com/
TOP3: Skeleton
http://getskeleton.com/
2016년 8월 시점 글로벌 시장 기준 부트스트랩 프레임워크가 인지도면이나 개발현장에서의 사용도 측면에서도 1위를 차지하고 있으며
또한 상업 반응형웹 템플릿 시장에서도 해당 부트스트랩 기술을 이용해 만들어진 저비용의 질높은 디자인 과 고퀄리티 템플릿들의 제작 및 구매가
어느 프레임워크가 보다 많이 이루어지고 있는게 현실입니다.
참고사이트>
http://www.vermilion.com/responsive-comparison/
3.부트스트랩 반응형 웹 프레임워크 간략 사용법
부트스트랩 프레임워크는 오픈소스이며 무료입니다.
해당 사이트에 접속해서 다운받을수 있습니다. 현재 16년 08월 시점 최종버전은 ver 3.3.7입니다.
http://getbootstrap.com/
http://getbootstrap.com/getting-started/#download
사용방법은 크게 두가지로 나뉩니다.
가.배포버전을 다운받아 웹사이트 소스에 포함시켜 사용하는 방법
- 다운로드 사이트에 접속 가장왼쪽 Download 버튼을 클릭 소스를 PC로 다운로드한다.
http://getbootstrap.com/getting-started/#download
-다운받은 압축파일(bootstrap-3.3.7-dist.zip)을 압축해제후 해당 폴더(bootstrap-3.3.7-dist)안에 있는 동일명의 폴더를 복사하여
웹페이지가 존재하는 폴더내에 복사 붙여넣기 한다.
-해당폴더안(bootstrap-3.3.7-dist)에 그안에 css,fonts,js 폴더가 존재합니다.
ㄴcss : 반응형 웹 구현 각종 스타일 클래스 기능 제공
ㄴfonts: 글자체 표현관련 소스제공
ㄴjs: 반응형 웹 구현관련 필수 javascript library 파일존재
-html페이지나 웹페이지를 열어 스타일시트 영역과 자바스크립트 영역에 관련된 파일의 경로를 추가한다.
-부트스트랩 프레임워크를 사용하기 위해서는 웹 프론트엔드 개발시 가장많이 사용되는 자바스크립트 라이브러리인
JQuery 라이브러리가 반드시 필요하므로 일단 CDN방식으로 JQuery라이브러리를 별도 추가 참조한다.
나.Bootstrap CDN을 사용하여 원격지 서버의 자원을 링크 사용하는경우
-CDN방식으로는 아래와 같이 HTML내에서 참조를 시킨다.
CDN(Content Delivery Network )?
https://ko.wikipedia.org/wiki/%EC%BD%98%ED%85%90%EC%B8%A0_%EC%A0%84%EC%86%A1_%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC
-CDN 방식은 개발시에도 항상 인터넷에 연결되어 있어야하기에 오프라인상에서 개발 진행시는 개발에 불편을 야기할수있다.
다.부트스트랩 개발 기본샘플 다운로드
https://github.com/twbs/bootstrap/archive/v3.3.7.zip
압출을 풀면 \bootstrap-3.3.7\bootstrap-3.3.7\docs\examples 폴더내 기본 개발샘플파일들이 제공된다.
starter-template폴더에 index.html을 열어보시고 코드를 확인해보시기 바랍니다.
상기와 같이 직접 부트스트랩 프레임워크 파일을 html페이지나 웹페이지에 참조하여 반응형 웹페이지를 샘플을 참조해가며
일반인분들이 개발도 가능하시겠지만 실제로는 해당업무는 전에 말씀드렸던 퍼블리셔란 전문직종의 전문가분들이 일반적으로는
담당하며 아무리 스타일시트 프레임워크가 쉽다하여도 기본적으로는 스타일시트라는 CSS 기술을 어느정도 알아야 실제 반응형 웹
사이트 개발이 가능합니다.
그럼 이제 우리는 HTML 도 배우고 CSS도 배우고 거기에 CSS Framework 인 부트스트랩 사용법까지 배워야할까요?
퍼블리셔가 되시려면 당연히 배우셔야겠지만 여러분은 웹개발 및 웹사이트를 만들려는거지 퍼블리싱 기법을 배우기 위해
이자리에 계시는것이 아닙니다.
당연히 HTML 기본 태그 사용법과 CSS에 대해 기본만 알려고 해도 전문적으로 1개월 이상의 집중적인 노력은 해야 그래도
볼만한 페이지 하나가 나올지 모르겠습니다.
그리고 텍스트로만 페이지를 표현할게 아니면 그래픽 디자인툴을 이용해 그래픽까지 만들거나 조작할수 있어야합니다.
이모든것을 다 배워서 웹페이지를 혼자서 만드실게 아니라면 이런방법은 어떨까요?
라.반응형 웹 템플릿의 활용검토
고품질의 디자인과 스타일링 및 반응형웹까지 적용된 HTML 소스가 존재하고 그것을 저렴한 가격으로 구매하여 사용할수 있다면 웹사이트의 개발 및 서비스를 통해 여러분이 보여주고자 하는 컨텐츠를 제공하는것에 목적이 있다면 유니크하지는 않지만 저렴한 비용으로 고퀄리티의 반응형 웹사이트를 만들수 있는 반응형 웹 템플릿을 구매하여 사용해 보세요.
보통 10달러(환율 대비 만3천원 정도) 정도의 가격에 고품질 디자인 및 검증된 반응형 웹페이지 소스를 활용하면 디자인과 퍼블리싱이 한방에 해결됩니다.
제공하고자 하는 서비스가 디자인 컨셉이나 보여지는 모습이 반드시 유니크해야 하지 않는다면 요즘 스타트업 기업들이 대부분 선호하는 방식인 반응형 웹 템플릿을 구매하여 빠르게 웹사이트를 개발 서비스해 보세요.
제공 서비스가 원할이 진행되어 투자 또는 재정이 확보가 되었다면 그때 충분한 돈을 들여 여러분 서비스에 걸맞는 독특한 웹사이트를 디자이너와 퍼블리셔,개발자들을 동원해 직접 개발 서비스해 보는것도 좋은 방안입니다.
그렇지만 직접 웹사이트 개발의 모든과정을 비용을 들여 개발하였다하더라도 템플릿만큼 좋은 결과물이 나올거란 기대는 하지 마세요.
개발이란 사람이 하는것이기에 변수가 많아 확실한 ROI(투자대비수익)가 나오란 법은 없습니다.
그럼 다음강에서는 반응형웹템플릿 사이트에서 템플릿을 고르고 구매하는 법을 배워보도록하겠습니다.
감사합니다.
Comments