brunch

모두가 코딩을 배워야 할까

코딩 1도 모르는 문과생의 PROTOPIE 경험기

by 틸킴


나는 N세대다. N포세대의 N자가 훨씬 익숙하지만, N세대의 N자는 NET의 줄임말이다. 나의 유년시절은 닷컴 전성기에 뿌리내렸다. 야후가 얼마를 벌었더라, 인터넷 주소가 몇천만 원에 팔렸더라, 잘했어! 라이코스가 뉴스를 점령하던 시대였다. 우리 초등학교에서도 방과 후 수업으로 HTML을 가르쳤다. 글자 색을 바꾼다든가, 페이지에 그림을 불러온다든가 하는 기초적인 것이었지만.


N세대들은 HTML을 모르면 신세 망치는 것 같은 분위기에서 자랐다. 홈페이지만 잘 만들면 몇백억 부자가 될 수 있다고들 믿던 시절이었다. 그로부터 십오 년이 지난 지금, 밀레니얼보다 2020 원키디가 가까운 지금, 내 HTML 지식은 나아진 바 없지만 다행히 신세를 조지진 않았다. 라이코스가 망하고 야후가 엎어지는 동안, 나는 각종 배달/쇼핑앱을 섭렵해 잘 살아가고 있다. 20대 갑부가 된 것도 물론 아니지만.

이제 누구도 미래를 위해 홈페이지를 만들어야 한단 말은 하지 않는다. HTML은 이제 원탑의 자리를 코딩에게 내주었다. 미국에서는 코딩이 초등학교 필수교육이 되었다, 북유럽에서도 코딩을 제2외국어로 가르친다 - 이제 뉴스는 코딩을 알아야 미래의 부를 거머쥘 수 있다고 전한다. 더 늦기 전에 AI 시대의 재취업을 대비하라! 직장인 코딩 수업도 인기다. 이번에도 코딩 공부의 필요성은 협박 내지 경고에 가깝다. 스마트폰 없이 사는 것이 예능 프로그램의 벌칙이 된 지금, 우리를 지배하는 언어는 코드이기 때문이다. 코드를 알아야 새로운 시대에도 계속해서 돈을 벌 수 있고 나의 몸값은 올라갈 것이다. 우리는 디지털 시대의 사고를 익혀, 디지털 시대의 생존을 보장해야만 한다.


하지만 과연 그럴까? 모두가 코딩을 배워야 할까? 정말?


Im Anfang war das Wort.
태초에 말씀이 있었다.

성경은 천지창조를 '말씀'으로 설명한다. 빛이 있으라 하자, 빛이 생겼다. 그것이 세상의 시작이었다. 디지털 세계는 정확하게 이와 같은 원리로 창조된다. 메모장에 <title> 빛 </title>이라고 치면 제목 표시줄에 '빛'이 출력된다. 코드는 언고, 모든 것을 만든다. 그러므로 코딩은 문법이며 코딩의 세계는 논리학이 지배한다. 그런데, 우리는 디지털 세계를 이해하기 위해 코딩을 배우면서도 그 방법은 여전히 문서 시대를 벗어나지 못한다.

대부분의 초급 코딩 책들은 학습 초반에 문장 입력하기, 도형 만들기, 도형 움직이기, 색깔 바꾸기 등을 따라 하게 해본다. 메모장에 입력한 수식 몇 줄이 그래픽으로 구현되는 것을 보는 건 물론 재밌다. 그런데 따라 하다 보면 뭔가 길을 잃었다는 생각이 든다. 분명히 디지털스러운 걸 만들기 위해 시작한 일인데, 이건 크레파스만 쓰지 않았을 뿐 스케치북에 혼자 그림을 그려보는 것과 무엇이 다른 걸까. 그래서 이 도형으로, 이 선으로 내가 뭘 할 수 있지?

괴테는 파우스트에서 '태초에 말씀이 있었다'는 말에 이런 의문을 제기했다.

Im Anfang war die Tat.
태초에 행동이 있었다.

