배우는 법 배우기: 웹사이트를 만들며

3. 훌륭한 예술가는 훔친다

2단계에서 자신의 한계와 정면으로 부딪혔다면 3단계는 그 한계를 넘어서기 위해 의식적인 탐구를 시작하는 시기다. 이제 우리는 단순한 모방가나 좌절하는 초보자를 넘어 숨겨진 원리를 파헤치려는 탐정의 눈을 지니게 된다. 제약을 극복의 대상이 아닌 창작의 도구로 인식하기 시작하며 형식의 노예 상태에서 벗어나는 결정적 전환점이다. 다른 사람의 훌륭한 결과물을 분해하고 그 작동 원리를 파악해 마침내 자신의 ’내용’에 가장 적합한 ’형식’을 스스로 구축하기 시작한다. 이는 ’어떻게’의 단계를 넘어 ’왜 그렇게 만들어졌는가’를 질문하며 본질에 접근하는 과정이다.

세련된 제약

훌륭한 디자인과 코드를 해체해보면 그것이 무한한 자유가 아닌 ’세련된 제약’의 결과물임을 깨닫게 된다. 14줄의 길이와 정해진 운율이라는 엄격한 제약이 영시의 한 형식인 ‘소네트’(Sonnet)를 더 밀도 있고 아름답게 만들듯 작품의 완성도는 종종 제약을 통해 높아진다. 음악에서 12마디 블루스라는 단순한 코드 진행(제약)은 수십 년 동안 수많은 명곡을 탄생시키는 창의성의 모판이 됐다. 덴마크의 영화 운동 ‘도그마 95’(Dogme 95)은 자연광과 핸드헬드 촬영 같은 엄격한 규칙(제약)을 통해 날것 그대로의 현실감을 획득했다.

웹 디자인의 ‘모바일 우선’(Mobile-First) 접근법 또한 마찬가지다. 가장 작은 화면이라는 극심한 제약 속에서 디자인을 시작함으로써 우리는 어쩔 수 없이 가장 핵심적인 내용과 기능에 집중하게 된다. 군더더기를 덜어내고 본질만 남기는 과정에서 오히려 더 명료하고 사용자 친화적인 구조가 탄생한다. 이 단계에서 우리는 제약이 창의성을 억압하는 것이 아니라 오히려 우리의 노력을 분산시키지 않고 문제의 핵심에 집중하게 만드는 강력한 렌즈이자 완성도를 끌어올리는 적극적 도구임을 배우게 된다.

형태는 내용을 따른다

미국의 건축가 루이스 설리번(Louis Sullivan)의 “형태는 기능을 따른다.”(Form follows function.)라는 말은 근대 건축의 핵심 원칙이다. 그는 건물의 외관(형태)이 그 건물의 목적(기능)에서 자연스럽게 비롯해야 한다고 주장했다. 이 원칙은 웹사이트를 만드는 과정에서 “형식은 내용을 따른다.”(Form follows content.)로 번역될 수 있다. 이제 배움의 목적은 그저 형식을 익히는 것을 넘어 내용을 가장 효과적으로 전달하기 위해 형식을 의식적으로 선택하고 재구성하는 것으로 탈바꿈한다.

자신의 일상을 공유하는 웹사이트에는 게시물(내용)의 가독성(기능)을 위해 명료한 타이포그래피와 넉넉한 여백(형식)이 필요하다. 온라인 쇼핑몰의 제품 상세 페이지(내용)는 소비자의 구매 욕구를 자극(기능)하기 위해 크고 선명한 이미지와 눈에 띄는 ‘장바구니 담기’ 버튼(형식)이 필요하다. 이처럼 형식은 독립적으로 존재하는 아름다움이라기보다 내용의 목적을 달성하기 위한 전략적 도구가 된다. 이 단계에서 우리는 다른 웹사이트들을 살펴보며 “왜 이 웹사이트(형식)는 이 정보(내용)를 이렇게 전달할까?” 질문하고, 그 구조와 표현 방식의 원리를 훔친다. 파블로 피카소(Pablo Picasso)가 말했듯 “좋은 예술가는 베끼고, 위대한 예술가는 훔친다.” 베끼는 건 겉모습을 따라 하는 것이지만, 훔치는 건 그 안에 담긴 아이디어와 원리를 파악해 완전히 자기 것으로 만드는 것이다.

디버깅, 시스템과의 대화

디버깅은 단순히 오류를 잡는 행위가 아니다. 이는 시스템과의 대화이자 이 대화를 통해 우리는 시스템의 가장 깊은 곳까지 이해하게 된다. 처음에는 컴퓨터가 출력하는 Uncaught TypeError, SyntaxError 같은 오류 메시지가 외계인이 구사하는 언어처럼 느껴진다. 하지만 실패를 거듭하며 메시지를 집요하게 파고들다 보면 점차 그것이 무의미한 비난이 아니라 자신이 쓴 글, 즉 코드에 논리적 모순이 발생했다고 알려주는 지극히 정직하고 구체적인 피드백임을 깨닫게 된다.

이 과정은 사설 탐정의 작업과 같다. 오류라는 사건 현장에서 출발해 용의선상에 오른 코드를 하나씩 심문하고, 알리바이를 확인하며 범인을 좁혀나간다. 이따금 ‘고무 오리 디버깅’(Rubber Duck Debugging) 같은 기법이 도움이 되기도 한다. 컴퓨터 옆에 놓인 고무 오리를 향해 자신의 코드를 한 줄 한 줄 설명하다 보면 스스로 논리의 허점을 발견하게 된다는 이 방법은 디버깅의 본질이 결국 ’자신의 사고 과정을 객관적으로 설명하고 검증하는 행위’임을 드러낸다. 이 고통스러운 대화의 과정을 통해 우리는 시스템이 어떻게 생각하고 작동하는지에 대한 깊고 본질적인 이해, 즉 ’기계와 공감하는 능력’을 얻게 된다.


이 단계에서 우리는 배움의 본질이 ’소비’가 아닌 ’해부’에 있음을 깨닫는다. 무언가를 온전히 이해한다는 건 그것을 감상하는 것을 넘어 작동 원리를 파악하기 위해 분해하고 재조립해보는 행위에 있다. 자동차 정비사가 엔진을, 영화감독이 한 장면을, 요리사가 소스의 레시피를 해부하듯 우리는 세상의 모든 결과물 이면에 숨겨진 구조와 원리를 파악하는 눈을 지니게 된다. 이 분석적인 시선은 이따금 세계를 순수하게 즐기지 못하게 하는 저주처럼 느껴지기도 하지만, 세계의 작동 방식을 이해하고 개선할 수 있는 ’생산자의 힘’을 부여한다. 그리고 이것이야말로 지식을 내재화하는 유일한 길이다.