2022년에 따라야 할 5가지 프론트엔드 트렌드

게시 됨: 2020-12-11

웹에 떠도는 "따를 만한 디자인 트렌드" 기사가 많이 있습니다. 우리는 또한 2022년에 따라야 할 최신 웹 디자인 트렌드에 대한 스핀을 넣었습니다. 이러한 기사에 초점을 맞추는 것은 매우 이해할 만합니다. 디자인 자체는 클라이언트와 방문자 모두가 보는 것입니다. 그러나 그 뒤에 있는 코드는 대부분의 사용자와 관련이 없습니다.

프런트 엔드 코드

물론 별거 아닌 것처럼 보이지만 매우 중요합니다. 깔끔한 코드, 최적화된 접근 방식 및 새로운 기술을 통해 개발자는 확장 가능한 방식으로 아름다운 디자인을 제시할 수 있습니다. 성능 은 사용자가 원하는 것이고 확장성은 클라이언트가 원하는 것입니다.

따라서 모든 프론트 엔드 개발자에게 적절한 존경을 표하고 디자이너에게 약간의 통찰력과 아이디어를 제공하기 위해 "2022년에 따라야 할 프론트 엔드 트렌드" 목록을 작성했습니다.

1. CSS 사용자 정의 속성

이것은 CSS 사용자 정의 속성(또는 CSS 변수라고도 함)이 한동안 사용되어 왔음에도 불구하고 개발자가 수년 동안 원했던 것입니다. 예를 들어, W3C 모듈 레벨 1은 2015년의 것입니다. 그러나 모든 신기술과 마찬가지로 견인력을 얻는 데 시간이 걸립니다. 그리고 2021년에는 도입 이후 가장 높은 채택률을 보일 것이라고 믿습니다.

왜 멋진가요?

사용자 정의 속성은 사실 CSS의 변수입니다. "하지만 Sass에는 변수가 있지 않습니까?"라고 말할 수 있습니다. 응 우리는 그래! 그러나 Sass를 CSS로 컴파일하면 CSS를 얻게 됩니다. 그리고 변수가 없습니다. 더 이상 해당 변수의 값을 변경할 수 없습니다. $primary: red 은 그냥 빨간색입니다.

가변 글꼴

그러나 사용자 정의 속성을 사용하면 --primary: red 가 있습니다. 그런 다음 예를 들어 --primary 를 파란색으로 재정의할 수 있습니다. 브라우저에서 직접 컴파일할 필요가 없습니다. 이러한 CSS 트릭에 대해 자세히 알아보려면 다음 기사를 확인하십시오. CSS 변수와 전처리기 변수의 차이점은 무엇입니까?

이를 사용하는 한 가지 깔끔한 해킹은 사용자 지정 테마를 지정하는 것입니다. 변수를 통해 HSL 값을 정의한 다음 사용자가 프런트엔드의 슬라이더를 통해 색조를 변경할 수 있도록 할 수 있습니다. "색상 구성표 설정" 기능을 사용하여 JS 및 BAM을 사용하여 슬라이더 값을 CSS 변수에 연결합니다.

2. 가변 글꼴

CSS 사용자 정의 속성과 같은 가변 글꼴은 한동안 사용되었지만 아직 널리 사용되지는 않습니다. 한 가지 이유는 글꼴 자체가 필요할 뿐만 아니라 개발자가 채택하기 위해 더 많은 인기를 얻어야 하는 시간, 자습서/가이드 및 기술의 수입니다. 글꼴을 선택하고 변경 사항을 적용할 수는 없습니다.

탐색 및 실험에 사용할 수 있는 이동 웹 사이트 중 하나는 가변 글꼴입니다. 이 용어를 처음 듣는 경우를 대비하여 좋은 데모 역할도 합니다. 가변 글꼴을 사용 하면 단일 파일 을 사용하고 두께 또는 기울기의 양을 완벽하게 제어 하면서 "글꼴 "font-weight" 또는 "font-style" 과 같은 속성을 적용할 수 있습니다.

빠른 갈색 여우

원천

왜 멋진가요?

