웹,그래픽디자인을 비롯해 운영일지 형식으로 웹에 전반적인 관련 내용들을 다루고 있습니다.

HTML은 Hyper Text Markup Language의 약자로 혹자는 HTML도 언어라고 이야기하지만, 개발자들은 HTML은 언어가 아니라고 강력히 주장합니다.

HTMLHTML을 언어취급 할 수 없다는 직업의식이 부른 재앙… 출처 : 제타위키

각설하고, 일단 HTML은 기본적으로 ‘웹문서’를 작성하기 위해 필요합니다. 초기의 웹은 지금처럼 화려하고 다양한 기능을 갖춘 모습이 아니라 그저 말 그대로 정보를 공유하기 위한 ‘문서’였습니다. 파란 밑줄이 그어진 하이퍼 텍스트를 이용해 문서와 문서간에 이동을 하게 할 수 있는 기능이 부여된 그런 ‘웹 문서’ 말이죠.

그래서 HTML을 문서 자체로서 검색엔진이 읽기에 좋은 상태로 작성해주면 그것을 바로 검색엔진 최적화(SEO – Search Engine Optimization)라고 합니다. 때문에 HTML을 잘 이해하고 SEO에 맞춰서 작성하면 비지니스에도 큰 도움이 되는 셈입니다.

요즘은 누구보다 더 자신의 컨텐츠나 서비스를 알리고 싶어하는 세상입니다. 그것이 비지니스와 직결되기 때문이죠. SEO는 이제 필수가 자리잡은 세상입니다. SEO 조건에 충족시킨 문서라고 무조건 상위 노출이 되는 것은 아니지만, 그 조건을 무시한 문서보다는 상위 노출될 확률이 크죠.

조건이 충족된 문서는 가치있는 컨텐츠로 판단되어 검색엔진에서도 비교적 첫페이지에 노출시킬 확률이 크다는 이야기입니다.

때문에 HTML을 그저 div로 층층히 쌓아가기보다 header, section, article, nav와 같은 목적에 맞는 태그로 적절히 작성해주는 시맨틱( semantic, 의미론적)한 접근이 중요합니다.

이러한 부분은 직접 html 문서를 작성해가며 하나하나 짚어보도록 하겠습니다.

 

웹디자이너로써 코딩을 전혀 하지 않고 오로지 디자인에만 집중할 수 있는 환경에서 일하는 분들이 무척  부럽습니다. 그 분야에서 스페셜리스트로 인정받은 분들이라고 볼 수 있는지라, 저는 가볍게 겉만 핥으며 다니는 – 아주 라이트한 제네럴리스트로 늘 스페셜리스트에 대한 부러움을 갖고 있죠.

저는 주로 중소기업, 그것도 쇼핑몰에서 근무한 경력이 많다보니 자연스럽게 오만걸 다 하는 경우가 많았습니다. HTML/CSS도 사실 원해서 했다기보다 자연스럽게 제가 떠맡게 된 경우인데, 생각보다 재미있어서 계속 공부하게 되었습니다.

요즘은 UI프레임워크들이 많이 등장하면서 웹디자이너의 자리가 더더욱 좁아지고 있는데요. 개발자들이 디자이너 밥줄을 끊네 꼭 그런 이유가 아니어도, HTML/CSS로 자신의 디자인을 어떻게 구현하는지 이해하면 도움이 많이 됩니다. 

포토샵에서 디자인한 결과물이 웹브라우저로 올라가면 어떻게 되는지 이해한다는 것은 그것을 모르고 할 때와는 차원이 다른 경험이 될 것입니다. 포토샵에서 그려보기만 한 디자인은 디바이스의 크기에 따라 달라짐을 쉽게 예측하기 어렵습니다. 

마치 전단지와 리플렛이 홍보물이라는 큰 맥락은 같을지 몰라도 전단지와 달리 리플렛은 어떻게 접을 것인가에 따라서 보는 사람의 행동도 예측해야하듯 모바일과 태블릿 데스크탑 등 다양한 디바이스에 따라 변화가 필요합니다.

윈도우7의 서비스 지원이 종료되면서 구형브라우저도 함께 자취를 감추기를 기대하지만, 아직까지 익스플로러가 웹 레이아웃 구현의 발목을 잡고 있습니다. 레이아웃을 구현하는 기술은 flexbox를 넘어 grid-layout으로 진보해도 국내 환경상 여전히 float를 이용해야하는 경우가 많지요. 일단은 익스플로러에 대한 대응을 고려하지 않고 크롬 웹브라우저를 기준으로 학습을 진행할 예정입니다. 일단은 크롬으로 제작한 뒤 익스플로러 11을 기준으로 필요한 부분을 수정하거나 추가하는 방식으로 크로스 브라우징에 대응할 예정입니다.

