죠셉의 세상이야기

-반응형 웹 디자인이 무엇일까요?

웹 개발을 하다 보면 반응형 웹이 어쩌고 하는 이야기를 듣습니다.

저는 웹개발자이기에, 자세히는 모르지만 디자이너분들이 이야기하는 반응형 웹 디자인이 무엇인지 한번 알아보겠습니다. 앞전에 설명한 부트스트랩의 경우도 반응형 웹 디자인의 일부입니다.

부트스트랩 정의

-반응형 웹 디자인의 정의

반응형웹디자인. 영어로는 Responsive Web Design라고 하는군요.

웹 디자인 기법 중 하나로 웹(Web)에 접속하는 디바이스에 반응하는(Responsive) 디자인(Design)을 말합니다.

과거불과 몇 년전만 해도 웹사이트들은 대부분 데스크톱에서만 볼 수 있고, 또 데스크톱을 제외하면 웹(인터넷)에 접속 할 수 있는 기기가 거의 존재하지 않았습니다.

물론 피처폰 시절에도 인터넷 접속은 대다수 가능했니다만.(WAP,i-mode) 여러가지 문제로 일반적으로 사용하기에는 무리가 많았고, 설상가상으로 통신사에서 데이터 요금을 너무 비싸게 책정하는 바람에 거의 사용되지 않았습니다. 

인터넷 한두시간 사용했는데 요금 고지서에 몇십만원이 찍혀 나올 정도였으니 말이죠. 

이 데이터 요금이 현실화 된 것은 스마트폰이 대중화 되던 2010년 무렵부터였습니다. 

하지만 최근 기술의 발전으로 데스크톱 뿐만 아니라 스마트폰, 태블릿 PC, 텔레비전 등 대부분의 전자기기에서 웹에 접속 할 수 있게 되었습니다. 

하지만 이러한 전자기기들은 모두 다른 크기의 스크린을 가지고 있었고, 이를 최적화 시키기 위해 m.naver.com처럼 별도의 모바일 페이지를 제작하고 모바일 사용자일 경우 모바일 페이지로, 아닐 경우 www.naver.com처럼 기존 페이지로 이동하는 방식을 사용해왔습니다. 

그러나 이러한 방식은 문제점이 많았는데 대표적으로 당연하게도 모바일 페이지를 별도로 구현해야 한다는 점입니다.  이러한 문제점을 해결하기 위해 반응형 웹이 등장하였습니다.

넓은 의미로는 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트라는 의미가 있는데, 이는 다양한 디바이스에 대응하여 최소한의 변화로 내용 탐색을 쉽게 하여, 사이트를 최적의 형태로 제공한다는 뜻입니다. 

또한 좁은 의미로는 CSS3 Media Queries, Fluid/Hybrid Grid Layout, Flexible Media Content 등을 이용/사용하여 구현한 홈페이지를 뜻합니다.

반응형 웹 디자인의 기법으로는 미디어 쿼리(Media Query), 유동형 그리드(Fluid Grids), 반응형 레이아웃,뷰포트(viewport)가 있다고 합니다.

반응형 웹디자인의 특징으로는 

1. 하나의 웹 : 하나의 콘텐츠에 오직 하나의 HTML 소스만 있습니다. 

특정 장치에 최적화된 여러가지의 HTML이 있으면 반응형이라고 부르지 않습니다. (CSS, JS 파일은 여러가지가 존재할 수 있습니다.)

2. 하나의 URL : 특정 장치에 최적화된 페이지로 연결되는 별도의 URL이 있으면 반응형이라고 부르지 않습니다.

을 들수 있겠네요.

반응형 웹 디자인은 유연한 레이아웃에 대응하여 항상 최적의 화면을 제공함으로써 다양한 스크린 사이즈를 지닌 디바이스에 적응하게 됩니다. 

그리고 반응형 웹이 일반 웹 디자인과 다른 큰 이유 중에 하나는 이 모든 기술이 하나의 소스로 구현 가능하다는 점입니다. 

보통 일반 웹 디자인의 경우에는 PC와 태블릿, 스마트폰의 브라우저 각각에 최적화시킨 소스를 개발하여 각 디바이스 별로 산출물이 생기기 때문에 초기 제작비용뿐만 아니라 추후 유지보수 인력과 비용까지 추가로 발생하게 됩니다.

요즘에는 다양한 스마트 기기가 계속해서 개발되고 있기 때문에 각각의 디바이스와 스크린 사이즈에 맞추어 사이트를 개발한다는 것은 거의 불가능에 가깝다고 볼 수 있습니다. 

