23. 02월 스크랩

1. 확장 가능한 CSS의 진화 (링크)

• CSS 이전의 시대
• 스타일시트 및 관심사의 분리
• CSS를 대규모로 관리하기 어려운 이유
• CSS 아키텍처로 복잡성 다듬기
• 관심사의 분리에 대한 재고
• 도전적인 CSS의 모범 사례
• Tailwind CSS의 부상
• 디자인 격차 해소
• 결론

2. ChatGPT와 Midjourney로 어린이용 그림책을 만들어봤어요 (링크)

"The Adventure of Penelope the Porcupine and the Land of Whimsy"

3. 웹 사이트 페이지간 유연하고 부드러운 전환을 추가해주는 라이브러리 (링크)

• Progressive Enhancement로 부드럽고 유연한 전환
• 페이지간 딜레이를 감소, HTTP 요청을 최소화
• 7kb 로 작고, 사용하기 쉬움
• 플러그인 시스템 지원
  • router : 라우터 이용
  • css : 자동으로 CSS 클래스 추가
  • prefetch : 뷰포트에 따른 자동 페이지 프리펫칭

4. High Definition CSS Color Guide (링크)

• CSS Color 4는 웹에 광범위한 색상 도구 및 기능을 제공하며, HD CSS를 지원하기 시작
• 디스플레이 기기는 점점 좋아지는데, CSS는 이를 지원하지 못해왔음
• CSS에선 25년간 sRGB 색영역만 사용되었으며, 이건 사람의 눈이 볼수 있는 색상의 30%만 표현하는 것
• 크롬 111 부터 CSS Color Level 4를 지원
  • RGB 98, Display p3, Rec2020, ProPhoto 등의 색영역을 지원하는 12개의 새로운 색공간 선택 가능
  • 이미 2016년부터 display-p3를 지원하는 Safari와 이제 동일해 짐(애플이 만든 색영역)
• CSS가 이제 HD 디스플레이를 지원하게 되며, 지원하는 브라우저에서는 50% 더 많은 색상을 표현 가능

글 목차

• 오버뷰
  • 색영역(Color Gamut)이란 ?
  • 인간의 시각 영역
  • 색공간(Color Space)이란?
  • 색영역과 색공간 요약
• 더 많은 색상, 공간, 디버그 결과에 접근하는 법
  • 고전 색 공간에 대한 검토
  • 새로운 웹 컬러 공간 만나기
  • 색상 보간(Interpolation)
  • 영역 클램핑
  • 색 공간 선택하기
• HD CSS 색상으로 마이그레이션 하기
  • 색영역 및 색공간 지원 확인
  • 크롬 개발자 도구로 색상 디버깅
• 결론

5. 2023년 이후의 반응형 디자인 가이드 (링크)

• Responsive Design 소개
  • 최신 CSS 사용
  • 미디어 쿼리 사용
• 몇년간의 반응형 디자인
  • 부트스트랩, 미디어쿼리, Fixed-Width
• 반응형 디자인과 지루한 웹사이트
• 웹은 기본적으로 반응형
• 2023년 이후의 반응형 디자인
  • 콘텐츠 길이에 반응
  • 뷰포트에 반응
  • 컨테이너에 반응
  • 사용자 설정에 반응
• 반응형 웹사이트 구축의 핵심은 웹사이트를 유동적(fluid)으로 만드는 것
• 반응형 레이아웃을 구축하는 최신 방법
  • CSS Flexbox
  • CSS Grid Layout
  • Fluid Sizing
  • Size Container Queries
  • Style Container Queries
  • User preference Media Queries
  • Logical Properties
  • Defensive CSS
• 결론

6. ChatGPT는 웹의 흐릿한 JPEG입니다 (링크)

긱뉴스 글 - https://news.hada.io/topic?id=8477

7. 2023년의 웹 개발 트렌드 (링크)

• (Meta) Frameworks : Next.js, Remix, Sveltekit, SolidStart
• 어플리케이션과 렌더링 패턴 : CSR, SSR, SSG, ISR(Incremental Static Regeneration), Streaming SSR, On-Demand ISR
• Edge에서의 서버리스 : Cloudflare Workers, Deno Deploy, Vercel
• 데이터베이스 르네상스 : PlanetScale (MySql), Neon (PostgreSQL), Xata (PostgreSQL), Fly.io, Railway, Supabase
• 자바스크립트 런타임 : Node.js, Deno, Bun, WinterCG(Web-interoperable Runtimes Community Group)
• 모노레포 : Turborepo, Nx, Rush, Lerna
• 유틸리티-퍼스트 CSS : Tailwind CSS, UnoCSS, CSS Modules, vanilla-extract, linaria, astroturf, compiled
• E2E Type Safety with TypeScript : tRPC, Zod, Prisma, TanStack Router
• 빌드 도구 : Vite, esbuild, Vitest, Turbopack
• AI 주도 개발 : GitHub Copilot, ChatGPT
• 그외 : Tauri, Playwright, Warp, Fig, CSS Container Queries, htmx

