- 기술
- 후기
- 생각
짧고 개인적인 웹 프론트엔드 성장역사
·4분 읽기
초등학생 때 세이클럽 클럽 게시글에는 HTML을 직접 넣을 수 있었습니다. 지금 보면 보안상 아찔한 기능이지만 그때는 혁명이었습니다. 마우스를 따라다니는 나뭇잎, 배경에 내리는 눈, 흘러나오는 음악. 코드 조각을 긁어다 고치면 정말 그렇게 됐고, 프로그래머가 된 기분이었습니다.
정작 소프트웨어공학과에 와서는 웹을 무시했습니다. C/C++은 고귀해 보였고, <div>와 <table>로 화면을 그리는 일은 개발이 아니라고 생각했습니다. 부끄럽지만 정말 그랬습니다.
데이터베이스 수업 과제 때문에 웹을 처음 만들었습니다. DB는 눈에 보이지 않으니 보여 줄 껍데기가 필요했고, C와 문법이 비슷한 PHP를 골랐습니다.
DB 접속 정보를 파일에 하드코딩했고, 파일명이 곧 URL이라 수십 개를 복붙했습니다. 엉망이었지만 하나는 놀라웠습니다. 반복문으로 HTML을 만들 수 있다는 것. 얼마 뒤 만난 JSP도 언어만 Java로 바뀌었을 뿐 방식은 같았습니다.
HTML 사이사이에 <% } %> 같은 조각을 끼워 넣는 문법이 영 쿨하지 않았습니다. 중괄호 한 글자를 쓰려고 태그를 여닫아야 했으니까요.
더 큰 문제는 동적인 화면이었습니다. 할 일 목록에서 "추가"를 누르면 그 자리에 입력창이 생기게 하고 싶었는데, 제가 아는 방법으로는 서버가 새 페이지를 내려 주는 수밖에 없었습니다.
프로젝트마다 같은 벽에 부딪혔고, 코드는 복사 붙여넣기 지옥이 됐습니다.
그러다 JavaScript와 jQuery를 만났습니다. DOM을 직접 조작하니 못할 게 없었습니다. jQuery는 제가 JavaScript와 DOM을 잘 몰라도 원하는 걸 이루게 해 줬습니다. 불행히도요.
동적으로 붙일 HTML 조각을 문자열로 써야 했습니다. IDE는 문자열 속 코드를 도와주지 않았고, 원본 HTML을 고치면 문자열 쪽도 사람이 기억해서 고쳐야 했습니다. 사람이 모든 변화를 기억해야 하는 구조는 반드시 버그를 만듭니다. JSP 안에서 Java와 JavaScript가 뒤섞이자 제가 뭘 하고 있는지도 헷갈렸습니다. 2014년쯤의 일입니다.
backbone, ember, Knockout, Meteor. 이름 끝에 JS를 단 프레임워크들이 쏟아지던 때, 저는 구글의 AngularJS를 만나고 만세를 불렀습니다. "됐다. 이제 요구하는 건 다 만들 수 있겠다."
코드를 문자열 안에 쓰지 않습니다. 원본 HTML과 동적으로 만들 HTML이 나뉘지 않습니다. 페이지 하나가 하나의 JavaScript 프로그램처럼 움직입니다.
웹은 개발이 아니라던 생각은 이즈음 사라졌습니다. 한순간에 뒤집힌 게 아니라, 불편이 하나씩 풀리는 걸 겪으며 서서히요. 2009년에 한 선배가 실버라이트로 만든 페이지를 보여 주며 "언젠가 문서도 엑셀도 브라우저에서 하게 될 것"이라고 했을 때 저는 콘솔에 printf를 찍고 있었는데, 지금은 정말 그런 시대입니다.
새 기술이라면 제일 먼저 써 보는 게 취미가 됐고, 모든 곳에 AngularJS를 칠하고 싶었습니다.
첫 직장은 캐나다였습니다. 월 100만 PV가 나오는 커뮤니티 포털을 사수 없이 맡았고, 환경은 윈도우 서버에 .NET MVC, MS-SQL이었습니다. 실제 서비스 코드를 읽어 보니 제가 쿨하지 않다고 여겼던 서버 템플릿도 잘 쓰면 충분히 좋았습니다. C#으로 select, where, join을 쓰듯 데이터를 다루는 코드는 아름답기까지 했습니다.
그래서 최신이고 생산성이 좋다는 이유로 AngularJS를 냅다 칠하는 건 잘못이라는 생각이 들었습니다. 서버에서 그릴 것과 브라우저에서 그릴 것을 나누고, 필요한 곳에만 쓰기로 했습니다. 좋은 기술도 기존 것과 억지로 섞는 순간 쓰레기가 됩니다. (안다고 다 참지는 못해서, 군데군데 섞어 본 곳도 있습니다.)
이 사이트의 한인 업소록을 지도 기반으로 개편할 때는 Vue.js를 골랐습니다. Angular 2는 같은 이름이 맞나 싶을 만큼 달라져 진입부터 가팔랐고, React의 JSX는 그때의 제게 낯설었습니다. Vue는 template, script, style로 나뉜 구조가 원래의 HTML에 가장 정직했습니다.
돌아보면 제가 겪은 프론트엔드의 역사는 한 가지 질문의 반복이었습니다. 데이터를 화면에 어떻게 넣을 것인가. PHP는 반복문으로, jQuery는 DOM 조작으로, AngularJS는 선언으로 답했고, 답이 나올 때마다 다음 불편이 드러났습니다. 서버에서 그리던 것을 브라우저로 가져왔다가, 이제는 Next.js와 Remix로 다시 서버에서도 그립니다.
그래서 새 기술을 만나면 "얼마나 새로운가"보다 "이게 무슨 불편을 없애 주나"를 먼저 묻습니다. 그 불편이 지금 제가 겪는 불편이면 쓰고, 아니면 구경만 합니다. 세이클럽에서 눈 내리는 코드를 긁어 붙이던 아이가 배운 건 결국 그것 하나입니다.
기술 자체의 역사는 이 글이 잘 정리해 두었습니다: 짧게 써보는 웹 프론트엔드의 역사