디자이너의
웹 포트폴리오 제작기 2부
이번 생에 코딩은 처음이라
1부에서 내가 생각하는 포트폴리오와 디자이너라는 직업의 변화, 프로젝트의 진행 방향에 대해 간단하게 설명하였다면, 이번 시간에는 본격적으로 어떻게 코딩을 학습했는지 적고자 한다.
독학.. 매력적이지만 꽤 힘들다. 들에서 자란 디자이너랄까..?
메모장에 쓸 수는 없잖아!
우선 코드 에디터를 설치하자. 이론상 메모장으로도 제작할 수 있지만, 자동완성, 검사, 라이브 서버 등 다양한 Extension을 사용하면 편하므로 코드 에디터를 사용하자.
Visual Studio Code, Atom, Sublime Text 등 다양한 에디터 중 나는 처음에 Atom을 사용했다. 이유는 마스코트인 옥토캣(쏘큣)이 귀여워서! 하지만, 후일 Extension 문제와 잦은 버그로 Visual Studio Code로 갈아탔다. 훨씬 쾌적하고 좋다. (Visual Studio와 같은 IDE와는 다른 거다. 파란 거 다운받으세요!)
까만 건 에디터고 알록달록 한 건 코드야첫인상이 어떠한가? 동글동글하고 귀여운 Figma나 Sketch, 익숙한 Adobe 계열의 프로그램과는 다른 게 이방인에게 그렇게 호의적인 분위기는 아니다. 쫄지말자. 우리는 지금 인공위성이나 알파고를 만드는 것이 아니다(웃음). 아! 기본적인 Extension은 설치하고 시작하자. 작업물을 바로 확인할 수 있는 Live Server나 ES Lint, Beautify는 생산성을 올려준다. 본인이 색약이나 대비가 강한 색을 원한다면 Color Theme을 바꾸면 된다.
수련의 시간
자 지금부터 우리는 외국어를 배울 것이다. 미국에 가면 영어로 소통하는 것처럼, 컴퓨터와 소통할 때는 그들의 언어를 사용해야 한다. 휴먼의 언어도 그 종류가 다양하듯 컴퓨터의 언어도 다양하다. 그중 우리는 HTML5, CSS3, Java Script를 공부할 것이다. 아마 이 구간에서 이탈이 제일 많이 발생할 것으로 예상된다. TCP 교육자료를 정독하고(중요) W3C문서(순한맛), MDN문서(매운맛)를 이리저리 읽어보자.
모든 것을 완벽히 외울 필요는 없지만, 이 구간에 많은 시간을 투자하자. 예제 코드를 이리저리 바꿔보고, 오류가 난다면 왜 나는지 정확히 짚고 넘어가자.
온몸이 배배 꼬이고 너무 괴롭다면 굳이 할 필요 없다. 그저 적성이 안 맞았을 뿐..
하지만 무언가를 알아가는 재미를 느꼈거나 몰입의 즐거움이 있었다면. 정진하라.
옴뇸뇸.. 이건 뭐 방법이 없다.
Donny99를 Inspect 한 모습, 이왕이면 좋은 자료로 공부하자기본적으로 사고 구조가 디자이너가 주로 사용하는 툴과 다르므로 조금 당황스러울 것이다. 러닝 커브 역시 다르다고 생각한다. 디자인 툴이 Linear 하다면 개발은 약간 계단 형식으로 올라간다. (득도의 순간이 있다) 단순한 구조의 웹사이트를 Inspect 툴로 뜯어보며 공부하면 효과적이다.
Stackoverflow
(거기 개발자 입꼬리 내려!) 현재와 달리 한 5~6년 전만 해도 디자이너라는 족속은 서로에게 꽤 배타적이었다. 사용 툴, 정보공유에 적극적이지 않았고, 정보의 독점이 곧 힘이라고 생각했다. 개발자들의 여러 문화를 알아가며 영감을 받은 부분 중 하나가 바로 공유문화이다. Stackoverflow에 정말 많은 질문과 답변, 의견 교류, 사례들이 나와 있다.
마이클 잭슨 월드투어 영상 이후로 가장 큰 인류애를 느꼈다.보통 "How to ~", " ~ is not working"이라고 검색하면 다 나온다. 모르는 게 생긴다면 스스로 찾아보고, 생각하고, 공부하자! 집단지성의 위대함과 인류애를 느껴보는 것 또한 좋다.
소소한 팁
클린 코드의 저자 로버트 C. 마틴 아저씨는 말했다. "빨리 가는 유일한 방법은 제대로 가는 것이다." 그리드 나누는 법을 정확히 공부하자! 어중간하게 알면 나중에 고생한다. background-color를 넣으면 영역을 명확하게 볼 수 있어 도움될 것이다. 러시아 전통인형 마트료시카를 떠올리며 <div>로 이리저리 영역을 나눠보자.
HTML의 태그, CSS의 프로퍼티를 전부 외우려고 하지 말자! 개발자들도 모르면 공식문서를 찾아보면서 코딩한다. 음.. 사용 빈도 그래프를 보고, 처음에는 자주 사용하는 것들 위주로 학습하자 아! FlexBox는 아주 유용한 기능이니 요 개구리 게임을 하면서 꼭 익히도록 하자.
재미있지 않나요?
여러 문서를 더듬더듬 읽어보는 데만 한 달 정도 걸린 거 같다. 낯선 개념이기도 하고, 직장생활을 하며 밤에 시간을 쪼개 공부하느라 진도가 느렸던 거 같다. 하지만, 우리가 너무나도 당연하게 사용하는 것들이 어떻게 구성되어 있는지에 대한 새로운 지식을 배우는 과정에서 몰입이 있었고, 순수한 즐거움이 있었다. 개발자들이 일하는 방식, 설계구조의 변천사, 그들의 문화에 많은 영감을 받기도 하였다.
하산하기 전까지
천천히.. 음미해보자..
이전 글 디자이너의 웹 포트폴리오 제작기 1부 - 나를 소개하는 방법
(디자이너의 웹 포트폴리오 제작기 3부 - 스스로 고민하고 생각하는 법)으로 이어집니다.