그 동안 실무에서 사용했던 기억들을 되살려 조금씩 정리하며 공부한 것들을 다시 확인하는 기회를 가질겸 연재를 시작해봅니다.

학습목표 

  • HTML과 CSS의 차이와 용도 이해
  • 직접 디자인한 것들을 html/css로 구현해보기

준비물 

관련글

카페24 쇼핑몰을 운영하시는 분들 중에 웹디자이너 혹은 웹퍼블리셔의 도움 없이 혼자서 해결해나가는 분들이 있습니다. 간혹 이런 부분에 대해서 쇼핑몰 운영자들이 모여있는 커뮤니티에서 질문글이 올라오곤 하는데요.

아무래도 전문적으로 카페24 스킨을 수정해 온 사람들이라면 모를까 임시방편으로 해결해오던 습관 혹은 누군가 귀찮아서 대충 알려준 방법을 공유하는 모습들이 보입니다. 아마도 카페24 스킨을 수정할때 가장 빈번한 내용이 “배너”를 교체하거나 추가할때 필요한 내용들일 것입니다.

좀 과격하게 말씀드리자면 일단 과거에 table로 레이아웃을 잡던 방식으로 html을 배우신 분들은 ‘나도 html을 할 줄 안다’ 라고 생각하시지 않았으면 좋겠습니다. 그때와는 웹 문서를 만드는 방식이 너무 달라져버렸습니다. html 문서 안에서 스타일과 크기 등 모든 것을 해결하던 방식에서 이제는 html은 문서의 구조만 담당하고 css가 스타일과 색상, 배치, 크기 등을 담당하고 자바스크립트로 동적인 모션이나 데이터를 제어해주는 세상이 됐습니다. 역할이 분담이 된 셈인데, 이렇게 된 데는 다 이유가 있습니다.

예를 하나 들어볼께요.

이를테면 가로로 2단 그리드로 배치되는 이미지를 만드는 방식입니다.  간략하게 보자면 과거의 테이블로 레이아웃을 잡던 방식이라면 아래와 같은 방식을 취했겠죠.

테이블 코드에 대해서 잘 이해하고 다루는 사람이라면 한 눈에 “아 전체 가로폭은 1200픽셀이고 600픽셀씩 이미지를 배치해주는 코드구나” 이렇게 이해할 수 있을겁니다. 하지만 테이블 태그의 특성을 보면 일단 table > tbody > tr > td 이렇게 총 4번이나 안으로 들어가서 구조를 파악해야하므로 브라우저에서 그만큼 많은 단계를 거쳐야하고, 이런 부분이 많아질 수록 브라우저에서 이미지를 표현하는데 많은 시간이 걸립니다.

그래서 거기서 조금 더 나아간 방식이 style을 활용한 방식입니다.

한눈에 보기에도 훨씬 간결해졌죠? 하지만 이런 방식으로 코딩을 하면, 가로폭이 1200픽셀에서 1100픽셀로 바뀌거나 1400픽셀로 바뀌는 상황에서 또 저걸 찾아서 바꿔줘야한다는 문제가 있습니다. 물론 저 배너 하나뿐이라면 가서 바꾸면 되지만, 배너를 보통 하나만 쓰는 경우가 없죠.

그래서 아래와 같은 방식으로 개선해서 쓰게 됩니다.

조금 생소할 수 있지만, 여기서 처음 보이는 부분이 바로 class라는 부분입니다. class는 한번 지정해놓으면 얼마던지 쓸 수 있기 때문에 무척 편리합니다. 이를테면 아래와 같은 방법도 가능해요.

보시다시피 클래스가 3번이나 쓰였죠? 그래도 모두 같은 내용으로 1200픽셀이라는 폭이 허용됩니다. 그럼 나중에 1100으로 줄어들거나 1400으로 늘어나더라도 우리는 style 태그 안에 width:1200px이라는 값만 수정해주면 됩니다. 관리가 굉장히 편하겠죠? 여러번 반복해서 수정해야할 부분을 딱 한줄만 고쳐주면 전부 수정되니까요.

위의 방식도 문제가 되는 점이 있는데, style 태그가 작성된 html 문서 안에서만 저 내용이 적용된다는 점입니다. 보통 웹사이트는 html 문서 하나로만 구성되지 않습니다. 여러 페이지에 걸쳐서 width:1200px이라는 값이 필요할 수 있겠죠? 그래서 css 파일이 필요한겁니다.

어떤 문서건 head 태그 안에 <link rel=”stylesheet”  type=”text/css” href=”스타일 시트가 위치한 경로와 파일명”> 이 한줄만 넣어주면 공통적으로 스타일 시트를 재활용할 수 있습니다. html과 css 부분을 분리한 예제가 바로 아래와 같은 경우입니다.

