CSS 스펙 탐구하기

이 글은 사내 기술 블로그에 기고했던 https://tech.streami.co/state-of-css-by-deobi/ 글을 옮겨와 그대로 작성했습니다.

 

안녕하세요, 저는 스트리미 FE팀에서 이용자가 마주하는 고팍스의 인터페이스를 개발하는 프론트엔드 엔지니어 더비입니다.

이번 포스팅에서는 제가 지난 4분기 FE팀 기술 세미나에서 State of CSS라는 제목으로 발표했던 세션에 대해 소개할까 합니다.

세션 소개

세션 목차

1. 들어가며-이 주제를 선택한 이유는?
2. Subgrid
3. Writing Modes
4. CSS Logical Properties
5. Viewport-Percentage Length Units
6. blend-mode
7. Filters & Effects
8. backdrop-filter
9. conic-gradient
10. accent-color

 

이 주제를 선택한 이유는?

이미지출처:  https://stateofcss.com/en-us/

 

얼마전에 Devographics가 주도하는 State of CSS 라는 설문조사에 참여했는데요. State of CSS는 최근 CSS 기술이 어떻게 변화하고 있고, 어떤 기술이나 기능들이 새로 추가되었는지, 개발자는 그런 트렌드에 민감하게 잘 따라가고 있는지를 점수로 환산해 확인해볼 수 있는 설문조사입니다.

새로운 기술 스펙과 트렌드를 쫓고 공부해야하는 숙명을 가진 업을 갖고있는데... 생각보다 낮은 점수가 나와서 이참에 어떠한 스펙들이 있는지 공부 겸 조사해보았습니다.

Subgrid

현재 우리가 프론트엔드 개발을 하면서 사용하는 Grid layout은 대부분 CSS Grid Layout Module Level 1 일 것입니다.

 

새롭게 추가 된 Subgrid 는 Level 2 명세에 기반하고 있습니다. Subgrid는 쉽게 풀어쓰면 "자식그리드" 라고 생각하면 이해하기 쉽습니다. grid-template-columns, grid-template-rows 속성과 함께 사용하여 자식 그리드의 layout을 조정합니다. (현재 Firefox, Safari에서만 지원됩니다.)

 

Grid만을 사용했을때는, 만약 아래 그림처럼 2번째 자식의 영역이 넓다면 첫번째 영역과는 다른 영역이 적용되는 것을 볼 수 있는데,

grid만 적용한 경우 레이아웃

 

subgrid를 grid-template-rows 적용해준다면 아래 그림처럼 row 영역의 크기를 맞춰줄 수 있습니다.

subgrid를 적용한 경우 레이아웃

 

Writing Modes

writing-mode 는 언어에 따라 국제 쓰기 모드를 정의할 수 있는 속성으로 텍스트 흐름의 방향을 정합니다. 좌에서 우, 우에서 좌, 양방향 및 세로 등의 방향을 정할 수 있습니다.

• horizontal-tb

풀어쓰면 Horizontal Top To Bottom 이라고도 합니다. 언어에 따라 다르지만 영어에서는 문장이 가로로 작성되고, 각 줄의 첫 자는 왼쪽에서 시작합니다.

• writing-mode: vertical-lr

문장이 위에서 아래로 작성되고, 문장의 첫 세로줄이 제일 왼쪽에서 시작합니다.

• writing-mode: vertical-rl

동일하게 문장이 위에서 아래로 작성되지만, 문장의 첫 세로줄이 제일 오른쪽에서 시작합니다.

 

이외에도 writing-mode 관련 속성으로 sideways-rl, sideways-lr, lr, lr-tb, rl, tb-rl 등이 있습니다.

 

CSS Logical Properties

CSS Logical Properties은 요소를 물리적 관점이 아닌 논리적 관점으로 바라보며 레이아웃을 제어하기 위한 ​​기능을 제공하는 CSS 모듈입니다. 논리적 관점은 block과 inline 을 사용하여 요소가 처리되는 방향을 결정합니다.

 

state of css 설문조사에서 소개 된 border-block, border-inline, margin-block-start, padding-inline-end 속성을 살펴보겠습니다.

• border-block : 논리적인 블록 테두리 속성 값을 설정하기 위한 shorthand 속성입니다.

• border-inline : 논리적인 인라인 테두리 속성 값을 설정하기 위한 shorthand 속성입니다.

• margin-block-start: 요소의 논리적인 블록 margin 윗 부분을 정의합니다.
  물리적 관점에서는 margin-top 과 동일한데, 물리적이 아니라 논리적이기 때문에 top 대신 start입니다. 아래 예시를 보면 margin이 윗부분에 적용된 것을 볼 수 있습니다.

