brunch

라이킷 105 댓글 6

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 수레 Oct 10. 2016

내가 코드를 익히는 방법

(디자이너인)내가 코드를 (빨리 대충)익히는 방법

어제도 사장님과 출장 다녀오는 길에 기차에서 물었다.

"난 복붙이나 하는 코딩을 하고 있는데 어떻게 하면 프로그래밍을 잘 공부할 수 있을까?"

우리 사장은 "나도 그렇게 함" 이라고 쿨답을 해버리곤 아무렇지 않다는 듯 먹던 빵을 한입 물었다.

한 회사의 CTO이고 이런 저런 진짜배기 프로그램을 하는 양반도, 복붙이 프로그램을 배우는 정석이라고 말하는데, 디자이너로 코딩을 깔짝깔짝하는 내가 복붙을 부끄러워할 이유가 없다.

해서, 지난 몇년간의 내 경험을 바탕으로 비전공자가 어떻게 하면 조금 덜 고통스럽게 코드를 익히는지를 몇자 적어보려고 한다. 여기서 일컫는 코딩이란, Javascript(라고 쓰고 Jquery라고 읽는다), CSS, HTML 등등 내가 요 몇년 깔짝거린(?) 코드들을 말한다. 디자이너이다보니, 시각화나 인터랙션에 관련된 다양한 라이브러리들을 배우면서 체득한 것들이다. 어디까지나 내 개인적인 경험일 뿐이다.

하나. 샘플 찾기

우선. 내가 덤벼볼만한 최소한의 샘플을 찾는게 첫걸음이다.

우리는 어차피, 어떤 언어(라이브러리)든 간에 이걸 '제 1장' 부터 책펴고 앉아서 공부할 생각도, 시간도 없으므로, 그냥 엔터눌러서 돌아가는 걸 보면 그걸로 해피하다. 근데, 사실 이게 생각만큼 쉽지가 않다.

설명서(Documentation)가 아주 잘 된 것들은 해당 웹사이트의 Doc 항목을 들어가면, 아주 쓸만한 예제가 처음부터 나온다. 유명한 라이브러리나 언어들은 거의 대부분 이런 훌륭한 설명서들을 갖추고 있으므로, 적당히 tutorial 을 따라가면 거기 샘플이 아주 친절하게 기다리고 있을 것이다.

하지만 github 에서 어쩌다 마주친 라이브러리 같은 것들은 그런 정성을 들여놓은게 없는 것도 많다. 그럼 무턱대고 구글창에 OOO example, OOO sample 같은 키워드를 던져넣는다. 그래서 위에 나오는 한 두개를 들여다보고 될법하다 싶은 것을 복사해서 첫 삽을 뜨는거다. 그게 시작이다. (네이버가 아니고 구글이다. 한글이 아니라 영어다.)

이 경우는 위에서 서너개 해 봐도 적당한 게 안 나왔던 걸로 기억 ㅠ_ㅠ

50줄 넘어가는 코드가 '최소한'일 가능성은 별로 없다.

사실 이 부분이 굉장한 경험을 필요로 하는데, 초보에게는 최소한의 샘플이 뭔지를 알아내는 것부터가 어렵다. 눈으로 대충봐서 이게 뭔지 이해가 안되는데, 이게 내가 이해하고 돌리는데 10분이 걸릴지, 1시간이 걸릴지 무슨 수로 아나.

보통 내 경우는 50줄 정도가 마지노선이다. 50줄 넘어가는 코드가 '최소한'일 가능성은 별로 없다. (사실 20줄도 안 넘어가는 걸 선호한다.) 이럴 땐, 그냥 가볍게 포기하고 더 짧고 간단한 예제를 찾는게 좋다. 처음 발견한 것만 붙잡고 있다가 시간 버리는 것보다 그냥 빨리 포기하고 다른 거 찾는게 나을 때가 많다. 샘플 찾기를 하는 이 시점에서는 빠른 포기가 좋다. 괜히 엄한 코드 붙잡고 있다가 더 쉬운 샘플 놔두고 시간만 버리기 일쑤다.

둘. 돌아가는 환경 만들기

우리는 전공자가 아니다. 따라서, 으레 프로그램 하는 사람들이 상식적으로 알고 있는 것들 - 웹서버를 돌리는 방법, 크롬에서 inspector 띄우는 방법, node 패키지 설치법 등등 - 을 알고 있을리가 만무하다. 따라서, 아무리 쉽다고 올라온 스무줄 남짓의 코드도, 도대체 어떻게 해야 실제로 돌아가게 만들 수 있는지 감이 안 온다.

그러니, 뭘 찾았다고 기뻐하는 것도 잠깐. 이게 돌아가는 환경을 만들어 놓는게 더 막막하다.

이 시점에서는 우리가 할 수 있는 최선은 선량한 직업 프로그래머를 붙들고 요청하는 것이다.

선량한 개발자를 붙들고 요청하라

1) 백짓장을 들고와서 모르겠으니 알려내라는 무례한 부탁도 아니고

2) 환경 셋업은 여러번 생길 일이 아니다.

또다시 이런 귀찮은 부탁을 할 것 같은 인상을 풍기지 않는 한, 그들은 흔쾌히 이 정도의 요청을 들어줄 것이다. 우리는 이게 돌아가는 걸 보기까지 불필요한 데 시간을 써선 안 된다.

