소호플렉스(Sohoflex) 웹 에이전시 블로그

2023년 이후의 반응형 디자인 가이드

소호플렉스 — Sun, 12 Feb 2023 16:03:36 +0900

원문 https://ishadeed.com/article/responsive-design/

The Guide To Responsive Design In 2023 and Beyond - Ahmad Shadeed

A modern look at responsive web design.

ishadeed.com

오늘날 유동적인 레이아웃 구축에 대해 생각할 때 더 이상 고정 너비 중단점을 갖는 것이 아닙니다. 대신 오늘날 우리가 구축하는 레이아웃은 거의 모든 장치 크기에서 작동해야 합니다. 놀랍게도 웹사이트는 여전히 적응형 디자인 패턴을 따르고 있으며, 여기에는 max-width뷰포트 너비에 따라 새로운 값을 가져오는 컨테이너가 있습니다.

"반응형"이라는 용어는 이제 많은 것을 의미합니다. 사용자 기본 설정을 확인하는 미디어 쿼리와 미디어 쿼리를 사용하지 않고도 유동적인 레이아웃을 만드는 데 도움이 되는 최신 CSS 기능이 있습니다. 요즘은 반응이 다릅니다. 참으로 신나는 시간입니다!

반응형 디자인?

"반응형 디자인"이라는 용어를 들었을 때 가장 먼저 생각하는 것은 다양한 장치 크기입니다. 여러분 중 일부도 같은 생각을 하고 계실 것입니다. 현재 반응형 디자인은 다양한 것을 의미합니다.

나는 반응형 디자인이 단순히 데스크탑용과 모바일용의 두 가지 버전으로 디자인된 웹 페이지를 갖는 것이라고 생각하는 클라이언트 및 디자이너와 이야기합니다. 이것은 오늘날 웹을 다루는 오래되고 시대에 뒤떨어진 방식으로 간주됩니다.

아래는 반응형 디자인이 필요한 일반적인 레이아웃입니다.

디자이너의 일반적인 반응형 적용방법은 다음과 같습니다.

메인 비주얼을 세줄로 감싸고,
글자 크기를 줄이고,
그리고 카드를 쌓습니다.

자! 이러한 반응형 디자인은 간단했으면 좋겠지만 고려해야 할 사항이 많습니다. 디자이너이자 프런트엔드 개발자로서 데스크탑 디자인을 보면 많은 질문이 있을 것입니다.

메인 비주얼 항목(콘텐츠 및 이미지)은 언제 줄 바꿈해야 합니까?
글꼴 크기가 유동적입니까? 아니면 수동으로 변경되는 고정 값입니까?
반응형 이미지를 사용해야 하나요?
간격은 유동적이어야 하나?
카드 목록
- 모바일과 데스크톱 크기 간에 표시되어야 하는 카드의 다른 변형이 있습니까? (안녕하세요, 크기 컨테이너 쿼리)
- 카드 이미지에 특정 화면 비율이 있습니까?
사용자 기본 설정: 사용자에 따라 변경되는 UI 세부 정보가 있습니까? - 동작 감소 - 테마/색상 체계

이 예를 고려하면 다음과 유사한 방식으로 생각할 수 있습니다.

Mordern CSS 사용

타이포그래피는 기능을 통해 뷰포트 너비에 반응합니다. clamp()
간격은 기능을 통해 뷰포트 너비에 반응합니다. clamp()
hero 섹션은 flexbox 래핑을 통해 콘텐츠에 반응합니다.
카드 그리드는 미디어 쿼리 없이 사용 가능한 공간에 응답합니다. minmax()
카드 구성 요소는 크기 컨테이너 쿼리 및 스타일 컨테이너 쿼리를 통해 래퍼에 응답합니다 .
마진과 패딩은 논리적 속성을 통해 웹사이트 언어에 반응합니다 .

Media Queries 사용

사이트 탐색은 뷰포트 너비에 반응합니다 .
테마는 운영 체제의 사용자 기본 설정에 반응합니다 .
카드 호버 효과 는 사용자가 사용하는 것에 반응합니다 (터치 대 마우스).

위 목록에서 테마 및 탐색은 미디어 쿼리를 통해 수행됩니다. 나머지는 clamp()비교 함수 및 컨테이너 쿼리와 같은 최신 CSS 기능에 관한 것입니다.

시간이 지남에 따라 사이트 탐색 및 바닥글과 같은 뷰포트 너비에 연결된 구성 요소에 대해 미디어 쿼리가 사용됩니다. 최신 CSS 기능을 사용하면 컨테이너 또는 사용자 기본 설정에 반응하는 레이아웃 및 구성 요소를 구축하는 데 도움이 될 수 있습니다.

반응형 디자인은 더 이상 미디어 쿼리에 관한 것이 아닙니다.

불행히도 내가 잘못 생각하는 사고 방식이 있습니다. 웹을 처음 접하는 많은 사람들은 "프레임워크 이름 입력"이 반응형 웹 사이트를 구축하는 방법이라고 생각합니다. 반응형 웹사이트를 구축하기 위해 "프레임워크 이름 입력"이 필요하지 않다고 클라이언트와 논쟁한 적이 있습니다. 나는 그들이 언급한 프레임워크의 구성 요소인 CSS 미디어 쿼리를 사용할 수 있다고 말했습니다.

우리 나라에서는 아랍어를 사용하지만 "Responsive"라는 단어는 아랍어화되었습니다. 즉 "Google it"이 영어 단어가 된 것처럼 아랍어 단어인 것처럼 말합니다. 그것은 좋지만 반응형 디자인이 고정 폭 중단점에 관한 것이 아니며 모바일, 태블릿 및 데스크톱에서 웹 사이트가 작동하도록 만드는 것이 아니라는 인식을 더 많이 공유해야 할 때입니다.

지난 수년에 걸친 반응형 디자인 방법

웹 개발에 대한 나의 여정은 2014년 중반에 시작되었습니다. 그 당시에는 반응형 디자인이 화제가 되었고 모두가 그것에 대해 이야기하고 있었습니다.

Bootsrap Framework (부트스트랩)

웹을 처음 접하는 사람으로서 매우 인기가 있는 부트스트랩 프레임워크에 대해 알게 되었습니다. 반응형 레이아웃을 만드는 가장 좋은 방법이라고 생각했습니다. 어느 날 저는 Bootstrap CSS를 제거하고 나만의 CSS 미디어 쿼리를 작성하기로 결정했습니다. 생각보다 어렵지 않아서 놀랐습니다.

Media Queries (미디어 쿼리)

부트스트랩이 더 쉽다는 생각을 하다 보니 CSS 미디어 쿼리가 어렵다는 생각이 들었고 제가 만나는 몇몇 프런트엔드 개발자들과 함께 오늘날에도 여전히 살아 있습니다. 그들에게 반응형은 부트스트랩과 같습니다. 저는 Bootstrap이 Mark Otto 가 만든 최고의 CSS 프레임워크 중 하나라는 사실을 무시할 수 없습니다 .

많은 프론트엔드 개발자들이 강력한 내비게이션 바와 그리드 시스템을 위해 Bootstrap을 사용하고 있었습니다. 나는 웹사이트를 조사하고 웹사이트가 부트스트랩으로 구축되었다는 것을 즉시 알던 때를 기억합니다(당시에는 "부트스트랩 냄새"라고 불렀습니다).

The Fixed-Width Breakpoints Mindset (고정중단점 넓이)

프레임워크를 사용하면 많은 개발자가 반응형이 모바일, 태블릿, 데스크톱의 세 가지 중단점에 관한 것이라고 생각하게 되었습니다. 나머지 또는 중간은 중요하지 않습니다.

내가 개인적으로 싫어하는 한 가지는 뷰포트 너비에 따라 변경되는 컨테이너 요소의 고정 너비를 갖는 것입니다.

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

위와 같이 사용하면 항상 공간이 제한됩니다 .container. 다음 그림을 참고.

뷰포트 너비가 작아지면 max-width컨테이너가 뷰포트보다 더 작은 너비가 되도록 합니다. 이 경우 컨테이너를 화면의 전체 너비로 확장하는 것이 훨씬 좋습니다.

max-width와이드 스크린에 매우 큰 컨테이너가 있는 것을 피하기 위해 하나만 필요합니다 .

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

더 자세한 예를 보여드리겠습니다.

카드 그리드가 있다고 가정합니다. 첫 번째 경우에는 여러 번 .container변경되는 환경에 살고 있습니다 .max-width

태블릿과 같은 보기에서 컨테이너는 에 의해 제한되어 max-width상당한 양의 빈 공간이 남습니다.

양쪽에 큰 공백이 있습니다. Container에 사용하는 것이 더 좋지 않습니까? 우리가 그것을 태블릿 크기로 보고 있다는 것을 고려하면.

더 작은 뷰포트에서 디자인을 볼 때 여전히 양쪽에 공백이 있습니다.

더 나은 방법이 있을까요? 그것은 낭비되는 여백의 적당한 크기입니다. 2023년에 그것을 시행해야 할 타당한 이유를 찾을 수 없습니다.

더 작은 뷰포트용 을 제거하면 max-width컨테이너가 전체 뷰포트 너비를 차지하게 됩니다.

더 작은 크기의 경우:

반응형 디자인과 눈길을 끌지 못하는 웹사이트

반응형 디자인이 눈길을 끌지 못하는 웹사이트를 만드는 것과 관련이 있다는 사실을 무시할 수 없습니다. 이는 부트스트랩 테마를 기반으로 테마를 구축하는 데 적용됩니다.

많은 웹사이트가 똑같이 보이기 시작했습니다. 2016년 초 당시의 "반응형 디자인"을 반영한 트윗을 보았습니다 . 제 생각에는 이것은 CSS Bootstrap의 인기 때문입니다.

가능한 두 웹사이트 중 현재 디자인하고 있는 웹사이트는 무엇입니까?

웃기지만 현실적이지 않나요?

이렇게 만든 반응형 디자인은 쉽고 예측 가능한 프로세스처럼 보입니다. 나도 그 스타일에 영향을 받은 디자이너 중 한 명이었다. 지금은 그 시절을 기억하는 것이 이상합니다.

현재 CSS 기능은 모든 화면 크기에서 무엇이든 가능하도록 강력해졌습니다.

다른 관점에서 반응형 디자인을 탐색할 준비가 되셨습니까? 갑시다.

웹은 기본적으로 반응형입니다.

가장 먼저 해야 할 일, 맞죠? 저에게는 웹이 기본적으로 반응형이라고 생각합니다. 생각해 보면 CSS 없이 HTML 요소를 추가하는 것은 모든 화면 크기에서 작동합니다.

다음은 제목, 단락 및 목록을 추가하는 예입니다.

서로 옆으로 이동하기로 결정할 때까지 기본적으로 반응합니다. 다음 CSS를 추가했다고 가정해 보겠습니다.

body {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-gap: 1rem;
}

ul {
	grid-column: 2/3;
	padding-left: 1rem;
}

위 그림에서 잘 보이시죠? 그러나 더 작은 크기로 크기를 조정하면 재미가 시작됩니다.

따라서 우리가 레이아웃 디자인을 창의적으로 시작하지 않는 한 웹은 기본적으로 반응형입니다.

2023년 이후의 반응형 디자인

미디어 쿼리 측면에서 반응형 디자인을 생각하는 대신 이러한 범주의 반응형 디자인을 생각하고 싶습니다.

Responsive to Content (컨텐츠에 반응)

다양한 콘텐츠 길이를 처리할 수 있는 CSS를 작성함으로써 사용자가 다른 콘텐츠를 추가했다고 해서 UI가 작동하고 중단되지 않도록 할 수 있습니다.

Responsive to The Viewport (뷰포트에 반응)

구성 요소가 뷰포트에서만 작동해야 합니까? 이는 사이트 머리글, 바닥글 및 전체 너비 섹션에 적용될 수 있습니다. 뷰포트 크기에 따라 작동해야 합니다.

그리고 뷰포트는 너비에 관한 것이 아닙니다. 또한 경우에 따라 높이를 쿼리해야 합니다.

@media (min-height: 700px) {
  .site-header {
    /* position: fixed or position: sticky */
  }
}

Responsive to The Container (컨테이너에 반응)

구성 요소가 문서의 위치에 따라 스타일을 변경해야 하는 경우 컨테이너 쿼리가 유용합니다.

Responsive to The User Preferences (사용자 선호도에 반응)

특정 사용자 기본 설정에 따라 구성 요소를 변경해야 합니까? 예: 테마 변경, 글꼴 크기, 축소, 움직임 감소.

현재 반응형 디자인에 대해 어떻게 생각하고 있습니까?

반응형 웹사이트를 구축하는 것은 웹사이트를 핵심적으로 유연하게 만드는 것입니다. 유체는 너무 많은 것을 의미합니다.

