싱가포르에 살고 있는 독학 디자이너이자 개발자인 첸 후이 징은 CSS, 특히 영어 이외의 문자 작성 시스템에 관해 이야기했습니다.
이 게시물은 Designcember의 일부입니다. web.dev에서 제공하는 웹 디자인을 기념합니다.
첸 후이 징은 독학으로 싱가포르에 거주하는 디자이너이자 개발자로, CSS에 대한 과도한 애정을 가지고 있습니다. 블로그 (대부분 CSS 관련)와 트윗 (주로 서체 및 웹에 대한 트윗)을 통해 알 수 있습니다. 이전에는 농구를 풀타임으로 했으며 훈련 세션 사이의 휴식 시간에 웹 경력을 시작했으며 언젠가는 야외 등반을 할 수 있기를 바라고 있습니다. 나는 그녀에게 CSS, 특히 영어가 아닌 쓰기 시스템에 대해 이야기했습니다.
Rachel: 웹 디자인 및 개발을 진행하게 된 계기는 무엇이었나요?
후이징: 전업 농구를 하면서 기숙사에서 살았을 때 동료들보다 컴퓨터를 좀 더 경험해 봤습니다. 코치는 몇 년 동안 업데이트되지 않았던 협회 웹사이트를 통해 무언가를 할 수 있다고 생각했습니다. 웹 개발이 무엇인지 전혀 몰랐지만 알아볼 시간이 충분하다고 생각했습니다. 생각보다 훨씬 즐거웠고 몇 년이 지난 지금도 이 자리에 머물고 있습니다.
Rachel: CSS에 구체적으로 어떻게 시작하게 되셨나요?
후이징: 저는 성격이 매우 시각적인 편이에요. '지침'을 줄 수 있다는 점이 있어요 눈길을 끄는 요소가 화면에 반사되는 것을 즉시 확인할 수 있습니다. 애플리케이션 프로그래밍 로직보다 훨씬 더 직관적으로 느껴졌습니다. 저는 CSS가 발전하기 시작했을 때 웹에 진심이었습니다. 그래서 널리 사용되지 않는 실험적 속성이 많았습니다. 거의 알지 못했던 새로운 기능을 발견하는 것은 매우 즐거웠습니다.
세로 쓰기 모드 사용
Rachel: CSS의 세로 쓰기 모드와 세로 작성으로 작업할 때 발견되는 재미있는 버그에 대해 많이 작성했습니다. 우리 모두가 가서 별표표시해야 할 좋아하는 벌레가 있나요?
후이징: 올해 5월에 다시 확인했을 때 몇 가지 문제가 있었지만 대부분 문제가 해결되었습니다. 단 하나의 문제를 제외하고는 Chromium에서 세로 쓰기 모드의 Devtools 오버레이에 문제가 있습니다. 이 상시 브라우저 업데이트 주기가 어떻게 웹 개발을 진전시키고 있는지 보여주는 증거라고 생각합니다.
레이첼: 이러한 문제가 해결되었다니 다행입니다. 쓰기 모드를 사용하면 단순히 세로 텍스트를 조판하는 것 이상의 사용 사례가 있다고 생각하시나요?
후이징: 그럼요. 동아시아 스크립트 조판이 쓰기 모드의 주요 사용 사례이기는 하지만, 저는 다른 쓰기 시스템이 인쇄 잡지에서 흔히 볼 수 있는 스타일과 같은 세로 레이아웃을 구현하기 위해 쓰기 모드를 사용할 수 있다고 생각합니다. 제 생각에 CSS 속성의 조합은 CSS를 매우 강력하게 만드는 요소입니다. 따라서 쓰기 모드를 Flexbox 및 그리드와 함께 사용하면 페이지 수준 상자부터 텍스트의 개별 문자에 이르기까지 레이아웃 방향을 위한 상당히 많은 순열을 얻을 수 있습니다. 이것이 앞으로 웹 디자인에서 가능한 것의 범위를 깨닫게 됨에 따라 가능성과 창의성을 높여준다고 생각합니다. 몇 년 전만 해도 상상하지 못했던 레이아웃과 디자인을 웹에서 볼 수 있기를 바랍니다.
레이첼: 지금 누구나 논리적 속성과 값을 사용해야 할지, 아니면 기본값이 될지 묻는 질문이 있습니다. 뭐라고 답하시겠어요?
Hui Jing: 개인적으로는 이 도구가 실용적 관점에서 멀티 스크립트 웹사이트를 훨씬 쉽게 개발할 수 있는 도구가 되기를 바랍니다. 이것이 기본이 될 것인지에 대해서는 답변하기가 훨씬 어렵습니다.
논리적 속성에 대한 문제는 수년 동안 사용되어 온 확립된 구문과 기본이 아닌 스크립트에 대한 지원이 최근 몇 년 동안 훨씬 더 향상되었습니다. 웹 콘텐츠는 대부분 영어로 되어 있으므로 이 맥락에서 논리적 속성을 사용하는 경우는 덜 강력합니다. 비영어권 사용자가 각자의 언어로 웹 콘텐츠를 제작하도록 유도하면 이러한 노력이 이 목표를 더욱 발전시킬 것이라고 생각합니다. 또한 다국어 지원의 우선순위가 높아지면 논리적 속성 사용의 가치가 더욱 명확해집니다.
CSS의 새로운 기능
레이첼: CSS에 어떤 기능이 추가되기를 원하시나요?
후이 징: 저는 한동안 미리암 수잔의 컨테이너 쿼리 작업을 따라왔는데, 스타일 및 상태 컨테이너 기능을 위해 아직 개발되지 않은 사양도 상당히 흥미롭습니다. 반응형 디자인이라는 개념이 확장됩니다. 잠재적으로 디자인 및 레이아웃이 표시 영역의 크기뿐만 아니라 다른 것에도 반응하도록 할 수 있습니다. 따라서 격리 모듈이 다른 브라우저 공급업체들이 동의할 수 있는 것이고 가까운 시일 내에 더 광범위한 지원을 받을 수 있기를 바랍니다.
팔로우하도록 유도하는 방법
레이첼: 지금 웹에서 정말 흥미롭거나 재미있거나 창의적인 작업을 하는 사람은 누구인가요?
후이징: 저는 항상 CSS 아트 사람들에게 끌리는 편입니다. Yuan Chuan과 그의 생성형 CSS 창작물과 같이 CSS 아트워크에 신경을 쓰지 않는 Ben Evans, 정말 기발한 기법을 심층적으로 다루는 Ana Tudor와 같이 제가 몇 년 동안 팬을 사랑해 왔습니다. 최근에 Julia Miocene과 Jackie Zen의 Codepens를 만나보면 CSS 애니메이션도 아름답습니다.
레이첼: 첸 후이 징의 웹사이트 chenhuijing.com에서 자세한 내용을 보실 수 있습니다.