셋. 돌아가는 것을 보고 기뻐하기

매우 중요한 지점이다. 작동하는 것을 보고 한껏 기뻐해야한다.

내가 컴퓨터에 글자를 몇 자 넣었는데, 뭔가가 작동한다. 이 사실에 고무되어야 하고, 스스로를 대견해 해야한다. 여기서 기쁨의 동력을 얻지 못하면 우리는 다음 단계로 나갈 수 없다. 열 번이고 스무번이고, 해당 코드를 Run 해보라. 그리고 그게 돌아간다는 사실 자체에 기뻐하라. 충분히 만끽하지 못하면 안 된다. 나는 대학에서 정규 프로그래밍 과정을 거치지도 않았다. 그럼에도 돌아간다. 나는 디자이너다. 그럼에도 돌아간다. 와, 신난다. 이게 된다! 이게 막 즐거워야 한다.

넷. 돌아가지 않는다 ㅠ_ㅠ

물론, 아주 운이 좋았다면 위 문단에서 벌써 코드가 제대로 작동하고 있겠지만, 그게 안 되는 경우도 많다.

자, 이제 주의사항을 알려주겠다.

방금 환경 셋업을 부탁한 그 개발자에게 '결코', '절대로' 돌아가선 안 된다. 적어도 지금 시점에선 말이다.

"방금 해준 그거, 돌려보니까 안 돼요"

이런 무성의한 말 듣자고, 그 양반이 시간쓰고 애 써준거 아니다. 이럴 때 쓰라고 구글이 있고, stackoverflow 가 있는 것이다.

아까 그 선량한 개발자.jpg

'not working' 이라는 만병통치약

우리는 구글에게 'not working' 이라는 마법의 구문을 던져줄 수 있다. 뭐든 된다. OOO 'not working' 같은 문구를 던져넣으면 십중 팔구는 방금 당신이 겪은 문제를 똑같이 겪었던 수많은 사람들이 서로 치고받고 하면서 답을 내놨다. 방금 예제에서 혹시 에러 코드가 나왔는가? 만세를 외쳐라. 그 에러 코드를 따옴표로 감싸고 (eg. "the error message") 구글링을 하면 거의 대부분 해법을 찾게 된다.

다섯. 살짝 주무르기

이제부터가 본격적인 자신감 배양의 시간이다. 아주 기초적인 예제를 습득했으므로, 우리는 아주 가벼운 Tweak 을 해볼 수 있다. 'Hello, world' 를 'Hi, world' 같은 것으로 바꾸는 것 말이다. 혹시 코드에 상수들이 이것 저것 박혀있으면 그걸 이래저래 바꿔서 돌려본다. 나는 1단위로 써진 상수가 있으면 0.1 단위나 10단위로 열배씩 바꿔보면서 뭐가 달라지나 확인해보기도 하고, 컬러값을 바꿔보거나, 길이를 좀 바꾸거나, 각도를 틀어보거나 하면서 이 언어가 허용하는 범위가 무엇인지를 확인해본다.

이 때 필요한 게 해당 언어의 설명서(Documentation) 부분이다. 설명서에 가보면, 내가 바꿀 수 있는 Property 가 무엇이 있는지 자세히 나와있다. (Scale, color, width, height, opacity 등등). 그런 속성들을 하나하나 바꿔보는 것이다.

three.js 가 어려운 분들은 aframe.io 쓰세요 (영업)

그리고 다시 매우 기뻐해야 한다.

내가 마치 신이 된 듯 희열에 불타올라야 한다. 붉은 색 개체를 파란 색 개체로 바꿀 수도 있고, 손톱만한 것을 갑자기 집채만한 것으로도 바꿔볼 수 있고, 내가 말하는대로 휙휙 바뀌는 걸 확인하는 재미에 아주 큰 기쁨을 만끽해야 한다. 여기서 두 번째 동력을 얻지 못하면 우리는 다음 단계로 갈 수가 없다. 아직까지는 Logic 과 관련된 건 하나도 하지 않았으므로, 거기서 쓸 에너지를 비축해야한다. 모든 속성을 건드려보고, 더 해볼게 없어서 좀 재미가 덜할 때까지. 즐거움을 멈춰서는 안 된다.

여섯. Random 의 미학

속성들을 건드려봤다면, 나는 Logic으로 가기 전에 꼭 한번 거치는 게 있다. 바로 랜덤(Random)이다.

이를테면,

- 100개의 네모를 주어진 영역에 랜덤하게 뿌려보기

- 그 네모를 또 랜덤한 색으로 칠해보기

- 그 네모를 또 랜덤하게 돌려(rotate)보기

랜덤은 아주 짧은 시간에 큰 기쁨을 주는데, 1) 사람의 손으로 할 수 없는 엄청난 양(Volume)의 결과물이 나오고 2) 그 엄청난 양이 무작위로 펼쳐진 데서 벌어지는 미학적 즐거움이 있다. 이 즐거움을 즐기는 것이 이 부분의 핵심이다. 이 레벨은 좀 덜 지루한 편이라, 멍하니 화면만 쳐다보면서 한 시간도 있을 수 있다. (나는 보통 이 지점에서 퇴근하고 싶어진다.)