8. StatiCrypt - 정적 HTML 페이지를 암호로 보호하기 (링크)

• AES-256을 사용해서 HTML 파일을 암호화
• 암호를 입력 받아서 매칭되면 내용을 볼 수 있게 함
• 정적인 HTML 파일도 가능하므로 백엔드 없이 Netlify, GitHub Pages 등에 업로드 가능
• CLI 또는 웹페이지를 통해서 암호화 지원

9. 안전하게 따라 할 수 있는 비주얼 디자인 규칙들 (링크)

순수한 검은색/흰색 대신 검은색과 흰색에 가까운 색을 사용하기

• 순수한 블랙은 스크린에서 부자연스러워 보이고, 순백은 너무 밝음
• #000000 과 #FFFFFF 대신 #222222 와 #F2F2F2 를 사용
• 이후엔 블랙/화이트를 지칭하면 이 색들을 이야기 하는 것

중성색(뉴트럴)에 색을 입히기

• 중성색은 보통 블랙/화이트/그레이
• 색을 사용한다면 중성색들에 약간만 색을 추가할 것 (grey 대신 light red, black 대신 dark blue)
• 이렇게 하면 색상 팔레트가 더 일관성 있게 느껴짐
• HSB를 사용한다면 약 5% 이하의 채도만 추가하면 됨

중요한 엘리먼트에는 고대비(high contrast)를 사용할 것

• 사용자가 주목해야 하는 모든 요소들 : 버튼, 콘텐츠 등
• 구분선, 드롭쉐도우 등은 대비를 최대한 적게 사용

디자인의 모든 요소는 신중해야함

• 여백, 정렬, 사이즈, 간격, 색상, 그림자 를 포함한 모든 것
• 누군가 디자인의 특정 부분을 물어봤을 때 왜 그렇게 했는지를 설명할 수 있어야 함

Optical(시각적) 정렬이 수학적 정렬 보다 나을 때가 많음

• 특정 형태들은 눈으로 봤을 때 정렬되게 표현하는게 더 나을 때가 있음
• 눈으로 정렬 하려면 연습이 필요하지만, 규칙적으로 해보면 빠르게 캐치 가능

큰 글자는 글자 간격과 줄 높이를 낮추고, 작은 글자에서는 올릴 것

• 모든 텍스트에 적용 됨
• 글자가 클수록, 각 글자와 라인간에 여백이 조금 필요함. 반대 역시 마찬가지

컨테이너의 테두리는 컨테이너 및 배경과 대비되어야 함

• 테두리는 컨테이너 내부와 배경색 사이가 아닌 배경보다 더 어두운 색상으로

모든 것들은 다른 것과 정렬 되어야 함

• 정렬은 사물들이 서로 관련되어 있다는 것을 알려줌
• 무언가가 다른 것과 정렬되어 있지 않다면 디자인에 속하지 않는 것처럼 느껴짐
• 이상적으로는 각 요소가 일종의 논리에 의해서 다른 요소들과 정렬되어야 함

팔레트의 색상에는 고유한 밝기 값이 있어야 함

• 색상의 밝기 값이 서로 다른 경우, 색조 뿐만 아니라 밝기에서도 고유한 룩앤필을 줄 수 있음
• 이렇게 하면 각 색상들이 서로 많이 경쟁하지 않기 때문에 더 좋은 색상팔레트가 됨

중성색에 색을 입힌다면, Warm 또는 Cool 중 하나만 써야함. 둘 다 쓰지 말 것

• 중성색에 웜/쿨 컬러를 같이 사용하게 되면 컬러팔레트가 일관성있게 느껴지지 않음

사이즈들은 수학적으로 관련되어야 함

• 요소들간의 간격이나, 크기 등은 일종의 축척에 의해 결정 되어야 함. 이렇게 하면 디자인이 일관되게 보이도록 도와줌
• 예제에서는 모든 요소들을 8의 배수로 사용. 간격은 8/16/24/32, 줄높이는 48/40/24, 텍스트 크기는 40/32/16

