개자이너 혹은 디발자를 위한 웹 테크트리 소개 - 상편
혼자 다 해먹고 싶은 욕심쟁이 웹 디자이너들을 위한 작은 길잡이 #1
0. 글쓴이 소개 및 면책사항 고지
글쓴이는 학부에서 시각디자인을 전공하고 대학원에서 UI에 따른 정보의 가독성에 대해 연구한 디자이너 겸 웹 개발자이다. 디자인 에이전시와 기업의 연구소 및 인하우스 디자인 부서를 거쳐 지금은 작은 디자인 스튜디오를 창업하여 공동대표를 맡고 있다.
이 글에서 제공하는 내용은 개인의 경험만을 기술한 것이며, 웹사이트 개발을 병행하고자 하는 디자이너를 위한 내용에 한정함을 알린다. 또한 이 글에서 제공하는 정보는 옳은 정보가 아닐 수 있으며 상황과 경우에 따라 올바른 답이 아닐 수 있다. 그러므로 글을 읽는 이들은 여기에 제공한 정보를 하나의 지침으로만 생각하여야 하며 아래의 내용만을 맹신하여 편협한 시각을 가지지 않아야 한다.
1. 웹 사이트의 기본 구조
웹 사이트는 크게 사용자에게 보이는 프론트엔드와 서버가 해야할 일이 담긴 백엔드로 나뉜다. 프론트엔드 개발에는 많은 디자이너들의 관심사인 GUI가 포함되며 주로 국내에 한정하여 이 일을 담당하는 '웹 퍼블리셔'라는 전문 직군이 있다. 백앤드는 프론트엔드를 통해 입력받은 정보를 분류하고 가공해 처리한 뒤 저장한다. 필요하면 사용자가 요청한 정보를 프론트엔드에 표시하도록 전달도 해준다.
대충 웹은 이렇게 굴러간다2. 프론트엔드의 기본 테크트리
많은 경우 디자이너가 웹 개발을 하기로 마음먹는 이유는 디자인 결과물을 컴퓨터가 렌더링해주는 코드를 본인의 의도대로 나타나도록 직접 만들고 싶기 때문이다. 이를 위한 첫 학습주제는 뼈대를 담당하는 HTML(HyperText Markup Language)과 디자인을 담당하는 CSS(Cascading Style Sheet)다. 재미있는 사실은 HTML, CSS같은 마크업 언어는 전통적인 프로그래밍 언어로 취급하지 않는다는 사실이다. 단순히 나타나는 형태만을 명시한 마크업 언어라는 이유인데, 그러한 이유로 이 영역을 다루는 사람을 프로그래머라고 부르지 않는 경향이 있다.
더 자세히 들어가보자. HTML은 정보구조를 명시하는 역할을 한다. 하지만 HTML만으로는 컴퓨터가 디자이너가 의도하는 GUI 디자인을 화면에 그려낼 수 없다. 따라서 디자이너는 반드시 CSS를 통해 HTML 태그의 모양새를 정의해 주어야 한다. 처음에는 교재에 나온 예제를 따라하는 연습을 하고, 레이아웃을 어느정도 그릴 수 있게 되면 프로토타이핑 툴로 직접 만든 디자인이나 기존 웹사이트들을 똑같이 따라 만들어 가며 연습하는 것을 추천한다.
좌: HTML only / 우: HTML + CSS3. 프론트엔드의 확장 테크트리
기본 테크트리를 타고 충분한 연습을 거쳤다면 스스로의 디자인을 컴퓨터가 렌더링 할 수 있도록 하는 데 자신이 붙었을 것이다. 만약 여기에서 무언가 부족함을 느꼈다면 그 이유는 동적 제어를 할 수 없기 때문일 것이다. HTML과 CSS만으로는 웹사이트에서 탭을 클릭하여 콘텐츠를 전환시키거나, 움직이는 이미지 슬라이더를 만들기에 한계가 있다.
이것을 해결하고 싶은 생각이 들 때가 바로 Javascript를 배워야하는 순간이다. Javascript를 이용하면 웹 사이트의 DOM(Document Object Model) 요소를 제어하여 위치를 옮기거나, 색상을 변화시키거나, 사라지고 나타나는 것과 같이 인터랙션이 발생했을 때 특정한 일이 일어나도록 하는 동적 제어를 실행할 수 있다. 물론 Javascript는 웹사이트의 동적 제어 외에도 다양한 일에 쓰이지만, 디자이너가 알아야 할 영역은 그 정도면 충분하다.
이제부터는 HTML, CSS를 학습할 때와는 달리 프로그래밍의 영역에 들어선다. 따라서 변수, 상수, 조건문, 반복문 등과 같은 문법은 물론 프로그래밍의 기초를 충분히 학습하는 것이 좋다. 그리고 교재를 통해 Javscript의 기본을 익혀 DOM요소를 통제하는 법을 충분히 학습했다면 보다 효율적인 개발을 위해 jQuery와 같은 Javascript 라이브러리를 배워보는 일도 추천한다.
물론 Pure Javascript 만으로 모든 문제를 해결한다면 더할 나위 없이 좋겠지만 jQuery와 같은 라이브러리를 이용한다면 코드의 양과 개발 시간을 크게 단축할 수 있어 소규모 프로젝트나 빠르게 프로토타입을 만들어 내는 일을 금새 끝내는 데 유리하다. 물론 실력이 향상될 수록 라이브러리 의존도를 낮추어야 하겠지만, 초보운전에게 서킷을 타라고 권하지 않듯이 배우는 단계에서는 신경쓰지 않아도 된다. 더 많고 다양한 라이브러리를 접해보고, 실무 프로젝트에 가장 어울리는 것을 골라 쓰는 것이 현명하다.
이상의 내용을 요약하자면 다음과 같다.
1. HTML과 CSS를 학습하여 정적인 디자인을 구현하는 것을 익힌다
2. 동적 제어의 욕구가 생긴다면 Javascript를 학습하고 DOM요소를 제어하는 법을 익힌다
3. Javascript 의 기초를 학습한 후 Javascript Library를 배워 보는 것도 추천한다
백엔드에 대한 이야기는 하편에서 계속.
원문 : 유민영 (yoo@minyoungyoo.com)
감수 : Ned Park
