개자이너와 디발자가 될 수 있는 방법

상세페이지

  • HOME > 월별 특집 & 기획

개자이너와 디발자가 될 수 있는 방법

개자이너와 디발자
designvelopment
웹 환경의 지각 변동이 굳건하던 IT 직업군의 경계를 허물고 있다. 새로운 시대에 등장한 직업은 개자이너와 디발자. 이제 막 업계에 발을 딛는 개발자와 디자이너는 이 변화에 어떻게 대처해야 할까. ①인정하자, 세상은 개자이너와 디발자를 원한다
②코딩을 배워야 할 지를 고민하는 웹디자이너를 위한 지침서
③IT 히어로들의 집단, 스포카(spoqa)
④개자이너와 디발자가 될 수 있는 방법



④개자이너와 디발자가 될 수 있는 방법



앞선 기사를 읽고 웹디자이너로서 코딩을 배우고 싶은 생각이 들었다면 본 코너에 주목하자. 
코딩 공부의 스타트도 못 끊은 웹디자이너를 위해 시작하는 방법, 공부 순서, 유용한 참고 자료, 
그리고 추천 툴까지. 앞선 기사의 인터뷰이들이 직접 꼽은 노하우를 그들의 자아를 빌려 알려드린다.
물론 글은 기자들이 썼다.  글. 이창민 기자 whale@websmedia.co.kr , 유종범 기자 jayu@websmedia.co.kr


이준혁 캐주얼스텝스 프론트엔드 디벨로퍼 본 노하우는 ‘디자인:개발’ 밸런스를 9:1에서 최대 8:2까지 맞추는 것에 초점을 뒀다. 이것도 직장에 처음 입사한 디자이너는 해당되지 않는다. 새내기들은 디자인 그 자체에 집중하자. 그것만 해내는 것도 벅차다. 그 기간이 보통 1년이다. 그렇게 디자이너로서 사람 구실을 할 줄 알게 됐을 때 개발 쪽으로 도전해도 늦지 않다. 기초부터 탄탄히 다지고 싶다면 피트 몬드리안(Piet Mondrian)의 ‘빨강 노랑 파랑의 구성’이라는 작품을 코딩만으로 웹 상에 그대로 구현하는 실습이 좋다. 이 노가다를 3~4번 반복하다보면 놀랍게도 CSS의 기본 개념인 플롯(Flot), 마진(Margin), 패딩(Padding) 등을 저절로 알게 된다. 손에 좀 익어서 작업 속도가 빨라진다면 그림에 동그라미를 띄우는 식으로 단계를 올려보자. 이번엔 포지션(Position)을 익힐 수 있다. 자의식이 강한 성격이라면 티스토리나 워드프레스로 본인의 블로그를 직접 만들어보는 것도 방법이다. HTML로 구조를 잡고 CSS로 스킨을 만들다보면 코딩에 점점 익숙해질 것이다. 기존 웹사이트의 코드를 직접 뜯어보면서 실습하는 것도 하나의 좋은 방법이다. 크롬으로 웹사이트를 띄운 뒤 수정해보고 싶은 페이지에서 마우스 오른쪽 클릭으로 ‘검사’ 메뉴에 진입하면 해당 페이지의 요소(Elements)를 뜯어볼 수 있는 창이 열린다.
여기서 소스 값을 변경하면 현재 띄운 웹사이트에 해당 내역이 실제로 반영된다(나한테만 그렇게 보이니 안심하자). HTML을 어느 정도 다룰 수 있게 됐다면 자바스크립트(JavaScript)를 배우자. 제이쿼리(JQuery)는 자바스크립트를 보다 쉽게 다룰 수 있도록 만들어진 라이브러리니까 참고하자. 그 이상 무언가를 해보고 싶다면 당신은 정말 대단한 근성의 소유자다. 이준혁 씨는 다음 순서로 SCSS(Sassy CSS)를 익혀볼 것을 추천했다. 노가다성이 짙은 CSS의 태생적 한계를 보완한 하나의 문법이다. 코드 에디터로는 서브라임 텍스트(Sublime Text)를 추천한다. 가볍고 확장성이 좋으면서 무료로 쓸 수 있다. 드림위버는 절대 쓰지 말자.
서브라임 텍스트는 윈도우와 맥에서 모두 구동할 수 있는데 코딩을 배우고 싶은 웹디자이너라면 맥을 쓰자.  차태현 프리랜서 웹디자이너 웹디자이너가 더 나은 디자인을 위해 개발 쪽 전문지식까지 공부할 필요는 없다. 오히려 ‘이런 디자인은 코딩이 어려우니 피하자’는 식으로 창의성이 저해될 수 있기 때문이다. 하지만 기업의 인력 구조 상 어쩔 수 없는 환경적 요인에 놓여 있다면 배워도 좋다. 개발자가 없다거나 퍼블리셔가 없는데 디자이너는 둘이나 있는 그런 상황 말이다.
추가로 그런 직장을 때려치울 수 없는 상황이라면 그때는 개발을 반드시 배워야겠다. 책을 사서 공부하는 것보다 인터넷에 나온 정보를 활용하는 것이 좋다. 물론 좋은 책들이 많지만 일을 하면서 마주칠 수 있는 다양한 문제에 대한 해결법을 찾기는 힘들다. 온라인에 공유되는 수많은 예제를 이용해 직접 HTML로 구조를 짜보고 이를 파악하는 작업이 근본적인 문제 해결에 가장 효과적이다. 이때는 자신이 디자인한 결과물을 직접 퍼블리싱 해보거나 남이 짜놓은 코드를 가져와서 뜯어보는 것도 좋은 방법이다. 붙여보고 동작하면 쓰고, 아니면 다른 것을 다시 붙여보는 식으로. 그렇게 뜯어낸 것들을 자신의 디자인에 적용해보면 구조를 더욱 쉽게 파악할 수 있다. 구조를 잡고 보는 것에 익숙해지면 자바스크립트나 제이쿼리를 통해 인터랙션을 넣는 단계로 넘어가면 된다. 구글 검색을 통해 다른 사람의 코드를 가져다가 활용하며 소스가 어떻게 작동하는지 이해하려 노력하자. 무료로 이용할 수 있는 게 무척 많다. 여기까지만 알아도 웹디자이너가 코딩을 할 때 발생하는 이슈들을 충분히 제어할 수 있다. 좀 더 전문성을 갖고 싶다면 캔버스(Canvas)를 공부하는 것을 추천한다. 플래시 기술이 사장되면서 웹에서 자바스크립트를 통해 인터랙션을 구현하도록 만든 기술이다. 최근 디자인 패러다임이 플랫하게 변모하면서 빠른 프로토타입 제작에 대한 이슈로 스케치(Sketch)를 쓰는 디자이너가 많은데, 모든 프로젝트를 벡터 그래픽으로만 진행할 순 없다. 아직까지도 많은 프로젝트에선 비트맵 그래픽이 쓰이기에 포토샵은 여전히 효과적인 도구다. 코드에디터로 어도비의 브라켓츠(Brackets)를 쓰면 좋다. 가볍고 플러그인 설치가 용이해 확장성이 높으면서, 무료다. 포토샵 PSD 파일을 넣으면 자동으로 영역을 지정해 포토샵과의 궁합도 좋은 편이다.



