'자바스크립트'에 해당되는 글 2건

  1. 2015.01.22 짤방으로 이해하는 웹 디자인의 역사
  2. 2013.04.10 From 0 to C, 디자이너에게 코딩이란? (3)





웹 디자인의 역사는 어떻게 발전해왔을까요? 전에 반응형 웹 디자인을 짤방으로 설명했던 산디스 씨(Sandijs Ruluks), 이번에는 웹 디자인의 역사를 짤방으로 간단하게 정리했는데요. 그는 웹 디자이너들이 '디자이너가 개발을 배워야 하는가?' 논하기 전에, 웹 디자인의 역사에 대해 알 필요가 있다고 생각해서 이 글을 썼습니다.


1. 웹 디자인의 암흑기


웹 디자인의 역사


웹 디자인의 초창기는 매우 어두웠습니다. 검은색화면에 단색의 글씨만 존재했지요. 디자인이라고 할 수 있는 것은 특수문자와 탭키를 이용한 것이 전부였습니다.

 


2. 테이블 - 웹 디자인의 시작


웹 디자인의 역사


브라우저가 생기고 이미지를 올릴 수 있으면서웹 디자인이 시작되었습니다. 그리고 테이블을 통해 정보를 구성할 수 있었는데요. 하지만 사람들은 레이아웃을 잡기 위해 테이블을 사용했습니다. 수직 정렬이나 그리드를 맞추기가 편하다는 장점을 가지고 있었는데요. 하지만 이 방식은 테이블 본연의 기능이 아니고, 유동적이지 못했습니다.



3.자바스크립트의 구원

 

웹 디자인의 역사


자바스크립트가 html의 한계를 극복하기 시작했습니다. 예를 들어 팝업창이 필요하거나, 빠르게 코드를 수정하고 싶을 때, 자바스크립트를 사용했습니다. 웹사이트에 동적인 요소가 추가되면서 웹사이트는 한층 다채로워졌습니다. 요즘은 css가 좋아져서 자바스크립트를 대체하고 있지만, 그래도 여전히 강력한 재료입니다.

 



4. 표현력의 황금시대 - 플래시


웹 디자인의 역사


플래시가 보급되면서 웹 디자인의 표현력은 황금시대를 맞이합니다. 디자이너는 모양, 레이아웃, 애니메이션, 인터랙션, 그리고 어떠한 폰트도 사용할 수 있었습니다. 플래시는 사용자 컴퓨터에 최신 버전이 설치되어 있고, 약간의 로딩시간을 기다리면 마법처럼 현란하게 작동했습니다.


하지만 검색에 최적화 되지 않았으며, 높은 CPU 점유율 때문에 아이폰에서 제외됩니다. (그러면서 웹 디자인에서 플래시는 몰락하게 되죠.)

 



5. CSS


웹 디자인의 역사


플래시와 비슷하게 나온 css는 기술적으로 더 좋은 방식으로 접근하는데요. 플래시와 달리 기존 html로 구조를 유지하면서 css로 꾸미는 방법입니다. html을 뼈와 살이라면, css는 옷이라고 할 수 있겠네요.


css의 첫 번째 버전은 유연하지 않았습니다. 가장 큰 문제는 당시 구형 브라우저들이 css를 지원하지 않았는데요. 이 브라우저들이 css를 완전히 지원하기까지 오랜 시간이 걸렸습니다. 어느 정도의 표준이 생기고 css3까지 나오면서, 자바스크립트를 대체할 수 있을 정도로 발전했습니다.


이 글의 필자 산디스 씨는 css가 개발 언어라기보다 서술문에 가깝고, 디자이너들은 반드시 알아야 한다고 강조했습니다. 저처럼 영어가 익숙하지 않은 사람은 서술문이라는 표현은 동의 못하겠지만 디자이너가 반드시 알아야 한다는 사실은 동의할 것입니다.

 



6. 모바일 시대의 도래 : (column)을 이용한 디자인

 


웹 디자인의 역사


모바일로 웹사이트를 브라우징 하는 것은 대단한 도전이었습니다. 속도가 매우 느리고, 기기에 따라 디자인이 전부 달랐습니다. 또한, 잘 못 쓰면 폭탄 요금을 맞을 수 있었기 때문에 인터넷 버튼을 누르는 것조차 두려워했습니다.


하지만 스마트폰이 보급되고, 모바일 인터넷 환경이 좋아지면서 모바일 웹 디자인도 발전하기 시작합니다처음에는 단(column)을 이용하는 디자인으로 모바일에 대응했습니다. 대표적으로 960 그리드 시스템을 12단으로 나눠서 사용했습니다.