• padding-inline-end: 요소의 논리적 인라인 끝 패딩을 정의하며, 요소의 쓰기 모드, 방향성 및 텍스트 방향에 따라 물리적 패딩에 매핑됩니다.

Viewport-Percentage Length Units

기존에 뷰포트 단위로 vw, vh, vmin, vmax 등이 있었습니다. 이 단위들은 데스크톱 장치에서는 문제가 없었지만 모바일 장치에서는 스크롤에 따라 보이고 사라지는 다이나믹 툴바(주소 표시줄, 뒤로가기/홈 버튼 등) 인터페이스에 의한 문제가 발생했습니다.

사진출처:   https://web.dev/viewport-units/

 

 

위 이미지에서 확인할 수 있듯이 vh의 크기에는 변함이 없지만, 상단 주소 표시줄에 의해 100vh의 결과는 뷰포트 밖으로 넘치게 됩니다.

 

이러한 문제에 대응하여 새로운 뷰포트 단위가 추가되었습니다.

• svh

Small Viewport 단위 중 하나인 svh 입니다.
svh는 사용자가 볼 수 있는 가장 작은 viewport 높이를 반영합니다. viewport 높이에서 모든 인터페이스 요소를 제거한 높이라고 할 수 있습니다.

• lvh

 

Large Viewport 단위 중 하나인 lvh 입니다.
lvh는 사용자가 볼 수 있는 가장 큰 viewport 높이를 반영합니다. viewport 높이에서 모든 인터페이스 요소를 포함한 높이라고 할 수 있습니다.

• dvh

Dynamic Viewport Height의 약자로 현재 viewport 높이를 나타내는 동적인 값입니다. 앞서 설명한 두 단위(svh, lvh) 사이에서 동적으로 작용하는 dvh 입니다.
dvh의 값은 100svh ≤ dvh ≤ 100lvh 일수 있어 만약 주소표시줄이 축소된 상태에서 스크롤을 통해 주소표시줄이 확장되면 dvh의 값도 업데이트됩니다. dvh를 사용하면 정확히 viewport에 맞게 콘텐츠의 크기를 조정할 수 있습니다.

 

blend-mode

blend-mode 는 두개 이상의 레이어를 혼합하고 겹쳐서 색상을 만들 수 있는 css data type입니다. background-blend-mode와 mix-blend-mode 속성이 있습니다. background-blend-mode 는 배경에, mix-blend-mode는 전체 요소에 블렌딩을 적용할 수 있습니다.

 

이들에 적용시킬 수 있는 속성값에는 normal, multiply, hard-light, difference 등이 있습니다.

• normal: 최종 색상은 하위 색상과 상관없이 상위의 색상입니다.
• multiply: 흰색 픽셀은 투명하게 나타나고 검은색 픽셀은 검은색으로 나타납니다. 그 사이에 있는 것은 광도(조명) 값을 곱합니다 이 속성의 효과는 투명 필름에 인쇄된 두 개의 이미지가 겹쳐지는 것과 유사합니다.

See the Pen Learn CSS - Multiply blend mode by Dubby (@devdubby-the-bold) on CodePen.

 

• hard-light: 이 속성을 사용하면 선명한 대비가 생성됩니다. 이 혼합 모드는 광도 값을 차단하거나 곱합니다. 픽셀 값이 50% 회색보다 가벼우면 마치 선별된 것처럼 이미지가 가벼워집니다. 더 진하면 곱절이 됩니다. 이 효과는 배경에 거친 스포트라이트를 비추는 것과 유사합니다.

See the Pen Learn CSS - Hard-light blend mode by Dubby (@devdubby-the-bold) on CodePen

 

 

 

 

 

• difference: 최종 색상은 밝은 색에서 두 가지 색상 중 어두운 색을 뺀 결과입니다. 검은색 레이어는 효과가 없는 반면 흰색 레이어는 다른 레이어의 색상을 반전시킵니다.

See the Pen Learn CSS - Difference blend mode by Dubby (@devdubby-the-bold) on CodePen.

 

 

 

 

 

위 내용들을 보면 알겠지만, blend-mode는 색상요소에 수학적 연산을 적용한것이라 볼 수 있습니다.

참고링크: http://alistapart.com/article/blending-modes-demystified/

 

Filters & Effects

이 속성은 블러 또는 색 이동과 같은 프로그램에서만 적용시킬 수 있었던 그래픽 효과를 요소에 적용합니다. 필터는 일반적으로 이미지, 배경 및 테두리의 렌더링을 조정하는 데 사용됩니다. 적용할 수 있는 속성값으로는 다음과 같습니다.