Container Queries (컨테이너 쿼리)
Wrapping (래핑)
Element Sizing (요소 크기 조정)
Font Sizes (글꼴 크기)
Spacing (간격)
Available Space (사용 가능한 공간)
Logical Properties (논리적 속성)

Flexbox, 그리드 및 clamp()비교 기능과 같은 CSS 기능을 사용하여 특정 상황에서 수행할 작업을 브라우저에 지시할 수 있습니다. 디자인의 모든 세부 사항을 수동으로 처리할 필요가 없습니다.

구성 요소를 구축하는 동안 작업하는 동안 유동적 사고 방식을 유지하는 것을 선호합니다. 예를 들어 보겠습니다.

A Basic Example (기본적인 예)

최신 CSS는 미디어 쿼리에 완전히 의존하지 않고 반응형 스타일을 작성할 수 있는 방법을 제공합니다. 예를 들어, 이 flex-wrap속성은 충분한 공간이 있을 때 형제의 래핑을 허용하는 데 유용합니다.

.reaction-button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

여기에 세 가지 좋은 세부 사항이 있습니다.

조건부로 새 줄로 래핑됩니다. 공간 없음? 좋아요, 물건을 포장하세요.
가로 및 세로 스타일 모두에서 중심을 유지합니다.
gap주문형 작품 . 수평인 경우 행 간격만 활성화됩니다. 쌓이면 1열이 작동합니다.

위의 모든 것이 미디어 쿼리를 사용하지 않고 만들어졌다는 것이 흥미 롭습니다. 같은 생각을 더 큰 구성 요소에 적용해 봅시다.

Mordern Ways To Build Responsive Layouts (반응형 레이아웃 현대적인 방법)

CSS는 요즘 매우 강력해지고 있습니다. CSS 변수, flexbox 및 그리드를 훌륭하게 지원합니다. 선택기 및 컨테이너 쿼리 와 같은 최신 기능은 :has최신 브라우저에서 모두 지원됩니다(거의).

이는 반응형 디자인의 미래가 바뀔 것임을 의미합니다. 전체 페이지를 반응형으로 취급하는 것이 아닙니다. 대신 구성 요소에 대한 반응형 CSS를 작성하고 브라우저가 자체 작업을 수행하여 구성 요소가 특정 스타일을 가져야 하는 시기를 결정하도록 할 것입니다.

다음 섹션에서는 특정 최신 CSS 기능에 대해 설명하고 진정한 반응형 디자인을 작성하는 데 어떻게 도움이 되는지 설명합니다. 그들 중 일부는 미디어 쿼리가 전혀 필요하지 않습니다.

CSS Flexbox (플렉스박스 레이아웃)

이전 예제와 마찬가지로 flex-wrap속성을 사용하여 플렉스 항목이 새 줄로 래핑되도록 할 수 있으며 flex각 플렉스 항목에 대한 값을 지정하여 이를 제어할 수 있습니다.

이는 강력하며 반응형 구성 요소의 기반을 구축하는 데 도움이 될 수 있습니다.

기사 구성 요소의 레이아웃 구축

이 예에서는 왼쪽에 이미지가 있고 오른쪽에 콘텐츠가 포함된 카드 구성 요소가 있습니다.

이전 예제와 마찬가지로 flexbox는 이를 기반으로 완벽하게 작동합니다. 제목, 이미지, 여백 등에 대한 기본 스타일을 작성했다고 가정하면 다음과 같이 끝낼 수 있습니다.

다음으로 레이아웃 작업을 시작할 수 있습니다. 래핑의 이점을 얻기 위해 기본적으로 flexbox를 사용합니다.

.c-card {
  display: flex;
}

이제 카드의 썸네일과 콘텐츠가 서로 옆에 있습니다. 다음은 래핑을 허용하고 기본 정렬을 재설정하는 것입니다.

.c-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

동일한 초기 결과로 돌아왔습니다! 괜찮습니다. 해결하겠습니다.

이는 이미지가 너무 커서 결과적으로 새 줄로 래핑되기 때문에 발생합니다.

다음에 해야 할 일은 강력한 속성을 사용하여 항목을 래핑할 시기를 브라우저에flex 지시하는 것입니다 .

.c-article__thumb {
  flex: 1 1 550px;
}

.c-article__content {
  flex: 1 1 350px;
}

아이디어는 flex사용 가능한 공간에 따라 항목을 늘리거나 줄이는 데 사용할 수 있다는 것입니다.

당신은 그것을 볼 수 있습니까? 반응형 디자인은 더 이상 미디어 쿼리에 관한 것이 아닙니다.

.c-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.c-article__thumb {
  flex: 1 1 550px;
}

.c-article__content {
  flex: 1 1 350px;
}

wrap-reverse썸네일 대 콘텐츠의 순서를 뒤집는 데 사용할 수도 있습니다 .

.c-card {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: flex-start;
}

카드에 대해 동일한 접근 방식을 사용할 수 있을 뿐만 아니라 말 그대로 다른 모든 것에 사용할 수 있습니다.

Section Header (섹션 헤더)

Chris Coyier는 그의 훌륭한 기사에서 Alignment Shifting Wrapping 이라고 불렀습니다. Chris의 기사에서 영감을 얻은 다음 예를 고려하십시오.

제목과 링크가 포함된 섹션 헤더가 있는 섹션이 있습니다.

공간이 충분하지 않으면 제목을 새 줄로 줄 바꿈해야 합니다. 필요한 것은 다음과 같습니다.

.section-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.section-header__title {
  flex: 1 1 400px;
}

제목의 값 400px은 래핑을 발생시키는 사용자 지정 중단점입니다. 제목이 400px 이하이면 줄 바꿈됩니다.

미디어 쿼리를 사용하면 다음과 같이 수행할 수 있습니다.

@media (min-width: 650px) {
  .section-header {
    display: flex;
    /* No wrapping is needed */
  }
}

이것은 다른 래퍼에서 섹션 헤더를 사용해야 할 때까지 잘 작동합니다. 예를 들어, 메인 섹션과 제쳐두고.

이 flex-wrap솔루션을 사용하면 여백과 같은 작은 컨테이너에 사용되는 경우에도 섹션 헤더가 작동할 수 있습니다.

항목이 서로 너무 가까우면 항목이 동적으로 래핑되고 레이아웃에서 이상한 일이 발생하지 않습니다.

미디어 쿼리 중에는 Aside 요소 내의 섹션 헤더를 대상으로 하는 변형 클래스를 사용해야 합니다.

@media (min-width: 800px) {
  .section-header--aside {
    display: flex;
    /* No wrapping is needed */
  }
}

이것은 나에게 해킹으로 간주됩니다. 모든 경우에 작동하지는 않습니다. 겨드랑이를 바꾸는 순간 깨질지도 모릅니다.

참고: 이 문제는 컨테이너 쿼리를 사용하면 훨씬 더 잘 해결할 수 있습니다. 이 기사의 뒷부분에서 설명하겠습니다.

CSS Grid Layout (그리드 레이아웃)

오늘날 고도로 사용자 정의 가능한 그리드 레이아웃을 구축할 수 있습니다. 결국 책을 쓰게 될 수도 있기 때문에 CSS 그리드에 대한 모든 것을 설명하지는 않겠지만 현재 모든 브라우저에서 지원되는 몇 가지 사항을 공유하겠습니다.

다음 예를 고려하십시오.

이것은 CSS 그리드 영역 에 대한 내 기사의 예입니다 . 이것은 제가 몇 년 전에 작업한 프로젝트에서 가져온 것입니다. 팀은 레이아웃의 두 가지 변형이 필요했고 작업에 CSS 그리드보다 더 나은 것을 생각할 수 없었습니다.

<div class="c-newspaper">
  <article class="c-article c-article--1"></article>
  <article class="c-article c-article--2"></article>
  <article class="c-article c-article--featured"></article>
  <article class="c-article c-article--3"></article>
  <article class="c-article c-article--4"></article>
  <article class="c-article c-article--5"></article>
  <article class="c-article c-article--6"></article>
  <article class="c-article c-article--7"></article>
</div>

.c-newspaper {
  display: grid;
  grid-template-columns: 0.2fr 0.6fr 0.2fr;
  grid-template-areas:
    "item-1 featured item-2"
    "item-3 featured item-4"
    "item-5 item-6 item-7";
  grid-gap: 1rem;
}

.c-article--1 {
  grid-area: item-1;
}

.c-article--2 {
  grid-area: item-2;
}

/*..And so on for other elements.. each one has a grid-area..*/

.c-article--7 {
  grid-area: item-7;
}

.c-article--featured {
  grid-area: featured;
}

두 번째 변형의 경우 템플릿 영역을 변경하기만 하면 됩니다.

.c-newspaper.variation-1 {
  grid-template-areas:
    "featured featured item-3"
    "item-1 item-2 item-4"
    "item-5 item-6 item-7";
}

더 작은 뷰포트에서는 템플릿 영역을 변경하기 위해 미디어 쿼리가 필요하지만 이는 강력합니다. 약간의 안내를 받으면 이 추천 편집 레이아웃에 대한 무제한 옵션 세트를 만들 수 있습니다.

CSS 그리드의 또 다른 유용한 기능은 minmax()기능입니다. 즉, 미디어 쿼리 없이 열의 너비를 동적으로 변경하는 그리드를 만들 수 있습니다.

다음 CSS를 고려하십시오.

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  grid-gap: 1rem;
}

3열 그리드가 있고 뷰포트 크기가 작아지면 크기가 조정되기를 원합니다. minmax()와 섞인 기능은 그것에 auto-fill완벽합니다.

이 minmax()기능이 없으면 뷰포트 너비에 따라 열을 변경하기 위해 미디어 쿼리를 사용할 수밖에 없습니다.

간단한 예:

@media (min-width: 992px)
	.wrapper__item {
		width: 33%;
	}
}

내 기사에서 minmax()에 대해 자세히 알아볼 수 있습니다 .

Fluid Sizing (유동형 사이징)

오늘날의 반응형 디자인에서 제가 가장 좋아하는 측면 중 하나는 유동적인 레이아웃을 구축하는 것입니다. 처음에는 뷰포트 단위를 사용하여 가능했지만 그렇게 완벽하지는 않았습니다. 제한을 추가하는 방법이 필요했습니다. 그렇지 않으면 큰 화면에서 글꼴 크기가 커질 수 있습니다.

h2 {
  font-size: calc(1rem + 5vw);
}

/* If the viewport width is 2000px or more, limit
* the font size to 4rem.
*/
@media (min-width: 2000px) {
  font-size: 4rem;
}

거의 3년 전에 우리는 CSS 비교 기능을 지원했습니다 . 미디어 쿼리 없이도 진정으로 유동적인 레이아웃을 구축할 수 있는 게임 체인저입니다.

다음 예를 고려하십시오.

h2 {
  font-size: clamp(1rem, 0.5rem + 2.5vw, 3rem);
}

글꼴 크기는 뷰포트 너비에 따라 변경됩니다. 이것을 시각화하고 싶다면 다음 그림과 같을 수 있습니다.

미디어 쿼리로 그렇게 하려면 9개의 쿼리로 끝납니다. 당신은 그것을 상상할 수 있습니까? 전혀 실용적이지 않습니다. 웹 사이트 내의 많은 사용 사례에 대해 그렇게 한다고 상상해보세요. 악몽입니다!

옛날에는 이런 일을 하곤 했습니다.

h2 {
  font-size: 1rem;
}

@media (min-width: 800px) {
  h2 {
    font-size: 2.5rem;
  }
}

@media (min-width: 1400px) {
  h2 {
    font-size: 5rem;
  }
}

유동적인 사이징을 통해 우리는 고정된 값에서 유동적인 값으로 생각을 전환할 것입니다. 브라우저에 최소 및 최대 값을 제공하고 나머지 작업을 수행하도록 하는 것으로 상상합니다.

유체 사이징이 실제로 빛을 발하는 몇 가지 예를 살펴보겠습니다.

Dynamic Gap (다이나믹 갭)

속성을 사용하여 gap뷰포트 또는 컨테이너 크기에 따라 변경되는 동적 간격을 만들 수 있습니다.

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1rem, 2vw, 24px);
}

영웅 섹션의 경우 뷰포트 크기에 따라 수직 패딩을 변경해야 할 수도 있습니다. 뷰포트 단위가 포함된 CSS는 clamp()이에 적합합니다.