하지만 반응형 웹은 하나의 소스를 수정하면 모든 스크린 사이즈에 맞추어 컨텐츠가 최적화되기 때문에 유지보수가 효율적이고, 사용자 입장에서도 기기에 구애받지 않고 항상 최적의 화면을 경험할 수 있다는 측면에서 반응형 웹의 장점이 고스란히 나타나게 됩니다.

반면 이러한 특징때문에 발생하는 단점이 있는데, 모바일 사이트에 비해서 무겁다는 점입니다. 

이는 사이트 속도와 직결되는 문제로, 사용자 입장에서는 불편하게 느낄수도 있습니다. 

반응형 웹 디자인은 모바일 사이트보다 읽어들이는 소스가 많아서 쓸데없는 데이터를 소비할 수도 있고, 더군다나 데스크톱 사이트와 모바일 사이트의 용도가 다른 사이트의 경우 이러한 반응형 웹 디자인은 걸림돌이 될 수 있습니다. 

이 때문에 서버 사이드 스크립트를 이용해 접속 기기에 따라 디자인을 선택적으로 적용하는 RESS(Responsive Design + Server Side Components)라는 기법도 있습니다. 

한국 한정이지만 아직까지도 쓰이고 있는 구버전 인터넷 익스플로러(주로 IE8 이하)에서 와장창 깨져버린다는 단점도 있다고 하네요. 미디어 쿼리로 반응형 웹을 구성하는 경우, 그걸 씹어먹고 적용돼버려서 결국에는 모바일 버전으로 보이게 됩니다. 특히 업그레이드에 제약을 받는 관공서의 컴퓨터가 심각한 편이라고 하네요. 

제가 근무하던 공공기관들은 그냥 모바일은 간단한 공지사항 정도만 볼수 있고, 대부분의 처리는 웹에서 할게 하였는데, 장점만 있는게 아니라서 쉽게 변경을 못하는거 같네요.

현재 보고 계시는 제 블로그도 원래는 반응형 스킨을 사용했는데, 데스크탑용으로 변경하니 속도가 좀 빨라진 거 같기도 하구요.

사람들이 반응형 반응형 그러던데, 무슨뜻인지 몰라서 벙쪄있던 적도 있었는데, 정의는 그렇게 어려운것이 아니네요.  반응형 웹디자인( Responsive Web Design)에 대해서 알아보았습니다.

출처 : 나무위키, 본인생각

-부트스트랩 프레임워크(Bootstrap Framework)에 대해서 알아보겠습니다.

요즘 웹에서 유행하고 있는 부트스트랩 프레임워크에 대해서 한번 알아보겠습니다. 

일단 부트스트랩 프레임워크는 트위터에서 시작된 HTML5 기반의 오픈 소스 웹 디자인 프레임워크입니다. 

시작은 디자이너 하나와 트위터의 한 개발자였지만 지금은 트위터에서 주도적으로 개발하고 있지는 않다고 합니다.

일단 부트스트랩의 장점들을 한번 알아보겠습니다.

트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 JavaScript로 만들어 놓은 것이라고합니다. 

웹 디자이너나 개발자 사이에서는 웹 디자인의 혁명이라고 불릴 정도로 폭발적인 반응을 얻는 프레임워크입니다.

그 이유는, 글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지, 아이콘 등의 자잘한 것 뿐만이 아니라, 드롭다운 메뉴, 버튼, 탭, 리스트, 메뉴바, 페이지 이동 바, 알림 메시지, 썸네일, 진행 바 등의 웹 페이지에서 많이 쓰이는 요소를 거의 전부 내장하고 있기 때문입니다. 이 때문에 웬만한 웹 페이지는 부트스트랩의 CSS와 JavaScript, 관련 이미지만 설치하고 미리 지정된 CSS 클래스나 JavaScript 함수만 불러오면 트위터에서 쓰는 것과 엇비슷한 디자인이 뚝딱 만들어집니다. 거기다 PC용 디자인 뿐만 아니라 태블릿이나 스마트폰 같은 모바일용 디자인도 지원합니다. 

이 때문에 디자인을 할 시간이 크게 줄어들고, 여러 웹 브라우저를 지원하기 위한 크로스 브라우징에 골머리를 썩일 필요가 없습니다. 

크로스 브라우징을 위한 각종 핵도 들어 있기 때문이라고 합니다. 거기다 웹 브라우저 크기에 따라 자동으로 정렬되는 "그리드 시스템"을 채용하고 있기 때문에 하나의 웹 페이지를 데스크탑, 태블릿, 스마트폰 모두에서 무리없이 보게 만들 수 있습니다. 즉 반응형 웹 디자인을 지원한다는 의미입니다.

