코딩 배우는 디자이너 [240일 차]
업데이트
저희 가족에게 행복한 뉴스가 생겼습니다! 저희 부부 가운데 가족이 한 명 더 생겼고요 현재 아내의 뱃속에 건강히 자라고 있습니다 내년 초에 출산을 예정 중이어서 원래는 11월까지 진행되는 부트캠프의 스케줄을 조정하고 아내를 서포트하는데 시간을 더 투자해야겠다고 생각을 했습니다.
그래서 저의 처음 예상과는 다르게 1년이랑 시간을 다 투자하지 못하고 3/4(9개월)를 마치면서 코딩 배우는 디자이너에 대한 글을 마치려고 합니다.
코딩 부트 캠프의 시간을 돌아보며
올해 1월 초부터 코딩 부트캠프를 참여해 일주일 20시간씩 (월-목 6:30 pm - 9:30 pm & 토: 9:00 am-6:00 pm) 지금까지 총 3단계의 클래스를 마무리했었습니다.
첫 번째 코스: 201에서는 기본적인 HTML, CSS, 그리고 Java Script을 중점적으로 배웠습니다.
두 번째 코스: 301에서는 Advanced Java Script와 Back-end에 대해 공부하여 하나의 싱글 애플리케이션을 만드는데 콘셉트를 이해했었고요
세 번째 코스: 501에서는 Phyton, Java Script , Swift 중 하나를 골라 배울 수 있었고, 그중 가장 visual 적인 면이 많은 성질의 Swift를 택해 배웠습니다.
코딩 부트캠프를 통해 내가 배운 것들
1. 코딩은 정해진 기간 안에 마스터할 수 있는 것이 아니다
미국에 사는 한국분이시라면 공감이 되는 이야기 이실지 모르겠지만, 저는 퇴근 후에 와이프와 한국말을 하고 한국 뉴스를 접하고 한국 노래를 듣게 되다 보니 미국 사람들과 관계를 맺기 위해 제가 추가로 노력해야 하는 부분이 있습니다 (다른 분들도 공감하시나요?)
아무래도 제 뿌리는 한국사람이다 보니 저는 계속 미국 문화를 앞으로도 이렇게 찾아 배워가면서 살아갈 거 같습니다 (제가 미국 사람들과 계속 관계를 맺으면서 살아가고 싶다면요).
이와 마찬가지로, 저는 개발의 세계에 입문한지도 얼마 안 되었고, 회사에서 스케치를 사용해 디자인 일을 하지, 개발일을 하는 것이 아니기 때문에 제가 꾸준히 계속 공부하고 관심을 가지지 못하면 어느 순간 잊어버리겠다는 것이 제가 내린 결론이었습니다.
그리고 이점이 제가 올해 초 예상했던 그림이 아니라는 것을 깨닫게 된 순간입니다. 일 년쯤 되면 나름 코딩에 대한 저의 정의가 내려질 거라고 생각을 했지만, 이제 아주 조금 코딩에 대해 눈을 뜨게 된 거 같습니다. 그래서 그런지 저는 코딩을 배우면 뭔가 더 마음이 편안할 줄 알았는데 오히려 앞으로도 배워야 할 것이 무궁무진하다는 것에 오히려 부담감 아닌 부담감이 생겼네요.
차라리 아예 몰랐다면...그래서 이글의 성격 또한 정보 전달 글이기보다는 (또한 이미 전문적으로 잘 정리된 글이 많다는 것을 찾아보면서 알게 됐기 때문에) 저의 경험담을 나누게 된 글로 성격이 바뀌게 된 거 같습니다.
2. 이해가 되지 않을 때도 그냥 묵묵히 따라가기...
코딩 부트캠프 시작 때는 열정으로 수업을 잘 따라가다가 언젠가부터 많은 양을 배우다 보니 어느 순간부터 제가 뭘 배우고 있는지 이해가 안 되는 것에 스트레스를 가장 많이 받았던 거 같습니다.
수학으로 치면 하루에 덧셈, 곱셈, 나누기, 방정식을 다 배우는 콘셉트이다 보니 소화되지 않은 상태에서 계속 지식을 넣으니 부담되고 심적으로 힘든 적이 많았죠. 또한 비싼 학비를 내면서 까지 내가 이해 안 되는 것을 계속 돈 내가면서 수업을 들어야 되는 생각도 많이 들었고요.
그렇게 그만둘까 라는 고민을 하고 있을 때마다 제가 계속 수업을 들을 수 있게 된 원동력은 파이널 프로젝트 기간 때였습니다. 분명 이해가 되지 않았던 거 같던 내용들이 어느 순간 이해가 돼서 제가 코딩을 하고 있는 현상들이 일어났죠. 이건 저뿐만이 아닌 거의 모든 학생들에게 일어났던 일입니다.
그래서 어느 순간부터는 저는 이런 마음가짐을 했습니다 "Trust your process". 이해가 되지 않아도 지금 공부하는 순간들을 집중해서 잘 따라오면 어느 순간 이해가 될 테니까 포기하지 말라고요.
정말 이렇게 한다고 배워질까?물론 묵묵히 따라 하는 것이 언제나 적용되는 말은 아니라고 생각합니다. 저는 기초 클래스인 201에서 꾸준하게 기초적인 지식을 배웠기 때문에 파이널 프로젝트를 하면서 흩어졌던 퍼즐이 맞춰지는 일들이 가능했던 거 같습니다. 글을 마무리하면서 이점에 대해서는 다시 한번 정리하도록 하겠습니다.
3. 코딩을 하면서 느끼게 된 프로토타입의 중요성
위에 이야기했던 파이널 프로젝트 기간 동안 각자 몇 명이서 팀이 되어 MVP를 정해 프로그램을 만들게 되는데요 (여기서 MVP란 Minimum Viable Product 약자로 최소 기능 제품을 뜻합니다) 프로토타입을 통해 MVP를 정하는데 아주 큰 도움을 주었습니다.
파이널 프로젝트 기간 딱 5일의 시간 동안 저희 팀은 하루를 MVP를 설정하는데 투자하고 나머지 4일은 코딩을 하는데 중점을 두었습니다. Framer를 이용해 실제로 보고 느끼고 interact 할 수 있는 프로토타입을 만들어 본 다음 팀원들과 서로의 의견과 고쳐야 될 점을 빠르게 나누어 MVP를 짜고 프로젝트에 실행에 나갔습니다.
물론 다른 팀들도 와이어프레임을 만들지 않고 시작한 것은 아니지만, 저희 팀은 실제 같은 프로토타입을 통해 코딩을 하기 전에 문제점과 고쳐야 할 점을 더 빨리 찾아낼 수 있었죠. 그 점이 5일밖에 없는 시간 동안 얼마나 유용하였는지 그리고 디자이너의 역할이 얼마나 중요한 것인지를 직접 몸소 체험할 수 있게 되었던 시간이었습니다.
결국 실제 같은 프로토타입이 개발적으로 얼마나 시간을 효율적으로 세이브할 수 있고 좋은 디자인이 중요한지에 대해 팀원들과 저에게 느낄 수 있는 시간이어서 개인적으로 디자이너라는 역할이 얼마나 중요한지도 깨닷게 되었고요. 제가 코딩을 배우면서 개발자님들에게 많은 점을 respect 한만큼 디자이너 분들 또한 못지않게 respect 받아야 할 부분이 있다는 것을 인정해 주셔야 할 거 같습니다 (이미 디자인의 중요성을 인지하는 기업들이 많이 있고요).
Framer로 팀원들과 실시간으로 수정하면서 각자 써보면서 문제점들을 바로바로 업데이트 해갔다4. 디자이너로써 코딩을 배워야 하는가에 대한 질문?
코딩을 일 년 동안 배우고 나면 앞으로 나의 커리어에 어떤 기회가 있을지에 대한 궁금증이 있었습니다. 물론 현재로써 9개월밖에 배우지 않은 상태에서 이야기 나누기는 쉬운 부분은 아니지만 제가 앞으로도 계속 테크 쪽에 일을 한다면 지금과 같이 PM과 개발자분들과 계속 같이 일을 하게 될 것입니다. 그렇기 때문에 저는 코딩 부트캠프를 통해 개발자들의 세계에 들어와 그들의 관점에 대해 생각해 볼 수 있던 시기였다고 생각합니다.
축구로 비유한다면 팀의 코치가 전원 수비를 작전 지시한 상황에서 팀 선수는 자기의 포지션과 상관없이 팀을 위해 수비를 해야 될 상황이 올 때가 있을 것입니다. 그때는 수비 연습을 꾸준히 한 사람이 팀 작전에 가장 도움이 될 수 있겠죠?
회사에서 일을하다가 자기의 위치에 상관없이 위기를 대처해 가야 하는 상황이 올수있다저는 디자이너, PM , 엔지니어의 조합을 통해 좋은 제품을 만드는 것이 목적이라면 회사에서 어떤 상황이 올지 모르는 가운데 디자이너 분들이 PM의 일이나 개발자의 일에 관심을 가지고 그들의 분야를 배워보는 것에 나쁠 것은 없다고 생각합니다.
하지만 문제는 골키퍼가 이미 있는 상황에서도 공격수가 자기도 골키퍼 하겠다고 옆에 붙어 있는 거죠. 제가 말한 모든 것은 본인의 위치에서 최선을 다하고 서로에게 믿음과 신뢰가 쌓여있는 상태를 기반으로 두고 이야기하는 것입니다.
코딩 부트캠프에서 배운 것을 정리해보는 시간
마지막으로 위에 이야기 나누었던 제가 지금까지 배운 것들을 짧고 굵게 정리를 해봤습니다. HTML과 CSS를 이용해 structure를 만들고 서버에 저장하고 호스팅까지 혼자서 애플리케이션을 만들게 된 여정을 짧게 정리해 봤습니다 (iOS의 개발 과정은 웹과 틀리지만 콘셉트는 같기에 이글에서는 소개하지 않기로 결정했습니다).
Atom 텍스트 에디터
먼저 코딩을 적을 수 있으려면 텍스트 에디터가 필요하겠죠? 저는 부트캠프에서 atom을 쓰는 것을 추천했는데요 공짜 프로그램이면서 플러그인도 다양해서 쓰는데 아무 불편한 점이 없었습니다. https://atom.io/ 에서 다운로드하실 수 있습니다.
텍스트북
그리고 코딩 부트캠프에서 사용한 텍스트북 리스트입니다.
HTML and CSS: Design and Build Websites by Jon Duckett 자세히 보기
JavaScript and JQuery: Interactive Front-End Web Development by Jon Duckett 자세히 보기
출처:https://medium.com/@gusseting/how-the-book-javascript-and-jquery-is-a-bestseller-bestselling-bookHTML & CSS에 편해지려면
먼저 HTML과 CSS와 친해지기 위해 인터넷에 있는 웹사이트나 드리블을 둘러보면서 본인이 만들 수 있을 거 같다고 생각하는 사이트를 순수 HTML과 CSS를 사용해 만들어 보는 것을 추천합니다. 중간에 만들기 너무 어렵다고 생각하시면 디자인 수정을 하셔도 되고 다른 사이트를 만들어 보셔도 됩니다. 다시 한번 강조하지만 자바스크립트 기능을 만드는 것이 아닌 순수한 구조(structure)만 카피해서 만들어 보는 것입니다 (예상 소요시간: 6시간).
만약 HTML과 CSS에 아무 경험이 없으신 분들은 https://www.codecademy.com/ 에서 HTML과 CSS에 대해 수업을 듣는 것을 추천합니다. 무료입니다 (예상 소요시간 20시간)
Java Script를 이해하려면
HTML과 CSS가 인간의 뼈대를 만들고 살을 붙이는 것이라고 비유한다면 자바스크립트는 이제 움직이고 생각할 수 있게 만드는 역할을 합니다
전 글에도 항상 소개했던 생활코딩에 나온 Java Script 강의들을 들으신다면 제가 들었던 201의 수업의 1/5 은 들으셨다고 해도 과언이 아닐 것입니다. 밑에 링크를 참조하세요 (예상 소요시간 20시간).
https://opentutorials.org/course/743
Java Script가 이제 익숙해졌다면 jQery를 알아보자
부트캠프 301 클래스에서 처음으로 배우는 내용입니다. Java Script를 사용해 이틀 동안 고생해 만든 코드를 jQuery로는 단 몇 줄로 해결할 수 있었습니다. 그전까지 순수 HTML과 CSS 만을 사용해 코딩 연습을 하게 한 이유도 여기에 있죠. 여러 가지 기능으로 사용할 수 있겠지만 제가 배운 코딩 부트캠프에서는 constructor function을 사용해 리스트들을 템플렛화 시켜서 필터와 정렬의 기능을 만들어 보았었습니다. (jQuery라는 것이 너무 광범위해서 예상 소요시간을 측정하기 어렵습니다)
막히는 게 있을 때는 구글 키워드 앞에 쳐보자 MDN!
코딩을 잘하는 개발자들도 많은 시간 모르는 것은 웹서치를 통해 알아보는데요 그중 가장 신뢰도 있는 사이트인 MDN에 가서 정보를 찾아보는 것을 추천해 드립니다. 여러 나라 언어로 번역도 돼있어서 한글과 영어 모두 읽어보시는 데도 도움이 될 거 같습니다.
https://developer.mozilla.org/en-US/
if else 문이 뭔지 알고 싶을때도 앞에 mdn 을 붙혀 구글링!백앤드 컨트롤은 Node.js
Node.js라는 이름을 처음 듣는 분들에게 이걸 어떻게 설명하는 것이 좋을까 라는 생각을 해보다가 웹에서 다른 분들의 정의를 찾아봤는데 공통적으로 표현된 말은 Node.js를 사용해 서버와 데이터 즉 백앤드를 쉽게 컨트롤할 수 있게 도와주는 툴이라고 명칭 되어 있습니다. 여기서 백앤드(Back-end)라는 표현은 개발에서는 크게 프런트 앤드(Front-end)와 백앤드(Back-end)로 나뉘게 되는데 쉽게 말해 사용자가 눈으로 볼 수 있는 모든 부분들 (HTML & CSS를 사용한) 결제버튼과 폰트 등을 명칭 한다면 백앤드는 결제버튼을 누르고 난 뒤 정보를 데이터에 저장시키고 사용자의 이메일에 결제확인 메일을 보내는 등 사용자의 눈에 보이지 않는 부분을 컨트롤하는 것을 명칭 합니다.
Node.js를 사용해 저는 더 이상 저의 프로젝트 상태를 로컬 컴퓨터가 아닌 서버에 직접 프로젝트를 불러올 수 있게 되었습니다. 쉽게 이야기하면 서버에 프로젝트를 불러오기 때문에 누구라도 서버 url이 있다면 제 프로젝트 진행 상태를 실시간으로 볼 수 있게 된 거죠! (너무 광범위해서 예상 소요시간을 측정하기 어렵습니다)
드디어 개발을 끝냈다.. 그런데 어디다가 호스팅을 해야 되지? 답은 Heroku!!
Node.js를 사용해 개발을 마쳤다면 이제 당당하게 www.홈페이지. com(호스팅 사이트)이 있어야 사람들에게 보여줄 수 있죠. 저의 부트캠프에서는 Heroku(https://www.heroku.com/)라는 무료 호스팅 서비스를 사용했습니다. (예상 소요시간: 3시간)
301의 파이널 프로젝트는 그래서 당당하게 저희 팀의 url로 publish 하여 파이널 프로젝트를 제출했습니다. http://trendofthe.world/ 프로젝트에 짧게 설명하자면 여러 뉴스 API를 가지고와 저희 플랫폼에 보여주고 필터 할 수 있는 서비스를 만들었었습니다 (참고로 CSS에 익숙한 저는 비주얼 적인 부분보다는 서버와 API 연동에 많은 시간을 투자했습니다)
그리고 4명이서 각자 작업한 코드를 하나로 합칠 수 있게 도와준 Github
정말 개발자님들의 고통을 조금 느낄 수 있었던 부분 중 하나는 개발은 내가 맡은 코딩 파트가 끝났다고 끝난 것이 아니라는 것이었습니다. 제 부분이 끝나도 Github을 통해 다른 팀원이 작업한 코드를 합치고 프로그램을 돌려보면 에러가 뜨고 그런 점이 프로젝트 진행 중 힘든 부분 중 하나였고 챌린지였습니다.
그런 부분에서 끈기가 필요했고 코딩을 통해 많은 사람들과 충분한 대화를 해서 최대한 코드가 겹치지 않는 작업을 해야 된다는 것을 배웠죠.
라인 하나하나가 팀원들이 작업했던 것이고 하나로 merge하는 순간이 있다글을 마치며
직장에서 코딩을 할 수 있는 작업환경에 살고 있지 않기에 저 스스로 꾸준히 찾아보고 공부하지 않는다면 언젠가는 잊어버리게 될 것이라는 것을 배우면서 디자인과 코딩이 접목되는 일들을 위주로 코딩을 계속 읽을 수 있는 환경을 만들려고 노력해야겠다는 생각을 했습니다.
코딩에 대한 지식을 배우면서 확실히 제품(product)에 대한 디자인을 넘어 전체적인 폭넓은 생각을 하게 만드는데 도움을 주었고 개발 쪽 환경에 지식을 가지고 있는 것은 좋은 디자인을 만드는데 큰 도움을 주는 일이라고 생각하게 됐던 거 같습니다.
그러나 저는 코딩을 배우면서 개발자로 전환해야겠다는 생각을 가지지는 않았고요 앞으로도 사용자에게 좋은 제품을 제공하는 한 사람이 되어야겠다는 마음이 더 커진거 같습니다.
마지막으로 글을 쓰지 않는 동안 '디자인 테이블'이나 브런치에 다른 디자이너 분들의 글을 읽거나 들으면서 많은 도전이 되는 점이 있었고요 물론 앞으로 가족들에게 시간을 더 투자할 상황이 많겠지만 개인적으로 사이드 프로젝트에 대한 욕심도 생겼고 해서 부트캠프의 마지막 Swift클래스에서 진행된 파이널 프로젝트를 계속 사이드 프로젝트로 발전해 가는 중에 있습니다.
브런치뿐만 아니라 Dribble과 Medium에서도 저의 활동을 기대하면서 글을 마칩니다 : )
이전글: 코딩 배우는 디자이너 [90일 차]
이전글: 코딩 배우는 디자이너 [120일 차]