세상의 시작엔 말이 아니라 행동이 있었다는 것이다. 나는 이 변화야말로 디지털 시대에 대한 강력한 비유 같다. 흔히들 어린아이에게 너무 일찍 스마트 기기를 주지 말라고 한다. 아이가 산만해질 것을 우려해서다. 왜 스마트 폰을 보는 아이들은 산만해질까? 디지털 기기의 즉각성 때문이다. 책을 읽는다고 눈앞에 자동차가 생기진 않는다. 그런데 디지털 기기는 내가 '무엇을' '자극하면' 반드시 '반응'한다. 링크를 누르면 연결되고, 플레이 버튼을 누르면 시작된다. 책은 내가 상상하지 않으면 그 어떤 자극이 와도 아무것도 볼 수 없지만 디지털 기기는 그렇지 않다. 이전의 시대와 디지털 시대를 가르는 가장 큰 특징은 0과 1이 아니라 액션에 있다. 프로그래머들이 수없이 연산하는 것 또한 인풋 동작과 반응 동작, 즉 인터랙션의 정교함이다.


'무엇을' '어떻게 자극하면' '어떤 결과가 나온다'.


메모장에 <html> <head> <title> 안녕하세요 </title> </head>를 써보는 동안 우리는 정작 중요한 '반응'을 까먹게 된다. 없는 시간을 겨우 쪼개 배우는 코딩 공부는 print("Hello World")에 그치고 만다. 혼자 읽고 써보는 코딩 공부는 문서 시대의 사고방식과 전혀 다르지 않다. 프로그래밍 전문가가 될 거라면 코딩을 한줄한줄 배워나가는 게 옳다. 하지만 본업이 있는 직장인들이 굳이 코딩을 배울 때에는 접근이 달라야 한다. 배워야 할 것은 코딩이 아니다. 내가 이미 알고 있는 지식을 어떻게 디지털 시대에 맞게 바꿀 것인가에 대한 힌트다. '무엇을' '어떻게 자극하면' '어떤 결과가 나온다'는 디지털의 행동원칙이 지닌 확장성과 가능성에 대해서다. 코딩을 배워 몸값을 올린다고 할 때의 몸값은 코딩에 있는 게 아니라 이러한 생각의 변화에 있다.



우리는 코드 없이도 쉽게 이야기할 수 있다 - PROTOPIE



'무엇을' '어떻게 자극하면' '어떤 결과가 나온다'는 세 단어로 줄일 수 있다.

Object-Trigger-Response.

출처: 프로토파이 홈페이지


디지털의 핵심은 인터랙션이고, 그 인터랙션의 핵심은 결국 이 세 단어다. 이러한 원리로 만든 프로그램이 있다. 그리고 나는 이 툴이야말로 코딩을 배우고 싶은 직장인들이 코드보다 먼저 알아야 할 것들을 잘 알려준다고 생각한다.


바로 프로토파이 PROTOPIE다.


프로토파이는 디자이너들이 UX 환경을 만들 때 프로토타입을 쉽게 만들 수 있도록 도와주는 툴이다. 이 문장에서 이미 나와 같은 코(딩)알못, 개(발)알못들의 동공이 파르르 떨렸으리라 짐작된다.


웹이나 앱에는 수많은 단추들이 있다. 이 단추들이 오브젝트다. 단추를 누르면 어딘가로 이동도 되고, 그림이 나타나기도 하고, 화면이 어두워지기도 한다. 여기서 단추를 '누르는' 행동이 트리거다. 그에 대한 후속 동작이 '리스폰스'다. 이 수많은 단추들의 움직임과 반응들도 아름답게 만들 수 있다. 애플의 UX 플로우는 대단히 독창적이고 직관적이다. 이런 아름다움을 만들어내는 것은 디자이너의 몫이다. 그런데 디자이너가 자신이 생각한 UX 플로우를 말로 설명하는 것은 매우 진땀 나는 일이다.


상상이 잘 안 된다면 지금 카카오톡을 열어보자. 친구 목록에서 친구추가 단축 아이콘을 눌러보시라. 노란 아이콘을 누르는 순간 몇 가지 반응이 있을 것이다. 이제 그 아이콘을 처음 만든 카카오톡 디자이너를 떠올려보자. 어떤 모양으로 아이콘을 만들지, 화면 어디에 배치할지, 그것을 누르면 어떻게 반응할지, 띠용~ 할지, 쉭~ 하고 돌아갈지 나름대로 디자인을 마쳤다. 그 동작을 상사에게 스케치와 말로만 보고하는 순간을 떠올려보자. 대사는 아마 이럴 것이다.


"이 버튼을 누르면요, 이 플러스 표시가 쉭 돌면서, 그 위로 단축 아이콘들이 띠용~하고 뜨는 거예요"