See the Pen 스타일 시트를 활용하는 방법 by 배현기 (@illustudio) on CodePen.0

 

내용을 무척 길게 작성하게 되었는데, 이렇게 이야기하는 이유는 좀 더 미래를 보고 작업해야할 필요가 있다는 이야기를 하고 싶었습니다. ‘지금 당장 급하니까’라는 이유로 맨 처음에 설명한 inline 방식 – html 태그 안에 직접적으로 스타일을 정의하는 방식으로 style 적용한다던지, 아니면 html 문서 안에 style 태그로 적용 하는 방식으로 하면, 나중에 쌓아둔 숙제처럼 밀려오는 수많은 수정사항에 못이겨 관리하던 직원이 나가버리거나 사이트를 새로 만들거나 하는 사태가 벌어질겁니다.

이런 문제를 사전에 방지하려면 사실 처음부터 이런 부분에 잘 알고 있는 사람에게 일을 맡기는것이 좋겠죠. 그래서 혼자 운영하는 부분에서 정말 공부해야할 것이 많을겁니다. 그래서 사실 커뮤니티에서 알려주시는 분들도 좋은 의미에서 공유하시는거겠지만, 인라인 방식과 스타일 태그로 알려주는 방식은 차라리 알려주지 않느니만 못하다는것을 알았으면 좋겠습니다.

결국 이런 방식으로 html, css 파일로 나누어서 작성하게 된 이유는 모두 관리면에서 이점이 크기 때문입니다. 불필요한 작업은 최소화해야된다는거죠. 이런 방식을 따르지 않고 그저 작성한 사람 ‘혼자서만 알아보면 된다’, ‘나 당장 급한데로 해버릴꺼다’ 이런 식으로 일처리를 하기보단, 관리가 편한 방식을 따라서 작성하는 것이 좋습니다. 일단 다음에 관리해야할 사람이 망연자실할 정도로 후환(?)을 만들어 놓아서는 안되겠죠 ㅎㅎ

 

Whitespace debugging in DevTools in action

구글 크롬 위주로 사용하다가 파이어폭스로 옮겨타보려고 시도중입니다. 여느때와 다름없이 퍼블리싱을 하던 중 이상한 현상이 나타났습니다. 무슨 짓을 해도 레이아웃이 틀어지는 기이한 상황(?)이었는데, 도대체 무슨 상황인지 파악이 안되서 애꿎은 css만 계속 수정했습니다만 엉뚱하게도 원인은 공백문자 – whitespace text node 문제였습니다.

크롬과 달리 파이어폭스에서는 html 태그에서 한칸 띄어쓰기를 한것 까지 잡아내서 기어코 공백으로 표현하는 과잉 친절을 베푸는데, 바로 이게 원인이었습니다.

위와 같은 문제(?)때문에 약간의 공간을 표시하면서 결과적으로 전체적인 레이아웃이 틀어졌던 것입니다. 보기 좋게 줄바꿈을 한 덕분에 삽질을 하게 됐네요. 일단 이렇게 또 삽질하면서 한 수 배웠습니다.

 

 

기존에 git에 저장해두었던 gulp 세팅이 되어있던 파일을 불러오는 과정에서 node-sass가 설치 되지 않는 문제가 발생한다.

주로
“user “root” does not have permission to access the dev dir”
라는 문구를 내뱉으며 문제를 일으키는데 아래 화면처럼 계속 권한이 없다는 말만 반복하면서 무한 루프에 빠져버린다. 그래서 권한을 주고 벼라별 짓을 다 해도 몇시간 동안 node-sass 설치에 실패했다.

구글을 아무리 뒤져도 답이 나오질 않아서 한참 해메며 포기할까 싶은 무렵 실낱같은 희망이 되어준 옵션이 하나 나타났다. –unsafe-perm

이를테면 이런식으로 사용하는 것이다.

이 옵션을 주면 위와같이 권한 문제로 무한루프에 빠지는 것을 해결 할 수 있다. 좀처럼 풀리지 않는 문제라 주말 내내 골치 썩고 이제는 포기하고 싶었는데, 자기전에 극적으로 해결이 됐다… 주말이 다 날아갔다는 이야기.ㅋㅋㅋ

추가적으로 node-sass를 설치하는 과정중에 컴파일 하는 과정이 있는데 이럴 경우 컴파일러가 없으면 “make g++ command not found” 오류를 내뿜는다. 이런 경우에는 구글에서 아래와 같은 답을 내어주었다.

sudo apt-get install build-essential g++

여기까지 해주고나니 기나긴 컴파일 과정을 거치고 난 후 정상적으로 모듈이 설치되고 작업환경이 완성됐다.