.hero {
  padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

Size Container Queries (크기 컨테이너 쿼리)

이제 모든 브라우저에서 CSS 컨테이너 쿼리가 지원 됩니다. 2022년 8월에 Chrome에서 안정화되었습니다. 컨테이너의 너비를 기반으로 작동하고 이제 스타일 컨테이너 쿼리가 있기 때문에 "크기"라고 합니다.

이것은 게임 체인저이며 그것에 대해 글을 쓰는 동안 흥분을 억제할 수 없습니다. 즉, 구성 요소의 컨테이너 너비를 쿼리하는 방법을 제공합니다.

다음 그림을 고려하십시오.

왼쪽에서는 뷰포트 너비에 따라 카드가 변경되는 반면 오른쪽에서는 컨테이너 너비에 따라 카드가 변경되는 것을 확인하십시오.

몇 가지 사용 사례를 살펴보겠습니다.

Article Component (기사 구성요소)

컨테이너 쿼리에 대해 제가 가장 좋아하는 사용 사례 중 하나는 기사 구성 요소입니다. 컨테이너 너비에 따라 4가지 스타일을 가질 수 있습니다.

기본적으로 카드 모양입니다.
작은 미리보기 이미지가 있는 가로형 카드입니다.
큰 축소판이 있는 가로 카드입니다.
상위 항목이 너무 크면 스타일이 영웅과 유사하여 추천 기사임을 나타냅니다.

데모를 확인하십시오 .

Pagination Component (페이징 구성 요소)

컨테이너 너비에 따라 다른 버전의 페이지 매김 구성 요소를 토글할 수 있습니다. 이를 통해 언제 한 변형에서 다른 변형으로 전환해야 하는지 더 확실하게 알 수 있습니다.

.wrapper {
  container-type: inline-size;
}

@container (min-width: 250px) {
  .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .pagination li:not(:last-child) {
    margin-bottom: 0;
  }
}

@container (min-width: 500px) {
  /* Styles when container >= 500px */
}

내 CSS 랩에서 컨테이너 쿼리에 대한 더 많은 사용 사례를 살펴보세요.

Size Container Queries Units (크기 컨테이너 쿼리 단위)

뷰포트가 아닌 컨테이너를 기반으로 유동적인 크기 조정을 원하면 어떻게 됩니까? 이것은 이제 컨테이너 쿼리로 가능합니다.

vw간단히 를 로 바꾸면 됩니다 cqw.

.c-article__title {
  font-size: clamp(1.25rem, 2.5cqw + 1rem, 2.5rem);
}

.c-article__content > * + * {
  margin-top: clamp(0.8rem, 1cqw + 0.8rem, 1.5rem);
}

컨테이너 쿼리 단위는 컨테이너 너비를 기준으로 작동합니다. 결과적으로 우리가 얻는 값은 훨씬 더 유동적이고 기대됩니다. 그렇게 하면 원하는 모든 구성 요소에서 사용할 수 있습니다.

이것은 매우 강력합니다.

Style Container Queries (스타일 컨테이너 쿼리)

이것은 여전히 브라우저에서 안정되지 않았지만 곧 Chrome에 제공될 예정입니다. 즉, 요소에 특정 CSS 변수가 있는지 확인하고 이를 기반으로 하위 항목의 스타일을 지정할 수 있습니다.

Component-Level Theme Switching (구성 요소 수준 테마 전환)

경우에 따라 구성 요소가 있는 위치에 따라 구성 요소의 테마를 전환해야 할 수도 있습니다.

다음 예에서 통계 구성 요소가 두 번째 섹션에 있는 경우 테마를 어둡게 변경하고 싶습니다.

다음과 같이 할 수 있습니다.

.special-wrapper {
  --theme: dark;
  container-name: stats;
}

@container stats style(--theme: dark) {
  .stat {
    /* Add the dark styles. */
  }
}

스타일 쿼리 에 대해 자세히 알아보세요 .

Article Component (기사 구성요소)

컨테이너 너비를 기반으로 기사 스타일을 전환하는 것이 유용하지만 필요할 때만 허용해야 하는 경우가 있습니다. 스타일 쿼리가 가능합니다!

우리가 해야 할 일은 CSS 변수를 추가하고 거기에 있는지 확인하는 것입니다. 그렇다면 원하는 특정 스타일이 필요합니다.

.o-grid__item {
  container-type: inline-size;
  --horizontal: true;
}

@container (min-width: 400px) and style(--horizontal: true) {
  /* Horizontal style */
}

이렇게 하면 변수가 true 로 설정된 경우에만--horizontal 기사가 컨테이너 너비에 따라 변경됩니다 .

User Preferencess Media Queries (사용자 기본 설정 미디어 쿼리)

사용자 선호 미디어 쿼리의 예는 선호하는 색 구성표를 확인하는 것입니다.

이 미디어 쿼리는 사용자 기본 설정에 반응하는 스타일을 만듭니다 .

:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  /* dark mode styles */
}

더 좋은 점은 를 추가하면 color-scheme기본 양식 컨트롤 테마가 밝은 색에서 어두운 색으로 전환됩니다(Safari에서만 지원됨).

논리적 속성

다국어 웹 사이트에서 작업할 때 왼쪽에서 오른쪽(LTR) 및 오른쪽에서 왼쪽(RTL) 레이아웃을 모두 지원해야 합니다.

다음 예를 고려하십시오.

다음과 같은 구성 요소가 있습니다.

패딩(왼쪽 및 오른쪽)
왼쪽에 테두리
아이콘의 여백

CSS 논리적 속성을 사용하면 CSS를 한 번 작성할 수 있으며 사용자가 선호하는 언어에 반응합니다 .

.card {
  padding-inline-start: 2.5rem;
  padding-inline-end: 1rem;
  border-inline-start: 6px solid blue;
}

.card__icon {
  margin-inline-end: 1rem;
}

내 기사 및 RTL 웹 사이트용 CSS 작성에 대한 광범위한 가이드 에서 CSS 논리적 속성에 대해 자세히 알아볼 수 있습니다 .

Defensive CSS (방어적인 CSS)

우리가 작성하는 CSS는 또한 사용자 콘텐츠에 반응해야 합니다. 너무 길면 어떻게 해야 합니까? 우리는 이러한 결정을 조기에 결정해야 합니다.

제 프로젝트인 Defensive CSS가 바로 그것입니다. 꼭 한번 보세요!

Conclusioin (결론)

반응형 디자인은 미디어 쿼리에 관한 것이 아닙니다. 사고 방식을 바꾸고 최신 CSS의 잠재력을 최대한 활용할 때입니다. 나는 웹사이트 헤더와 같은 일반적인 것에 대한 미디어 쿼리가 필요할 수 있는 미래를 내다보고 나머지는 크기 컨테이너 쿼리, 유동적 크기 조정 및 새로운 기능이 무엇이든 알 수 있는 것에 반응할 수 있습니다.

지금은 반응형 디자인이 좋습니다.

추가 자료

나는 Una Kravets가 그것을 새로운 반응형이라고 부르는 것을 좋아합니다 . 이 기사는 아직 읽지 않았다면 반드시 읽어야 합니다.
Be the Browser's Mentor, not its micromanager는 앤디 벨(Andy Bell)이 지금 웹사이트를 디자인하는 방법을 생각하는 좋은 방법입니다.

소호플렉스(Sohoflex) 웹 에이전시
홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.

Firebase API 키 제한사항 적용

소호플렉스 — Tue, 24 Jan 2023 22:59:37 +0900

Firebase를 사용하면서 공개된 API 키가 보안에 안전한가 한 번쯤 생각하게 되는데 기본적으로 API키는 권한이 무제한 상태로 공개된 API키는 어디서나 사용할 수 있으므로 안전하지 않게 된다.

로컬에 소스를 내려받아 Firebase 자원에 모두 접근할 수 있는 권한을 획득하게 되는 것이다.

Google Cloud 공식 문서에서는 애플리케이션 제한사항과 API 제한사항을 모두 설정하기를 권고하고 있다.

Google Cloud 공식 문서 url

https://cloud.google.com/docs/authentication/api-keys?&_ga=2.125170185.-2096692231.1670484168#adding_http_restrictions

API 키를 사용하여 인증 | Google Cloud

의견 보내기 API 키를 사용하여 인증 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 이 페이지에서는 API 키를 사용하여 API 키를 지원하는 Google Cloud APIs 및 서

cloud.google.com

HTTP 리퍼러 적용하여 애플리케이션 제한걸기

HTTP 리퍼러를 사용하여 API 키를 사용할 수 있는 URL을 제한할 수 있다. 다음은 sohoflex.com의 http레퍼러 설정내용이다.

구글 클라우드 콘솔 접속하여 수정 : https://console.cloud.google.com

소호플렉스(Sohoflex) 웹 에이전시
홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.

Oss Insight - 오픈소스 순위

소호플렉스 — Sun, 15 Jan 2023 18:42:43 +0900

오픈소스 카테고리별로 인기 순위를 제공

프로젝트를 진행하게 되면 오픈소스를 하나 이상 사용하게 되는데 적당한 오픈소스를 찾을 때 참고할 수 있는 사이트

WYSIWYG Editor 순위

1. ueberdosis/tiptap
2. codex-team/editor.js
3. quilljs/quill
4. mdx-js/mdx
5. ianstormtaylor/slate
6. wangeditor-team/wangEditor
7. tinymce/tinymce
8. remarkjs/react-markdown
9. ckeditor/ckeditor5

Cross Platform GUI Tool 순위

1. tauri-apps/tauri
2. flutter/flutter
3. facebook/react-native
4. electron/electron

Testing Tools 순위

1. microsoft/playwright
2. cypress-io/cypress
3. keploy/keploy
4. SeleniumHQ/selenium
5. grafana/k6
6. testcontainers/testcontainers-java
7. appium/appium
8. metersphere/metersphere
9. mockito/mockito

Programming Language 순위

1. rust-lang/rust
2. golang/go
3. microsoft/TypeScript
4. nodejs/node
5. python/cpython
6. ziglang/zig
7. JetBrains/kotlin
8. PowerShell/PowerShell
9. JuliaLang/julia
10. apple/swift

Javascript Framework 순위

1. facebook/react
2. sveltejs/svelte
3. vuejs/vue
4. solidjs/solid
5. angular/angular
6. vuejs/core
7. alpinejs/alpine
8. preactjs/preact
9. jquery/jquery

CSS Framework 순위

1. tailwindlabs/tailwindcss
2. twbs/bootstrap
3. jgthms/bulma
4. Semantic-Org/Semantic-UI

소호플렉스(Sohoflex) 웹 에이전시
홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.

FLEXBOX FROGGY

소호플렉스 — Sat, 14 Jan 2023 19:17:10 +0900

https://flexboxfroggy.com/#ko

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

Flexbox Froggy는 Froggy와 친구들 돕는 CSS 코드 게임으로 개구리를 같은 색의 연잎으로 이동하도록 도와주면서 Flex레이아웃 속성을 이해하게 됩니다.

justify-content

요소들을 가로선 상에서 정렬합니다:

flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
center: 요소들을 컨테이너의 가운데로 정렬합니다.
space-between: 요소들 사이에 동일한 간격을 둡니다.
space-around: 요소들 주위에 동일한 간격을 둡니다.

align-items

요소들을 세로선 상에서 정렬합니다:

flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
stretch: 요소들을 컨테이너에 맞도록 늘립니다.

flex-direction

컨테이너 안에서 요소들이 정렬해야 할 방향을 지정합니다:

Flex의 방향이 column일 경우 justify-content의 방향이 세로로, align-items의 뱡향이 가로로 바뀝니다.

row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
column: 요소들을 위에서 아래로 정렬합니다.
column-reverse: 요소들을 아래에서 위로 정렬합니다.

order

Flex 요소의 순서를 지정합니다.

-1, 0 (default), 1, ...

align-self

지정된 align-items 값을 무시하고 Flex요소를 세로선 상에서 정렬합니다.

flex-start, flex-end, center, baseline, stretch

flex-wrap

Flex 요소들을 한 줄 또는 여러 줄에 걸쳐 정렬합니다.

nowrap: 모든 요소들을 한 줄에 정렬합니다.
wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

flex-flow

flex-direction과 flex-wrap이 자주 같이 사용되기 때문에, flex-flow가 이를 대신할 수 있습니다.
ex) flex-flow: row wrap;

align-content

여러 줄 사이의 간격을 지정할 수 있습니다. 이 속성은 다음의 값들을 인자로 받습니다:

flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

소호플렉스(Sohoflex) 웹 에이전시
홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.

HTML/CSS 텍스트 이펙트

소호플렉스 — Sat, 14 Jan 2023 17:52:35 +0900

CSS로 표현할 수 있는 텍스트 이펙트용 HTML

소스를 복사해서 사용할수 있는 텍스트 애니메이션 샘플이나 테크닉을, 코드 커뮤니티 사이트 Codepen에서 검색하여 정리

실제 코드를 보면서 샘플을 확인, 편집을 할 수 있으므로, 효율적으로 웹 제작에 적용할 수 있습니다.

Fluid text hover