'쉭'은 얼마나 '쉭'인지, 왜 '휘릭'이 아니고 '쉭'인지, 띠용~은 얼마나 띠용~하게 나타날 건지, 눈으로 보지 않으면 모든 것이 모호하다. 각자가 상상하는 '띠용~'은 모두 다를 것이다. '띠용~'과 '띠옹~'에 대해 협의가 되지 않은 상태에서 작업을 진행하면 결과물은 쓰레기가 된다. 그것은 곧 시간과 예산의 낭비다. 실제로 디지털 플랫폼 제작 과정에서는 이 과정에서 소모되는 비용이 무지막지하다고 한다. 그렇다면 디자이너들이 직접 자기가 만든 UX 플로우를 '눈으로' 보여주고 협의하면 되지 않을까? 그래서 STUDIO XID는 코딩을 잘 모르는 디자이너도 자신이 생각한 인터랙션 환경을 '프로토타입'으로 만들어서 보여줄 수 있는 툴을 만들었다.


https://www.youtube.com/watch?v=_9_f41Apnow

STUDIO XID가 만든 프로토파이 소개 영상. 내가 구구절절 설명한 내용을 재미있는 영상으로 만들었다.


프로토파이는 매우 쉽다. 내가 넣고 싶은 대상을 불러와서, 어떤 트리거를 줄지 정하고, 그에 따라 어떤 반응을 만들지 순서대로 정하면 된다. 코드로는 복잡한 수식들이 필요했겠지만 프로토파이에는 그런 게 필요 없다. 그래서 이름도 파이다. 파이 먹는 것만큼이나 쉽기 때문에.


코드가 없어도 프로토파이의 확장성은 엄청나다. 일정 데시벨 이상의 소리가 들리면(Trigger) 화면 속의 사각형이(Object) 커지면서 빙글빙글 돌게 만들 수(Response)도 있고, 세 대의 핸드폰을 각각 빨강, 초록, 파랑으로 설정하고 다른 패드와 연결해 빛의 원리를 구현해볼 수도 있다. 사용하기에 따라서 층간 소음 방지앱의 단초나 어린이용 교육 보조재의 실마리가 될 수도 있다.


프로토파이는 분명 디자이너들을 위한 탁월한 프로토타이핑툴이다. 그런데 나는 이 툴에서 오히려 나와 같은 문돌/문순이들의 희망을 발견했다. 쥐뿔도 모르는데 앱개발에 관심 있는 사람들에겐 더없이 좋은 교육툴이 되기 때문이다. 이유는 두 가지다.


1. 코드를 몰라도 된다는 것

2. Object-Trigger-Response로 생각하게 된다는 것


우리가 여태껏 무언가를 배울 때 '반응'이 중요했던 적은 별로 없다. 선생이 자극을 주면 학생들은 그것을 익히면 됐다. 학습은 배우고 익히는 것이었다, 반응하는 것이 아니라. 질문엔 반응하는 법보다 피하는 법을 먼저 배웠고, 과제들은 주로 써서 제출하는 것이었다. 잘 읽고 잘 쓰면 똑똑하다고 했다. 우리는 문서 시대의 인간들로 길러졌다. 쓰는 작업엔 독자의 반응이 크게 중요하지 않다. 책을 완성시키는 것은 글쓴이고 독자는 책을 사거나, 읽거나, 덮거나 셋 중 하나를 할 수 있다. 작가에게 할 수 있는 반응이란 독후감 정도다. 책은 이미 스스로 완결되어 있고, 독자가 책을 변화시키지는 못한다. 책뿐만 아니라 우리가 접해온 대부분의 콘텐츠와 매체가 그랬다. TV 드라마든 웹툰이든. 이런 일방향적 콘텐츠 제작 방식은 구석기 이후 크게 변한 것이 없다. 벽화는 구석기시대에도 그렸으니까.


그러나 앱이나 웹은 다르다. 유저의 행동이 없으면 완성되지 못한다. 유저가 반응하지 않으면 앱이 망하고, 개발자가 의도하지 않았던 동선으로 유저들이 움직이면서 새로운 의미를 갖게 될 수도 있다. 유저들의 반응에 따라 얼마든지 달라지고 발전한다. 앱개발은 유저들이 반응할 수 있는 일종의 판을 깔아주는 것이다. 구글에서는 서비스 기획 단계에 역할놀이를 많이 해본다고 한다. 원격 의료시스템을 개발하고 있다면 의사와 간호사, 환자, 약사 등으로 역할을 나눈다. 그리고 의사소통 단계마다 어떤 상황들이 있을지, 역할별로 어떤 행동을 하는지 시뮬레이션을 해본다. 디지털의 핵심은, 반응이니까. 이 반응들을 어떻게 배치하는가도 크리에이티브가 되니까.


