코딩을 공부하게 된 계기

사실 그냥 화가 나서 시작했다.

스타트 업을 하면서 1인 다 역을 해야 했다. 아이디어 회의부터 기획, 각종 디자인, 사업 계획서 PPT도 만들고 발표도 했다.
그 과정에서 기술을 갖춘 인력과 그 인력을 얻기 위한 자금의 중요성을 깨달았다. 우리가 하려는 웹, 앱 서비스를 만들기 위해서는 기획자, 디자이너, 개발자(프론트, 백앤드)가 최소한의 필요 인력이었고 그 최소한의 인력으로 빠르게 성장하는 게 최우선이었다. 그러나 모든 것은 이상적인 목표일뿐 생각대로 되는 것은 없었다.
5~6달간 웹 디자인을 기획자와 다투면서 겨우 만들었던 PSD 파일들. 웹 프론트 개발자에게 보여주자 돌아오는 답은 “디자인이 아마추어 같고, 효율적으로 워드프레스 테마 사서 쓰자”. 기획자와 고생하며 만든 디자인으로 서로 만족 한 상황이었는데 프론트 개발 역할을 맡은 팀원이 저렇게 말하니 정말 화가 났다. 그렇게 말한 개발자는 지난 반 년 동안 한 게 불평 섞인 말밖에 없었기 때문에 팀원들은 더 못마땅했다. 도대체 웹 코딩이 얼마나 대단하다고 저러는지 답답해서 그냥 내가 공부해서 하는 게 빠르겠다고 말했다. 개발자는 팀에서 나갔고 나는 내가 한 말에 책임을 져야 했다.

우선, 서점을 들렸다. 웹 프론트 개발을 위해서 알아야 할 코드를 주변 개발자분들에게 물어서 관련 서적을 사서 미친 듯이 따라 했다. 그리고 매일 같이 생활코딩 들어가서 처음부터 끝까지 반복해서 들었다. 그렇게 2주 동안 아침해가 뜰 때 잠들었다. 분노의 코딩을 시작으로 3달간의 삽질을 거쳐 드디어 서비스 완성했다.
그 계기로 코딩의 매력에 눈을 떴고 3년간 공부를 해오고 있다.
처음엔 HTML, CSS 이해가 목표였고, 그다음은 반응형 웹으로 레이아웃 짜는 것을 공부했다. 그다음 스텝은 Javascript, JQuery였다.(이때는 체감상 진입장벽이 꽤 높았다.)  그 이후로 부트스트랩, 워드프레스, 파이어 베이스 등을 막무가내로 공부했고, 최근에는 하이브리드 앱을 개발해보고 싶어서 아이오닉을 공부했다. 내가 원하는 웹, 앱을 완벽히 만들 수 없어도 디자이너 치고는 굉장히 개발 쪽에 삽질을 많이 했다고 생각한다.

지금 생각해보면 참 고맙다.

내가 코드에 눈 뜨게 해줘서

디자이너도 프로그래밍하는 시대

교육에 관련되어 있다면 당연히 자식을 키우는 부모들도 관심이 쏠리기 마련이다. 똑똑한 엄마는 국영수보다 코딩을 가르친다’라는 책이 나올 정도로 이미 많은 사람들은 코딩에 관심을 보이고 있다. 물론 그 이전부터 유명인사들은 코딩의 중요성을 강조해왔다. 대표적으로 오바마 대통령은 앞장서서 “게임을 하는 아이에서, 게임을 만드는 아이로!”교육시키자고 말하였고, 애플의 故 스티브 잡스도 생전에 “코딩을 통해 생각하는 법을 배웠습니다. 모든 사람들이 코딩을 배워야 합니다”라고 강조를 했다. 그 이외에도 어렸을 때부터 코딩 교육을 꾸준히 진행되어 왔던 유명인사들도 있다. 바로 페이스북 CEO인 마크 저커버그, 마이크로소프트의 빌 게이츠가 있다. 이처럼 많은 사람들이 코딩의 중요성에 대해 이야기하고 관심을 갖고 있다.

하나의 붐이라 생각하지만, 디자이너가 코딩을 배워야 할 이유가 있다.
서비스 디자인을 하는 이 분야는 절대적으로 개발자와의 소통이 중요하다. 서로 간의 이해도 없이 저건 남의 일, 이건 나만의 일로 구분 짓는 게 아니라 협업을 통해 시너지를 내야 한다.
주변에 코딩을 할 줄 아는 디자이너들이 코딩을 시작한 계기를 들어보면 개발자들과 소통을 위해 공부하는 분들도 있고, 단순히 대세이며 남들은 다하는 것 같아서 토익, 자격증 따는 것처럼 학원을 다니는 분들도 많이 봤다. 학원도 무수히 많아 돈과 시간을 조금만 투자해도 누구나 배울 수 있다. 마치 포토샵툴 배우는 사람들처럼…
그러나 코딩을 배우는 게 중요한 게 아니라 코딩을 이용해서 어떤 아이디어를 구현할까에 대한 고민이 더욱 중요하다. 그 아이디어를 구현하기 위한 도구이지 목적이 되면 안 된다. 가까운 미래에는 인공지능이 사람보다 프로그래밍을 더 잘 할 것 같다.(그럼 기술이 중요한 게 아니겠지…)