글쎄, 그것이 우리, 개발자(그리고 디자이너)에게 글꼴이 보이는 방식에 거의 무한한 자유 를 준다는 것은 분명합니다. "font-weight: bold" 는 좀 과하지만 "normal"은 너무 가늘고 그 사이에 아무 것도 없다고 생각한 적이 있습니까?

글꼴 디자이너는 이를 잘 알고 있으며 종종 중간 속성을 제공합니다. 그들은 100(가벼운) 또는 900(매우 두꺼운)과 같은 숫자와 300, 400, 600, 700 등과 같은 숫자로 레이블을 지정합니다. 하지만 750이 필요할 수도 있습니다. 그리고 사용할 수 없습니까? 이제 가변 글꼴을 사용하면 됩니다!

가변 글꼴에는 또 다른 큰 이점이 있습니다. 잘 알고 계시겠지만 글꼴은 로드 시간 에 큰 영향을 미칩니다. 대역폭과 화면 렌더링 측면에서 모두. 다소 표준적인 요청은 다음과 같습니다.

  • headings-font-normal.woff2
  • headings-font-bold.woff2
  • body-normal.woff2
  • body-italic.woff2
  • body-bold.woff2

그 모든 장점으로 쉽게 500kb를 넘을 수 있습니다. 가변 글꼴을 사용하면 하나의 글꼴만 필요하고 다른 모든 변형을 받을 수 있습니다. 한 가지 부탁입니다.

Variable Fonts: Introduction to variable fonts on the web에서 더 읽을 수 있습니다.

3. 더 많은 자바스크립트!

이것은 "눈이 휘둥그레지는" 제목이지만 사실입니다! 프론트엔드 개발자는 "JS 개발자"일 뿐만 아니라 "CSS/HTML" 개발자이기도 합니다. 그리고 이 제목은 그들을 위한 것입니다.

더 많은 자바스크립트

JavaScript는 단순한 트렌드가 아니지만, 누구에게 묻는가에 따라 "네, 요즘은 JS를 활성화하지 않으면 웹사이트도 열 수 없습니다" 또는 "감사합니다. 정보 페이지에 5MB 슬라이더 및 광고 로드 중"

그러나 아무리 긍정적인 측면과 부정적인 측면이 있더라도 그 활용도는 증가합니다. 그렇다면 어떤 JS 기반 기술/접근/도구가 더 트렌드가 되어야 할까요?

  • React/Vue는 WordPress(headless)와 같은 CMS의 전면입니다.
  • WebGL(Three.js) 3D 그래픽, 시뮬레이션 및 상호 작용.
  • VR 및 AR 콘텐츠.
  • 더 최적화된 빌드 워크플로(webpack, gulp).
  • 더 많은 제어/기능을 위한 브라우저 API.

그리고 더 깊이 들어가야 할 또 다른 큰 이유를 추가하려면 JS만 있으면 원하는 거의 모든 규모의 프로젝트를 기술적으로 구축할 수 있습니다. JS만 있으면 반응형 프론트엔드를 수행하고 일부 데이터 저장소에 연결하고 최상의 사용자 경험을 위해 브라우저의 API를 활용하고 프로젝트를 라이브로 배포할 수 있습니다. 설정에 대한 모든 조정은 설정에서 쉽게 수행할 수 있습니다.

4. 유틸리티 기반 스타일링

유틸리티 기반 스타일 지정은 미리 정의된 클래스를 통해 스타일을 적용하는 데 중점을 둡니다. 이것이 웹페이지의 스타일링이 일반적으로 의미하는 것입니다. 그러나 여기서는 표준 접근 방식과 약간 다릅니다. 그림자, 배경 등으로 .card 의 스타일을 지정하지 않습니다. .shadow 및 .bg-light 및 .br-5 (예: border-radius)로 HTML 요소의 스타일을 지정합니다.

그것은 단지 빠르게 무언가를 출력해야 하고 CSS에 대해 걱정하지 않는 JS 개발자에게 놀랍도록 잘 작동하는 접근 방식입니다.

