디자인하듯이 HTML, CSS 공부하기
디자이너답게 감각적이게 배우려고 합니다만,
디자이너가 되기 위해 준비할 때부터
'디자이너가 코딩을 할 줄 알면 직무 이해도가 높다'
'개발자와의 소통이 덜 어렵다'
'디자이너가 코딩하는 건 큰 메리트다'라는 말을 많이 들어왔다.
당시에 살짝 공부하면서도 나는 갸우뚱했다.
그렇지만, 실제로 디자이너로 일을 하니 왜 그런 말을 했는지 정말 이해가 된다.
가장 큰 이유는, 디자이너가 그려야 할 종이를 이해하는 것과 다름없기 때문이다.
벽화를 그릴 때 이쁘고 창의적인 벽화만 그리려고 하면 벽화가 산으로 간다.
어떤 벽인지, 왜 벽화가 필요한 건지, 벽화 주변 환경은 어떤지 살피고 나서야 제대로 된 벽화를 그릴 수 있다.
웹도 마찬가지다. 웹이 무엇인지 알아야 제대로 된 디자인과 사용자를 이해할 수 있다.
하지만 '코딩'이라는 단어만 들었을 땐 개발자들에 영역이며
흔히 공대생들에 영역 이란 선입견을 가지게 된다.
나 또한 그랬다. 괜히 수학을 잘해야 할 거 같고 이과 머리가 있어야 하는가 같은 어리숙한 생각을 했었다.
그렇지만, 하다 보니 나름 재밌었다. 특히 HTML과 CSS는 디자이너가 재밌게 배울 수 있는
분야라고 생각된다. 디자이너는 시각적인 것에 흥미를 느끼기 때문이다.
내가 사용한 방법은
디자인하듯이 배우는 것이었다.
1 step
일단 시작하자
일단 시작해 보는 것이 가장 중요하다. 어렵지 않을까?라는 고민 대신
먼저 기초적인 코드를 쳐보는 것이 빨리 실력이 는다.
그래서 내가 선택한 방법은 '기초 책'을 섭렵하는 것이었다.
내가 사용한 책은 'HTML & CSS 웹사이트 개발과 디자인 기초 - 존 두켓' 이란 책이었다.
이 책을 구입한 이유는
처음 코딩을 경험하는 사람들이 가질만한 의문과 궁금증을 아주 자세하게 풀어주기 때문이다.
웹에 동작 방식부터 설명해주니, 코딩 입문자에겐 친절한 책이었다.
또한, html과 css를 한 번에 배울 수 있어서 좋았다.
나는 이렇게 공부해나갔다.
1. 나는 이 책을 예제 1개씩 끊어가며 배웠다.
2. 잘 안 되는 예제일 경우, 그곳에서 며칠을 머물지 않고 바로 다른 태그로 넘어갔다.
3. 예제 모두 배운 후, 잘 안 되는 부분 재진행
가장 좋았던 점은 기초 지식을 설명한 후, 예제를 하나씩 배우면서 필요한 태그 소개
부분이었다. 굳이 이 책이 아니어도 어떠한 태그의 정의가 긴 것보단 예제를 중심으로 코딩을 배우는
책이 빠르게 배우기 좋은 거 같다.
2 step
디자인 예제를 코딩하자
책에 나온 예제를 모두 공부하면 무엇이든 html, css로 코딩할 수 있는 건 아니다.
다양한 예제를 경험해야 여러 경우의 수를 배우고, 내가 원하는 디자인을 코딩할 수 있다고 생각했다.
예제 선택 시 나는 pinterest를 보지 않았다.
디자인을 보기 좋은 사이트라 코딩이 안 되는 예제도 있을 거란 판단에서 이다.
예제 선택 시, 3가지를 유념하며 찾았다.
1. 실제 운영하는 웹사이트
- 이는 코딩이 가능한 디자인인걸 증명한다.
- 실제로 좋아하던 사이트를 선택하거나, 웹사이트 모음 사이트인 디비컷을 이용하면 편하다.
https://www.dbcut.com/bbs/index.php
2. 어려운 것보단 '할 수 있을 거 같은' 예제를 선택
- 내가 연습해야 할 태그가 들어간 예제를 선택하는 것이 좋다.
- 예를 들어, float 프로퍼티를 연습해보고 싶다면, float가 들어간 예제를 고른다
3. 1page 제한을 둔다
- 사이트 전체가 아닌, 1page만 코딩했다.
- 예제 코딩의 목적은 '원하는 태그와 프로퍼티를 연습하기 위함'이기 때문이다. 따라서,
많은 시간이 소요될 경우 오히려 지친 경험이 있어 이런 제한을 두었다.
3 step
포트폴리오 사이트를 제작해보자
예제를 10개 정도 하고 나면, 웬만한 태그와 프로퍼티는 익히게 된다.
그러고 나서 나는 가상의 포트폴리오 사이트를 디자인 하기 시작했다.
여기서 내가 정말 사용할 포트폴리오 사이트가 아닌 가상의 포트폴리오 사이트를 디자인 한
이유는 내가 디자이너였기 때문이었다.
디자이너여서 인지 몰라도 디자인이 들어간 거면 더 많은 신경이 쓰인다. 특히 나의 포트폴리오 사이트
제작이면, 많은 시간을 쏟게 되고 디자인 디밸롭에 초점이 맞춰질 거 같았기 때문이었다.
그래서 정말 단순하게 html과 css를 활용할 수 있는 포트폴리오 사이트를 디자인했다.
디자인의 중점은 내가 코딩할 수 있는 디자인 90% + 도전하고 픈 디자인 10%의 기준으로 잡았다.
디자인을 잡는데 CSS awards 사이트를 참고했다.
https://www.cssdesignawards.com/
www.cssdesignawards.com
다양한 css 시도를 볼 수 있으며, 평가내용도 볼 수 있어
현재, 어떤 디자인이 각광받고 있는지 알 수 있다.
추후엔, 나도 이 css award에 도전할 생각이다.
먼저,
1. 디자인을 한다. 기존에 하던 디자인 프로그램으로 진행 (일러스트 제외)
2. html, css로 화면 구성을 한다.
까지만 진행한다.
4 step
CSS로 애니메이션을 넣어보자
여러 웹사이트를 보면 정적인 디자인을 찾아볼 수 없다.
움직이는 웹을 만들기 위해선 css로 애니메이션을 넣거나, jquery, javascript 등 이 필요하다.
하지만, 현재 단계에서 jquery, javascript 까지 한꺼번에 배우면 지치게 되는 거 같아
최대한 CSS로 애니메이션을 넣었다.
주로 CSS Animations, CSS Transitions, Transforms을 이용해서 만들었다.
그리고 이러한 코드는 책보다는 아래의 웹사이트를 추천한다.
초보자들이 입문하기 좋은 가이드라인을 제공하는 사이트이다.
지금은 규모가 커져서 Python, PHP, Node.js, Java 등 개발 입문 사이트로 확장되었다.
개념을 설명해주고 실제로 해볼 수 있는 예제도 마련되어 있어 공부하기 너무 좋은 사이트인 거 같다.
코딩을 배워서 좋은 점은 UXUI디자인을 보는 눈이 다방면으로 된다는 것이었다.
동시에, 디자이너로서 코딩을 놓치면 안 된다는 생각이 들었다.
점점 공부하면서 개발자를 이해하고, 디자인하는 환경을 알게 되기 때문이다.
따라서 계속 Jquery, Javascript, xml, ajax, json, Python 등을 공부할 계획이다.
더 나아가 데이터를 이해하고 다룰 수 있는 디자이너가 되고 싶다.
더 많이 알수록, 나는 더 많은 것을 볼 수 있을 거란 희망을 가지고 말이다.