다들 아시겠지만 반응형 웹이란 웹 디자인 기법 중 하나로 웹(Web)에 접속하는 디바이스에 반응하는(Responsive) 디자인(Design)을 말합니다. 모바일 페이지를 따로 만들필요없이, 웹페이지 하나로 다 나온다는 이야기군요.

거기다 이게 오픈소스입니다. GPL은 아니고 MIT 허가서를 사용하는데, 재배포 면에서는 GPL보다 휠씬 자유로운 라이선스입니다. 

단 같이 들어 있는 아이콘은 CCL BY 3.0을 사용하므로 출처를 밝혀야 한다고 합니다. 소스까지 오픈되어있다 보니 여기서 파생된 프로젝트만 해도 수백 개를 넘어가더군요.

그렇다면 부트스트랩의 단점들은 어떤것이 있는지 알아보겠습니다.

단점은 디자인이 정형화 되어 있다 보니 비슷한 디자인의 페이지가 양산될 수 있다는 것입니다. 대게 부트스트랩으로 만든 사이트들은 모양이 고만고만합니다. 그러나 이건 오픈소스의 힘으로 극복이 가능하다고 합니다. 오픈소스이다 보니 사용자가 커스터마이징 하는 것도 자유롭고, 이 커스터마이징 한 것을 재배포해도 됩니다. 심지어는 상업적으로 판매하는 것도 허용한다고 합니다. 

하지만 우리나라에서는 심플한 디자인보다는 이미지를 많이 쓰는 화려한 디자인을 선호하는지라 부트스트랩으로 만드려면 소스를 처음부터 뜯어 고치다시피 코딩을 해야하다보니 인기가 없다고 합니다. 이것 이외에는 HTML5에 맞춰져 있다 보니 구형 브라우저 지원이 미흡하다고 합니다. 이 때문에 HTML5가 제대로 지원되지 않는 IE7,8의 경우에는 강제로 HTML5를 인식시키는 JavaScript 코드가 필요하고, 가뜩이나 JavaScript 해석이 느린 IE 구버전을 더 느려지게 하는 주범이 됩니다. 결국 이 때문인지 3.0에서는 IE8부터 정식 지원합니다.

부트스트랩이 적용된 사이트로는 나무위키, 리그베다위키, 리브레 위키, 티비플, 위키닷, XpressEngine 공식홈페이지 등이 있다고 합니다.

디자인에 크게 신경쓰지 않고 사이트를 뚝딱만들수 있어서 참 유용했는데, 웹디자인 프레임워크 치고는 좀 불편하다는 이야기도 있더군요.

출처 : 나무위키, 본인생각

-ASP란 무엇일까요?

웹개발 언어중에, jsp, php는 저번에 알아봤습니다.

그러면 ASP란 무엇인지 한번알아보겠습니다.

프로그래밍의 기본인 Hello world!를 입력해보면 <% Response.Write "Hello, world!" %> 이렇게 되겠죠.

스크립트 엔진(Active Server Page)라고 합니다.Active Server Page의 약자입니다. 

마이크로소프트가 인터넷 정보 서비스(IIS)에서 동적 웹 페이지 생성 용도로 사용할 것을 목적으로 제작한 서버 사이드 스크립트 엔진입니다. 

당연하지만 확장자는 .asp 를 사용합니다.

1996년 출시된 IIS 3.0부터 기본으로 포함되기 시작되었으며, 이후 새 버전의 IIS가 출시될 때마다 같이 버전업이 되었습니다. 

최종버전은 2000년 출시된 IIS 5.0에 포함된 3.0이라고 하네요. 벌써 17년 전이군요.

ASP의 특징은 여러 가지 언어를 지원한다는 것입니다. 

기본적으로 쓰이는 언어는 비주얼 베이직 계열의 VB스크립트지만, 다른 언어를 불러 쓸 수도 있습니다.  주로 JavaScript 기반의 JScript와 Perl 기반의 PerlScript을 사용한다고 하네요.

사람 헷갈리게 만드는것이 PHP나 JSP 등은 그 명칭이 언어 그 자체인데 비하여, ASP는 윈도우에서 지원하는 기존 프로그래밍 언어를 웹에서 쓸 수 있도록 하는 일종의 기술에 가깝습니다. 