이것은 전혀 새로운 것이 아니지만 Tailwind의 인기로 인해 개발자는 접근 방식을 재고하게 되었습니다.

Tailwindcss

원천

일부는 CSS에서 구성 요소를 실제로 변경하고 모든 곳에서 업데이트할 수 없는 "HTML로 CSS 작성"과 거의 비슷하다고 주장할 수 있습니다. 기술적으로는 사실이지만 예를 들어 구성 요소가 React /Vue 앱의 JS 파일인 경우 한 곳에서 업데이트합니다.

아마도 단점 중 하나는 다른 프레임워크를 배워야 한다는 것입니다. CSS가 아니라 일부 요소가 다음과 같이 보일 수 있으므로 속성을 기억해야 합니다.

class="text-xl font-semibold text-white sm:text-2xl sm:leading-7 sm:text-black md:text-3xl"

비록 그것을 좋아하는(그리고 그것을 싫어하는) 사람들이 항상 있을 것이지만, 그것은 많은 문제에 대한 훌륭한 해결책입니다. 또한 실제로 시도하기 전까지는 효과가 있는지 알 수 없습니다.

5. 새로운 CSS 기능

새로운 CSS 기능을 사용하는 것은 그 자체로 프론트엔드 기술 트렌드가 될 수 있습니다. 특정 기능이나 접근 방식에 대한 변경 사항은 아니지만 지금까지 코딩해 온 방식에 도전합니다. 전문가? 그것은 많은 문제를 해결합니다. 나쁜? 하위 호환성.

그러나 지난 1, 2년 동안 브라우저 공급업체의 발전 덕분에(Microsoft를 보면) 전 세계 대다수의 사용자가 그 어느 때보다 효율적으로 웹에 액세스할 수 있습니다.

CSS 그림자 부분

원천

CSS 사용자 정의 속성은 이러한 기능 중 하나이지만 약 6년 동안(그리고 상당히 중요) 자체 섹션이 있습니다.

쓰기 모드

쓰기 모드

너무 자주 사용되지는 않지만 많은 개발자가 오른쪽에서 왼쪽으로 쓰는 언어를 거의 지원할 필요가 없기 때문에 쓰기 모드가 존재합니다. 대시보드/프레임워크 및 다국어 사이트에 필수입니다. 예를 들어 margin-inline-start와 같은 방향 쓰기 속성에 대한 지원 증가 덕분에 RTL에 대해 margin-left를 margin-right로 덮어쓸 필요가 없습니다.

CSS 하위 그리드

우리에게는 플렉스가 있었고 그 다음에는 그리드가 있었습니다. 이제 grid 내부에 격자가 있습니다 . 하위 그리드는 Grid가 처음 지원되었을 때 개발자가 즉시 사용할 수 있을 것으로 기대했던 것입니다. 글쎄, 이제 우리는 그것을 가지고 있으며 소리만큼 멋지고 유용합니다. 가작: Flexbox 갭(그리드의 일부이기도 함). 그것은 그것이 말하는 대로 합니다.

:is

MDN에서 가져온 코드 조각으로 가장 잘 설명되는 속기 선택기:

 /* 헤더 안의 단락 선택, 메인
또는 호버링 중인 바닥글 요소 */
:is(헤더, 메인, 푸터) p:hover {
색상: 빨간색;
커서: 포인터;
}
 /* 위의 내용은 다음과 동일합니다. */
헤더 p:호버,
메인 p:hover,
바닥글 p:hover {
색상: 빨간색;
커서: 포인터;
}

마무리

지난 몇 년 동안 프론트 엔드 트렌드로 많은 것이 변경되었으며 개선 사항은 계속해서 제공될 것입니다. 원하는 전환수와 수익을 얻을 수 있는 웹사이트를 원한다면 지금 당장 프론트엔드 코딩 작업을 시작해야 합니다. 고객이 귀하의 웹페이지를 쉽게 사용할 수 있어야 귀하의 비즈니스와 상호 작용할 수 있습니다.

위에서 언급한 프런트 엔드 트렌드를 구현하고 이것이 귀하의 비즈니스 성장에 어떻게 도움이 되었는지 알려주십시오.