학원과 독학, 두 갈래 길에서

주변에 붙어 다니며 배울만한 개발자 절친이 없는 이상, 보통 학원으로 시작하거나 책 사서 독학을 하거나 둘 중 하나다. 뭐가 더 좋을까?
정답은 없다. 뻔한 말이지만 학원을 다니던 독학을 하던 꾸준히 하는 것을 추천한다. 학원을 다니며 공부하면 빠른 시간 내에 정답만(엑기스)을 배우며 습득할 수 있다. 독학을 선택하면 수많은 시행착오를 겪는 과정에서 답답함을 느껴 중도 포기하게 된다. 그러나 다양한 시행착오를 겪으며 한 번 원리를 이해하면 그때부터는 자기 것이 된다. 더 나아가 자신감이 생기며 효율적인 프로그래밍을 위해 더욱 공부하게 된다. 학원을 다니며 가볍게만 배운 분들은 코딩에 대해 보통 자신감이 없다. 프로그래밍을 손에서 놓은지 몇 달이 지나면, 그저 학원에서 내 머릿속을 잠깐 스쳐 지나간 외계어처럼 느껴진다.
꾸준함을 이길 수 있는 것은 없다.

디자이너가 코딩을 알면 좋은 점, 그리고 극복해야할 벽

코딩을 알면 좋은 점

  1. 개발자와 의사소통에 유리
  2. 시간의 단축 (전체 개발기간)
  3. 더욱 현실적인 디자인

인터렉티브(웹, 앱)디자인 영역은 편집 디자인과는 다른 점이 있다. 완성을 위해 개발이라는 과정을 거친다. 여기서 개발하는 개발자와의 소통은 본인이 디자인한 것이 얼마나 정확하게 만들어질 것인지 결정짓는 중요한 요소다. 그 언어의 특성을 파악하지 못한다면 대화는커녕 흔히 말하는 판타지 같은 디자인이라는 욕을 먹는다.
여기서 핵심은 디자이너가 개발을 완벽하게 잘하지 않아도 된다. 오히려 디자인을 못하면 어중이떠중이가 되니까… 다만 디자인을 더욱 잘하기 위해서는 개발 언어의 이해는 어느정도 필요하다고 생각한다. 웹 코딩으로 레이아웃 구현할 때 Block, Inline 방식에 대한 이해 없이 단순 포토샵으로 디자인하는 것은 그저 보기 좋은 그림의 떡으로 남게 될 확률이 높다. 또한 개발자와의 소통에서 핵심은 디자이너의 생각을 정확하게 100% 이해시키는 것인데 사실 100% 이해시키기도 어려울 뿐 아니라 오히려 이게 왜 구현이 어려운지, 비효율적인지를 개발자한테 설득 당해 디자인을 수정하는 경우가 허다하다.
코딩을 알게 되면 이 개발자가 귀찮아서 안 하는 것인지 진짜 난이도가 어렵고 비효율이라서 그러는지 알게 된다.

또한, 개발자를 비하하거나 무시하는 것은 아니지만, 포토샵에서 작업한 것 그대로 100% 똑같이 구현하는 개발자들은 드물다. 두 직업의 특성의 차이라고 생각하는데 디자이너는 1px 단위에도 민감하게 바라보는 직업이고, 개발자는 기능 구현에 민감하다. 만약 웹디자이너가 직접 퍼블리싱이 가능하다면 디자인을 똑같이 구현해야 맘 편한 디자이너 본인과 디자인을 똑같이 구현하기 힘든 개발자, 이 둘 다에게 매우 좋은 일이다. 디자이너가 중간에 가이드라인 작업을 생략해도 되는 장점이 있다.(숙련된 퍼블리셔 기준)

극복해야 할 벽

  1. 선택과 집중 필요
  2. 틀에 박히기 쉬움

개발을 알게 되면 가끔 정체성을 잃을 때도 있다. 내가 디자이너인지 개발자인지. 이는 자칫 잘못하면 평균 70점인 사람이 될 수도 있다. 각자 맡은 역할이 있고 협업을 하는 대기업 같은 경우는 하나 100점이 더욱 유용할 것이다. 개발을 그렇다고 엄청 잘하는 것도 아니고 디자인을 엄청 잘하는 것도 아니라면 선택과 집중이 필요하다. 개발은 그저 개인의 소양을 쌓는 정도로 가볍게 그러나 꾸준히 이해하는 방향으로 가고, 디자인에 집중하는 것도 현명한 방법이라 생각한다. 물론 둘 다 100점이면 더욱 좋다.
또한, 틀에 박힐 확률이 높다. 개인적인 경험으로 개발을 어느 수준 이상으로 하게 되면 본인의 개발 실력을 기준으로 디자인한다. 어느 정도 스크립트를 이용해서 자신이 생각하는 데로 인터렉션도 가능하고 반응형웹도 구현 가능하다 느껴지는 시점이 가장 위험한 것 같다. 어느새 본인의 디자인 퀄리티는 실현 가능한 수준에서 머물게 된다. 물론 현실적인 디자인이라 장점이 될 수도 있지만 그 이상으로 발전하지 못하게 막는 기준점이 될 수도 있다.

