디자인 & 개발 가이드

ac_unit

애니메이션 2026년 7월 · 8분

CSS 눈 내리는 효과

순수 CSS 눈송이 애니메이션, 무작위 변화, 성능 한계, 시즌 적용법.

shadow

CSS 2026년 7월 · 9분

CSS 박스 섀도우 기법

겹친 그림자, 뉴모피즘, 발광, 섀도우 토큰 시스템과 성능 주의점.

rounded_corner

CSS 2026년 7월 · 8분

CSS border-radius 가이드

8개 값 구문, 타원형 모서리, 알약, 블롭, 스쿼클, 단위 선택 기준.

speed

성능 2026년 7월 · 9분

웹 이미지 최적화 가이드

포맷, 압축, 리사이즈, 지연 로딩, CLS 방지까지 LCP를 줄이는 7단계.

swap_horiz

이미지 2026년 7월 · 7분

WebP 변환 완벽 가이드

브라우저, 명령줄, CMS에서 변환하는 방법과 picture 대체 처리.

branding_watermark

이미지 2026년 7월 · 7분

사진에 워터마크 넣는 방법

유형별 차이, 배치 전략, 불투명도와 크기, 제거 방지.

compress

이미지 2026년 7월 · 9분

무료 이미지 압축 도구 10선

같은 이미지 50장으로 테스트 — 용량, 화질, 속도, 개인정보, 무료 한도.

auto_fix_high

이미지 2026년 7월 · 8분

무료 배경 제거 도구 10선

AI 도구 10종을 같은 이미지 30장으로 — 가장자리 품질과 개인정보.

compare

비교 2026년 7월 · 7분

Remove.bg 대안 7가지

크레딧 제한과 서버 업로드가 걸린다면. 품질과 무료 한도, 개인정보 비교.

subject

타이포그래피 2026년 7월 · 7분

로렘 입숨 완벽 가이드

유래와 대안, 그리고 플레이스홀더를 써야 할 때와 절대 쓰면 안 되는 때.

auto_awesome_mosaic

이미지 2026년 7월 · 7분

사진 콜라주 만들기

레이아웃 다섯 가지, 어울리는 사진 고르기, 간격, 용도별 비율, 구도 원칙.

compare

이미지 2026년 7월 · 8분

Squoosh vs TinyPNG vs StudioLimb

무료 이미지 압축 도구 3종 정면 비교 — 품질, 개인정보, 속도, 배치, 최신 포맷.

compare_arrows

이미지 2026년 7월 · 9분

SVG vs PNG vs WebP

포맷 선택 하나로 페이지 무게가 40~70% 달라집니다. 용도별 비교와 2026년 결정 트리.

design_services

디자인 2026년 7월 · 10분

2026년 모던 웹 디자인의 핵심

깊이, 성능, 타이포그래피, 접근성, 로컬 우선 설계, 디자인 시스템, 반응형.

straighten

CSS 2026년 7월 · 7분

PX to REM 변환 가이드

전체 환산표, rem이 존재하는 이유, em과의 차이, 62.5% 트릭의 문제점.

image

개발 2026년 7월 · 8분

플레이스홀더 이미지 완벽 가이드

SVG 사각형부터 LQIP, BlurHash, 스켈레톤 로더까지 코드와 함께.

compress

이미지 2026년 7월 · 9분

TinyPNG 대안 7가지 (2026)

Squoosh, Compressor.io, ImageOptim, ShortPixel 외 3개를 솔직하게 비교 — 개인정보, 무료 한도, 압축 품질.

palette

색상 2026년 4월 · 8분

Coolors 대안 7가지 (2026)

Adobe Color, Khroma, Realtime Colors, Color Hunt, Paletton, Huemint 비교.

blur_on

CSS 2026년 4월 · 8분

글래스모피즘 CSS 튜토리얼

backdrop-filter로 프로스티드 글래스 UI를 만드는 방법 — 브라우저 지원과 성능 주의점 포함.

waves

SVG 2026년 4월 · 7분

SVG 웨이브 구분선 만들기

큐빅 베지어 곡선, 반응형 사이징, 패럴랙스 레이어 웨이브를 순수 HTML과 CSS로.

share

이미지 2026년 4월 · 10분

소셜미디어 이미지 사이즈 2026

인스타그램, 페이스북, X, 링크드인, 틱톡, 유튜브, 핀터레스트의 정확한 치수.

person_cancel

이미지 2026년 4월 · 9분

이미지 배경 제거하는 방법

기기 내 AI로 무료로 배경 제거. 작동 원리, 한계, 깨끗한 투명 PNG 만드는 법.

crop

이미지 2026년 4월 · 8분

이미지 크기 조정 방법

화질 손실 없이 이미지 크기 조정. 리샘플링 알고리즘, 화면비, 업스케일 vs 다운스케일.

gradient

CSS 2026년 4월 · 9분

CSS 그라디언트 가이드

선형, 방사형, 원뿔형, 메시 그라디언트, 그라디언트 텍스트, 애니메이션 레시피.

match_case

타이포그래피 2026년 4월 · 9분

폰트 페어링 가이드

페어링 원칙과 검증된 12개 Google Fonts 조합. 복사해서 바로 쓰는 CSS 코드.

touch_app

CSS 2026년 4월 · 10분

CSS 호버 효과 15가지 예제

버튼, 카드, 이미지, 아이콘용 호버 패턴 — JavaScript 없이.

compress

이미지 2026년 4월 · 8분

이미지 압축 포맷 비교

JPG, PNG, WebP, AVIF — 사용 사례별로 적합한 포맷 선택하기.