TL;DR

  • CSS는 단순한 스타일시트라는 이유로 프로그래밍 언어로 인정받지 못하지만, 오늘날에는 Doom과 데이터베이스 쿼리 엔진까지 구현할 수 있을 만큼 강력한 언어임.
  • CSS의 쉬운 진입 장벽은 능력과 난도를 과소평가하게 만들며, 1996년 초기 사양의 약 50개 속성에서 현재 최소 500개로 확장됨.
  • CSS를 여성적인 기술이나 장식 작업으로 치부하는 편견은 직무 배정, 임금, 채용 평가, 웹 접근성에도 영향을 줌.
  • CSS를 가볍게 여기는 문화와 프레임워크 의존은 웹사이트 디자인의 획일화로 이어지며, CSS는 웹의 가독성과 개성을 만드는 핵심 요소임.
  • CSS는 초보자도 유용한 결과물을 빠르게 만들고 전문가라면 Doom까지 구현할 수 있는, 사용자 맞춤형 소프트웨어에 가까운 언어임.

CSS는 단순한 스타일시트가 아님

  • CSS의 첫 글자 S는 스타일을 뜻하며, 색상과 글꼴, 테두리와 그림자, 행과 열, 애니메이션과 전환 효과를 다룸. 웹페이지의 시각적 모습과 개성을 결정하는 언어임.
  • CSS를 프로그래밍 언어가 아니라 스타일시트 언어, 도메인 특화 언어라고 부르는 반론이 있으며, 실행되지 않고 튜링 완전하지 않다는 지적도 있음. 컴파일 단계가 없고 다른 언어처럼 런타임 오류를 내지 않는 점은 다르지만, 그런 차이가 CSS의 가치를 결정하지는 않음.
  • CSS가 시작하기 쉽다는 점은 실제 능력을 낮춰 보는 이유로 작용함. background: red처럼 누구나 금방 이해할 수 있지만, 간단하다는 사실이 숙달하기도 쉽다는 뜻은 아님.
  • 1996년 CSS 초기 사양에는 color, font-size 같은 속성이 약 50개 있었으며, 현재는 최소 10배로 늘어남. hanging-punctuation 같은 속성도 포함됨.
  • 한 프로그래머는 CSS만으로 Doom을 재현했으며, 다른 이들은 홀로그래픽 포켓몬 카드와 3D 렌더링 엔진을 만듦. 올해 첫 March MadCSS 대회 참가자인 Cassidy Williams는 CSS만으로 실험적인 데이터베이스 쿼리 엔진을 구축함.
  • Cassidy Williams가 Microsoft Build에서 이를 시연했을 때, 진행을 맡은 숙련된 프로그래머들조차 CSS를 좋아하는 사람이냐며 비꼬고, 그런 사람은 거의 유일할 것이라고 말함.

CSS를 둘러싼 편견과 성별 고정관념

  • JavaScript를 만든 Brendan Eich의 이야기는 널리 알려져 있지만, CSS 창시자 Håkon Wium Lie의 이름을 아는 프로그래머는 거의 없음. 노르웨이 출신이라는 점과 이름의 발음 구별 기호가 미국 실리콘밸리의 Eich나 HTML을 만든 영국인 Tim Berners-Lee에 비해 덜 알려진 이유일 가능성도 있음.
  • 브라우저를 이루는 JavaScript·HTML·CSS 가운데 CSS는 흔히 덜 중요한 기술이나 순수한 장식으로 취급됨. 스타일은 장식적인 역할도 하지만, 스타일이 가능하게 하는 가독성과 풍부한 디자인은 중요하며 사람들은 웹사이트의 외관에도 관심을 둠.
  • CSS는 ‘여성적인’ 언어로 여겨지기도 함. 웹에서 눈에 보이는 부분인 프런트엔드를 맡는 CSS 개발을 스타일과 아름다움을 다루는 ‘여성의 일’로 보는 뉘앙스가 있으며, CSS 개발자를 ‘스타일시트 속의 괴짜’라고 놀리는 농담도 반복됨.
  • 언어를 얼마나 진지하게 받아들이는지는 프로그래머의 급여, 채용 면접에서 찾고 검증하는 기술, 장애가 있는 사람을 위한 웹 접근성에 연쇄적으로 영향을 줌.
  • 백엔드 엔지니어인 한 여성은 대학 시절 샌프란시스코의 평판 좋은 소프트웨어 회사에서 백엔드 인턴십을 했고, 프런트엔드에는 거의 관심이 없었음에도 졸업 후 정규직으로 입사하자마자 프런트엔드 직무를 배정받음. 이후 백엔드로 돌아왔지만, 남성 엔지니어가 함께 6개월간 일하고 첫 백엔드 프로젝트를 본 뒤에야 역량을 인정하는 상황을 여러 차례 겪음.
  • 이 엔지니어는 팀의 업무를 나눌 때 프런트엔드를 맡고 싶지 않다는 점을 분명히 밝히곤 했으며, 자신을 확실히 백엔드 엔지니어로 드러내는 방식으로 이런 상황에 대응함.