이러한 특징은 ASP.NET으로 발전하면서 크게 강화되었는데, .NET 언어 어떤 것이든지 ASP.NET으로 개발이 가능합니다. 

거기다 개발툴이 비주얼 스튜디오라서 윈도우 개발자라면 어렵지 않게 ASP로 개발이 가능하다는 장점이 있습니다.

윈도우 개발자에겐 좋은 일인 반면, HTML - Javascript - ASP(vbscript) 순서를 밟고 온 순수 웹개발자에겐 좌절을 안겨주었다고 합니다. 

순차적 스크립트에 익숙한 사람이 갑자기 객체지향 프로그램을 짜기는 쉽지 않기 때문이라는군요.

비주얼 스튜디오와 묶여 있기 때문에 도움말도 상당히 강력한 편입니다. 

물론 서드파티 개발툴도 상당히 많이 나와 있고, 상용인 비주얼 스튜디오와 달리 오픈소스도 꽤 많이 나와 있습니다.

MS에서 내놓았다는 것에서 눈치챈 사람들도 있겠지만, 이건 윈도우에 최적화 되어 있고 다른 OS는 정식으로 지원하지 않습니다.

물론 이말은 서버OS를 얘기하는거지 클라이언트 OS를 얘기하는게 아닙니다. 윈도우 컴퓨터에서 잘만 보고 즐길수 있지요.

아파치에서 Apache::ASP라는 모듈을 사용하면 아주 제한적으로 PerlScript 기반의 ASP를 구동할 수 있지만, 리눅스 환경에선 PHP, JSP 등의 경쟁자들이 많아서 사용되는 일이 별로 없는거같습니다.

국내에서는 사용자가 많은 편은 아닙니다. 윈도우 서버를 쓸 것이 아니라면 굳이 쓸 이유가 없기 때문이라는군요.

서버용 윈도는 클라이언트용 윈도보다 훨씬 비싸서(2012 R2 기준으로 130만원 정도) 서버 구축 비용도 리눅스에 비해 더 비쌉니다. 

웹호스팅의 경우 지원폭은 JSP보다 넓은 편입니다. 윈도우 웹호스팅이라면 ASP는 기본적으로 지원하고 들어가기 때문이지요. 

2002년에 ASP.NET으로 대체되었다고 합니다. 

ASP는 향후 2020년까지 지원이 예정되어 있고, 현재는 신규 프로젝트에는 거의 쓰이지 않고 있습니다. 

오래된 사이트에 기존에 구축해놓은 솔루션의 유지보수용으로 사용되는 것이 거의 전부라고 하네요.

그럼 ASP.NET에 대해서 잠깐 알아보겠습니다.

ASP.NET이란 2002년에 처음 선을 보인 ASP의 후속작입니다. 그리고 NET 프레임워크 위에서 구동되는 서버 사이드 웹 프레임워크입니다.

닷넷 프레임워크 기반이기 때문에 지원 언어라면 어떤 것이든 사용할 수 있는 것이 특징입니다. 

하지만 기본적으로는 역시 C#, Visual Basic.NET이 많이 사용된다고 하네요.

ASP.NET은 기본적으로 '웹폼'이라 하여, 데스크탑 C#의 윈폼의 웹 버전에 해당하는 방식으로(마우스로 드래그&드롭하여 디자인하고, 이벤트 기반으로 로직을 개발하는) 디자인 및 개발이 이루어졌습니다. 

다만 타 플랫폼의 웹 프레임워크와는 상당히 이질적인 환경이 되어 개발자들이 ASP.NET을 기피하는 현상이 일어났고, 이후 웹 프레임워크에서 친숙한 MVC 패턴으로 개발이 가능한 프레임워크가 발표되었습니다.

ASP와 마찬가지로 윈도우 환경에서만 구동되었으나, 모노 기반으로 타 플랫폼에서도 사용할 수 있도록 되었고, 2016년 발표된 ASP.NET Core(ASP.NET 5.0에서 변경된 명칭)에서는 기본적으로 멀티 플랫폼을 지원하게 변경되었다고 합니다.

전 개인적으로 APS나 ASP.NET은 사용해 본적이 없습니다. 간혹 병원 사이트들이 ASP로 된걸 본적이 있는데 항상 저런 사이트들은 어떻게 만들어지고, 유지보수 되는지 좀 의문이 들더군요.

사실 한국에서는 웹개발자가 JAVA, JSP만 해도 향후 10년은 먹고사는데 지장이없어 보이는 구조이긴합니다만 게시판 정도는 만들수 있게 좀 독학을 해보고 싶네요.

참고사이트 : 나무위키