https://codepen.io/robin-dela/pen/KKPYoBq

See the Pen Fluid text hover by Robin Delaporte (@robin-dela) on CodePen.

SVG textPath Animation on Scroll Tutorial | Keyssentials: Web Animation Tips by @keyframers

https://codepen.io/team/keyframers/pen/NWKyNqK

See the Pen SVG textPath Animation on Scroll Tutorial | Keyssentials: Web Animation Tips by @keyframers by @keyframers (@keyframers) on CodePen.

See the Pen Rotating Text by alphardex (@alphardex) on CodePen.

Variable Font Fun (CSS Animation Version)

https://codepen.io/electricgarden/pen/PooLxGJ

See the Pen Variable Font Fun (CSS Animation Version) by Tyler Durrett (@electricgarden) on CodePen.

DConstruct

https://codepen.io/cassie-codes/pen/vYYGMOB

See the Pen DConstruct by Cassie Evans (@cassie-codes) on CodePen.

GSAP 3 ETC Variable Font Wave

https://codepen.io/petebarr/pen/ExxgqBO

See the Pen GSAP 3 ETC Variable Font Wave by Pete Barr (@petebarr) on CodePen.

OK

https://codepen.io/cobra_winfrey/pen/xxxWYgQ

See the Pen OK by Adam Kuhn (@cobra_winfrey) on CodePen.

Directionally blooming words

https://codepen.io/jh3y/pen/pozmoPN

See the Pen Directionally blooming words by Jhey (@jh3y) on CodePen.

Variable font animation

https://codepen.io/michellebarker/pen/bPEWGK

See the Pen Variable font animation by Michelle Barker (@michellebarker) on CodePen.

Cassie!

https://codepen.io/cassie-codes/pen/mNWxpL

See the Pen Cassie! by Cassie Evans (@cassie-codes) on CodePen.

Matrix digital rain (animated version)

https://codepen.io/yuanchuan/pen/YoqWeR

See the Pen Matrix digital rain (animated version) by yuanchuan (@yuanchuan) on CodePen.

Pseudo 3D text

https://codepen.io/funxer/pen/KBmRoZ

See the Pen Pseudo 3D text by JK (@funxer) on CodePen.

background-clip — week 12/52

https://codepen.io/knyttneve/pen/OqdQZN

See the Pen background-clip — week 12/52 by Mert Cukuren (@knyttneve) on CodePen.

Animated blob SVG text clipping effect - Pt. 2

https://codepen.io/ZachSaucier/pen/ebrJJZ

See the Pen Animated blob SVG text clipping effect - Pt. 2 by Zach Saucier (@ZachSaucier) on CodePen.

Rollover

https://codepen.io/Tiopayo/pen/XxEVoo

See the Pen Untitled by Paul Roger (@Tiopayo) on CodePen.

Cascading text effects w/ Splitting + ScrollOut ✍️

https://codepen.io/jh3y/pen/vzqVWa

See the Pen Cascading text effects w/ Splitting + ScrollOut ✍️ by Jhey (@jh3y) on CodePen.

Block effect text intro

https://codepen.io/z-/pen/oPOVOL

See the Pen Block effect text intro by Zed Dash (@z-) on CodePen.

소호플렉스(Sohoflex) 웹 에이전시
홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.

스크롤 Hide/Show 메뉴

소호플렉스 — Sat, 14 Jan 2023 14:27:56 +0900

아래로 스크롤하면 사라지고 위로 스크롤하면 나타나는 메뉴

See the Pen 스크롤 숨김 메뉴 by 소호플렉스 (@sohoflex) on CodePen.

소호플렉스(Sohoflex) 웹 에이전시
홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.

OKR 작성 양식 모음

소호플렉스 — Mon, 9 Jan 2023 21:38:15 +0900

OKR 작성 양식을 제공하는 다양한 서비스들

Notion(노션) 템플릿 갤러리, Buffer의 OKR : https://www.notion.so/ko-kr/templates/buffer-okrs

Notion (노션) 템플릿 갤러리 – Buffer의 OKR

Notion 팀과 커뮤니티에서 만든 Notion 페이지입니다. 마음에 드는 페이지를 복제해 사용하거나 나의 페이지를 공유해 보세요.

www.notion.so

Altassian OKR template : https://www.atlassian.com/software/confluence/templates/okrs

OKRs template | Atlassian

This OKRs template will guide you through a proven method of goal setting. Identify objectives, desired results, and owners, and track your progress.

www.atlassian.com

Miro OKRs Template : https://miro.com/templates/okr/

OKR Template for Teams | Miro

Create OKRs to define your team's primary objectives and how to achieve them. Align everyone to your company's vision and set your team up for success.

miro.com

Aha! OKR Templates for Product Teams : https://www.aha.io/roadmapping/guide/templates/okr

OKR Templates for Product Teams [Free Downloads]

Our FREE OKR templates are easily customizable for your product team. Download these free OKR templates and customize them to fit your needs.

www.aha.io

OKR Templates.com : https://okrtemplates.com/

OKR Templates - Objectives and Key Results Templates

Get Started with OKRs by Using These Templates and Examples

okrtemplates.com

Kanbanize OKR Templates : https://kanbanize.com/okr-resources/okr/templates

OKR Template: Key Characteristics & How to Create One?

OKR templates can help you with your planning, tracking, and reporting efforts. Learn how to build an OKR template format and what are its key traits.

kanbanize.com

Monday.com : https://monday.com/templates/okr

Intuitive OKR Template | monday.com

Set your goals with this intuitive, easy to-use Objectives & Key Results template by monday.com

monday.com

SlideShare : https://www.slideshare.net/CHULYUNJUNG1/okrpptx

OKR실행카드_샘플및양식.pptx

채용팀 A급 슈퍼 루키 채용으로 대기 고객 없애기 수습 기간 A+ 채용 결과 8명 만들기 1개월 압축 성장 교육 Program 검증 8명 배치 완료 및 현장 피드백 ‘매우 만족’ 획득 2020.1.2 ~ 2020.3.20 윌리엄,

www.slideshare.net

소호플렉스(Sohoflex) 웹 에이전시
홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.

OKR: 목표 및 주요 결과에 대한 최고의 가이드

소호플렉스 — Sun, 8 Jan 2023 23:03:33 +0900

원문 : https://www.atlassian.com/ko/agile/agile-at-scale/okr

무언가, 무엇이든 성취하고 싶을 때 원하는 것은 선호하는 결과를 바탕으로 합니다. 이것은 어릴 때 개발된 아주 단순하고 기본적인 인간의 개념입니다. 이것은 나타내는 한 가지 방법으로 다음 문장이 있습니다.

나는 ____________(으)로 측정한 대로 ________할 것입니다.

이것이 John Doerr가 자신의 저서 Measure what Matters에서 OKR(목표 및 주요 결과)를 설명한 방법입니다. 단순한 개념이지만 비즈니스 세계는 움직이는 부분이 많은 복잡한 곳입니다. 그러나 간단한 원칙을 고수하면 큰 결과가 나타날 수 있습니다.

OKR이란 무엇입니까?

OKR은 목표를 정의하고 결과를 추적하는 데 널리 사용되는 관리 전략으로, 측정 가능한 목표에 대한 정렬 및 참여를 만드는 데 도움이 됩니다. 1970년대에 Intel에서 소개하여 대중화된 이 전략은 직원들이 기업 헌장을 이해하고 참여하도록 지원 위해 기술 기업 전반에 확산되었습니다. 연구에 따르면 팀원은 팀에서 달성하려는 목표와 더 나아가 작업의 중요성을 명확하게 파악할 때 업무 수행 시 참여도와 생산성이 더 크게 높아집니다.

"직원이 맡은 직무가 업무에서의 중요성이 높다고 인식하면 직무 성과가 높아집니다."
-- "업무의 중요성: 직무 성과 효과, 관계 메커니즘 및 경계 조건” Journal of Applied Psychology.

OKR은 널리 사용되는 MBO(목표별 관리) 관행을 개선한 것입니다. 차이점은 OKR은 하향식 관료적 프로세스와 달리 더 협력적인 프로세스라는 점입니다. MBO를 처음 대중화한 Peter Drucker는 관리자가 조직의 목표를 검토한 다음 작업자의 목표를 설정해야 한다고 제안했습니다. 반대로 OKR은 조직 내 팀에 의존하여 높은 수준의 목표를 달성하고 각 특정 영역에 대해 개선합니다. 또한 팀이 높은 수준의 목표를 달성하기 위해 조직의 다른 파트너와 협력해야 하는 경우 해당 팀은 적절한 정렬을 확인하기 위해 협업하고 OKR을 함께 작성할 수 있습니다. 이것은 "작업을 수행하느라 바빴습니까?"에서 "조직의 전진을 위해 추진한 것이 있습니까?"로 질문이 바뀌는 사고방식의 전환입니다.

“OKR 프로세스”에 대해 생각하는 것이 “목표”와 “주요 결과”만 고려하는 것보다 더 유용합니다. 운영 환경 변화에 따라 정기적으로 검토 및 수정되지 않는 정적인 목표는 빠른 속도로 오래되고 의미가 없어집니다. 명확한 목표와 구체적이고 측정 가능한 결과의 작은 집합 및 이러한 조치에 대한 진행 상황을 검토하는 정기적인 프로세스를 결합하는 것이 OKR을 진정으로 유용하게 만듭니다.

OKR 정의

OKR에는 달성하려는 목표와 목표 달성을 측정하는 주요 결과라는 두 가지 중요한 부분이 있습니다.

OKR 코치, 작가, 연사 겸 에반젤리스트인 Felipe Castro는 OKR의 두 가지 구성 요소를 다음과 같이 요약합니다.

목표: 달성하려는 것에 대한 기억할 수 있는 정량적 설명입니다. 목표는 짧고, 영감을 주고, 참여할 수 있어야 합니다. 목표는 팀에 동기를 부여하고 도전적이어야 합니다.
주요 결과: 목표를 향한 진행 상황을 측정하는 메트릭의 집합입니다. 각 목표에 대해 2~5개의 주요 결과 집합이 있어야 합니다. 그보다 많으면 아무도 기억하지 못할 것입니다.

이 정의에는 몇 가지 핵심 사항이 있습니다. 첫째, 목표는 간략하고 참여할 수 있어야 팀이 쉽게 기억할 수 있습니다. 다음으로 주요 결과를 추적할 수 있는 메트릭의 수가 적어야 합니다. 이러한 메트릭은 적시에 측정할 수 있어야 합니다. 2년 후에만 결과를 볼 수 있는 경우 분기별로 진행 상황을 검토할 수 없습니다.

목표 예시

Steven Covey가 성공하는 사람들의 일곱 가지 습관에서 쓴 것처럼 “끝을 염두에 두고 시작하세요.” 이것은 도달하려는 목표를 식별하는 데 완벽하게 부합합니다.

몇 가지 상위 목표는 다음과 같습니다.

고객 만족 향상
반복 수익 증대
시스템 성능 확장
서비스를 제공하는 고객 수 늘리기
시스템에서 데이터 오류 수 감소

각 기업에서 중요한 것은 특정 상황(시장의 힘, 고객 요구 사항, 경쟁 환경, 규제 환경 등)과 관련된 목표를 식별하는 것입니다. 그리고 목표는 조직 내 각 팀의 활동을 안내하는 데 도움이 될 것입니다. “수익성 유지”라는 목표를 갖는 것은 대부분의 회사에서는 괜찮지만, 그 목표가 너무 수준이 높아 팀이 얼마나 “수익성”이 있는지 결정하는 데 도움이 되지 않습니다. “장기 목표를 달성하는 데 도움이 되도록 다음 분기에 달성할 수 있는 것”이라는 관점에서 목표를 구성하면 팀이 활동을 정기적으로 되짚어보고 다시 정렬할 수 있는 더 작은 단계에 노력을 집중할 수 있습니다.

주요 결과의 예

“주요 결과”는 일련의 조치를 이행한 후 기대되는 결과입니다. OKR과 관련된 일반적인 실수는 원하는 결과를 목표 달성에 사용되는 노력과 혼동하는 것입니다. 예를 들어, 아래의 경우 목표는 시스템에서 발생하는 데이터 오류 수를 줄이는 것입니다. 그러나 새로운 공급업체 릴리스 설치가 지정된 주요 결과이지만, 추적된 데이터 오류나 향후 목표에 대한 언급은 없습니다. 최신 릴리스를 설치하여 상황이 개선되었는지, 더 나빠졌는지 또는 효과가 없는지 확인할 수 없습니다.

하지 말아야 할 일: 목표를 달성하기 위해 취한 노력을 주요 결과로 착각합니다. 예를 들면 다음과 같습니다.

목표: 시스템의 데이터 오류 수 감소
주요 결과: 공급업체 패키지의 릴리스 10.0 설치