DESIGNVELOPER   김수지 웹디자이너, 디자인수지 페이스북 페이지 관리자,
네이버 카페 ‘개기디마셔’ 운영자 김수지 씨는 디자인 비전공자로 현업에서 웹디자인을 처음으로 접해본 경우다. 온라인 마케터로 커리어를 시작했는데 고등학생 때 포토샵을 다뤄봤다는 이유만으로 웹디자인 작업을 떠맡게 된 것이다. 코딩을 전혀 모르던 때, 회사에서 첫 웹디자인 작업을 진행하면서 개발자의 입장을 전혀 고려하지 못한 디자인으로 프로젝트에 차질이 생길 뻔했다. 쉽게 말해 개발자에게 호되게 혼났다. 이후로 웹디자인 뿐만 아니라 코딩을 배워야겠다고 생각했다. 비전공자라는 아킬레스건을 극복하기 위해 웹디자인 기능사 자격증 공부를 시작했다. 하지만 시험이 너무 오래된 웹 환경을 기준으로 설계돼 현업에 적용하기 힘들었다고. 웹디자인 기능사를 준비중인 사람이라면 참고하자. 이에 차라리 가장 트렌드에 민감한 협업자들과 공부한 내용을 직접 공유하고 소통하기 위한 채널을 만기로 했다. 디자인수지 블로그(blog.naver.com/sujji9)와 페이스북 페이지(goo.gl/8myymw), 개기디마셔 카페(cafe.naver.com/ggdms)는 그런 고민의 결과물이다. 도저히 막막할 때는 일반인을 위한 코딩 무료강좌 사이트 ‘생활코딩(opentutorials.org)’을 이용하자. 학원보다 훨씬 낫다. 학원은 스스로 공부할 수 없을 때 찾는 곳이다. 김수지 씨는 디자인수지 블로그를 통해 다음과 같은 순서로 코딩을 공부하라고 권한다. 첫번째는 HTML과 HTML5 공부다. 웹 문서를 만들 때 가장 기본적인 프로그래밍 언어로, HTML5로 만든 웹이 많이 나오고 있지만 여전히 HTML 기반의 웹사이트가 많으니 둘 다 배우는 게 좋다. 두번째 클래스는 CSS다. 웹사이트가 어떻게 보여지는지를 담당하는 코드로, HTML로 기본적인 문서 구조를 만든 뒤에 레이아웃과 디자인을 구성할 때 CSS를 사용한다. 세번째 관문은 자바스크립트다. 웹페이지에 존재하는 모든 동적인 부분을 표현할 수 있는 언어로 슬라이드 같이 웹 문서를 동적으로 꾸밀 때 사용한다. 유일한 단점은 많이 어렵다는 것. 도저히 안되겠으면 자바스크립트로 가능한 동작을 더 쉽게 사용할 수 있도록 간단한 명령어로 제공해주는 제이쿼리 공부를 먼저 시작해도 좋다.  김종민 구글 시니어 UX 엔지니어 어차피 새로운 무언가를 배우는 것은 힘들다. 이것을 인정하는 것이 가장 먼저 해야 할 일이라고 생각한다. 이미 구시대의 유물이 된 플래시도 2~3년은 꾸준히 해야 직장에서 그 능력을 인정받았다. 디자인을 처음 배웠을 때도 마찬가지로 어려웠을 것이다. 주니어에서 시니어 디자이너 수준까지 올라가는 데에 얼마나 많은 노력을 들였는지 생각해보자.
그 과정을 한 번 더 겪는 거니까 힘들 수밖에 없다. 개발을 배울 마음의 준비가 됐다면, 이제 ‘한 놈만’ 패자. 개발 언어는 하나를 이해하면 다음에 다른 언어를 이해하는 데 무리가 없다. 그중에서도 자바스크립트(JavaScript)를 추천한다. 자바스크립트는 그 어떤 언어보다 활용도도 높고 유연한 언어다. 다른 언어들처럼 딱딱 정해진 공식만 받아들이고 하나라도 틀리면 에러를 뱉어내지 않는다. 또한, 라틴어를 배우면 프랑스어, 이탈리아어 등을 금세 배우는 것처럼, 자바스크립트에서 파생된 언어들이 많으므로 다른 언어를 이해하기 수월하다. 배우는 방법은 책보다는 인터넷으로 직접 조그만 것을 만들면서 익히는 것이 제일 좋다. 개발자와 함께 일하는 업무 환경이라면 더 좋다.
궁금하거나 막히는 것이 있다면 바로 물어보자. 개발자에겐 그 문제가 10초도 걸리지 않는 일일 것이 분명하다. 처음 코딩할 때엔 HTML 에디터 같은 네이티브 에디터를 사용하길 추천한다. 개발 초보자에겐 조금 어렵다고 느낄 수 있지만, 작은 것부터 차근차근 만들어 나가면 금방 배울 수 있다. 그 후 어느 정도 코딩에 익숙해졌다면 자신만의 코드 에디터를 골라보자. 코드 에디터를 선택할 때의 기준은 ‘나에게 적절한 코드 힌트가 있는지’의 여부로 결정하는 것이 좋다. 코딩 시, ‘a’만 눌러도 뒤에 쓸 코드 내용이 자동 생성되는 것을 코드 힌트라 하는데, 코드 힌트를 잘 활용하면 생산성을 크게 높일 수 있다.
또한, 비주얼에 민감한 디자이너에겐 어두컴컴한 터미널만 있는 에디터보다는 색이 있는 에디터가 큰 도움이 될 것이다.
이준혁 씨가 추천한 서브라임 텍스트나 PHP 스톰을 추천한다. 어떤 지식을 쌓던 가장 중요한 것은 ‘기본’이다.
자바스크립트와 네이티브 에디터, 그리고 배움의 열망만 있다면 당신은 개자이너·디발자가 될 수 있다.

tags 디아이투데이 , ditoday , 월간 DI , 디아이 , DI 매거진 , 디아이 매거진 , 유종범 기자 , 이준혁 , 차태현 , 김종민 , 김수지 , 웹디자인 , , 개발자 , 디자이너 , 개자이너 , 디발자 , 산업 변화 , 반응형 웹 ,

저작권자 © 웹스미디어 무단 전재-재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다.
본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은
반드시 기사의 출처(로고)를 붙여주시기 바랍니다.
영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라
그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

URL 복사 출력하기 목록보기 스크랩하기

관련기사

최신뉴스
월별 특집 & 기획
코딩을 배워야 할 지를 고민하는 웹디자이너를 위한 지침서
월별 특집 & 기획
IT 히어로들의 집단, 스포카(spoqa)
월별 특집 & 기획
개자이너와 디발자가 될 수 있는 방법
월별 특집 & 기획
숫자는 차갑지 않다, 따뜻한 나눔의 장으로서의 디지털
월별 특집 & 기획
데이터를 의미 있게 만드는 4가지 방법

정기구독신청