세상은 왜 CSS 개발자를 필요로 하는가?
지난 10여년간, CSS는 여러 기능들을 덧붙이면서 — 그럼에도 굉장히 세밀하고 복잡하게 — 괄목할만큼 성장했다. 우리가 지금 사용하고있는 CSS는 2000년대 초반(2001년~2010년)과는 굉장히 다르다.
왜 CSS개발자가 더욱 필요한가를 설파하기 전에, 우선 CSS의 역사부터 되짚어보자.
CSS의 역사
2000년대 초반 10년간, 인터넷이 세상을 집어삼키는 동안 CSS는 정체돼 있었다. 인터넷 익스플로러(버전 6~8까지)가 시장을 과점하는 동안 마이크로소프트는 CSS에 별 관심이 없었고 새로운 기능에 투자하지 않았다. 그 덕에 CSS는 2.1 버전에 거의 10년을 묶여있게 된다.
2007년 후반부터 등장한 크롬이나 파폭도 있었지만, 여전히 이놈의 인터넷 익스플로러를 지원하느라 CSS의 발전은 발목을 잡혔다. 인터넷 익스플로러가 세상을 지배하는 동안 CSS의 발전 속도는 거의 멈춰있었다고 보는게 맞을 것이다. 여러면에서 인터넷의 암흑기였다.
CSS의 새 시대를 연 몇몇 사건들
아마 이 시절에 웹개발자였던 사람들이라면, CSS 판에서 가장 근본적인 변혁을 가져온 두 가지 사건을 기억하고 있을 것이다.
- 스마트폰의 등장 (2007년 7월 29일) — 첫번째 아이폰의 등장이다. 모바일 웹 기기를 지원하는 새로운 CSS의 규격이 필요하게 됐다.
- 크롬 브라우저의 등장(2008년 9월 2일) — 데스크탑으로 먼저 출시된 크롬은 신생 브라우저였다. 이때까지만해도, 인터넷 익스플로러가 세상을 지배하고, 개발환경의 기준이었다.
왜 프론트엔드 개발자가 CSS랑 Javascript를 다 하나
당시에는 프론트엔드 개발자가 이 모든 걸 (Javascript와 CSS) 해야하는게 일반적이었다. 당시에는 CSS 세부사항이 몇 없던 때였고, 개발자가 어느정도 커버 가능했다. 그러나 CSS가 엄청나게 복잡해진 지금은 더 이상 당연한 것이 아니다.
CSS3, HTML5, JavaScript 의 새로운 시대
CSS3가 딱 언제 시작했다고 꼬집어 말하기는 어렵다. 초안은 1999년부터 개발되기 시작했지만 브라우저가 제대로 지원하기 시작한 것은 2011년부터였다. 이미 당시에는 크롬과 파폭이 시장점유율을 넓혀나가고 있었고, 스마트폰이 빠르게 대중화되면서 스마트폰에 내장된 브라우저를 지원하는 CSS3의 새로운 기능들이 지원되기 시작했다. 인터넷 익스플로러의 인기는 이때부터 꺾이기 시작했고, 그때서야 마이크로소프트는 CSS 스펙에 신경을 써야한다는 걸 겨우 알아차렸다. 그래서 나온게 인터넷 익스플로러 9.
새로운 CSS
CSS3도 이제 10년이나 됐는데, CSS4는 없는거야?
CSS 2.1과 달리 CSS3는 오픈스탠다드(open standard)라서, 지속적인 업데이트가 이뤄지는 중이다. 따라서, 어디서부터 CSS4 라고 갈라서 말하기는 어렵다.
2011년부터 모든 브라우저 업데이트는 새로운 CSS스펙을 반영하고 있다. 요 몇년 사이, 거의 대부분의 브라우저들 — 크롬, 파폭, 오페라, 사파리 등등 — 들은 거의 한 달에 한 번 꼴로 업데이트를 (물론 사파리는 거의 1년에 한 번 쯤이지만) 하고 있다. 즉슨, 우리는 새로운 CSS 스펙이 발표되면 얼마 안 가 브라우저에서 적용되는 걸 볼 수 있다는 얘기다.
지난 10년간 CSS에 새로 들어온 스펙들
지난 10년간 다양한 스펙과 모듈들이 CSS 로 들어왔다.
- 레이아웃(Layout) — 반응형 디자인(Responsive Design), Flexbox, CSS Grid, 다단(Multi-Column Layout), 쓰기모드(Writing Mode), 논리속성(Logical Properties) (역자주: left, right 처럼 물리적인 속성이 아닌 start, end 와 같이 의미에 기반한 속성들이 ‘논리적인 속성’이라고 일컬어지는 것 같네요).
- 타이포그라피(Typography) — Variables Fonts, font-variant, 줄바꿈 속성(line-breaking properties).
- 도형과 그래픽(Shapes & Graphics) — 필터, 마스킹, 블랜드모드(blend-mode),clip-path, shapes 등등
- 애니메이션과 변형(Animations & Transforms) — CSS/SVG Animation, transitions, transforms, will-change.
- 단위(Units) — View-port Units (vw/vh/vmin/vmax), rem, calc(), 사이즈 관련 키워드들 (contain, fit-content, min-content, max-content).
- CSS전처리기 (CSS preprocessor) — Sass, Less, Stylus, PostCSS.
- SVG — 벡터그래픽 (다 알죠?)
- 그 외 — @규칙(@support), CSS 변수(사용자 지정 속성) 등등
보시다시피, 이 많은 기능들이 프론트엔드 개발자 몫이 되는건데, 사실 이걸 혼자 다 감당하기란 어렵다. 심지어 이건 CSS속성을 다 열거한 것도 아니다.
현실은, 이런 기초적인 수준의 CSS 기능들도 개발자가 다 마스터하기가 거의 불가능하다는 것이다. 게다가, CSS가 이만큼 발전하는 동안 JavaScript 는 놀았나? 더했으면 더했지 결코 덜하지 않았을 것이다. 그러니 한 사람이 프론트엔드 영역의 모든 것을 마스터하기란 정말 어려운 일이 됐다.
웹업계의 큰 실수
상황이 이 지경이 되고, CSS의 복잡도를 감당할 수 없게 되자, 이제 개발자들 사이에서는 “CSS를 배우지 않는 방법” 을 일종의 새로운 영역으로 개척하고 있다.
“CSS를 배우지 않는 방법”
첫번째 CSS 프레임워크
2011년에 시작된 Bootstrap 이나 Foundation 같은 것들이 선발주자다. CSS3가 태동하던 시기였고, 반응형 디자인, 모바일 웹 등등이 여러 브라우저에서 지원되어야 하는 상황이었다.
개인적으로는 Bootstrap 을 깊게 파본적도 없고, CSS 명명규칙이 의미론적(Semantic)이지 않은 것도 맘에 영 들지 않았다. 그러나 내가 운영하던 커뮤니티의 다른 개발자들의 도움으로 어쨌든 Bootstrap 을 어느정도 이해는 하게 됐는데, 이건 가만보니, 있는 그대로 건드리지 않고 쓸때나 적당한 물건이라는 걸 알게됐다. (커스터마이즈하면 골치아프다는 뜻)
Angular 2 — 처음으로 수긍이되는 자바스크립트 프레임워크
Angular 가 처음 나오면서 스타일 캡슐화(encapsulated styles)가 소개되었다. 덕분에 CSS의 계단식 적용에 미숙한 개발자들이 어느정도 도움을 받았을 것이다. 이 방법덕에 글로벌 스타일과 컴포넌트 레벨의 스타일이 공존하게 된다.
여러 아이디어중에 적어도 이 스타일 캡슐화(encapsulated styles)는 내가 보기엔 괜찮았는데, 컴포넌트 스타일을 정의해놓고 또 글로벌 스타일에서도 컴포넌트 스타일을 건드릴 수 있기 때문이다. 여전히 CSS/SASS의 분리나 HTML과 JavaScript 의 분리같은 부분들이 남았지만 필요한 스타일만 골라서 로딩할 수 있다는 장점은 괜찮았다.
React — 의미론을 실현시켰다는데
React 는 여기서 한 걸음 더 나간다. HTML과 CSS 를 모두 JS안에 같이 써버리는 것이다. React에서는 스타일의 재사용 같은 건 의미가 없다. React는 자동으로 CSS명을 생성해내는데, HTML과 CSS의 탈의미론적 구성덕에 코드는 도무지가 읽어낼 수가 없다. 이건 내가보기에 거의 초창기 웹처럼, HTML이나 CSS가 어떻게 (엉망으로) 쓰였든 그냥 작동만 하면 된다는 식이다.
왜 이게 나쁘냐구? 만약 CSS에 어떤 문제가 생겼을때, React가 CSS를 써갈겨놓은 그 꼬라지 덕에, 어지간히 숙련된 CSS개발자의 도움이 없으면 문제를 풀 수 없기 때문이다. 뭐, 물론 개발자 둘이서 힘을 합치면 풀기야 풀겠지. 비싼 개발자 두 사람의 시간을 갈아넣으면서 말이다.
임금님 귀는 당나귀 귀!
“프론트엔드 개발자는 CSS를 잘 못해요~~~! ”
누군가는 이 진실을 말해야 한다.
물론, 이런 성급한 일반화는 틀렸겠지. 100% 맞다는 건 아니다. 근데 대충 맞는 말이다. 계속 하기전에, 나에 대해서 좀 소개를 하자.
나는 누구인가?
나는 2007년에 프론트엔드 개발자로 시작했다. 2012년쯤 나는 CSS를 너무 사랑한 나머지 JavaScript 코드 작성을 거의 멈춰버렸다.
2012년부터 지금까지, 나는 CSS만을 파왔기 때문에 제법 많은 역량들을 키울 수 있었다. CSS에 대한 아티클들을 써왔고, 5000명이 넘는 CSS커뮤니티를 만들었고, 여러 강연(meetup, 워크샵, 컨퍼런스 등등)을 했다.
내가 왜 이런 소개를 할까? 왜냐면 나는 아직 우리나라(역자주: 이스라엘), 웹업계에서 일종의 유니콘같은 존재이기 때문이다. 맞다, 여러모로 맞다는 얘기도 많이 듣는데 반대도 있다. 나같은 사람이 되기가 어려운 것이, 여전히 웹업계가 고리타분한 ‘프론트엔드 개발자 — (상당수준의 Javascript 와 CSS를 작성할줄 아는)’ 라는 타이틀을 고수하고 싶어하기 때문이다.
나는 우리나라에 있는 최고수준의 프론트엔드 개발자들을 알고있는데, 내가 가끔 그들에게 CSS에 정말 자신있냐고 물어보면 대답이 좀 놀랍다. 대부분은 자기들이 CSS에 잼병이라고 말하기 때문이다. 그리고 나같은 CSS 개발자(광신자)가 있다는 사실에 굉장히 놀란다.
웹업계가 변해야한다!
이런 식의 흐름이 2010년까지는 먹혔을지 몰라도, 이젠 2020년이다. 더 이상은 안 된다. 웹은 변했다. 큰 기업들부터라도 이제 과거의 웹업계가 가지고 있던 잡타이틀을 버리고 새로운 시대의 흐름에 부응해야할 것이다.
기업들의 관심은?
2020년, CSS 는 아주 중요한 스킬이다. 기업들이 비용을 줄이려고 하면서 실은 더 많은 비용을 지출하곤 한다. 나는 CSS전문가가 10분이면 해결할 일을 붙잡고 쓸데없이 많은 시간을 허비하는 개발자들을 많이 봐왔다.
2020년, CSS 는 아주 중요한 스킬이다.
새로운 잡타이틀은 뭐라고 해야하나?
지난 8년간 나는 내 잡타이틀을 여러번 바꿔왔다. 링크드인에서 내 프로필을 보는 사람들에게 내 역량을 설명하기 위함이었다.
처음에는 나 스스로를 CSS Master(내가 만든 CSS 커뮤니티에서 내 이름이기도…)라고 불렀다. 이게 웃긴게, 이렇게 바꾸자마자 이 잡타이틀로 광고들이 뜨기 시작했다는 것이다. 그제서야 나는 기업들이 이런 ‘CSS개발자’ 라는 직군을 필요로는 하는데, 뭐라고 불러야할지 모른다는 걸 알았다.
나중에는 잡타이틀을 여러번 바꿨는데, (UI/CSS 개발자, 인테페이스 개발자, 엔지니어, 설계자, 전문가 등등) 내 역량을 어떻게든 타이틀에 녹여보려는 시도였다.
‘CSS 개발자’ 라는 이름만 고집할 필요는 없다
요즘은 CSS나 SVG처럼 시각화에 전문화된 개발자를 찾기가 힘들다. CSS개발자들을 내 나름대로 정의해봤다:
CSS 개발자 — 이 타이틀은 중급정도의 CSS 전문성을 가진다. 디자인을 손쉽게 CSS로 변환할 수 있는 수준이다.
CSS 설계자 — 이건 나와 같은 개발자 직군일텐데, 효과적으로 CSS를 다루는 것만 아니라 CSS를 어떻게 구성하고, 복잡한 전체구조에 어떻게 활용할 것인지를 설계하는 수준이어야한다. CSS 설계자는 CSS 개발자와는 달리 훨씬 숙련도가 있어야 하고, 다른 CSS 개발자들을 데리고 큰 프로젝트에 CSS를 확장(scale up)하는 방법도 알고있어야 한다. 그 외에도 다른 개발자들, PM, 웹디자이너 등등과 커뮤니케이션할 수 있어야 한다.
CSS 애니메이션 개발자 — 아주 약간의 CSS 애니메이션(혹은 SVG 애니메이션)만으로도 엄청난 사용성 개선이 가능하다. 이게 평범한 프로젝트를 아주 대단한 프로젝트로 만들어주기도 한다. 대기업에 적당한 포지션이다.
이 정도가 2020년, 우리가 필요로하는 역량들이다. 하지만 다음과 같은 더욱 세분화된 전문가도 있을 수 있다.
- Sara Soueidan — SVG 전문가
- Diana Smith — CSS 아티스트
이 외에도 더 많이 있을 수 있다. 가능성은 무한하다!
마치며
이 글에서 나는 지금껏 야기된적 없었던 부분을 건드리고 싶었다. 그래서 웹업계가 바른 방향으로 나아가길 바라는 마음이다.
내 글 외에도, 이 주제와 관련된 다른 관점의 글들도 있다.
- The Great Divide
- What CSS Developers Do and Why You Need One
그리고
이 글이 맘에 드신다면, 널리 공유해주시고 웹업계에 경각을 울릴 수 있도록 도움을 주세요.
저자소개
제 이름은 Elad Schechter 이고, CSS와 HTML 디자인 설계에 특화된 개발자입니다. investing.com 에서 일하고 있습니다.