아래 예에서는 동일한 목표를 유지하고 개선이 이루어졌는지 추적하는 주요 결과를 지정하는 방법을 보여줍니다. 원하는 목표를 달성하기 위해 다양한 활동이 함께 수행될 수 있습니다.

해야 할 일: 측정 가능한 결과 식별:

목표: 시스템의 데이터 오류 수 감소
주요 결과:
- 지원 데스크에 보고된 데이터 품질 오류의 수로 측정
- 자동으로 채워질 수 없는 주문의 수로 측정
- 고객이 보고한 주문 오류로 측정

목표 및 주요 결과 매칭

후행 지표와 달리 목표의 주요 지표인 주요 결과를 찾는 것이 중요합니다. 정기적으로 자주 측정하여 전반적인 목표 달성으로 이어지는 결과를 원합니다.

목표	메트릭
고객 만족	순 프로모터 점수 설문 조사 결과 고객 이탈률 도입률 참여 시장 점유율 (대비 경쟁사) 전환율
반복 매출	분기 매출 구독
시스템 성능	동시 사용자 고객의 수 성능 불만의 수 중요 이벤트를 작동한 모니터링 시스템의 수

OKR을 통한 성공 추적

점수 – 0에서 1 사이의 슬라이딩 척도로, KR에 대해 명시된 목표를 놓쳤는지, 가까이 왔는지 또는 도달했는를 나타냅니다. 예를 들면 다음과 같습니다.

.3 = 목표에 크게 못 미친 경우
.7 = 목표를 달성하지 못했지만 큰 진전을 이룬 경우
1 = 도전적 목표를 달성한 경우

맞습니다. 주요 결과에서 0.7점을 득점하는 것은 성공으로 간주됩니다! 달성하기 어려운 도전적 목표를 설정하고 완벽한 점수 없이 분기를 끝낸 경우에도 실패로 느끼지 않아야 합니다.

결과에서 자주 1.0점을 획득하는 경우 좀 더 도전적 주요 결과 목표로 바꿀지 생각해 볼 수 있습니다.

Atlassian에서는 간단한 Confluence 템플릿을 사용하여 OKR에 점수를 매기고 진행 상황을 더 광범위한 조직에 전달합니다.

OKR 및 애자일 개발

애자일 개발과 OKR은 완벽하게 결합됩니다. 애자일 개발은 생각을 바꾸는 비용을 줄여준다고 합니다. 애자일 계획에는 개발 진행 상황을 확인하고, 기업의 컨택스트(경쟁, 고객 요구 사항, 규제 요구 사항, 시장 상황)를 평가하고, 이 정보를 기반으로 조정하는 정기적이고 예정된 케이던스가 필요하기 때문입니다. 목표와 주요 결과를 명확하게 전달하면 투명성을 제공합니다.

분기별 검토는 “제공하기로 약속한 결과를 제공했습니까?”에서 “원하는 목표를 달성했습니까?”로 질문이 바뀔 수 있습니다. 이 두 가지 질문을 결합하면 조직에서 경로를 계속 진행할지 아니면 수정할지 결정할 수 있습니다.

OKR을 비즈니스 전략에 맞게 정렬

OKR을 수립할 때 조직의 가이드라인을 확인하는 것이 중요합니다. 따라서 최상위 OKR을 조직의 미션, 비전 및 “북극성” 가치에 맞게 조정해야 합니다. OKR이 "무엇" 및 "방법"을 정의하는 데 도움이 되는 경우 비전은 그 "이유"를 강제로 적용해야 합니다. 이 계단식 다이어그램은 회사의 비전이 연간 및 분기별 OKR과 어떻게 연결되어야 하는지를 보여줍니다. 또한 전체 전략 계획 연습에서 OKR이 어디에 적합한지 보여줍니다.

목표는 사명과 회사의 가치를 뒷받침해야 하지만 장기 및 단기(또는 1년) 목표에 밀접하게 정렬되어야 합니다.

OKR로 시작하기

OKR을 도입하는 한 가지 방법은 조직이 일년 전체에서 달성하려는 3~4가지 목표를 파악하도록 하는 것입니다. 이것은 일반적으로 CEO 수준에서 수행합니다. 그런 다음 조직의 각 부서에서 해당 연도의 매 분기에 달성할 수 있는 관련 목표를 파악하도록 합니다. 큰 연간 목표 하나와 더 작은 분기 목표를 조합하면 조직에서 특정 영역의 목표가 전체 조직에 어떻게 기여하는지 파악하는 데 도움이 될 수 있습니다.

목표를 향한 진행 상황을 확인할 수 있도록 측정 가능한 주요 결과를 식별하는 것이 중요합니다. 1년에 한 번만 측정할 수 있는 주요 결과를 설정하면 작업이 목표 달성에 도움이 되는지 알 수 있는 기회는 1년에 한 번뿐입니다. 조직이 빨라지는 변화 속도에 대응하는 환경에서 매년 한 번 진행 상황을 확인하는 것만으로는 충분하지 않습니다.

OKR을 설정하고 점수를 매기는 과정에 대한 자세한 설명을 보려면 이 OKR 플레이를 확인하세요.

소호플렉스(Sohoflex) 웹 에이전시
홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.

Html & CSS 로 만들어진 수백개의 무료 UI

소호플렉스 — Sat, 7 Jan 2023 11:12:42 +0900

홈페이지 : https://uiverse.io/

Html & CSS로 만들어진 UI 컴포넌트

- 640여개

- 100% 무료

- 5,925명 이상의 커뮤니티 기여자

- 컴포넌트 종류 : 버튼, 체크박스, 토글, 카드, 로딩, 인풋

소호플렉스(Sohoflex) 웹 에이전시
홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.

2023년 8가지 그래픽 디자인 트렌드

소호플렉스 — Fri, 6 Jan 2023 02:52:44 +0900

원문 : https://venngage.com/blog/graphic-design-trends/

그래픽 디자인은 시대의 신호입니다... 그리고 2023년의 그래픽 디자인 트렌드도 예외는 아닙니다.

팬데믹 이후의 혼란은 급속한 사회 및 기술 변화를 가속화했습니다. 짧은 형식의 비디오는 정적 피드를 방해합니다. Web 3.0 개발은 무한한 온라인 경험에 대한 우리의 욕구를 보여줍니다. 그리고 점점 더 연결되는 우리의 삶은 포괄적인 시각 자료를 그 어느 때보다 중요하게 만들었습니다.

미래에 대한 이러한 상상의 비전은 우리의 거품에서 벗어나고자 하는 새로운 열망과 결합되어 디자인의 경계를 넘어설 것을 간청합니다. 그러나 전체적으로 단순한 시대에 대한 지속적인 향수가 강하게 남아 있습니다.

위의 모든 사항은 브랜드와 기업이 고객과 시각적으로 소통하는 방식을 변화시켰습니다. 그리고 올해의 디자인 테마를 연구하면서 많은 동일한 아이디어가 합쳐지는 것을 보았습니다. 참고: 이 목록은 특정 방식으로 정렬되지 않습니다.

어떤 디자인 혁신이 지배할지 배울 준비가 되셨습니까? 2023년에 어떤 그래픽 디자인 트렌드가 있는지 알아보려면 계속 읽어보세요…

2023년 그래픽 디자인 트렌드:

모션 그래픽
대담한 추상 모양
AI 생성 예술
3D 요소
포괄적인 시각 자료
초현실주의 극대주의
다채로운 복고풍 삽화
가상 현실

1. 모션그래픽

비디오 콘텐츠가 완전히 새로운 것은 아니지만 광범위한 인기로 인해 우리가 알고 있는 브랜드 인터넷 환경이 바뀌었습니다.

정적인 이미지가 꿈꿀 수 있는 것보다 더 오랫동안 시청자의 관심을 끄는 모든 스크롤 중지 관련 콘텐츠를 가져오세요 !

그러나 소셜 미디어 피드는 모션 그래픽이 급증하는 유일한 영역이 아닙니다.

많은 최고의 기술 회사가 UX 디자인, 즉 랜딩 및 제품 정보 페이지에서 이 참여 촉진 원칙을 사용하고 있습니다. 시청자가 스크롤할 때 역동적인 흥미를 더하는 Apple Music의 홈페이지 를 위에 구현하는 모션 그래픽을 확인하십시오.

2022년 비주얼 콘텐츠 마케팅 보고서 에 따르면 마케터의 90%가 비디오 콘텐츠가 향후 몇 년 동안 브랜드가 채택해야 하는 주요 매체가 될 것이라고 예측하고 있으므로 훨씬 더 많은 장소에서 더 많은 모션 그래픽을 보게 될 것이라는 사실을 부인할 수 없습니다.

2. 대담한 추상 모양

그래픽 디자인 트렌드는 주기적으로 나타났다 사라지며 그 과정에서 진화합니다. 다가오는 디자인 트렌드에 대한 2021년 블로그 에서 시각적 자산의 기하학적 모양의 유입을 보고한 이유는 오늘날에도 여전히 유효한 패턴입니다.

좋아요. 대담한 모양은 2023년에도 웹사이트, 소셜 미디어 게시물 등의 배경을 계속 지배할 것입니다. 그러나 엄격한 기하학보다는 더 추상적인 형태가 많습니다.

다음 은 이러한 다채로운 추세를 보여주는 Spotify, Slack 의 최근 소셜 게시물 입니다.

이러한 추상 요소의 장점은 다양성 과 대비 의 디자인 원칙을 통해 모든 구성에 시각적 흥미를 더한다는 것 입니다. 그들은 당면한 주요 메시지를 흐트러뜨리지 않으면서 대담하고 밝은 색조로 보는 이들의 시선을 사로잡습니다.

3. AI가 만든 예술

DALL-E. DALL-E, 어디에나!

올해 인공 지능(AI) 기술로 생성된 이미지는 OpenAI의 DALL-E 2 (자연어 텍스트 설명을 기반으로 그래픽을 생성하는 온라인 이미지 생성기)의 공개 출시로 전 세계를 강타했습니다.

전 세계 인터넷 사용자들은 이러한 이미지 세대가 얼마나 현실적이고 참신한지 보고 싶어했습니다. 사실, 이상하고 멋진 DALL-E 창작물의 사회적 공유를 촉진하기 위해 작업에 전념하는 전체 트위터 계정 이 잘렸습니다.

4. 3D 요소

모션 그래픽이 새로운 정적 이미지라면 3차원 렌더링은 새로운 2차원 자산입니다.

적어도 지난 몇 년 동안은 그랬습니다. 특히 최근의 기술 발전으로 고품질 3D 영상 제작이 그 어느 때보다 쉬워졌습니다. ( 재구상된 IBM 로고처럼 .)

5. 포괄적인 시각 자료

디자인의 포괄성을 추구하는 것은 거의 새로운 소식이 아닙니다.

이전의 그래픽 디자인 트렌드 요약에서는 포용성을 미래 지향적인 디자인의 핵심 기능으로 식별하여 각계각층의 청중이 비즈니스 제품과 사명에 반영된 자신을 볼 수 있도록 합니다.

성별 다양성 표현

트랜스젠더 가 등장했기 때문에 몇 년 전 미디어를 통해 충격파를 보냈던 질레트 광고 를 기억 하십니까?

빨리 감기, 트랜스젠더 및 논바이너리 사람들은 드랙퀸/왕 및 엄격한 젠더 규범에 도전하는 다른 사람들과 함께 그 어느 때보다 의미 있고 자기 주도적인 표현을 보고 있습니다.

TikTok 및 Pinterest 의 소셜 게시물을 확인하여 무슨 뜻인지 확인하세요.

그리고 이 창의적인 벽화 는 AT&T가 자부심의 달을 위해 만들었습니다 .

더 큰 대표성에 대한 이러한 추진은 트랜스젠더 커뮤니티가 미국 입법에 의해 점점 더 위협을 받고 있는 시점에 이루어집니다. 고맙게도 많은 회사들이 이상적으로는 버티기를 거부합니다.

예를 들어, 텍사스 주지사 Greb Abbott가 소아 성별 확인 치료를 아동 학대로 분류한 후 Google, Apple, Meta 및 IBM을 포함한 60개 이상의 회사가 주 공무원에게 이 지침을 거부할 것을 촉구하는 전체 페이지 광고에 서명했습니다.

그러니 운동에 동참하세요. 그리고 소비자에게 당신이 관심을 갖고 있다는 것을 보여주세요.

원주민 대표

지금까지 토착 공동체는 광고주들에 의해 대체로 얼버무려져 왔습니다. 그러나 2023년에는 상황이 바뀔 것으로 예상됩니다.

다양한 토착 배경을 가진 유명한 TikToker가 유명해지면서 토착 문화의 다양성에 대한 인식이 높아졌습니다. 그리고 Netflix 및 Sephora 와 같은 회사 가 주목했습니다.

