[부록3.0] 코딩, 어떻게 시작할까?
코딩이 하고 싶은 디자이너를 위하여
어제 Fuse Meetup에 처음으로 패널로 참여해서 '디자이너가 코딩을 배워야 할까?', '어디까지 배워야 할까?', '어떻게 시작했을까?' 등의 이야기를 나누는 자리를 가졌습니다. 여전히 디자이너가 코딩을 해야 하는지 고민하고 코딩을 하고 싶은데 시작을 어떻게 해야 할지 어려워하는 사람이 있는 것 같아 코딩을 하고 싶은, 코딩을 시작하고자 하는 디자이너를 위해 없는 실력이지만 제가 코딩과 framer를 배운 과정과 소소한 팁을 조금 더 상세히 정리해보려 합니다.
1. 코딩을 하고 싶은 목적 바로 세우기
배움에서 가장 중요한 것은 바로 '목적'입니다. 목적이 없는 시작은 결국 포기로 가는 지름길이나 다름없으니까요. 이 목적은 구체적이면 구체적일수록 좋습니다.
제가 생각하는 가장 좋은 목적 중 하나는 '개인작업'입니다. 디자이너가 코딩을 배우는 목적 중 '개발자와의 커뮤니케이션을 위해서'가 많은데 개발자가 사용하는 언어를 알면 커뮤니케이션에 도움이 되는 것은 사실이지만, 이는 코딩을 못해도 레퍼런스나 그림을 통한 대화 등 다양한 방법으로 대체 가능합니다. 오히려 시간과의 싸움인 회사 업무에서는 오히려 못하는 코딩으로 시간을 잡아먹는 것보다 이러한 방법들이 더 효율적일 수 있습니다. 또 커뮤니케이션에 도움이 된다는 것은 눈에 보이지 않는 막연한 목표이기에 이를 위해 얼마만큼 공부해야 하는지 계획을 세우기가 어렵습니다. 하지만 개인작업을 목표로 삼게 되면 내가 원하는 바를 명확히 가시화할 수 있고 이를 구현하기 위해서 어떤 것을 얼마만큼 배워야 하는지 계획을 세우는 게 가능해집니다.
2. 모작
미대 입시를 준비해본 사람이라면 익숙할 '모작'이 코딩에서도 좋은 방법이 됩니다. framer를 처음 배울 때 제가 가장 먼저 했던 것은 '모작'이었습니다. framer의 다양한 레퍼런스들 중에서 내가 만들고 싶은 것과 가장 흡사한 것을 찾아 코드를 열람한 후 ctrl+c/v를 하는 것이 아닌 옆에 두고 똑같이 타이핑을 하여 작성했습니다.
framer와 같은 프로토타입 툴은 html, css와 달리 작성하는 코드에 따라 바로 변화되는 모습을 preview를 통해 확인이 가능합니다. 내가 어떤 코드를 쓰느냐에 따라 변화하는 모습을 바로 확인하면서 이 코드가 이런 코드구나를 즉각 습득할 수 있는 좋은 방법 중 하나입니다.
3. 시작은 쉽고 간단하게, 내가 좋아하는 것으로-
제가 생각할 때 많은 디자이너들이 코딩을 배우려고 시도했다가 중도 포기하는 이유는 두 가지 정도로 압축할 수 있습니다. 하나는 코딩을 통해 뭘 하고 싶은지 제대로 된 목적이 없기 때문이고 나머지 하나는 현실에 비해 이상이 높기 때문이죠. 현실에 비해 이상이 높다는 것은 아직 스스로 목도 못 가누는 아기가 빨리 두 발로 달리고 싶어 하는 상황이라고 할 수 있을 것 같습니다.
무언가를 배운다는 것은 아기의 성장과정과 비슷한데 코딩 역시도 하나의 사이트나 앱을 만들기 위해서는 기본적으로 알아야 할 것들이 있고 보통은 그런 걸 '기초'라고 합니다. 그런데 이런 기초과정을 책으로 익히기에는 아주 x100000 재미가 없고 이 기초적인 것을 어떻게 응용을 해야 하는가에서 막히게 됩니다.
저 역시도 책과 모작을 통해서 아주 기초적인 것은 알게 됐지만 '그래서 이것들을 어떻게 써먹어야 내가 만들고 싶은 형태를 그릴 수 있는 건데?'에서 막히게 되더라고요.
수많은 중도포기 끝에 내린 결론은 '1. 내가 흥미가 있고 2. 쉬워야 하며 3. 하나를 만들어 다양하게 응용이 가능한 방법'을 찾는 것이었습니다. 그렇게 시작한 것이 framer로 햄버거 버튼 만들기였습니다. framer 초보 탈출기의 2.1 Hamburger 버튼 만들기 - Layout 편에서도 서술했듯이 햄버거 버튼은 어느 UI에서건 많이 쓰이지만, 3선으로 구성하면 되니까 만들기는 쉽죠. 또, 작은 움직임을 좋아하는 저에게 햄버거 버튼의 수많은 변형들은 다양하게 응용이 가능한 최적의 요소였습니다.
먼저 내가 만들고 싶은 햄버거 버튼의 gif 예시를 찾은 다음 그것과 동일하게 만들기 위해 내가 알고 있는 기초적인 지식을 응용하는 방법을 터득했습니다.
4. 모작의 확장
3의 방법을 통해 어느 정도 간단한 요소에 대한 응용이 자유롭게 가능하게 됐을 때 이전에 모작했던 레퍼런스를 다시 한번 모작했습니다. 단, 이때는 코드를 보고 베끼는 것이 아닌 완성 형태를 보면서 스스로 코드를 생각해서 짜야합니다. 이미 한번 코드를 보며 모작했던 경험이 있고 막힐 때는 참고할 코드가 존재하기 때문에 부담스럽지 않게 접근할 수 있습니다. 하지만 자신이 생각할 수 있는 갖은 방법을 동원해 최대한 원본 코드를 보지 않고 스스로 짜는 연습을 하는 것이 중요합니다.
5. 자신만의 언어로 정리하기
코딩은 하나의 원리를 이해하고 이를 내가 원하는 방향으로 응용하는 것이 중요한데 응용하는 것이 쉽지가 않았습니다. 모르는 것을 다른 사람이 가르쳐 주어도 그 순간에는 이해했다고 생각했지만 다른 프로젝트에서 이를 응용하려고 하면 막히기 일쑤였죠. 이를 위해 나만의 언어로 정리하는 과정이 필요했습니다.
저는 framer 초보 탈출기라는 매거진을 통해 어떻게 만들었는지 상세히 기술하는 것을 방법으로 삼았습니다. 굳이 글을 통할 필요는 없고 그림으로 표현해도 됩니다. 중요한 것은 자신이 이해할 수 있는 방법을 찾는 것입니다.
6. 함께할 사람 찾기 + 스터디 참여하기
이렇게 혼자 공부하다 보면 어느 순간 디자이너 혼자서 하는 독학만으로는 해결이 안 되는 한계점에 도달하게 됩니다. 물론 한계점 없이 독학으로 그것을 돌파하는 우수한 디자이너들이 있습니다만 많은 사람들이 한계점에 도달하고 방법을 찾지 못해 흥미를 잃는 과정을 밟게 됩니다.
이때 필요한 것이 바로 함께하는 사람, 스터디 모임 찾기입니다. '집단지성'이라는 말이 있듯이 어떠한 문제가 생겼을 때 혼자서 해결하는 것보다 많은 사람이 모여 그 방법에 대해 논하다 보면 빨리 해결이 가능하며 다양한 방법을 강구할 수 있습니다. 코딩 공부 역시 혼자보다는 다른 사람과 함께 하는 것이 한계에 부딪혀도 흥미를 잃지 않고 이어갈 수 있는 원동력이 됩니다.
또 모임에는 자신을 기준으로 나보다 못하는 사람, 잘하는 사람이 섞이게 되는데 잘하는 사람에게는 내가 모르는 지식을 습득할 수 있고, 못하는 사람에게는 나의 지식을 설명하다 보면 어렴풋이 알던 것도 확실히 자신의 것으로 만들 수 있습니다.
스터디를 찾는 방법은 다양한 밋업에 참여하거나 관련 페이스북 그룹을 찾아보면 이미 진행 중인 스터디그룹을 찾을 수도 있고 본인이 주도하여 새롭게 생성하는 것도 가능하니 능동적으로 움직여보세요.
이 글을 쓰고 있는 저 역시도 아직까지 코딩은 참 어렵습니다. 여전히 저의 이상은 높은데 코딩 실력은 바닥이라... 하지만 가장 중요한 것은 자신에게 맞는 방법을 찾아내고 목표를 세워 중도 포기하지 않는 것이 아닐까 합니다. 앞으로도 공부하며 좋은 방법이 있다면 이 뒤에 더 추가하도록 하겠습니다. :D
