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로 구현해보기

준비물 

관련글

포토샵에 대한 기본기를 익힐 수 있는 강좌를 연재중입니다. 오늘은 2번째 강좌로, 영역을 선택하는 방법 중 Marquee (마퀴) 툴을 다루는 방법에 대해서 설명 드립니다.

마퀴툴은 아주 기본적으로 자주 쓰는 기능이기때문에 잘 알아두시면 요긴하게 사용할 수 있는 툴입니다. 필수 툴이기때문에 꼭 잘 알아두시길 바랍니다.

포토샵은 아주 오랜시간동안 큰 변화없이 인터페이스를 유지해왔습니다. 그 말은 즉 버전에 크게 구애받지 않고 기능들을 찾아쓸 수 있다는 이야기이기도 합니다.

포토샵에서는 주로 아래와 같이 큰 맥락으로 나눠서 볼 수 있습니다.

  • 메뉴표시줄
  • 툴패널 + 옵션바
  • 캔버스
  • 윈도우 패널

이러한 화면구성을 효율적으로 이용하며 자기만의 방법으로 작업하는 다양한 방식들이 존재합니다. 이렇듯 정해진 인터페이스지만, 정답은 없습니다. 오히려 더 나은 방법이 여러사람의 아이디어 속에서 계속해서 나오고 있습니다.

포토샵을 통해서 나오는 다양한 이미지들도 결국 이러한 기본 기능을 어떻게 조합해서 잘 사용하느냐에 따라 퀄리티가 다르게 나옵니다. 모든 메뉴를 다 잘 알 필요는 없습니다. 필요한 것만 익히면 됩니다.

대부분의 사용자들이 그렇게 포토샵을 활용하고 있고, 지나치게 많은걸 알아야할 필요도 없습니다.

보시다가 궁금하신 점 있으면 댓글 남겨주시고, 구독 및 좋아요도 부탁드릴께요. 계속되는 컨텐츠 생산에 큰 응원이 되어줍니다.

 

보통 포토샵을 처음 배우시는 분 – 물론 포토샵 뿐 아니라 어떤 분야건 다 마찬가지입니다만, 질문 하는 방법을 모르는 분들이 많습니다. 처음에는 어떤 특정 개인의 문제인 줄로만 알았는데, 대체로 초보자라는 위치에 있는 분들에게서 공통적으로 발견되는 부분들이라는걸 깨달았습니다. 이런 상황들은 보통 텍스트로 모든걸 해결하려는 상황에서 발생합니다.

좋은 예시가 될 것 같아 대화 내용을 하나 캡쳐해왔습니다.

위와 같은 경우는 지금도 사실 이해가 안 가는 질문입니다. 제가 이해력이 부족해서 그럴 수도 있지만, “따닥따닥” 이라던지, “구석”, “이상한 곳” 이런 표현들은 지극히 주관적인 기준에서 표현하는 것들입니다. 질문은 듣는 사람과 내가 공통으로 이해할 수 있는 객관적 표현이어야 합니다. 이를테면 ‘레이어에서 잠금도 풀었고, 주변부에 잘못 칠해진 곳 없이 깔끔하게 잘 정리된 이미지 레이어임에도 불구하고 선택 및 이동이 잘 안된다’라는 식의 구체적인 표현이 필요합니다.

상대방 머리속에서 그림이 그려지도록 질문을 해야지, 자기 머리속에 그려진 것을 일방적으로 쏟아내면 상대방은 무한한 상상의 나래만 펼치게 됩니다. 그러다보면 계속 엉뚱한 답변을 한다던지, 잘못된 답변을 하는데 시간을 낭비하기 마련입니다.

그래서 질문을 하기 전에 내가 이야기하고자 하는 내용을 먼저 적어보고 이야기해보시는 것도 좋은 방법입니다. 하지만 위와 같은 경우는 사실 텍스트로 질문하는 것이 불가능한 내용일 수도 있습니다. 그래서 질문하는 사람은 많은 걸 준비해야 합니다. 화면도 캡쳐해서 보여주고, 그래도 안되면 화면을 영상으로 캡쳐 해서 보내주는 노력이 필요합니다.

그래야 답변하는 사람도 정성껏 답변해 줄 수 있습니다.  도와주고 싶어도 무엇이 답답한지 알 수 없는 상황에서는 답을 해줄 수 없기 때문이죠. 그래서 질문하는 방법도 공부를 해야 합니다. 그리고 무엇보다 기본적인 선택과 이동이 잘 안되는 상황이라면, 기초가 되어있지 않기 때문에 발생하는 문제입니다.

대부분의 질문은 부실한 기초 때문에 발생합니다. 그래서 초보자는 유튜브나 블로그에서 발견하는 화려하게 이미지를 꾸미는 튜토리얼을 무조건 따라하지 않기를 바랍니다. 기본을 굳이 설명하지 않아도 알아듣는 대상을 향해 다루는 내용들을 초보자가 따라하다보면 혼란만 가중될 뿐입니다.

첫 술에 배부를 수 없고, 걸음마도 배우지 않고 뜀박질 할 수 없습니다. 화려해 보이는 이미지들도 결국은 기본적인 기능들을 잘 이해하고 조합하며 사용하면서 만들어내는 것들입니다. 절대 기초를 가볍게 여기지 마시고, 차근차근 인내심을 갖고 기초 툴 들을 반복적으로 다뤄보세요.

한 가지를 익숙해지면,  다음 단계로 넘어갈 때 무의식적으로 쓰게 되면서 학습해야 할 분량이 줄어들기 시작합니다. 그렇게 하나하나 더해가다 보면 결국 대부분의 툴 들을 쉽게 사용할 수 있는 수준으로 올라가게 됩니다.

포기 하지 말고 흥미로운 이미지를 가지고 기초 툴을 다루면서 이것 저것 실험해보세요. 공부가 아니라 놀이처럼 이것저것 만져보면서 발견하게 되는 새로운 즐거움 들도 있습니다. 그게 포토샵을 하는 재미이기도 하니까요.