자신의 디자인 파일에 토착 표현을 추가하고 싶습니까? Venngage는 140개의 다양한 캐릭터가 포함된 100% 무료 피플 아이콘 팩을 출시했습니다. 여기에는 무료로 사용, 게시 및 공유할 수 있는 EPS/SVG/PNG 파일이 포함됩니다.

접근 가능한 디자인

포용적 디자인의 추세는 그림과 도상적 표현을 넘어 확장됩니다. 2023년에 진정한 포괄성은 접근성을 우선시하는 것을 의미하기 때문입니다.

이렇게 하면 장애 상태에 관계없이 모든 사람이 조직에서 소중함을 느낄 수 있습니다.

예를 들어, Mastercard 는 올해 Touch Card 제품에 대한 캠페인을 발표했습니다.

이 카드는 노치가 있는 심플한 디자인으로 시각 장애인이 계정을 더 쉽게 구분할 수 있도록 도와줍니다.

WordPress 개발자 Reaktive는 Intuit Mint 및 Turbotax의 블로그 페이지를 재설계하여 스크린 리더 사용자의 사용자 경험을 향상시켰습니다.

위의 브랜드는 Fast Company의 2022 Innovation by Design 어워드 에서 접근성 개선으로 찬사를 받았습니다 . 그리고 Purdy's Chocolate과 같은 회사 가 점자가 찍힌 상자 를 출시하기 시작 하면서 이 추세는 모든 산업 분야에서 계속 성장할 것입니다.

결론은 접근 가능한 디자인이 포괄적인 디자인이라는 것입니다. 전 세계 인구의 15%가 일종의 장애를 겪고 있기 때문에 귀하의 브랜드는 접근성을 우선시하여 차별화할 수 있습니다.

6. 초현실주의 극대주의

나중에 보자, 사실주의와 미니멀리즘! 초현실주의와 극대주의라는 두 명의 새로운 보안관이 마을에 있습니다.

좋아요. 격리된 COVID-19 시대는 사람들이 갇히거나 제약을 받고 싶어하지 않는 대유행 이후의 세계에 자리를 내주었습니다.

경계를 넓힐 수 있는 새로운 가능성이 여기에 있습니다. 그리고 디자이너들은 진술을 두려워하지 않고 공간을 차지하지 않는 환각적인 이미지로 차례로 응답하고 있습니다.

이를 감안할 때 시각적 스토리텔링은 앞으로 그 어느 때보다 상상력이 풍부해질 것입니다. 따라서 최근 코카콜라 그래픽에서 볼 수 있듯이 요소를 결합할 때 예상치 못한 결과를 기대하십시오.

7. 다채로운 레트로 일러스트

대유행에서 비롯된 또 다른 추세는?

90년대 향수! 결국, 우리는 그 기간 동안 확실히 더 쉬운 날에 대한 환상을 가지고 있었습니다.

음, 스포일러 주의: 이 그래픽 디자인 트렌드는 2023년까지만 계속될 것입니다.

Hootsuite 의 다음과 같이 소셜에서 Little Miss ___ 스케치를 공유하는 바이럴 트렌드만큼 이를 포괄하는 것은 없습니다 .

그러나 벅은 거기서 멈추지 않습니다. Google 의 모든 사용자 …

... 그리고 나중에 소셜 스케줄링 앱 ...

… MTV 로 …

… 셈러쉬 …

… 그리고 Figma 는 이 다채롭고 향수를 불러일으키는 스케치 스타일로 소셜 미디어 그래픽을 만들었습니다.

8. 가상 현실

암호화폐. 대체 불가능한 토큰. 메타버스.

몇 년 전만 해도 이러한 용어는 거의 모든 사람을 혼란스럽게 만들었습니다. 그러나 2022년에는 거의 모든 사람들이 이러한 Web 3.0 기술이 얼마나 수요가 많은지 알고 있습니다.

모든 것의 디지털화를 향한 팬데믹의 압박에 힘입어 가상 현실(VR)의 글로벌 시장은 지난 몇 년 동안 놀라운 성장을 겪었습니다. 팩트 앤 팩터스 (Facts and Factors)의 보고서에 따르면 메타버스의 가치는 2021년 2,100억 달러로 2028년에는 7,300억 달러로 성장할 것으로 예상됩니다.

당연히 그래픽 디자이너들은 Blade Runner 스타일의 이미지 렌더링, 네온 팔레트, 미래형 액체 그라데이션 및 3D 구성 요소를 통해 기술 미래의 무한한 잠재력을 표현하면서 주목했습니다.

이 Apple iPad Pro 광고를 예로 들어 보겠습니다.

또는 Meta's Connect 컨퍼런스 의 랜딩 페이지 …

또는 Zendesk 의 이 소셜 릴 ...

미래지향적인 감성을 보여주기 위해 많은 사람들이 다가올 초연결 기술 시대를 설명하고 있습니다.

그리고 이 산업이 빠르게 발전함에 따라 광고 회사에서 메타버스로 진입하려는 브랜드를 위한 크리에이티브 컨설팅 에이전시로 변신한 Rumfoords 와 같은 전문 기업이 빠르게 성장하고 있습니다.

그들의 웹사이트를 한 번 보면 다음과 같은 문체 선택의 좋은 예를 볼 수 있습니다.

그러나 지금 여기에 기반을 둔 기술은 유사하게 미래 지향적인 소송을 따르고 있습니다. Dyson의 Zone Headphones 애니메이션 처럼 …

또는 Apple의 AirPods Pro 페이지 에 소개된 이 비디오 …

소호플렉스(Sohoflex) 웹 에이전시
홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.

최대한 적은 노력으로 다크 모드를 구현하는 방법

소호플렉스 — Fri, 6 Jan 2023 02:12:56 +0900

원문 : https://uxdesign.cc/dark-mode-with-design-tokens-8d7b9d9753a

Dark mode with design tokens

How to implement dark mode with as little effort as possible

uxdesign.cc

소개: 다크 모드란 무엇입니까?

다크 모드는 높은 수준의 유용성을 유지하면서 낮은 수준의 빛을 방출합니다.

출처: Material.io ¹

Google의 머티리얼 디자인 문서의 인용문에서 추측할 수 있습니다. 단순히 어두운 테마입니다. 주로 검정과 회색으로 구성된 색상 팔레트를 사용합니다. 때때로 흐릿한 강조 색상은 브랜드를 제품에 다시 가져옵니다.

그 결과 빛의 수준이 낮아져 배터리 성능이 향상되고 눈의 피로가 줄어들며 접근성이 향상될 수 있습니다.

다크 모드가 필요한 이유는 무엇입니까?

다크 모드 없이도 제품을 사용할 수 있지만 다크 모드를 추가하는 데 찬성하는 주장이 많습니다.

사용자의 기대

다크 모드 구현이 너무 쉬워져 표준이 되었습니다. 사용자는 모든 제품이 그것을 제공하기를 기대합니다.

다크 모드가 없으면 제품이 부정적인 방식으로 튀어나올 것입니다. 누락된 다크 모드는 낮은 제품 품질과 관련이 있을 수 있습니다. 사실이 아니더라도 사용자가 제품과 브랜드에 대해 느끼는 감정에 영향을 미칠 수 있습니다.

접근성

접근성이 일반적으로 더 좋지는 않지만 많은 소식통에 따르면 다크 모드는 일부 조건 ⁹을 가진 사람들에게 도움이 됩니다. 예를 들어 다음을 경험하는 사람들의 경우:

꺼질 것 같은
광 공포증 (밝은 빛으로 인한 불편)
눈의 피로
흐린 시력

그러나 다크 모드는 시각 장애가 없는 사용자를 위해 시각적 인체 공학을 향상시킬 수도 있습니다. 예를 들어 특히 어두운 환경에서 눈의 피로를 줄입니다. 이는 다크 모드를 사용할 때 화면에서 방출되는 휘도가 감소하기 때문입니다.

어두운 테마는 장치 화면 [...]에서 방출되는 휘도를 줄입니다. 눈의 피로를 줄여 시각적 인체 공학을 개선하는 데 도움이 됩니다. […]

출처: material.io ¹

향상된 배터리 수명

일부 화면, 특히 OLED 화면(예: 스마트 워치)에서는 검은색 픽셀이 완전히 꺼집니다. 이렇게 하면 화면에 필요한 에너지 양이 줄어들고 장치를 다시 충전해야 할 때까지 시간이 연장됩니다.

다크 모드를 활성화하는 방법은 무엇입니까?

사용자가 어두운 모드에서 제품을 볼 수 있도록 하려면 밝은 모드와 다크 모드 사이를 전환하는 방법을 제공해야 합니다. 이것은 설정이나 헤더 또는 메뉴 내에서 토글을 통해 수행되었습니다.

그러나 다크 모드에는 시스템 기능이 있으므로 시스템 설정에 편승할 수 있습니다.

어둡고 밝은 테마 구현

시맨틱 토큰으로 다크 모드를 무료로 만듭니다.

우리가 원하는 것은 우리가 구축하는 모든 새 구성 요소에 대해 "무료" 다크 모드입니다. 이를 위해 시맨틱 디자인 토큰 ¹¹ 에 의존합니다 . 시맨틱 토큰은 현재 모드에 따라 다른 기본 토큰(읽기: 색상 값)을 참조합니다.

시맨틱 토큰이 있는 다크 앤 라이트 모드

시맨틱 토큰의 개념은 이름이 용도를 암시한다는 것입니다(예: color-bg-canvas또는 color-text-default). 반대로 기본 토큰의 이름은 해당 값을 나타냅니다(예: color-blue-500).

모드를 참조하지 않는 토큰 이름(예: )을 선택 하고 밝음 및 어둠color-text-primary 과 같은 단어를 피 하십시오. 이렇게 하면 모드에 따라 토큰 값을 교환할 수 있지만 동일한 이름을 유지할 수 있습니다.

예를 들어 color-text-primary밝은 모드에서는 검은색이고 어두운 모드에서는 흰색일 수 있습니다. 모드에 따라 팔레트에서 다른 값(기본 토큰)을 참조하여 이를 수행합니다.

다크 모드와 라이트 모드에서 기본 토큰이 참조되는 방법에 대한 스키마

이렇게 하면 토큰을 정의하고 이름을 지정하는 것이 조금 더 복잡해지지만 장기적으로는 비용이 많이 듭니다. 이렇게 하면 모든 구성 요소에 대해 어두운 모드 스타일을 구현하는 것에 대해 걱정할 필요가 없으며 모든 것이 일관됩니다. 또한 사용자는 모드에 자동으로 조정되는 시맨틱 토큰으로 작업할 수 있습니다.

예를 들어 누군가가 카드 구성 요소를 만들 때 그녀는 color-surfaces카드 채우기에 사용할 것입니다. 이렇게 하면 밝은 모드에서는 자동으로 흰색으로 바뀌고 어두운 모드에서는 검정 회색( )보다 약간 더 밝아집니다 grey-800.

웹에서

이 개념을 웹 제품에 구현하는 방법을 살펴보겠습니다. prefers-color-scheme몇 가지 색상과 그림자만 사용하는 경우 미디어 쿼리가 포함된 단일 파일이 유효한 옵션입니다.

예제에서 볼 수 있듯이 기본 스타일에 대한 시맨틱 토큰이 먼저 정의됩니다. prefers-color-scheme미디어 쿼리 에 래핑된 다른 모드에 대한 토큰을 추가하는 것보다 . 이렇게 하면 미디어 쿼리가 트리거되면 기본 토큰을 덮어씁니다.

시맨틱-tokens.css

더 큰 프로젝트는 종종 어두운 모드와 밝은 모드 사이에서 변경되는 소수 이상의 색상을 사용합니다. 이 경우 단일 파일이 덜 이상적일 수 있습니다.

일반적인 솔루션은 조건부로 밝은 모드 또는 어두운 모드에 대한 적절한 값으로 css 파일을 로드하는 것입니다.

이 접근 방식의 두 가지 주요 이점은 다음과 같습니다.

하나의 모드에 대한 토큰만 있으므로 편집하기 쉬운 더 간단하고 짧은 파일
필요한 파일만 다운로드되므로 최적화된 다운로드 크기

미디어 쿼리를 사용하여 CSS를 조건부로 로드

light.tokens.css조건부 로딩을 사용하면 및 안에 미디어 쿼리가 필요하지 않습니다 dark.tokens.css. 따라서 다크 모드 파일은 다음과 같습니다.

dark.tokens.css

웹에서 다크 모드 감지

구성 요소 내에서 현재 모드를 감지할 수 있습니다. 이는 사용자 지정 스타일을 추가하는 데 도움이 될 수 있습니다. 예를 들어 밝은 모드에서는 기본 색상을 사용하지만 어두운 모드에서는 어두운 회색을 사용하는 헤더의 경우입니다.