CSS는 코딩으로 들어가는 관문이기도 함

  • 이 백엔드 엔지니어는 젊은 여성과 성별 확장 정체성을 가진 학생을 위한 기술 캠프 Kode With Klossy에서 가르친 경험도 있음. 이곳에서는 CSS가 ‘너드 같은 컴퓨터 소년’이라는 고정관념에 맞지 않는 사람에게 소프트웨어의 입구가 될 수 있다는 점이 드러남.

코딩에는 관심이 없고 Karlie Kloss가 멋지다고 생각해 캠프에 온 학생들이 정말 즐거워했고, 그러다 ‘이게 어떻게 작동하지?’라는 데에도 관심을 갖게 됨.

  • 업계에서도 이런 접근은 프런트엔드 가운데 시각적 인터페이스에 가까운 직무의 성별 다양성이 그 뒤편의 프런트엔드 직무나 순수 백엔드보다 다소 높은 양상과 맞닿아 있음. 다만 전체적으로는 여전히 매우 낮은 수준임.
  • 지난해 State of CSS 설문 응답자 수천 명 가운데 여성은 11%, 논바이너리 또는 성별 비순응자는 3%였음. State of JavaScript에서는 여성 비율이 6%, 논바이너리 비율이 1%였음.

CSS 경시와 프레임워크가 부르는 웹 디자인의 획일화

  • CSS를 소홀히 여기는 또 다른 결과는 특히 스타트업 업계에서 웹사이트들이 서로 비슷해지는 현상임. CSS가 각 웹사이트를 고유하게 보이게 한다면, 최근 유행하는 프레임워크는 사이트들을 서로 닮게 만듦.
  • 웹 디자인에는 Bootstrap 시대와 Tailwind 스타일이 있었고, 지금은 Claudeslop 특유의 미학이 나타남. 프레임워크는 애슬레저 의류처럼, 패션에 관심이 없는 사람도 무난한 모습을 빠르게 갖추도록 돕는 지름길임.
  • 그럼에도 이런 흐름은 과거 주차장을 가득 채운 다채로운 자동차 사진과 비교해 미국 자동차가 회색 일색으로 변한 현상처럼 아쉬움을 남김.

세 दशक 동안 확장된 CSS의 표현력

  • WIRED는 CSS를 도입한 초기 주요 고트래픽 사이트 가운데 하나였으며, 당시 ‘눈을 위한 사이트’라고 내세운 표현에 걸맞은 모습을 갖춤.
  • 당시에는 Flexbox와 Grid, 사용자 지정 속성이 없었고, JavaScript 없이 애니메이션을 만드는 @keyframes, 전환, 변형 기능도 없었음. 이번 10년 동안에도 브라우저에 강력한 CSS 기능이 다수 추가돼 변화를 따라가기 어려울 정도임.
  • CSS의 세부 기능에는 문단 끝에 홀로 남는 단어를 막는 text-wrap: pretty가 있으며, 선언을 중첩하는 기능도 있음. 최근 몇 년 사이에는 컨테이너 쿼리, :has() 의사 클래스, oklch() 같은 새로운 색 공간도 등장함.
  • CSS는 히브리어와 아랍어 같은 오른쪽에서 왼쪽으로 쓰는 언어를 지원함. 웹페이지 구성 요소의 위치를 보간해 매끄러운 애니메이션과 그라데이션을 만들 수 있음.
  • 조건문 if()와 @function이 개발 중이며, 이 기능들이 도입되면 CSS는 진정한 프로그래밍 언어가 아니라는 ‘엄밀히 말하면’ 식의 설명도 힘을 잃을 수 있음. 오늘날의 CSS는 과거의 CSS와 다름.

초보자에게 열려 있고 전문가에게도 깊은 언어

  • CSS는 시작하기는 쉽지만 탐구하고 숙달할 내용이 깊다는 점이 매력임.
  • CSS는 소프트웨어를 누구나 맞춤 설정할 수 있어야 한다는 최종 사용자 프로그래밍에 가장 가까운 언어임. 스타일시트는 스프레드시트처럼 초보자도 한 시간 안에 유용한 무언가를 만들 수 있고, 전문가라면 Doom까지 구현할 수 있음.