그다음으로는 자주 쓰이는 서식, 메뉴, 버튼 등 일반적인 UI를 쉽게 사용할 수 있는 라이브러리가 등장했습니다. 부트스트랩(Bootstrap)과 파운데이션(Foundation)이 대표적인데요. 모바일도 대응할 수 있는 웹 사이트를 빠르고 쉽게 만들 수 있게 되었습니다. 하지만 그만큼 디자인이 비슷한 사이트들이 많아졌으며, 디자이너들이 사용하기에는 코드가 어려웠습니다.

 



7. 반응형 웹 디자인

 

웹 디자인의 역사


디자이너 겸 개발자 에단 마콧 씨(Ethan Marcotte)는 같은 콘텐츠로 화면 넓이에 따라 디자인을 바꿀 수 있는 '반응형 웹 디자인'이라는 용어를 만들고 제안했습니다. 반응형 웹 디자인은 html 수정없이 css 수정으로 모든 크기의 화면에 대응할 수 있습니다. 모바일 웹사이트를 따로 만들 필요도 없어 효율적이며, 어디서나 같은 콘텐츠를 보여줄 수 있습니다.

하지만 반응형 웹 디자인에도 몇 가지 문제가 있는데요. 디자이너들은 반응형 웹 디자인을 위해 여러 가지 화면에 맞는 디자인을 각각 만들어야 합니다. 또한,개발자들은 이미지를 어떻게 사용할지, 데스크톱 혹은 모바일 우선인지 신경 써야 할 것이 많습니다.

 



8.플랫 디자인의 시대


웹 디자인의 역사


수 많은 기기에 맞춰 디자인하는 것은 시간이 오래 걸립니다. 이에 사람들은 정교하지만 오랜 시간이 걸리는 스큐어모픽 디자인을 버리기 시작합니다. 그리고 단순하고 콘텐츠가 돋보이는 플랫디자인을 선호하기 시작하는데요. 형태는 기능을 따른다는 말처럼, 이미 오래전부터 플랫디자인의 시대가 예견되었을지도 모릅니다.




9. 웹 디자인의 미래는?

 

웹 디자인의 역사


우리가 디자인한 이미지파일이 바로 브라우저에서 작동한다면 어떨까요? 거기에 웹 표준과 접근성까지 준수하면서 모든 환경에 대응한다면 어떨까요? 디자이너들은 디자인에 집중하고, 개발자들은 브라우저 호환을 걱정할 필요 없이, 실질적인 개발에 집중할 수 있을 것입니다. 물론 저 같은 웹 퍼블리셔는 일자리를 잃을 수도 있겠지만, 기술의 발전에 뿌듯할 것 같네요. 어쩌면 미래에 기술력보다 더 중요한 것은 좋은 웹사이트를 만들수 있는 기획과 창의력이 아닐까 생각해봅니다.



by 숭이발자국



출처: FroontBlog



 

Posted by slowalk

From 0 to C

 

 

멀티미디어를 다루는 디자이너들이 늘어가고 있습니다.
 증강현실과 인터렉티브 디자인과 같은 첨단 환경을 통해 코더와 디자이너가 서로의 벽을 넘나드는 요즘, 흘러 넘치는 생각을 실현시키기 위해선 코딩을 이해하는 것이 중요합니다. 하지만, 태생부터 숫자와 친하지 않은 디자이너들... C언어 책을 앞에 두고 끙끙대다 결국,"난 창의적인 사람이라 이런 구조적인 일은 나랑 안맞아"라는 변명을 늘어놓는 사람들이 한둘이 아닙니다. 이런 이들에게 탁구공, 나무상자, M&M 초콜릿같이 주변에 있는 사물들로 코딩을 가르치는 사람들이 나타났습니다!

 

 

바로 네덜란드 
암스테르담에 위치한 Hello, Savants!의 Ubi de Feo입니다. 그는20년 넘게 코더로 일해온 자신의 경력을 살려 초보자들이 프로그래밍 언어라는 추상적인 개념을 컴퓨터와 책을 통해 이해하는 것이 아닌, 보고 만지며 이해할 수 있는 워크숍, From 0 to C을 통해 쉽게 이해할 수 있도록 만들었습니다.

 

 

from 0 to C from HELLO, SAVANTS! on Vimeo.

 

 

그의 워크숍은 조금 특이합니다.