프로토파이는 매 작업단계마다 트리거와 반응을 고려하게 한다. 트리거와 반응의 연쇄작용을 만들게 한다. 프로토파이는 홈페이지에 애플 액티비티나 바이두 뮤직, 구글 맵과 같은 익숙한 앱들의 UX 플로우를 사용자들이 따라해볼 수 있도록 데모 파일을 올려놨다. 이 단계들을 따라하다 보면 '오브젝트', '트리거', '리스폰스'의 연쇄반응이 뇌 속에 새겨진다. 이 오브젝트는 드래그하는 게 좋을까, 툭툭 건드리는 게 좋을까. 두 손가락을 쓰게 할까, 한 손가락을 쓰게 할까. 나의 '행동'과 '반응'을 생각해보게 된 것이다. 이건 문서 학습 시절엔 내가 전혀 고려하지 않았던 부분이다.


비전공자인 내가 코딩을 아무리 배운들 그 수준엔 한계가 있다. 전공생들이 몇 년에 걸쳐 배운 것을 쉽게 따라잡을 순 없으니까. 그러나 술을 좋아하는 내가 날씨에 따라 딱 좋은 술을 알려주는 앱을 떠올리는 건 쉽다. 각각의 스마트폰을 잔으로 인식해서 색다른 술 게임을 만들어볼 수도 있다. 중요한 건 코딩이 아니었다. 디바이스와 디바이스가 만나, 유저와 유저가 만나 어떤 재미있는 일을 할 수 있을까였다. 그러므로 내가 지금 신경 써야 할 것은 반짝 타올랐다 사그라들 '코딩 열풍'이 아니라 원래 내가 좋아하는 일이었다.


말을 전혀 모르는 나라에서 며칠 동안 물 한 방울 마시지 못했다고 생각해보자. 지나가던 사람에게 물을 달라고 부탁하기 위해 그 나라의 말을 배워야 할까? 그럴 필요는 없다. 제가 며칠 동안 아무것도 마시지 못해, 목이 몹시 타는데 물 좀 마실 수 있을까요?라고 하면 폼은 더 나겠지만 그냥 물을 마시는 시늉을 하고 헥헥 울상 한번 지어도 얻어마실 수 있다. 중요한 건 '물을 마시는 것'이다. 디지털 시대의 물은 '인터랙션'이고. 내가 만들기 가장 쉬운 인터랙션은 원래 내가 잘 아는 것이다.


그러므로 우리는 코드를 몰라도 된다. 세상의 문돌이, 문순이들아. 우리가 코딩 앞에 쩔쩔맬 필요가 없다. 디지털 시대를 쫓아가고 싶다면 프로토파이를 한번 깔아보자. 홈페이지의 데모들을 따라해보자. 갖고 놀아보자. 네모를 만들고, 네모를 굴리고, 방귀 소리를 트리거로, 높이를 트리거로, 할 수 있는 모든 걸 해보자. 우리가 할 일은 그 과정에서 놀라는 일이다. 디지털 '행동'이 얼마나 재미있고 다양한지, 그 확장성이 어디까지 벌어지는지.


코딩 책을 들춰볼 시간에 잘하는 것과 좋아하는 것에 더 푹 빠져보자. 그러면서 상상하자. 내가 이미 아는 것 중에 무엇을 트리거로 만들지, 나와 네가 연결되면 더 어떤 재밌는 일이 일어날지. 아이들이 화면 속의 뽀로로를 갖고 놀듯, 아무 데나 몬스터볼을 던져보듯.


코딩은 프로그래머들이 해결할 것이다.







* 프로토파이 공식 사이트 https://www.protopie.io

공식 홈페이지에서는 현재 체험판과 다양한 데모파일을 다운받아 프로토파이를 사용해볼 수 있다.

문송하기 그지없는 나도 몇 가지 데모를 따라 하면서 '할 수 있다!'는 자신감을 얻었다.

거기에, 이렇게 저렇게 활용해볼 수 있겠다는 자극은 덤이다. 흡사 개안수술의 느낌.


* 프로토파이 튜토리얼들

https://www.youtube.com/watch?v=4BmSKkLb-5c&list=PL7N038SVDkBxiSnmcg8QCJt8joKhYKSD5

*이 글은 코딩과 프로토타이핑툴에 대한 지식이 전혀 없는 사람이 작성하였으니 사실과 다른 부분들이 있다면 지적하거나 넘어가 주세요.


keyword
매거진의 이전글잠이 오지 않는다