핀터레스트와 비핸스, 드리블을 통해 트렌디한 다양한 디자인을 보며 눈을 키우는 것도 좋은 방법이지만, 실제 개발된 웹사이트를 모아놓은 Awwwards에 들어가서 다양한 웹사이트를 보는 것도 좋은 방법이라고 생각한다. 보면서 내 위치를 한 번 더 자각하게 만드는 채찍질 같은…

내 개발 수준은 아무것도 아님을 인정하는 순간,  한 단계 더 성장했다.

http://www.awwwards.com/

욕심내지 말고 쉬운 길부터

주변에서 코딩코딩코딩!!! 디자이너들 사이에서 너무나도 자주들여오는 단어이다.”자바랑 자바스크립트는 무슨 차이지.. 무슨 언어가 이렇게 많아.. 뭘 배워야할지 모르겠어.. ”
3년 전 내가 하던 푸념이다.
스타트업에서 같이 일하던 개발자분들한테 물어보고 웹 퍼블리싱을 택했다. 지금생각해보면 애초에 나한테 선택지는 없었던 것 같다.

웹사이트를 개발하기 위해서는 HTML, CSS, JavaScript, JQuery, Php, Python, MySQL, Nodejs, Django 등등 관련된 언어가 많이 사용되는데 이것들이 언어인지 오픈소스 프레임워크인지, 플랫폼인지 조차 구분이 어렵다. 다 머릿속에서 지우고 쉽게 두가지 영역으로 나눌 수 있다. 눈에 보이는 영역(Front-end), 눈에 안보이는 영역(Back-end). 그 중 디자이너가 배우면 좋은(쉽고 눈에 보이니까!) 부분은 당연히 Front-end이다. 웹 프론트앤드에 사용되는 대표적인 언어는 HTML, CSS, JavaScript가 있다. (*참고로 Java와 Javascript는 아예 관련 1도 없는 별개의 언어이다.)
그 중 Javascript는 디자이너가 공부하기에 진입장벽이 높아서 처음엔 피해야 했다. 우선 HTML과 CSS를 배우면서 재미를 충분히 느끼고 자신감이 생길때 다음 단계를 공부했던 방식 덕분에 지금까지 공부할 수 있었던 것 같다.

개발 관련해서 참고하면 좋은 사이트

디자인 관련 북마크만큼이나 3년 동안 모아온 개발 관련 북마크들… 그중에 꼭 참고하면 좋은 사이트들 2개 공유한다. 아래 두 사이트 중 하나만 정독하기도 어렵다. 어느정도 감을 찾고 중급으로 올라가고 싶다면 구글링을 꾸준히 하는 방법을 추천한다.

디자이너에게 비핸스와 핀터레스트가 있다면 개발자들에겐 생활코딩이 있다.

생활코딩 : 기초부터 탄탄히.. 영상과 예제를 통해 공부할 수 있는 무료 교육 사이트.

https://opentutorials.org/course/1

W3스쿨 : 초보자도 이해할 수 있는 쉬운 예제, 따라 해 볼 수 있는 툴 제공을 통해 결과물을 바로 확인할 수 있다.

https://www.w3schools.com/html/default.asp

ps. 코딩? 프로그래밍?

가끔 코딩(Coding)과 프로그래밍(Programming)을 구분 지어 부른걸 들은 적이 있다. 무슨 차이일까? 구글링으로 찾아보니 아주 짧게 요약한 글을 발견했다. 코딩은 생각한 바를 코드로 옮길 수 있는 능력이고 프로그래밍은 생각한 바를 공학적인 요소와 함께 사용하여 효율적인 코드로 작성할 수 있는 능력이다.
개인적인 생각으로는 퍼블리셔들이 하는 HTML, CSS 부분만 작업하는 것은 코딩이고, 좀 더 나아가 php, javascript, python 등의 프로그래밍 언어를 사용하여 효율적으로 개발하는 것을 프로그래밍인 것 같다. 아무래도 함수(Function)를 사용해보면 효율성이 중요한 것을 알게된다.

#Coding#Css#HTML#Programming#Publishing
신연석

디자인, 개발, 기획, 비즈니스에 관심이 많은 디자이너입니다.
값진 경험과 그 경험에서 깨달은 것을 기록한 공간입니다.

Send Email