• contrast: 이미지의 대비를 조정합니다. 값이 0%이면 완전히 회색인 이미지가 생성됩니다. 값이 100%이면 입력이 변경되지 않습니다. 100%가 넘는 값이 허용되는데 이때는 대조적인 결과를 얻을 수 있습니다.

See the Pen Learn CSS - Contrast filter by Dubby (@devdubby-the-bold) on CodePen.

 

 

 

 

• grayscale: 이미지를 흑백으로 변환합니다. 값이 0%이면 입력이 변경되지 않습니다.

See the Pen Learn CSS - Grayscale filter by Dubby (@devdubby-the-bold) on CodePen.

 

 

 

 

 

• hue-rotate: 이미지에 색상 회전을 적용합니다. 앵글 값은 이미지에 조정될 칼라 서클 주변의 degree 를 정의합니다. 값이 0deg이면 입력이 변경되지 않습니다. 최대값은 없지만 360deg 이면 다시 돌아옵니다.

See the Pen Learn CSS - Hue-rotate filter by Dubby (@devdubby-the-bold) on CodePen.

 

 

 

 

backdrop-filter

엘리먼트 뒤에 있는 영역에 blurring 또는 color shifting과 같은 그래픽 효과를 적용할 수 있습니다. 요소 뒤에 있는 모든 요소에 적용되기 때문에 부분적으로 잘 사용해야 합니다.

• invert: 이미지색상을 반전시킵니다.
• sepia: 이미지색상을 sepia(물감?)로 변환합니다.

See the Pen backdrop-filter demo by Dubby (@devdubby-the-bold) on CodePen.

 

 

 

 

conic-gradient

중심점을 중심으로 회전하는 색 그라데이션으로 구성된 이미지를 생성합니다. 원뿔형 그라데이션의 예로는 파이 차트가 있습니다. 색상을 적용할 때 위치와 각도 인수를 활용합니다.

See the Pen Learn CSS - Conic gradient by Dubby (@devdubby-the-bold) on CodePen.

 

 

 

 

 

accent-color

어떤 요소에 의해 생성된 유저 인터페이스 컨트롤의 강조 색상을 설정합니다. 이 속성을 활용하여 체크박스, 라디오버튼, 슬라이더 요소 등에 더 편리하게 사용자 입력 스타일을 적용할 수 있습니다.

See the Pen HTML elements with accent-color by Dubby (@devdubby-the-bold) on CodePen.

 

 

 

 

마치며

가상자산의 트레이딩과 정보전달이 주 목적인 고팍스 프로덕트 특성상 앞서 소개된 속성을 적극적으로 활용하는 데는 한계가 있을 수 있는데요. 하지만  lvh, dvh, svh 스펙을 미리 알고 있었더라면 모바일 웹 브라우저의 전체화면 높이를 계산하느라 고생했던 신분증 촬영 기능 구현 작업 때 고생을 덜하지 않았을까 하는 아쉬움이 남았습니다. lvh, dvh, svh는 잘 기억해두었다가 모바일 웹 브라우저의 전체화면 높이와 관련된 기능을 구현할 때 사용하면 어떨까 싶습니다.

 

해마다 발전하는 CSS 기술을 잘 활용하면 개발 생산성을 상당부분 향상시킬 수 있을 듯하고, 또 실무에 적용할 수 있는 부분도 적지 않을 것 같습니다.이를 위해선 사전에 최신 기술 스펙을 인지하고 있어야 할 것입니다.

 

State of css 설문조사는 매해 진행되기 때문에 일년에 한번씩이라도 설문조사에 참여해보며 업데이트된 최신 스펙을 기억해두었다가 실무에 적용시킬 수 있으면 금상첨화이겠네요.

게더타운에 모여 기술세미나를 진행하는 FE팀 모습

 

스트리미 연구소에 입사 후 세미나를 처음 진행했을 때만해도 참가 인원이 5명이었는데, 어느새 9명의 인원으로 세미나를 진행하게 되었네요! 감회가 새롭습니다. 세미나 참가 인원이 많아지니 세션 주제도 다양해 지고 그만큼 더 배워가는 것도 많은것 같네요.

이번 4Q FE팀 기술 세미나 덕분에 오랜만에 CSS 최신 스펙들에 대해 살펴볼 수 있었습니다. CSS 기술이 하루가 멀다고 발전함에 따라 CSS만으로도 해결 가능한 스타일 작업들이 많아졌습니다. 스트리미 FE팀이 다른 최신 기술들과 마찬가지로 CSS 또한 소홀히 여기지 않고, 최신 스펙을 적재적소에 활용해 개발 생산성을 향상하면 좋겠습니다.