요소들은 시각적 가중치의 순서대로 배치되어야 함

• 한 행이나 열에 여러개의 요소들이 있고, 그중 일부가 다른 것보다 시각적으로 더 무겁다면(버튼 2개와 링크3개 처럼)
  시각적으로 가장 무거운 요소가 먼저오고 가벼운 요소가 순서대로 마지막에 와야함
• 주의할 점은 시각적으로 가장 무거운 요소가 가장 바깥에 있어야 한다는 것

가로 그리드를 사용할 경우, 12개의 컬럼을 이용할 것

• 컬럼 단위로 나눈다면 12개로 하면 1,2,3,4 컬럼을 사용할 수 있어서 많은 유연성을 제공

대비가 높은 지점 사이에 간격을 둘 것

• 우리의 눈은 대비를 기준으로 요소의 가장자리를 찾기 때문에, 대비되는 지점 사이에는 간격이 있을 것으로 기대함

더 가까운 요소들은 더 밝아야 함

• 화면의 요소들이 사용자에게 가까울수록(더 앞쪽에 있을 수록) 더 밝아야함
• 이것은 라이트/다크모드에도 같이 적용 됨. 실제 세상이 이렇게 작동하기 때문

드롭 쉐도우 Blur 값을 거리 값의 두배로 설정할 것

• Y축으로 4픽셀 확장되는 그림자를 설정할 경우, 블러 값은 8 픽셀로 설정
• 요소가 보는 사람에게 "가까워 지면" 그림자의 불투명도(opacity)도 낮추는게 좋음

복잡한 것 위에 단순한 것을 두거나, 단순한 것 위에 복잡한 것을 둘 것

• 복잡한 배경(화려한 그라데이션)은 전면(텍스트)가 단순할 때 가장 잘 보임
• 앞이 복잡하다면 간단한 배경이 가장 적합
• 단순한 것 위에 단순한 것도 가능은 하지만 밋밋해 보임
• 복잡한 것 위에 복잡한 것은 시각적 혼란을 주므로 피해야 함

컨테이너 색상은 밝기 제한내에서 유지할 것

• 배경과 컨테이너 사이의 밝기 차이는 어두운 인터페이스에서는 12%, 밝은 인터페이스에서는 7% 이내여야 함 (HSB 컬러시스템 상의 밝기 값)
• 잘 디자인된 웹사이트 약 100개를 대상으로 컨테이너의 밝기를 배경과 비교하여 확인한 연구에서 알아낸 것

외부 패딩은 내부 패딩과 같거나 더 크게 만들 것

• 컨테이너의 내부 패딩은 컨테이너 내부의 요소 사이의 공간. 외부 패딩은 요소와 컨테이너 가장 자리 사이의 공간
• 외부 패딩은 내부 패딩과 같거나 더 커야함

본문 텍스트는 16px 이상으로 유지

• 16px는 대부분의 브라우저에서 기본 텍스트 크기
• 이 크기 이하의 텍스트는 읽기 어려우므로, 본문에는 사용하지 않는 것이 안전

70자 정도의 줄 길이를 사용할 것

• 줄길이가 60 이나 80인지는 그다지 중요하지 않지만, 어느쪽이든 멀리가면 가독성 문제가 발생할 수 있음

버튼의 가로 패딩은 세로 패딩의 두배로 설정

• 표준 버튼의 패턴은 높이보다 넓음
• 사람들이 버튼으로 인식하게 하려면, 이 패턴을 따르는 것이 좋음

최대 2개의 서체만 사용

• 두번째 서체는 디자인 뒤에 있는 컨셉을 강화할 수 있는 기회
• 또한 디자인에 다양성을 추가하는데 도움이 됨
• 두 개 이상 사용할 필요는 거의 없으며, 디자인이 시각적으로 혼란스럽게 느껴질 수 있음

중첩된 코너를 바르게 처리하기

• 가끔 두개 이상의 둥근 모서리가 중첩되는 경우가 있음
• 제대로 보이게 하려면 내부 모서리 반경을 외부 모서리 반경에서 둘 사이의 거리를 뺀 값으로 설정할 것
• 예) 외부 모서리 반경이 30px 이고, 내부 모서리와 20px 떨어져 있다면 내부 모서리 반경은 10px로

두개의 구분선을 같이 두지 말 것

• 배경 트렌지션, 컨테이너 가장자리, 분할선은 시각적으로 구분하기가 어려움
• 두 개 이상의 구분선이 붙어 있도록 하지 말 것