가능하면 이 접근 방식을 사용하지 마십시오. 유지 관리가 더 복잡해집니다. 각 구성 요소 파일을 살펴보고 디자인 토큰의 이점을 없애거나 적어도 줄여야 합니다. 그러나 드문 경우에 다른 좋은 방법이 없었습니다. 이것이 당신이하는 방법입니다.

CSS: 미디어 쿼리 사용

토큰 파일에서 사용한 prefers-color-scheme미디어 쿼리는 구성 요소에서도 사용할 수 있습니다. 미디어 쿼리 내에서 구체적으로 밝거나 어두운 모드를 대상으로 지정할 수 있습니다.

JS: matchMedia로 다크 모드 감지

를 사용 matchMedia하면 특정 미디어 쿼리가 활성화되어 있는지 확인할 수 있습니다. 우리의 경우 이것은 prefers-color-scheme어둡거나 밝은 모드에 대한 미디어 쿼리가 됩니다. matchMediatrue 또는 false를 반환하며 이를 와 같은 변수에 저장할 수 있습니다 darkMode.

matchMedia를 사용하면 js에서 미디어 쿼리가 참인지 확인할 수 있습니다.

이것은 js에서 사용자 정의 모드 스위치를 작성하지 않고 사용자 기본 설정을 얻는 좋은 방법입니다. 사용자가 기본 설정을 설정하지 않았을 수 있음을 염두에 두십시오. 기본값이 아닌 모드만 확인하는 것이 가장 좋습니다. false인 경우 기본값이 true라고 가정합니다.

색 구성표 메타 태그

확인란 이나 라디오 버튼 과 같은 표준 양식 요소를 사용 하면 문제가 발생합니다. 사용자가 설정을 어두운 모드로 변경해도 양식 요소는 변경되지 않습니다. 물론 사용자 지정 구성 요소를 구축하거나 양식 요소¹²의 스타일을 지정하는 현대적인 방법에 의존할 수 있지만 더 쉬운 방법이 있습니다. color-scheme메타 태그¹³ .

html 헤드에 추가함으로써 브라우저는 귀하의 웹사이트가 어둡고 밝은 모드를 지원한다는 것을 알게 됩니다. 이제 브라우저는 양식 요소를 어둡거나 밝은 모드로 전환하여 웹 사이트에서 작동합니다.

사용자 의 prefers-color-scheme속성이 설정되어 있지 않으면 기본 테마가 사용됩니다. 이를 CSS 전략과 일치시켜야 합니다.

모바일

모바일에서는 접근 방식이 조금 다릅니다. iOS와 Android 모두 리소스 중심 접근 방식을 사용합니다. 이는 프레임워크가 올바른 파일 또는 변수를 자동으로 로드함을 의미합니다. 코드에는 항상 동일한 변수와 파일을 사용할 수 있습니다. 그러나 모드에 따라 값이 다를 수 있습니다.

이는 기존 앱에 다소 쉽게 다크 모드를 추가할 수 있으므로 매우 편리한 접근 방식입니다. 적어도 불가지론적인 방식으로 색상을 설정했다면.

Android

Android는 미리 정의된 폴더 구조에 배치된 xml 리소스를 사용합니다.

리소스를 저장하기 위한 색상, 값 및 드로어블과 같은 다양한 폴더가 있습니다. 한정자로 폴더를 접미사로 지정하여 -nightAndroid에 어두운 모드임을 알릴 수 있습니다. 시스템은 라이트 모드 및 기본값(예: drawable-night존재하지 않는 경우)에 대해 이 한정자가 없는 폴더를 사용합니다.

시스템이 매우 편리합니다. 색상 정의(예: "배경")가 있는 xml을 color및 에 배치 color-night합니다. 개발자는 배경을 참조하고 Android는 어둡거나 밝은 모드에 대한 올바른 값을 제공합니다.

Android xml 및 드로어블 리소스에 대한 몇 가지 공통 폴더

Android 다크 모드 감지

일반적으로 현재 모드에 따라 변경되는 리소스를 사용하는 것이 가장 좋습니다. 그러나 때로는 구성 요소 내에서 활성화된 모드를 감지해야 합니다.

Android에서는 구성 ¹⁴ 을 읽어서 가능합니다.

안드로이드에서 다크 모드 감지

Android 설명서 ¹⁵ 에서 현재 모드를 감지하는 방법에 대한 자세한 정보를 얻을 수 있습니다 .

아이폰 iOS

Android와 마찬가지로 iOS(아마도 macOS, watchOS 및 tvOS?)에는 xCode 자산 카탈로그라는 파일 기반 시스템이 있습니다. Android와 달리 iOS는 모든 색상이나 이미지에 전용 파일을 사용합니다. 폴더가 없습니다.

또한 두 가지 유형 ColorSet및 로 제한됩니다 ImageSet.

ColorSet자산 카탈로그는 단순히 ¹⁶ 를 포함하는 .colorset확장자가 있는 폴더입니다. Contents.json이 json 파일 내에서 모드에 대한 다양한 색상이 정의됩니다.

예시 Contents.json

예를 들어 스타일 사전¹⁷을 사용하거나 xCode에서 수동으로 코드로 자산을 생성할 수 있습니다.

앱 코드 내에서 개발자는 항상 그렇듯이 색상이나 이미지를 참조합니다. iOS는 활성화된 모드를 찾아 올바른 값을 제공합니다.

iOS 다크 모드 감지

ColorSchemeiOS 13 이상을 사용하면 ¹⁸ 환경 값 을 통해 현재 모드를 감지할 수 있습니다 . 이 값을 사용하는 좋은 부작용은 값이 변경될 때 이에 의존하는 뷰가 다시 그려지는 것입니다.

Swift에서 다크 모드 감지

JSON을 iOS 및 Android로 변환

스타일 사전 ¹⁹을 사용하면 json을 css 또는 js로 변환하는 것이 매우 간단합니다 .

Xcode 자산 또는 Android xml 리소스 를 생성 하는 것은 조금 더 복잡합니다. 운 좋게도 Danny Banks는 이를 수행하는 방법을 정확히 다루는 환상적인 기사를 작성합니다. " 스타일 사전이 포함된 다크 모드 "¹⁷ 를 읽는 것이 좋습니다 .

figma 예제 ²⁰ 용 디자인 토큰 플러그인 에서 작업 코드 구현을 찾을 수 있습니다 .

요약

결론적으로 다크 모드는 어둡고 채도가 낮은 팔레트를 사용하는 테마입니다. 대비가 높거나 낮을 수 있지만 두 경우 모두 액세스할 수 있어야 합니다.

주요 이점 중 일부는 다음과 같습니다.

OLED 화면의 배터리 절약
사용자의 기대를 충족하고 최신 OS에 적합
특히 어두운 환경에서 사용할 때 눈의 피로 감소
일부 사용자를 위한 잠재적인 접근성 개선. 예를 들어 흐린 시력, 광선 공포증이 있거나 조명 모드에서 깜박임을 경험하는 사용자

가장 쉬운 구현은 현재 시스템 모드를 읽고 그에 따라 디자인 토큰을 전환하는 것입니다. 이것은 대부분의 제품에 충분합니다. 하루 종일 사용하는 미디어나 독서 앱 또는 제품은 수동 모드 전환을 고려할 수 있습니다.

소호플렉스(Sohoflex) 웹 에이전시
홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.

Netflix의 Nike Training Club

소호플렉스 — Wed, 4 Jan 2023 17:31:09 +0900

원문 : https://www.netflix.com/tudum/articles/nike-training-club

운동을 하도록 동기를 부여하는 것이 항상 쉬운 것은 아니지만, 타는 듯한 느낌을 받은 다음 좋아하는 프로그램 중 하나로 직접 전환하는 옵션에는 특정한 매력이 있습니다. 그리고 이제 이것이 바로 귀하가 할 수 있는 일입니다. 새해 직전에 Netflix 회원은 사상 처음으로 Nike Training Club의 피트니스 콘텐츠를 스트리밍 할 수 있습니다.

각 Nike Training Club 프로그램에는 여러 에피소드가 있습니다. 총 30시간의 운동 세션이 2회에 걸쳐 공개됩니다. 이 프로그램은 모든 피트니스 수준과 관심사에 맞는 운동과 함께 모든 Netflix 요금제에서 여러 언어로 제공됩니다.

Netflix의 Nike Training Club에는 무엇이 포함되나요?

피트니스 클래스는 2회에 걸쳐 시작되며 첫 번째 클래스에는 다음 프로그램이 포함됩니다.

Kickstart Fitness with the Basics (13 episodes)
Two Weeks to a Stronger Core (7 episodes)
Fall in Love with Vinyasa Yoga (6 episodes)
HIT & Strength with Tara (14 episodes)
Feel-Good Fitness (6 episodes)

Netflix의 Nike Training Club은 언제 제공되나요?

피트니스의 첫번째 클래스는 12월 30일에 시작되며 추가 프로그램은 2023년에 시작됩니다.

Netflix에서 Nike Training Club을 어떻게 찾나요?

Netflix 회원은 Netflix에서 "Nike"를 검색하여 운동 컬렉션을 찾을 수 있습니다.

나이키 트레이닝 클럽이란?

이 앱에 익숙하지 않은 분들을 위해 Nike Training Club을 Nike의 최고 인증 트레이너가 이끄는 궁극의 훈련 파트너라고 생각하십시오. 이 프로그램은 근력 운동, 요가 및 고강도 운동을 포함하여 모든 체력 수준의 사람들을 위한 다양한 옵션을 제공합니다.

소호플렉스(Sohoflex) 웹 에이전시
홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.

2022년 디자인 툴 설문조사

소호플렉스 — Wed, 4 Jan 2023 09:26:04 +0900

원문 : https://uxtools.co/survey/2022

2022년 6번째 디자인 툴 설문조사로 총 4,260명이 응답하였으며 어떤 툴을 사용해서 작업하는지 트렌드를 알아볼 수 있다.

설문응답자 분포

설문응답자는 무슨 일을 하는가

주로 사용하는 컴퓨팅 환경은

MAC 3,466 > Windows 1,177 > Linux 96

각 업무 영역별로 주로 사용하는 도구

UI Design

Figma 3,105 > Adobe XD 263 > Sketch 241 > Adobe Illustrator 31

Basic Prototyping

Figma 2,696 > Adobe XD 255 > Protopie 117 > Sketch 102 > (Code) 69 > InVision 62

Advanced Prototyping

ProtoPie 493 > (Code) 454 > Axure 195 > Webflow 160 > Figma 160 > Framer 119

Digital Whiteboarding

Miro 1,327 > FigJam 1,137 > Figma 487 > Mural 136 > Whimsical 87

Design System

Figma 2,139 > Storybook 115 > Zeroheight 113 > Adobe XD 139 > Sketch 94

User Testing

Maze 497 > Zoom 330 > Google Meet 268 > UserTesting 263 > MS Teams 210

Research Repositor

Notion 270 > Dovetail 203 > Confluence 153 > Google Sheet 70 > Miro 62

Research Recruting

UserTesting 171 > Maze 142 > UserInterviews 81 > Userzoom 53 > ServeyMonkey 52 > TestingTime 45

Portfolio Builders

(Code) 556 > Webflow 343 > Behance 256 > Squarespace 225 > Adobe Portfolio 137 > Wix 132 > Wordpress 85

소호플렉스(Sohoflex) 웹 에이전시
홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.

Auth.js 웹을 위한 인증 오픈소스

소호플렉스 — Wed, 4 Jan 2023 01:23:12 +0900

Auth.js 홈페이지 : https://authjs.dev/

거의 만능에 가까운 인증 오픈소스로 단 몇 분 안에 인증 서비스를 추가할 수 있음!!

암호 없는 로그인 매커니즘 사용 촉진

Next.js, Serverless, SvelteKit, SolidStart 지원
OAuth 1.0, 1.0A, 2.0 및 OpenID Connect를 지원
이메일/암호 없는 인증 지원
JSON토큰과 데이터베이스 세션을 모두 지원
많은 인기있는 로그인 서비스 기본 지원
- Amazon Cognito
- Apple
- Facebook
- Google
- Instagram
- KaKao
- LINE
- Naver
- Okta
- Slack
- Zoom

다양항 데이터베이스 지원
- MySQL, Postgres, MongoDB, SQLite, MariaDB, Amazon Aurora, Amazon DocumentDB 등과 사용하거나 DB 없이 사용할 수 있고 모든 데이터베이스에 연결할 수 있는 Adaptor Api 제공

소호플렉스(Sohoflex) 웹 에이전시
홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.

Svelte에서 쓸만한 Slider

