새 CSS 문법으로 웹 디자인 엔지니어링하기

발표자는 최근 몇 년간 CSS에 다양한 새 문법들이 추가되었지만 사람들은 쓰던 기능만 쓴다며 작업자들에게 실제로 도움 될만한 CSS 문법들을 소개하는 내용의 영상입니다. 50분 영상 중에 기억에 남는 내용만 하나 정리해보았습니다.

14:36 Fluid Typography (유동적 타이포그래피)

font-size: clamp(1rem, 0.6522rem + 1.7391vw, 2rem);

레이아웃이 맘에 안 들 때마다 매번 새 중단점(Breakpoints)을 추가하는 대신에 CSS의 clamp 문법을 사용해서 뷰포트 크기에 따라 요소의 크기가 유동적으로 조정되는 시스템을 만드는 방법을 소개합니다. clamp는 글꼴 크기뿐만 아니라 글자 사이의 공백(whitespace) 간격도 조정해 줍니다.

clamp는 (최소값, 기본값, 최대값) 순서대로 입력하며 Chrome 79, Safari 13.1부터 지원되는 문법으로, 96.3%의 브라우저 버전에서 사용 가능하므로 현재 시점에서 호환성이 꽤 높습니다.

개발자와 디자이너의 협업도 Utopia라는 Figma 플러그인을 사용하면 가능합니다. Utopia를 사용하면 유형별로 clamp CSS 변수 코드를 생성해 주고 이를 타이포그래피 별로 지정하면 시스템화 할 수 있습니다. 반응형을 중요시 여기는 서비스라면 도입해 볼 만한 가치가 있을 것 같습니다.

웹사이트 제작은 팀 스포츠고, 디자이너와 개발자가 긴밀히 협력해서 CSS의 잠재력을 최대한 활용해야 한다는 내용도 기억에 남았습니다. 디자이너가 CSS를 배우고, 개발자도 디자인에 참여해야 한다고 하는데 맞는 말인것 같습니다.

https://www.youtube.com/watch?v=su6WA0kUUJE&ab_channel=WebConferencesAmsterdam