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

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

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

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

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

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

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

학습목표 

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

준비물 

관련글

위의 예제는 아주 간략하게 보통 쇼핑몰이나 홈페이지 상단에서 알림 공간에 쓰일 수 있습니다. 보통 중요한 공지가 있을때는 팝업창을 띄우거나 레이어 팝업을 즐겨 씁니다. 하지만 사용자 입장에서는 무척 짜증나는 방법입니다. 사이트 방문자는 목적을 갖고 방문합니다만, 팝업은 그 목적을 훼방하는 요소입니다.

그래서 상단에 저렇게 고정된 형식으로 공지하는 편이 많이 선호되고 있습니다. 컨텐츠를 가리지 않아도 되고, 눈에 띄기 좋은 곳에 항상 자리잡고 있기 때문이죠. 기본적인 원리는 간단합니다. X자 표시를 눌렀을때 해당 광고창이 통채로 사라지게 하는겁니다.

기본적인 구조(html)과  스타일시트(CSS)를 통해 모양을 만들어놓고 버튼을 눌렀을때 사라지는 기능(Jquery)으로 구성되어 있습니다.

최근에 sass에 관심을 갖게 되면서 기존의 css를 어떤식으로 바꿔서 사용할 것인지 한 번 테스트를 해봤습니다. 현재 대부분 사람들이 사용하는 브라우저 상에서는 sass를 해석해서 보여주는 기능은 없습니다.  그래서 sass로 만든 문서는 css로 변환해주는 – 컴파일 과정이 필요합니다. sass는 로컬상에서 작성해서 css라는 결과물로 출력해줘야한다는 이야기입니다. 다만, sass로 css 출력물을 받아보면 체계적으로 잘 정리해서 내놓기때문에 별도로 손댈 것들이 없습니다.

그리고 sass 상에서 주석을 잘 달아놓으면, 나중에 쉽게 가져다 쓰기 좋습니다. 아직은 능숙하게 다룰 수 있는 수준이 아니어서 조잡한 수준으로 활용하고 있습니다만, mixin 기능이 무척 강력하다는걸 조금씩 인지하고 있습니다. mixin을 잘 활용하면 굳이 부트스트랩과 같은 무거운 프레임워크에 의존하지 않고, 다양한 디자인으로 만들어갈 수 있을 것 같아서 오히려 더 매력적으로 다가옵니다.

less를 주로 지원하던 부트스트랩이 차기 버전부터 sass를 지원하기 시작한걸 보면, sass가 얼마나 빠르게 성장하는지 알 수 있습니다. 당장 새롭게 공부해야한다는 점에서 sass가 오히려 처음에는 css보다 작성하는데 속도가 더디겠지만, 추후 관리 면에서는 css보다 훨씬 체계적이고 직관적으로 관리가 가능할 것 같습니다.

이미 여기저기에서 mixin을 서로 공유하는 프론트엔드 개발자들도 많은 걸 보니, 손쉽고 빠른 프론트엔드 개발을 위해서도 sass는 더더욱 중요하게 자리잡을 것 같습니다.

아래 예제는 각각 html과 SASS(scss)로 작성한 코드가 브라우저 상에서 어떻게 작동하는지 확인해볼 수 있는 간단한 예제입니다. header 상에 존재하는 상단 메뉴의 경우 이렇게 만들 수 있다라는 것을 보여주기 위해 작성한 코드입니다. 깔끔하지는 못하지만, css를 이미 알고 계실 경우에는 대충 어떤 구조인지 파악해볼 수 있을 겁니다.

 

 

일러스트레이터 여섯번째 레슨

일러스트레이터 illustrator 여섯번째 튜토리얼은 바로 나무 그리기입니다. 지금까지 동영상을 꾸준히 보아오신 분들이라면 충분히 앞의 내용과 연계해서 공부할 수 있도록 구성하고 있습니다. 이번에도 역시 실무에서 정말 핵심적으로 쓰이는 스킬이 공개됩니다. 이 부분도 빼먹지말고 충분히 잘 활용할 수 있도록 연습이 필요합니다.

동영상을 보다가 궁금한 점이 생기면 댓글 달아주세요 🙂

일러스트레이터 다섯번째 레슨

일러스트레이터 illustrator 다섯번째 레슨은 바로 구름 그리기 입니다. 동그라미를 이용해서 아주 간단한 구름을 그려볼건데요. 오늘은 역시 일러스트레이터에서 무척이나 자주 쓰이는 pathfinder 패스파인더 윈도우에 대해서 일부 알아보도록 할 겁니다. 역시 마찬가지로 실무에서 굉장히 빈번한 사용도를 보이는 기능입니다.

동영상을 보다가 궁금한 점 있으면 댓글 남겨주세요 🙂