소호플렉스 — Tue, 3 Jan 2023 14:55:02 +0900

Splide 홈페이지 : https://splidejs.com/

Splide는 TypeScript로 작성된 유연하고 가볍고 액세스 가능한 슬라이더입니다.

여러 슬라이드, 썸네일, 중첩 슬라이더, 세로 방향 등 옵션만 변경하면 다양한 종류의 슬라이더를 만들 수 있습니다. 또한 API를 사용하거나 확장 기능을 구축하여 슬라이더 기능을 향상할 수 있습니다.

TypeScript로 작성
종속성 필요 없음
경량, 29kB(12kB gzip)
유연하고 확장 가능
400개 이상의 테스트
Multiple 슬라이드
CSS에 의한 슬라이드 또는 페이드 전환
중단점 지원
CSS 관련 단위 허용
이미지를 자를 필요 없음
Progress bar로 진행 표시, 재생/일시 정지 버튼으로 자동 재생
RTL 및 수직 방향
마우스 드래그 앤 터치 스와이프
자유 끌기 모드
마우스 휠 탐색
중첩된 슬라이더
Lazy Loading
썸네일 슬라이더
자동 너비 및 높이
접근성 친화적
라이브 지역
인터넷 익스플로러 10

소호플렉스(Sohoflex) 웹 에이전시
홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.

엔지니어링 팀을 위한 화이트보드

소호플렉스 — Mon, 2 Jan 2023 22:25:06 +0900

협업 화이트보드로 강력한 기능을 제공

이레이저 홈페이지 : https://www.tryeraser.com/

실시간으로 온라인 브레인스토밍 가능
여러 다이어그램을 코드로 작성
화이트 보드에 코드를 표시하여 다이어그램을 상세히 작성
마크다운 지원
키보드 단축키를 지원하여 편리한 편집 가능

사용사례

와이어 프레임

와이어프레임

클라우드 아키텍처 다이어그램

AWS 다이어그램

AWS 다이어그램

AZURE 다이어그램

AZURE 다이어그램

GCP 다이어그램

GCP 다이어그램

데이터 ETL 파이프라인

데이터 ETL 파이프라인

엔터티 관계 다이어그램(ERD)

엔티티 다이어그램

시퀀스 다이어그램

소호플렉스(Sohoflex) 웹 에이전시
홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.

2022년 스텍오버플로우 개발자 설문조사

소호플렉스 — Sun, 1 Jan 2023 04:50:10 +0900

https://survey.stackoverflow.co/2022/

Stack Overflow Developer Survey 2022

In May 2022 over 70,000 developers told us how they learn and level up, which tools they’re using, and what they want.

survey.stackoverflow.co

2022년 70,000명 이상의 개발자 대상으로 실시한 설문 결과

온라인 코드 학습

온라인 학습은 전년 대비 60%에서 70%로 증가
45세 이상은 책에서 배웠을 가능성이 가장 높은 반면, 젊은 응답자는 온라인에서 학습
Other online resources (e.g., videos, blogs, forum) 70.91% > School (i.e., University, College, etc) 62.18% > Books / Physical media 54.48% > Online Courses or Certification 46.63% > On the job training 39.85% > Colleague 18.42% > Friend or family member 13.95% > Coding Bootcamp 10.8% > Hackathons 7.36%

개발자 형태

Developer, full-stack 46.82% > Developer, back-end 43.38% > Developer, front-end 25.96% > Developer, desktop or enterprise applications 15.57% > Developer, mobile 12.45% > DevOps specialist 10.06% > Student 9.13% > Cloud infrastructure engineer 8.62% > Database administrator 8.05% > System administrator 8.01% > Developer, embedded applications or devices 6.4% > Project manager 6.36% > Designer 6.14% > Engineer, data 5.87% > Engineering manager 5.83% > Data scientist or machine learning specialist 5.59% > Data or business analyst 5.22% > Developer, QA or test 5.05% > Academic researcher 4.42% > Product manager4.1%

가장 많이 사용되는 기술

프로그래밍, 스크립팅, 마크업

JavaScript 65.36% > HTML/CSS 55.08% > SQL 49.43% > Python 48.07% > TypeScript 34.83% > Java 33.27% > PHP 20.87% > Rust 9.32% > Kotlin 9.16% > Dart 6.54% > Ruby 6.05% > Swift 4.91%

데이터 베이스

MySQL 46.85% > PostgreSQL 43.59% > SQLite 32.01% > MongoDB 28.3% > Microsoft SQL Server 26.87% > Redis 22.13% > MariaDB 17.93% > Elasticsearch 12.21% > Oracle 11.49% > Firebase Realtime Database 8.72% > DynamoDB 8.26% > Cloud Firestore 7.45%

클라우드 플렛폼

AWS 51.01% > Microsoft Azure 28.72% > Google Cloud 26.81% > Firebase 21.14% > Heroku 19.98% > DigitalOcean 15.64% > Managed Hosting 5.76% > Oracle Cloud Infrastructure 2.18%

웹 프레임워크 및 기술

Node.js 47.12% > React.js 42.62% > jQuery 28.57% > Express 22.99% > Angular 20.39% > Vue.js 18.82% > ASP.NET Core 18.59% > ASP.NET 14.9% > Django 14.65% > Flask 14.64% > Next.js 13.52% > Laravel 9.45% > Angular.js 8.99%> FastAPI 6.02% > Ruby on Rails 5.83% > Svelte 4.58% > Blazor 4.46% > Nuxt.js 3.83% > Gatsby 3.46% > Drupal 2.22% > Phoenix 2.13%

기타 프레임워크 및 기술

.NET 34.55% > NumPy 28.65% > Pandas 25.08% > Spring 16.13% > TensorFlow 12.95% > Flutter 12.64% > React Native 12.57% > Apache Kafka 10.35% > Electron 9.57% > Torch/PyTorch 8.61%

가장 많이 원하는 기술

프로그래밍, 스크립팅, 마크업

Rust 17.6% > Python 17.59% > TypeScript 17.03% > Go 16.41% > JavaScript 12.98% > Kotlin 8.08% > C++ 7.67% > SQL 6.51% > C# 6.11% > Java 5.6% > Dart 4.83% > Swift 4.3% > HTML/CSS 4.09%

데이터 베이스

PostgreSQL 19.05% > MongoDB 17.26% > Redis 14.3% > Elasticsearch 8.29% > SQLite 8.18% > MySQL 7.99% > Firebase Realtime Database 5.08% > DynamoDB 4.82%

클라우드 플랫폼

AWS 34.34% > Google Cloud 18.14% > Microsoft Azure 15.57% > Firebase 8.38%

웹 프로임워크 및 기술

React.js 22.54% > Node.js 16.12% > Vue.js 14.6% > Next.js 11.28% > Svelte 9.34% > Django 7.89% > Angular 7.18% > FastAPI 4.94% > Express 4.89% > Blazor 4.69% > Nuxt.js 4.68% > Flask 4.32% > Angular.js 4.32% > Ruby on Rails 3.3% > jQuery 2.79% > ASP.NET 2.37% > Phoenix 1.79%

기타 프레임워크 및 기술

TensorFlow 15.33% > Flutter 13.52% > React Native 13.05% > Apache Kafka 8.64% > Torch/PyTorch 8.57% > Electron 7.93% > NumPy 7.49% > Pandas 6.7% > .NET 5.38% > Apache Spark 4.29% > Spring 3.52%

급여가 높은 기술

Clojure는 여전히 가장 많은 비용을 지불하는 언어입니다.
Chef 개발자는 가장 높은 급여를 받지만 Chef는 가장 두려운 다른 도구이기도 합니다.
코로케이션 경험이 있는 개발자는 클라우드 전용 개발자보다 더 많은 급여를 받습니다.

프로그래밍, 스크립팅, 마크업

Clojure $106,644 > Erlang $103,000 > F# $95,526 > Ruby $93,000 > Elixir $92,959 > Scala $92,780 > Perl $90,073 > Go $89,204 > Rust $87,047 > Objective-C $83,165 > Bash/Shell $81,666 > Swift $78,468 > APL $75,932 > Assembly $75,000 > Python $71,105 > TypeScript $70,276 > C# $69,516 > Kotlin $69,318 > SQL $69,108 > C++ $68,000 > JavaScript $65,580 > Java $64,572 > Delphi $63,984 > HTML/CSS $63,984 > PHP $50,496 > Dart $43,724

데이터 베이스

DynamoDB $94,244 > Couchbase $90,000 > Cassandra $81,049 > Neo4j $80,000 > Elasticsearch $78,916 > Redis $76,783 > PostgreSQL $70,385 > Microsoft SQL Server $69,318 > SQLite $63,986 > Oracle $59,720 > MongoDB $57,588 > Cloud Firestore $56,221 > MariaDB $55,455 > MySQL $55,455 > Firebase Realtime Database $42,657

웹 프레임워크

Phoenix $94,644 > Ruby on Rails $90,000 > Play Framework $88,800 > Deno $78,084 > Gatsby $77,948 > Svelte $71,202 > React.js $69,480 > FastAPI $69,345 > Flask $67,104 > Node.js $65,000 > Angular.js $63,828 > Next.js $62,820 > Angular $60,528 > Vue.js $60,148 > Django $60,000 > Express $59,712 > jQuery $57,000 > Nuxt.js $51,189

소호플렉스(Sohoflex) 웹 에이전시
홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.

Happy New Year!

소호플렉스 — Sun, 1 Jan 2023 03:16:48 +0900

2023년 계묘년 한해가 밝았습니다!

블로그 방문하시는 모든 분들께 감사드립니다!

새해 복 많이 받으세요! ^^

소호플렉스(Sohoflex) 웹 에이전시
홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.

소호플렉스(Sohoflex) 웹 에이전시 블로그

2023년 이후의 반응형 디자인 가이드

반응형 디자인?

Mordern CSS 사용

Media Queries 사용

지난 수년에 걸친 반응형 디자인 방법

Bootsrap Framework (부트스트랩)

Media Queries (미디어 쿼리)

The Fixed-Width Breakpoints Mindset (고정중단점 넓이)

반응형 디자인과 눈길을 끌지 못하는 웹사이트

웹은 기본적으로 반응형입니다.

2023년 이후의 반응형 디자인

Responsive to Content (컨텐츠에 반응)

Responsive to The Viewport (뷰포트에 반응)

Responsive to The Container (컨테이너에 반응)

Responsive to The User Preferences (사용자 선호도에 반응)

현재 반응형 디자인에 대해 어떻게 생각하고 있습니까?

A Basic Example (기본적인 예)

Mordern Ways To Build Responsive Layouts (반응형 레이아웃 현대적인 방법)

CSS Flexbox (플렉스박스 레이아웃)

기사 구성 요소의 레이아웃 구축

Section Header (섹션 헤더)

CSS Grid Layout (그리드 레이아웃)

Fluid Sizing (유동형 사이징)

Dynamic Gap (다이나믹 갭)

Size Container Queries (크기 컨테이너 쿼리)

Article Component (기사 구성요소)

Pagination Component (페이징 구성 요소)

Size Container Queries Units (크기 컨테이너 쿼리 단위)

Style Container Queries (스타일 컨테이너 쿼리)

Component-Level Theme Switching (구성 요소 수준 테마 전환)

Article Component (기사 구성요소)

User Preferencess Media Queries (사용자 기본 설정 미디어 쿼리)

논리적 속성

Defensive CSS (방어적인 CSS)

Conclusioin (결론)

추가 자료

Firebase API 키 제한사항 적용

HTTP 리퍼러 적용하여 애플리케이션 제한걸기

Oss Insight - 오픈소스 순위

오픈소스 카테고리별로 인기 순위를 제공

WYSIWYG Editor 순위

Cross Platform GUI Tool 순위

Testing Tools 순위

Programming Language 순위

Javascript Framework 순위

CSS Framework 순위

FLEXBOX FROGGY

justify-content

align-items

flex-direction

order

align-self

flex-wrap

flex-flow

align-content

HTML/CSS 텍스트 이펙트

Fluid text hover

SVG textPath Animation on Scroll Tutorial | Keyssentials: Web Animation Tips by @keyframers

Only CSS: Fall In Love

Glitchy text w/ Splitting.js ⚡️

Annoying CRT retro flicker

Zebra Page- web animation from a Procreate drawing

Rotating Text

Variable Font Fun (CSS Animation Version)

DConstruct

GSAP 3 ETC Variable Font Wave

OK

Directionally blooming words

Variable font animation

Cassie!

Matrix digital rain (animated version)

Pseudo 3D text

background-clip — week 12/52

Animated blob SVG text clipping effect - Pt. 2

Rollover

Cascading text effects w/ Splitting + ScrollOut ✍️

Block effect text intro

스크롤 Hide/Show 메뉴

OKR 작성 양식 모음