먼저, 컴퓨터를 저~ 멀리 치우고, 모니터도, 전선도 모두 모두 저~ 멀리 치웁니다.
그리고 나무상자와, 탁구공, M&M 초콜릿같은 주변에서 흔히 볼 수 있는 물건들을 가져옵니다. 물컵도 좋고 연필도 좋습니다.

 

 



몸을 움직이는 수업을 진행하기 전 그는 학생들과 이야기를 나누며 숫자와 2진법에 대한 숫자의 세계에 대해 알려줍니다. 그리곤 컴퓨터가 수행하는 프로세스를 여러개의 스테이지로 구분해봅니다. 구분된 스테이지가 복잡해질 즈음, 학생들은 컴퓨터 부품을 대체한 역할을 맡게됩니다. 학생과 선생님은 각 스테이지를 돌아다니며 탁구공이나 M&M 초콜릿을 가지고 컴퓨터의 작동원리를 직접 손으로 놓아보기도 합니다. 이때 학생들은 간단한 프로그래밍 언어를 배웁니다. 액션스크립트나 자바스크립트도 같은 방법으로 적용되며 앞으로 사용될 프로그래밍 언어의 토대를 이해할 수 있습니다. 

 

 

그렇다면 어떻게 컴퓨터의 작동 원리를 
사물을 이용해 이해할 수 있을까요? 
예를들어, 탁구공은 2진법을 설명할때 사용됩니다. 4개의 구멍이 뚫린 상자를 제작하여 이 상자 2개로 1byte를 나타내는 방법입니다.(상자의 각 구멍은 1bit로 8bit=1byte입니다.)
이때 이 상자 가장자리에는 bit와 byte를 나타내는 표시자와 숫자를 표시, 이진법을 쉽게 알려줍니다.
이렇게 상자와 탁구공을 통해 '세는 방법'을 천천히 소화하는 과정에서 학생들은 수량을 가장 최적화된 방법으로 표현하는데 집중합니다.

 

 




프로그래밍 언어를 배울때 다양한 타입의 메모리'크기'에 대해 배울일이 많다고 합니다. 이때 byte를 '그리는' 방법을 배워 얼마나 많은 양의 데이터를 저장할 수 있는지 탁구공와 상자를 통해 'see' 볼 수 있다면, 여러분이 '크기'에 대한 개념을 이해하는게 더 쉬워질거라고 하네요.

 

 

 

이탈리아 Treviso의 Digital Accademia에서 열린 "From 0 to c" 워크숍

 

 

다른 예로 
M&M 초콜릿은 데이터의 양을 나타내기 위해 사용합니다. 그리고 컴퓨터상에서 사용하는 데이터의 공간과 데이터의 이동을 나타내기 위해 학생들끼리 서로 교환해보기도 합니다.

 

 



 

 

이렇게 시각적인 방법으로 컴퓨터에 대해 이해한 학생들에게 컴퓨터 언어를 가르치면 그때부터는 C언어나 액션스크립트, 자바스크립트 등 다양한 프로그래밍 언어를 문제 없이 받아들일 수 있다고 합니다.





그는 프로그래밍 천재를 만들고 싶기보단, 학생들이 문제를 해결해 나갈 자신이 다루는 언어가 무엇인지 알고 좋은 자세로 문제를 해결해나가는 방식을 가르치고싶다고 합니다.


그리고 무엇보다 여러해동안 학생들을 가르쳐오며 학생들과 얼만큼 높은 수준의 소통을 하느냐에 따라 학생이 배우고, 내용을 흡수하는 정도가 다르단것을 깨달았다고 하네요. 그래서 마치 고대 철학자들이 제자들에게 지식을 전해주는 방법처럼,  역시 수업시간에 학생들과 함께 몸을 움직이고 문답을 하며 프로그램을 진행한 것이  프로젝트의 성공의 열쇠였다고 합니다


좋은것들은(Good things) 자신이 하는 일을 좋아하는 미래의 프로그래머나 해커에게서 나올것이라 믿기때문에 이 프로그램을 어린 아이들이 이해할 수 있을 정도로 쉽게 만드는 것이 그의 목표라고 합니다.

프로그래밍이라는 어려운 개념을 구체적이고 시각적인 게임과 같은 과정으로 만든 그의 [프로세스 디자인]처럼 그동안 어렵게만 여겨 배우기를 포기했던 과학, 기술의 과정을 다른 방법으로 생각해보면 어떨까 하는 생각이 드는데요, 또 다른 재미난 방법으로 세상을 재밌게 만들어줄 그들의 프로젝트가 기대됩니다. 




| 출처 |  Hello, Savants! , From 0 to C , Wired_uk

by 사슴발자국





Posted by slowalk