06 Feb 2017
무지한 1인을 깨우치기 위한 팀 홈페이지 만들기 (1)
시작에 앞서
“bongarcon, 혼자 가이드 끝났는데 우리 팀 홈페이지나 만들어 줘.”
혼자 가이드 완료 후 DK Kim과의 첫 만남에서 DK Kim이 내게 한 말이다.
“그냥 다른거 없고 Airbnb 블로그 정도로만 간단하게 디자인해서 만들어 줘.”
DK Kim의 두번째 대사였다. 순간 정적이 흘렀고, 이 긴장을 깨는 나의 번뜩이는 아이디어가 있었다.
“어, 그럼 이번에 DK Kim이 한번 배워서 해보는거 어때요? 제가 옆에서 알려드릴께.” “오, 좋네. 그럼 블로그로 정리해서 보여줘, 잘가.”
스스로 무덤을 판다는 것은 이런 상황에 쓰는 말일 것이다. 그렇게 해서 시작한 이번 포스팅은 ‘무지한 1인을 깨우치기 위한 팀 홈페이지 만들기’가 되겠다. 아주 디테일한 설명은 생략될 가능성이 크지만, 개발에 대한 지식이 거의 없는 상태인 디자이너를 가르치는, 디자이너 출신의 개발자가 작성한 매뉴얼이 될 것이다. 대략적인 디자인 역시 포토샵과 같은 그래픽 툴로 모양새가 갖춰진 것을 가정하기에, 역시 해당 내용은 생략될 것이며, 최대한 디자이너의 눈높이에 맞춰 홈페이지를 만드는 과정을 설명하도록 노력하려 한다.
이 MUJI가 아니다.
HTML? CSS? Javascript?
우선 짧게나마 이해가 필요한 부분이 있다. 홈페이지라고 하면 대개 “페이지”라고 뭉뚱그려 생각하게 마련이다. 하지만 개인적으로 홈페이지를 디자인함에 있어서는 기본적으로 HTML과 CSS, 그리고 Javascript가 삼위일체를 이루어야 좋은 홈페이지가 된다고 생각한다. 그래서 대부분의 디자이너들이 생각하는 것과 다른 방식으로 디자인되어야 하며, 그러한 이해가 부족하기 때문에 여러가지 문제가 발생한다고 본다. 우선 홈페이지를 만들기 위해서는 몇가지 이해가 필요하다.
- HTML: 실질적인 문서, 그 자체이다. HTML이 어렵게 느껴진다면 그 이유는 아무래도 잘못된 워드프로세서의 학습으로 인한 결과라고 보여진다. 흔히 청소년기, 혹은 청년기에 이르러 과제나 레포트 제출을 위해 처음으로 한글이나 MS워드와 같은 워드프로세서를 접하게 되는데, 스타일 기능을 무시한 채 눈으로 보여지는 크기와 형태들로 문서를 꾸미는 방법들을 먼저 배운다. HTML은 워드프로세서가 기본적으로 제공하는 스타일 기능으로 작성된, 구조화된 문서라고 생각하면 편하다. 제목, 부제, 본문, 설명, 각주, 머릿말, 꼬릿말 등 각각 구분해서 작성된 문서가 HTML이다.
- CSS: 위와 같이 작성된 HTML은 말 그대로 문서일 뿐이다. 이미지가 들어가긴 하지만, 그것은 문서의 내용으로 들어가는 이미지일 뿐, 디자인을 위한 이미지가 아니다. HTML 문서에 디자인을 입혀주는, 꾸며주는 역할이 바로 CSS 존재의 이유이다.
- Javascript: 홈페이지는 우리가 흔히 보는 종이로 된, 평면적인 문서가 아니고 상호작용을 주고 받을 수 있는 입체적인 문서라고 볼 수 있는데, 자바스크립트는 이러한 문서를 입체적으로 움직이고 상호작용할 수 있도록 역할을 부여하는 언어라고 할 수 있다. 자바와는 다르다! 자바와는!
즉, HTML은 데이터, CSS는 디자인, Javascript는 유저와 문서의 상호작용*을 각각 맡게 된다.
준비물
우선 제대로 된 홈페이지를 만들기 위해서는 포토샵과 같은 그래픽 툴로 완성된 디자인이 필요하지만, 그보다 중요한, 코딩을 위한 편집기가 필요하다. 옛날 홈페이지 제작 툴은 호환, 마마, 전쟁 등이 가장 무서운 재앙이었으ㄴ…(?!)가 아니고, 드림위버나 나모 웹 에디터등이 활용되었다.
사실 디자이너에게 코딩이라는 단어는 하늘에서 개구리비가 쏟아지는 경험만큼 충격과 공포로 느껴지게 마련이다. 하지만 1990년대 초중반, 월드 와이드 웹이라는 단어가 등장한 이래로, 많은 디자이너들에게 참고가 되는 훌륭한 자료들이 그 웹에 널려있다. 우리는 그렇게 차려진 밥상에 숟가락만 얹고 포크도 얹고 하면 된다. 걱정하지 말자.
Atom
다시 처음으로 돌아와서 추천할만한 편집기를 고른다면 우주소년 Atom이 있다. Atom은 많은 개발자들의 마음의 안식처이자 평화가 되는 github이라는 서비스에서 개발한 텍스트/코드 편집기이다. 우리가 흔히 인터넷 브라우저로 사용하는 Chrome 브라우저와 같은 부모를 둔 편집기이다. (이에 대한 설명은 이쪽에서 간략하게 설명되어 있으니 참고하기 바란다.)
설치 방법도 매우 간단해서 링크에 접속해, 좌측 상단 쯤의 Download For ?? 버튼을 선택하면 접속한 사람의 환경에 맞는 버전의 Atom이 다운로드된다. 다운로드된 파일을 실행하면 Atom은 바로 설치가 진행되며, 윈도우, 맥, 리눅스에서 설치 후 사용이 가능하니, 사실상 거의 모든 PC 환경에서 사용이 가능하다.
Atom을 설치 후 위의 이미지와 비슷한 화면이 등장할 텐데, 윈도우/리눅스에서는 Ctrl + ,(comma)를, 맥에서는 Cmd + ,(comma)를 타이핑해 환경설정으로 들어가자. 참고로 이 글을 읽는 디자이너들은 앞으로 많은 작업들을 키보드와 함께 해야한다. 키보드나 단축키가 매우 낯설게 느껴질테지만 당황하거나 두려워할 필요 없다. 개발자들은 여러분이 포토샵에서 Liquify 기능으로 뱃살과 턱살을 줄이거나, Stamp 툴로 단체사진 뒤에 둥둥 떠있는 유령을 지우는 모습 따위를 보고도 두려움을 느낀다.
..아무튼, 설정 화면의 좌측에서 +Install을 선택한다. 중간에 Search Packages라고 커서가 깜빡이는 곳에 emmet이라고 타이핑한다. 이 과정은 Atom 편집기에서 사용 가능한 HTML 관련 플러그인 중 하나인 emmet이라는 패키지를 설치하는 방법이다. 만약 추가로 필요하거나 궁금한 기능이 있다면, 이 환경설정의 Install 메뉴에서 검색해서 설치가 가능하다.
Emmet
emmet은 HTML 문서를 작성하는 데 발생하는 어려운 일들을 대신 해준다. 이를테면 흔히 DOCTYPE이니 뭐니 하는 알 수 없는 단어들을 HTML 문서에서 본 일이 있을 것이다. HEAD니 BODY니 하는 여러가지 복잡하고 어떻게 순서를 매기기도 어려운 단어들이 난무하는 HTML의 포화 속에서, 이런 구문을 한번에 작성하도록 도와주는 패키지(플러그인)이다.
굳이 어렵게 설명할 필요없이 바로 시작해보자. 우리는 우선 HTML 파일을 한개 만들 것이다. 바로 Ctrl/CMD + N을 누르고 새로운 문서를 시작한다. Atom의 우측 하단에 Plain Text라고 쓰여진 글씨를 마우스로 누르면 모니터 가운데에 알 수 없는 글씨들이 나열된다. 이것은 마치 윈도우 탐색기의 검색이나, OSX의 스팟라이트와 같은 검색 기능인데, 지금 우리가 작성하는 문서의 형식을 지정해주는 기능이다. 이 깜빡이는 커서에 HTML이라고 타이핑하고 엔터를 치면, Plain Text라던 글자가 HTML로 바뀐 것을 볼 수 있다. 그리고 우리는 마법과도 같은 emmet의 기능을 확인할 준비가 되었다.
광활한 Atom의 화면에 html:5라고 타이핑하고 tab키를 누르는 순간 f로 시작되는 욕이 입 밖으로 흘러나오는 상황이 발생할 수 있으니, 주변 상황을 고려한 후 실행해보도록 하자. 우리는 방금 7개의 문자를 타이핑해서 홈페이지(정확히는 HTML 문서)를 만들었다.
Til next time,
bongarcon
at 00:00
